@verdify/ui 0.1.0

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

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { type SheetPanelVariantProps } from "./sheet.variants";
+type SheetSide = NonNullable<SheetPanelVariantProps["side"]>;
+type SheetSize = NonNullable<SheetPanelVariantProps["size"]>;
+export interface SheetProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /**
+     * Docking edge + slide axis (spec §3): `inline-end` (default — slides from the inline-end edge,
+     * the right in LTR, for most secondary tasks), `inline-start` (slides from the inline-start edge,
+     * for navigation or start-of-reading-order context), or `block-end` (slides up from the block-end
+     * edge as a bottom sheet, for narrow and touch viewports). Logical, so it mirrors under dir=rtl.
+     */
+    side?: SheetSide;
+    /**
+     * Cross-axis extent (spec §3): `sm` / `md` (default) / `lg` — a width for an inline side, a
+     * height for a block side. `lg` never grows to the full viewport; a task that fills the screen
+     * should be a route, not a sheet.
+     */
+    size?: SheetSize;
+}
+/**
+ * Sheet is a modal panel that slides in from a viewport edge to hold a focused, secondary task —
+ * edit a profile, review a credential, configure a filter — without leaving the page underneath
+ * (spec §1). Use it when the task is too large for a popover and you want the page to stay in
+ * context behind a scrim; use Dialog for a small centered confirmation and a full route for a
+ * primary task. 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 Sheet({ side, size, children, ...rootProps }: SheetProps): import("react/jsx-runtime").JSX.Element;
+export interface SheetTriggerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {
+}
+/**
+ * The control that opens the sheet (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 SheetTrigger: React.ForwardRefExoticComponent<SheetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+}
+/**
+ * Renders the portal, the scrim, and the edge-anchored panel (spec §2 scrim + panel). The panel is
+ * `role="dialog"` with `aria-modal="true"` (Radix), takes the focus trap, is named by its
+ * `SheetTitle` via `aria-labelledby` and described by its `SheetDescription` 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 sheet is inert. A sheet is NEVER dismissed by a scrim (outside) click (spec §2 / §8 Don't):
+ * Escape and the close control are the only dismissals, so the scrim is a visible inert edge, not a
+ * dismiss affordance.
+ */
+export declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/** The top region: the title and the close button on the inline-end (spec §2 header). */
+export declare const SheetHeader: React.ForwardRefExoticComponent<SheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {
+}
+/**
+ * Names the task in one short statement, sentence case, no exclamation mark — it IS the sheet's
+ * accessible name, wired to the panel via `aria-labelledby` by Radix (spec §2 title, §7). Rendered
+ * as an `<h2>` by default at the sheet's title type role.
+ */
+export declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface SheetDescriptionProps 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, §7).
+ */
+export declare const SheetDescription: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+export interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The scrollable content region between header and footer (spec §2 body, §4 scrolled). The panel is
+ * a fixed-height flex column; the body takes the remaining space and is the ONLY part that scrolls
+ * when content overflows — the header and footer stay pinned.
+ */
+export declare const SheetBody: React.ForwardRefExoticComponent<SheetBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * The optional action region (spec §2 footer). The primary action sits at the inline-end with a
+ * Cancel beside it; the actions are Buttons — the footer consumes the `--color-action-*` aliases
+ * THROUGH Button, which the sheet spec does not restate (spec §5 note). A Cancel never replaces the
+ * close control, which stays present in the header.
+ */
+export declare const SheetFooter: React.ForwardRefExoticComponent<SheetFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface SheetCloseProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {
+}
+/**
+ * The dismiss control (spec §2 close): always present and reachable — a sheet is never closable by
+ * the scrim alone (spec §8). 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 Cancel never replaces the header close control.
+ */
+export declare const SheetClose: React.ForwardRefExoticComponent<SheetCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.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,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAE1B,KAAK,SAAS,GAAG,WAAW,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,WAAW,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC;AAgB7D,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACnE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAmB,EAAE,IAAW,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,UAAU,2CAM7F;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;CAAG;AAE3E;;;;GAIG;AACH,eAAO,MAAM,YAAY,6FAKvB,CAAC;AAEH,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;CAAG;AAE3E;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,0FAkCvB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,yFAAyF;AACzF,eAAO,MAAM,WAAW,yFAIvB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;CAAG;AAEzE;;;;GAIG;AACH,eAAO,MAAM,UAAU,4FAKrB,CAAC;AAEH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC;CAAG;AAE/E;;;GAGG;AACH,eAAO,MAAM,gBAAgB,oGAW3B,CAAC;AAEH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE/E;;;;GAIG;AACH,eAAO,MAAM,SAAS,uFAIrB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFAIvB,CAAC;AAoBF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC;CAAG;AAEzE;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,2FAoBrB,CAAC"}

package/dist/components/sheet/sheet.js

@@ -0,0 +1,120 @@
+"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 {
+  sheetScrimVariants,
+  sheetPanelVariants,
+  sheetHeaderClass,
+  sheetTitleClass,
+  sheetDescriptionClass,
+  sheetBodyClass,
+  sheetFooterClass,
+  sheetCloseVariants,
+  sheetCloseGlyphClass
+} from "./sheet.variants";
+const SheetContext = React.createContext({
+  side: "inline-end",
+  size: "md"
+});
+function Sheet({ side = "inline-end", size = "md", children, ...rootProps }) {
+  return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { side, size }, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...rootProps, children }) });
+}
+const SheetTrigger = React.forwardRef(function SheetTrigger2(props, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, ...props });
+});
+const SheetContent = React.forwardRef(function SheetContent2({ className, children, ...props }, ref) {
+  const { side, size } = React.useContext(SheetContext);
+  const guardOutside = (event) => event.preventDefault();
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        "data-testid": "sheet-scrim",
+        className: sheetScrimVariants()
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "aria-modal": "true",
+        className: cn(sheetPanelVariants({ side, size }), className),
+        onPointerDownOutside: guardOutside,
+        onInteractOutside: guardOutside,
+        ...props,
+        children
+      }
+    )
+  ] });
+});
+const SheetHeader = React.forwardRef(
+  function SheetHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(sheetHeaderClass, className), ...props });
+  }
+);
+const SheetTitle = React.forwardRef(function SheetTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn(sheetTitleClass, className), ...props });
+});
+const SheetDescription = React.forwardRef(function SheetDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn(sheetDescriptionClass, className),
+      ...props
+    }
+  );
+});
+const SheetBody = React.forwardRef(
+  function SheetBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(sheetBodyClass, className), ...props });
+  }
+);
+const SheetFooter = React.forwardRef(
+  function SheetFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(sheetFooterClass, className), ...props });
+  }
+);
+function CloseGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "data-testid": "sheet-close-glyph",
+      "aria-hidden": "true",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      className: sheetCloseGlyphClass,
+      children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8", strokeLinecap: "round", strokeLinejoin: "round" })
+    }
+  );
+}
+const SheetClose = React.forwardRef(function SheetClose2({ 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(sheetCloseVariants(), className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(CloseGlyph, {})
+    }
+  );
+});
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+};
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  sheetScrimVariants,\n  sheetPanelVariants,\n  sheetHeaderClass,\n  sheetTitleClass,\n  sheetDescriptionClass,\n  sheetBodyClass,\n  sheetFooterClass,\n  sheetCloseVariants,\n  sheetCloseGlyphClass,\n  type SheetPanelVariantProps,\n} from \"./sheet.variants\";\n\ntype SheetSide = NonNullable<SheetPanelVariantProps[\"side\"]>;\ntype SheetSize = NonNullable<SheetPanelVariantProps[\"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 `side`/`size` on `SheetContent` (mirrors the Dialog/Tabs/Accordion\n// precedent). `side` decides the docking edge + slide axis; `size` sets the panel's cross-axis\n// extent. Unlike Dialog, NEITHER axis affects the scrim-dismiss policy — a sheet is NEVER closable\n// by the scrim alone (spec §2 / §8); only Escape or the close control dismisses it.\ntype SheetContextValue = {\n  side: SheetSide;\n  size: SheetSize;\n};\nconst SheetContext = React.createContext<SheetContextValue>({\n  side: \"inline-end\",\n  size: \"md\",\n});\n\nexport interface SheetProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /**\n   * Docking edge + slide axis (spec §3): `inline-end` (default — slides from the inline-end edge,\n   * the right in LTR, for most secondary tasks), `inline-start` (slides from the inline-start edge,\n   * for navigation or start-of-reading-order context), or `block-end` (slides up from the block-end\n   * edge as a bottom sheet, for narrow and touch viewports). Logical, so it mirrors under dir=rtl.\n   */\n  side?: SheetSide;\n  /**\n   * Cross-axis extent (spec §3): `sm` / `md` (default) / `lg` — a width for an inline side, a\n   * height for a block side. `lg` never grows to the full viewport; a task that fills the screen\n   * should be a route, not a sheet.\n   */\n  size?: SheetSize;\n}\n\n/**\n * Sheet is a modal panel that slides in from a viewport edge to hold a focused, secondary task —\n * edit a profile, review a credential, configure a filter — without leaving the page underneath\n * (spec §1). Use it when the task is too large for a popover and you want the page to stay in\n * context behind a scrim; use Dialog for a small centered confirmation and a full route for a\n * primary task. It is a NEUTRAL overlay surface: the panel and scrim are neutral, brand violet\n * appears only on a footer primary action through Button, and Verified Green never appears here as\n * decoration (spec §3 / §5 / §8, brand != state). Wraps the Radix Dialog primitive (WAI-ARIA APG\n * modal-dialog pattern) — a stateful primitive, so this file is `'use client'`.\n */\nexport function Sheet({ side = \"inline-end\", size = \"md\", children, ...rootProps }: SheetProps) {\n  return (\n    <SheetContext.Provider value={{ side, size }}>\n      <DialogPrimitive.Root {...rootProps}>{children}</DialogPrimitive.Root>\n    </SheetContext.Provider>\n  );\n}\n\nexport interface SheetTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger> {}\n\n/**\n * The control that opens the sheet (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 SheetTrigger = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Trigger>,\n  SheetTriggerProps\n>(function SheetTrigger(props, ref) {\n  return <DialogPrimitive.Trigger ref={ref} {...props} />;\n});\n\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {}\n\n/**\n * Renders the portal, the scrim, and the edge-anchored 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 * `SheetTitle` via `aria-labelledby` and described by its `SheetDescription` via `aria-describedby`\n * (Radix wires both). On open, focus moves into the panel — to the first meaningful control, or the\n * panel itself when none exists — and returns to the trigger on close (spec §7). Content behind the\n * open sheet is inert. A sheet is NEVER dismissed by a scrim (outside) click (spec §2 / §8 Don't):\n * Escape and the close control are the only dismissals, so the scrim is a visible inert edge, not a\n * dismiss affordance.\n */\nexport const SheetContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  SheetContentProps\n>(function SheetContent({ className, children, ...props }, ref) {\n  const { side, size } = React.useContext(SheetContext);\n\n  // Block scrim-click dismissal (and the focus-out auto-dismiss that would follow a click landing\n  // outside) on EVERY sheet — unlike a standard Dialog, the scrim is never a dismiss control (spec\n  // §2 / §8). preventDefault on the outside-pointer/interaction keeps the panel open; Escape and\n  // the in-panel close control remain the dismissals.\n  const guardOutside = (event: Event) => event.preventDefault();\n\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-testid=\"sheet-scrim\"\n        className={sheetScrimVariants()}\n      />\n      <DialogPrimitive.Content\n        ref={ref}\n        // The spec §7 ARIA contract names aria-modal=\"true\" explicitly. This Radix version makes the\n        // rest of the page inert (pointer-events:none on body + aria-hidden on siblings) but does\n        // not emit aria-modal, so we set it to honor the frozen contract literally; the panel IS\n        // modal (the focus trap + inert siblings back the claim).\n        aria-modal=\"true\"\n        className={cn(sheetPanelVariants({ side, size }), className)}\n        onPointerDownOutside={guardOutside}\n        onInteractOutside={guardOutside}\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n});\n\nexport interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/** The top region: the title and the close button on the inline-end (spec §2 header). */\nexport const SheetHeader = React.forwardRef<HTMLDivElement, SheetHeaderProps>(\n  function SheetHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(sheetHeaderClass, className)} {...props} />;\n  },\n);\n\nexport interface SheetTitleProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n\n/**\n * Names the task in one short statement, sentence case, no exclamation mark — it IS the sheet's\n * accessible name, wired to the panel via `aria-labelledby` by Radix (spec §2 title, §7). Rendered\n * as an `<h2>` by default at the sheet's title type role.\n */\nexport const SheetTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  SheetTitleProps\n>(function SheetTitle({ className, ...props }, ref) {\n  return <DialogPrimitive.Title ref={ref} className={cn(sheetTitleClass, className)} {...props} />;\n});\n\nexport interface SheetDescriptionProps\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, §7).\n */\nexport const SheetDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  SheetDescriptionProps\n>(function SheetDescription({ className, ...props }, ref) {\n  return (\n    <DialogPrimitive.Description\n      ref={ref}\n      className={cn(sheetDescriptionClass, className)}\n      {...props}\n    />\n  );\n});\n\nexport interface SheetBodyProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The scrollable content region between header and footer (spec §2 body, §4 scrolled). The panel is\n * a fixed-height flex column; the body takes the remaining space and is the ONLY part that scrolls\n * when content overflows — the header and footer stay pinned.\n */\nexport const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(\n  function SheetBody({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(sheetBodyClass, className)} {...props} />;\n  },\n);\n\nexport interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * The optional action region (spec §2 footer). The primary action sits at the inline-end with a\n * Cancel beside it; the actions are Buttons — the footer consumes the `--color-action-*` aliases\n * THROUGH Button, which the sheet spec does not restate (spec §5 note). A Cancel never replaces the\n * close control, which stays present in the header.\n */\nexport const SheetFooter = React.forwardRef<HTMLDivElement, SheetFooterProps>(\n  function SheetFooter({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(sheetFooterClass, 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=\"sheet-close-glyph\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={sheetCloseGlyphClass}\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport interface SheetCloseProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {}\n\n/**\n * The dismiss control (spec §2 close): always present and reachable — a sheet is never closable by\n * the scrim alone (spec §8). Closing returns focus to the trigger (Radix). Two forms, both proven\n * 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. A Cancel never replaces the header close control.\n */\nexport const SheetClose = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Close>,\n  SheetCloseProps\n>(function SheetClose({ 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(sheetCloseVariants(), className)}\n      {...props}\n    >\n      {children ?? <CloseGlyph />}\n    </DialogPrimitive.Close>\n  );\n});\n"],"mappings":"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","names":["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetBody","SheetFooter","SheetClose"]}

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

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const sheetScrimVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const sheetPanelVariants: (props?: ({
+    side?: "inline-end" | "inline-start" | "block-end" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sheetHeaderClass = "flex items-start justify-between gap-(--space-4) border-b border-surface-border-muted pb-(--space-4)";
+export declare const sheetTitleClass = "text-h2 text-text-primary";
+export declare const sheetDescriptionClass = "text-body text-text-secondary";
+export declare const sheetBodyClass = "min-h-0 flex-1 overflow-y-auto text-body text-text-secondary";
+export declare const sheetFooterClass = "flex items-center justify-end gap-(--space-2) border-t border-surface-border-muted pt-(--space-4)";
+export declare const sheetCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const sheetCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export type SheetPanelVariantProps = VariantProps<typeof sheetPanelVariants>;
+//# sourceMappingURL=sheet.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.variants.d.ts","sourceRoot":"","sources":["../../../src/components/sheet/sheet.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAclE,eAAO,MAAM,kBAAkB,oFAK7B,CAAC;AA0BH,eAAO,MAAM,kBAAkB;;;8EAyD9B,CAAC;AAMF,eAAO,MAAM,gBAAgB,yGAC2E,CAAC;AAKzG,eAAO,MAAM,eAAe,8BAA8B,CAAC;AAI3D,eAAO,MAAM,qBAAqB,kCAAkC,CAAC;AAMrE,eAAO,MAAM,cAAc,iEACqC,CAAC;AAMjE,eAAO,MAAM,gBAAgB,sGACwE,CAAC;AAQtG,eAAO,MAAM,kBAAkB,oFAa7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,0CAA0C,CAAC;AAE5E,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/sheet/sheet.variants.js

@@ -0,0 +1,97 @@
+import { cva } from "class-variance-authority";
+const sheetScrimVariants = 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 sheetPanelVariants = cva(
+  [
+    "fixed z-(--z-index-modal)",
+    // a flex column: header + footer stay pinned, the body scrolls within (spec §4 scrolled)
+    "flex flex-col gap-(--space-4)",
+    // 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 slide+fade open/close + 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 — the fade is shared across sides (the per-side slide lives
+    // in the side variant); attribute-selector variants, not arbitrary values
+    "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+    // 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: {
+      // side = the docking edge + slide axis (spec §3). Logical inset properties (G-U6): inset-y-0
+      // / inset-x-0 pin the full extent along the docked edge; start-0 / end-0 / bottom-0 dock it.
+      // The closed-state translate slides the panel fully off its own edge; open returns it to 0.
+      side: {
+        "inline-end": [
+          "inset-y-0 end-0 h-full",
+          "data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
+        ],
+        "inline-start": [
+          "inset-y-0 start-0 h-full",
+          "data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full"
+        ],
+        "block-end": [
+          "inset-x-0 bottom-0 w-full",
+          "data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full"
+        ]
+      },
+      // size = cross-axis extent. The concrete axis (width vs height) is resolved per-side by the
+      // compoundVariants below — this key only carries the default for type inference.
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    compoundVariants: [
+      // inline sides: size -> WIDTH (the cross-axis of a side that pins the block extent)
+      { side: ["inline-end", "inline-start"], size: "sm", class: "w-(--container-sm)" },
+      { side: ["inline-end", "inline-start"], size: "md", class: "w-(--container-md)" },
+      { side: ["inline-end", "inline-start"], size: "lg", class: "w-(--container-lg)" },
+      // block side: size -> HEIGHT (the cross-axis of a side that pins the inline extent)
+      { side: "block-end", size: "sm", class: "h-(--container-sm)" },
+      { side: "block-end", size: "md", class: "h-(--container-md)" },
+      { side: "block-end", size: "lg", class: "h-(--container-lg)" }
+    ],
+    defaultVariants: { side: "inline-end", size: "md" }
+  }
+);
+const sheetHeaderClass = "flex items-start justify-between gap-(--space-4) border-b border-surface-border-muted pb-(--space-4)";
+const sheetTitleClass = "text-h2 text-text-primary";
+const sheetDescriptionClass = "text-body text-text-secondary";
+const sheetBodyClass = "min-h-0 flex-1 overflow-y-auto text-body text-text-secondary";
+const sheetFooterClass = "flex items-center justify-end gap-(--space-2) border-t border-surface-border-muted pt-(--space-4)";
+const sheetCloseVariants = 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 sheetCloseGlyphClass = "h-(--size-icon-md) w-(--size-icon-md)";
+export {
+  sheetBodyClass,
+  sheetCloseGlyphClass,
+  sheetCloseVariants,
+  sheetDescriptionClass,
+  sheetFooterClass,
+  sheetHeaderClass,
+  sheetPanelVariants,
+  sheetScrimVariants,
+  sheetTitleClass
+};
+//# sourceMappingURL=sheet.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sheet/sheet.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Sheet is a NEUTRAL overlay surface (spec §1/§3/§5/§8): brand violet and Verified Green are\n// accents that enter only through the components placed INSIDE the panel (a primary Button, a\n// VerifiedBadge), never on the PANEL or the SCRIM themselves. Restraint over volume — neutrals\n// carry the surface. So NOTHING in this file binds an --color-action-primary-* or --color-status-*\n// fill (brand != state, G-U2). This is the ONLY token-binding site (skill §5 hard rule).\n\n// The scrim: the dimming layer between the page and the panel; it signals the page behind is inert\n// and gives the focus trap a visible edge (spec §2 scrim, §5 --color-scrim-*). A neutral dim on the\n// modal z-layer, decorative (no role). The fade is a PLAIN base transition + verdify easing,\n// instant under reduced motion — never the 350ms VerifiedBadge-only theatre (G-U3 motion-theatre\n// gate). Enter/exit ride Radix's data-state on the overlay (attribute-selector variants, not\n// arbitrary values). On a light surface the dark scrim token applies (spec §5: scrim-dark).\nexport const sheetScrimVariants = 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 anchored to ONE viewport edge; 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 on its LEADING corners, the lg elevation shadow above the scrim, fixed on\n// the modal z-layer. It never fills the viewport (spec §3: lg never grows to full screen — a sheet\n// that fills the screen should be a route) and scrolls its BODY when content overflows (spec §4\n// scrolled) — the panel is a flex column; the SheetBody owns the scroll. Panel padding/gaps come\n// from --space-*.\n//\n// side (spec §3) = the docking edge AND the slide axis:\n//   - inline-end (default) / inline-start: pinned to the full BLOCK extent (inset-y-0), sized by\n//     WIDTH, sliding along the inline axis (translate-x). LTR right / left; mirrors under dir=rtl\n//     because start/end are logical (G-U6).\n//   - block-end: pinned to the full INLINE extent (inset-x-0), sized by HEIGHT, sliding up from the\n//     bottom (translate-y). Reads as a bottom sheet on narrow/touch viewports.\n//\n// size (spec §3) = the CROSS-AXIS extent only — a WIDTH for an inline side, a HEIGHT for a block\n// side. md is the default. Resolved per-side by the compoundVariants below (an inline side maps\n// size -> w-(--container-*); a block side maps size -> h-(--container-*)). Bound to the shared\n// --container-* scale, the same scale Dialog caps its width with.\n//\n// The slide+fade open/close is the BASE duration + verdify easing, instant under reduced motion,\n// and rides Radix's data-state (attribute-selector enter/exit, not arbitrary values). NEVER the\n// deliberate verified-check theatre (G-U3). The closed translate is a per-side keyword utility\n// (translate-x-full / -translate-x-full / translate-y-full), set in the side variant.\nexport const sheetPanelVariants = cva(\n  [\n    \"fixed z-(--z-index-modal)\",\n    // a flex column: header + footer stay pinned, the body scrolls within (spec §4 scrolled)\n    \"flex flex-col gap-(--space-4)\",\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 slide+fade open/close + 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 — the fade is shared across sides (the per-side slide lives\n    // in the side variant); attribute-selector variants, not arbitrary values\n    \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\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      // side = the docking edge + slide axis (spec §3). Logical inset properties (G-U6): inset-y-0\n      // / inset-x-0 pin the full extent along the docked edge; start-0 / end-0 / bottom-0 dock it.\n      // The closed-state translate slides the panel fully off its own edge; open returns it to 0.\n      side: {\n        \"inline-end\": [\n          \"inset-y-0 end-0 h-full\",\n          \"data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full\",\n        ],\n        \"inline-start\": [\n          \"inset-y-0 start-0 h-full\",\n          \"data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full\",\n        ],\n        \"block-end\": [\n          \"inset-x-0 bottom-0 w-full\",\n          \"data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full\",\n        ],\n      },\n      // size = cross-axis extent. The concrete axis (width vs height) is resolved per-side by the\n      // compoundVariants below — this key only carries the default for type inference.\n      size: {\n        sm: \"\",\n        md: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      // inline sides: size -> WIDTH (the cross-axis of a side that pins the block extent)\n      { side: [\"inline-end\", \"inline-start\"], size: \"sm\", class: \"w-(--container-sm)\" },\n      { side: [\"inline-end\", \"inline-start\"], size: \"md\", class: \"w-(--container-md)\" },\n      { side: [\"inline-end\", \"inline-start\"], size: \"lg\", class: \"w-(--container-lg)\" },\n      // block side: size -> HEIGHT (the cross-axis of a side that pins the inline extent)\n      { side: \"block-end\", size: \"sm\", class: \"h-(--container-sm)\" },\n      { side: \"block-end\", size: \"md\", class: \"h-(--container-md)\" },\n      { side: \"block-end\", size: \"lg\", class: \"h-(--container-lg)\" },\n    ],\n    defaultVariants: { side: \"inline-end\", size: \"md\" },\n  },\n);\n\n// The header: the top region holding the title and the close button on the inline-end (spec §2\n// header). Logical-property layout (G-U6); a MUTED surface-border hairline divider under it (spec\n// §5 --color-surface-border-muted) — the panel's inner dividers are muted, distinct from its outer\n// surface-border edge.\nexport const sheetHeaderClass =\n  \"flex items-start justify-between gap-(--space-4) border-b border-surface-border-muted pb-(--space-4)\";\n\n// The title: names the task as a statement, sentence case (spec §2). It IS the panel's accessible\n// name (Radix wires aria-labelledby). The h2 type role in primary text (spec §5 --text-h2 /\n// --color-text-primary).\nexport const sheetTitleClass = \"text-h2 text-text-primary\";\n\n// The description: optional supporting text under the title, associated with the panel for screen\n// readers (Radix wires aria-describedby). Body type role in secondary text (spec §5).\nexport const sheetDescriptionClass = \"text-body text-text-secondary\";\n\n// The body: the scrollable content region between header and footer (spec §2 body, §4 scrolled).\n// The panel is a fixed-height flex column; the body takes the remaining space and is the ONLY part\n// that scrolls — the header and footer stay pinned. Body text is the body type role in secondary\n// text (spec §5 --text-body / text-secondary).\nexport const sheetBodyClass =\n  \"min-h-0 flex-1 overflow-y-auto text-body text-text-secondary\";\n\n// The footer: the optional action region (spec §2 footer). The primary action sits at the\n// inline-end with a Cancel beside it; the actions are Buttons — the sheet spec does not restate\n// their --color-action-* bindings (spec §5 note). A MUTED surface-border hairline divider above it\n// (spec §5). Logical-property layout (G-U6): actions flow inline-end with a gap.\nexport const sheetFooterClass =\n  \"flex items-center justify-end gap-(--space-2) border-t border-surface-border-muted pt-(--space-4)\";\n\n// The close button: the dismiss control in the header, always present and reachable — a sheet is\n// never closable by the scrim alone (spec §2 close, §8). 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 below\n// it. fast functional hover motion + verdify easing, instant under reduced motion (G-U3).\nexport const sheetCloseVariants = 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 button's\n// ghost-fg. Decorative (aria-hidden) — the button carries the accessible name (spec §7).\nexport const sheetCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type SheetPanelVariantProps = VariantProps<typeof sheetPanelVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAchC,MAAM,qBAAqB,IAAI;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AA0BM,MAAM,qBAAqB;AAAA,EAChC;AAAA,IACE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,MAAM;AAAA,QACJ,cAAc;AAAA,UACZ;AAAA,UACA;AAAA,QACF;AAAA,QACA,gBAAgB;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA;AAAA;AAAA,MAGA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,kBAAkB;AAAA;AAAA,MAEhB,EAAE,MAAM,CAAC,cAAc,cAAc,GAAG,MAAM,MAAM,OAAO,qBAAqB;AAAA,MAChF,EAAE,MAAM,CAAC,cAAc,cAAc,GAAG,MAAM,MAAM,OAAO,qBAAqB;AAAA,MAChF,EAAE,MAAM,CAAC,cAAc,cAAc,GAAG,MAAM,MAAM,OAAO,qBAAqB;AAAA;AAAA,MAEhF,EAAE,MAAM,aAAa,MAAM,MAAM,OAAO,qBAAqB;AAAA,MAC7D,EAAE,MAAM,aAAa,MAAM,MAAM,OAAO,qBAAqB;AAAA,MAC7D,EAAE,MAAM,aAAa,MAAM,MAAM,OAAO,qBAAqB;AAAA,IAC/D;AAAA,IACA,iBAAiB,EAAE,MAAM,cAAc,MAAM,KAAK;AAAA,EACpD;AACF;AAMO,MAAM,mBACX;AAKK,MAAM,kBAAkB;AAIxB,MAAM,wBAAwB;AAM9B,MAAM,iBACX;AAMK,MAAM,mBACX;AAQK,MAAM,qBAAqB,IAAI;AAAA,EACpC;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF,CAAC;AAIM,MAAM,uBAAuB;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Sidebar, SidebarHeader, SidebarGroup, SidebarItem, SidebarFooter, SidebarCollapseToggle, type SidebarProps, type SidebarHeaderProps, type SidebarGroupProps, type SidebarItemProps, type SidebarFooterProps, type SidebarCollapseToggleProps, } from "./sidebar";
+export { sidebarRailVariants, sidebarHeaderClass, sidebarGroupClass, sidebarGroupLabelClass, sidebarListClass, sidebarItemVariants, sidebarItemIconClass, sidebarItemLabelClass, sidebarItemTrailingClass, sidebarFooterClass, sidebarCollapseToggleClass, sidebarCollapseIconClass, type SidebarRailVariantProps, type SidebarItemVariantProps, type SidebarCollapseToggleVariantProps, } from "./sidebar.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,0BAA0B,GAChC,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,EACtB,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACpB,qBAAqB,EACrB,wBAAwB,EACxB,kBAAkB,EAClB,0BAA0B,EAC1B,wBAAwB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,iCAAiC,GACvC,MAAM,oBAAoB,CAAC"}

package/dist/components/sidebar/index.js

@@ -0,0 +1,43 @@
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarGroup,
+  SidebarItem,
+  SidebarFooter,
+  SidebarCollapseToggle
+} from "./sidebar";
+import {
+  sidebarRailVariants,
+  sidebarHeaderClass,
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarListClass,
+  sidebarItemVariants,
+  sidebarItemIconClass,
+  sidebarItemLabelClass,
+  sidebarItemTrailingClass,
+  sidebarFooterClass,
+  sidebarCollapseToggleClass,
+  sidebarCollapseIconClass
+} from "./sidebar.variants";
+export {
+  Sidebar,
+  SidebarCollapseToggle,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarItem,
+  sidebarCollapseIconClass,
+  sidebarCollapseToggleClass,
+  sidebarFooterClass,
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarHeaderClass,
+  sidebarItemIconClass,
+  sidebarItemLabelClass,
+  sidebarItemTrailingClass,
+  sidebarItemVariants,
+  sidebarListClass,
+  sidebarRailVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sidebar/index.ts"],"sourcesContent":["export {\n  Sidebar,\n  SidebarHeader,\n  SidebarGroup,\n  SidebarItem,\n  SidebarFooter,\n  SidebarCollapseToggle,\n  type SidebarProps,\n  type SidebarHeaderProps,\n  type SidebarGroupProps,\n  type SidebarItemProps,\n  type SidebarFooterProps,\n  type SidebarCollapseToggleProps,\n} from \"./sidebar\";\nexport {\n  sidebarRailVariants,\n  sidebarHeaderClass,\n  sidebarGroupClass,\n  sidebarGroupLabelClass,\n  sidebarListClass,\n  sidebarItemVariants,\n  sidebarItemIconClass,\n  sidebarItemLabelClass,\n  sidebarItemTrailingClass,\n  sidebarFooterClass,\n  sidebarCollapseToggleClass,\n  sidebarCollapseIconClass,\n  type SidebarRailVariantProps,\n  type SidebarItemVariantProps,\n  type SidebarCollapseToggleVariantProps,\n} from \"./sidebar.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAOK;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,OAIK;","names":[]}

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { type SidebarRailVariantProps } from "./sidebar.variants";
+type SidebarSide = NonNullable<SidebarRailVariantProps["side"]>;
+export interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange"> {
+    /** The docked edge (spec §3). `inline-start` (default) or `inline-end` — logical, mirrors under RTL. */
+    side?: SidebarSide;
+    /**
+     * The rail starts collapsed when uncontrolled (spec §3 `collapsed`): a narrow rail of icons only.
+     * For a controlled rail set `collapsed` + `onCollapsedChange` instead.
+     */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state (spec §3). When set, the rail is controlled — pair with `onCollapsedChange`. */
+    collapsed?: boolean;
+    /** Notified when the collapse-toggle flips the rail width (spec §3/§4). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * The landmark's accessible name (spec §7), so multiple `navigation` landmarks on a page are
+     * distinguishable — for example "Primary". Use `aria-labelledby` pointing at a visible heading
+     * (e.g. the `SidebarHeader`) instead when the rail has a visible title.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A Sidebar is the primary navigation rail down one edge of an app shell: it lists the destinations
+ * a person or an agent moves between and marks where they are now (spec §1). It is the `navigation`
+ * landmark wrapping a list of real `<a href>` links. Reach for a Menu for a short transient list of
+ * actions, Tabs when panels are peers within one page, and Breadcrumb for depth within a destination.
+ *
+ * The rail is a NEUTRAL surface — it does not wear the brand (spec §3): the current item takes the
+ * primary ACTION accent (where you are), never a status color; a verified meaning belongs to
+ * VerifiedBadge, never to a navigation item (brand != state). On narrow/touch viewports the rail
+ * leaves the layout and opens as a modal drawer — use the Sheet `side=inline-start` pattern
+ * (./sheet.md) for that; this component covers the DOCKED rail.
+ *
+ * It owns the collapse state and the roving arrow-key focus over its items, so it is `'use client'`.
+ */
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
+export type SidebarHeaderProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * The top slot for a product mark or workspace switcher (spec §2). It is NOT a navigation item and
+ * is skipped by item arrow movement. Give it an `id` and point the rail's `aria-labelledby` at it to
+ * name the landmark from a visible heading.
+ */
+export declare const SidebarHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** The cluster's visible heading (spec §2 group). It also names the group for assistive tech. */
+    label?: React.ReactNode;
+}
+/**
+ * A labeled cluster of items (spec §2 group). Use groups only when the labels earn their space;
+ * restraint over volume keeps the rail scannable. The heading names the group via `aria-labelledby`,
+ * so its items read as a related set (1.3.1 Info and Relationships). The items live in a `<ul>` so
+ * they expose the list relationship. In the collapsed rail the heading is hidden (icons only) but the
+ * group keeps its accessible name.
+ */
+export declare const SidebarGroup: React.ForwardRefExoticComponent<SidebarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarItemProps extends Omit<React.ComponentPropsWithoutRef<"a">, "color"> {
+    /** The destination (spec §7). Items are real links; omit it only on a disabled item. */
+    href?: string;
+    /** The leading icon (spec §2): decorative, sized by `--size-icon-md`. The item names itself by its label text. */
+    icon?: React.ReactNode;
+    /** A trailing count or status (spec §2): text or an `aria-label`, never color alone (spec §7). */
+    trailing?: React.ReactNode;
+    /**
+     * This is the item for the page you are on (spec §4 Current). It sets `aria-current="page"`, lifts
+     * its label to the primary text color, and shows the brand action indicator bar — where you are,
+     * never a status color. Exactly one item in the rail is current.
+     */
+    current?: boolean;
+    /**
+     * The item is present but not operable (spec §4 Disabled): it is skipped by arrow movement and the
+     * tab order and drops its `href`, while its label stays readable to assistive technology.
+     */
+    disabled?: boolean;
+    /**
+     * Project the item styling onto a caller-supplied anchor (a framework router `<Link>` rendered as an
+     * `<a>`) via Radix Slot, instead of the default native `<a>` (spec §2). Slot runs
+     * `React.Children.only` — pass exactly one anchor child holding the icon + label.
+     */
+    asChild?: boolean;
+}
+/**
+ * One navigation item (spec §2 item, §4 states): a native `<a href>` link holding a leading icon, a
+ * label, and an optional trailing count or status. It exposes the link role and is operable without
+ * extra wiring; it gets the visible focus ring, the restrained ghost hover fill, and the target-size
+ * floor. The current item is a link, not a button — it still navigates (spec §7). In the collapsed
+ * rail the label is visually hidden but kept in the accessibility tree, so the item never loses its
+ * accessible name (spec §4 Collapsed / §7).
+ */
+export declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export type SidebarFooterProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * A bottom slot for an account or settings entry (spec §2). Its items follow the same item rules as
+ * the rest of the list and join the rail's roving arrow-key order. Wrap its items in a `<ul>` so they
+ * keep the list relationship.
+ */
+export declare const SidebarFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SidebarCollapseToggleProps extends Omit<React.ComponentPropsWithoutRef<"button">, "onClick" | "children"> {
+    /** The accessible name when expanded (icon-only). Defaults to "Collapse sidebar" (spec §7). */
+    collapseLabel?: string;
+    /** The accessible name when collapsed (icon-only). Defaults to "Expand sidebar" (spec §7). */
+    expandLabel?: string;
+}
+/**
+ * The control that switches the rail between expanded and collapsed (spec §2/§4/§6/§7). It is a
+ * native `<button>`, NOT an item, reachable in the rail's tab order. It sets `aria-expanded` to
+ * reflect the rail width and names its action with `aria-label` ("Collapse sidebar" / "Expand
+ * sidebar"); its glyph is `aria-hidden`. Toggling it does not move focus off the toggle, so a
+ * keyboard user keeps their place when switching the rail's width (spec §6). Render it only on a
+ * collapsible rail.
+ */
+export declare const SidebarCollapseToggle: React.ForwardRefExoticComponent<SidebarCollapseToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAaL,KAAK,uBAAuB,EAC7B,MAAM,oBAAoB,CAAC;AAE5B,KAAK,WAAW,GAAG,WAAW,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,CAAC;AA2BhE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3F,wGAAwG;IACxG,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,8GAA8G;IAC9G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,kFAuGlB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,aAAa,mKAIzB,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC9E,iGAAiG;IACjG,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,0FAqBxB,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAC1F,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kHAAkH;IAClH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,4FA4CtB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvE;;;;GAIG;AACH,eAAO,MAAM,aAAa,mKAQzB,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9E,+FAA+F;IAC/F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,sGAqBjC,CAAC"}