@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/stepper.js

@@ -0,0 +1,145 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/stepper.tsx
+/**
+* Stepper — a horizontal sequence of named steps with pending/done state.
+*
+* A thin composite over Tabs, not a new primitive: `StepperList`/
+* `StepperTrigger`/`StepperContent` are Tabs' own List/Trigger/Content,
+* restyled — the same Radix Tabs keyboard/roving-focus/panel behavior
+* applies unchanged. `StepperTrigger` adds one thing Tabs doesn't have: a
+* leading step-circle icon (empty for pending, checked for done), using the
+* same `data-icon="inline-start"` slot convention as Tabs' own icon support
+* (see Tabs' "With icons" story) — not a new icon prop shape.
+*/
+var StepperAnnounceContext = React.createContext(null);
+function Stepper({ children, ...props }) {
+	const [announcement, setAnnouncement] = React.useState("");
+	return /* @__PURE__ */ jsx(StepperAnnounceContext.Provider, {
+		value: setAnnouncement,
+		children: /* @__PURE__ */ jsxs(Tabs, {
+			"data-slot": "stepper",
+			...props,
+			children: [children, /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: "sr-only",
+				children: announcement
+			})]
+		})
+	});
+}
+function StepperList({ ...props }) {
+	return /* @__PURE__ */ jsx(TabsList, {
+		"data-slot": "stepper-list",
+		...props
+	});
+}
+function StepperTrigger({ status = "pending", className, children, ...props }) {
+	const announce = React.useContext(StepperAnnounceContext);
+	const prevStatusRef = React.useRef(status);
+	React.useEffect(() => {
+		if (prevStatusRef.current !== "done" && status === "done") announce?.(`${typeof children === "string" ? children : "Step"} done`);
+		prevStatusRef.current = status;
+	}, [
+		status,
+		announce,
+		children
+	]);
+	return /* @__PURE__ */ jsxs(TabsTrigger, {
+		"data-slot": "stepper-trigger",
+		className,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-icon": "inline-start",
+				className: cn("flex size-4 shrink-0 items-center justify-center rounded-full border-2 border-current transition-colors", status === "done" && "border-primary bg-primary text-primary-foreground"),
+				children: status === "done" && /* @__PURE__ */ jsx(CheckIcon, {
+					className: "size-2.5",
+					strokeWidth: 3
+				})
+			}),
+			children,
+			status === "done" && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: ", done"
+			})
+		]
+	});
+}
+function StepperContent({ ...props }) {
+	return /* @__PURE__ */ jsx(TabsContent, {
+		"data-slot": "stepper-content",
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - A short, ordered sequence of named steps the user moves through, where
+*   each step's completion state matters — account setup, a multi-part
+*   form's section nav, an order/shipment progress row.
+*
+* NOT WHEN
+* - The steps are actually a full one-question-at-a-time form flow with its
+*   own Previous/Next/Submit navigation — use Questionnaire, which has that
+*   built in (its `QuestionnaireProgress` is a plain text label, not this).
+* - The panels are unrelated views with no inherent order or completion
+*   state — use plain Tabs.
+* - Showing hierarchical position, not sequence — use Breadcrumb.
+*
+* KEY RULES
+* - It's Tabs underneath: same `value`/`defaultValue`/`onValueChange` on
+*   Stepper, same `variant`/`size` on StepperList, same `disabled` per
+*   trigger, same `orientation="vertical"` for a side-by-side layout.
+* - `status` on StepperTrigger ("pending" default | "done") is independent
+*   of which step is currently active: a step can be active-and-pending
+*   (viewing unfinished work) or inactive-and-done (already completed, user
+*   has since moved on). A pending circle's outline is `border-current`, so
+*   it automatically tracks whatever color TabsTrigger's own hover/active
+*   rules put on the trigger's text — muted normally, primary when it's the
+*   active step, primary-hover on hover — the same currentColor mechanism a
+*   plain lucide icon in Tabs already gets for free, not extra state here.
+*   A "done" circle stays a fixed filled primary regardless of hover/active,
+*   since completion should read as stable, not reactive to the pointer.
+* - Tracking which steps are "done" is the consumer's own state — Stepper
+*   doesn't infer completion from navigation; nothing marks a step done
+*   just because the user moved past it.
+* - A step transitioning to `status="done"` is announced via a shared sr-only live region on
+*   Stepper itself (not just the trigger's own `, done` text) — the common "finish step N, focus
+*   moves to N+1, step N flips to done behind you" flow still reaches screen-reader users.
+* - No connector line between circles — this is triggers-in-a-row, same
+*   visual weight as Tabs. Compose one in yourself (an absolutely
+*   positioned `border-t` between items) if a specific design calls for it.
+*
+* USAGE
+* <Stepper defaultValue="account">
+*   <StepperList>
+*     <StepperTrigger value="account" status="done">Account</StepperTrigger>
+*     <StepperTrigger value="profile" status="pending">Profile</StepperTrigger>
+*     <StepperTrigger value="review" status="pending">Review</StepperTrigger>
+*   </StepperList>
+*   <StepperContent value="account">...</StepperContent>
+*   <StepperContent value="profile">...</StepperContent>
+*   <StepperContent value="review">...</StepperContent>
+* </Stepper>
+*
+* // Vertical — StepperList stacks in a column, StepperContent sits beside
+* // it, exactly like Tabs' own orientation="vertical" (no Stepper-specific
+* // layout code involved).
+* <Stepper defaultValue="account" orientation="vertical" className="flex-row gap-6">
+*   <StepperList className="flex-col">
+*     <StepperTrigger value="account" status="done">Account</StepperTrigger>
+*     <StepperTrigger value="profile" status="pending">Profile</StepperTrigger>
+*   </StepperList>
+*   <StepperContent value="account">...</StepperContent>
+*   <StepperContent value="profile">...</StepperContent>
+* </Stepper>
+*/
+//#endregion
+export { Stepper, StepperContent, StepperList, StepperTrigger };
+
+//# sourceMappingURL=stepper.js.map

package/dist/components/ui/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../../src/components/ui/stepper.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Stepper — a horizontal sequence of named steps with pending/done state.\n *\n * A thin composite over Tabs, not a new primitive: `StepperList`/\n * `StepperTrigger`/`StepperContent` are Tabs' own List/Trigger/Content,\n * restyled — the same Radix Tabs keyboard/roving-focus/panel behavior\n * applies unchanged. `StepperTrigger` adds one thing Tabs doesn't have: a\n * leading step-circle icon (empty for pending, checked for done), using the\n * same `data-icon=\"inline-start\"` slot convention as Tabs' own icon support\n * (see Tabs' \"With icons\" story) — not a new icon prop shape.\n */\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\"\n\n// A step flipping to \"done\" typically happens while focus has already\n// moved on to the next step (finish step N, advance to N+1) — the `, done`\n// sr-only text on the trigger itself only reaches AT users if they\n// re-navigate back to it. This live region lets StepperTrigger announce\n// the transition from wherever focus actually is.\nconst StepperAnnounceContext = React.createContext<\n  ((text: string) => void) | null\n>(null)\n\nfunction Stepper({ children, ...props }: React.ComponentProps<typeof Tabs>) {\n  const [announcement, setAnnouncement] = React.useState(\"\")\n  return (\n    <StepperAnnounceContext.Provider value={setAnnouncement}>\n      <Tabs data-slot=\"stepper\" {...props}>\n        {children}\n        <span role=\"status\" className=\"sr-only\">\n          {announcement}\n        </span>\n      </Tabs>\n    </StepperAnnounceContext.Provider>\n  )\n}\n\nfunction StepperList({ ...props }: React.ComponentProps<typeof TabsList>) {\n  return <TabsList data-slot=\"stepper-list\" {...props} />\n}\n\nfunction StepperTrigger({\n  status = \"pending\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof TabsTrigger> & {\n  /** \"pending\" (empty circle, default) | \"done\" (filled circle with a check) — independent of whether this step is the currently active one, which Tabs' own active styling already communicates. */\n  status?: \"pending\" | \"done\"\n}) {\n  const announce = React.useContext(StepperAnnounceContext)\n  // Skip the announcement on mount (a step already \"done\" when the\n  // Stepper first renders isn't a state *change*) — only fire when it\n  // actually transitions from pending to done while mounted.\n  const prevStatusRef = React.useRef(status)\n  React.useEffect(() => {\n    if (prevStatusRef.current !== \"done\" && status === \"done\") {\n      announce?.(\n        `${typeof children === \"string\" ? children : \"Step\"} done`\n      )\n    }\n    prevStatusRef.current = status\n  }, [status, announce, children])\n\n  return (\n    <TabsTrigger data-slot=\"stepper-trigger\" className={className} {...props}>\n      <span\n        aria-hidden=\"true\"\n        data-icon=\"inline-start\"\n        className={cn(\n          // border-current (not a fixed border-muted-foreground) so the\n          // circle's outline tracks whatever color TabsTrigger's own\n          // hover/data-active rules put on the trigger's text — muted on a\n          // plain pending step, primary when it's the active step, and\n          // primary-hover on hover — the same currentColor mechanism a\n          // plain lucide icon in Tabs already gets for free.\n          \"flex size-4 shrink-0 items-center justify-center rounded-full border-2 border-current transition-colors\",\n          status === \"done\" && \"border-primary bg-primary text-primary-foreground\"\n        )}\n      >\n        {status === \"done\" && <CheckIcon className=\"size-2.5\" strokeWidth={3} />}\n      </span>\n      {children}\n      {/* The circle icon above is aria-hidden — this is the only thing that\n          actually tells assistive tech a step is done, not just color/shape. */}\n      {status === \"done\" && <span className=\"sr-only\">, done</span>}\n    </TabsTrigger>\n  )\n}\n\nfunction StepperContent({ ...props }: React.ComponentProps<typeof TabsContent>) {\n  return <TabsContent data-slot=\"stepper-content\" {...props} />\n}\n\nexport { Stepper, StepperList, StepperTrigger, StepperContent }\n\n/**\n * WHEN TO USE\n * - A short, ordered sequence of named steps the user moves through, where\n *   each step's completion state matters — account setup, a multi-part\n *   form's section nav, an order/shipment progress row.\n *\n * NOT WHEN\n * - The steps are actually a full one-question-at-a-time form flow with its\n *   own Previous/Next/Submit navigation — use Questionnaire, which has that\n *   built in (its `QuestionnaireProgress` is a plain text label, not this).\n * - The panels are unrelated views with no inherent order or completion\n *   state — use plain Tabs.\n * - Showing hierarchical position, not sequence — use Breadcrumb.\n *\n * KEY RULES\n * - It's Tabs underneath: same `value`/`defaultValue`/`onValueChange` on\n *   Stepper, same `variant`/`size` on StepperList, same `disabled` per\n *   trigger, same `orientation=\"vertical\"` for a side-by-side layout.\n * - `status` on StepperTrigger (\"pending\" default | \"done\") is independent\n *   of which step is currently active: a step can be active-and-pending\n *   (viewing unfinished work) or inactive-and-done (already completed, user\n *   has since moved on). A pending circle's outline is `border-current`, so\n *   it automatically tracks whatever color TabsTrigger's own hover/active\n *   rules put on the trigger's text — muted normally, primary when it's the\n *   active step, primary-hover on hover — the same currentColor mechanism a\n *   plain lucide icon in Tabs already gets for free, not extra state here.\n *   A \"done\" circle stays a fixed filled primary regardless of hover/active,\n *   since completion should read as stable, not reactive to the pointer.\n * - Tracking which steps are \"done\" is the consumer's own state — Stepper\n *   doesn't infer completion from navigation; nothing marks a step done\n *   just because the user moved past it.\n * - A step transitioning to `status=\"done\"` is announced via a shared sr-only live region on\n *   Stepper itself (not just the trigger's own `, done` text) — the common \"finish step N, focus\n *   moves to N+1, step N flips to done behind you\" flow still reaches screen-reader users.\n * - No connector line between circles — this is triggers-in-a-row, same\n *   visual weight as Tabs. Compose one in yourself (an absolutely\n *   positioned `border-t` between items) if a specific design calls for it.\n *\n * USAGE\n * <Stepper defaultValue=\"account\">\n *   <StepperList>\n *     <StepperTrigger value=\"account\" status=\"done\">Account</StepperTrigger>\n *     <StepperTrigger value=\"profile\" status=\"pending\">Profile</StepperTrigger>\n *     <StepperTrigger value=\"review\" status=\"pending\">Review</StepperTrigger>\n *   </StepperList>\n *   <StepperContent value=\"account\">...</StepperContent>\n *   <StepperContent value=\"profile\">...</StepperContent>\n *   <StepperContent value=\"review\">...</StepperContent>\n * </Stepper>\n *\n * // Vertical — StepperList stacks in a column, StepperContent sits beside\n * // it, exactly like Tabs' own orientation=\"vertical\" (no Stepper-specific\n * // layout code involved).\n * <Stepper defaultValue=\"account\" orientation=\"vertical\" className=\"flex-row gap-6\">\n *   <StepperList className=\"flex-col\">\n *     <StepperTrigger value=\"account\" status=\"done\">Account</StepperTrigger>\n *     <StepperTrigger value=\"profile\" status=\"pending\">Profile</StepperTrigger>\n *   </StepperList>\n *   <StepperContent value=\"account\">...</StepperContent>\n *   <StepperContent value=\"profile\">...</StepperContent>\n * </Stepper>\n */\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAM,yBAAyB,MAAM,cAEnC,IAAI;AAEN,SAAS,QAAQ,EAAE,UAAU,GAAG,SAA4C;CAC1E,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,EAAE;CACzD,OACE,oBAAC,uBAAuB,UAAxB;EAAiC,OAAO;EACtC,UAAA,qBAAC,MAAD;GAAM,aAAU;GAAU,GAAI;GAA9B,UAAA,CACG,UACD,oBAAC,QAAD;IAAM,MAAK;IAAS,WAAU;IAC3B,UAAA;GACG,CAAA,CACF;;CACyB,CAAA;AAErC;AAEA,SAAS,YAAY,EAAE,GAAG,SAAgD;CACxE,OAAO,oBAAC,UAAD;EAAU,aAAU;EAAe,GAAI;CAAQ,CAAA;AACxD;AAEA,SAAS,eAAe,EACtB,SAAS,WACT,WACA,UACA,GAAG,SAIF;CACD,MAAM,WAAW,MAAM,WAAW,sBAAsB;CAIxD,MAAM,gBAAgB,MAAM,OAAO,MAAM;CACzC,MAAM,gBAAgB;EACpB,IAAI,cAAc,YAAY,UAAU,WAAW,QACjD,WACE,GAAG,OAAO,aAAa,WAAW,WAAW,OAAO,MACtD;EAEF,cAAc,UAAU;CAC1B,GAAG;EAAC;EAAQ;EAAU;CAAQ,CAAC;CAE/B,OACE,qBAAC,aAAD;EAAa,aAAU;EAA6B;EAAW,GAAI;EAAnE,UAAA;GACE,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAW,GAOT,2GACA,WAAW,UAAU,mDACvB;IAEC,UAAA,WAAW,UAAU,oBAAC,WAAD;KAAW,WAAU;KAAW,aAAa;IAAI,CAAA;GACnE,CAAA;GACL;GAGA,WAAW,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAY,CAAA;EACjD;;AAEjB;AAEA,SAAS,eAAe,EAAE,GAAG,SAAmD;CAC9E,OAAO,oBAAC,aAAD;EAAa,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC9D"}

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Switch — on/off control that applies immediately.
+ *
+ * Built on the Radix Switch primitive. Adds a `size="sm"` step alongside
+ * the default size and drives error styling off `aria-invalid` instead of a
+ * prop.
+ */
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: "sm" | "default";
+}): React.JSX.Element;
+export { Switch };
+/**
+ * WHEN TO USE
+ * - Settings and feature flags that take effect the instant they're flipped, with no
+ *   separate save/submit step (e.g. "Airplane mode")
+ *
+ * NOT WHEN
+ * - A value that's part of a form and needs explicit submission — use Checkbox
+ * - A formatting/state toggle inside a toolbar (e.g. bold, alignment) — use Toggle
+ *
+ * KEY RULES
+ * - size: sm | default (default "default") — sm is a smaller footprint for dense settings rows
+ * - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+ * - Wrap in a Label so the text is a clickable target and is announced to screen readers
+ *
+ * USAGE
+ * <Label className="flex items-center gap-2">
+ *   <Switch />
+ *   Airplane mode
+ * </Label>
+ *
+ * <Switch size="sm" defaultChecked />
+ */
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/ui/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/ui/switch.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAA;AAIpD,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,qBAiBA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA;AAEjB;;;;;;;;;;;;;;;;;;;;;GAqBG"}

package/dist/components/ui/switch.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import "react";
+import { Switch as Switch$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/switch.tsx
+function Switch({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Switch$1.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-foreground"
+		})
+	});
+}
+/**
+* WHEN TO USE
+* - Settings and feature flags that take effect the instant they're flipped, with no
+*   separate save/submit step (e.g. "Airplane mode")
+*
+* NOT WHEN
+* - A value that's part of a form and needs explicit submission — use Checkbox
+* - A formatting/state toggle inside a toolbar (e.g. bold, alignment) — use Toggle
+*
+* KEY RULES
+* - size: sm | default (default "default") — sm is a smaller footprint for dense settings rows
+* - Error state is driven entirely by `aria-invalid` — there is no `error` prop
+* - Wrap in a Label so the text is a clickable target and is announced to screen readers
+*
+* USAGE
+* <Label className="flex items-center gap-2">
+*   <Switch />
+*   Airplane mode
+* </Label>
+*
+* <Switch size="sm" defaultChecked />
+*/
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.js.map

package/dist/components/ui/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","names":[],"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["\"use client\"\n\n/**\n * Switch — on/off control that applies immediately.\n *\n * Built on the Radix Switch primitive. Adds a `size=\"sm\"` step alongside\n * the default size and drives error styling off `aria-invalid` instead of a\n * prop.\n */\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n\n/**\n * WHEN TO USE\n * - Settings and feature flags that take effect the instant they're flipped, with no\n *   separate save/submit step (e.g. \"Airplane mode\")\n *\n * NOT WHEN\n * - A value that's part of a form and needs explicit submission — use Checkbox\n * - A formatting/state toggle inside a toolbar (e.g. bold, alignment) — use Toggle\n *\n * KEY RULES\n * - size: sm | default (default \"default\") — sm is a smaller footprint for dense settings rows\n * - Error state is driven entirely by `aria-invalid` — there is no `error` prop\n * - Wrap in a Label so the text is a clickable target and is announced to screen readers\n *\n * USAGE\n * <Label className=\"flex items-center gap-2\">\n *   <Switch />\n *   Airplane mode\n * </Label>\n *\n * <Switch size=\"sm\" defaultChecked />\n */\n"],"mappings":";;;;;;AAeA,SAAS,OAAO,EACd,WACA,OAAO,WACP,GAAG,SAGF;CACD,OACE,oBAAC,SAAgB,MAAjB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,krBACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,SAAgB,OAAjB;GACE,aAAU;GACV,WAAU;EACX,CAAA;CACmB,CAAA;AAE1B"}

package/dist/components/ui/table.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Table — styled semantic table elements.
+ *
+ * Plain `<table>`/`<thead>`/`<tbody>`/`<tr>`/`<th>`/`<td>` wrappers.
+ * No sorting, filtering, selection, or
+ * pagination logic — bring your own state, or a headless table library
+ * (e.g. TanStack Table) and render into these primitives.
+ *
+ * `size` (row density) lives on the outer container as `group/table`;
+ * TableHead/TableCell react to it via `group-data-[size=x]/table`, the same
+ * prop-drilling-free pattern Attachment/Empty use — no size prop on those
+ * two, just set it once on `Table` itself.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const tableVariants: (props?: ({
+    size?: "sm" | "default" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Table({ className, size, ...props }: React.ComponentProps<"table"> & VariantProps<typeof tableVariants>): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+/**
+ * WHEN TO USE
+ * - Structured tabular data with columns and rows the user compares
+ *   across — invoices, reports, admin lists with fixed columns.
+ *
+ * NOT WHEN
+ * - An entity list where each row has a primary action and no real
+ *   column alignment — use Item instead.
+ * - Key/value pairs — a two-column layout or definition list reads better.
+ * - Hierarchical/nested data — use Accordion.
+ *
+ * KEY RULES
+ * - `Table` already wraps itself in a `relative w-full overflow-x-auto`
+ *   container — don't add another scroll wrapper around it.
+ * - Rows are edge-to-edge by default: `Table` pulls itself out by the
+ *   nearest `--card-spacing` (Card's own padding token, 0 outside a Card)
+ *   so row dividers/backgrounds reach the surface's true edge, while
+ *   `TableHead`/`TableCell` push their first/last-column padding back out
+ *   by the same amount — cell content still lines up with a `CardTitle`
+ *   above it, only the divider extends further. This is automatic; there's
+ *   no prop for it.
+ * - `TableRow` highlights via `data-[state=selected]:bg-muted` — drive
+ *   selection with that data attribute, not a custom className.
+ * - No built-in sort/filter/paginate — compose with Pagination and
+ *   Checkbox (in a `TableHead`/`TableCell` for the selection column)
+ *   yourself, or drive rows from a headless table library.
+ * - `size` on `Table` sets row density: "default" (h-10 head, p-2 cells) |
+ *   "sm" (h-9 head, tighter vertical cell padding) | "xs" (h-8 head, text-xs,
+ *   tightest padding) — same default/sm/xs vocabulary as Button/Item/
+ *   Attachment/Select, not Table-specific naming. Set it once on `Table`;
+ *   `TableHead`/`TableCell` react to it automatically.
+ *
+ * USAGE
+ * <Table>
+ *   <TableCaption>A list of your recent invoices.</TableCaption>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Invoice</TableHead>
+ *       <TableHead className="text-right">Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell className="font-medium">INV001</TableCell>
+ *       <TableCell className="text-right">$250.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * // Denser row height for a data-heavy admin grid
+ * <Table size="xs">...</Table>
+ */
+//# sourceMappingURL=table.d.ts.map

package/dist/components/ui/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/ui/table.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;8EAWjB,CAAA;AAEF,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,qBAqBpE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQ1E;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW1E;AAED,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAiBpE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYrE;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAYrE;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,qBAQjC;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,GACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG"}

package/dist/components/ui/table.js

@@ -0,0 +1,130 @@
+import { cn } from "../../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/table.tsx
+var tableVariants = cva("w-full caption-bottom", {
+	variants: { size: {
+		default: "text-sm",
+		sm: "text-sm",
+		xs: "text-xs"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Table({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "table-container",
+		"data-size": size,
+		className: "group/table relative -mx-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px)*2)] overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-slot": "table",
+			className: cn(tableVariants({ size }), className),
+			...props
+		})
+	});
+}
+function TableHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("thead", {
+		"data-slot": "table-header",
+		className: cn("[&_tr]:border-b", className),
+		...props
+	});
+}
+function TableBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tbody", {
+		"data-slot": "table-body",
+		className: cn("[&_tr:last-child]:border-0", className),
+		...props
+	});
+}
+function TableFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		"data-slot": "table-footer",
+		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		...props
+	});
+}
+function TableRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("tr", {
+		"data-slot": "table-row",
+		className: cn("group/row border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className),
+		...props
+	});
+}
+function TableHead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-slot": "table-head",
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground first:pl-(--card-spacing,--spacing(2)) last:pr-(--card-spacing,--spacing(2)) [&:has([role=checkbox])]:pr-0", "group-data-[size=sm]/table:h-9 group-data-[size=xs]/table:h-8 group-data-[size=xs]/table:px-1.5", className),
+		...props
+	});
+}
+function TableCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-slot": "table-cell",
+		className: cn("p-2 align-middle whitespace-nowrap first:pl-(--card-spacing,--spacing(2)) last:pr-(--card-spacing,--spacing(2)) [&:has([role=checkbox])]:pr-0", "group-data-[size=sm]/table:py-1.5 group-data-[size=xs]/table:px-1.5 group-data-[size=xs]/table:py-1", className),
+		...props
+	});
+}
+function TableCaption({ className, ...props }) {
+	return /* @__PURE__ */ jsx("caption", {
+		"data-slot": "table-caption",
+		className: cn("mt-4 text-sm text-muted-foreground", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Structured tabular data with columns and rows the user compares
+*   across — invoices, reports, admin lists with fixed columns.
+*
+* NOT WHEN
+* - An entity list where each row has a primary action and no real
+*   column alignment — use Item instead.
+* - Key/value pairs — a two-column layout or definition list reads better.
+* - Hierarchical/nested data — use Accordion.
+*
+* KEY RULES
+* - `Table` already wraps itself in a `relative w-full overflow-x-auto`
+*   container — don't add another scroll wrapper around it.
+* - Rows are edge-to-edge by default: `Table` pulls itself out by the
+*   nearest `--card-spacing` (Card's own padding token, 0 outside a Card)
+*   so row dividers/backgrounds reach the surface's true edge, while
+*   `TableHead`/`TableCell` push their first/last-column padding back out
+*   by the same amount — cell content still lines up with a `CardTitle`
+*   above it, only the divider extends further. This is automatic; there's
+*   no prop for it.
+* - `TableRow` highlights via `data-[state=selected]:bg-muted` — drive
+*   selection with that data attribute, not a custom className.
+* - No built-in sort/filter/paginate — compose with Pagination and
+*   Checkbox (in a `TableHead`/`TableCell` for the selection column)
+*   yourself, or drive rows from a headless table library.
+* - `size` on `Table` sets row density: "default" (h-10 head, p-2 cells) |
+*   "sm" (h-9 head, tighter vertical cell padding) | "xs" (h-8 head, text-xs,
+*   tightest padding) — same default/sm/xs vocabulary as Button/Item/
+*   Attachment/Select, not Table-specific naming. Set it once on `Table`;
+*   `TableHead`/`TableCell` react to it automatically.
+*
+* USAGE
+* <Table>
+*   <TableCaption>A list of your recent invoices.</TableCaption>
+*   <TableHeader>
+*     <TableRow>
+*       <TableHead>Invoice</TableHead>
+*       <TableHead className="text-right">Amount</TableHead>
+*     </TableRow>
+*   </TableHeader>
+*   <TableBody>
+*     <TableRow>
+*       <TableCell className="font-medium">INV001</TableCell>
+*       <TableCell className="text-right">$250.00</TableCell>
+*     </TableRow>
+*   </TableBody>
+* </Table>
+*
+* // Denser row height for a data-heavy admin grid
+* <Table size="xs">...</Table>
+*/
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+
+//# sourceMappingURL=table.js.map

package/dist/components/ui/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["/**\n * Table — styled semantic table elements.\n *\n * Plain `<table>`/`<thead>`/`<tbody>`/`<tr>`/`<th>`/`<td>` wrappers.\n * No sorting, filtering, selection, or\n * pagination logic — bring your own state, or a headless table library\n * (e.g. TanStack Table) and render into these primitives.\n *\n * `size` (row density) lives on the outer container as `group/table`;\n * TableHead/TableCell react to it via `group-data-[size=x]/table`, the same\n * prop-drilling-free pattern Attachment/Empty use — no size prop on those\n * two, just set it once on `Table` itself.\n */\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst tableVariants = cva(\"w-full caption-bottom\", {\n  variants: {\n    size: {\n      default: \"text-sm\",\n      sm: \"text-sm\",\n      xs: \"text-xs\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\nfunction Table({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"table\"> & VariantProps<typeof tableVariants>) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      data-size={size}\n      // Edge-to-edge by default: the table always sits on some surface\n      // (almost always a Card), so it pulls itself out by that surface's\n      // own --card-spacing (falls back to 0 outside a Card, i.e. no-op) so\n      // row dividers/backgrounds reach the surface's true edge, while\n      // TableHead/TableCell push their own first/last-column padding back\n      // out by the same amount — content still lines up with a CardTitle\n      // above it, only the divider extends further.\n      className=\"group/table relative -mx-(--card-spacing,0px) w-[calc(100%+var(--card-spacing,0px)*2)] overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(tableVariants({ size }), className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        // `group/row` — an opaque pinned cell (DataTable's own\n        // `getPinnedClassName`) sits on top of this row's own\n        // hover/selected tint and would otherwise hide it for that one\n        // column; that pinned cell reacts to this row's hover/selected\n        // state directly via `group-hover/row`/`group-data-[state=selected]/row`\n        // instead of relying on the tint showing through underneath it.\n        \"group/row border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground first:pl-(--card-spacing,--spacing(2)) last:pr-(--card-spacing,--spacing(2)) [&:has([role=checkbox])]:pr-0\",\n        \"group-data-[size=sm]/table:h-9 group-data-[size=xs]/table:h-8 group-data-[size=xs]/table:px-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap first:pl-(--card-spacing,--spacing(2)) last:pr-(--card-spacing,--spacing(2)) [&:has([role=checkbox])]:pr-0\",\n        \"group-data-[size=sm]/table:py-1.5 group-data-[size=xs]/table:px-1.5 group-data-[size=xs]/table:py-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n\n/**\n * WHEN TO USE\n * - Structured tabular data with columns and rows the user compares\n *   across — invoices, reports, admin lists with fixed columns.\n *\n * NOT WHEN\n * - An entity list where each row has a primary action and no real\n *   column alignment — use Item instead.\n * - Key/value pairs — a two-column layout or definition list reads better.\n * - Hierarchical/nested data — use Accordion.\n *\n * KEY RULES\n * - `Table` already wraps itself in a `relative w-full overflow-x-auto`\n *   container — don't add another scroll wrapper around it.\n * - Rows are edge-to-edge by default: `Table` pulls itself out by the\n *   nearest `--card-spacing` (Card's own padding token, 0 outside a Card)\n *   so row dividers/backgrounds reach the surface's true edge, while\n *   `TableHead`/`TableCell` push their first/last-column padding back out\n *   by the same amount — cell content still lines up with a `CardTitle`\n *   above it, only the divider extends further. This is automatic; there's\n *   no prop for it.\n * - `TableRow` highlights via `data-[state=selected]:bg-muted` — drive\n *   selection with that data attribute, not a custom className.\n * - No built-in sort/filter/paginate — compose with Pagination and\n *   Checkbox (in a `TableHead`/`TableCell` for the selection column)\n *   yourself, or drive rows from a headless table library.\n * - `size` on `Table` sets row density: \"default\" (h-10 head, p-2 cells) |\n *   \"sm\" (h-9 head, tighter vertical cell padding) | \"xs\" (h-8 head, text-xs,\n *   tightest padding) — same default/sm/xs vocabulary as Button/Item/\n *   Attachment/Select, not Table-specific naming. Set it once on `Table`;\n *   `TableHead`/`TableCell` react to it automatically.\n *\n * USAGE\n * <Table>\n *   <TableCaption>A list of your recent invoices.</TableCaption>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Invoice</TableHead>\n *       <TableHead className=\"text-right\">Amount</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow>\n *       <TableCell className=\"font-medium\">INV001</TableCell>\n *       <TableCell className=\"text-right\">$250.00</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n *\n * // Denser row height for a data-heavy admin grid\n * <Table size=\"xs\">...</Table>\n */\n"],"mappings":";;;;;AAmBA,IAAM,gBAAgB,IAAI,yBAAyB;CACjD,UAAU,EACR,MAAM;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,SAAS,MAAM,EACb,WACA,OAAO,WACP,GAAG,SACkE;CACrE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,aAAW;EAQX,WAAU;EAEV,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;GAChD,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,mBAAmB,SAAS;EAC1C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;CACzE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,2DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;CACrE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAOT,uHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,6LACA,mGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,iJACA,uGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SAC+B;CAClC,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,87 @@
+/**
+ * Tabs — switches between panels of the same content area.
+ *
+ * Radix Tabs primitive with two TabsList visual variants: "default" (pill
+ * background, active tab gets a raised background) and "line" (transparent
+ * background, active tab gets an underline).
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+    size?: "sm" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, size, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+/**
+ * WHEN TO USE
+ * - Switching between 2–6 named views of the same entity (e.g. a record's
+ *   Overview / History / Notes)
+ * - orientation="vertical" for a side-by-side settings-style layout
+ *
+ * NOT WHEN
+ * - Top-level app navigation — use NavigationMenu
+ * - An ordered sequence where each step has its own pending/done state —
+ *   use Stepper, which is Tabs plus a step-circle icon
+ * - A one-question-at-a-time form flow with its own Previous/Next/Submit —
+ *   use Questionnaire
+ * - Showing hierarchical position — use Breadcrumb
+ *
+ * KEY RULES
+ * - TabsList variant: "default" (transparent track, default) | "line"
+ *   (underline, also transparent) — set once on TabsList, not per trigger
+ * - Both variants read the active tab as primary, not neutral: "default" gets a
+ *   subtle bg-primary/10 fill + text-primary (translucent, so it blends on any
+ *   surface with no per-container overrides needed); "line" gets text-primary
+ *   plus a bg-primary underline, no fill (there's no track to fill)
+ * - Hover, inactive tab: "default" gets a bg-muted fill + darker text; "line"
+ *   doesn't change text at all — it reveals a bg-border underline instead,
+ *   a plain hover affordance, not a color change
+ * - Hover, active tab: "default"'s fill doesn't change, only its text darkens
+ *   to text-primary-hover; "line" darkens BOTH its text and its underline to
+ *   text-primary-hover/bg-primary-hover — hovering the current tab still
+ *   reads as "this one, more so," not a neutral hover state
+ * - A leading icon on a trigger uses the same `data-icon="inline-start"` slot
+ *   convention as Button/Toggle/SelectTrigger — no separate icon prop; the
+ *   trigger's own padding adjusts automatically once that attribute is present
+ * - Individual TabsTrigger can be `disabled`
+ * - orientation defaults to "horizontal"; vertical stacks TabsList in a column
+ * - TabsList size: "default" (h-8 track, text-sm triggers) | "sm" (h-7,
+ *   text-xs, tighter gap/padding) — same default/sm vocabulary as Button/
+ *   Item/Attachment/Select, not Tabs-specific naming. Set once on TabsList;
+ *   TabsTrigger reacts to it automatically.
+ * - A count next to a label (e.g. "Inbox 12") is a plain `Badge` child, same
+ *   `gap-1.5` slot the leading-icon convention above already uses — no
+ *   dedicated count prop. Badge's own static color reads fine against both
+ *   the active and inactive tab state as-is.
+ *
+ * USAGE
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="history">History</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">...</TabsContent>
+ *   <TabsContent value="history">...</TabsContent>
+ * </Tabs>
+ *
+ * <TabsList size="sm">
+ *   <TabsTrigger value="a">A</TabsTrigger>
+ *   <TabsTrigger value="b">B</TabsTrigger>
+ * </TabsList>
+ *
+ * <TabsList variant="line">
+ *   <TabsTrigger value="a">A</TabsTrigger>
+ *   <TabsTrigger value="b" disabled>B</TabsTrigger>
+ * </TabsList>
+ *
+ * <TabsTrigger value="overview">
+ *   <LayoutGridIcon data-icon="inline-start" />
+ *   Overview
+ * </TabsTrigger>
+ */
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tabs.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,IAAI,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AAIhD,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,qBAYjD;AAED,QAAA,MAAM,gBAAgB;;;8EAkBrB,CAAA;AAED,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,GAChD,YAAY,CAAC,OAAO,gBAAgB,CAAC,qBAUtC;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAiBpD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,qBAWpD;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAA;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG"}