@zedtech/zedkit-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 zedtech-fr
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @zedtech/zedkit-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Admin UI kit: design tokens, dark/light theme, and shadcn/ui-based
+building blocks (MIT, see [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md)).
+Neutral and calm by default. Not published to npm yet — install
+from a packed tarball.
+
+## Adopt in 3 lines
+
+```css
+/* app/globals.css (Tailwind v4, PostCSS or Vite plugin) */
+@import "@zedtech/zedkit-ui/styles.css";
+@source "../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
+```
+
+```tsx
+import { cn } from "@zedtech/zedkit-ui"; // components land per slice; see CATALOG.md
+```
+
+Needs: React 19 + Tailwind v4 in the consumer (peer dependencies),
+`.dark` class strategy for dark mode (`next-themes` recommended).
+
+## Contents
+
+- `styles.css`: tokens + dark/light theme preset.
+- `cn()`: classnames merge.
+- Primitives: `Button`, `Badge`, `Input`, `Label`, `Separator`,
+  `Skeleton` (see CATALOG.md for usage).
+- Overlays: `Dialog` set, `ConfirmDialog`, `Toaster`, `SecretField`.
+- Data: `DataTable` (sort, filter, pagination, empty/loading/
+  error states) + `Table` primitives.
+- Layout: `AppShell` (sidebar + topbar + main slots), `PageHeader`.
+- Wizard: `WizardSteps` (step indicator), `OptionCards` (multi-select cards).
+- Detail: `DetailPanel` (key-value rows), `LivePulse` (live indicator).
+- Planned next: preview gallery, frontend guardrails.
+
+## Develop
+
+`pnpm --filter @zedtech/zedkit-ui test|typecheck|lint|build`.
+Component tests render with Testing Library + jsdom.
+
+## Gallery
+
+`pnpm --filter @zedtech/zedkit-ui preview` builds and serves a static gallery
+of every component in every state at http://127.0.0.1:4123/ (`/dark`
+for the dark theme). Static server render for visual review only —
+behavior stays covered by unit tests. `pnpm --filter @zedtech/zedkit-ui
+smoke` runs the Playwright smoke over both themes (sections render,
+zero console errors) and writes screenshots to test-results/.

package/package.json

@@ -1,6 +1,86 @@
 {
   "name": "@zedtech/zedkit-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "description": "Admin UI kit: design tokens, dark/light theme, shadcn/ui-based components (MIT, see THIRD_PARTY_NOTICES.md).",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zedtech-fr/zedkit",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "imports": {
+    "#*": "./src/*",
+    "#preview/*": "./preview/*"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./src/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "tailwindcss": "4.3.3"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "6.0.0",
+    "@radix-ui/react-checkbox": "1.4.1",
+    "@radix-ui/react-dialog": "1.3.1",
+    "@radix-ui/react-dropdown-menu": "2.2.1",
+    "@radix-ui/react-label": "2.1.17",
+    "@radix-ui/react-separator": "1.2.0",
+    "@radix-ui/react-select": "2.4.1",
+    "@radix-ui/react-slot": "1.5.0",
+    "@radix-ui/react-switch": "1.4.1",
+    "@radix-ui/react-tabs": "1.2.1",
+    "@tanstack/react-table": "9.3.1",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "1.61.0",
+    "next-themes": "0.4.6",
+    "react-hook-form": "7.91.0",
+    "sonner": "2.0.8",
+    "tailwind-merge": "3.7.0",
+    "zod": "4.6.7"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "4.3.3",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "axe-core": "4.14.0",
+    "jsdom": "30.1.3",
+    "postcss": "8.5.31",
+    "typescript": "5.9.3",
+    "vitest": "2.1.9",
+    "vitest-axe": "0.1.0",
+    "@zedtech/zedkit-core": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit -p tsconfig.tests.json",
+    "lint": "eslint src tests preview",
+    "preview:build": "pnpm build && node ./preview/build.mjs",
+    "preview": "pnpm preview:build && node ./preview/serve.mjs",
+    "smoke": "playwright test"
+  }
 }

package/src/alert.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils.js";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg]:text-foreground [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  // Children are explicit (not part of the props spread) so the
+  // heading-has-content rule can see them; renders identically.
+  ({ className, children, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 leading-none font-medium tracking-tight", className)} {...props}>
+      {children}
+    </h5>
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/app-shell.tsx

@@ -0,0 +1,24 @@
+import type * as React from "react";
+
+import { cn } from "./utils.js";
+
+export interface AppShellProps {
+  sidebar: React.ReactNode;
+  topbar?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function AppShell({ sidebar, topbar, children, className }: AppShellProps) {
+  return (
+    <div className={cn("flex min-h-svh w-full", className)}>
+      <aside className="hidden w-64 shrink-0 border-r bg-muted/40 md:block">{sidebar}</aside>
+      <div className="flex min-w-0 flex-1 flex-col">
+        {topbar ? (
+          <header className="sticky top-0 z-10 border-b bg-background/95 backdrop-blur">{topbar}</header>
+        ) : null}
+        <main className="flex-1 p-4 md:p-6">{children}</main>
+      </div>
+    </div>
+  );
+}

package/src/badge.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./utils.js";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/button.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "./utils.js";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/card.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import { cn } from "./utils.js";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("leading-none font-semibold tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/checkbox.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "./utils.js";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer grid h-4 w-4 shrink-0 place-content-center rounded-sm border border-primary shadow focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

package/src/confirm-dialog.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "./button.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog.js";
+
+export interface ConfirmDialogProps {
+  /** Element that opens the dialog (rendered via Trigger asChild). */
+  trigger: React.ReactNode;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  onConfirm: () => void;
+}
+
+/**
+ * Destructive-action confirmation: trigger opens a dialog, Confirm
+ * runs the callback and closes. Cancel and backdrop dismiss.
+ */
+function ConfirmDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+}: ConfirmDialogProps) {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            {cancelLabel}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              onConfirm();
+              setOpen(false);
+            }}
+          >
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export { ConfirmDialog };

package/src/data-table.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import * as React from "react";
+import {
+  columnFilteringFeature,
+  createColumnHelper,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSortingFeature,
+  tableFeatures,
+  useTable,
+  type CellData,
+  type ColumnDef,
+  type RowData,
+  type SortDirection,
+} from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Skeleton } from "./skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { cn } from "./utils.js";
+
+const features = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+});
+
+export type DataTableColumn<TData extends RowData, TValue extends CellData> = ColumnDef<
+  typeof features,
+  TData,
+  TValue
+>;
+
+export function createDataTableColumns<TData extends RowData>() {
+  return createColumnHelper<typeof features, TData>();
+}
+
+export interface DataTableProps<TData extends RowData> {
+  // `any` mirrors upstream: TanStack's own helper.columns() returns
+  // Array<ColumnDef<TFeatures, TData, any>> since TValue is invariant.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ReadonlyArray<DataTableColumn<TData, any>>;
+  data: TData[];
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+  filterPlaceholder?: string;
+  pageSize?: number;
+}
+
+function SortIcon({ direction }: { direction: SortDirection | false }) {
+  const className = "size-3.5 opacity-60";
+  if (direction === "asc") return <ArrowUp className={className} aria-hidden />;
+  if (direction === "desc") return <ArrowDown className={className} aria-hidden />;
+  return <ArrowUpDown className={className} aria-hidden />;
+}
+
+export function DataTable<TData extends RowData>({
+  columns,
+  data,
+  loading = false,
+  error = null,
+  emptyMessage = "No results.",
+  filterPlaceholder = "Filter…",
+  pageSize = 10,
+}: DataTableProps<TData>) {
+  const table = useTable({ features, columns, data });
+  const rows = table.getRowModel().rows;
+  const { pageIndex } = table.state.pagination;
+
+  React.useEffect(() => {
+    table.setPageSize(pageSize);
+  }, [table, pageSize]);
+
+  return (
+    <div className="space-y-4">
+      <Input
+        placeholder={filterPlaceholder}
+        value={table.state.globalFilter ?? ""}
+        onChange={(event) => table.setGlobalFilter(event.target.value)}
+        className="max-w-sm"
+        aria-label={filterPlaceholder}
+      />
+      <Table aria-busy={loading || undefined} aria-label={loading ? "Loading" : undefined}>
+      <TableHeader>
+        {table.getHeaderGroups().map((group) => (
+          <TableRow key={group.id}>
+            {group.headers.map((header) => (
+              <TableHead key={header.id}>
+                {header.isPlaceholder || !header.column.getCanSort() ? (
+                  <table.FlexRender header={header} />
+                ) : (
+                  <button
+                    type="button"
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={cn("inline-flex items-center gap-1 hover:text-foreground")}
+                  >
+                    <table.FlexRender header={header} />
+                    <SortIcon direction={header.column.getIsSorted()} />
+                  </button>
+                )}
+              </TableHead>
+            ))}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {error !== null ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} role="alert" className="text-destructive">
+              {error}
+            </TableCell>
+          </TableRow>
+        ) : loading ? (
+          [0, 1, 2].map((row) => (
+            <TableRow key={row}>
+              {columns.map((_column, index) => (
+                <TableCell key={index}>
+                  <Skeleton className="h-4 w-full" />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        ) : rows.length === 0 ? (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="text-center text-muted-foreground">
+              {emptyMessage}
+            </TableCell>
+          </TableRow>
+        ) : (
+          rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getAllCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  <table.FlexRender cell={cell} />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        )}
+      </TableBody>
+      </Table>
+      <div className="flex items-center justify-end gap-2">
+        <span className="text-sm text-muted-foreground">
+          Page {pageIndex + 1} of {Math.max(table.getPageCount(), 1)}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/detail-panel.tsx

@@ -0,0 +1,26 @@
+import type * as React from "react";
+
+import { cn } from "./utils.js";
+
+export interface DetailItem {
+  label: React.ReactNode;
+  value: React.ReactNode;
+}
+
+export interface DetailPanelProps {
+  items: DetailItem[];
+  className?: string;
+}
+
+export function DetailPanel({ items, className }: DetailPanelProps) {
+  return (
+    <dl className={cn("divide-y divide-border rounded-lg border", className)}>
+      {items.map((item, index) => (
+        <div key={index} className="grid grid-cols-3 gap-4 px-4 py-3 text-sm">
+          <dt className="text-muted-foreground">{item.label}</dt>
+          <dd className="col-span-2 font-medium">{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}