@brokenrubik/ui 0.0.0-stage → 0.1.0

package/docs/figma-vs-tailwind.md

@@ -0,0 +1,135 @@
+# BR Admin Library vs Tailwind / shadcn defaults
+
+What the BR Admin Library (Figma `ONZyUryZr526mtbex2HVPk`, pages *Foundations* `2004:2` and
+*Components · Base* `2004:3`) changes compared with Tailwind v4 and shadcn/ui out of the box.
+Read from the Figma file on 2026-11-09; colors checked again through the Figma MCP on 2026-11-11. Every value here is in `src/styles/tokens.css` or
+`src/styles/theme.css`.
+
+## 1. Color tokens
+
+Token names are the shadcn names, so `var(--primary)` in code is `primary` in Figma.
+
+| Token | shadcn default (neutral) | BR light | BR dark |
+| --- | --- | --- | --- |
+| `background` | white | `#ffffff` | `#0f172a` (slate-900) |
+| `foreground` | neutral-950 | `#0f172a` | `#e2e8f0` |
+| `card` / `popover` | white | `#ffffff` | `#162032` (slate-875, not in Tailwind) |
+| `primary` | neutral-900 | **`#9547ff` BR violet** | `#9547ff` |
+| `primary-foreground` | neutral-50 | `#ffffff` | `#ffffff` |
+| `secondary`, `muted`, `accent` | neutral-100 | `#f1f5f9` (slate-100) | `#1e293b`; accent `rgb(255 255 255 / .05)` |
+| `muted-foreground` | neutral-500 | `#64748b` (slate-500) | `#94a3b8` |
+| `border` | neutral-200 | `#e2e8f0` (slate-200) | `rgb(255 255 255 / .1)` |
+| `input` | = border | **`#8391a7`** (3:1 contrast, WCAG non-text) | `#64748b` |
+| `ring` | neutral-400 | `#9547ff` | `#9547ff` |
+| `destructive` | red-ish oklch | `#dc2626` (red-600) | `#dc2626` |
+
+**Tokens that shadcn does not have** (all in Figma):
+
+- `primary-strong` `#6b1fd0` / `#a875ff` and `primary-tint` `#f4edff` / violet 20 %: violet as
+  text and as a soft fill. Rule: never use `primary` for text.
+- State triads, *base* (dots, bars) + `-strong` (text, icons) + `-tint` (soft fills):
+  `success` `#10b981` / `#047857` / `#ecfdf5`, `warning` `#f59e0b` / `#b45309` / `#fffbeb`,
+  `destructive` `#dc2626` / `#dc2626` / `#fef2f2`. Dark: strong = 400 shades, tint = base 15 %.
+- `highlight` `#dff95f` BR lime, "you are here" only, with `highlight-foreground` `#0f172a`.
+- `brand-coral` `#ff707a`: marketing only.
+- `sidebar-*`: navy sidebar in both themes (`#0f172a` light, `#0b1120` dark), lime marker, plus
+  `sidebar-muted-foreground`, `sidebar-label` and `sidebar-accent-strong` (shadcn has none of
+  them). `sidebar-ring` is violet `#a875ff` on the navy sidebar and `#9547ff` on the light one.
+- Two more Figma modes, *Light · Sidebar claro* and *Dark · Sidebar claro*, re-point only the
+  sidebar tokens (`.sidebar-light` on `<html>`, in either theme). In the dark one, the `app-*`
+  colors keep their light values.
+- `info` `#3b82f6` / `info-strong` `#1d4ed8` / `info-tint` `#eff6ff` (dark: `#3b82f6` /
+  `#60a5fa` / blue 15 %), the same triad as the other states.
+- `overlay`: the dialog and sheet backdrop, black at 50 % (dark: 60 %).
+- `surface-subtle` `#fbfdfd` (dark: = `background`): a slightly raised page area.
+- `chart-1…5`: violet, slate-500, violet-300 `#c4a6ff`, slate-300, violet-700.
+- `app-proma`, `app-folio`, `app-docubuilder`, `app-timma`, `app-mara`: app identity colors
+  (logo, app icon, App Rail only).
+
+**Source:** every color above is a Figma variable in the *Theme* collection with the code syntax
+`var(--name)`. The values were read through the Figma MCP on 2026-11-11
+(`visual/figma/variables.json`). The only token that is not a Figma variable is `--radius`, the
+base that the radius scale is derived from.
+
+## 2. Radius
+
+| | shadcn (`--radius: .625rem`) | Tailwind v4 default | **BR (Figma radius/\*)** |
+| --- | --- | --- | --- |
+| xs | – | 2 px | **4 px** (checkbox, muted key chip) |
+| sm | 6 px | 4 px | **5 px** (menu item, toggle item, close button) |
+| md | 8 px | 6 px | **6 px** (input, select, badge, icon button, menu panel, tooltip) |
+| lg | 10 px | 8 px | **8 px** (button, card, alert, popover, toast) |
+| xl | 14 px | 12 px | **12 px** (dialog) |
+
+One knob, as in shadcn: `--radius: 0.5rem`; the scale is `lg = radius`, `md = −2`, `sm = −3`,
+`xs = −4`, `xl = +4`.
+
+## 3. Shadows (Figma effect styles, slate-900 tinted, not black)
+
+| | Tailwind v4 | **BR** |
+| --- | --- | --- |
+| `shadow-xs` | `0 1px 2px 0 rgb(0 0 0 / .05)` | `0 1px 2px 0 rgb(15 23 42 / .05)` |
+| `shadow-md` | `0 4px 6px -1px / .1, 0 2px 4px -2px / .1` | `0 4px 12px -2px / .08, 0 2px 4px -2px / .05` |
+| `shadow-lg` | `0 10px 15px -3px / .1, 0 4px 6px -4px / .1` | `0 16px 32px -8px / .16, 0 4px 8px -4px / .06` |
+
+Cards are flat (no shadow). Outline buttons, inputs, switch thumb: `shadow-xs`. Menus,
+popovers, tooltips, calendar: `shadow-md`. Dialogs, sheets, toasts, command: `shadow-lg`.
+
+## 4. Typography
+
+Tailwind: system font, `text-sm` = 14/20 is the usual UI size. **BR: IBM Plex Sans / Plex Mono
+(the package loads them, `fonts.css`), a dense 13 px base.** The Figma text styles are `text-*`
+utilities (size, line height, tracking, weight); Tailwind's own `text-xs … text-9xl` stay.
+
+| Utility | Figma style | Size / line | Weight | Tracking |
+| --- | --- | --- | --- | --- |
+| `text-display` | Heading/Display | 32/40 | 600 | −0.48 |
+| `text-page-title` | Heading/Page title | 20/28 | 600 | −0.4 |
+| `text-section` | Heading/Section | 15/20 | 600 | −0.2 |
+| `text-card-title` | Heading/Card | 14/20 | 600 | −0.1 |
+| `text-body-lg` | Body/Large | 15/22 | 400 | 0 |
+| `text-body` | Body/Default | **13/20** | 400 | 0 |
+| `text-body-sm` | Body/Small | 12/16 | 400 | 0 |
+| `text-caption` | Label/Caption | 11/16 | 400 | 0 |
+| `text-overline` | Label/Overline (+ `uppercase`) | 11/16 | 500 | 0.4 |
+| `text-nav` / `text-nav-label` | Nav/Item, Nav/Group label | 14/20, 12/16 | 500 | −0.15, 0 |
+| `text-initials`, `-sm` | Label/Initials (small) | 11/16, 8/12 | 600 | 0.2 |
+| `text-mono`, `-sm` | Mono/Default, Mono/Small | 12/16, 11/16 | 400 | 0 |
+| `text-doc-title`, `-h2`, `-body` | Doc/\* | 36/44, 20/28, 15/26 | 600, 600, 400 | |
+
+"Medium" styles = the same utility + `font-medium`.
+
+## 5. Spacing
+
+No change: Figma uses Tailwind's 4 px grid (rows and controls 4–12, sections 24–48).
+
+## 6. Components vs shadcn new-york v4
+
+| Component | shadcn default | BR (Figma) |
+| --- | --- | --- |
+| Button | h-9 / sm h-8, `rounded-md`, `text-sm` | **h-8 / sm h-7**, 8 px radius, Body/Default Medium (13) / Body/Small Medium; secondary = slate fill (not outline) |
+| Icon button | size-9 | **28 / 24 px**, 6 px radius |
+| Input, Select, Date picker | h-9, `border-input` = border color, 3 px ring/50 focus | **h-8**, `input` border `#8391a7`, focus = 1.5 px violet border, Shadow/xs |
+| Badge | pill, solid colors | **20 px, 6 px radius, tint + strong text**, 7 tones |
+| Card | `rounded-xl`, py-6, gap-6, shadow-sm | **8 px radius, p-4, flat** |
+| Dialog | max-w-lg, `rounded-lg`, p-6 | **480 px, 12 px radius**, title 20/28 |
+| Tabs | segmented pill in a muted list | **underline tabs** (40 px, violet 2 px underline); segmented = ToggleGroup |
+| Toggle group | outline items | muted track, white "on" item with Shadow/xs |
+| Menu item | py-1.5, `text-sm` | **32 px**, 5 px radius, Body/Default; shortcut Label/Caption |
+| Alert | card with red text for destructive | **tinted per tone**, -strong text and icon; info = bordered, violet icon |
+| Tooltip | primary fill + arrow | **foreground fill (inverted), no arrow**, Shadow/md |
+| Avatar | grey fallback | 20 / 28 px, **tinted per person** (purple, amber, red, emerald, slate) |
+| Kbd ("Key Chip") | not in shadcn | lime space key (20 / 24) and muted mono hint |
+| Empty state | not in shadcn | bordered box, 40 px icon tile |
+
+## 7. Drift found in the apps (2026-11-09)
+
+| App | Difference from Figma |
+| --- | --- |
+| Proma | `accent` is violet (`#f5effe` / `#6b21d6`) instead of slate; `radius-sm` 4 px (Figma 5); own shadow scale |
+| Timma | dark `accent` `#1e293b` (Figma `rgb(255 255 255 / .05)`); Button `secondary` = outline and primary is semibold (Figma: slate fill, medium) |
+| Mara, Folio | dark `accent` `#1e293b`; ~200 lines of tokens copied per app |
+| DocuBuilder | still shadcn defaults (neutral oklch, `--radius: .625rem`) |
+
+Each app keeps its own copy of the tokens today. With this package they import one file and
+keep only their real exceptions (see README › Extend).

package/docs/visual-testing.md

@@ -0,0 +1,156 @@
+# Visual testing against Figma
+
+The visual test proves that the components look like the BR Admin Library in Figma. It runs in
+CI on every pull request. This page tells how it works, how to run it, how to read the result,
+and how to change it. Read it before you change a component or the test.
+
+## What the test checks
+
+For each component set on the Figma page *Components · Base*:
+
+1. **The spec page draws the set.** `/?spec=Button` renders every variant of the Figma set
+   "Button" at its Figma x/y position, in a box of the same size as the Figma set. The
+   positions come from `playground/src/spec/figma-layout.json`.
+2. **Pixel diff.** Playwright takes a screenshot of that box at 2x. `pixelmatch` compares it with
+   the Figma PNG export (`visual/figma/<node-id>.png`, also 2x). The result is the percentage of
+   pixels that differ.
+3. **Geometry.** In the browser, the test measures each variant (width, height) and the texts and
+   icons in it. It compares them with the Figma boxes in `visual/figma/geometry.json`.
+
+### Pass and fail
+
+| Check | Fails when |
+| --- | --- |
+| Pixel diff | The % is more than the set's value in `visual/baseline.json` + 0.5. A set with a Figma PNG but no baseline also fails. |
+| Size, fixed side | Width or height differs by 0.75 px or more. |
+| Size, "hug" side | Width or height differs by 2.5 px or more. (Figma "hug" means the size follows the text. Chrome draws text up to ±1 px wider or narrower per word than Figma.) |
+| Image size | The screenshot and the Figma PNG have different sizes. |
+| Text and icon positions | Never fails. Differences of 0.75 px or more show as warnings (`--verbose`). |
+
+### Why there is a baseline and not 0 %
+
+Chrome and Figma draw letters differently (rasterization and glyph widths). A component that is
+correct still has 0–3 % of pixels that differ, all on the text edges. The baseline records that
+accepted value for each set. A real change (a wrong padding, color or radius) adds more than
+0.5 points or fails the geometry check.
+
+To confirm that the test catches errors, change `h-8` to `h-9` in the Button default size and
+run `pnpm visual -- --sets Button`: it fails with `H+4 px` on each md variant and a higher pixel
+diff.
+
+## Run it
+
+```bash
+pnpm visual                                         # build + test all sets
+node scripts/visual/compare.mjs --sets Button,Badge # only these sets (needs a build first)
+node scripts/visual/compare.mjs --url http://localhost:5173   # against a running dev server
+node scripts/visual/compare.mjs --verbose           # also print the warnings
+pnpm visual:update                                  # build + test + accept the results
+```
+
+Without `--url`, the script starts `vite preview` on port 4179 with `playground/dist`, so
+build first (`pnpm site:build`; `pnpm visual` does it). Chromium must be installed once:
+`pnpm exec playwright install chromium`.
+
+Exit code: `0` = all pass, `1` = a set failed, `2` = setup error (no build, no token).
+
+## Read the result
+
+The terminal prints one line per set:
+
+```
+PASS    Badge               1.7 % (baseline 1.7 %)
+FAIL    Button              2.21 % (baseline 1.28 %)
+        ✗ Variant=Primary, Size=md: H+4 px
+        ✗ pixel diff 2.21 % > baseline 1.28 % + 0.5
+NO-SPEC Tooltip             –
+```
+
+- `H+4 px`: the code is 4 px higher than Figma. `W-1`: 1 px narrower.
+- `NO-SPEC`: `Spec.tsx` has no renderer for this set, so the set is not tested.
+
+Open `visual/out/report.html` in a browser. For each set it shows the Figma PNG, the code
+screenshot and the diff image (changed pixels in pink). In CI, download the artifact
+*visual-report* from the workflow run and open `out/report.html`.
+
+How to find the cause:
+
+1. Look at the diff image. Pink only on letter edges = text rasterization (normal). Pink on a
+   whole edge, a whole box or a color area = a real difference.
+2. A size error tells which variant and which side. Compare the component classes with the
+   Figma values (padding, height, gap, border width).
+3. Run with `--verbose` to see which text or icon moved, and by how many px.
+
+## Change the test
+
+### Accept a new baseline
+
+Run `pnpm visual:update` only when you know why the numbers changed:
+
+- The component now matches Figma better (the number went down).
+- Figma changed and you updated the component to match.
+- A new Chromium or font version changes the text rendering of all sets a little.
+
+Commit `visual/baseline.json` with the change and write the reason in the pull request.
+
+**CI and local machines.** CI runs Chromium from Playwright 1.49.1 on Ubuntu 24.04 with the
+IBM Plex fonts that the package loads (`src/styles/fonts.css`, files from `@fontsource`). A different machine can give slightly different numbers. If CI fails
+by a small amount on all sets, take the values from the CI artifact (`out/results.json`, field
+`mismatch`) and put them in `visual/baseline.json`.
+
+### Add a set
+
+1. Make sure the set is in `playground/src/spec/figma-layout.json` (run `pnpm figma:pull` if it
+   is new in Figma).
+2. In `playground/src/spec/Spec.tsx`, add a renderer to `renderers` with the exact Figma set
+   name as the key. The function gets the variant props (`p.Variant`, `p.Size`, `p.State`…)
+   and returns the component in that state, with the same texts and icons as Figma.
+   - States that need interaction (focus, hover): add the classes of that state (see
+     `FOCUS`).
+   - Overlays (menus, dialogs) render in a portal. Use `pin(v)` for the position and put
+     `data-spec-portal={v.name}` on the content, so the geometry check measures it.
+   - If the measured element is not the first element, put `data-spec-root` on the correct one.
+3. Open `/?spec=<Set name>` in the dev server and compare with Figma by eye.
+4. `pnpm visual -- --sets "<Set name>"`. Fix the component until the size errors are gone.
+5. `pnpm visual:update` to record its baseline.
+
+Sets without a renderer today: Menu Item, Tooltip, Calendar Day, Popover, Sheet, Command, Toast,
+Pagination.
+
+### Update the Figma reference
+
+```bash
+FIGMA_TOKEN=figd_… pnpm figma:pull               # layout + geometry + PNGs
+FIGMA_TOKEN=figd_… pnpm figma:pull -- --no-images  # layout + geometry only
+```
+
+The token is a Figma personal access token with the scope `file_content:read` (Figma →
+Settings → Security → Personal access tokens). Figma limits the API rate. On HTTP 429 the
+script waits and tries again up to 5 times. If it still fails, wait some minutes.
+
+After a pull, `visual/figma/meta.json` has the Figma file version. Commit the pulled files with
+the component changes that match them.
+
+## Use the tools in another project
+
+The scripts are not specific to these components. They need three things:
+
+1. A Figma page with component sets. Set `FIGMA_FILE_KEY` and `FIGMA_PAGE_ID` for
+   `figma-pull.mjs`.
+2. A page that renders a set by name at the positions in `figma-layout.json`, with
+   `id="spec"` on the box and `data-spec-variant="<variant name>"` on each variant. Copy
+   `playground/src/spec/Spec.tsx` and replace the renderers.
+3. A built site that `vite preview` can serve, or any running server (`--url`).
+
+The paths (`playground/…`, `visual/…`) are constants at the top of each script. For a
+second project, copy the two scripts and change those constants.
+
+## Files
+
+| File | Made by | Edit by hand |
+| --- | --- | --- |
+| `playground/src/spec/figma-layout.json` | `figma-pull` | no |
+| `visual/figma/*.png`, `geometry.json`, `meta.json` | `figma-pull` | no |
+| `visual/baseline.json` | `compare --update-baseline` | only with values from a CI run |
+| `visual/out/*` | `compare` | no (not in git) |
+| `playground/src/spec/Spec.tsx` | people | yes |

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "@brokenrubik/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "BrokenRubik UI: the BR Admin Library (Figma) as shadcn-style React components and Tailwind v4 design tokens.",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/BrokenRubik/ui.git"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "engines": {
+    "node": ">=22"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./styles.css": "./dist/styles/styles.css",
+    "./fonts.css": "./dist/styles/fonts.css",
+    "./tokens.css": "./dist/styles/tokens.css",
+    "./theme.css": "./dist/styles/theme.css",
+    "./base.css": "./dist/styles/base.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "docs"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit && pnpm build && pnpm --filter playground typecheck",
+    "playground": "pnpm --filter playground dev",
+    "site:build": "pnpm build && pnpm --filter playground build",
+    "visual": "pnpm site:build && node scripts/visual/compare.mjs",
+    "visual:update": "pnpm site:build && node scripts/visual/compare.mjs --update-baseline",
+    "figma:pull": "node scripts/visual/figma-pull.mjs",
+    "figma:sync": "node scripts/figma-sync.mjs",
+    "prepublishOnly": "pnpm typecheck"
+  },
+  "peerDependencies": {
+    "react": ">=18.2",
+    "react-dom": ">=18.2",
+    "tailwindcss": ">=4.0"
+  },
+  "dependencies": {
+    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/ibm-plex-sans": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.70.0",
+    "radix-ui": "^1.8.1",
+    "react-day-picker": "^10.0.2",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.2.3",
+    "pixelmatch": "^6.0.0",
+    "playwright": "1.65.0",
+    "pngjs": "^7.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.5",
+    "typescript": "~7.0.2"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "@tailwindcss/oxide"
+    ]
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+import { Accordion as AccordionPrimitive } from 'radix-ui';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../lib/utils.js';
+
+/**
+ * Figma: Components · Base › Accordion Item (2085:277). Bottom border; trigger 12 px
+ * vertical padding, Body/Default Medium, muted chevron; content Body/Default muted, 12 px
+ * bottom padding.
+ */
+function Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b border-border', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'flex flex-1 items-center justify-between gap-4 py-3 text-left text-body font-medium text-foreground transition-all outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-body text-muted-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn('pb-3', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/alert-dialog.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils.js';
+import { buttonVariants } from './button.js';
+import { overlayClassName } from './dialog.js';
+
+/**
+ * Figma: Components · Base › Dialog, Type=Destructive (2084:160): the confirm dialog.
+ * Same chrome as Dialog, no close button; Cancel (outline) + action (default or destructive).
+ */
+function AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal(props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(overlayClassName, className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          'fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl border border-border bg-background p-6 text-body text-foreground shadow-lg outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="alert-dialog-header" className={cn('flex flex-col gap-1.5', className)} {...props} />;
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn('text-page-title', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn('text-body text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<VariantProps<typeof buttonVariants>, 'variant'>) {
+  return (
+    <AlertDialogPrimitive.Action
+      data-slot="alert-dialog-action"
+      className={cn(buttonVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      data-slot="alert-dialog-cancel"
+      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};