chore: Add timestamp to unkey UI

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { DEFAULT_DRAGGABLE_WIDTH } from "@/app/(app)/logs/constants";
 import { ResizablePanel } from "@/components/logs/details/resizable-panel";
-import { TimestampInfo } from "@/components/timestamp-info";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
+import { TimestampInfo } from "@unkey/ui";
 import Link from "next/link";
 import { useMemo } from "react";
 import { LogHeader } from "./components/log-header";

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx

@@ -1,11 +1,11 @@
 "use client";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@/lib/utils";
 import type { KeysOverviewLog } from "@unkey/clickhouse/src/keys/keys";
 import { Ban, BookBookmark } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { Button, Empty } from "@unkey/ui";
 
 import { useSort } from "@/components/logs/hooks/use-sort";

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/components/last-used.tsx

@@ -1,8 +1,8 @@
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { ChartActivity2 } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { useRef, useState } from "react";
 import { STATUS_STYLES } from "../utils/get-row-class";
 

apps/dashboard/app/(app)/audit/components/table/log-details/components/log-footer.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { RequestResponseDetails } from "@/components/logs/details/request-response-details";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import type { AuditLog } from "@/lib/trpc/routers/audit/schema";
+import { TimestampInfo } from "@unkey/ui";
 import { FunctionSquare, KeySquare } from "lucide-react";
 
 type Props = {

apps/dashboard/app/(app)/audit/components/table/logs-table.tsx

@@ -1,9 +1,9 @@
 "use client";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable, type VirtualTableRef } from "@/components/virtual-table";
 import type { Column } from "@/components/virtual-table/types";
 import type { AuditLog } from "@/lib/trpc/routers/audit/schema";
+import { TimestampInfo } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { FunctionSquare, KeySquare } from "lucide-react";
 import { useEffect, useRef } from "react";

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-footer.tsx

@@ -2,10 +2,10 @@
 import { RED_STATES, YELLOW_STATES } from "@/app/(app)/logs/constants";
 import { extractResponseField, getRequestHeader } from "@/app/(app)/logs/utils";
 import { RequestResponseDetails } from "@/components/logs/details/request-response-details";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
+import { TimestampInfo } from "@unkey/ui";
 
 type Props = {
   log: Log;

apps/dashboard/app/(app)/logs/components/table/logs-table.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@/lib/utils";
 import type { Log } from "@unkey/clickhouse/src/logs";
 import { BookBookmark, TriangleWarning2 } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { Button, Empty } from "@unkey/ui";
 import { useMemo } from "react";
 import { isDisplayProperty, useLogsContext } from "../../context/logs";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useSort } from "@/components/logs/hooks/use-sort";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { formatNumber } from "@/lib/fmt";
 import { cn } from "@/lib/utils";
 import type { RatelimitOverviewLog } from "@unkey/clickhouse/src/ratelimits";
 import { Ban, BookBookmark } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { Button, Empty } from "@unkey/ui";
 import { useState } from "react";
 import { InlineFilter } from "./components/inline-filter";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-footer.tsx

@@ -2,10 +2,10 @@
 import { RED_STATES, YELLOW_STATES } from "@/app/(app)/logs/constants";
 import { extractResponseField, getRequestHeader } from "@/app/(app)/logs/utils";
 import { RequestResponseDetails } from "@/components/logs/details/request-response-details";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import type { RatelimitLog } from "@unkey/clickhouse/src/ratelimits";
+import { TimestampInfo } from "@unkey/ui";
 
 type Props = {
   log: RatelimitLog;

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { safeParseJson } from "@/app/(app)/logs/utils";
-import { TimestampInfo } from "@/components/timestamp-info";
 import { Badge } from "@/components/ui/badge";
 import { VirtualTable } from "@/components/virtual-table/index";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@/lib/utils";
 import type { RatelimitLog } from "@unkey/clickhouse/src/ratelimits";
 import { BookBookmark } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { Button, Empty } from "@unkey/ui";
 import { useMemo } from "react";
 import { DEFAULT_STATUS_FLAG } from "../../constants";

apps/dashboard/components/logs/control-cloud/control-pill.tsx

@@ -1,6 +1,6 @@
-import { TimestampInfo } from "@/components/timestamp-info";
 import { cn } from "@/lib/utils";
 import { XMark } from "@unkey/icons";
+import { TimestampInfo } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { type KeyboardEvent, useEffect, useRef } from "react";
 import type { FilterValue } from "../validation/filter.types";

apps/engineering/content/design/components/button.mdx

@@ -694,6 +694,188 @@ Success variant with ghost style for subtle positive actions.
   </div>
 </RenderComponentWithSnippet>
 
+### Info - Primary
+
+Info variant with solid background for positive or confirming actions.
+
+<RenderComponentWithSnippet>
+  <div className="flex flex-col gap-6">
+    <div>
+      <h4 className="text-sm font-medium mb-2">Light</h4>
+      <div className="flex flex-wrap items-center gap-4">
+        <Button variant="primary" color="info">
+          Default
+        </Button>
+        <Button
+          variant="primary"
+          color="info"
+          className="!bg-info-9/90"
+        >
+          Hover
+        </Button>
+        <Button
+          variant="primary"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="primary" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="primary" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+
+    <div>
+      <h4 className="text-sm font-medium mb-2">Dark</h4>
+      <div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
+        <Button variant="primary" color="info">
+          Default
+        </Button>
+        <Button
+          variant="primary"
+          color="info"
+          className="!bg-info-9/90"
+        >
+          Hover
+        </Button>
+        <Button
+          variant="primary"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="primary" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="primary" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+  </div>
+</RenderComponentWithSnippet>
+
+### Info - Outline
+
+Info variant with outline style for secondary positive actions.
+
+<RenderComponentWithSnippet>
+  <div className="flex flex-col gap-6">
+    <div>
+      <h4 className="text-sm font-medium mb-2">Light</h4>
+      <div className="flex flex-wrap items-center gap-4">
+        <Button variant="outline" color="info">
+          Default
+        </Button>
+        <Button variant="outline" color="info" className="!bg-grayA-2">
+          Hover
+        </Button>
+        <Button
+          variant="outline"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="outline" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="outline" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+
+    <div>
+      <h4 className="text-sm font-medium mb-2">Dark</h4>
+      <div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
+        <Button variant="outline" color="info">
+          Default
+        </Button>
+        <Button variant="outline" color="info" className="!bg-grayA-2">
+          Hover
+        </Button>
+        <Button
+          variant="outline"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="outline" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="outline" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+  </div>
+</RenderComponentWithSnippet>
+
+### Info - Ghost
+
+Info variant with ghost style for subtle positive actions.
+
+<RenderComponentWithSnippet>
+  <div className="flex flex-col gap-6">
+    <div>
+      <h4 className="text-sm font-medium mb-2">Light</h4>
+      <div className="flex flex-wrap items-center gap-4">
+        <Button variant="ghost" color="info">
+          Default
+        </Button>
+        <Button variant="ghost" color="info" className="!bg-info-3">
+          Hover
+        </Button>
+        <Button
+          variant="ghost"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="ghost" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="ghost" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+
+    <div>
+      <h4 className="text-sm font-medium mb-2">Dark</h4>
+      <div className="bg-black p-4 rounded-md flex flex-wrap items-center gap-4 dark">
+        <Button variant="ghost" color="info">
+          Default
+        </Button>
+        <Button variant="ghost" color="info" className="!bg-info-3">
+          Hover
+        </Button>
+        <Button
+          variant="ghost"
+          color="info"
+          className="!ring-4 !ring-info-6 !border-info-11"
+        >
+          Focus
+        </Button>
+        <Button variant="ghost" color="info" loading>
+          Loading
+        </Button>
+        <Button variant="ghost" color="info" disabled>
+          Disabled
+        </Button>
+      </div>
+    </div>
+  </div>
+</RenderComponentWithSnippet>
+
 ## Size Variants
 
 All button variants and color schemes can be combined with different sizes to fit various UI contexts.
@@ -872,4 +1054,4 @@ When using the Button component:
   - Add appropriate aria attributes for complex button behaviors
 - **Responsive behavior**:
   - On mobile, ensure buttons are at least 44×44px (touch target size)
-  - Consider stacking buttons vertically on very small screens
+  - Consider stacking buttons vertically on very small screens