@verdify/ui 0.1.0

package/dist/components/data-grid/data-grid.variants.d.ts

@@ -0,0 +1,29 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const dataGridVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type DataGridVariantProps = VariantProps<typeof dataGridVariants>;
+export declare const dataGridTableClass = "w-full border-collapse text-start";
+export declare const dataGridHeaderRowClass: string;
+export declare const dataGridRowClass: string;
+export declare const dataGridCellVariants: (props?: ({
+    mono?: boolean | null | undefined;
+    secondary?: boolean | null | undefined;
+    status?: "none" | "verified" | "signal" | "caution" | "critical" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;
+export declare const dataGridColumnHeaderVariants: (props?: ({
+    density?: "compact" | "comfortable" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;
+export declare const dataGridSortButtonClass: string;
+export declare const dataGridSortCaretClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center";
+export declare const dataGridSelectionCellClass: string;
+export declare const dataGridBulkBarClass: string;
+export declare const dataGridBulkCountClass = "text-label text-text-secondary";
+export declare const dataGridBulkActionVariants: (props?: ({
+    destructive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;
+export declare const dataGridEmptyClass = "px-(--space-3) py-(--space-6) text-center text-body text-text-muted";
+export declare const dataGridStatusRegionClass = "sr-only";
+//# sourceMappingURL=data-grid.variants.d.ts.map

package/dist/components/data-grid/data-grid.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid.variants.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAkBlE,eAAO,MAAM,gBAAgB,oFAI3B,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAKzE,eAAO,MAAM,kBAAkB,sCAAsC,CAAC;AAOtE,eAAO,MAAM,sBAAsB,QAED,CAAC;AAqBnC,eAAO,MAAM,gBAAgB,QAKyB,CAAC;AAavD,eAAO,MAAM,oBAAoB;;;;;8EAsChC,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAMjF,eAAO,MAAM,4BAA4B;;8EAUxC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,YAAY,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAUjG,eAAO,MAAM,uBAAuB,QAO6D,CAAC;AAKlG,eAAO,MAAM,sBAAsB,2FACuD,CAAC;AAQ3F,eAAO,MAAM,0BAA0B,QAGU,CAAC;AAOlD,eAAO,MAAM,oBAAoB,QAIqB,CAAC;AAIvD,eAAO,MAAM,sBAAsB,mCAAmC,CAAC;AAMvE,eAAO,MAAM,0BAA0B;;8EAoBtC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAK7F,eAAO,MAAM,kBAAkB,wEACwC,CAAC;AAMxE,eAAO,MAAM,yBAAyB,YAAY,CAAC"}

package/dist/components/data-grid/data-grid.variants.js

@@ -0,0 +1,110 @@
+import { cva } from "class-variance-authority";
+const dataGridVariants = cva([
+  "relative w-full overflow-auto",
+  "bg-surface-canvas text-body text-text-primary",
+  "border border-surface-border rounded-(--radius-md)"
+]);
+const dataGridTableClass = "w-full border-collapse text-start";
+const dataGridHeaderRowClass = "sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm border-b border-border-default";
+const cellPaddingVariants = {
+  density: {
+    comfortable: "py-(--space-3)",
+    compact: "py-(--space-1)"
+  }
+};
+const dataGridRowClass = "border-b border-border-default hover:bg-action-ghost-bg-hover aria-selected:bg-action-secondary-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)";
+const dataGridCellVariants = cva(
+  [
+    "px-(--space-3) align-middle text-start text-body text-text-primary",
+    // the roving active cell's focus ring — always visible, never removed (2.4.7)
+    "outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)
+    "scroll-mt-(--space-12) scroll-ms-(--space-12)"
+  ],
+  {
+    variants: {
+      ...cellPaddingVariants,
+      mono: {
+        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)
+        true: "text-mono [direction:ltr]",
+        false: ""
+      },
+      secondary: {
+        // de-emphasized secondary cell text (spec §5 --color-text-secondary)
+        true: "text-text-secondary",
+        false: ""
+      },
+      status: {
+        none: "",
+        // each status is the fg only, paired with the cell's text — the words carry the meaning,
+        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand
+        verified: "text-status-verified-fg",
+        signal: "text-status-signal-fg",
+        caution: "text-status-caution-fg",
+        critical: "text-status-critical-fg"
+      }
+    },
+    defaultVariants: {
+      density: "comfortable",
+      mono: false,
+      secondary: false,
+      status: "none"
+    }
+  }
+);
+const dataGridColumnHeaderVariants = cva(
+  [
+    "px-(--space-3) align-middle text-start text-label text-text-secondary",
+    "outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    "scroll-mt-(--space-12) scroll-ms-(--space-12)"
+  ],
+  {
+    variants: { ...cellPaddingVariants },
+    defaultVariants: { density: "comfortable" }
+  }
+);
+const dataGridSortButtonClass = "inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) text-label text-action-ghost-fg cursor-pointer select-none hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const dataGridSortCaretClass = "inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center";
+const dataGridSelectionCellClass = "px-(--space-3) align-middle text-start outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 scroll-mt-(--space-12) scroll-ms-(--space-12)";
+const dataGridBulkBarClass = "flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) bg-surface-raised border-t border-border-default transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)";
+const dataGridBulkCountClass = "text-label text-text-secondary";
+const dataGridBulkActionVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)",
+    "text-label font-medium cursor-pointer",
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    "transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    "outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      destructive: {
+        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token
+        true: "bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border",
+        // the default bulk action — the primary action accent
+        false: "bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover"
+      }
+    },
+    defaultVariants: { destructive: false }
+  }
+);
+const dataGridEmptyClass = "px-(--space-3) py-(--space-6) text-center text-body text-text-muted";
+const dataGridStatusRegionClass = "sr-only";
+export {
+  dataGridBulkActionVariants,
+  dataGridBulkBarClass,
+  dataGridBulkCountClass,
+  dataGridCellVariants,
+  dataGridColumnHeaderVariants,
+  dataGridEmptyClass,
+  dataGridHeaderRowClass,
+  dataGridRowClass,
+  dataGridSelectionCellClass,
+  dataGridSortButtonClass,
+  dataGridSortCaretClass,
+  dataGridStatusRegionClass,
+  dataGridTableClass,
+  dataGridVariants
+};
+//# sourceMappingURL=data-grid.variants.js.map

package/dist/components/data-grid/data-grid.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-grid/data-grid.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n// you navigate one cell at a time (spec §1). It is a NEUTRAL data surface (spec §1/§3): neutrals\n// carry roughly 90% of it, and a dense grid earns its legibility from restraint. It paints from the\n// surface, text, and border roles; it reaches the --color-action-* tier only for the controls it\n// hosts (the sortable-header ghost accent, the row-hover affordance, the bulk-bar actions, and the\n// NEUTRAL selection accent) and the --color-status-* tier ONLY inside a cell that reports a real\n// state, paired with text — never as a row tint, a header fill, or the selection accent, and NEVER\n// a brand token as a status (brand != state, G-U2). Selection and the active cell are NEUTRAL action\n// states; a verified/trust state is a status cell (spec §3/§4/§8).\n\n// The scroll container <div role=\"grid\"> (spec §2 grid / §5). The neutral canvas surface and the\n// default cell text role, framed by the outer surface border at the md radius, with a fixed-height\n// scroll viewport (the caller sizes it via className — the token set has no grid-height scale, the\n// caller-owned-dimension precedent J). It NEVER wears the brand violet or a status fill (spec §3/§8)\n// — those belong to the controls and the status cells inside it. The active cell is kept scrolled\n// clear of the sticky header and pinned columns by scroll-margin (2.4.11 Focus Not Obscured).\nexport const dataGridVariants = cva([\n  \"relative w-full overflow-auto\",\n  \"bg-surface-canvas text-body text-text-primary\",\n  \"border border-surface-border rounded-(--radius-md)\",\n]);\n\nexport type DataGridVariantProps = VariantProps<typeof dataGridVariants>;\n\n// The inner table element. The grid is a real <table> for the row/column relationship (1.3.1),\n// border-collapsed so the gridlines read as single hairlines, and start-aligned so it mirrors under\n// dir=\"rtl\" (G-U6).\nexport const dataGridTableClass = \"w-full border-collapse text-start\";\n\n// The column-header row <tr> (spec §2 column-header-row / §4 Default / §5). It is STICKY — it stays\n// pinned to the top of the scroll viewport while rows scroll under it — on the raised neutral surface\n// with the sm elevation so it reads ABOVE the scrolling rows (spec §4/§5). z on the sticky layer so a\n// scrolled cell never paints over the pinned header. A header row NEVER wears a status or brand tint\n// (spec §3/§8).\nexport const dataGridHeaderRowClass =\n  \"sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm \" +\n  \"border-b border-border-default\";\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — any in-cell control keeps its own --size-target-* floor\n// (DEC-B: never a fixed height below the floor). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n} as const;\n\n// A data row <tr> (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained GHOST fill to track the eye across a wide row — an AFFORDANCE, never the sole carrier of\n// meaning, and never a selection (nothing is selected until you act, spec §4 Hover). SELECTED\n// (aria-selected): the NEUTRAL secondary-action selection accent — selection is a neutral action\n// state, NOT verified green and NOT the brand violet (selecting a row never implies it is verified;\n// brand != state, G-U2, spec §4/§8). Selection is encoded by the row checkbox + aria-selected, so a\n// grayscale reader reads it from the checkbox, not the fill (1.4.1). Motion is the fast token\n// transition on the verdify easing, instant under reduced motion — never the 350ms VerifiedBadge-only\n// theatre (a row hover/select is a plain transition, G-U3).\nexport const dataGridRowClass =\n  \"border-b border-border-default \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"aria-selected:bg-action-secondary-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// A data cell <td role=\"gridcell\"> (spec §2 cell, §4/§5). It is ONE focusable unit in the roving\n// grid: exactly one cell is the active cell (tabindex=0) and shows the visible 2px focus ring; every\n// other cell is tabindex=-1. The ring is part of the base and is NEVER removed (spec §4 Focus /\n// 2.4.7). scroll-margin keeps the active cell clear of the sticky header + pinned columns before it\n// takes focus (spec §7, 2.4.11 Focus Not Obscured). Default: the primary text color at the body type\n// role. A `mono` cell takes the monospace role and is isolated LTR so an identifier/key/timestamp\n// stays readable inside an RTL layout (spec §3/§5, G-U6). A `secondary` cell is de-emphasized\n// auxiliary text. A `status` cell carries the status fg paired with the cell's words — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2); status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// text, not a saturated fill.\nexport const dataGridCellVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-body text-text-primary\",\n    // the roving active cell's focus ring — always visible, never removed (2.4.7)\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      mono: {\n        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)\n        true: \"text-mono [direction:ltr]\",\n        false: \"\",\n      },\n      secondary: {\n        // de-emphasized secondary cell text (spec §5 --color-text-secondary)\n        true: \"text-text-secondary\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the words carry the meaning,\n        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-fg\",\n        signal: \"text-status-signal-fg\",\n        caution: \"text-status-caution-fg\",\n        critical: \"text-status-critical-fg\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      mono: false,\n      secondary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;\n\n// A column-header cell <th role=\"columnheader\"> (spec §2 column-header / §4/§5). The header LABEL is\n// the SECONDARY text color at the label type role (the quiet, tracked column label) on the raised\n// header surface — a header NEVER wears a status or brand tint (spec §3/§8). It is also a roving\n// active-cell target, so it carries the same focus ring + scroll-margin as a data cell.\nexport const dataGridColumnHeaderVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-label text-text-secondary\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;\n\n// The SORTABLE-header control (spec §2/§4 Sorted/§6/§7): a real <button> inside the columnheader, so\n// it reads as the control it is and toggles the sort on Enter. It is the GHOST action accent — the\n// label + caret in the ghost fg with the restrained ghost hover fill (spec §4 sortable-header hover /\n// §5) — the action tier is legitimate here because it is a control the grid HOSTS, not a header tint.\n// It carries the target-size floor (40px desktop / 44px touch, spec §7) and inherits the active\n// cell's focus ring from the columnheader. Motion is the fast token transition, never the deliberate\n// verified-check theatre (G-U3). aria-sort lives on the parent th, and the caret encodes direction\n// alongside it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const dataGridSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is also\n// encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on color\n// alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const dataGridSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The selection cell <td role=\"gridcell\"> and the select-all header cell (spec §2 selection-cell /\n// §5): the leading cell that holds the row's Checkbox, carrying the active-cell focus ring +\n// scroll-margin like any other cell. The checkbox is the committed Checkbox component (reused, not\n// re-rolled), which already binds the control surface + border tokens (spec §5) and the brand action\n// accent on the CHECKED box — a checked checkbox is the brand accent, never status-verified (G-U2):\n// selection is a neutral action state. This wrapper is just the cell padding + the roving focus ring.\nexport const dataGridSelectionCellClass =\n  \"px-(--space-3) align-middle text-start \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"scroll-mt-(--space-12) scroll-ms-(--space-12)\";\n\n// The bulk-action bar (spec §2 bulk-action-bar / §4/§5): a toolbar that appears when rows are\n// selected, on the raised neutral surface with the sm elevation and a hairline top border, holding\n// the selection actions + a clear-selection control. It is a NEUTRAL surface — the COLOR lives on the\n// action buttons it holds, never on the bar (spec §3/§8). Motion is the fast token transition (the\n// bar's appear/transition), never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkBarClass =\n  \"flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) \" +\n  \"bg-surface-raised border-t border-border-default \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The selected-count label in the bulk-action bar (spec §2): the secondary text at the label role —\n// the count of selected rows, in words, so selection is announced, never color alone (1.4.1 / 4.1.3).\nexport const dataGridBulkCountClass = \"text-label text-text-secondary\";\n\n// A bulk-action button (spec §2/§5): the PRIMARY selection action is the primary ACTION accent; a\n// `destructive` action (for example, revoke a key) is the destructive ACTION accent — a risk signal\n// named in TEXT, never a status color (spec §5/§8). Both carry the visible focus ring + target-size\n// floor. Motion is the fast token transition, never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkActionVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)\",\n    \"text-label font-medium cursor-pointer\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      destructive: {\n        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token\n        true: \"bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border\",\n        // the default bulk action — the primary action accent\n        false: \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full grid width, in the muted\n// text color — an empty grid is NOT an error and never reads as one (no status color). Its copy says\n// why it is empty and what to do next, in plain words ending in a period (spec §4 Empty / voice).\nexport const dataGridEmptyClass =\n  \"px-(--space-3) py-(--space-6) text-center text-body text-text-muted\";\n\n// The off-screen-capable live region (spec §2 status-region / §7 4.1.3): announces the resolved row\n// count, sort + filter changes, and the selection count politely; a blocking row-load error\n// assertively. Always sr-only (it never paints — the visual state carries the same information for\n// sighted users), so it reaches assistive tech as TEXT, never color alone (1.4.1 / 4.1.3).\nexport const dataGridStatusRegionClass = \"sr-only\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAkBhC,MAAM,mBAAmB,IAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAOM,MAAM,qBAAqB;AAO3B,MAAM,yBACX;AAMF,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AACF;AAWO,MAAM,mBACX;AAiBK,MAAM,uBAAuB;AAAA,EAClC;AAAA,IACE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,QAEJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA;AAAA,QAET,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA,QAGN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAQO,MAAM,+BAA+B;AAAA,EAC1C;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,cAAc;AAAA,EAC5C;AACF;AAYO,MAAM,0BACX;AAWK,MAAM,yBACX;AAQK,MAAM,6BACX;AASK,MAAM,uBACX;AAOK,MAAM,yBAAyB;AAM/B,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,MAAM;AAAA;AAAA,QAEN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,MAAM;AAAA,EACxC;AACF;AAOO,MAAM,qBACX;AAMK,MAAM,4BAA4B;","names":[]}

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,3 @@
+export { DataGrid, DataGridHeaderRow, DataGridBody, DataGridRow, DataGridColumnHeader, DataGridCell, DataGridSelectionCell, DataGridSelectAllCell, DataGridBulkActionBar, DataGridBulkAction, DataGridStatusRegion, DataGridEmpty, type DataGridProps, type DataGridHeaderRowProps, type DataGridBodyProps, type DataGridRowProps, type DataGridColumnHeaderProps, type DataGridCellProps, type DataGridSelectionCellProps, type DataGridSelectAllCellProps, type DataGridBulkActionBarProps, type DataGridBulkActionProps, type DataGridStatusRegionProps, type DataGridEmptyProps, type DataGridDensity, type DataGridSelection, type DataGridCellStatus, type DataGridCellControls, type DataGridSortDirection, } from "./data-grid";
+export { dataGridVariants, dataGridTableClass, dataGridHeaderRowClass, dataGridRowClass, dataGridCellVariants, dataGridColumnHeaderVariants, dataGridSortButtonClass, dataGridSortCaretClass, dataGridSelectionCellClass, dataGridBulkBarClass, dataGridBulkCountClass, dataGridBulkActionVariants, dataGridEmptyClass, dataGridStatusRegionClass, type DataGridVariantProps, type DataGridCellVariantProps, type DataGridColumnHeaderVariantProps, type DataGridBulkActionVariantProps, } from "./data-grid.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,yBAAyB,EAC9B,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAC/B,KAAK,0BAA0B,EAC/B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,oBAAoB,EACpB,4BAA4B,EAC5B,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,kBAAkB,EAClB,yBAAyB,EACzB,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAC7B,KAAK,gCAAgC,EACrC,KAAK,8BAA8B,GACpC,MAAM,sBAAsB,CAAC"}

package/dist/components/data-grid/index.js

@@ -0,0 +1,59 @@
+import {
+  DataGrid,
+  DataGridHeaderRow,
+  DataGridBody,
+  DataGridRow,
+  DataGridColumnHeader,
+  DataGridCell,
+  DataGridSelectionCell,
+  DataGridSelectAllCell,
+  DataGridBulkActionBar,
+  DataGridBulkAction,
+  DataGridStatusRegion,
+  DataGridEmpty
+} from "./data-grid";
+import {
+  dataGridVariants,
+  dataGridTableClass,
+  dataGridHeaderRowClass,
+  dataGridRowClass,
+  dataGridCellVariants,
+  dataGridColumnHeaderVariants,
+  dataGridSortButtonClass,
+  dataGridSortCaretClass,
+  dataGridSelectionCellClass,
+  dataGridBulkBarClass,
+  dataGridBulkCountClass,
+  dataGridBulkActionVariants,
+  dataGridEmptyClass,
+  dataGridStatusRegionClass
+} from "./data-grid.variants";
+export {
+  DataGrid,
+  DataGridBody,
+  DataGridBulkAction,
+  DataGridBulkActionBar,
+  DataGridCell,
+  DataGridColumnHeader,
+  DataGridEmpty,
+  DataGridHeaderRow,
+  DataGridRow,
+  DataGridSelectAllCell,
+  DataGridSelectionCell,
+  DataGridStatusRegion,
+  dataGridBulkActionVariants,
+  dataGridBulkBarClass,
+  dataGridBulkCountClass,
+  dataGridCellVariants,
+  dataGridColumnHeaderVariants,
+  dataGridEmptyClass,
+  dataGridHeaderRowClass,
+  dataGridRowClass,
+  dataGridSelectionCellClass,
+  dataGridSortButtonClass,
+  dataGridSortCaretClass,
+  dataGridStatusRegionClass,
+  dataGridTableClass,
+  dataGridVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/data-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/data-grid/index.ts"],"sourcesContent":["export {\n  DataGrid,\n  DataGridHeaderRow,\n  DataGridBody,\n  DataGridRow,\n  DataGridColumnHeader,\n  DataGridCell,\n  DataGridSelectionCell,\n  DataGridSelectAllCell,\n  DataGridBulkActionBar,\n  DataGridBulkAction,\n  DataGridStatusRegion,\n  DataGridEmpty,\n  type DataGridProps,\n  type DataGridHeaderRowProps,\n  type DataGridBodyProps,\n  type DataGridRowProps,\n  type DataGridColumnHeaderProps,\n  type DataGridCellProps,\n  type DataGridSelectionCellProps,\n  type DataGridSelectAllCellProps,\n  type DataGridBulkActionBarProps,\n  type DataGridBulkActionProps,\n  type DataGridStatusRegionProps,\n  type DataGridEmptyProps,\n  type DataGridDensity,\n  type DataGridSelection,\n  type DataGridCellStatus,\n  type DataGridCellControls,\n  type DataGridSortDirection,\n} from \"./data-grid\";\nexport {\n  dataGridVariants,\n  dataGridTableClass,\n  dataGridHeaderRowClass,\n  dataGridRowClass,\n  dataGridCellVariants,\n  dataGridColumnHeaderVariants,\n  dataGridSortButtonClass,\n  dataGridSortCaretClass,\n  dataGridSelectionCellClass,\n  dataGridBulkBarClass,\n  dataGridBulkCountClass,\n  dataGridBulkActionVariants,\n  dataGridEmptyClass,\n  dataGridStatusRegionClass,\n  type DataGridVariantProps,\n  type DataGridCellVariantProps,\n  type DataGridColumnHeaderVariantProps,\n  type DataGridBulkActionVariantProps,\n} from \"./data-grid.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAkBK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;","names":[]}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { type DialogPanelVariantProps } from "./dialog.variants";
+type DialogVariant = "standard" | "confirm" | "destructive";
+type DialogSize = NonNullable<DialogPanelVariantProps["size"]>;
+export interface DialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /**
+     * Intent (spec §3): `standard` (default — a short task or form that interrupts the context;
+     * dismisses on scrim click), `confirm` (a single decision; does NOT dismiss on scrim click so a
+     * choice is not lost to a stray click), or `destructive` (a confirm whose primary action is
+     * irreversible — the destructive treatment lives on the confirm Button, never a red panel).
+     */
+    variant?: DialogVariant;
+    /** Panel max width (spec §3): `sm` / `md` (default) / `lg`. The panel never exceeds the viewport. */
+    size?: DialogSize;
+}
+/**
+ * Dialog presents focused content or a decision in a layer above the page, holding attention
+ * until you act or dismiss it (spec §1). Use it for a short task or confirmation that must
+ * interrupt the current context; for non-blocking messages use Toast or Alert, and for a side
+ * panel that does not demand a decision use Sheet. It is a NEUTRAL overlay surface: the panel and
+ * scrim are neutral, brand violet appears only on a footer primary action through Button, and
+ * Verified Green never appears here as decoration (spec §3 / §5 / §8, brand != state). Wraps the
+ * Radix Dialog primitive (WAI-ARIA APG modal-dialog pattern) — a stateful primitive, so this file
+ * is `'use client'`.
+ */
+export declare function Dialog({ variant, size, children, ...rootProps }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {
+}
+/**
+ * The control that opens the dialog (spec §7: focus returns here on close). Pass `asChild` to wrap
+ * your own Button so the trigger inherits its role, keyboard, and focus ring rather than nesting a
+ * second button.
+ */
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+}
+/**
+ * Renders the portal, the scrim, and the panel (spec §2 scrim + panel). The panel is
+ * `role="dialog"` with `aria-modal="true"` (Radix), takes the focus trap, is named by its
+ * `DialogTitle` via `aria-labelledby` and described by its `DialogDescription` via
+ * `aria-describedby` (Radix wires both). On open, focus moves into the panel — to the first
+ * meaningful control, or the panel itself when none exists — and returns to the trigger on close
+ * (spec §7). Content behind the open dialog is inert. A `standard` dialog dismisses on a scrim
+ * (outside) click the same way Escape does; a `confirm` or `destructive` dialog does NOT, so a
+ * decision is never lost to a stray click (spec §6).
+ */
+export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The top region: the title and the optional close button on the inline-end (spec §2 header). */
+export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+}
+/**
+ * Names the dialog in one short statement — it IS the dialog's accessible name, wired to the panel
+ * via `aria-labelledby` by Radix (spec §2 title, §7). Rendered as an `<h2>` by default at the
+ * dialog's title type role.
+ */
+export declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface DialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {
+}
+/**
+ * Optional supporting text directly under the title, associated with the panel for screen readers
+ * via `aria-describedby` (Radix) (spec §2 description, §7).
+ */
+export declare const DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The scrollable content region between header and footer (spec §2 body, §3). The panel caps its
+ * own height to the viewport; the body takes the remaining space and scrolls when content
+ * overflows, so the panel never exceeds the viewport.
+ */
+export declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The action region holding the primary and any secondary/cancel action (spec §2 footer). The
+ * actions are Buttons — the footer consumes the `--color-action-*` aliases THROUGH Button, which
+ * the dialog spec does not restate (spec §5 note). A `destructive` dialog's confirm Button uses
+ * the destructive action treatment; the panel stays neutral.
+ */
+export declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface DialogCloseProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {
+}
+/**
+ * The dismiss control (spec §2 close): closing returns focus to the trigger (Radix). Two forms,
+ * both proven by the tests:
+ *  - default (no children): the styled neutral-ghost icon-button for the header — pass an
+ *    `aria-label` (e.g. "Close"), since the glyph is decorative and the placeholder is never a name.
+ *  - `asChild`: wrap a footer Button (e.g. "Cancel") so the cancel action also dismisses without
+ *    nesting a second button.
+ * A dialog with no in-panel dismiss must still be dismissible by Escape (spec §2) — Radix provides it.
+ */
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=dialog.d.ts.map

package/dist/components/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAUL,KAAK,uBAAuB,EAC7B,MAAM,mBAAmB,CAAC;AAE3B,KAAK,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;AAC5D,KAAK,UAAU,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AAgB/D,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACnE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,qGAAqG;IACrG,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,EAAE,OAAoB,EAAE,IAAW,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,WAAW,2CAMhG;AAED,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;CAAG;AAE3E;;;;GAIG;AACH,eAAO,MAAM,aAAa,8FAKxB,CAAC;AAEH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;CAAG;AAE3E;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2FAoCxB,CAAC;AAEH,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF,kGAAkG;AAClG,eAAO,MAAM,YAAY,0FAIxB,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;CAAG;AAEzE;;;;GAIG;AACH,eAAO,MAAM,WAAW,6FAKtB,CAAC;AAEH,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC;CAAG;AAE/E;;;GAGG;AACH,eAAO,MAAM,iBAAiB,qGAW5B,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF;;;;GAIG;AACH,eAAO,MAAM,UAAU,wFAItB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAElF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0FAIxB,CAAC;AAoBF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;CAAG;AAEzE;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,4FAoBtB,CAAC"}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  dialogScrimVariants,
+  dialogPanelVariants,
+  dialogHeaderClass,
+  dialogTitleClass,
+  dialogDescriptionClass,
+  dialogBodyClass,
+  dialogFooterClass,
+  dialogCloseVariants,
+  dialogCloseGlyphClass
+} from "./dialog.variants";
+const DialogContext = React.createContext({
+  variant: "standard",
+  size: "md"
+});
+function Dialog({ variant = "standard", size = "md", children, ...rootProps }) {
+  return /* @__PURE__ */ jsx(DialogContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...rootProps, children }) });
+}
+const DialogTrigger = React.forwardRef(function DialogTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props });
+});
+const DialogContent = React.forwardRef(function DialogContent2({ className, children, ...props }, ref) {
+  const { variant, size } = React.useContext(DialogContext);
+  const dismissOnOutside = variant === "standard";
+  const guardOutside = dismissOnOutside ? void 0 : (event) => event.preventDefault();
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        "data-testid": "dialog-scrim",
+        className: dialogScrimVariants()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "aria-modal": "true",
+        className: cn(dialogPanelVariants({ size }), className),
+        onPointerDownOutside: guardOutside,
+        onInteractOutside: guardOutside,
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+const DialogHeader = React.forwardRef(
+  function DialogHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(dialogHeaderClass, className), ...props });
+  }
+);
+const DialogTitle = React.forwardRef(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn(dialogTitleClass, className), ...props });
+});
+const DialogDescription = React.forwardRef(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn(dialogDescriptionClass, className),
+      ...props
+    }
+  );
+});
+const DialogBody = React.forwardRef(
+  function DialogBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(dialogBodyClass, className), ...props });
+  }
+);
+const DialogFooter = React.forwardRef(
+  function DialogFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(dialogFooterClass, className), ...props });
+  }
+);
+function CloseGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "dialog-close-glyph",
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: dialogCloseGlyphClass,
+      children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+const DialogClose = React.forwardRef(function DialogClose2({ className, children, asChild, ...props }, ref) {
+  if (asChild) {
+    return /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, asChild: true, className, ...props, children });
+  }
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Close,
+    {
+      ref,
+      className: cn(dialogCloseVariants(), className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(CloseGlyph, {})
+    }
+  );
+});
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+};
+//# sourceMappingURL=dialog.js.map

package/dist/components/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dialog/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  dialogScrimVariants,\n  dialogPanelVariants,\n  dialogHeaderClass,\n  dialogTitleClass,\n  dialogDescriptionClass,\n  dialogBodyClass,\n  dialogFooterClass,\n  dialogCloseVariants,\n  dialogCloseGlyphClass,\n  type DialogPanelVariantProps,\n} from \"./dialog.variants\";\n\ntype DialogVariant = \"standard\" | \"confirm\" | \"destructive\";\ntype DialogSize = NonNullable<DialogPanelVariantProps[\"size\"]>;\n\n// The presentation axes (spec §3) are set ONCE on the root and travel to the content via context,\n// so callers don't repeat `variant`/`size` on `DialogContent` (mirrors the Tabs/Accordion\n// precedent). `variant` decides the scrim-dismiss policy (standard dismisses on scrim click;\n// confirm/destructive do not — a decision is not lost to a stray click, spec §6); `size` sets the\n// panel's max width.\ntype DialogContextValue = {\n  variant: DialogVariant;\n  size: DialogSize;\n};\nconst DialogContext = React.createContext<DialogContextValue>({\n  variant: \"standard\",\n  size: \"md\",\n});\n\nexport interface DialogProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Intent (spec §3): `standard` (default — a short task or form that interrupts the context;\n   * dismisses on scrim click), `confirm` (a single decision; does NOT dismiss on scrim click so a\n   * choice is not lost to a stray click), or `destructive` (a confirm whose primary action is\n   * irreversible — the destructive treatment lives on the confirm Button, never a red panel).\n   */\n  variant?: DialogVariant;\n  /** Panel max width (spec §3): `sm` / `md` (default) / `lg`. The panel never exceeds the viewport. */\n  size?: DialogSize;\n}\n\n/**\n * Dialog presents focused content or a decision in a layer above the page, holding attention\n * until you act or dismiss it (spec §1). Use it for a short task or confirmation that must\n * interrupt the current context; for non-blocking messages use Toast or Alert, and for a side\n * panel that does not demand a decision use Sheet. It is a NEUTRAL overlay surface: the panel and\n * scrim are neutral, brand violet appears only on a footer primary action through Button, and\n * Verified Green never appears here as decoration (spec §3 / §5 / §8, brand != state). Wraps the\n * Radix Dialog primitive (WAI-ARIA APG modal-dialog pattern) — a stateful primitive, so this file\n * is `'use client'`.\n */\nexport function Dialog({ variant = \"standard\", size = \"md\", children, ...rootProps }: DialogProps) {\n  return (\n    <DialogContext.Provider value={{ variant, size }}>\n      <DialogPrimitive.Root {...rootProps}>{children}</DialogPrimitive.Root>\n    </DialogContext.Provider>\n  );\n}\n\nexport interface DialogTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {}\n\n/**\n * The control that opens the dialog (spec §7: focus returns here on close). Pass `asChild` to wrap\n * your own Button so the trigger inherits its role, keyboard, and focus ring rather than nesting a\n * second button.\n */\nexport const DialogTrigger = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Trigger>,\n  DialogTriggerProps\n>(function DialogTrigger(props, ref) {\n  return <DialogPrimitive.Trigger ref={ref} {...props} />;\n});\n\nexport interface DialogContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {}\n\n/**\n * Renders the portal, the scrim, and the panel (spec §2 scrim + panel). The panel is\n * `role=\"dialog\"` with `aria-modal=\"true\"` (Radix), takes the focus trap, is named by its\n * `DialogTitle` via `aria-labelledby` and described by its `DialogDescription` via\n * `aria-describedby` (Radix wires both). On open, focus moves into the panel — to the first\n * meaningful control, or the panel itself when none exists — and returns to the trigger on close\n * (spec §7). Content behind the open dialog is inert. A `standard` dialog dismisses on a scrim\n * (outside) click the same way Escape does; a `confirm` or `destructive` dialog does NOT, so a\n * decision is never lost to a stray click (spec §6).\n */\nexport const DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  DialogContentProps\n>(function DialogContent({ className, children, ...props }, ref) {\n  const { variant, size } = React.useContext(DialogContext);\n  const dismissOnOutside = variant === \"standard\";\n\n  // confirm/destructive: block scrim-click dismissal (and the focus-out auto-dismiss that would\n  // follow a click landing outside), so a decision is only dismissed by Escape or an explicit\n  // cancel (spec §6). preventDefault on the outside-pointer/interaction keeps the panel open.\n  const guardOutside = dismissOnOutside\n    ? undefined\n    : (event: Event) => event.preventDefault();\n\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-testid=\"dialog-scrim\"\n        className={dialogScrimVariants()}\n      />\n      <DialogPrimitive.Content\n        ref={ref}\n        // The spec §7 ARIA contract names aria-modal=\"true\" explicitly. This Radix version makes\n        // the rest of the page inert (pointer-events:none on body + aria-hidden on siblings) but\n        // does not emit aria-modal, so we set it to honor the frozen contract literally; the panel\n        // IS modal (the focus trap + inert siblings back the claim).\n        aria-modal=\"true\"\n        className={cn(dialogPanelVariants({ size }), className)}\n        onPointerDownOutside={guardOutside}\n        onInteractOutside={guardOutside}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n});\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** The top region: the title and the optional close button on the inline-end (spec §2 header). */\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(dialogHeaderClass, className)} {...props} />;\n  },\n);\n\nexport interface DialogTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/**\n * Names the dialog in one short statement — it IS the dialog's accessible name, wired to the panel\n * via `aria-labelledby` by Radix (spec §2 title, §7). Rendered as an `<h2>` by default at the\n * dialog's title type role.\n */\nexport const DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  DialogTitleProps\n>(function DialogTitle({ className, ...props }, ref) {\n  return <DialogPrimitive.Title ref={ref} className={cn(dialogTitleClass, className)} {...props} />;\n});\n\nexport interface DialogDescriptionProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n\n/**\n * Optional supporting text directly under the title, associated with the panel for screen readers\n * via `aria-describedby` (Radix) (spec §2 description, §7).\n */\nexport const DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn(dialogDescriptionClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The scrollable content region between header and footer (spec §2 body, §3). The panel caps its\n * own height to the viewport; the body takes the remaining space and scrolls when content\n * overflows, so the panel never exceeds the viewport.\n */\nexport const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(\n  function DialogBody({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(dialogBodyClass, className)} {...props} />;\n  },\n);\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The action region holding the primary and any secondary/cancel action (spec §2 footer). The\n * actions are Buttons — the footer consumes the `--color-action-*` aliases THROUGH Button, which\n * the dialog spec does not restate (spec §5 note). A `destructive` dialog's confirm Button uses\n * the destructive action treatment; the panel stays neutral.\n */\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(dialogFooterClass, className)} {...props} />;\n  },\n);\n\n// A neutral X glyph, --size-icon-md, drawn with currentColor so it inherits the close button's\n// ghost-fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nfunction CloseGlyph() {\n  return (\n    <svg\n      data-testid=\"dialog-close-glyph\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={dialogCloseGlyphClass}\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport interface DialogCloseProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {}\n\n/**\n * The dismiss control (spec §2 close): closing returns focus to the trigger (Radix). Two forms,\n * both proven by the tests:\n *  - default (no children): the styled neutral-ghost icon-button for the header — pass an\n *    `aria-label` (e.g. \"Close\"), since the glyph is decorative and the placeholder is never a name.\n *  - `asChild`: wrap a footer Button (e.g. \"Cancel\") so the cancel action also dismisses without\n *    nesting a second button.\n * A dialog with no in-panel dismiss must still be dismissible by Escape (spec §2) — Radix provides it.\n */\nexport const DialogClose = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  DialogCloseProps\n>(function DialogClose({ className, children, asChild, ...props }, ref) {\n  if (asChild) {\n    return (\n      <DialogPrimitive.Close ref={ref} asChild className={className} {...props}>\n        {children}\n      </DialogPrimitive.Close>\n    );\n  }\n  return (\n    <DialogPrimitive.Close\n      ref={ref}\n      className={cn(dialogCloseVariants(), className)}\n      {...props}\n    >\n      {children ?? <CloseGlyph />}\n    </DialogPrimitive.Close>\n  );\n});\n"],"mappings":";AA6DM,cAgDF,YAhDE;AA3DN,YAAY,WAAW;AACvB,SAAS,UAAU,uBAAuB;AAC1C,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAcP,MAAM,gBAAgB,MAAM,cAAkC;AAAA,EAC5D,SAAS;AAAA,EACT,MAAM;AACR,CAAC;AAyBM,SAAS,OAAO,EAAE,UAAU,YAAY,OAAO,MAAM,UAAU,GAAG,UAAU,GAAgB;AACjG,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,EAAE,SAAS,KAAK,GAC7C,8BAAC,gBAAgB,MAAhB,EAAsB,GAAG,WAAY,UAAS,GACjD;AAEJ;AAUO,MAAM,gBAAgB,MAAM,WAGjC,SAASA,eAAc,OAAO,KAAK;AACnC,SAAO,oBAAC,gBAAgB,SAAhB,EAAwB,KAAW,GAAG,OAAO;AACvD,CAAC;AAeM,MAAM,gBAAgB,MAAM,WAGjC,SAASC,eAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/D,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,WAAW,aAAa;AACxD,QAAM,mBAAmB,YAAY;AAKrC,QAAM,eAAe,mBACjB,SACA,CAAC,UAAiB,MAAM,eAAe;AAE3C,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,eAAY;AAAA,QACZ,WAAW,oBAAoB;AAAA;AAAA,IACjC;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QAKA,cAAW;AAAA,QACX,WAAW,GAAG,oBAAoB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,QACtD,sBAAsB;AAAA,QACtB,mBAAmB;AAAA,QAClB,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AAKM,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EAChF;AACF;AAUO,MAAM,cAAc,MAAM,WAG/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD,SAAO,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,WAAW,GAAG,kBAAkB,SAAS,GAAI,GAAG,OAAO;AACjG,CAAC;AASM,MAAM,oBAAoB,MAAM,WAGrC,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,MAC9C,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AASM,MAAM,aAAa,MAAM;AAAA,EAC9B,SAASC,YAAW,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,OAAO;AAAA,EAC9E;AACF;AAUO,MAAM,eAAe,MAAM;AAAA,EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAClD,WAAO,oBAAC,SAAI,KAAU,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,OAAO;AAAA,EAChF;AACF;AAIA,SAAS,aAAa;AACpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,WAAW;AAAA,MAEX,8BAAC,UAAK,GAAE,sBAAqB,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,EAC5E;AAEJ;AAcO,MAAM,cAAc,MAAM,WAG/B,SAASC,aAAY,EAAE,WAAW,UAAU,SAAS,GAAG,MAAM,GAAG,KAAK;AACtE,MAAI,SAAS;AACX,WACE,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,SAAO,MAAC,WAAuB,GAAG,OAChE,UACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,oBAAoB,GAAG,SAAS;AAAA,MAC7C,GAAG;AAAA,MAEH,sBAAY,oBAAC,cAAW;AAAA;AAAA,EAC3B;AAEJ,CAAC;","names":["DialogTrigger","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","DialogFooter","DialogClose"]}

package/dist/components/dialog/dialog.variants.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const dialogScrimVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogPanelVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dialogHeaderClass = "flex items-start justify-between gap-(--space-4) border-b border-border-default pb-(--space-4)";
+export declare const dialogTitleClass = "text-h2 text-text-primary";
+export declare const dialogDescriptionClass = "text-body text-text-secondary";
+export declare const dialogBodyClass = "min-h-0 flex-1 overflow-y-auto text-body text-text-secondary";
+export declare const dialogFooterClass = "flex items-center justify-end gap-(--space-2) border-t border-border-default pt-(--space-4)";
+export declare const dialogCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export type DialogPanelVariantProps = VariantProps<typeof dialogPanelVariants>;
+//# sourceMappingURL=dialog.variants.d.ts.map

package/dist/components/dialog/dialog.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.variants.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/dialog.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgBlE,eAAO,MAAM,mBAAmB,oFAK9B,CAAC;AAcH,eAAO,MAAM,mBAAmB;;8EA+B/B,CAAC;AAIF,eAAO,MAAM,iBAAiB,mGACoE,CAAC;AAInG,eAAO,MAAM,gBAAgB,8BAA8B,CAAC;AAI5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AAKtE,eAAO,MAAM,eAAe,iEACoC,CAAC;AAMjE,eAAO,MAAM,iBAAiB,gGACiE,CAAC;AAOhG,eAAO,MAAM,mBAAmB,oFAa9B,CAAC;AAIH,eAAO,MAAM,qBAAqB,0CAA0C,CAAC;AAE7E,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/dialog/dialog.variants.js

@@ -0,0 +1,71 @@
+import { cva } from "class-variance-authority";
+const dialogScrimVariants = cva([
+  "fixed inset-0 z-(--z-index-modal) bg-scrim-dark",
+  "transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+  "motion-reduce:duration-(--motion-duration-instant)",
+  "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
+]);
+const dialogPanelVariants = cva(
+  [
+    // centered on the modal layer; full available width up to the size cap, with side gutters
+    "fixed left-1/2 top-1/2 z-(--z-index-modal) -translate-x-1/2 -translate-y-1/2",
+    "flex w-[calc(100%-var(--space-8))] flex-col gap-(--space-4)",
+    // never taller than the viewport less the gutter; the body scrolls within (spec §3)
+    "max-h-[calc(100dvh-var(--space-8))]",
+    // neutral raised surface + outer border + lg radius + lg elevation; panel inset padding
+    "bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg)",
+    "p-(--space-6)",
+    // base open/close transition + verdify easing, instant under reduced motion (NEVER deliberate)
+    "transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // enter/exit ride Radix data-state — attribute-selector variants, not arbitrary values
+    "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+    "data-[state=open]:scale-100 data-[state=closed]:scale-95",
+    // the panel takes focus when there is no obvious first control; its ring is never removed
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      // size = max width only (spec §3). md is the default. Bound to the --container-* scale.
+      size: {
+        sm: "max-w-(--container-sm)",
+        md: "max-w-(--container-md)",
+        lg: "max-w-(--container-lg)"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const dialogHeaderClass = "flex items-start justify-between gap-(--space-4) border-b border-border-default pb-(--space-4)";
+const dialogTitleClass = "text-h2 text-text-primary";
+const dialogDescriptionClass = "text-body text-text-secondary";
+const dialogBodyClass = "min-h-0 flex-1 overflow-y-auto text-body text-text-secondary";
+const dialogFooterClass = "flex items-center justify-end gap-(--space-2) border-t border-border-default pt-(--space-4)";
+const dialogCloseVariants = cva([
+  "inline-flex items-center justify-center rounded-(--radius-md)",
+  // neutral ghost surface: glyph color at rest + restrained hover fill (no bg/border at rest)
+  "text-action-ghost-fg hover:bg-action-ghost-bg-hover",
+  // fast functional hover transition + verdify easing, instant under reduced motion (NEVER deliberate)
+  "transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+  "motion-reduce:duration-(--motion-duration-instant)",
+  // target-size floor: 44px touch / 40px pointer; the close button is square at the floor (DEC-B)
+  "min-h-(--size-target-mobile) min-w-(--size-target-mobile)",
+  "sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop)",
+  // visible 2px focus ring at 2px offset; never removed
+  "outline-none",
+  "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+]);
+const dialogCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export {
+  dialogBodyClass,
+  dialogCloseGlyphClass,
+  dialogCloseVariants,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogPanelVariants,
+  dialogScrimVariants,
+  dialogTitleClass
+};
+//# sourceMappingURL=dialog.variants.js.map

package/dist/components/dialog/dialog.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dialog/dialog.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Dialog is a NEUTRAL overlay surface (spec §1/§3/§5/§8): brand violet and Verified Green are\n// accents, neutrals carry the surface. The PANEL and the SCRIM are neutral; Sovereign Violet\n// appears only on a footer PRIMARY action — through Button, not here — and Verified Green never\n// appears on the dialog as decoration. A destructive confirm uses the destructive ACTION\n// treatment on its confirm button (Button), never a red panel. So NOTHING in this file binds an\n// --color-action-primary-* or --color-status-* fill (brand != state, G-U2). This is the ONLY\n// token-binding site (skill §5 hard rule).\n\n// The scrim: the dimming layer behind the panel that separates the dialog from the page and\n// absorbs outside clicks (spec §2 scrim, §5 --color-scrim-*). It is a neutral dim on the modal\n// z-layer, decorative (no role). The fade is a PLAIN base transition + verdify easing, instant\n// under reduced motion — never the 350ms VerifiedBadge-only theatre (G-U3 motion-theatre gate).\n// Enter/exit ride Radix's data-state on the overlay (attribute-selector variants, not arbitrary\n// values). On a light surface the dark scrim token applies (spec §5: scrim-dark on light).\nexport const dialogScrimVariants = cva([\n  \"fixed inset-0 z-(--z-index-modal) bg-scrim-dark\",\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\n]);\n\n// The panel: the raised container holding the dialog content; it takes role=dialog + the focus\n// trap (Radix). A NEUTRAL raised surface (--color-surface-raised) with the outer surface border,\n// the lg corner radius, the lg elevation shadow above the scrim, centered on the modal z-layer.\n// It never exceeds the viewport and scrolls its BODY when content overflows (spec §3) — the\n// panel caps its own height to the viewport less the gutter; the DialogBody owns the scroll. The\n// open/close transition is the BASE duration + verdify easing, instant under reduced motion, and\n// rides Radix's data-state (attribute-selector enter/exit, not arbitrary values). NEVER the\n// deliberate verified-check theatre (G-U3). Panel padding/gaps come from --space-*.\n//\n// size = the panel's MAX WIDTH only (spec §3 sm/md/lg, md default), bound to the --container-*\n// scale; the panel is full-width up to that cap and centered. There is no fixed height — the\n// height emerges from the content up to the viewport cap.\nexport const dialogPanelVariants = cva(\n  [\n    // centered on the modal layer; full available width up to the size cap, with side gutters\n    \"fixed left-1/2 top-1/2 z-(--z-index-modal) -translate-x-1/2 -translate-y-1/2\",\n    \"flex w-[calc(100%-var(--space-8))] flex-col gap-(--space-4)\",\n    // never taller than the viewport less the gutter; the body scrolls within (spec §3)\n    \"max-h-[calc(100dvh-var(--space-8))]\",\n    // neutral raised surface + outer border + lg radius + lg elevation; panel inset padding\n    \"bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg)\",\n    \"p-(--space-6)\",\n    // base open/close transition + verdify easing, instant under reduced motion (NEVER deliberate)\n    \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // enter/exit ride Radix data-state — attribute-selector variants, not arbitrary values\n    \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\n    \"data-[state=open]:scale-100 data-[state=closed]:scale-95\",\n    // the panel takes focus when there is no obvious first control; its ring is never removed\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      // size = max width only (spec §3). md is the default. Bound to the --container-* scale.\n      size: {\n        sm: \"max-w-(--container-sm)\",\n        md: \"max-w-(--container-md)\",\n        lg: \"max-w-(--container-lg)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The header: the top region holding the title and the optional close button on the inline-end.\n// Logical-property layout (G-U6); a neutral hairline divider under it continues the surface.\nexport const dialogHeaderClass =\n  \"flex items-start justify-between gap-(--space-4) border-b border-border-default pb-(--space-4)\";\n\n// The title: names the dialog in one short statement; it is the accessible name (Radix wires\n// aria-labelledby). The h2 type role in primary text (spec §5 --text-h2 / --color-text-primary).\nexport const dialogTitleClass = \"text-h2 text-text-primary\";\n\n// The description: optional supporting text under the title, associated with the panel for\n// screen readers (Radix wires aria-describedby). Body type role in secondary text (spec §5).\nexport const dialogDescriptionClass = \"text-body text-text-secondary\";\n\n// The body: the scrollable content region between header and footer. The panel caps its height\n// to the viewport; the body takes the remaining space and scrolls when content overflows (spec\n// §3). Body text is the body type role in secondary text (spec §5 --text-body / text-secondary).\nexport const dialogBodyClass =\n  \"min-h-0 flex-1 overflow-y-auto text-body text-text-secondary\";\n\n// The footer: the action region holding the primary and any secondary/cancel action, aligned to\n// the inline-end with a neutral hairline divider above it. The actions themselves are Buttons —\n// the dialog spec does not restate their --color-action-* bindings (spec §5 note). Logical-\n// property layout (G-U6): actions flow inline-end with a gap.\nexport const dialogFooterClass =\n  \"flex items-center justify-end gap-(--space-2) border-t border-border-default pt-(--space-4)\";\n\n// The close button: the dismiss control in the header. A NEUTRAL ghost surface — the glyph in\n// --color-action-ghost-fg at rest, the restrained ghost hover fill (spec §5 ghost-fg /\n// ghost-bg-hover), the md radius, the persistent focus ring, the target-size floor (44px touch /\n// 40px pointer, spec §7 2.5.8 / DEC-B) with the height EMERGING from the floor, never fixed\n// below it. fast functional hover motion + verdify easing, instant under reduced motion (G-U3).\nexport const dialogCloseVariants = cva([\n  \"inline-flex items-center justify-center rounded-(--radius-md)\",\n  // neutral ghost surface: glyph color at rest + restrained hover fill (no bg/border at rest)\n  \"text-action-ghost-fg hover:bg-action-ghost-bg-hover\",\n  // fast functional hover transition + verdify easing, instant under reduced motion (NEVER deliberate)\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // target-size floor: 44px touch / 40px pointer; the close button is square at the floor (DEC-B)\n  \"min-h-(--size-target-mobile) min-w-(--size-target-mobile)\",\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop)\",\n  // visible 2px focus ring at 2px offset; never removed\n  \"outline-none\",\n  \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n]);\n\n// The close glyph: a neutral X, --size-icon-md, drawn with currentColor so it inherits the\n// button's ghost-fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nexport const dialogCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type DialogPanelVariantProps = VariantProps<typeof dialogPanelVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAgBhC,MAAM,sBAAsB,IAAI;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAcM,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAIO,MAAM,oBACX;AAIK,MAAM,mBAAmB;AAIzB,MAAM,yBAAyB;AAK/B,MAAM,kBACX;AAMK,MAAM,oBACX;AAOK,MAAM,sBAAsB,IAAI;AAAA,EACrC;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF,CAAC;AAIM,MAAM,wBAAwB;","names":[]}