@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/switch.js

@@ -0,0 +1,173 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch,
+  switchVariants: () => switchVariants
+});
+module.exports = __toCommonJS(switch_exports);
+var React = __toESM(require("react"));
+var SwitchPrimitive = __toESM(require("@radix-ui/react-switch"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+var import_field = require("./field");
+const switchVariants = (0, import_class_variance_authority.cva)(
+  [
+    "group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
+    "border border-transparent transition-all duration-normal ease-out",
+    "focus-visible:focus-ring",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[state=unchecked]:bg-border"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]",
+        default: "w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]",
+        lg: "w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const thumbSizes = {
+  sm: "w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]",
+  default: "w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]",
+  lg: "w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]"
+};
+const thumbTranslate = {
+  sm: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]",
+  default: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]",
+  lg: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]"
+};
+const gapSizes = {
+  sm: "gap-2",
+  // 8px
+  default: "gap-2.5",
+  // 10px
+  lg: "gap-3"
+  // 12px
+};
+const labelSizes = {
+  sm: "text-xs",
+  // 12px
+  default: "text-md",
+  // 14px
+  lg: "text-base"
+  // 16px
+};
+const checkedTrackColors = {
+  default: "data-[state=checked]:bg-foreground",
+  primary: "data-[state=checked]:bg-primary",
+  success: "data-[state=checked]:bg-success",
+  warning: "data-[state=checked]:bg-warning",
+  error: "data-[state=checked]:bg-error"
+};
+const checkedIconColors = {
+  default: "text-foreground",
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error"
+};
+const iconSizes = {
+  sm: "hidden",
+  // 12px thumb — too small for icons
+  default: "w-2.5 h-2.5",
+  // 10px icon in 16px thumb
+  lg: "w-3.5 h-3.5"
+  // 14px icon in 20px thumb
+};
+const Switch = React.forwardRef(({ className, size, label, labelPosition = "end", startLabel, endLabel, checkedIcon, uncheckedIcon, color = "default", disabled, id, ...props }, ref) => {
+  const fieldContext = (0, import_field.useFieldContext)();
+  const resolvedSize = size || "default";
+  const resolvedDisabled = disabled ?? fieldContext?.disabled;
+  const generatedId = React.useId();
+  const switchId = id ?? fieldContext?.id ?? generatedId;
+  const switchEl = /* @__PURE__ */ React.createElement(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      id: switchId,
+      disabled: resolvedDisabled,
+      className: (0, import_utils.cn)(switchVariants({ size }), checkedTrackColors[color], className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      SwitchPrimitive.Thumb,
+      {
+        className: (0, import_utils.cn)(
+          "group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0",
+          color === "default" ? "bg-background" : "bg-primary-foreground",
+          "transition-transform duration-normal ease-out",
+          "data-[state=unchecked]:translate-x-0",
+          thumbSizes[resolvedSize],
+          thumbTranslate[resolvedSize]
+        )
+      },
+      (checkedIcon || uncheckedIcon) && resolvedSize !== "sm" && /* @__PURE__ */ React.createElement(React.Fragment, null, checkedIcon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(
+        iconSizes[resolvedSize],
+        checkedIconColors[color],
+        "hidden group-data-[state=checked]/thumb:block"
+      ) }, checkedIcon), uncheckedIcon && /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(
+        iconSizes[resolvedSize],
+        "text-text-muted",
+        "hidden group-data-[state=unchecked]/thumb:block"
+      ) }, uncheckedIcon))
+    )
+  );
+  const labelClassName = (0, import_utils.cn)(
+    labelSizes[resolvedSize],
+    "text-text-muted cursor-pointer select-none transition-colors duration-micro",
+    "group-hover/switch:text-foreground",
+    resolvedDisabled && "opacity-50 cursor-not-allowed"
+  );
+  if (startLabel || endLabel) {
+    return /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("group/switch flex items-center", gapSizes[resolvedSize]) }, startLabel && /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, startLabel), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, switchEl), endLabel && /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, endLabel));
+  }
+  if (!label) return switchEl;
+  const isVertical = labelPosition === "top" || labelPosition === "bottom";
+  const isReversed = labelPosition === "start" || labelPosition === "top";
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+    "group/switch flex",
+    isVertical ? "flex-col items-start gap-1.5" : "items-center",
+    isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"),
+    !isVertical && gapSizes[resolvedSize]
+  ) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, switchEl), /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, label));
+});
+Switch.displayName = "Switch";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch,
+  switchVariants
+});
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n  [\n    'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n    'border border-transparent transition-all duration-normal ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'data-[state=unchecked]:bg-border',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n        default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n        lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n  sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n  default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n  lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n  sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n  default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n  lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n  sm: 'gap-2',      // 8px\n  default: 'gap-2.5', // 10px\n  lg: 'gap-3',      // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n  sm: 'text-xs',      // 12px\n  default: 'text-md',  // 14px\n  lg: 'text-base',    // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n  default: 'data-[state=checked]:bg-foreground',\n  primary: 'data-[state=checked]:bg-primary',\n  success: 'data-[state=checked]:bg-success',\n  warning: 'data-[state=checked]:bg-warning',\n  error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n  default: 'text-foreground',\n  primary: 'text-primary',\n  success: 'text-success',\n  warning: 'text-warning',\n  error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n  sm: 'hidden',            // 12px thumb — too small for icons\n  default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n  lg: 'w-3.5 h-3.5',      // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {\n  label?: string\n  labelPosition?: SwitchLabelPosition\n  startLabel?: string\n  endLabel?: string\n  checkedIcon?: React.ReactNode\n  uncheckedIcon?: React.ReactNode\n  color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  const switchId = id ?? fieldContext?.id ?? generatedId\n\n  const switchEl = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      id={switchId}\n      disabled={resolvedDisabled}\n      className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n          color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n          'transition-transform duration-normal ease-out',\n          'data-[state=unchecked]:translate-x-0',\n          thumbSizes[resolvedSize],\n          thumbTranslate[resolvedSize]\n        )}\n      >\n        {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n          <>\n            {checkedIcon && (\n              <span className={cn(\n                iconSizes[resolvedSize],\n                checkedIconColors[color],\n                'hidden group-data-[state=checked]/thumb:block',\n              )}>\n                {checkedIcon}\n              </span>\n            )}\n            {uncheckedIcon && (\n              <span className={cn(\n                iconSizes[resolvedSize],\n                'text-text-muted',\n                'hidden group-data-[state=unchecked]/thumb:block',\n              )}>\n                {uncheckedIcon}\n              </span>\n            )}\n          </>\n        )}\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n\n  const labelClassName = cn(\n    labelSizes[resolvedSize],\n    'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n    'group-hover/switch:text-foreground',\n    resolvedDisabled && 'opacity-50 cursor-not-allowed'\n  )\n\n  // Sides mode: startLabel / endLabel\n  if (startLabel || endLabel) {\n    return (\n      <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n        {startLabel && (\n          <label htmlFor={switchId} className={labelClassName}>\n            {startLabel}\n          </label>\n        )}\n        <div className=\"flex items-center\">\n          {switchEl}\n        </div>\n        {endLabel && (\n          <label htmlFor={switchId} className={labelClassName}>\n            {endLabel}\n          </label>\n        )}\n      </div>\n    )\n  }\n\n  if (!label) return switchEl\n\n  const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n  const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n  return (\n    <div className={cn(\n      'group/switch flex',\n      isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n      isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n      !isVertical && gapSizes[resolvedSize],\n    )}>\n      <div className=\"flex items-center\">\n        {switchEl}\n      </div>\n      <label htmlFor={switchId} className={labelClassName}>\n        {label}\n      </label>\n    </div>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sBAAiC;AACjC,sCAAuC;AACvC,mBAAmB;AACnB,mBAAgC;AAGhC,MAAM,qBAAiB;AAAA,EACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAGA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAGA,MAAM,WAAW;AAAA,EACf,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAMA,MAAM,qBAAkD;AAAA,EACtD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,oBAAiD;AAAA,EACrD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAGA,MAAM,YAAY;AAAA,EAChB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAcA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,gBAAgB,OAAO,YAAY,UAAU,aAAa,eAAe,QAAQ,WAAW,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AACzJ,QAAM,mBAAe,8BAAgB;AACrC,QAAM,eAAe,QAAQ;AAC7B,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,cAAc,MAAM,MAAM;AAChC,QAAM,WAAW,MAAM,cAAc,MAAM;AAE3C,QAAM,WACJ;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,eAAW,iBAAG,eAAe,EAAE,KAAK,CAAC,GAAG,mBAAmB,KAAK,GAAG,SAAS;AAAA,MAC3E,GAAG;AAAA;AAAA,IAEJ;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,UAAU,YAAY,kBAAkB;AAAA,UACxC;AAAA,UACA;AAAA,UACA,WAAW,YAAY;AAAA,UACvB,eAAe,YAAY;AAAA,QAC7B;AAAA;AAAA,OAEE,eAAe,kBAAkB,iBAAiB,QAClD,0DACG,eACC,oCAAC,UAAK,eAAW;AAAA,QACf,UAAU,YAAY;AAAA,QACtB,kBAAkB,KAAK;AAAA,QACvB;AAAA,MACF,KACG,WACH,GAED,iBACC,oCAAC,UAAK,eAAW;AAAA,QACf,UAAU,YAAY;AAAA,QACtB;AAAA,QACA;AAAA,MACF,KACG,aACH,CAEJ;AAAA,IAEJ;AAAA,EACF;AAGF,QAAM,qBAAiB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,EACtB;AAGA,MAAI,cAAc,UAAU;AAC1B,WACE,oCAAC,SAAI,eAAW,iBAAG,kCAAkC,SAAS,YAAY,CAAC,KACxE,cACC,oCAAC,WAAM,SAAS,UAAU,WAAW,kBAClC,UACH,GAEF,oCAAC,SAAI,WAAU,uBACZ,QACH,GACC,YACC,oCAAC,WAAM,SAAS,UAAU,WAAW,kBAClC,QACH,CAEJ;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,aAAa,kBAAkB,SAAS,kBAAkB;AAChE,QAAM,aAAa,kBAAkB,WAAW,kBAAkB;AAElE,SACE,oCAAC,SAAI,eAAW;AAAA,IACd;AAAA,IACA,aAAa,iCAAiC;AAAA,IAC9C,eAAe,aAAa,qBAAqB;AAAA,IACjD,CAAC,cAAc,SAAS,YAAY;AAAA,EACtC,KACE,oCAAC,SAAI,WAAU,uBACZ,QACH,GACA,oCAAC,WAAM,SAAS,UAAU,WAAW,kBAClC,KACH,CACF;AAEJ,CAAC;AACD,OAAO,cAAc;","names":[]}

package/dist/components/ui/switch.mjs

@@ -0,0 +1,138 @@
+"use client";
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { useFieldContext } from "./field";
+const switchVariants = cva(
+  [
+    "group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
+    "border border-transparent transition-all duration-normal ease-out",
+    "focus-visible:focus-ring",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[state=unchecked]:bg-border"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]",
+        default: "w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]",
+        lg: "w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+const thumbSizes = {
+  sm: "w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]",
+  default: "w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]",
+  lg: "w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]"
+};
+const thumbTranslate = {
+  sm: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]",
+  default: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]",
+  lg: "data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]"
+};
+const gapSizes = {
+  sm: "gap-2",
+  // 8px
+  default: "gap-2.5",
+  // 10px
+  lg: "gap-3"
+  // 12px
+};
+const labelSizes = {
+  sm: "text-xs",
+  // 12px
+  default: "text-md",
+  // 14px
+  lg: "text-base"
+  // 16px
+};
+const checkedTrackColors = {
+  default: "data-[state=checked]:bg-foreground",
+  primary: "data-[state=checked]:bg-primary",
+  success: "data-[state=checked]:bg-success",
+  warning: "data-[state=checked]:bg-warning",
+  error: "data-[state=checked]:bg-error"
+};
+const checkedIconColors = {
+  default: "text-foreground",
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error"
+};
+const iconSizes = {
+  sm: "hidden",
+  // 12px thumb — too small for icons
+  default: "w-2.5 h-2.5",
+  // 10px icon in 16px thumb
+  lg: "w-3.5 h-3.5"
+  // 14px icon in 20px thumb
+};
+const Switch = React.forwardRef(({ className, size, label, labelPosition = "end", startLabel, endLabel, checkedIcon, uncheckedIcon, color = "default", disabled, id, ...props }, ref) => {
+  const fieldContext = useFieldContext();
+  const resolvedSize = size || "default";
+  const resolvedDisabled = disabled ?? fieldContext?.disabled;
+  const generatedId = React.useId();
+  const switchId = id ?? fieldContext?.id ?? generatedId;
+  const switchEl = /* @__PURE__ */ React.createElement(
+    SwitchPrimitive.Root,
+    {
+      ref,
+      id: switchId,
+      disabled: resolvedDisabled,
+      className: cn(switchVariants({ size }), checkedTrackColors[color], className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      SwitchPrimitive.Thumb,
+      {
+        className: cn(
+          "group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0",
+          color === "default" ? "bg-background" : "bg-primary-foreground",
+          "transition-transform duration-normal ease-out",
+          "data-[state=unchecked]:translate-x-0",
+          thumbSizes[resolvedSize],
+          thumbTranslate[resolvedSize]
+        )
+      },
+      (checkedIcon || uncheckedIcon) && resolvedSize !== "sm" && /* @__PURE__ */ React.createElement(React.Fragment, null, checkedIcon && /* @__PURE__ */ React.createElement("span", { className: cn(
+        iconSizes[resolvedSize],
+        checkedIconColors[color],
+        "hidden group-data-[state=checked]/thumb:block"
+      ) }, checkedIcon), uncheckedIcon && /* @__PURE__ */ React.createElement("span", { className: cn(
+        iconSizes[resolvedSize],
+        "text-text-muted",
+        "hidden group-data-[state=unchecked]/thumb:block"
+      ) }, uncheckedIcon))
+    )
+  );
+  const labelClassName = cn(
+    labelSizes[resolvedSize],
+    "text-text-muted cursor-pointer select-none transition-colors duration-micro",
+    "group-hover/switch:text-foreground",
+    resolvedDisabled && "opacity-50 cursor-not-allowed"
+  );
+  if (startLabel || endLabel) {
+    return /* @__PURE__ */ React.createElement("div", { className: cn("group/switch flex items-center", gapSizes[resolvedSize]) }, startLabel && /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, startLabel), /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, switchEl), endLabel && /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, endLabel));
+  }
+  if (!label) return switchEl;
+  const isVertical = labelPosition === "top" || labelPosition === "bottom";
+  const isReversed = labelPosition === "start" || labelPosition === "top";
+  return /* @__PURE__ */ React.createElement("div", { className: cn(
+    "group/switch flex",
+    isVertical ? "flex-col items-start gap-1.5" : "items-center",
+    isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"),
+    !isVertical && gapSizes[resolvedSize]
+  ) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, switchEl), /* @__PURE__ */ React.createElement("label", { htmlFor: switchId, className: labelClassName }, label));
+});
+Switch.displayName = "Switch";
+export {
+  Switch,
+  switchVariants
+};
+//# sourceMappingURL=switch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Switch track variants\nconst switchVariants = cva(\n  [\n    'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n    'border border-transparent transition-all duration-normal ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'data-[state=unchecked]:bg-border',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-[var(--component-switch-track-sm-width)] h-[var(--component-switch-track-sm-height)]',\n        default: 'w-[var(--component-switch-track-default-width)] h-[var(--component-switch-track-default-height)]',\n        lg: 'w-[var(--component-switch-track-lg-width)] h-[var(--component-switch-track-lg-height)]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n)\n\n// Thumb sizes\nconst thumbSizes = {\n  sm: 'w-[var(--component-switch-thumb-sm)] h-[var(--component-switch-thumb-sm)]',\n  default: 'w-[var(--component-switch-thumb-default)] h-[var(--component-switch-thumb-default)]',\n  lg: 'w-[var(--component-switch-thumb-lg)] h-[var(--component-switch-thumb-lg)]',\n}\n\n// Thumb translate when checked: track_width - thumb_size - 2px (border 1px × 2)\nconst thumbTranslate = {\n  sm: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-sm-width)_-_var(--component-switch-thumb-sm)_-_2px)]',\n  default: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-default-width)_-_var(--component-switch-thumb-default)_-_2px)]',\n  lg: 'data-[state=checked]:translate-x-[calc(var(--component-switch-track-lg-width)_-_var(--component-switch-thumb-lg)_-_2px)]',\n}\n\n// Gap between switch and label\nconst gapSizes = {\n  sm: 'gap-2',      // 8px\n  default: 'gap-2.5', // 10px\n  lg: 'gap-3',      // 12px\n}\n\n// Label font sizes\nconst labelSizes = {\n  sm: 'text-xs',      // 12px\n  default: 'text-md',  // 14px\n  lg: 'text-base',    // 16px\n}\n\nexport type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom'\nexport type SwitchColor = 'default' | 'primary' | 'success' | 'warning' | 'error'\n\n// Checked track color per color variant\nconst checkedTrackColors: Record<SwitchColor, string> = {\n  default: 'data-[state=checked]:bg-foreground',\n  primary: 'data-[state=checked]:bg-primary',\n  success: 'data-[state=checked]:bg-success',\n  warning: 'data-[state=checked]:bg-warning',\n  error: 'data-[state=checked]:bg-error',\n}\n\n// Checked icon color per color variant\nconst checkedIconColors: Record<SwitchColor, string> = {\n  default: 'text-foreground',\n  primary: 'text-primary',\n  success: 'text-success',\n  warning: 'text-warning',\n  error: 'text-error',\n}\n\n// Icon sizes per thumb size\nconst iconSizes = {\n  sm: 'hidden',            // 12px thumb — too small for icons\n  default: 'w-2.5 h-2.5', // 10px icon in 16px thumb\n  lg: 'w-3.5 h-3.5',      // 14px icon in 20px thumb\n}\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {\n  label?: string\n  labelPosition?: SwitchLabelPosition\n  startLabel?: string\n  endLabel?: string\n  checkedIcon?: React.ReactNode\n  uncheckedIcon?: React.ReactNode\n  color?: SwitchColor\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, size, label, labelPosition = 'end', startLabel, endLabel, checkedIcon, uncheckedIcon, color = 'default', disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  const switchId = id ?? fieldContext?.id ?? generatedId\n\n  const switchEl = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      id={switchId}\n      disabled={resolvedDisabled}\n      className={cn(switchVariants({ size }), checkedTrackColors[color], className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          'group/thumb pointer-events-none flex items-center justify-center rounded-full shadow-sm ring-0',\n          color === 'default' ? 'bg-background' : 'bg-primary-foreground',\n          'transition-transform duration-normal ease-out',\n          'data-[state=unchecked]:translate-x-0',\n          thumbSizes[resolvedSize],\n          thumbTranslate[resolvedSize]\n        )}\n      >\n        {(checkedIcon || uncheckedIcon) && resolvedSize !== 'sm' && (\n          <>\n            {checkedIcon && (\n              <span className={cn(\n                iconSizes[resolvedSize],\n                checkedIconColors[color],\n                'hidden group-data-[state=checked]/thumb:block',\n              )}>\n                {checkedIcon}\n              </span>\n            )}\n            {uncheckedIcon && (\n              <span className={cn(\n                iconSizes[resolvedSize],\n                'text-text-muted',\n                'hidden group-data-[state=unchecked]/thumb:block',\n              )}>\n                {uncheckedIcon}\n              </span>\n            )}\n          </>\n        )}\n      </SwitchPrimitive.Thumb>\n    </SwitchPrimitive.Root>\n  )\n\n  const labelClassName = cn(\n    labelSizes[resolvedSize],\n    'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n    'group-hover/switch:text-foreground',\n    resolvedDisabled && 'opacity-50 cursor-not-allowed'\n  )\n\n  // Sides mode: startLabel / endLabel\n  if (startLabel || endLabel) {\n    return (\n      <div className={cn('group/switch flex items-center', gapSizes[resolvedSize])}>\n        {startLabel && (\n          <label htmlFor={switchId} className={labelClassName}>\n            {startLabel}\n          </label>\n        )}\n        <div className=\"flex items-center\">\n          {switchEl}\n        </div>\n        {endLabel && (\n          <label htmlFor={switchId} className={labelClassName}>\n            {endLabel}\n          </label>\n        )}\n      </div>\n    )\n  }\n\n  if (!label) return switchEl\n\n  const isVertical = labelPosition === 'top' || labelPosition === 'bottom'\n  const isReversed = labelPosition === 'start' || labelPosition === 'top'\n\n  return (\n    <div className={cn(\n      'group/switch flex',\n      isVertical ? 'flex-col items-start gap-1.5' : 'items-center',\n      isReversed && (isVertical ? 'flex-col-reverse' : 'flex-row-reverse'),\n      !isVertical && gapSizes[resolvedSize],\n    )}>\n      <div className=\"flex items-center\">\n        {switchEl}\n      </div>\n      <label htmlFor={switchId} className={labelClassName}>\n        {label}\n      </label>\n    </div>\n  )\n})\nSwitch.displayName = 'Switch'\n\nexport { Switch, switchVariants }\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,74 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type TableSize = 'sm' | 'default' | 'lg';
+type TableVariant = 'default' | 'bordered' | 'striped';
+declare const tableVariants: (props?: ({
+    variant?: "default" | "bordered" | "striped" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
+    /** Table density */
+    size?: TableSize;
+    /** Visual style */
+    variant?: TableVariant;
+    /** Sticky header when scrolling */
+    stickyHeader?: boolean;
+    /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */
+    wrapperClassName?: string;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Enable hover highlight */
+    interactive?: boolean;
+    /** Selected state background */
+    selected?: boolean;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+type SortDirection = 'asc' | 'desc' | null;
+interface SortIconSet {
+    /** Icon for ascending state */
+    asc?: React.ReactNode;
+    /** Icon for descending state */
+    desc?: React.ReactNode;
+    /** Icon for unsorted (default) state */
+    default?: React.ReactNode;
+}
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable sort indicator */
+    sortable?: boolean;
+    /** Current sort direction */
+    sortDirection?: SortDirection;
+    /** Sort click handler */
+    onSort?: () => void;
+    /** Custom sort icons (overrides built-in icons) */
+    sortIcon?: SortIconSet;
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> & {
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Row: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    Head: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+    Cell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+};
+declare namespace Table {
+    type RowProps = TableRowProps;
+    type HeadProps = TableHeadProps;
+    type CellProps = TableCellProps;
+}
+
+export { type SortDirection, type SortIconSet, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant };

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

@@ -0,0 +1,74 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+type TableSize = 'sm' | 'default' | 'lg';
+type TableVariant = 'default' | 'bordered' | 'striped';
+declare const tableVariants: (props?: ({
+    variant?: "default" | "bordered" | "striped" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TableProps extends React.HTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
+    /** Table density */
+    size?: TableSize;
+    /** Visual style */
+    variant?: TableVariant;
+    /** Sticky header when scrolling */
+    stickyHeader?: boolean;
+    /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */
+    wrapperClassName?: string;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Enable hover highlight */
+    interactive?: boolean;
+    /** Selected state background */
+    selected?: boolean;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+type SortDirection = 'asc' | 'desc' | null;
+interface SortIconSet {
+    /** Icon for ascending state */
+    asc?: React.ReactNode;
+    /** Icon for descending state */
+    desc?: React.ReactNode;
+    /** Icon for unsorted (default) state */
+    default?: React.ReactNode;
+}
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Enable sort indicator */
+    sortable?: boolean;
+    /** Current sort direction */
+    sortDirection?: SortDirection;
+    /** Sort click handler */
+    onSort?: () => void;
+    /** Custom sort icons (overrides built-in icons) */
+    sortIcon?: SortIconSet;
+}
+declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> & {
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+    Row: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    Head: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+    Cell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+};
+declare namespace Table {
+    type RowProps = TableRowProps;
+    type HeadProps = TableHeadProps;
+    type CellProps = TableCellProps;
+}
+
+export { type SortDirection, type SortIconSet, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant };