@verdify/ui 0.1.0

package/dist/components/select/select.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  triggerVariants,
+  placeholderClass,
+  listboxClass,
+  optionVariants,
+  checkClass,
+  groupLabelClass,
+  separatorClass,
+  errorTextClass,
+  descriptionClass,
+  labelClass
+} from "./select.variants";
+function ChevronIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className: "h-(--size-icon-md) w-(--size-icon-md)",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function CheckMark() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "select-check",
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      className: cn("h-(--size-icon-md) w-(--size-icon-md)", checkClass),
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-6.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+function groupOptions(options) {
+  const out = [];
+  for (const opt of options) {
+    const last = out[out.length - 1];
+    if (last && last.group === opt.group) last.items.push(opt);
+    else out.push({ group: opt.group, items: [opt] });
+  }
+  return out;
+}
+function Select({
+  label,
+  options,
+  placeholder,
+  description,
+  error,
+  disabled = false,
+  loading = false,
+  value,
+  defaultValue,
+  onValueChange,
+  size,
+  width,
+  className
+}) {
+  const reactId = React.useId();
+  const labelId = `${reactId}-label`;
+  const descId = `${reactId}-desc`;
+  const errId = `${reactId}-err`;
+  const describedBy = [description ? descId : null, error ? errId : null].filter(Boolean).join(" ") || void 0;
+  const groups = groupOptions(options);
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col", width === "full" && "w-full", className), children: [
+    /* @__PURE__ */ jsx("label", { id: labelId, className: labelClass, children: label }),
+    /* @__PURE__ */ jsxs(
+      SelectPrimitive.Root,
+      {
+        value,
+        defaultValue,
+        onValueChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxs(
+            SelectPrimitive.Trigger,
+            {
+              "aria-labelledby": labelId,
+              "aria-haspopup": "listbox",
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": describedBy,
+              "aria-busy": loading || void 0,
+              className: cn(triggerVariants({ size, width })),
+              children: [
+                /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder, className: placeholderClass }),
+                /* @__PURE__ */ jsx(SelectPrimitive.Icon, { children: /* @__PURE__ */ jsx(ChevronIcon, {}) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+            SelectPrimitive.Content,
+            {
+              role: "listbox",
+              position: "popper",
+              sideOffset: 4,
+              className: listboxClass,
+              children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children: groups.map((g, gi) => {
+                const groupLabelId = `${reactId}-group-${gi}`;
+                const body = g.items.map((opt) => /* @__PURE__ */ jsxs(
+                  SelectPrimitive.Item,
+                  {
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    className: cn(optionVariants({ size })),
+                    children: [
+                      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: opt.label }),
+                      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckMark, {}) })
+                    ]
+                  },
+                  opt.value
+                ));
+                if (!g.group) return /* @__PURE__ */ jsx(React.Fragment, { children: body }, gi);
+                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  gi > 0 ? /* @__PURE__ */ jsx(SelectPrimitive.Separator, { className: separatorClass }) : null,
+                  /* @__PURE__ */ jsxs(SelectPrimitive.Group, { "aria-labelledby": groupLabelId, children: [
+                    /* @__PURE__ */ jsx(SelectPrimitive.Label, { id: groupLabelId, className: groupLabelClass, children: g.group }),
+                    body
+                  ] })
+                ] }, gi);
+              }) })
+            }
+          ) })
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsx("span", { id: descId, className: descriptionClass, children: description }) : null,
+    error ? /* @__PURE__ */ jsx("span", { id: errId, className: errorTextClass, children: error }) : null
+  ] });
+}
+export {
+  Select
+};
+//# sourceMappingURL=select.js.map

package/dist/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  triggerVariants,\n  placeholderClass,\n  listboxClass,\n  optionVariants,\n  checkClass,\n  groupLabelClass,\n  separatorClass,\n  errorTextClass,\n  descriptionClass,\n  labelClass,\n  type TriggerVariantProps,\n} from \"./select.variants\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Optional group heading; consecutive options sharing a group are grouped. */\n  group?: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps extends TriggerVariantProps {\n  /** Visible, associated label — required; never replaced by the placeholder. */\n  label: string;\n  options: SelectOption[];\n  placeholder?: string;\n  /** Non-error helper text, wired via aria-describedby. */\n  description?: string;\n  /** Error text; sets aria-invalid + the strong border and wires aria-describedby. */\n  error?: string;\n  disabled?: boolean;\n  /** Options are resolving: sets aria-busy without blocking focus. */\n  loading?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  className?: string;\n}\n\n// Chevron + check as inline SVG (no extra icon dep); --size-icon-md sizing.\nfunction ChevronIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      className=\"h-(--size-icon-md) w-(--size-icon-md)\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    >\n      <path d=\"M4 6l4 4 4-4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction CheckMark() {\n  return (\n    <svg\n      data-testid=\"select-check\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      className={cn(\"h-(--size-icon-md) w-(--size-icon-md)\", checkClass)}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n    >\n      <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/** Group consecutive options by their `group` key, preserving order. */\nfunction groupOptions(options: SelectOption[]): { group?: string; items: SelectOption[] }[] {\n  const out: { group?: string; items: SelectOption[] }[] = [];\n  for (const opt of options) {\n    const last = out[out.length - 1];\n    if (last && last.group === opt.group) last.items.push(opt);\n    else out.push({ group: opt.group, items: [opt] });\n  }\n  return out;\n}\n\nexport function Select({\n  label,\n  options,\n  placeholder,\n  description,\n  error,\n  disabled = false,\n  loading = false,\n  value,\n  defaultValue,\n  onValueChange,\n  size,\n  width,\n  className,\n}: SelectProps) {\n  const reactId = React.useId();\n  const labelId = `${reactId}-label`;\n  const descId = `${reactId}-desc`;\n  const errId = `${reactId}-err`;\n  // aria-describedby: helper first, then error (both when present).\n  const describedBy =\n    [description ? descId : null, error ? errId : null].filter(Boolean).join(\" \") || undefined;\n  const groups = groupOptions(options);\n\n  return (\n    <div className={cn(\"inline-flex flex-col\", width === \"full\" && \"w-full\", className)}>\n      <label id={labelId} className={labelClass}>\n        {label}\n      </label>\n      <SelectPrimitive.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        disabled={disabled}\n      >\n        <SelectPrimitive.Trigger\n          // accessible name comes from the visible label, never the placeholder\n          aria-labelledby={labelId}\n          // Radix's trigger emits role=combobox + aria-controls + aria-expanded but\n          // NOT aria-haspopup; set it explicitly so the §7 listbox contract holds.\n          aria-haspopup=\"listbox\"\n          // FOCUS-MODEL DEVIATION from select.md §7 (recipe-level, accepted):\n          // §7 mandates DOM focus stay on the trigger with the active option conveyed\n          // ONLY via aria-activedescendant. radix-ui's Select (react-select 2.2.6)\n          // implements the *focus-moving* variant of the same APG select-only\n          // listbox pattern instead — it moves real DOM focus into the option items\n          // (focusSelectedItem/focusFirst) and emits NO aria-activedescendant at all.\n          // Both are documented APG variants; the keyboard model (incl. type-ahead),\n          // visible focus, name/role/value, and target-size floor all hold, and axe\n          // is clean closed and open. The literal §7 focus mechanism is therefore the\n          // one part of the contract this primitive does not implement; honoring it\n          // verbatim would require hand-rolling the listbox and abandoning Radix.\n          // select.md §7 wording to be amended to permit the focus-moving variant.\n          aria-invalid={error ? true : undefined}\n          aria-describedby={describedBy}\n          aria-busy={loading || undefined}\n          className={cn(triggerVariants({ size, width }))}\n        >\n          <SelectPrimitive.Value placeholder={placeholder} className={placeholderClass} />\n          <SelectPrimitive.Icon>\n            <ChevronIcon />\n          </SelectPrimitive.Icon>\n        </SelectPrimitive.Trigger>\n\n        <SelectPrimitive.Portal>\n          <SelectPrimitive.Content\n            role=\"listbox\"\n            position=\"popper\"\n            sideOffset={4}\n            className={listboxClass}\n          >\n            <SelectPrimitive.Viewport>\n              {groups.map((g, gi) => {\n                const groupLabelId = `${reactId}-group-${gi}`;\n                const body = g.items.map((opt) => (\n                  <SelectPrimitive.Item\n                    key={opt.value}\n                    value={opt.value}\n                    disabled={opt.disabled}\n                    className={cn(optionVariants({ size }))}\n                  >\n                    <SelectPrimitive.ItemText>{opt.label}</SelectPrimitive.ItemText>\n                    <SelectPrimitive.ItemIndicator>\n                      <CheckMark />\n                    </SelectPrimitive.ItemIndicator>\n                  </SelectPrimitive.Item>\n                ));\n                if (!g.group) return <React.Fragment key={gi}>{body}</React.Fragment>;\n                return (\n                  <React.Fragment key={gi}>\n                    {gi > 0 ? <SelectPrimitive.Separator className={separatorClass} /> : null}\n                    <SelectPrimitive.Group aria-labelledby={groupLabelId}>\n                      <SelectPrimitive.Label id={groupLabelId} className={groupLabelClass}>\n                        {g.group}\n                      </SelectPrimitive.Label>\n                      {body}\n                    </SelectPrimitive.Group>\n                  </React.Fragment>\n                );\n              })}\n            </SelectPrimitive.Viewport>\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      </SelectPrimitive.Root>\n\n      {description ? (\n        <span id={descId} className={descriptionClass}>\n          {description}\n        </span>\n      ) : null}\n      {error ? (\n        <span id={errId} className={errorTextClass}>\n          {error}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,18 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const triggerVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+    width?: "auto" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const placeholderClass = "text-control-placeholder";
+export declare const listboxClass: string;
+export declare const optionVariants: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const checkClass = "absolute end-2 inline-flex text-text-primary";
+export declare const groupLabelClass = "px-3 py-1 text-label text-text-muted select-none";
+export declare const separatorClass = "my-1 h-px bg-border-default";
+export declare const errorTextClass = "mt-1 text-label text-status-critical-fg";
+export declare const descriptionClass = "mt-1 text-label text-text-muted";
+export declare const labelClass = "text-label text-text-primary";
+export type TriggerVariantProps = VariantProps<typeof triggerVariants>;
+//# sourceMappingURL=select.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.variants.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,eAAe;;;8EAqD3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,6BAA6B,CAAC;AAG3D,eAAO,MAAM,YAAY,QAKd,CAAC;AAYZ,eAAO,MAAM,cAAc;;8EAoB1B,CAAC;AAGF,eAAO,MAAM,UAAU,iDAAiD,CAAC;AAGzE,eAAO,MAAM,eAAe,qDAAqD,CAAC;AAGlF,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAG5D,eAAO,MAAM,cAAc,4CAA4C,CAAC;AAExE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAElE,eAAO,MAAM,UAAU,iCAAiC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/select/select.variants.js

@@ -0,0 +1,102 @@
+import { cva } from "class-variance-authority";
+const triggerVariants = cva(
+  [
+    "inline-flex items-center justify-between gap-2 rounded-(--radius-md) px-3",
+    "bg-control-bg text-control-fg border border-control-border",
+    "hover:bg-action-secondary-bg-hover cursor-pointer select-none",
+    // DEC-A — the trigger is a form field, so its value SIZE is text-base (16px): the
+    // iOS no-zoom reset is a hard floor that holds on EVERY size. The brand type ROLE
+    // (line-height + letter-spacing) rides along via the role-suffix vars set per size
+    // below. text-body itself (a 15px font-size) is NEVER bound on the trigger — under
+    // the role-aware cn it collapses against text-base, and 15px reintroduces the iOS
+    // focus zoom the reset exists to prevent. So the font-size stays text-base across
+    // sizes; only the leading/tracking role and the padding density shift.
+    "text-base",
+    // open/close transition — base duration + verdify easing, never deliberate theatre
+    "transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+    // target-size floor: 44px touch / 40px pointer
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // visible 2px signal-blue ring at 2px offset; persists while the listbox is open
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    "data-[state=open]:ring-2 data-[state=open]:ring-border-focus data-[state=open]:ring-offset-2",
+    // error: strong border treatment, driven by aria-invalid
+    "aria-invalid:border-border-strong",
+    // disabled: out of tab order (Radix sets data-disabled), reduced emphasis
+    "data-[disabled]:pointer-events-none data-[disabled]:cursor-default",
+    "disabled:text-text-disabled data-[disabled]:text-text-disabled"
+  ],
+  {
+    variants: {
+      // DEC-B: @verdify/tokens exposes only target-size FLOORS (44px / 40px), no
+      // height scale. Every size anchors the shared floor (min-h-, in the base) and
+      // NEVER sets a fixed height below it (a11y). Each size is TYPE-ROLE + vertical
+      // padding (density) ABOVE the floor; the resting height EMERGES from the padding
+      // and grows monotonically sm <= md <= lg. Because the trigger is a form field
+      // (DEC-A), the value font-SIZE is pinned to text-base in the base — so here the
+      // type role shifts only through the brand line-height + letter-spacing role
+      // suffix (NOT the font-size), tightening at sm (caption metrics) and loosening at
+      // lg (body-lg metrics). The padding ladder is --space-1 (.25rem) <= --space-2
+      // (.5rem) <= --space-3 (.75rem), all >= the floor. (An earlier build set fixed
+      // h-(--size-target-*), which made lg SHORTER than sm/md on desktop — the inverse
+      // of the requirement — and is removed.)
+      size: {
+        sm: "leading-(--text-caption--line-height) tracking-(--text-caption--letter-spacing) py-(--space-1)",
+        md: "leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) py-(--space-2)",
+        lg: "leading-(--text-body-lg--line-height) tracking-(--text-body-lg--letter-spacing) py-(--space-3)"
+      },
+      width: {
+        auto: "w-auto",
+        full: "w-full"
+      }
+    },
+    defaultVariants: { size: "md", width: "auto" }
+  }
+);
+const placeholderClass = "text-control-placeholder";
+const listboxClass = [
+  "z-50 overflow-hidden rounded-(--radius-md) p-1",
+  "bg-surface-raised border border-surface-border shadow-(--shadow-md)",
+  "transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+  "motion-reduce:transition-none"
+].join(" ");
+const optionVariants = cva(
+  [
+    "relative flex items-center gap-2 rounded-(--radius-md) pe-8 ps-3",
+    "text-text-primary outline-none cursor-pointer select-none",
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // active (highlighted) option uses the secondary hover fill
+    "data-[highlighted]:bg-action-secondary-bg-hover data-[highlighted]:outline-none",
+    // disabled option: reduced emphasis, not operable
+    "data-[disabled]:text-text-disabled data-[disabled]:pointer-events-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-caption py-(--space-1)",
+        md: "text-body py-(--space-2)",
+        lg: "text-body-lg py-(--space-3)"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const checkClass = "absolute end-2 inline-flex text-text-primary";
+const groupLabelClass = "px-3 py-1 text-label text-text-muted select-none";
+const separatorClass = "my-1 h-px bg-border-default";
+const errorTextClass = "mt-1 text-label text-status-critical-fg";
+const descriptionClass = "mt-1 text-label text-text-muted";
+const labelClass = "text-label text-text-primary";
+export {
+  checkClass,
+  descriptionClass,
+  errorTextClass,
+  groupLabelClass,
+  labelClass,
+  listboxClass,
+  optionVariants,
+  placeholderClass,
+  separatorClass,
+  triggerVariants
+};
+//# sourceMappingURL=select.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/select.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Trigger: control-* tier surface, secondary hover fill, focus ring that persists\n// while open, strong border in error, target-size floor, base+verdify motion.\nexport const triggerVariants = cva(\n  [\n    \"inline-flex items-center justify-between gap-2 rounded-(--radius-md) px-3\",\n    \"bg-control-bg text-control-fg border border-control-border\",\n    \"hover:bg-action-secondary-bg-hover cursor-pointer select-none\",\n    // DEC-A — the trigger is a form field, so its value SIZE is text-base (16px): the\n    // iOS no-zoom reset is a hard floor that holds on EVERY size. The brand type ROLE\n    // (line-height + letter-spacing) rides along via the role-suffix vars set per size\n    // below. text-body itself (a 15px font-size) is NEVER bound on the trigger — under\n    // the role-aware cn it collapses against text-base, and 15px reintroduces the iOS\n    // focus zoom the reset exists to prevent. So the font-size stays text-base across\n    // sizes; only the leading/tracking role and the padding density shift.\n    \"text-base\",\n    // open/close transition — base duration + verdify easing, never deliberate theatre\n    \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n    // target-size floor: 44px touch / 40px pointer\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px signal-blue ring at 2px offset; persists while the listbox is open\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"data-[state=open]:ring-2 data-[state=open]:ring-border-focus data-[state=open]:ring-offset-2\",\n    // error: strong border treatment, driven by aria-invalid\n    \"aria-invalid:border-border-strong\",\n    // disabled: out of tab order (Radix sets data-disabled), reduced emphasis\n    \"data-[disabled]:pointer-events-none data-[disabled]:cursor-default\",\n    \"disabled:text-text-disabled data-[disabled]:text-text-disabled\",\n  ],\n  {\n    variants: {\n      // DEC-B: @verdify/tokens exposes only target-size FLOORS (44px / 40px), no\n      // height scale. Every size anchors the shared floor (min-h-, in the base) and\n      // NEVER sets a fixed height below it (a11y). Each size is TYPE-ROLE + vertical\n      // padding (density) ABOVE the floor; the resting height EMERGES from the padding\n      // and grows monotonically sm <= md <= lg. Because the trigger is a form field\n      // (DEC-A), the value font-SIZE is pinned to text-base in the base — so here the\n      // type role shifts only through the brand line-height + letter-spacing role\n      // suffix (NOT the font-size), tightening at sm (caption metrics) and loosening at\n      // lg (body-lg metrics). The padding ladder is --space-1 (.25rem) <= --space-2\n      // (.5rem) <= --space-3 (.75rem), all >= the floor. (An earlier build set fixed\n      // h-(--size-target-*), which made lg SHORTER than sm/md on desktop — the inverse\n      // of the requirement — and is removed.)\n      size: {\n        sm: \"leading-(--text-caption--line-height) tracking-(--text-caption--letter-spacing) py-(--space-1)\",\n        md: \"leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) py-(--space-2)\",\n        lg: \"leading-(--text-body-lg--line-height) tracking-(--text-body-lg--letter-spacing) py-(--space-3)\",\n      },\n      width: {\n        auto: \"w-auto\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: { size: \"md\", width: \"auto\" },\n  },\n);\n\n// Placeholder text: de-emphasised, never the accessible name.\nexport const placeholderClass = \"text-control-placeholder\";\n\n// Listbox: raised surface, outer border, md elevation; opens with base motion only.\nexport const listboxClass = [\n  \"z-50 overflow-hidden rounded-(--radius-md) p-1\",\n  \"bg-surface-raised border border-surface-border shadow-(--shadow-md)\",\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:transition-none\",\n].join(\" \");\n\n// Option row: primary label, secondary hover/active fill, target-row floor.\n// DEC-B: the option row is parameterized by the SAME size the trigger is, so the\n// listbox density tracks the trigger. It anchors the shared target-row floor\n// (min-h-, in the base) and NEVER sets a fixed height below it; each size is\n// TYPE-ROLE + vertical padding (density) ABOVE the floor, the row height emerging\n// from the padding. Unlike the trigger, an option row is NOT a focused text field —\n// the iOS no-zoom reset does not apply — so here the type role shifts through the\n// actual font-SIZE role: caption (sm) < body (md) < body-lg (lg), paired with the\n// identical --space-1 <= --space-2 <= --space-3 padding ladder as the trigger. Both\n// type role and density therefore climb monotonically sm <= md <= lg, all >= floor.\nexport const optionVariants = cva(\n  [\n    \"relative flex items-center gap-2 rounded-(--radius-md) pe-8 ps-3\",\n    \"text-text-primary outline-none cursor-pointer select-none\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // active (highlighted) option uses the secondary hover fill\n    \"data-[highlighted]:bg-action-secondary-bg-hover data-[highlighted]:outline-none\",\n    // disabled option: reduced emphasis, not operable\n    \"data-[disabled]:text-text-disabled data-[disabled]:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-caption py-(--space-1)\",\n        md: \"text-body py-(--space-2)\",\n        lg: \"text-body-lg py-(--space-3)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The selected-option check — a NEUTRAL mark (text-text-primary), never a status color.\nexport const checkClass = \"absolute end-2 inline-flex text-text-primary\";\n\n// Group heading: non-selectable, muted.\nexport const groupLabelClass = \"px-3 py-1 text-label text-text-muted select-none\";\n\n// Listbox/option dividers.\nexport const separatorClass = \"my-1 h-px bg-border-default\";\n\n// Error-slot text — status critical foreground.\nexport const errorTextClass = \"mt-1 text-label text-status-critical-fg\";\n// Non-error helper text — muted.\nexport const descriptionClass = \"mt-1 text-label text-text-muted\";\n// The visible, associated label.\nexport const labelClass = \"text-label text-text-primary\";\n\nexport type TriggerVariantProps = VariantProps<typeof triggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAIhC,MAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,MAAM,OAAO,OAAO;AAAA,EAC/C;AACF;AAGO,MAAM,mBAAmB;AAGzB,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAGO,MAAM,aAAa;AAGnB,MAAM,kBAAkB;AAGxB,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAEvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa;","names":[]}

package/dist/components/separator/index.d.ts

@@ -0,0 +1,3 @@
+export { Separator, type SeparatorProps } from "./separator";
+export { separatorVariants, labeledSeparatorVariants, ruleSegmentVariants, separatorLabelClass, type SeparatorVariantProps, } from "./separator.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/separator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,mBAAmB,EACnB,mBAAmB,EACnB,KAAK,qBAAqB,GAC3B,MAAM,sBAAsB,CAAC"}

package/dist/components/separator/index.js

@@ -0,0 +1,15 @@
+import { Separator } from "./separator";
+import {
+  separatorVariants,
+  labeledSeparatorVariants,
+  ruleSegmentVariants,
+  separatorLabelClass
+} from "./separator.variants";
+export {
+  Separator,
+  labeledSeparatorVariants,
+  ruleSegmentVariants,
+  separatorLabelClass,
+  separatorVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/separator/index.ts"],"sourcesContent":["export { Separator, type SeparatorProps } from \"./separator\";\nexport {\n  separatorVariants,\n  labeledSeparatorVariants,\n  ruleSegmentVariants,\n  separatorLabelClass,\n  type SeparatorVariantProps,\n} from \"./separator.variants\";\n"],"mappings":"AAAA,SAAS,iBAAsC;AAC/C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type SeparatorVariantProps } from "./separator.variants";
+export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role">, SeparatorVariantProps {
+    /**
+     * `horizontal` (default) splits content stacked top to bottom; `vertical`
+     * splits content laid out inline and spans the block size of its row.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Decorative: the split is already obvious from layout and the line only
+     * reinforces it. Removed from the accessibility tree (role="none"). Ignored
+     * when a `label` is present — a labeled Separator is always semantic (spec §3).
+     */
+    decorative?: boolean;
+    /**
+     * A short centered word or phrase (for example "or") breaking the rule. When
+     * set, the rule renders as two segments with the label between them and the
+     * Separator is always semantic, exposing the label as its accessible name.
+     */
+    label?: string;
+}
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKL,KAAK,qBAAqB,EAC3B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EACxD,qBAAqB;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,SAAS,uFAkDrB,CAAC"}

package/dist/components/separator/separator.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  separatorVariants,
+  labeledSeparatorVariants,
+  ruleSegmentVariants,
+  separatorLabelClass
+} from "./separator.variants";
+const Separator = React.forwardRef(
+  function Separator2({ className, orientation = "horizontal", decorative = false, label, ...props }, ref) {
+    if (label != null && label !== "") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "separator",
+          "aria-label": label,
+          "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+          "data-orientation": orientation,
+          className: cn(labeledSeparatorVariants({ orientation }), className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-testid": "separator-rule",
+                "aria-hidden": "true",
+                className: cn(ruleSegmentVariants({ orientation }))
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: separatorLabelClass, children: label }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-testid": "separator-rule",
+                "aria-hidden": "true",
+                className: cn(ruleSegmentVariants({ orientation }))
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        ref,
+        orientation,
+        decorative,
+        className: cn(separatorVariants({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Separator
+};
+//# sourceMappingURL=separator.js.map

package/dist/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/separator/separator.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  separatorVariants,\n  labeledSeparatorVariants,\n  ruleSegmentVariants,\n  separatorLabelClass,\n  type SeparatorVariantProps,\n} from \"./separator.variants\";\n\nexport interface SeparatorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"role\">,\n    SeparatorVariantProps {\n  /**\n   * `horizontal` (default) splits content stacked top to bottom; `vertical`\n   * splits content laid out inline and spans the block size of its row.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * Decorative: the split is already obvious from layout and the line only\n   * reinforces it. Removed from the accessibility tree (role=\"none\"). Ignored\n   * when a `label` is present — a labeled Separator is always semantic (spec §3).\n   */\n  decorative?: boolean;\n  /**\n   * A short centered word or phrase (for example \"or\") breaking the rule. When\n   * set, the rule renders as two segments with the label between them and the\n   * Separator is always semantic, exposing the label as its accessible name.\n   */\n  label?: string;\n}\n\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  function Separator(\n    { className, orientation = \"horizontal\", decorative = false, label, ...props },\n    ref,\n  ) {\n    // A labeled Separator is always semantic (never decorative): a role=\"separator\"\n    // container with two aria-hidden rule segments flanking the centered label, which\n    // is the element's accessible name. Radix Separator.Root renders a single element,\n    // so the two-segment-plus-label anatomy (spec §2) is composed here.\n    if (label != null && label !== \"\") {\n      return (\n        <div\n          ref={ref}\n          role=\"separator\"\n          aria-label={label}\n          aria-orientation={orientation === \"vertical\" ? \"vertical\" : undefined}\n          data-orientation={orientation}\n          className={cn(labeledSeparatorVariants({ orientation }), className)}\n          {...props}\n        >\n          <div\n            data-testid=\"separator-rule\"\n            aria-hidden=\"true\"\n            className={cn(ruleSegmentVariants({ orientation }))}\n          />\n          <span className={separatorLabelClass}>{label}</span>\n          <div\n            data-testid=\"separator-rule\"\n            aria-hidden=\"true\"\n            className={cn(ruleSegmentVariants({ orientation }))}\n          />\n        </div>\n      );\n    }\n\n    // The bare rule. Radix Separator.Root gives the role mapping for free:\n    // role=\"separator\" when semantic (with aria-orientation only on the vertical one,\n    // since horizontal is the implicit default), or role=\"none\" when decorative —\n    // removing it from the accessibility tree. It is render-only (no hook / no state),\n    // so this component needs no 'use client' directive.\n    return (\n      <SeparatorPrimitive.Root\n        ref={ref}\n        orientation={orientation}\n        decorative={decorative}\n        className={cn(separatorVariants({ orientation }), className)}\n        {...props}\n      />\n    );\n  },\n);\n"],"mappings":"AA4CQ,SASE,KATF;AA5CR,YAAY,WAAW;AACvB,SAAS,aAAa,0BAA0B;AAChD,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAwBA,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASA,WACP,EAAE,WAAW,cAAc,cAAc,aAAa,OAAO,OAAO,GAAG,MAAM,GAC7E,KACA;AAKA,QAAI,SAAS,QAAQ,UAAU,IAAI;AACjC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,oBAAkB,gBAAgB,aAAa,aAAa;AAAA,UAC5D,oBAAkB;AAAA,UAClB,WAAW,GAAG,yBAAyB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,UACjE,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,eAAY;AAAA,gBACZ,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAAA;AAAA,YACpD;AAAA,YACA,oBAAC,UAAK,WAAW,qBAAsB,iBAAM;AAAA,YAC7C;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,eAAY;AAAA,gBACZ,WAAW,GAAG,oBAAoB,EAAE,YAAY,CAAC,CAAC;AAAA;AAAA,YACpD;AAAA;AAAA;AAAA,MACF;AAAA,IAEJ;AAOA,WACE;AAAA,MAAC,mBAAmB;AAAA,MAAnB;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,kBAAkB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["Separator"]}

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

@@ -0,0 +1,13 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const labeledSeparatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const ruleSegmentVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const separatorLabelClass = "shrink-0 text-caption text-text-secondary";
+export type SeparatorVariantProps = VariantProps<typeof separatorVariants>;
+//# sourceMappingURL=separator.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.variants.d.ts","sourceRoot":"","sources":["../../../src/components/separator/separator.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,iBAAiB;;8EAiB7B,CAAC;AAKF,eAAO,MAAM,wBAAwB;;8EASnC,CAAC;AAIH,eAAO,MAAM,mBAAmB;;8EAQ9B,CAAC;AAIH,eAAO,MAAM,mBAAmB,8CAA8C,CAAC;AAE/E,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/separator/separator.variants.js

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+const separatorVariants = cva(
+  [
+    // a flat, neutral structural line — the stroke comes from the border-default alias
+    "shrink-0 bg-border-default"
+  ],
+  {
+    variants: {
+      orientation: {
+        // splits content stacked top-to-bottom: a full-width 1px rule with block spacing
+        horizontal: "h-px w-full my-(--space-4)",
+        // splits content laid out inline: a 1px rule spanning the row's block size,
+        // with inline spacing
+        vertical: "w-px self-stretch mx-(--space-4)"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+const labeledSeparatorVariants = cva(["flex items-center"], {
+  variants: {
+    orientation: {
+      horizontal: "w-full gap-(--space-2) my-(--space-4)",
+      // a vertical labeled separator stacks its two segments around the label
+      vertical: "flex-col self-stretch gap-(--space-2) mx-(--space-4)"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+const ruleSegmentVariants = cva(["shrink-0 grow bg-border-default"], {
+  variants: {
+    orientation: {
+      horizontal: "h-px",
+      vertical: "w-px"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+const separatorLabelClass = "shrink-0 text-caption text-text-secondary";
+export {
+  labeledSeparatorVariants,
+  ruleSegmentVariants,
+  separatorLabelClass,
+  separatorVariants
+};
+//# sourceMappingURL=separator.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/separator/separator.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The rule stroke: a 1px line painted from the border-intent alias (NOT a neutral\n// primitive), so the divider re-points with the theme. A Separator has no\n// interactive state (spec §4) — no focus ring, no target-size floor, no state axis;\n// the ONLY axis is the structural orientation (spec §3). Block spacing (horizontal)\n// or inline spacing (vertical) is reserved around the rule from --space-4.\n//\n// Sizing uses the standard 1px utilities (h-px / w-px) — a stroke, not an arbitrary\n// raw value — and the full cross-axis extent (w-full / self-stretch).\nexport const separatorVariants = cva(\n  [\n    // a flat, neutral structural line — the stroke comes from the border-default alias\n    \"shrink-0 bg-border-default\",\n  ],\n  {\n    variants: {\n      orientation: {\n        // splits content stacked top-to-bottom: a full-width 1px rule with block spacing\n        horizontal: \"h-px w-full my-(--space-4)\",\n        // splits content laid out inline: a 1px rule spanning the row's block size,\n        // with inline spacing\n        vertical: \"w-px self-stretch mx-(--space-4)\",\n      },\n    },\n    defaultVariants: { orientation: \"horizontal\" },\n  },\n);\n\n// The labeled container: a semantic separator whose rule renders as two segments with\n// the centered label between them. The container reserves the same block/inline\n// spacing as the bare rule; the gap between each segment and the label is --space-2.\nexport const labeledSeparatorVariants = cva([\"flex items-center\"], {\n  variants: {\n    orientation: {\n      horizontal: \"w-full gap-(--space-2) my-(--space-4)\",\n      // a vertical labeled separator stacks its two segments around the label\n      vertical: \"flex-col self-stretch gap-(--space-2) mx-(--space-4)\",\n    },\n  },\n  defaultVariants: { orientation: \"horizontal\" },\n});\n\n// One flanking rule segment inside a labeled separator: a decorative 1px line that\n// grows to fill the space on its side of the label. Same border-default stroke.\nexport const ruleSegmentVariants = cva([\"shrink-0 grow bg-border-default\"], {\n  variants: {\n    orientation: {\n      horizontal: \"h-px\",\n      vertical: \"w-px\",\n    },\n  },\n  defaultVariants: { orientation: \"horizontal\" },\n});\n\n// The centered label text: the caption type role + secondary text color. Never the\n// brand violet, never a status hue — a divider carries no verification meaning.\nexport const separatorLabelClass = \"shrink-0 text-caption text-text-secondary\";\n\nexport type SeparatorVariantProps = VariantProps<typeof separatorVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAUhC,MAAM,oBAAoB;AAAA,EAC/B;AAAA;AAAA,IAEE;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,YAAY;AAAA;AAAA;AAAA,QAGZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAKO,MAAM,2BAA2B,IAAI,CAAC,mBAAmB,GAAG;AAAA,EACjE,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA;AAAA,MAEZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,aAAa,aAAa;AAC/C,CAAC;AAIM,MAAM,sBAAsB,IAAI,CAAC,iCAAiC,GAAG;AAAA,EAC1E,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,aAAa,aAAa;AAC/C,CAAC;AAIM,MAAM,sBAAsB;","names":[]}

package/dist/components/sheet/index.d.ts

@@ -0,0 +1,3 @@
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, type SheetProps, type SheetTriggerProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, } from "./sheet";
+export { sheetPanelVariants, sheetScrimVariants, sheetCloseVariants, type SheetPanelVariantProps, } from "./sheet.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,UAAU,EACV,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,qBAAqB,EAC1B,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,KAAK,sBAAsB,GAC5B,MAAM,kBAAkB,CAAC"}

package/dist/components/sheet/index.js

@@ -0,0 +1,31 @@
+import {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetFooter,
+  SheetClose
+} from "./sheet";
+import {
+  sheetPanelVariants,
+  sheetScrimVariants,
+  sheetCloseVariants
+} from "./sheet.variants";
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  sheetCloseVariants,
+  sheetPanelVariants,
+  sheetScrimVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sheet/index.ts"],"sourcesContent":["export {\n  Sheet,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetBody,\n  SheetFooter,\n  SheetClose,\n  type SheetProps,\n  type SheetTriggerProps,\n  type SheetContentProps,\n  type SheetHeaderProps,\n  type SheetTitleProps,\n  type SheetDescriptionProps,\n  type SheetBodyProps,\n  type SheetFooterProps,\n  type SheetCloseProps,\n} from \"./sheet\";\nexport {\n  sheetPanelVariants,\n  sheetScrimVariants,\n  sheetCloseVariants,\n  type SheetPanelVariantProps,\n} from \"./sheet.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAUK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}