@verdify/ui 0.1.0

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  sidebarRailVariants,
+  sidebarHeaderClass,
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarListClass,
+  sidebarItemVariants,
+  sidebarItemIconClass,
+  sidebarItemLabelClass,
+  sidebarItemTrailingClass,
+  sidebarFooterClass,
+  sidebarCollapseToggleClass,
+  sidebarCollapseIconClass
+} from "./sidebar.variants";
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+  const ctx = React.useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error("Sidebar slots must be rendered inside <Sidebar>.");
+  }
+  return ctx;
+}
+const Sidebar = React.forwardRef(function Sidebar2({ className, side = "inline-start", defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange, children, ...props }, ref) {
+  const isControlled = collapsedProp !== void 0;
+  const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);
+  const collapsed = isControlled ? collapsedProp : uncontrolled;
+  const toggle = React.useCallback(() => {
+    const next = !collapsed;
+    if (!isControlled) setUncontrolled(next);
+    onCollapsedChange?.(next);
+  }, [collapsed, isControlled, onCollapsedChange]);
+  const registry = React.useRef(/* @__PURE__ */ new Set());
+  const register = React.useCallback((entry) => {
+    registry.current.add(entry);
+    return () => {
+      registry.current.delete(entry);
+    };
+  }, []);
+  const order = React.useCallback(() => {
+    return Array.from(registry.current).filter((e) => !e.disabled).map((e) => e.el).sort(
+      (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+  }, []);
+  const ctx = React.useMemo(
+    () => ({ side, collapsed, toggle, register, order }),
+    [side, collapsed, toggle, register, order]
+  );
+  const onKeyDown = (event) => {
+    const items = order();
+    if (items.length === 0) return;
+    const active = document.activeElement;
+    const currentIndex = active ? items.indexOf(active) : -1;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+        items[next]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+        items[prev]?.focus();
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        items[0]?.focus();
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      }
+      // Space on a focused item follows the link without scrolling the rail (spec §6). It is
+      // ignored on the toggle here — the toggle handles its own Space (native button activation).
+      case " ": {
+        if (active?.dataset.sidebarItem === "true") {
+          event.preventDefault();
+          active.click();
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "data-collapsed": collapsed || void 0,
+      className: cn(sidebarRailVariants({ side }), className),
+      onKeyDown,
+      ...props,
+      children
+    }
+  ) });
+});
+const SidebarHeader = React.forwardRef(
+  function SidebarHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(sidebarHeaderClass, className), ...props });
+  }
+);
+const SidebarGroup = React.forwardRef(
+  function SidebarGroup2({ className, label, children, ...props }, ref) {
+    const { collapsed } = useSidebar();
+    const headingId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": label ? headingId : void 0,
+        className: cn(sidebarGroupClass, className),
+        ...props,
+        children: [
+          label ? /* @__PURE__ */ jsx("div", { id: headingId, className: cn(sidebarGroupLabelClass, collapsed && "sr-only"), children: label }) : null,
+          /* @__PURE__ */ jsx("ul", { className: sidebarListClass, children })
+        ]
+      }
+    );
+  }
+);
+const SidebarItem = React.forwardRef(function SidebarItem2({ className, icon, trailing, children, current = false, disabled = false, asChild = false, href, ...props }, ref) {
+  const { collapsed, register } = useSidebar();
+  const innerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => innerRef.current);
+  React.useEffect(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    return register({ el, disabled });
+  }, [register, disabled]);
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ref: innerRef,
+      "aria-current": current ? "page" : void 0,
+      href: disabled ? void 0 : href,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : void 0,
+      "data-sidebar-item": "true",
+      className: cn(sidebarItemVariants(), className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: sidebarItemIconClass, children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: cn(sidebarItemLabelClass, collapsed && "sr-only"), children }),
+        trailing && !collapsed ? /* @__PURE__ */ jsx("span", { className: sidebarItemTrailingClass, children: trailing }) : null
+      ]
+    }
+  ) });
+});
+const SidebarFooter = React.forwardRef(
+  function SidebarFooter2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(sidebarFooterClass, className), ...props, children: /* @__PURE__ */ jsx("ul", { className: sidebarListClass, children }) });
+  }
+);
+const SidebarCollapseToggle = React.forwardRef(
+  function SidebarCollapseToggle2({ className, collapseLabel = "Collapse sidebar", expandLabel = "Expand sidebar", ...props }, ref) {
+    const { collapsed, toggle } = useSidebar();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": !collapsed,
+        "aria-label": collapsed ? expandLabel : collapseLabel,
+        onClick: toggle,
+        className: cn(sidebarCollapseToggleClass(), className),
+        ...props,
+        children: /* @__PURE__ */ jsx(ChevronIcon, { collapsed })
+      }
+    );
+  }
+);
+function ChevronIcon({ collapsed }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": "sidebar-collapse-icon",
+      "aria-hidden": "true",
+      className: cn(sidebarCollapseIconClass, collapsed && "rotate-180"),
+      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+export {
+  Sidebar,
+  SidebarCollapseToggle,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+  SidebarItem
+};
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sidebar/sidebar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\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} from \"./sidebar.variants\";\n\ntype SidebarSide = NonNullable<SidebarRailVariantProps[\"side\"]>;\n\n// The rail context carries the presentation/state axes set ONCE on the root down to every slot\n// (mirrors the Tabs/Sheet root-context precedent): the docked `side`, the live `collapsed` state\n// (so an item can visually hide its label while keeping it in the a11y tree), and the toggle's\n// handler. Items also register their DOM ref here so the rail can run roving arrow-key focus over\n// the ENABLED items in DOM order — the spec §6 keyboard model has no Radix primitive to lean on\n// (it is a list of native <a> links), so it is hand-composed here, the same way Separator's labeled\n// anatomy is hand-rolled when no primitive expresses the spec.\ntype SidebarRegistration = { el: HTMLElement; disabled: boolean };\ntype SidebarContextValue = {\n  side: SidebarSide;\n  collapsed: boolean;\n  toggle: () => void;\n  register: (entry: SidebarRegistration) => () => void;\n  order: () => HTMLElement[];\n};\nconst SidebarContext = React.createContext<SidebarContextValue | null>(null);\n\nfunction useSidebar(): SidebarContextValue {\n  const ctx = React.useContext(SidebarContext);\n  if (!ctx) {\n    throw new Error(\"Sidebar slots must be rendered inside <Sidebar>.\");\n  }\n  return ctx;\n}\n\nexport interface SidebarProps extends Omit<React.ComponentPropsWithoutRef<\"nav\">, \"onChange\"> {\n  /** The docked edge (spec §3). `inline-start` (default) or `inline-end` — logical, mirrors under RTL. */\n  side?: SidebarSide;\n  /**\n   * The rail starts collapsed when uncontrolled (spec §3 `collapsed`): a narrow rail of icons only.\n   * For a controlled rail set `collapsed` + `onCollapsedChange` instead.\n   */\n  defaultCollapsed?: boolean;\n  /** Controlled collapsed state (spec §3). When set, the rail is controlled — pair with `onCollapsedChange`. */\n  collapsed?: boolean;\n  /** Notified when the collapse-toggle flips the rail width (spec §3/§4). */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /**\n   * The landmark's accessible name (spec §7), so multiple `navigation` landmarks on a page are\n   * distinguishable — for example \"Primary\". Use `aria-labelledby` pointing at a visible heading\n   * (e.g. the `SidebarHeader`) instead when the rail has a visible title.\n   */\n  \"aria-label\"?: string;\n}\n\n/**\n * A Sidebar is the primary navigation rail down one edge of an app shell: it lists the destinations\n * a person or an agent moves between and marks where they are now (spec §1). It is the `navigation`\n * landmark wrapping a list of real `<a href>` links. Reach for a Menu for a short transient list of\n * actions, Tabs when panels are peers within one page, and Breadcrumb for depth within a destination.\n *\n * The rail is a NEUTRAL surface — it does not wear the brand (spec §3): the current item takes the\n * primary ACTION accent (where you are), never a status color; a verified meaning belongs to\n * VerifiedBadge, never to a navigation item (brand != state). On narrow/touch viewports the rail\n * leaves the layout and opens as a modal drawer — use the Sheet `side=inline-start` pattern\n * (./sheet.md) for that; this component covers the DOCKED rail.\n *\n * It owns the collapse state and the roving arrow-key focus over its items, so it is `'use client'`.\n */\nexport const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(\n  { className, side = \"inline-start\", defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange, children, ...props },\n  ref,\n) {\n  const isControlled = collapsedProp !== undefined;\n  const [uncontrolled, setUncontrolled] = React.useState(defaultCollapsed);\n  const collapsed = isControlled ? collapsedProp : uncontrolled;\n\n  const toggle = React.useCallback(() => {\n    const next = !collapsed;\n    if (!isControlled) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  }, [collapsed, isControlled, onCollapsedChange]);\n\n  // Items register their live DOM ref + disabled flag here; `order()` returns the enabled items in\n  // current DOM order so the arrow-key handler can move focus and wrap at the ends (spec §6).\n  const registry = React.useRef<Set<SidebarRegistration>>(new Set());\n  const register = React.useCallback((entry: SidebarRegistration) => {\n    registry.current.add(entry);\n    return () => {\n      registry.current.delete(entry);\n    };\n  }, []);\n  const order = React.useCallback(() => {\n    return Array.from(registry.current)\n      .filter((e) => !e.disabled)\n      .map((e) => e.el)\n      // sort by DOM order so footer items follow group items regardless of registration order\n      .sort((a, b) =>\n        a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,\n      );\n  }, []);\n\n  const ctx = React.useMemo<SidebarContextValue>(\n    () => ({ side, collapsed, toggle, register, order }),\n    [side, collapsed, toggle, register, order],\n  );\n\n  // Down/Up move to the next/previous ENABLED item, wrapping; Home/End jump to the first/last\n  // enabled item. Disabled items are not registered as targets, so they are skipped for free. The\n  // rail never moves focus on its own — only on the user's keypress (spec §6/§7). Enter follows the\n  // focused link (native); Space on an item follows it without scrolling the rail (preventDefault).\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const items = order();\n    if (items.length === 0) return;\n    const active = document.activeElement as HTMLElement | null;\n    const currentIndex = active ? items.indexOf(active) : -1;\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n        const next = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;\n        items[next]?.focus();\n        break;\n      }\n      case \"ArrowUp\": {\n        event.preventDefault();\n        const prev = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;\n        items[prev]?.focus();\n        break;\n      }\n      case \"Home\": {\n        event.preventDefault();\n        items[0]?.focus();\n        break;\n      }\n      case \"End\": {\n        event.preventDefault();\n        items[items.length - 1]?.focus();\n        break;\n      }\n      // Space on a focused item follows the link without scrolling the rail (spec §6). It is\n      // ignored on the toggle here — the toggle handles its own Space (native button activation).\n      case \" \": {\n        if (active?.dataset.sidebarItem === \"true\") {\n          event.preventDefault();\n          active.click();\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  };\n\n  return (\n    <SidebarContext.Provider value={ctx}>\n      {/* the navigation landmark, named so a screen reader can jump to and skip the rail (spec §7) */}\n      {/* The rail WIDTH is a layout concern the app sets via `className` (the token set has no\n          sidebar-width scale, and a rail's width is shell-specific) — the component exposes the\n          collapsed state via `data-collapsed` and the `transition-[width]` base motion so the\n          caller animates between its own two widths. The collapsed rail hides labels (icons only)\n          through each slot's `sr-only`, independent of the exact width. */}\n      <nav\n        ref={ref}\n        data-collapsed={collapsed || undefined}\n        className={cn(sidebarRailVariants({ side }), className)}\n        onKeyDown={onKeyDown}\n        {...props}\n      >\n        {children}\n      </nav>\n    </SidebarContext.Provider>\n  );\n});\n\nexport type SidebarHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\n\n/**\n * The top slot for a product mark or workspace switcher (spec §2). It is NOT a navigation item and\n * is skipped by item arrow movement. Give it an `id` and point the rail's `aria-labelledby` at it to\n * name the landmark from a visible heading.\n */\nexport const SidebarHeader = React.forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  function SidebarHeader({ className, ...props }, ref) {\n    return <div ref={ref} className={cn(sidebarHeaderClass, className)} {...props} />;\n  },\n);\n\nexport interface SidebarGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /** The cluster's visible heading (spec §2 group). It also names the group for assistive tech. */\n  label?: React.ReactNode;\n}\n\n/**\n * A labeled cluster of items (spec §2 group). Use groups only when the labels earn their space;\n * restraint over volume keeps the rail scannable. The heading names the group via `aria-labelledby`,\n * so its items read as a related set (1.3.1 Info and Relationships). The items live in a `<ul>` so\n * they expose the list relationship. In the collapsed rail the heading is hidden (icons only) but the\n * group keeps its accessible name.\n */\nexport const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(\n  function SidebarGroup({ className, label, children, ...props }, ref) {\n    const { collapsed } = useSidebar();\n    const headingId = React.useId();\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-labelledby={label ? headingId : undefined}\n        className={cn(sidebarGroupClass, className)}\n        {...props}\n      >\n        {label ? (\n          <div id={headingId} className={cn(sidebarGroupLabelClass, collapsed && \"sr-only\")}>\n            {label}\n          </div>\n        ) : null}\n        <ul className={sidebarListClass}>{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SidebarItemProps extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\"> {\n  /** The destination (spec §7). Items are real links; omit it only on a disabled item. */\n  href?: string;\n  /** The leading icon (spec §2): decorative, sized by `--size-icon-md`. The item names itself by its label text. */\n  icon?: React.ReactNode;\n  /** A trailing count or status (spec §2): text or an `aria-label`, never color alone (spec §7). */\n  trailing?: React.ReactNode;\n  /**\n   * This is the item for the page you are on (spec §4 Current). It sets `aria-current=\"page\"`, lifts\n   * its label to the primary text color, and shows the brand action indicator bar — where you are,\n   * never a status color. Exactly one item in the rail is current.\n   */\n  current?: boolean;\n  /**\n   * The item is present but not operable (spec §4 Disabled): it is skipped by arrow movement and the\n   * tab order and drops its `href`, while its label stays readable to assistive technology.\n   */\n  disabled?: boolean;\n  /**\n   * Project the item styling onto a caller-supplied anchor (a framework router `<Link>` rendered as an\n   * `<a>`) via Radix Slot, instead of the default native `<a>` (spec §2). Slot runs\n   * `React.Children.only` — pass exactly one anchor child holding the icon + label.\n   */\n  asChild?: boolean;\n}\n\n/**\n * One navigation item (spec §2 item, §4 states): a native `<a href>` link holding a leading icon, a\n * label, and an optional trailing count or status. It exposes the link role and is operable without\n * extra wiring; it gets the visible focus ring, the restrained ghost hover fill, and the target-size\n * floor. The current item is a link, not a button — it still navigates (spec §7). In the collapsed\n * rail the label is visually hidden but kept in the accessibility tree, so the item never loses its\n * accessible name (spec §4 Collapsed / §7).\n */\nexport const SidebarItem = React.forwardRef<HTMLAnchorElement, SidebarItemProps>(function SidebarItem(\n  { className, icon, trailing, children, current = false, disabled = false, asChild = false, href, ...props },\n  ref,\n) {\n  const { collapsed, register } = useSidebar();\n  const innerRef = React.useRef<HTMLAnchorElement | null>(null);\n  React.useImperativeHandle(ref, () => innerRef.current as HTMLAnchorElement);\n\n  // register this item with the rail (for roving arrow-key focus) while it is mounted; a disabled\n  // item registers as disabled so the rail skips it as a target (spec §6).\n  React.useEffect(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    return register({ el, disabled });\n  }, [register, disabled]);\n\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li>\n      <Comp\n        ref={innerRef}\n        // the only item carrying aria-current; exactly one per rail (spec §4/§7)\n        aria-current={current ? \"page\" : undefined}\n        // a disabled item drops its href (cannot navigate), leaves the tab order, and is marked\n        // aria-disabled so AT still reads its label (spec §4/§7); an <a> has no native disabled\n        href={disabled ? undefined : href}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : undefined}\n        data-sidebar-item=\"true\"\n        className={cn(sidebarItemVariants(), className)}\n        {...props}\n      >\n        {icon ? (\n          <span aria-hidden=\"true\" className={sidebarItemIconClass}>\n            {icon}\n          </span>\n        ) : null}\n        {/* the label stays in the a11y tree when collapsed (sr-only), so the link keeps its name\n            without depending on a tooltip being open (spec §4 Collapsed / §7) */}\n        <span className={cn(sidebarItemLabelClass, collapsed && \"sr-only\")}>{children}</span>\n        {trailing && !collapsed ? <span className={sidebarItemTrailingClass}>{trailing}</span> : null}\n      </Comp>\n    </li>\n  );\n});\n\nexport type SidebarFooterProps = React.ComponentPropsWithoutRef<\"div\">;\n\n/**\n * A bottom slot for an account or settings entry (spec §2). Its items follow the same item rules as\n * the rest of the list and join the rail's roving arrow-key order. Wrap its items in a `<ul>` so they\n * keep the list relationship.\n */\nexport const SidebarFooter = React.forwardRef<HTMLDivElement, SidebarFooterProps>(\n  function SidebarFooter({ className, children, ...props }, ref) {\n    return (\n      <div ref={ref} className={cn(sidebarFooterClass, className)} {...props}>\n        <ul className={sidebarListClass}>{children}</ul>\n      </div>\n    );\n  },\n);\n\nexport interface SidebarCollapseToggleProps\n  extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"onClick\" | \"children\"> {\n  /** The accessible name when expanded (icon-only). Defaults to \"Collapse sidebar\" (spec §7). */\n  collapseLabel?: string;\n  /** The accessible name when collapsed (icon-only). Defaults to \"Expand sidebar\" (spec §7). */\n  expandLabel?: string;\n}\n\n/**\n * The control that switches the rail between expanded and collapsed (spec §2/§4/§6/§7). It is a\n * native `<button>`, NOT an item, reachable in the rail's tab order. It sets `aria-expanded` to\n * reflect the rail width and names its action with `aria-label` (\"Collapse sidebar\" / \"Expand\n * sidebar\"); its glyph is `aria-hidden`. Toggling it does not move focus off the toggle, so a\n * keyboard user keeps their place when switching the rail's width (spec §6). Render it only on a\n * collapsible rail.\n */\nexport const SidebarCollapseToggle = React.forwardRef<HTMLButtonElement, SidebarCollapseToggleProps>(\n  function SidebarCollapseToggle(\n    { className, collapseLabel = \"Collapse sidebar\", expandLabel = \"Expand sidebar\", ...props },\n    ref,\n  ) {\n    const { collapsed, toggle } = useSidebar();\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        // aria-expanded reflects the rail width; the action is named for the icon-only control (spec §7)\n        aria-expanded={!collapsed}\n        aria-label={collapsed ? expandLabel : collapseLabel}\n        onClick={toggle}\n        className={cn(sidebarCollapseToggleClass(), className)}\n        {...props}\n      >\n        <ChevronIcon collapsed={collapsed} />\n      </button>\n    );\n  },\n);\n\n// The toggle glyph — inline SVG (no icon dep), --size-icon-md, rotates to mirror the rail width.\n// Decorative: aria-hidden; aria-expanded carries the state, not the glyph (spec §2/§7).\nfunction ChevronIcon({ collapsed }: { collapsed: boolean }) {\n  return (\n    <span\n      data-testid=\"sidebar-collapse-icon\"\n      aria-hidden=\"true\"\n      className={cn(sidebarCollapseIconClass, collapsed && \"rotate-180\")}\n    >\n      <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\" focusable=\"false\">\n        <path d=\"M10 4L6 8l4 4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    </span>\n  );\n}\n"],"mappings":"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","names":["Sidebar","SidebarHeader","SidebarGroup","SidebarItem","SidebarFooter","SidebarCollapseToggle"]}

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

@@ -0,0 +1,19 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const sidebarRailVariants: (props?: ({
+    side?: "inline-end" | "inline-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SidebarRailVariantProps = VariantProps<typeof sidebarRailVariants>;
+export declare const sidebarHeaderClass = "flex items-center gap-(--space-2) px-(--space-2) py-(--space-2) border-b border-surface-border-muted";
+export declare const sidebarGroupClass = "flex flex-col gap-(--space-1) py-(--space-2)";
+export declare const sidebarGroupLabelClass = "px-(--space-2) py-(--space-1) text-caption text-text-muted select-none";
+export declare const sidebarListClass = "flex flex-col gap-(--space-1) m-0 p-0 list-none";
+export declare const sidebarItemVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SidebarItemVariantProps = VariantProps<typeof sidebarItemVariants>;
+export declare const sidebarItemIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-action-ghost-fg";
+export declare const sidebarItemLabelClass = "min-w-0 flex-1 truncate";
+export declare const sidebarItemTrailingClass = "ms-auto inline-flex items-center text-caption text-text-secondary";
+export declare const sidebarFooterClass = "mt-auto flex flex-col gap-(--space-1) pt-(--space-2) border-t border-surface-border-muted";
+export declare const sidebarCollapseToggleClass: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SidebarCollapseToggleVariantProps = VariantProps<typeof sidebarCollapseToggleClass>;
+export declare const sidebarCollapseIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)";
+//# sourceMappingURL=sidebar.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.variants.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgBlE,eAAO,MAAM,mBAAmB;;8EAsB/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAK/E,eAAO,MAAM,kBAAkB,yGACyE,CAAC;AAIzG,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAIhF,eAAO,MAAM,sBAAsB,2EACuC,CAAC;AAI3E,eAAO,MAAM,gBAAgB,oDAAoD,CAAC;AAsBlF,eAAO,MAAM,mBAAmB,2FA8B/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAM/E,eAAO,MAAM,oBAAoB,gHAC8E,CAAC;AAKhH,eAAO,MAAM,qBAAqB,4BAA4B,CAAC;AAI/D,eAAO,MAAM,wBAAwB,sEACgC,CAAC;AAItE,eAAO,MAAM,kBAAkB,8FAC8D,CAAC;AAM9F,eAAO,MAAM,0BAA0B,2FAatC,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC;AAIhG,eAAO,MAAM,wBAAwB,oOAC8L,CAAC"}

package/dist/components/sidebar/sidebar.variants.js

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+const sidebarRailVariants = cva(
+  [
+    // surface + elevation + column layout with the rail insets
+    "flex flex-col gap-(--space-2) bg-surface-raised shadow-sm",
+    "p-(--space-2)",
+    // the expand/collapse width transition — base duration + verdify easing, instant under
+    // reduced motion (NEVER the deliberate verified-check theatre, G-U3)
+    "transition-[width] duration-(--motion-duration-base) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)"
+  ],
+  {
+    variants: {
+      // SIDE axis (spec §3): the rail docks at a logical edge and carries its border on the edge
+      // that faces the content area — inline-end when docked inline-start, inline-start when docked
+      // inline-end. Logical properties only (border-e / border-s), so it mirrors under dir="rtl".
+      side: {
+        "inline-start": "border-e border-surface-border",
+        "inline-end": "border-s border-surface-border"
+      }
+    },
+    defaultVariants: { side: "inline-start" }
+  }
+);
+const sidebarHeaderClass = "flex items-center gap-(--space-2) px-(--space-2) py-(--space-2) border-b border-surface-border-muted";
+const sidebarGroupClass = "flex flex-col gap-(--space-1) py-(--space-2)";
+const sidebarGroupLabelClass = "px-(--space-2) py-(--space-1) text-caption text-text-muted select-none";
+const sidebarListClass = "flex flex-col gap-(--space-1) m-0 p-0 list-none";
+const sidebarItemVariants = cva(
+  [
+    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL; the leading
+    // indicator bar is a left/start accent rendered via a logical inline-start border that is
+    // transparent at rest and painted in the action alias when current
+    "relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-3)",
+    "border-s-2 border-transparent",
+    // type ROLE + resting label color, no fill, pointer cursor
+    "text-label text-text-secondary no-underline cursor-pointer select-none",
+    // hover: the restrained ghost-action fill (the only fill a resting item paints)
+    "hover:bg-action-ghost-bg-hover",
+    // CURRENT: the leading indicator BAR is painted in the brand action alias and the label lifts to
+    // the primary text color. This is the action(primary) alias (where you are), NEVER status-verified
+    // (brand != state, G-U2). The indicator bar SHAPE + aria-current carry the state alongside the
+    // color, so it survives a color-blind read; the rail itself stays a neutral surface (no brand fill).
+    "aria-[current=page]:border-s-action-primary-bg aria-[current=page]:text-text-primary",
+    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre, G-U3)
+    "transition-[color,background-color,border-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    // target-size floor — 44px touch / 40px pointer, on every item (spec §7, 2.5.8), never a fixed
+    // height below the floor
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // focus ring — identical on every state, never removed; persists expanded and collapsed
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // disabled (non-operable) item — DEC-C: dim via the disabled TOKEN, never opacity. aria-disabled
+    // drives it because an <a> has no native disabled; the component also strips href + tabindex.
+    "aria-disabled:pointer-events-none aria-disabled:text-text-disabled"
+  ],
+  { variants: {}, defaultVariants: {} }
+);
+const sidebarItemIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-action-ghost-fg";
+const sidebarItemLabelClass = "min-w-0 flex-1 truncate";
+const sidebarItemTrailingClass = "ms-auto inline-flex items-center text-caption text-text-secondary";
+const sidebarFooterClass = "mt-auto flex flex-col gap-(--space-1) pt-(--space-2) border-t border-surface-border-muted";
+const sidebarCollapseToggleClass = cva(
+  [
+    "inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)",
+    "text-action-ghost-fg cursor-pointer select-none",
+    "hover:bg-action-ghost-bg-hover",
+    "transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:duration-(--motion-duration-instant)",
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:text-text-disabled"
+  ],
+  { variants: {}, defaultVariants: {} }
+);
+const sidebarCollapseIconClass = "inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)";
+export {
+  sidebarCollapseIconClass,
+  sidebarCollapseToggleClass,
+  sidebarFooterClass,
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarHeaderClass,
+  sidebarItemIconClass,
+  sidebarItemLabelClass,
+  sidebarItemTrailingClass,
+  sidebarItemVariants,
+  sidebarListClass,
+  sidebarRailVariants
+};
+//# sourceMappingURL=sidebar.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sidebar/sidebar.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Sidebar is the primary navigation rail down one edge of an app shell (spec §1). It is a\n// NEUTRAL surface (spec §3): the rail does not wear the brand. The only accent is on the CURRENT\n// item, which takes the primary ACTION (brand) alias — where you are — never a status color: a\n// current item reports your location, not a verification result, so it binds nothing from the\n// status tier (brand != state, G-U2). A verified meaning belongs to VerifiedBadge. The rail\n// paints from the surface, text, action(primary + ghost), and border aliases only (spec §5).\n\n// The nav landmark wrapping the rail. The raised neutral surface against the page canvas, an edge\n// against the content area (a logical inline-end border when docked inline-start, inline-start when\n// docked inline-end — G-U6, so it mirrors under dir=\"rtl\"), the sm elevation where it floats above\n// content, and the expand/collapse WIDTH transition. Motion is the BASE token transition on the\n// verdify easing, collapsing to the instant endpoint under reduced motion — never the 350ms\n// VerifiedBadge-only theatre duration (toggling the rail is a plain transition, not theatre — spec\n// §4 Collapsed, G-U3). The rail is NEVER tinted with the brand or a status fill (spec §3/§8).\nexport const sidebarRailVariants = cva(\n  [\n    // surface + elevation + column layout with the rail insets\n    \"flex flex-col gap-(--space-2) bg-surface-raised shadow-sm\",\n    \"p-(--space-2)\",\n    // the expand/collapse width transition — base duration + verdify easing, instant under\n    // reduced motion (NEVER the deliberate verified-check theatre, G-U3)\n    \"transition-[width] duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n  ],\n  {\n    variants: {\n      // SIDE axis (spec §3): the rail docks at a logical edge and carries its border on the edge\n      // that faces the content area — inline-end when docked inline-start, inline-start when docked\n      // inline-end. Logical properties only (border-e / border-s), so it mirrors under dir=\"rtl\".\n      side: {\n        \"inline-start\": \"border-e border-surface-border\",\n        \"inline-end\": \"border-s border-surface-border\",\n      },\n    },\n    defaultVariants: { side: \"inline-start\" },\n  },\n);\n\nexport type SidebarRailVariantProps = VariantProps<typeof sidebarRailVariants>;\n\n// The header slot (spec §2): the top slot for a product mark or workspace switcher. It is NOT a\n// navigation item and is skipped by item arrow movement. A separator from the list below it via a\n// muted hairline (spec §5, surface-border-muted). Plain structural slot — no variant axis.\nexport const sidebarHeaderClass =\n  \"flex items-center gap-(--space-2) px-(--space-2) py-(--space-2) border-b border-surface-border-muted\";\n\n// A labeled cluster of items (spec §2 group). Restraint over volume keeps the rail scannable, so a\n// group is plain structure; its dividers use the muted hairline (spec §5). No variant axis.\nexport const sidebarGroupClass = \"flex flex-col gap-(--space-1) py-(--space-2)\";\n\n// The group heading (spec §2/§5): the cluster label in the MUTED text color at the CAPTION type\n// role. Decorative-weight wayfinding, not a navigation item.\nexport const sidebarGroupLabelClass =\n  \"px-(--space-2) py-(--space-1) text-caption text-text-muted select-none\";\n\n// The item list (the <ul>): a flush column of items. The list carries no text color — each item\n// sets its own. The roving arrow-key handler is wired by the component on this element.\nexport const sidebarListClass = \"flex flex-col gap-(--space-1) m-0 p-0 list-none\";\n\n// One navigation item (spec §2 item, §4 states). A native <a href> link.\n//\n// RESTING (default): the LABEL in the SECONDARY text color and the icon in the GHOST action fg, on\n// the rail surface with NO fill (spec §4 Default).\n// HOVER: a restrained ghost-action hover fill; the cursor is a pointer (spec §4 Hover). The only\n// fill a resting item ever paints.\n// CURRENT (aria-current=page): the leading INDICATOR BAR is painted in the primary ACTION (brand)\n// alias — where you are — and the label lifts to the PRIMARY text color. This spec offers two\n// indicator treatments (spec §5: an indicator \"bar OR fill\"); this component uses the restrained\n// BAR (a logical inline-start border accent) so the rail never wears a brand SURFACE (spec §3/§8).\n// The current state is never carried by color alone: the indicator bar shape AND aria-current also\n// encode it, so it survives a contrast or color-blind reading (spec §4 Current / 1.4.1, brand !=\n// state — NEVER status-verified).\n// FOCUS: the visible 2px focus ring, part of the base on every state, never removed; it persists in\n// both the expanded and collapsed rail (spec §4 Focus / 2.4.7).\n// DISABLED (aria-disabled): dims via the disabled TOKEN (DEC-C), never a blanket opacity; the\n// component also strips href + tabindex and skips it in arrow movement, while the label stays\n// readable to AT (spec §4 Disabled / §7).\n// Motion is the fast token transition on the verdify easing, instant under reduced motion — never\n// the 350ms VerifiedBadge-only theatre duration (G-U3).\nexport const sidebarItemVariants = cva(\n  [\n    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL; the leading\n    // indicator bar is a left/start accent rendered via a logical inline-start border that is\n    // transparent at rest and painted in the action alias when current\n    \"relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-3)\",\n    \"border-s-2 border-transparent\",\n    // type ROLE + resting label color, no fill, pointer cursor\n    \"text-label text-text-secondary no-underline cursor-pointer select-none\",\n    // hover: the restrained ghost-action fill (the only fill a resting item paints)\n    \"hover:bg-action-ghost-bg-hover\",\n    // CURRENT: the leading indicator BAR is painted in the brand action alias and the label lifts to\n    // the primary text color. This is the action(primary) alias (where you are), NEVER status-verified\n    // (brand != state, G-U2). The indicator bar SHAPE + aria-current carry the state alongside the\n    // color, so it survives a color-blind read; the rail itself stays a neutral surface (no brand fill).\n    \"aria-[current=page]:border-s-action-primary-bg aria-[current=page]:text-text-primary\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre, G-U3)\n    \"transition-[color,background-color,border-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer, on every item (spec §7, 2.5.8), never a fixed\n    // height below the floor\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus ring — identical on every state, never removed; persists expanded and collapsed\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled (non-operable) item — DEC-C: dim via the disabled TOKEN, never opacity. aria-disabled\n    // drives it because an <a> has no native disabled; the component also strips href + tabindex.\n    \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled\",\n  ],\n  { variants: {}, defaultVariants: {} },\n);\n\nexport type SidebarItemVariantProps = VariantProps<typeof sidebarItemVariants>;\n\n// The leading item icon (spec §5): the md icon role, decorative (the item names itself by its label\n// text, not the glyph). At rest it is the GHOST action fg; it inherits the disabled token when the\n// item is disabled (aria-disabled on the parent link). When the item is current it lifts with the\n// label to the primary text color. shrink-0 so it never collapses when labels are hidden.\nexport const sidebarItemIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-action-ghost-fg\";\n\n// The item label text (spec §5): the part hidden in the collapsed rail. When collapsed the label is\n// visually hidden but stays in the accessibility tree (sr-only), so the link keeps its accessible\n// name without depending on a tooltip being open (spec §4 Collapsed / §7).\nexport const sidebarItemLabelClass = \"min-w-0 flex-1 truncate\";\n\n// A trailing count or status on an item (spec §2): text or an aria-label, never color alone (spec\n// §7). Plain secondary caption text, hidden with the label when collapsed.\nexport const sidebarItemTrailingClass =\n  \"ms-auto inline-flex items-center text-caption text-text-secondary\";\n\n// The footer slot (spec §2): a bottom slot for an account or settings entry; its items follow the\n// same item rules. Pushed to the bottom; separated from the list above by the muted hairline.\nexport const sidebarFooterClass =\n  \"mt-auto flex flex-col gap-(--space-1) pt-(--space-2) border-t border-surface-border-muted\";\n\n// The collapse-toggle (spec §2/§4/§6/§7): a native <button>, NOT an item, reachable in the rail's\n// tab order. It carries the ghost-action glyph and the same neutral hover fill, focus ring, and\n// target-size floor as an item. Its glyph is decorative (aria-hidden); aria-expanded + aria-label\n// carry the action. Same fast motion, never the deliberate theatre.\nexport const sidebarCollapseToggleClass = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-2) rounded-(--radius-md) px-(--space-2)\",\n    \"text-action-ghost-fg cursor-pointer select-none\",\n    \"hover:bg-action-ghost-bg-hover\",\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"disabled:pointer-events-none disabled:text-text-disabled\",\n  ],\n  { variants: {}, defaultVariants: {} },\n);\n\nexport type SidebarCollapseToggleVariantProps = VariantProps<typeof sidebarCollapseToggleClass>;\n\n// The collapse-toggle glyph (spec §5): the md icon role, decorative. It rotates to mirror the rail\n// width (collapsed vs expanded) as a reinforcement; aria-expanded carries the state, not the glyph.\nexport const sidebarCollapseIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAgBhC,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,MAAM;AAAA,QACJ,gBAAgB;AAAA,QAChB,cAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,eAAe;AAAA,EAC1C;AACF;AAOO,MAAM,qBACX;AAIK,MAAM,oBAAoB;AAI1B,MAAM,yBACX;AAIK,MAAM,mBAAmB;AAsBzB,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,IAIE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE;AACtC;AAQO,MAAM,uBACX;AAKK,MAAM,wBAAwB;AAI9B,MAAM,2BACX;AAIK,MAAM,qBACX;AAMK,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE;AACtC;AAMO,MAAM,2BACX;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./skeleton";
+export { skeletonVariants, skeletonShapeClass, skeletonLineClass, skeletonShimmerClass, type SkeletonVariantProps, } from "./skeleton.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAChF,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,oBAAoB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/components/skeleton/index.js

@@ -0,0 +1,15 @@
+import { Skeleton } from "./skeleton";
+import {
+  skeletonVariants,
+  skeletonShapeClass,
+  skeletonLineClass,
+  skeletonShimmerClass
+} from "./skeleton.variants";
+export {
+  Skeleton,
+  skeletonLineClass,
+  skeletonShapeClass,
+  skeletonShimmerClass,
+  skeletonVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/skeleton/index.ts"],"sourcesContent":["export { Skeleton, type SkeletonProps, type SkeletonVariant } from \"./skeleton\";\nexport {\n  skeletonVariants,\n  skeletonShapeClass,\n  skeletonLineClass,\n  skeletonShimmerClass,\n  type SkeletonVariantProps,\n} from \"./skeleton.variants\";\n"],"mappings":"AAAA,SAAS,gBAA0D;AACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { type SkeletonVariantProps } from "./skeleton.variants";
+/** The shape of the placeholder (spec §3). Defaults to `text`. */
+export type SkeletonVariant = NonNullable<SkeletonVariantProps["variant"]>;
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The shape of the placeholder (spec §3) — `text` (default), `block`, `circle`,
+     * or `group`. Variant is the footprint of the incoming content, not decoration.
+     * Every variant paints from neutral surface roles only; a skeleton is a wait, never
+     * the brand color and never a status color.
+     */
+    variant?: SkeletonVariant;
+    /**
+     * For the `text` variant only: how many placeholder lines to stack (spec §2/§3),
+     * default `1`. Match the line count to the real content; the last line of a
+     * multi-line block is rendered shorter to mirror a real paragraph's ragged final
+     * line.
+     */
+    lines?: number;
+}
+/**
+ * A Skeleton is a placeholder that holds the SHAPE of content while it loads, so the
+ * layout does not jump when the real content arrives (spec §1). Use it for a known,
+ * bounded wait — a card, a row, an avatar, a block of text — where you can predict the
+ * shape of what is coming.
+ *
+ * It is a neutral, decorative placeholder. It carries `aria-hidden="true"` so a screen
+ * reader skips the placeholder shapes entirely (spec §7); the loading meaning is NOT
+ * carried by the skeleton itself. The container the skeleton sits in owns the wait: set
+ * `aria-busy="true"` and expose a polite status message ("Loading") on THAT region while
+ * loading, then clear it and let the real content's own semantics take over once
+ * resolved. Do not put `aria-busy` or a live-region announcement on the skeleton, where
+ * it would be ignored.
+ *
+ * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a tab
+ * stop, and renders no focus ring or target-size floor. It never carries the brand color
+ * (Sovereign Violet) or a status color (for example Verified Green) — a skeleton is a
+ * wait, not a state, and the deliberate verified "check" motion is reserved for the
+ * verified moment and never spent on a placeholder (brand != state, spec §1/§3/§8).
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,KAAK,oBAAoB,EAC1B,MAAM,qBAAqB,CAAC;AAE7B,kEAAkE;AAClE,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAWD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,QAAQ,sFA4CpB,CAAC"}

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  skeletonVariants,
+  skeletonShapeClass,
+  skeletonLineClass,
+  skeletonShimmerClass
+} from "./skeleton.variants";
+function Shimmer() {
+  return /* @__PURE__ */ jsx("span", { "data-testid": "skeleton-shimmer", "aria-hidden": "true", className: skeletonShimmerClass });
+}
+const Skeleton = React.forwardRef(
+  function Skeleton2({ className, variant = "text", lines = 1, children, ...props }, ref) {
+    const count = Math.max(1, lines);
+    return (
+      // the skeleton is decorative — aria-hidden so a screen reader skips it entirely;
+      // no role, no tabIndex, no live region (spec §7). The wait is announced by the
+      // consumer's container, never here.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "aria-hidden": "true",
+          className: cn(skeletonVariants({ variant }), className),
+          ...props,
+          children: [
+            variant === "text" && // a layout column of leaf line-shapes; the last of many is shorter to mirror
+            // a real paragraph's ragged final line (spec §2/§3).
+            Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "skeleton-line",
+                className: cn(
+                  skeletonShapeClass,
+                  skeletonLineClass,
+                  count > 1 && i === count - 1 ? "w-3/5" : "w-full"
+                ),
+                children: /* @__PURE__ */ jsx(Shimmer, {})
+              },
+              i
+            )),
+            (variant === "block" || variant === "circle") && /* @__PURE__ */ jsx("span", { className: cn(skeletonShapeClass, "absolute inset-0 rounded-[inherit]"), children: /* @__PURE__ */ jsx(Shimmer, {}) }),
+            variant === "group" && children
+          ]
+        }
+      )
+    );
+  }
+);
+export {
+  Skeleton
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  skeletonVariants,\n  skeletonShapeClass,\n  skeletonLineClass,\n  skeletonShimmerClass,\n  type SkeletonVariantProps,\n} from \"./skeleton.variants\";\n\n/** The shape of the placeholder (spec §3). Defaults to `text`. */\nexport type SkeletonVariant = NonNullable<SkeletonVariantProps[\"variant\"]>;\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The shape of the placeholder (spec §3) — `text` (default), `block`, `circle`,\n   * or `group`. Variant is the footprint of the incoming content, not decoration.\n   * Every variant paints from neutral surface roles only; a skeleton is a wait, never\n   * the brand color and never a status color.\n   */\n  variant?: SkeletonVariant;\n  /**\n   * For the `text` variant only: how many placeholder lines to stack (spec §2/§3),\n   * default `1`. Match the line count to the real content; the last line of a\n   * multi-line block is rendered shorter to mirror a real paragraph's ragged final\n   * line.\n   */\n  lines?: number;\n}\n\n/**\n * The decorative shimmer band (spec §2/§4): the lighter raised-surface sweep, read\n * against a leaf shape's input-surface fill, animated on the ambient duration and\n * removed under reduced motion. Always paired with a leaf shape, never on its own.\n */\nfunction Shimmer() {\n  return <span data-testid=\"skeleton-shimmer\" aria-hidden=\"true\" className={skeletonShimmerClass} />;\n}\n\n/**\n * A Skeleton is a placeholder that holds the SHAPE of content while it loads, so the\n * layout does not jump when the real content arrives (spec §1). Use it for a known,\n * bounded wait — a card, a row, an avatar, a block of text — where you can predict the\n * shape of what is coming.\n *\n * It is a neutral, decorative placeholder. It carries `aria-hidden=\"true\"` so a screen\n * reader skips the placeholder shapes entirely (spec §7); the loading meaning is NOT\n * carried by the skeleton itself. The container the skeleton sits in owns the wait: set\n * `aria-busy=\"true\"` and expose a polite status message (\"Loading\") on THAT region while\n * loading, then clear it and let the real content's own semantics take over once\n * resolved. Do not put `aria-busy` or a live-region announcement on the skeleton, where\n * it would be ignored.\n *\n * It is non-interactive (spec §4/§6): it takes no focus, binds no keys, is never a tab\n * stop, and renders no focus ring or target-size floor. It never carries the brand color\n * (Sovereign Violet) or a status color (for example Verified Green) — a skeleton is a\n * wait, not a state, and the deliberate verified \"check\" motion is reserved for the\n * verified moment and never spent on a placeholder (brand != state, spec §1/§3/§8).\n */\nexport const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  function Skeleton({ className, variant = \"text\", lines = 1, children, ...props }, ref) {\n    const count = Math.max(1, lines);\n    return (\n      // the skeleton is decorative — aria-hidden so a screen reader skips it entirely;\n      // no role, no tabIndex, no live region (spec §7). The wait is announced by the\n      // consumer's container, never here.\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        className={cn(skeletonVariants({ variant }), className)}\n        {...props}\n      >\n        {variant === \"text\" &&\n          // a layout column of leaf line-shapes; the last of many is shorter to mirror\n          // a real paragraph's ragged final line (spec §2/§3).\n          Array.from({ length: count }, (_, i) => (\n            <span\n              key={i}\n              data-testid=\"skeleton-line\"\n              className={cn(\n                skeletonShapeClass,\n                skeletonLineClass,\n                count > 1 && i === count - 1 ? \"w-3/5\" : \"w-full\",\n              )}\n            >\n              <Shimmer />\n            </span>\n          ))}\n\n        {/* block / circle: the root IS the leaf shape, so the fill + shimmer sit on it.\n            The corner radius came from the variant on the root (spec §3/§5). */}\n        {(variant === \"block\" || variant === \"circle\") && (\n          <span className={cn(skeletonShapeClass, \"absolute inset-0 rounded-[inherit]\")}>\n            <Shimmer />\n          </span>\n        )}\n\n        {/* a composed silhouette: pure layout — its children carry the fill + shimmer,\n            so the placeholder reads as the thing it replaces (spec §2/§3). */}\n        {variant === \"group\" && children}\n      </div>\n    );\n  },\n);\n"],"mappings":"AAoCS,cA8BH,YA9BG;AApCT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA2BP,SAAS,UAAU;AACjB,SAAO,oBAAC,UAAK,eAAY,oBAAmB,eAAY,QAAO,WAAW,sBAAsB;AAClG;AAsBO,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UAAS,EAAE,WAAW,UAAU,QAAQ,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK;AACrF,UAAM,QAAQ,KAAK,IAAI,GAAG,KAAK;AAC/B;AAAA;AAAA;AAAA;AAAA,MAIE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAY;AAAA,UACZ,WAAW,GAAG,iBAAiB,EAAE,QAAQ,CAAC,GAAG,SAAS;AAAA,UACrD,GAAG;AAAA,UAEH;AAAA,wBAAY;AAAA;AAAA,YAGX,MAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MAChC;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAY;AAAA,gBACZ,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA,QAAQ,KAAK,MAAM,QAAQ,IAAI,UAAU;AAAA,gBAC3C;AAAA,gBAEA,8BAAC,WAAQ;AAAA;AAAA,cARJ;AAAA,YASP,CACD;AAAA,aAID,YAAY,WAAW,YAAY,aACnC,oBAAC,UAAK,WAAW,GAAG,oBAAoB,oCAAoC,GAC1E,8BAAC,WAAQ,GACX;AAAA,YAKD,YAAY,WAAW;AAAA;AAAA;AAAA,MAC1B;AAAA;AAAA,EAEJ;AACF;","names":["Skeleton"]}

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const skeletonVariants: (props?: ({
+    variant?: "text" | "group" | "circle" | "block" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const skeletonShapeClass = "relative block overflow-hidden bg-surface-input";
+export declare const skeletonLineClass = "h-(--space-4) rounded-(--radius-sm)";
+export declare const skeletonShimmerClass: string;
+export type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
+//# sourceMappingURL=skeleton.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.variants.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAelE,eAAO,MAAM,gBAAgB;;8EAmB3B,CAAC;AAKH,eAAO,MAAM,kBAAkB,oDAAoD,CAAC;AAKpF,eAAO,MAAM,iBAAiB,wCAAwC,CAAC;AAcvE,eAAO,MAAM,oBAAoB,QAGT,CAAC;AAEzB,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/skeleton/skeleton.variants.js

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+const skeletonVariants = cva("block", {
+  variants: {
+    // STRUCTURAL axis = spec §3: the shape of the placeholder, not decoration.
+    variant: {
+      // one or more placeholder lines for incoming text. The root is a layout column
+      // (no fill / no shimmer); each line is a leaf shape at the small corner radius.
+      text: "flex flex-col gap-(--space-2)",
+      // a rectangular placeholder (image / chart / thumbnail / media). The root IS the
+      // leaf shape: input-surface fill + shimmer + the larger corner radius (spec §3/§5).
+      block: "rounded-(--radius-md)",
+      // a round placeholder for an avatar or icon — full radius (spec §3/§5).
+      circle: "rounded-(--radius-full)",
+      // a composed silhouette (card, list row) built from the shapes above, when the
+      // whole unit loads as one. Pure layout: no fill, no shimmer — its children carry
+      // both, so the placeholder reads as the thing it replaces (spec §2/§3).
+      group: "flex flex-col gap-(--space-2)"
+    }
+  },
+  defaultVariants: { variant: "text" }
+});
+const skeletonShapeClass = "relative block overflow-hidden bg-surface-input";
+const skeletonLineClass = "h-(--space-4) rounded-(--radius-sm)";
+const skeletonShimmerClass = "absolute inset-0 bg-surface-raised animate-pulse [animation-duration:var(--motion-duration-ambient)] ease-(--motion-easing-ambient) motion-reduce:hidden";
+export {
+  skeletonLineClass,
+  skeletonShapeClass,
+  skeletonShimmerClass,
+  skeletonVariants
+};
+//# sourceMappingURL=skeleton.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/skeleton/skeleton.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Skeleton is a placeholder that holds the SHAPE of content while it loads, so the\n// layout does not jump when the real content arrives (spec §1). It is a neutral,\n// decorative placeholder: it never carries the brand color (Sovereign Violet) and\n// never carries a status color (for example Verified Green) — a skeleton is a WAIT,\n// not a state, so it binds nothing from the action tier or the status tier\n// (brand != state, spec §1/§3/§8).\n//\n// The model: a LEAF shape (`block`, `circle`, and each line of a `text` block) is the\n// element that carries the neutral input-surface FILL plus one decorative shimmer band\n// (see `skeletonShapeClass` / `skeletonShimmerClass`). A COMPOSING container (a `text`\n// block of lines, or a `group`) carries NO fill and NO shimmer — it is pure layout that\n// stacks its child shapes at the --space-2 gap. Variant therefore differs only by shape\n// (corner radius / composition), never by color (spec §3/§5).\nexport const skeletonVariants = cva(\"block\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: the shape of the placeholder, not decoration.\n    variant: {\n      // one or more placeholder lines for incoming text. The root is a layout column\n      // (no fill / no shimmer); each line is a leaf shape at the small corner radius.\n      text: \"flex flex-col gap-(--space-2)\",\n      // a rectangular placeholder (image / chart / thumbnail / media). The root IS the\n      // leaf shape: input-surface fill + shimmer + the larger corner radius (spec §3/§5).\n      block: \"rounded-(--radius-md)\",\n      // a round placeholder for an avatar or icon — full radius (spec §3/§5).\n      circle: \"rounded-(--radius-full)\",\n      // a composed silhouette (card, list row) built from the shapes above, when the\n      // whole unit loads as one. Pure layout: no fill, no shimmer — its children carry\n      // both, so the placeholder reads as the thing it replaces (spec §2/§3).\n      group: \"flex flex-col gap-(--space-2)\",\n    },\n  },\n  defaultVariants: { variant: \"text\" },\n});\n\n// A LEAF shape's fill (spec §5): the neutral input surface, clipped so the shimmer band\n// sweeping inside it never bleeds out. This fill stays legible on its own, so removing\n// the shimmer under reduced motion loses nothing.\nexport const skeletonShapeClass = \"relative block overflow-hidden bg-surface-input\";\n\n// Each text line is a leaf shape at the small corner radius (spec §3/§5). Height tracks\n// a body line; width is full, except the LAST line of a multi-line block, which is\n// shorter to mirror a real paragraph's ragged final line (spec §2/§3 — applied in tsx).\nexport const skeletonLineClass = \"h-(--space-4) rounded-(--radius-sm)\";\n\n// The optional ambient shimmer (spec §2/§4): a decorative aria-hidden band in the\n// lighter RAISED surface role, read against the input-surface fill. It sweeps on the\n// AMBIENT duration with the ambient (steady) easing — a continuous wait indicator, like\n// the loading spinner — NOT the 350ms verified-check theatre duration, which is reserved\n// for the verified moment and is never spent on a placeholder (spec §4/§5).\n//\n// `animate-pulse` is the built-in ambient keyframe (the spinner reuses the built-in\n// `animate-spin` the same way); its duration is driven onto the ambient token via the\n// arbitrary `animation-duration` PROPERTY — a keyword arbitrary property, not a raw\n// value, so the token-binding gate does not flag it. Under prefers-reduced-motion the\n// band is removed entirely (`motion-reduce:hidden`); no information is carried by the\n// shimmer alone, so the static input-surface shape remains legible (spec §4/§7).\nexport const skeletonShimmerClass =\n  \"absolute inset-0 bg-surface-raised animate-pulse \" +\n  \"[animation-duration:var(--motion-duration-ambient)] ease-(--motion-easing-ambient) \" +\n  \"motion-reduce:hidden\";\n\nexport type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAehC,MAAM,mBAAmB,IAAI,SAAS;AAAA,EAC3C,UAAU;AAAA;AAAA,IAER,SAAS;AAAA;AAAA;AAAA,MAGP,MAAM;AAAA;AAAA;AAAA,MAGN,OAAO;AAAA;AAAA,MAEP,QAAQ;AAAA;AAAA;AAAA;AAAA,MAIR,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,OAAO;AACrC,CAAC;AAKM,MAAM,qBAAqB;AAK3B,MAAM,oBAAoB;AAc1B,MAAM,uBACX;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Spinner, type SpinnerProps } from "./spinner";
+export { spinnerIndicatorVariants, spinnerRootClass, spinnerLabelClass, type SpinnerIndicatorVariantProps, } from "./spinner.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EACL,wBAAwB,EACxB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,4BAA4B,GAClC,MAAM,oBAAoB,CAAC"}