@hex-core/components 1.3.0 → 1.4.0

package/dist/stepper.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type StepStatus = "complete" | "current" | "upcoming" | "error";
+interface StepperStep {
+    /** Stable unique id used as the React key. */
+    id: string;
+    /** Step name shown next to the indicator. */
+    label: string;
+    /** Optional secondary text under the label. */
+    description?: string;
+    /** Disable the step (only applies when onStepClick is provided). */
+    disabled?: boolean;
+    /**
+     * Override the index-derived status. Use `"error"` to mark a failed step
+     * (e.g. validation failure in a form wizard); `"complete"` / `"current"` /
+     * `"upcoming"` are derived from `current` by default.
+     */
+    status?: StepStatus;
+}
+interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "aria-label" | "onClick"> {
+    /** Ordered list of steps. */
+    steps: StepperStep[];
+    /** Index of the current step (controlled). */
+    current: number;
+    /** Layout direction. */
+    orientation?: "horizontal" | "vertical";
+    /** Indicator size. */
+    size?: "sm" | "md";
+    /** When provided, each step is rendered as a clickable button. */
+    onStepClick?: (index: number) => void;
+    /** Required accessible name for the ordered list. */
+    "aria-label": string;
+}
+/**
+ * Linear progress indicator for multi-step flows (form wizards, onboarding,
+ * checkout). Pure semantic HTML — `<ol>` of `<li>` with `aria-current="step"`
+ * on the current item; per-step `status` overrides allow marking "error".
+ *
+ * Pass `onStepClick` to make completed/non-disabled steps interactive.
+ * @returns An accessible ordered step list.
+ */
+declare function Stepper({ steps, current, orientation, size, onStepClick, "aria-label": ariaLabel, className, ...rest }: StepperProps): react_jsx_runtime.JSX.Element;
+declare namespace Stepper {
+    var displayName: string;
+}
+
+export { type StepStatus, Stepper, type StepperProps, type StepperStep };

package/dist/stepper.js

@@ -0,0 +1,226 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var stepperRoot = cva(
+  "flex w-full gap-[var(--gap-md,1rem)] list-none p-0 m-0",
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row items-start",
+        vertical: "flex-col items-stretch"
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+);
+var stepItem = cva("flex gap-[var(--space-3,0.75rem)]", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row items-center",
+      vertical: "flex-row items-start w-full"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var stepIndicator = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full border-2 font-medium transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+  {
+    variants: {
+      size: {
+        sm: "h-7 w-7 text-xs",
+        md: "h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] text-sm"
+      },
+      status: {
+        complete: "bg-primary border-primary text-primary-foreground",
+        current: "bg-background border-primary text-primary",
+        upcoming: "bg-background border-input text-muted-foreground",
+        error: "bg-destructive border-destructive text-destructive-foreground"
+      }
+    },
+    defaultVariants: { size: "md", status: "upcoming" }
+  }
+);
+var stepConnector = cva("bg-input transition-colors", {
+  variants: {
+    orientation: {
+      horizontal: "h-px flex-1 min-w-[var(--space-6,1.5rem)] mx-[var(--space-2,0.5rem)]",
+      vertical: "w-px self-stretch ml-[1.0625rem] my-[var(--space-1,0.25rem)] min-h-[var(--space-6,1.5rem)]"
+    },
+    complete: {
+      true: "bg-primary",
+      false: ""
+    }
+  },
+  defaultVariants: { orientation: "horizontal", complete: false }
+});
+function deriveStatus(index, current) {
+  if (index < current) return "complete";
+  if (index === current) return "current";
+  return "upcoming";
+}
+function StepCheck() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-4 w-4",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+function StepError() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "h-4 w-4",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
+      ]
+    }
+  );
+}
+function StepIndicator({ index, status, size }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: stepIndicator({ size, status }),
+      "aria-invalid": status === "error" ? true : void 0,
+      children: status === "complete" ? /* @__PURE__ */ jsx(StepCheck, {}) : status === "error" ? /* @__PURE__ */ jsx(StepError, {}) : index + 1
+    }
+  );
+}
+function Stepper({
+  steps,
+  current,
+  orientation = "horizontal",
+  size = "md",
+  onStepClick,
+  "aria-label": ariaLabel,
+  className,
+  ...rest
+}) {
+  const interactive = typeof onStepClick === "function";
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "aria-label": ariaLabel,
+      className: cn(stepperRoot({ orientation }), className),
+      ...rest,
+      children: steps.map((step, index) => {
+        const status = step.status ?? deriveStatus(index, current);
+        const isCurrent = status === "current";
+        const isLast = index === steps.length - 1;
+        const labelNode = /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-[var(--space-1,0.25rem)]", children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium whitespace-nowrap",
+                isCurrent && "text-foreground",
+                status === "complete" && "text-foreground",
+                status === "upcoming" && "text-muted-foreground",
+                status === "error" && "text-destructive"
+              ),
+              children: [
+                status === "complete" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Completed: " }),
+                status === "error" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Error: " }),
+                step.label
+              ]
+            }
+          ),
+          step.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.description }) : null
+        ] });
+        const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(StepIndicator, { index, status, size }),
+          labelNode
+        ] });
+        return (
+          /*
+           * `aria-current="step"` lives on the <li> itself so screen
+           * readers announce it as part of the listitem's intro
+           * (per WAI guidance for "step" lists), not buried on an
+           * interior span/button.
+           */
+          /* @__PURE__ */ jsxs(
+            "li",
+            {
+              "aria-current": isCurrent ? "step" : void 0,
+              className: cn(
+                stepItem({ orientation }),
+                /*
+                 * Grow only when there's a connector after this step.
+                 * The connector inside takes the extra space via
+                 * `flex-1` so the line spans to the next step.
+                 */
+                !isLast && orientation === "horizontal" && "flex-1",
+                !isLast && orientation === "vertical" && "flex-col"
+              ),
+              children: [
+                interactive ? /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: step.disabled,
+                    onClick: () => onStepClick?.(index),
+                    className: cn(
+                      "flex items-center gap-[var(--space-3,0.75rem)] text-left rounded-md transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                      "disabled:opacity-50 disabled:pointer-events-none"
+                    ),
+                    children: innerContent
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-[var(--space-3,0.75rem)]", children: innerContent }),
+                !isLast ? (
+                  /*
+                   * Connector "complete" iff THIS step is finished. An
+                   * explicit "error" status on the current step never
+                   * fills the gap to the next step — the user hasn't
+                   * cleared this milestone.
+                   */
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: stepConnector({
+                        orientation,
+                        complete: index < current && step.status !== "error"
+                      })
+                    }
+                  )
+                ) : null
+              ]
+            },
+            step.id
+          )
+        );
+      })
+    }
+  );
+}
+Stepper.displayName = "Stepper";
+
+export { Stepper };
+//# sourceMappingURL=stepper.js.map
+//# sourceMappingURL=stepper.js.map

package/dist/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/stepper/stepper.tsx"],"names":[],"mappings":"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","file":"stepper.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\ntype StepStatus = \"complete\" | \"current\" | \"upcoming\" | \"error\";\n\ninterface StepperStep {\n\t/** Stable unique id used as the React key. */\n\tid: string;\n\t/** Step name shown next to the indicator. */\n\tlabel: string;\n\t/** Optional secondary text under the label. */\n\tdescription?: string;\n\t/** Disable the step (only applies when onStepClick is provided). */\n\tdisabled?: boolean;\n\t/**\n\t * Override the index-derived status. Use `\"error\"` to mark a failed step\n\t * (e.g. validation failure in a form wizard); `\"complete\"` / `\"current\"` /\n\t * `\"upcoming\"` are derived from `current` by default.\n\t */\n\tstatus?: StepStatus;\n}\n\nconst stepperRoot = cva(\n\t\"flex w-full gap-[var(--gap-md,1rem)] list-none p-0 m-0\",\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\thorizontal: \"flex-row items-start\",\n\t\t\t\tvertical: \"flex-col items-stretch\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { orientation: \"horizontal\" },\n\t},\n);\n\n/*\n * Horizontal: each step sizes to its content; the connector (`flex-1`) fills\n * the gap between steps. Going `flex-1` on the step item itself would shrink\n * labels to the point of `text-overflow: ellipsis` (\"Account\" → \"A...\").\n * Vertical: items take the full width so multi-line descriptions wrap\n * naturally below the indicator.\n */\nconst stepItem = cva(\"flex gap-[var(--space-3,0.75rem)]\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"flex-row items-center\",\n\t\t\tvertical: \"flex-row items-start w-full\",\n\t\t},\n\t},\n\tdefaultVariants: { orientation: \"horizontal\" },\n});\n\nconst stepIndicator = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-full border-2 font-medium transition-colors duration-[var(--duration-normal,200ms)] ease-out\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"h-7 w-7 text-xs\",\n\t\t\t\tmd: \"h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] text-sm\",\n\t\t\t},\n\t\t\tstatus: {\n\t\t\t\tcomplete: \"bg-primary border-primary text-primary-foreground\",\n\t\t\t\tcurrent: \"bg-background border-primary text-primary\",\n\t\t\t\tupcoming: \"bg-background border-input text-muted-foreground\",\n\t\t\t\terror:\n\t\t\t\t\t\"bg-destructive border-destructive text-destructive-foreground\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { size: \"md\", status: \"upcoming\" },\n\t},\n);\n\nconst stepConnector = cva(\"bg-input transition-colors\", {\n\tvariants: {\n\t\torientation: {\n\t\t\thorizontal: \"h-px flex-1 min-w-[var(--space-6,1.5rem)] mx-[var(--space-2,0.5rem)]\",\n\t\t\tvertical: \"w-px self-stretch ml-[1.0625rem] my-[var(--space-1,0.25rem)] min-h-[var(--space-6,1.5rem)]\",\n\t\t},\n\t\tcomplete: {\n\t\t\ttrue: \"bg-primary\",\n\t\t\tfalse: \"\",\n\t\t},\n\t},\n\tdefaultVariants: { orientation: \"horizontal\", complete: false },\n});\n\ninterface StepperProps\n\textends Omit<\n\t\tReact.HTMLAttributes<HTMLOListElement>,\n\t\t\"aria-label\" | \"onClick\"\n\t> {\n\t/** Ordered list of steps. */\n\tsteps: StepperStep[];\n\t/** Index of the current step (controlled). */\n\tcurrent: number;\n\t/** Layout direction. */\n\torientation?: \"horizontal\" | \"vertical\";\n\t/** Indicator size. */\n\tsize?: \"sm\" | \"md\";\n\t/** When provided, each step is rendered as a clickable button. */\n\tonStepClick?: (index: number) => void;\n\t/** Required accessible name for the ordered list. */\n\t\"aria-label\": string;\n}\n\n/** Map a step index against the current pointer to a `StepStatus`. */\nfunction deriveStatus(index: number, current: number): StepStatus {\n\tif (index < current) return \"complete\";\n\tif (index === current) return \"current\";\n\treturn \"upcoming\";\n}\n\n/** Checkmark glyph rendered inside the indicator for completed steps. */\nfunction StepCheck() {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"3\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"h-4 w-4\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t</svg>\n\t);\n}\n\n/** Cross glyph rendered inside the indicator for steps with status=\"error\". */\nfunction StepError() {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"3\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"h-4 w-4\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n\t\t\t<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n\t\t</svg>\n\t);\n}\n\ninterface StepIndicatorProps {\n\tindex: number;\n\tstatus: StepStatus;\n\tsize: \"sm\" | \"md\";\n}\n\n/** Circular indicator that flips between number, check, and cross by `status`. */\nfunction StepIndicator({ index, status, size }: StepIndicatorProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={stepIndicator({ size, status })}\n\t\t\taria-invalid={status === \"error\" ? true : undefined}\n\t\t>\n\t\t\t{status === \"complete\" ? (\n\t\t\t\t<StepCheck />\n\t\t\t) : status === \"error\" ? (\n\t\t\t\t<StepError />\n\t\t\t) : (\n\t\t\t\tindex + 1\n\t\t\t)}\n\t\t</span>\n\t);\n}\n\n/**\n * Linear progress indicator for multi-step flows (form wizards, onboarding,\n * checkout). Pure semantic HTML — `<ol>` of `<li>` with `aria-current=\"step\"`\n * on the current item; per-step `status` overrides allow marking \"error\".\n *\n * Pass `onStepClick` to make completed/non-disabled steps interactive.\n * @returns An accessible ordered step list.\n */\nfunction Stepper({\n\tsteps,\n\tcurrent,\n\torientation = \"horizontal\",\n\tsize = \"md\",\n\tonStepClick,\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\t...rest\n}: StepperProps) {\n\tconst interactive = typeof onStepClick === \"function\";\n\treturn (\n\t\t<ol\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(stepperRoot({ orientation }), className)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{steps.map((step, index) => {\n\t\t\t\tconst status = step.status ?? deriveStatus(index, current);\n\t\t\t\tconst isCurrent = status === \"current\";\n\t\t\t\tconst isLast = index === steps.length - 1;\n\t\t\t\tconst labelNode = (\n\t\t\t\t\t<span className=\"flex flex-col gap-[var(--space-1,0.25rem)]\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"text-sm font-medium whitespace-nowrap\",\n\t\t\t\t\t\t\t\tisCurrent && \"text-foreground\",\n\t\t\t\t\t\t\t\tstatus === \"complete\" && \"text-foreground\",\n\t\t\t\t\t\t\t\tstatus === \"upcoming\" && \"text-muted-foreground\",\n\t\t\t\t\t\t\t\tstatus === \"error\" && \"text-destructive\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{status === \"complete\" && (\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Completed: </span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{status === \"error\" && (\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Error: </span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{step.label}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{step.description ? (\n\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t{step.description}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</span>\n\t\t\t\t);\n\n\t\t\t\tconst innerContent = (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<StepIndicator index={index} status={status} size={size} />\n\t\t\t\t\t\t{labelNode}\n\t\t\t\t\t</>\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t/*\n\t\t\t\t\t * `aria-current=\"step\"` lives on the <li> itself so screen\n\t\t\t\t\t * readers announce it as part of the listitem's intro\n\t\t\t\t\t * (per WAI guidance for \"step\" lists), not buried on an\n\t\t\t\t\t * interior span/button.\n\t\t\t\t\t */\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={step.id}\n\t\t\t\t\t\taria-current={isCurrent ? \"step\" : undefined}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tstepItem({ orientation }),\n\t\t\t\t\t\t\t/*\n\t\t\t\t\t\t\t * Grow only when there's a connector after this step.\n\t\t\t\t\t\t\t * The connector inside takes the extra space via\n\t\t\t\t\t\t\t * `flex-1` so the line spans to the next step.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t!isLast && orientation === \"horizontal\" && \"flex-1\",\n\t\t\t\t\t\t\t!isLast && orientation === \"vertical\" && \"flex-col\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{interactive ? (\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tdisabled={step.disabled}\n\t\t\t\t\t\t\t\tonClick={() => onStepClick?.(index)}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"flex items-center gap-[var(--space-3,0.75rem)] text-left rounded-md transition-colors duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\t\t\t\"disabled:opacity-50 disabled:pointer-events-none\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{innerContent}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-[var(--space-3,0.75rem)]\">\n\t\t\t\t\t\t\t\t{innerContent}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!isLast ? (\n\t\t\t\t\t\t\t/*\n\t\t\t\t\t\t\t * Connector \"complete\" iff THIS step is finished. An\n\t\t\t\t\t\t\t * explicit \"error\" status on the current step never\n\t\t\t\t\t\t\t * fills the gap to the next step — the user hasn't\n\t\t\t\t\t\t\t * cleared this milestone.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclassName={stepConnector({\n\t\t\t\t\t\t\t\t\torientation,\n\t\t\t\t\t\t\t\t\tcomplete: index < current && step.status !== \"error\",\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\nStepper.displayName = \"Stepper\";\n\nexport { Stepper };\nexport type { StepperProps, StepperStep, StepStatus };\n"]}

package/dist/switch.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+/**
+ * An accessible toggle switch built on Radix UI.
+ * Use for instant on/off settings that take effect immediately.
+ */
+type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/switch.js

@@ -0,0 +1,47 @@
+"use client";
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Switch = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      className: cn(
+        "peer inline-flex h-6 w-[var(--control-height-lg,2.75rem)] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+        "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "shadow-sm",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+        // Unchecked track shares --color-input with form borders (~1.27:1 vs white) so
+        // add an inset ring to make the track visible on flat surfaces.
+        "data-[state=unchecked]:inset-ring-1 data-[state=unchecked]:inset-ring-foreground/[0.08]",
+        "hover:shadow-md",
+        className
+      ),
+      ...props,
+      ref,
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0",
+            "transition-transform duration-[var(--duration-normal,200ms)] ease-out",
+            "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  )
+);
+Switch.displayName = "Switch";
+
+export { Switch };
+//# sourceMappingURL=switch.js.map
+//# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/switch/switch.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACEA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA;AAAA,IAAiB,eAAA,CAAA,IAAA;AAAA,IAAhB;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,yIAAA;AAAA,QACA,iEAAA;AAAA,QACA,WAAA;AAAA,QACA,0IAAA;AAAA,QACA,iDAAA;AAAA,QACA,iEAAA;AAAA;AAAA;AAAA,QAGA,yFAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAiB,eAAA,CAAA,KAAA;AAAA,QAAhB;AAAA,UACA,SAAA,EAAW,EAAA;AAAA,YACV,+EAAA;AAAA,YACA,uEAAA;AAAA,YACA;AAAA;AACD;AAAA;AACD;AAAA;AAGH;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"switch.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * An accessible toggle switch built on Radix UI.\n * Use for instant on/off settings that take effect immediately.\n */\nexport type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;\n\nconst Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n\t({ className, ...props }, ref) => (\n\t\t<SwitchPrimitive.Root\n\t\t\tclassName={cn(\n\t\t\t\t\"peer inline-flex h-6 w-[var(--control-height-lg,2.75rem)] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent\",\n\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"shadow-sm\",\n\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\"data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n\t\t\t\t// Unchecked track shares --color-input with form borders (~1.27:1 vs white) so\n\t\t\t\t// add an inset ring to make the track visible on flat surfaces.\n\t\t\t\t\"data-[state=unchecked]:inset-ring-1 data-[state=unchecked]:inset-ring-foreground/[0.08]\",\n\t\t\t\t\"hover:shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\n\t\t\t<SwitchPrimitive.Thumb\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0\",\n\t\t\t\t\t\"transition-transform duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\"data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</SwitchPrimitive.Root>\n\t),\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch };\n"]}

package/dist/table.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+/** A responsive container + styled HTML table. */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+/** `<thead>` wrapper with bottom border. */
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/** `<tbody>` wrapper removing bottom border on last row. */
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/** `<tfoot>` wrapper with muted background. */
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+/** `<tr>` with hover + selected states. */
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+/** `<th>` with left-aligned muted text. */
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+/** `<td>` with consistent padding. */
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * Visible `<caption>` rendered below the table. The parent `<Table>` sets
+ * `caption-bottom`, so the caption is announced first by screen readers when
+ * entering the table, then visually placed below the rows.
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/table.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/table/table.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Table = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+    "table",
+    {
+      ref,
+      className: cn("w-full caption-bottom text-sm", className),
+      ...props
+    }
+  ) })
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn(
+      "border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("p-[var(--space-4,1rem)] align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn(
+      "caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+//# sourceMappingURL=table.js.map
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/table/table.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACNA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACL,EACD;AAEF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA;AAGpB,IAAM,cAAoB,KAAA,CAAA,UAAA,CAGxB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,yBAC1B,OAAA,EAAA,EAAM,GAAA,EAAU,WAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA,EAAI,GAAG,OAAO,CAC3G;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,YAAkB,KAAA,CAAA,UAAA,CAGtB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,yBAC1B,OAAA,EAAA,EAAM,GAAA,EAAU,WAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,OAAO,CACpF;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAGxB,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,oFAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,QAAA,GAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,sJAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAM,SAAA,GAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,qJAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAGxB,IAAM,SAAA,GAAkB,iBAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,IAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,oEAAA,EAAsE,SAAS,CAAA;AAAA,IAC5F,GAAG;AAAA;AACL,CACA;AACD,SAAA,CAAU,WAAA,GAAc,WAAA;AAOxB,IAAM,YAAA,GAAqB,iBAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,uEAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,YAAA,CAAa,WAAA,GAAc,cAAA","file":"table.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** A responsive container + styled HTML table. */\nconst Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div className=\"relative w-full overflow-auto\">\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"w-full caption-bottom text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t),\n);\nTable.displayName = \"Table\";\n\n/** `<thead>` wrapper with bottom border. */\nconst TableHeader = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<thead ref={ref} className={cn(\"[&_tr]:border-b [&_tr]:border-b-foreground/[0.08]\", className)} {...props} />\n));\nTableHeader.displayName = \"TableHeader\";\n\n/** `<tbody>` wrapper removing bottom border on last row. */\nconst TableBody = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tbody ref={ref} className={cn(\"[&_tr:last-child]:border-0\", className)} {...props} />\n));\nTableBody.displayName = \"TableBody\";\n\n/** `<tfoot>` wrapper with muted background. */\nconst TableFooter = React.forwardRef<\n\tHTMLTableSectionElement,\n\tReact.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tfoot\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"border-t border-t-foreground/[0.08] bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableFooter.displayName = \"TableFooter\";\n\n/** `<tr>` with hover + selected states. */\nconst TableRow = React.forwardRef<\n\tHTMLTableRowElement,\n\tReact.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n\t<tr\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"border-b border-b-foreground/[0.08] transition-all duration-[var(--duration-normal,200ms)] ease-out hover:bg-muted/50 data-[state=selected]:bg-muted\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableRow.displayName = \"TableRow\";\n\n/** `<th>` with left-aligned muted text. */\nconst TableHead = React.forwardRef<\n\tHTMLTableCellElement,\n\tReact.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<th\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"h-[var(--control-height-md,2.5rem)] px-[var(--space-4,1rem)] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableHead.displayName = \"TableHead\";\n\n/** `<td>` with consistent padding. */\nconst TableCell = React.forwardRef<\n\tHTMLTableCellElement,\n\tReact.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<td\n\t\tref={ref}\n\t\tclassName={cn(\"p-[var(--space-4,1rem)] align-middle [&:has([role=checkbox])]:pr-0\", className)}\n\t\t{...props}\n\t/>\n));\nTableCell.displayName = \"TableCell\";\n\n/**\n * Visible `<caption>` rendered below the table. The parent `<Table>` sets\n * `caption-bottom`, so the caption is announced first by screen readers when\n * entering the table, then visually placed below the rows.\n */\nconst TableCaption = React.forwardRef<\n\tHTMLTableCaptionElement,\n\tReact.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"caption-bottom mt-[var(--space-4,1rem)] text-sm text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n"]}

package/dist/tabs.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/** Root container for a tabbed interface. */
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+/** A horizontal list of tab triggers. */
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A clickable tab trigger that activates its associated content panel. */
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** The content panel associated with a tab trigger. */
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/tabs.js

@@ -0,0 +1,57 @@
+"use client";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md border border-foreground/[0.06] bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "ring-offset-background hover:text-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-[var(--space-2,0.5rem)] ring-offset-background",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = "TabsContent";
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,IAAA,GAAqB,aAAA,CAAA;AAG3B,IAAM,QAAA,GAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAe,aAAA,CAAA,IAAA;AAAA,EAAd;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,kLAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAe,aAAA,CAAA,OAAA;AAAA,EAAd;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,6HAAA;AAAA,MACA,iEAAA;AAAA,MACA,8CAAA;AAAA,MACA,qGAAA;AAAA,MACA,kDAAA;AAAA,MACA,qGAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,WAAA,GAAoB,iBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAe,aAAA,CAAA,OAAA;AAAA,EAAd;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,mDAAA;AAAA,MACA,qGAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA","file":"tabs.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a tabbed interface. */\nconst Tabs = TabsPrimitive.Root;\n\n/** A horizontal list of tab triggers. */\nconst TabsList = React.forwardRef<\n\tReact.ComponentRef<typeof TabsPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] items-center justify-center rounded-md border border-foreground/[0.06] bg-muted p-[var(--space-1,0.25rem)] text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsList.displayName = \"TabsList\";\n\n/** A clickable tab trigger that activates its associated content panel. */\nconst TabsTrigger = React.forwardRef<\n\tReact.ComponentRef<typeof TabsPrimitive.Trigger>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"ring-offset-background hover:text-foreground\",\n\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsTrigger.displayName = \"TabsTrigger\";\n\n/** The content panel associated with a tab trigger. */\nconst TabsContent = React.forwardRef<\n\tReact.ComponentRef<typeof TabsPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n\t<TabsPrimitive.Content\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"mt-[var(--space-2,0.5rem)] ring-offset-background\",\n\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n"]}

package/dist/textarea.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+/**
+ * A styled multi-line text input with smooth focus transitions and shadow effects.
+ * Extends the native HTML textarea element with Hex UI styling.
+ */
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/textarea.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/primitives/textarea/textarea.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Textarea = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:shadow-md focus-visible:border-ring/50",
+          "hover:border-ring/30 hover:shadow-md",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };
+//# sourceMappingURL=textarea.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/textarea/textarea.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACDA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACjC,IAAA,uBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,sIAAA;AAAA,UACA,iEAAA;AAAA,UACA,qDAAA;AAAA,UACA,mCAAA;AAAA,UACA,qGAAA;AAAA,UACA,sDAAA;AAAA,UACA,sCAAA;AAAA,UACA,iDAAA;AAAA,UACA;AAAA,SACD;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACL;AAAA,EAEF;AACD;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"textarea.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * A styled multi-line text input with smooth focus transitions and shadow effects.\n * Extends the native HTML textarea element with Hex UI styling.\n */\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<textarea\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex min-h-[80px] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\"placeholder:text-muted-foreground\",\n\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\"focus-visible:shadow-md focus-visible:border-ring/50\",\n\t\t\t\t\t\"hover:border-ring/30 hover:shadow-md\",\n\t\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"]}