@verdify/ui 0.1.0

package/dist/components/tabs/index.js

@@ -0,0 +1,21 @@
+import {
+  Tabs,
+  TabsList,
+  TabsTab,
+  TabsPanel
+} from "./tabs";
+import {
+  tabsListVariants,
+  tabsTabVariants,
+  tabsPanelVariants
+} from "./tabs.variants";
+export {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  tabsListVariants,
+  tabsPanelVariants,
+  tabsTabVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/index.ts"],"sourcesContent":["export {\n  Tabs,\n  TabsList,\n  TabsTab,\n  TabsPanel,\n  type TabsProps,\n  type TabsListProps,\n  type TabsTabProps,\n  type TabsPanelProps,\n} from \"./tabs\";\nexport {\n  tabsListVariants,\n  tabsTabVariants,\n  tabsPanelVariants,\n  type TabsListVariantProps,\n  type TabsTabVariantProps,\n  type TabsPanelVariantProps,\n} from \"./tabs.variants\";\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;","names":[]}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { type TabsTabVariantProps } from "./tabs.variants";
+type TabsVariant = NonNullable<TabsTabVariantProps["variant"]>;
+type TabsSize = NonNullable<TabsTabVariantProps["size"]>;
+type TabsOrientation = "horizontal" | "vertical";
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "orientation"> {
+    /** Indicator style (spec §3): `underline` (default, in-page) or `pill` (dense/boxed surfaces). */
+    variant?: TabsVariant;
+    /** Tab density (spec §3): `md` (default) or `sm` for side rails. Both hold the target-size floor. */
+    size?: TabsSize;
+    /** Layout + arrow-key axis (spec §3): `horizontal` (default, Left/Right) or `vertical` (Up/Down). */
+    orientation?: TabsOrientation;
+}
+/**
+ * Tabs split one region into sibling panels and show one at a time, with a row of tabs that
+ * switches between them (spec §1). It is a neutral layout container: the selected tab and its
+ * indicator take the BRAND primary action accent, never a status color — a tab reports which
+ * panel is open, not a verified result (spec §3/§5/§8, brand != state). Wraps the Radix Tabs
+ * primitive (WAI-ARIA APG tabs pattern) — a stateful primitive, so this file is `'use client'`.
+ *
+ * Activation follows the spec §6 default: `activationMode="manual"`, so arrow keys browse tabs
+ * without switching the panel until you commit with Space/Enter. Pass `activationMode="automatic"`
+ * only when switching panels is cheap and side-effect free.
+ */
+export declare function Tabs({ variant, size, orientation, activationMode, className, children, ...rootProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+}
+/**
+ * The row (or column) that holds the tabs and carries the `tablist` role (spec §2). It is one
+ * stop in the page tab order via Radix's roving tabindex. It takes its accessible name from a
+ * visible heading via `aria-labelledby`, or from `aria-label` when no heading is present (spec §7).
+ */
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTabProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
+    /** Stable identity for this tab; pairs the tab with its panel (Radix wires aria-controls). */
+    value: string;
+    /** The tab is present but not operable, and is skipped by arrow movement (spec §4 Disabled). */
+    disabled?: boolean;
+}
+/**
+ * One selectable label in the tablist (spec §2 `tab`): holds text, an optional leading icon, and
+ * an optional trailing count. Radix renders it as `role="tab"` with roving tabindex (selected =
+ * `tabindex="0"`, the rest `-1`), `aria-selected`, and `aria-controls` to its panel. The selected
+ * indicator (underline or pill) reinforces selection but never carries it alone — `aria-selected`
+ * and the visible panel do (spec §2 indicator / §4 Selected / use-of-color).
+ */
+export declare const TabsTab: React.ForwardRefExoticComponent<TabsTabProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabsPanelProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
+    /** Stable identity tying this panel to its tab (Radix wires role + aria-labelledby). */
+    value: string;
+    /**
+     * The panel content is resolving (spec §4 Loading): announces `aria-busy` while the tablist
+     * stays operable so you can switch away. A wait is a plain wait, never deliberate motion theatre.
+     */
+    loading?: boolean;
+}
+/**
+ * The content region tied to the selected tab (spec §2 `panel`): one panel is visible, the rest
+ * hidden and out of the tab order until selected. Radix sets `role="tabpanel"` and
+ * `aria-labelledby` back to its tab, and makes the panel focusable (`tabindex="0"`) when it holds
+ * no focusable content of its own, so Tab always reaches it (spec §7 focus management).
+ */
+export declare const TabsPanel: React.ForwardRefExoticComponent<TabsPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAIL,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,WAAW,GAAG,WAAW,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC;AAC/D,KAAK,QAAQ,GAAG,WAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;AACzD,KAAK,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAgBjD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC;IACtF,kGAAkG;IAClG,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,qGAAqG;IACrG,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,qGAAqG;IACrG,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAqB,EACrB,IAAW,EACX,WAA0B,EAC1B,cAAyB,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,SAAS,2CAkBX;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC;CAAG;AAEtE;;;;GAIG;AACH,eAAO,MAAM,QAAQ,sFAYnB,CAAC;AAEH,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE,8FAA8F;IAC9F,KAAK,EAAE,MAAM,CAAC;IACd,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,wFAYlB,CAAC;AAEH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;IACpE,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,uFAapB,CAAC"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from "../../lib/cn";
+import {
+  tabsListVariants,
+  tabsTabVariants,
+  tabsPanelVariants
+} from "./tabs.variants";
+const TabsContext = React.createContext({
+  variant: "underline",
+  size: "md",
+  orientation: "horizontal"
+});
+function Tabs({
+  variant = "underline",
+  size = "md",
+  orientation = "horizontal",
+  activationMode = "manual",
+  className,
+  children,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { variant, size, orientation }, children: /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      orientation,
+      activationMode,
+      className: cn(
+        // logical-property layout (G-U6): horizontal stacks list-above-panel, vertical
+        // places the rail inline-start of the panel
+        orientation === "vertical" ? "flex flex-row gap-(--space-4)" : "flex flex-col",
+        className
+      ),
+      ...rootProps,
+      children
+    }
+  ) });
+}
+const TabsList = React.forwardRef(function TabsList2({ className, ...props }, ref) {
+  const { orientation } = React.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(tabsListVariants({ orientation }), className),
+      ...props
+    }
+  );
+});
+const TabsTab = React.forwardRef(function TabsTab2({ className, ...props }, ref) {
+  const { variant, size } = React.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(tabsTabVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+const TabsPanel = React.forwardRef(function TabsPanel2({ className, loading, ...props }, ref) {
+  const { orientation } = React.useContext(TabsContext);
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      "aria-busy": loading || void 0,
+      className: cn(tabsPanelVariants({ orientation }), className),
+      ...props
+    }
+  );
+});
+export {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  tabsListVariants,\n  tabsTabVariants,\n  tabsPanelVariants,\n  type TabsTabVariantProps,\n} from \"./tabs.variants\";\n\ntype TabsVariant = NonNullable<TabsTabVariantProps[\"variant\"]>;\ntype TabsSize = NonNullable<TabsTabVariantProps[\"size\"]>;\ntype TabsOrientation = \"horizontal\" | \"vertical\";\n\n// The presentation axes (spec §3) are set ONCE on the root and travel to every tab + panel via\n// context, so callers don't repeat `variant`/`size`/`orientation` on each part (mirrors the\n// Accordion headingLevel-context precedent). Orientation also drives Radix's arrow-key axis.\ntype TabsContextValue = {\n  variant: TabsVariant;\n  size: TabsSize;\n  orientation: TabsOrientation;\n};\nconst TabsContext = React.createContext<TabsContextValue>({\n  variant: \"underline\",\n  size: \"md\",\n  orientation: \"horizontal\",\n});\n\nexport interface TabsProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, \"orientation\"> {\n  /** Indicator style (spec §3): `underline` (default, in-page) or `pill` (dense/boxed surfaces). */\n  variant?: TabsVariant;\n  /** Tab density (spec §3): `md` (default) or `sm` for side rails. Both hold the target-size floor. */\n  size?: TabsSize;\n  /** Layout + arrow-key axis (spec §3): `horizontal` (default, Left/Right) or `vertical` (Up/Down). */\n  orientation?: TabsOrientation;\n}\n\n/**\n * Tabs split one region into sibling panels and show one at a time, with a row of tabs that\n * switches between them (spec §1). It is a neutral layout container: the selected tab and its\n * indicator take the BRAND primary action accent, never a status color — a tab reports which\n * panel is open, not a verified result (spec §3/§5/§8, brand != state). Wraps the Radix Tabs\n * primitive (WAI-ARIA APG tabs pattern) — a stateful primitive, so this file is `'use client'`.\n *\n * Activation follows the spec §6 default: `activationMode=\"manual\"`, so arrow keys browse tabs\n * without switching the panel until you commit with Space/Enter. Pass `activationMode=\"automatic\"`\n * only when switching panels is cheap and side-effect free.\n */\nexport function Tabs({\n  variant = \"underline\",\n  size = \"md\",\n  orientation = \"horizontal\",\n  activationMode = \"manual\",\n  className,\n  children,\n  ...rootProps\n}: TabsProps) {\n  return (\n    <TabsContext.Provider value={{ variant, size, orientation }}>\n      <TabsPrimitive.Root\n        orientation={orientation}\n        activationMode={activationMode}\n        className={cn(\n          // logical-property layout (G-U6): horizontal stacks list-above-panel, vertical\n          // places the rail inline-start of the panel\n          orientation === \"vertical\" ? \"flex flex-row gap-(--space-4)\" : \"flex flex-col\",\n          className,\n        )}\n        {...rootProps}\n      >\n        {children}\n      </TabsPrimitive.Root>\n    </TabsContext.Provider>\n  );\n}\n\nexport interface TabsListProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {}\n\n/**\n * The row (or column) that holds the tabs and carries the `tablist` role (spec §2). It is one\n * stop in the page tab order via Radix's roving tabindex. It takes its accessible name from a\n * visible heading via `aria-labelledby`, or from `aria-label` when no heading is present (spec §7).\n */\nexport const TabsList = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.List>,\n  TabsListProps\n>(function TabsList({ className, ...props }, ref) {\n  const { orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.List\n      ref={ref}\n      className={cn(tabsListVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface TabsTabProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {\n  /** Stable identity for this tab; pairs the tab with its panel (Radix wires aria-controls). */\n  value: string;\n  /** The tab is present but not operable, and is skipped by arrow movement (spec §4 Disabled). */\n  disabled?: boolean;\n}\n\n/**\n * One selectable label in the tablist (spec §2 `tab`): holds text, an optional leading icon, and\n * an optional trailing count. Radix renders it as `role=\"tab\"` with roving tabindex (selected =\n * `tabindex=\"0\"`, the rest `-1`), `aria-selected`, and `aria-controls` to its panel. The selected\n * indicator (underline or pill) reinforces selection but never carries it alone — `aria-selected`\n * and the visible panel do (spec §2 indicator / §4 Selected / use-of-color).\n */\nexport const TabsTab = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\n  TabsTabProps\n>(function TabsTab({ className, ...props }, ref) {\n  const { variant, size } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      className={cn(tabsTabVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface TabsPanelProps\n  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {\n  /** Stable identity tying this panel to its tab (Radix wires role + aria-labelledby). */\n  value: string;\n  /**\n   * The panel content is resolving (spec §4 Loading): announces `aria-busy` while the tablist\n   * stays operable so you can switch away. A wait is a plain wait, never deliberate motion theatre.\n   */\n  loading?: boolean;\n}\n\n/**\n * The content region tied to the selected tab (spec §2 `panel`): one panel is visible, the rest\n * hidden and out of the tab order until selected. Radix sets `role=\"tabpanel\"` and\n * `aria-labelledby` back to its tab, and makes the panel focusable (`tabindex=\"0\"`) when it holds\n * no focusable content of its own, so Tab always reaches it (spec §7 focus management).\n */\nexport const TabsPanel = React.forwardRef<\n  React.ElementRef<typeof TabsPrimitive.Content>,\n  TabsPanelProps\n>(function TabsPanel({ className, loading, ...props }, ref) {\n  const { orientation } = React.useContext(TabsContext);\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      aria-busy={loading || undefined}\n      className={cn(tabsPanelVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";AA8DM;AA5DN,YAAY,WAAW;AACvB,SAAS,QAAQ,qBAAqB;AACtC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAcP,MAAM,cAAc,MAAM,cAAgC;AAAA,EACxD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,aAAa;AACf,CAAC;AAuBM,SAAS,KAAK;AAAA,EACnB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAc;AACZ,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,SAAS,MAAM,YAAY,GACxD;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA;AAAA,QAGT,gBAAgB,aAAa,kCAAkC;AAAA,QAC/D;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAUO,MAAM,WAAW,MAAM,WAG5B,SAASA,UAAS,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAChD,QAAM,EAAE,YAAY,IAAI,MAAM,WAAW,WAAW;AACpD,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW,GAAG,iBAAiB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAiBM,MAAM,UAAU,MAAM,WAG3B,SAASC,SAAQ,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/C,QAAM,EAAE,SAAS,KAAK,IAAI,MAAM,WAAW,WAAW;AACtD,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gBAAgB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAmBM,MAAM,YAAY,MAAM,WAG7B,SAASC,WAAU,EAAE,WAAW,SAAS,GAAG,MAAM,GAAG,KAAK;AAC1D,QAAM,EAAE,YAAY,IAAI,MAAM,WAAW,WAAW;AACpD,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC;AAAA,MACA,aAAW,WAAW;AAAA,MACtB,WAAW,GAAG,kBAAkB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["TabsList","TabsTab","TabsPanel"]}

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

@@ -0,0 +1,15 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const tabsListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTabVariants: (props?: ({
+    variant?: "underline" | "pill" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsPanelVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TabsListVariantProps = VariantProps<typeof tabsListVariants>;
+export type TabsTabVariantProps = VariantProps<typeof tabsTabVariants>;
+export type TabsPanelVariantProps = VariantProps<typeof tabsPanelVariants>;
+//# sourceMappingURL=tabs.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.variants.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,gBAAgB;;8EAkB5B,CAAC;AAaF,eAAO,MAAM,eAAe;;;8EAmD3B,CAAC;AAOF,eAAO,MAAM,iBAAiB;;8EAmB7B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACzE,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AACvE,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}

package/dist/components/tabs/tabs.variants.js

@@ -0,0 +1,98 @@
+import { cva } from "class-variance-authority";
+const tabsListVariants = cva(
+  [
+    // logical-property layout (G-U6) — flex row by default, gapped; the canvas backs the row
+    "flex bg-surface-canvas",
+    // the neutral baseline the underline indicator sits on (spec §5 border-default)
+    "border-border-default"
+  ],
+  {
+    variants: {
+      orientation: {
+        // horizontal: tabs sit in a row above a 1px baseline; gap between tabs
+        horizontal: "flex-row items-end gap-(--space-1) border-b",
+        // vertical: tabs stack in a column beside a 1px inline-end rail (side rail)
+        vertical: "flex-col items-stretch gap-(--space-1) border-e"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+const tabsTabVariants = cva(
+  [
+    // layout: label (+ optional leading icon / trailing count) on a single centered row
+    "group inline-flex items-center justify-center gap-(--space-2) px-(--space-4)",
+    // type role + weight; ghost fg is the resting label + leading-icon color (spec §5 ghost-fg);
+    // unselected label color is text-secondary, lifting to text-primary when active
+    "text-label font-medium cursor-pointer select-none whitespace-nowrap",
+    "text-text-secondary data-[state=active]:text-text-primary",
+    // restrained ghost hover fill — never a brand fill on an unselected tab (spec §4 Hover)
+    "hover:bg-action-ghost-bg-hover",
+    // the indicator slide is a PLAIN, fast transition + verdify easing, instant under reduced
+    // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).
+    "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 (§7 2.5.5/Material), padding density above it;
+    // the height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
+    // visible 2px focus ring at 2px offset; persists whether the tab is selected or not, and is
+    // DISTINCT from selection — arrows move focus across tabs while selection stays put (spec §4)
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    // disabled — DEC-C: reduced emphasis via the disabled TOKEN (Radix sets data-disabled +
+    // removes it from the roving sequence), never a blanket opacity on the control
+    "data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled"
+  ],
+  {
+    variants: {
+      variant: {
+        // underline (default): a transparent bottom border at rest that paints to the BRAND
+        // action-primary when selected (spec §5: action-primary indicator). The border box is
+        // always reserved so the row does not reflow on selection.
+        underline: [
+          "border-b-2 border-b-transparent -mb-px",
+          "data-[state=active]:border-action-primary-bg"
+        ],
+        // pill: the selected tab is a filled brand chip — action-primary fill, its fg label, md
+        // radius (spec §5: action-primary-bg fill, action-primary-fg label, radius-md)
+        pill: [
+          "rounded-(--radius-md)",
+          "data-[state=active]:bg-action-primary-bg data-[state=active]:text-action-primary-fg"
+        ]
+      },
+      size: {
+        // DEC-B: both sizes hold the shared target-size floor; they differ by vertical padding
+        // density ABOVE it (md roomier, sm denser for side rails), never a fixed height below it.
+        md: "py-(--space-2)",
+        sm: "py-(--space-1)"
+      }
+    },
+    defaultVariants: { variant: "underline", size: "md" }
+  }
+);
+const tabsPanelVariants = cva(
+  [
+    "bg-surface-canvas text-text-primary text-body",
+    "px-(--space-4) py-(--space-4)",
+    // visible focus ring when the panel itself takes focus (it is tabindex=0); never removed
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {
+      orientation: {
+        // horizontal: a neutral hairline above the panel continues the tablist baseline
+        horizontal: "border-t border-border-default",
+        // vertical: the panel sits beside the column rail; no top divider
+        vertical: ""
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+export {
+  tabsListVariants,
+  tabsPanelVariants,
+  tabsTabVariants
+};
+//# sourceMappingURL=tabs.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tabs/tabs.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Tabs is a NEUTRAL layout container (spec §1/§3/§5/§8): brand violet and Verified Green are\n// accents, neutrals carry the surface. The SELECTED tab + its indicator take the BRAND primary\n// action accent (--color-action-primary-*), NEVER a status color — a selected tab reports which\n// panel is open, not a verified result. Surfacing a verified result is VerifiedBadge's job\n// (brand != state, G-U2). This file is the ONLY token-binding site (skill §5 hard rule).\n\n// The tablist: the row (or column) of tabs. A neutral baseline divider (border-border-default)\n// runs along the inline-end edge of the tabs; in horizontal it is the bottom border under the\n// row, in vertical the inline-end border of the column. The canvas surface backs it.\nexport const tabsListVariants = cva(\n  [\n    // logical-property layout (G-U6) — flex row by default, gapped; the canvas backs the row\n    \"flex bg-surface-canvas\",\n    // the neutral baseline the underline indicator sits on (spec §5 border-default)\n    \"border-border-default\",\n  ],\n  {\n    variants: {\n      orientation: {\n        // horizontal: tabs sit in a row above a 1px baseline; gap between tabs\n        horizontal: \"flex-row items-end gap-(--space-1) border-b\",\n        // vertical: tabs stack in a column beside a 1px inline-end rail (side rail)\n        vertical: \"flex-col items-stretch gap-(--space-1) border-e\",\n      },\n    },\n    defaultVariants: { orientation: \"horizontal\" },\n  },\n);\n\n// The tab: one selectable label in the tablist. A NEUTRAL ghost surface at rest — the unselected\n// label in --color-text-secondary, the leading icon + label in the ghost fg, a restrained ghost\n// hover fill. SELECTED lifts the label to --color-text-primary and paints the indicator in the\n// BRAND action-primary (underline border, or pill fill). The persistent focus ring; the\n// target-size floor (padding density above it, DEC-B); fast functional indicator-slide motion\n// (NEVER the deliberate verified-check theatre, G-U3); DEC-C disabled via the disabled TOKEN.\n//\n// Radix Tabs.Trigger drives data-state=active|inactive, data-disabled, and data-orientation on\n// the tab button, so the selected/disabled bindings are attribute-selector variants (allowed —\n// not arbitrary values). aria-selected + the visible panel ALSO encode selection, so color is\n// never the sole signal (spec §4 Selected / use-of-color 1.4.1).\nexport const tabsTabVariants = cva(\n  [\n    // layout: label (+ optional leading icon / trailing count) on a single centered row\n    \"group inline-flex items-center justify-center gap-(--space-2) px-(--space-4)\",\n    // type role + weight; ghost fg is the resting label + leading-icon color (spec §5 ghost-fg);\n    // unselected label color is text-secondary, lifting to text-primary when active\n    \"text-label font-medium cursor-pointer select-none whitespace-nowrap\",\n    \"text-text-secondary data-[state=active]:text-text-primary\",\n    // restrained ghost hover fill — never a brand fill on an unselected tab (spec §4 Hover)\n    \"hover:bg-action-ghost-bg-hover\",\n    // the indicator slide is a PLAIN, fast transition + verdify easing, instant under reduced\n    // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).\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 (§7 2.5.5/Material), padding density above it;\n    // the height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px focus ring at 2px offset; persists whether the tab is selected or not, and is\n    // DISTINCT from selection — arrows move focus across tabs while selection stays put (spec §4)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled — DEC-C: reduced emphasis via the disabled TOKEN (Radix sets data-disabled +\n    // removes it from the roving sequence), never a blanket opacity on the control\n    \"data-[disabled]:pointer-events-none data-[disabled]:text-text-disabled\",\n  ],\n  {\n    variants: {\n      variant: {\n        // underline (default): a transparent bottom border at rest that paints to the BRAND\n        // action-primary when selected (spec §5: action-primary indicator). The border box is\n        // always reserved so the row does not reflow on selection.\n        underline: [\n          \"border-b-2 border-b-transparent -mb-px\",\n          \"data-[state=active]:border-action-primary-bg\",\n        ],\n        // pill: the selected tab is a filled brand chip — action-primary fill, its fg label, md\n        // radius (spec §5: action-primary-bg fill, action-primary-fg label, radius-md)\n        pill: [\n          \"rounded-(--radius-md)\",\n          \"data-[state=active]:bg-action-primary-bg data-[state=active]:text-action-primary-fg\",\n        ],\n      },\n      size: {\n        // DEC-B: both sizes hold the shared target-size floor; they differ by vertical padding\n        // density ABOVE it (md roomier, sm denser for side rails), never a fixed height below it.\n        md: \"py-(--space-2)\",\n        sm: \"py-(--space-1)\",\n      },\n    },\n    defaultVariants: { variant: \"underline\", size: \"md\" },\n  },\n);\n\n// The panel: the content region tied to the selected tab. The canvas surface, the primary body\n// text at the body type role, panel insets from --space-4. In horizontal layout a divider above\n// it (border-t) continues the neutral hairline; in vertical it insets beside the rail. Radix\n// gives it role=tabpanel + aria-labelledby back to its tab, and tabindex=0 when it holds no\n// focusable content so Tab always reaches it (spec §7 focus management).\nexport const tabsPanelVariants = cva(\n  [\n    \"bg-surface-canvas text-text-primary text-body\",\n    \"px-(--space-4) py-(--space-4)\",\n    // visible focus ring when the panel itself takes focus (it is tabindex=0); 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      orientation: {\n        // horizontal: a neutral hairline above the panel continues the tablist baseline\n        horizontal: \"border-t border-border-default\",\n        // vertical: the panel sits beside the column rail; no top divider\n        vertical: \"\",\n      },\n    },\n    defaultVariants: { orientation: \"horizontal\" },\n  },\n);\n\nexport type TabsListVariantProps = VariantProps<typeof tabsListVariants>;\nexport type TabsTabVariantProps = VariantProps<typeof tabsTabVariants>;\nexport type TabsPanelVariantProps = VariantProps<typeof tabsPanelVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAWhC,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,YAAY;AAAA;AAAA,QAEZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;AAaO,MAAM,kBAAkB;AAAA,EAC7B;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA;AAAA;AAAA,QAIP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA;AAAA;AAAA,QAGA,MAAM;AAAA,UACJ;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,MAAM;AAAA;AAAA;AAAA,QAGJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,aAAa,MAAM,KAAK;AAAA,EACtD;AACF;AAOO,MAAM,oBAAoB;AAAA,EAC/B;AAAA,IACE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,YAAY;AAAA;AAAA,QAEZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,aAAa;AAAA,EAC/C;AACF;","names":[]}

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

@@ -0,0 +1,3 @@
+export { Textarea, type TextareaProps } from "./textarea";
+export { textareaVariants, type TextareaVariantProps } from "./textarea.variants";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/textarea/index.js

@@ -0,0 +1,7 @@
+import { Textarea } from "./textarea";
+import { textareaVariants } from "./textarea.variants";
+export {
+  Textarea,
+  textareaVariants
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["export { Textarea, type TextareaProps } from \"./textarea\";\nexport { textareaVariants, type TextareaVariantProps } from \"./textarea.variants\";\n"],"mappings":"AAAA,SAAS,gBAAoC;AAC7C,SAAS,wBAAmD;","names":[]}

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type TextareaVariantProps } from "./textarea.variants";
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "id">, TextareaVariantProps {
+    /** Bound visible label text (for/id). Required — the placeholder is never the name. */
+    label: React.ReactNode;
+    /** Help text below the field, linked via aria-describedby. */
+    description?: React.ReactNode;
+    /** Error message: reds the border, sets aria-invalid, joins aria-describedby. */
+    error?: React.ReactNode;
+    /** Field id; auto-generated from React.useId when omitted. */
+    id?: string;
+    /** auto-grow lower bound (rows). */
+    minRows?: number;
+    /** auto-grow upper bound (rows) — beyond it the field scrolls. */
+    maxRows?: number;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAElF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,EACnE,oBAAoB;IACtB,uFAAuF;IACvF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,iFAAiF;IACjF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,8DAA8D;IAC9D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAQD,eAAO,MAAM,QAAQ,2FA4JpB,CAAC"}

package/dist/components/textarea/textarea.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import { Label } from "../label";
+import { textareaVariants } from "./textarea.variants";
+function describedBy(...ids) {
+  const present = ids.filter(Boolean);
+  return present.length ? present.join(" ") : void 0;
+}
+const Textarea = React.forwardRef(
+  function Textarea2({
+    className,
+    resize = "vertical",
+    label,
+    description,
+    error,
+    id,
+    minRows = 3,
+    maxRows = 8,
+    rows,
+    maxLength,
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    ...props
+  }, forwardedRef) {
+    const autoId = React.useId();
+    const fieldId = id ?? autoId;
+    const descId = `${fieldId}-desc`;
+    const errId = `${fieldId}-err`;
+    const counterId = `${fieldId}-counter`;
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(
+      forwardedRef,
+      () => innerRef.current
+    );
+    const isControlled = value !== void 0;
+    const [count, setCount] = React.useState(
+      String(value ?? defaultValue ?? "").length
+    );
+    const length = isControlled ? String(value ?? "").length : count;
+    const isAutoGrow = resize === "auto-grow";
+    const resizeToContent = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el || !isAutoGrow) return;
+      const style = window.getComputedStyle(el);
+      const px = (v, fallback = 0) => {
+        const n = parseFloat(v);
+        return Number.isFinite(n) ? n : fallback;
+      };
+      const lineHeight = px(style.lineHeight) || px(style.fontSize) * 1.5 || 20;
+      const borders = px(style.borderTopWidth) + px(style.borderBottomWidth);
+      const padding = px(style.paddingTop) + px(style.paddingBottom);
+      const ceiling = maxRows * lineHeight + padding + borders;
+      el.style.height = "auto";
+      const next = Math.min(el.scrollHeight, ceiling);
+      el.style.height = `${next}px`;
+      el.style.maxHeight = `${ceiling}px`;
+      el.style.overflowY = el.scrollHeight > ceiling ? "auto" : "hidden";
+    }, [isAutoGrow, maxRows]);
+    React.useLayoutEffect(() => {
+      if (isAutoGrow) resizeToContent();
+    }, [isAutoGrow, resizeToContent, value]);
+    const handleChange = (e) => {
+      if (!isControlled) setCount(e.target.value.length);
+      if (isAutoGrow) resizeToContent();
+      onChange?.(e);
+    };
+    const hasCounter = maxLength !== void 0;
+    const hasError = error != null && error !== false;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-(--space-3)", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, disabled, required, children: label }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: innerRef,
+          id: fieldId,
+          "aria-multiline": "true",
+          rows: isAutoGrow ? minRows : rows,
+          maxLength,
+          value,
+          defaultValue,
+          onChange: handleChange,
+          disabled,
+          readOnly,
+          required,
+          "aria-required": required || void 0,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": describedBy(
+            // coerce each guard to a boolean so the expression narrows to
+            // string | false (React.ReactNode can be null/0/0n, which would widen
+            // the union past the describedBy signature otherwise)
+            !!description && descId,
+            hasError && errId,
+            hasCounter && counterId
+          ),
+          style: isAutoGrow ? { overflowY: "hidden" } : void 0,
+          className: cn(textareaVariants({ resize }), className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-(--space-3)", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-caption text-text-secondary", children: [
+          description ? (
+            // spec §5: label AND description text are text-secondary; text-muted is
+            // reserved for the character counter at rest (see the counter below).
+            /* @__PURE__ */ jsx("span", { id: descId, className: "text-caption text-text-secondary", children: description })
+          ) : null,
+          hasError ? /* @__PURE__ */ jsx("span", { id: errId, className: "text-caption text-status-critical-fg", children: error }) : null
+        ] }),
+        hasCounter ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            id: counterId,
+            "data-testid": "textarea-counter",
+            "aria-live": "polite",
+            className: "text-caption text-text-muted tabular-nums",
+            children: [
+              length,
+              "/",
+              maxLength
+            ]
+          }
+        ) : null
+      ] })
+    ] });
+  }
+);
+export {
+  Textarea
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\nimport { textareaVariants, type TextareaVariantProps } from \"./textarea.variants\";\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"id\">,\n    TextareaVariantProps {\n  /** Bound visible label text (for/id). Required — the placeholder is never the name. */\n  label: React.ReactNode;\n  /** Help text below the field, linked via aria-describedby. */\n  description?: React.ReactNode;\n  /** Error message: reds the border, sets aria-invalid, joins aria-describedby. */\n  error?: React.ReactNode;\n  /** Field id; auto-generated from React.useId when omitted. */\n  id?: string;\n  /** auto-grow lower bound (rows). */\n  minRows?: number;\n  /** auto-grow upper bound (rows) — beyond it the field scrolls. */\n  maxRows?: number;\n}\n\n/** Merge non-null describedby ids into a single attribute value (or undefined). */\nfunction describedBy(...ids: (string | false | undefined)[]): string | undefined {\n  const present = ids.filter(Boolean) as string[];\n  return present.length ? present.join(\" \") : undefined;\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      className,\n      resize = \"vertical\",\n      label,\n      description,\n      error,\n      id,\n      minRows = 3,\n      maxRows = 8,\n      rows,\n      maxLength,\n      value,\n      defaultValue,\n      onChange,\n      disabled,\n      readOnly,\n      required,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const autoId = React.useId();\n    const fieldId = id ?? autoId;\n    const descId = `${fieldId}-desc`;\n    const errId = `${fieldId}-err`;\n    const counterId = `${fieldId}-counter`;\n\n    const innerRef = React.useRef<HTMLTextAreaElement>(null);\n    React.useImperativeHandle(\n      forwardedRef,\n      () => innerRef.current as HTMLTextAreaElement,\n    );\n\n    // counter state: read controlled value when present, else track length locally\n    const isControlled = value !== undefined;\n    const [count, setCount] = React.useState(\n      String(value ?? defaultValue ?? \"\").length,\n    );\n    const length = isControlled ? String(value ?? \"\").length : count;\n\n    const isAutoGrow = resize === \"auto-grow\";\n\n    // auto-grow: measure scrollHeight, then clamp the height to a ceiling computed\n    // from maxRows × line-height. Beyond the ceiling the field scrolls (overflowY\n    // auto) instead of growing unbounded; below it the field hugs its content\n    // (overflowY hidden). The ceiling is written to el.style.maxHeight — there is no\n    // class for it, so nothing references an undefined custom property.\n    const resizeToContent = React.useCallback(() => {\n      const el = innerRef.current;\n      if (!el || !isAutoGrow) return;\n      const style = window.getComputedStyle(el);\n      // jsdom and \"normal\" line-height both yield NaN here; px() coerces any\n      // non-finite value to 0 (or the fallback) so the ceiling stays a real number.\n      const px = (v: string, fallback = 0) => {\n        const n = parseFloat(v);\n        return Number.isFinite(n) ? n : fallback;\n      };\n      // line-height may compute to \"normal\"; fall back to ~1.5× font size, else 20px.\n      const lineHeight = px(style.lineHeight) || px(style.fontSize) * 1.5 || 20;\n      const borders = px(style.borderTopWidth) + px(style.borderBottomWidth);\n      const padding = px(style.paddingTop) + px(style.paddingBottom);\n      const ceiling = maxRows * lineHeight + padding + borders;\n      // measure the natural content height from a collapsed baseline\n      el.style.height = \"auto\";\n      const next = Math.min(el.scrollHeight, ceiling);\n      el.style.height = `${next}px`;\n      el.style.maxHeight = `${ceiling}px`;\n      // scroll only once content exceeds the ceiling; hug content otherwise\n      el.style.overflowY = el.scrollHeight > ceiling ? \"auto\" : \"hidden\";\n    }, [isAutoGrow, maxRows]);\n\n    React.useLayoutEffect(() => {\n      if (isAutoGrow) resizeToContent();\n    }, [isAutoGrow, resizeToContent, value]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) setCount(e.target.value.length);\n      if (isAutoGrow) resizeToContent();\n      onChange?.(e);\n    };\n\n    const hasCounter = maxLength !== undefined;\n    const hasError = error != null && error !== false;\n\n    return (\n      <div className=\"flex flex-col gap-(--space-3)\">\n        {/* Compose the Label primitive (define-once): it owns the canonical\n            label role/color (text-label / text-text-primary) and the disabled\n            dim. Passing `disabled` lets a disabled Textarea's name dim to\n            --color-text-disabled via Label's own cva variant, and `required`\n            surfaces the required mark there (the field still carries the real\n            required / aria-required state below). textarea.md §5 lists\n            text-secondary for the label, but label.md §3–5 is authoritative for\n            the Label primitive: resting label text is text-text-primary. */}\n        <Label htmlFor={fieldId} disabled={disabled} required={required}>\n          {label}\n        </Label>\n        <textarea\n          ref={innerRef}\n          id={fieldId}\n          // native <textarea> already carries an implicit aria-multiline; make the\n          // multi-line contract explicit per the frozen ARIA contract (spec §7).\n          aria-multiline=\"true\"\n          rows={isAutoGrow ? minRows : rows}\n          maxLength={maxLength}\n          value={value}\n          defaultValue={defaultValue}\n          onChange={handleChange}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-required={required || undefined}\n          aria-invalid={hasError || undefined}\n          aria-describedby={describedBy(\n            // coerce each guard to a boolean so the expression narrows to\n            // string | false (React.ReactNode can be null/0/0n, which would widen\n            // the union past the describedBy signature otherwise)\n            !!description && descId,\n            hasError && errId,\n            hasCounter && counterId,\n          )}\n          style={isAutoGrow ? { overflowY: \"hidden\" } : undefined}\n          className={cn(textareaVariants({ resize }), className)}\n          {...props}\n        />\n        <div className=\"flex items-start justify-between gap-(--space-3)\">\n          <div className=\"text-caption text-text-secondary\">\n            {description ? (\n              // spec §5: label AND description text are text-secondary; text-muted is\n              // reserved for the character counter at rest (see the counter below).\n              <span id={descId} className=\"text-caption text-text-secondary\">\n                {description}\n              </span>\n            ) : null}\n            {hasError ? (\n              <span id={errId} className=\"text-caption text-status-critical-fg\">\n                {error}\n              </span>\n            ) : null}\n          </div>\n          {hasCounter ? (\n            <span\n              id={counterId}\n              data-testid=\"textarea-counter\"\n              aria-live=\"polite\"\n              className=\"text-caption text-text-muted tabular-nums\"\n            >\n              {length}/{maxLength}\n            </span>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["Textarea"]}

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

@@ -0,0 +1,6 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const textareaVariants: (props?: ({
+    resize?: "none" | "vertical" | "auto-grow" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TextareaVariantProps = VariantProps<typeof textareaVariants>;
+//# sourceMappingURL=textarea.variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.variants.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,eAAO,MAAM,gBAAgB;;8EA+C5B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/textarea/textarea.variants.js

@@ -0,0 +1,53 @@
+import { cva } from "class-variance-authority";
+const textareaVariants = cva(
+  [
+    // shape + radius + internal padding; control intent tier carries the field
+    "block w-full rounded-md px-(--space-2) py-(--space-2)",
+    // DEC-A — the value SIZE is text-base (16px) so iOS never zooms on focus; the
+    // brand BODY line-height + letter-spacing ride along via the role-suffix vars.
+    // text-body itself (0.9375rem / 15px) is NEVER bound on a form field: under the
+    // role-aware cn it would collapse against text-base, and 15px would reintroduce
+    // the iOS focus-zoom that the 16px reset exists to prevent.
+    "text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing)",
+    // resting fill / border / text / placeholder — control intent tier
+    "bg-control-bg border border-control-border text-control-fg",
+    "placeholder:text-control-placeholder",
+    // hover darkens the border only; fill is unchanged (restraint)
+    "hover:border-border-strong",
+    // focus: visible 2px signal-blue ring at 2px offset + focused border, never
+    // removed (2.4.7); fast functional transition, no theatre
+    "outline-none transition-[color,border-color,box-shadow] duration-(--motion-duration-fast)",
+    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    "focus-visible:border-border-focus",
+    "motion-reduce:transition-none",
+    // ERROR is the only colored field state — it borrows the STATUS color, never the
+    // brand (§3, §8). Driven by the native aria-invalid attribute.
+    "aria-invalid:border-status-critical-border",
+    // disabled: reduced-emphasis text + placeholder, not editable
+    "disabled:cursor-not-allowed disabled:text-text-disabled",
+    "disabled:placeholder:text-text-disabled",
+    // 44px mobile / 40px desktop minimum block-size floor, logical (a11y target size)
+    "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)"
+  ],
+  {
+    variants: {
+      resize: {
+        // reader drags the height; content may exceed the start height
+        vertical: "resize-y",
+        // fixed height; reader scrolls within it
+        none: "resize-none",
+        // height is driven programmatically between minRows/maxRows, then scrolls;
+        // the manual grip is disabled. The ceiling is NOT a class — it is computed
+        // from maxRows × line-height in the layout effect and written to
+        // el.style.maxHeight (a bare CSS-var class here would reference an undefined
+        // custom property and the token-binding gate would flag a non-token var).
+        "auto-grow": "resize-none"
+      }
+    },
+    defaultVariants: { resize: "vertical" }
+  }
+);
+export {
+  textareaVariants
+};
+//# sourceMappingURL=textarea.variants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/textarea.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The multi-line text field. Token binding lives ONLY here. Native <textarea>, no Radix.\n// The closed state set is default·hover·focus·disabled·read-only·error (textarea.md §4) —\n// loading and pressed do NOT apply and are dropped. Neutrals carry the field; the only\n// accent is the critical status in the error state — never brand violet for a state,\n// never a status color as a flourish (§3, §8).\nexport const textareaVariants = cva(\n  [\n    // shape + radius + internal padding; control intent tier carries the field\n    \"block w-full rounded-md px-(--space-2) py-(--space-2)\",\n    // DEC-A — the value SIZE is text-base (16px) so iOS never zooms on focus; the\n    // brand BODY line-height + letter-spacing ride along via the role-suffix vars.\n    // text-body itself (0.9375rem / 15px) is NEVER bound on a form field: under the\n    // role-aware cn it would collapse against text-base, and 15px would reintroduce\n    // the iOS focus-zoom that the 16px reset exists to prevent.\n    \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing)\",\n    // resting fill / border / text / placeholder — control intent tier\n    \"bg-control-bg border border-control-border text-control-fg\",\n    \"placeholder:text-control-placeholder\",\n    // hover darkens the border only; fill is unchanged (restraint)\n    \"hover:border-border-strong\",\n    // focus: visible 2px signal-blue ring at 2px offset + focused border, never\n    // removed (2.4.7); fast functional transition, no theatre\n    \"outline-none transition-[color,border-color,box-shadow] duration-(--motion-duration-fast)\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"focus-visible:border-border-focus\",\n    \"motion-reduce:transition-none\",\n    // ERROR is the only colored field state — it borrows the STATUS color, never the\n    // brand (§3, §8). Driven by the native aria-invalid attribute.\n    \"aria-invalid:border-status-critical-border\",\n    // disabled: reduced-emphasis text + placeholder, not editable\n    \"disabled:cursor-not-allowed disabled:text-text-disabled\",\n    \"disabled:placeholder:text-text-disabled\",\n    // 44px mobile / 40px desktop minimum block-size floor, logical (a11y target size)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n  ],\n  {\n    variants: {\n      resize: {\n        // reader drags the height; content may exceed the start height\n        vertical: \"resize-y\",\n        // fixed height; reader scrolls within it\n        none: \"resize-none\",\n        // height is driven programmatically between minRows/maxRows, then scrolls;\n        // the manual grip is disabled. The ceiling is NOT a class — it is computed\n        // from maxRows × line-height in the layout effect and written to\n        // el.style.maxHeight (a bare CSS-var class here would reference an undefined\n        // custom property and the token-binding gate would flag a non-token var).\n        \"auto-grow\": \"resize-none\",\n      },\n    },\n    defaultVariants: { resize: \"vertical\" },\n  },\n);\n\nexport type TextareaVariantProps = VariantProps<typeof textareaVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAOhC,MAAM,mBAAmB;AAAA,EAC9B;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA;AAAA,QAEN,UAAU;AAAA;AAAA,QAEV,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMN,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,QAAQ,WAAW;AAAA,EACxC;AACF;","names":[]}

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

@@ -0,0 +1,3 @@
+export { ToastProvider, ToastViewport, Toast, ToastIcon, ToastContent, ToastTitle, ToastDescription, ToastAction, ToastClose, type ToastProviderProps, type ToastViewportProps, type ToastProps, type ToastIconProps, type ToastContentProps, type ToastTitleProps, type ToastDescriptionProps, type ToastActionProps, type ToastCloseProps, } from "./toast";
+export { toastViewportClass, toastVariants, toastIconVariants, toastContentClass, toastTitleClass, toastDescriptionClass, toastActionClass, toastCloseClass, toastCloseGlyphClass, type ToastVariantProps, } from "./toast.variants";
+//# sourceMappingURL=index.d.ts.map

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

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