@karakuri-ui/react 0.3.2 → 0.3.4

package/dist/components/ui/field.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -23,24 +24,24 @@ const fieldVariants = cva("flex flex-col", {
 const Field = React.forwardRef(
   ({ className, gap, error, disabled, children, ...props }, ref) => {
     const id = React.useId();
-    return /* @__PURE__ */ React.createElement(FieldContext.Provider, { value: { id, error, disabled } }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, error, disabled }, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         className: cn(fieldVariants({ gap }), className),
         "data-error": error || void 0,
         "data-disabled": disabled || void 0,
-        ...props
-      },
-      children
-    ));
+        ...props,
+        children
+      }
+    ) });
   }
 );
 Field.displayName = "Field";
 const FieldLabel = React.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     const context = useFieldContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "label",
       {
         ref,
@@ -51,10 +52,12 @@ const FieldLabel = React.forwardRef(
           context?.disabled && "opacity-50 cursor-not-allowed",
           className
         ),
-        ...props
-      },
-      children,
-      required && /* @__PURE__ */ React.createElement("span", { className: "text-error ml-0.5" }, "*")
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx("span", { className: "text-error ml-0.5", children: "*" })
+        ]
+      }
     );
   }
 );
@@ -62,22 +65,22 @@ FieldLabel.displayName = "FieldLabel";
 const FieldError = React.forwardRef(({ className, children, ...props }, ref) => {
   const context = useFieldContext();
   if (!children) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "p",
     {
       ref,
       id: context ? `${context.id}-error` : void 0,
       role: "alert",
       className: cn("text-xs text-error pl-1", className),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 });
 FieldError.displayName = "FieldError";
 const FieldCharCount = React.forwardRef(({ className, ...props }, ref) => {
   const context = useFieldContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "p",
     {
       ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  error?: boolean\n  disabled?: boolean\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FieldContext.Provider value={{ id, error, disabled }}>\n        <div\n          ref={ref}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={context?.id}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AASnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AAGA,MAAM,gBAAgB,IAAI,iBAAiB;AAAA,EACzC,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;AASD,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,KAAK,MAAM,MAAM;AAEvB,WACE,oCAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,IAAI,OAAO,SAAS,KAClD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,cAAc,EAAE,IAAI,CAAC,GAAG,SAAS;AAAA,QAC/C,cAAY,SAAS;AAAA,QACrB,iBAAe,YAAY;AAAA,QAC1B,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAOpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,UAAM,UAAU,gBAAgB;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,SAAS;AAAA,QAClB,WAAW;AAAA,UACT;AAAA;AAAA,UACA,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,MACA,YAAY,oCAAC,UAAK,WAAU,uBAAoB,GAAC;AAAA,IACpD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,WAAW;AAAA,MACtC,MAAK;AAAA,MACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AACD,WAAW,cAAc;AAGzB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,eAAe;AAAA,MAC1C,WAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  error?: boolean\n  disabled?: boolean\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FieldContext.Provider value={{ id, error, disabled }}>\n        <div\n          ref={ref}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={context?.id}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }\n"],"mappings":";AAgDQ,cAyBF,YAzBE;AA9CR,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AASnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AAGA,MAAM,gBAAgB,IAAI,iBAAiB;AAAA,EACzC,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;AASD,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,KAAK,MAAM,MAAM;AAEvB,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,IAAI,OAAO,SAAS,GAClD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,cAAc,EAAE,IAAI,CAAC,GAAG,SAAS;AAAA,QAC/C,cAAY,SAAS;AAAA,QACrB,iBAAe,YAAY;AAAA,QAC1B,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAOpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,UAAM,UAAU,gBAAgB;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,SAAS;AAAA,QAClB,WAAW;AAAA,UACT;AAAA;AAAA,UACA,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YAAY,oBAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,WAAW;AAAA,MACtC,MAAK;AAAA,MACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,WAAW,cAAc;AAGzB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,eAAe;AAAA,MAC1C,WAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}

package/dist/components/ui/icon-button.js

@@ -33,6 +33,7 @@ __export(icon_button_exports, {
   iconButtonVariants: () => iconButtonVariants
 });
 module.exports = __toCommonJS(icon_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
@@ -115,26 +116,28 @@ const IconButton = React.forwardRef(
       lg: "icon-lg"
       // 24px
     }[size || "default"];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Comp,
       {
         className: (0, import_utils.cn)(iconButtonVariants({ variant, size, radius }), variant === "solid" && solidColorMap[color], pressEffect !== false && "active:scale-pressed", className),
         ref,
         disabled: disabled || loading,
         "aria-busy": loading || void 0,
-        ...props
-      },
-      loading ? /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: (0, import_utils.cn)(iconSize, "animate-spin"),
-          fill: "none",
-          viewBox: "0 0 24 24",
-          "aria-hidden": "true"
-        },
-        /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-      ) : /* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, children)
+        ...props,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            className: (0, import_utils.cn)(iconSize, "animate-spin"),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+            ]
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_utils.cn)(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children })
+      }
     );
   }
 );

package/dist/components/ui/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n  'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n        ghost: 'text-foreground hover:bg-background-muted',\n        subtle: 'text-text-muted hover:text-foreground',\n      },\n      size: {\n        xs: 'h-7 w-7',      // 28px - spacing.7\n        sm: 'h-8 w-8',      // 32px - spacing.8\n        md: 'h-9 w-9',      // 36px - spacing.9\n        default: 'h-10 w-10', // 40px - spacing.10\n        lg: 'h-12 w-12',    // 48px - spacing.12\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n    },\n  }\n)\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButtonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n    const groupContext = useButtonGroup()\n\n    // Priority: direct prop > ButtonGroup context > variant default\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    const Comp = asChild ? Slot : 'button'\n\n    // Icon size for icon-only button (5-step scale)\n    // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n    const iconSize = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-sm',      // 16px\n      md: 'icon-sm',      // 16px\n      default: 'icon-md', // 20px\n      lg: 'icon-lg',      // 24px\n    }[size || 'default']\n\n    return (\n      <Comp\n        className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? (\n          <svg\n            className={cn(iconSize, 'animate-spin')}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n        ) : (\n          <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n      </Comp>\n    )\n  }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAqB;AACrB,sCAAuC;AACvC,mBAAmB;AACnB,0BAA+B;AAK/B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEA,MAAM,yBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAYA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,aAAa,OAAO,WAAW,MAAM,UAAU,QAAQ,YAAY,UAAU,OAAO,SAAS,aAAa,UAAU,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACrL,UAAM,mBAAe,oCAAe;AAGpC,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY,cAAc;AACvC,UAAM,SAAS,cAAc,cAAc;AAC3C,UAAM,WAAW,gBAAgB,cAAc;AAE/C,UAAM,OAAO,UAAU,yBAAO;AAI9B,UAAM,WAAW;AAAA,MACf,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,IACN,EAAE,QAAQ,SAAS;AAEnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,YAAY,WAAW,cAAc,KAAK,GAAG,gBAAgB,SAAS,wBAAwB,SAAS;AAAA,QACpK;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACrB,GAAG;AAAA;AAAA,MAEH,UACC;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,UAAU,cAAc;AAAA,UACtC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,eAAY;AAAA;AAAA,QAEZ,oCAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F,oCAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA,MACvK,IAEA,oCAAC,UAAK,eAAW,iBAAG,UAAU,+BAA+B,GAAG,eAAY,UACzE,QACH;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n  'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n        ghost: 'text-foreground hover:bg-background-muted',\n        subtle: 'text-text-muted hover:text-foreground',\n      },\n      size: {\n        xs: 'h-7 w-7',      // 28px - spacing.7\n        sm: 'h-8 w-8',      // 32px - spacing.8\n        md: 'h-9 w-9',      // 36px - spacing.9\n        default: 'h-10 w-10', // 40px - spacing.10\n        lg: 'h-12 w-12',    // 48px - spacing.12\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n    },\n  }\n)\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButtonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n    const groupContext = useButtonGroup()\n\n    // Priority: direct prop > ButtonGroup context > variant default\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    const Comp = asChild ? Slot : 'button'\n\n    // Icon size for icon-only button (5-step scale)\n    // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n    const iconSize = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-sm',      // 16px\n      md: 'icon-sm',      // 16px\n      default: 'icon-md', // 20px\n      lg: 'icon-lg',      // 24px\n    }[size || 'default']\n\n    return (\n      <Comp\n        className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? (\n          <svg\n            className={cn(iconSize, 'animate-spin')}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n        ) : (\n          <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n      </Comp>\n    )\n  }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiGU;AA/FV,YAAuB;AACvB,wBAAqB;AACrB,sCAAuC;AACvC,mBAAmB;AACnB,0BAA+B;AAK/B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEA,MAAM,yBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAYA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,aAAa,OAAO,WAAW,MAAM,UAAU,QAAQ,YAAY,UAAU,OAAO,SAAS,aAAa,UAAU,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACrL,UAAM,mBAAe,oCAAe;AAGpC,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY,cAAc;AACvC,UAAM,SAAS,cAAc,cAAc;AAC3C,UAAM,WAAW,gBAAgB,cAAc;AAE/C,UAAM,OAAO,UAAU,yBAAO;AAI9B,UAAM,WAAW;AAAA,MACf,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,IACN,EAAE,QAAQ,SAAS;AAEnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,YAAY,WAAW,cAAc,KAAK,GAAG,gBAAgB,SAAS,wBAAwB,SAAS;AAAA,QACpK;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACrB,GAAG;AAAA,QAEH,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,iBAAG,UAAU,cAAc;AAAA,YACtC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,eAAY;AAAA,YAEZ;AAAA,0DAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,cAC5F,4CAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA;AAAA;AAAA,QACvK,IAEA,4CAAC,UAAK,eAAW,iBAAG,UAAU,+BAA+B,GAAG,eAAY,QACzE,UACH;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/components/ui/icon-button.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
@@ -81,26 +82,28 @@ const IconButton = React.forwardRef(
       lg: "icon-lg"
       // 24px
     }[size || "default"];
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Comp,
       {
         className: cn(iconButtonVariants({ variant, size, radius }), variant === "solid" && solidColorMap[color], pressEffect !== false && "active:scale-pressed", className),
         ref,
         disabled: disabled || loading,
         "aria-busy": loading || void 0,
-        ...props
-      },
-      loading ? /* @__PURE__ */ React.createElement(
-        "svg",
-        {
-          className: cn(iconSize, "animate-spin"),
-          fill: "none",
-          viewBox: "0 0 24 24",
-          "aria-hidden": "true"
-        },
-        /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-      ) : /* @__PURE__ */ React.createElement("span", { className: cn(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true" }, children)
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: cn(iconSize, "animate-spin"),
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cn(iconSize, "[&>svg]:w-full [&>svg]:h-full"), "aria-hidden": "true", children })
+      }
     );
   }
 );

package/dist/components/ui/icon-button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n  'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n        ghost: 'text-foreground hover:bg-background-muted',\n        subtle: 'text-text-muted hover:text-foreground',\n      },\n      size: {\n        xs: 'h-7 w-7',      // 28px - spacing.7\n        sm: 'h-8 w-8',      // 32px - spacing.8\n        md: 'h-9 w-9',      // 36px - spacing.9\n        default: 'h-10 w-10', // 40px - spacing.10\n        lg: 'h-12 w-12',    // 48px - spacing.12\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n    },\n  }\n)\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButtonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n    const groupContext = useButtonGroup()\n\n    // Priority: direct prop > ButtonGroup context > variant default\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    const Comp = asChild ? Slot : 'button'\n\n    // Icon size for icon-only button (5-step scale)\n    // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n    const iconSize = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-sm',      // 16px\n      md: 'icon-sm',      // 16px\n      default: 'icon-md', // 20px\n      lg: 'icon-lg',      // 24px\n    }[size || 'default']\n\n    return (\n      <Comp\n        className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? (\n          <svg\n            className={cn(iconSize, 'animate-spin')}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n        ) : (\n          <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n      </Comp>\n    )\n  }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAK/B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAYA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,aAAa,OAAO,WAAW,MAAM,UAAU,QAAQ,YAAY,UAAU,OAAO,SAAS,aAAa,UAAU,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACrL,UAAM,eAAe,eAAe;AAGpC,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY,cAAc;AACvC,UAAM,SAAS,cAAc,cAAc;AAC3C,UAAM,WAAW,gBAAgB,cAAc;AAE/C,UAAM,OAAO,UAAU,OAAO;AAI9B,UAAM,WAAW;AAAA,MACf,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,IACN,EAAE,QAAQ,SAAS;AAEnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,YAAY,WAAW,cAAc,KAAK,GAAG,gBAAgB,SAAS,wBAAwB,SAAS;AAAA,QACpK;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACrB,GAAG;AAAA;AAAA,MAEH,UACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,UAAU,cAAc;AAAA,UACtC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,eAAY;AAAA;AAAA,QAEZ,oCAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,QAC5F,oCAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA,MACvK,IAEA,oCAAC,UAAK,WAAW,GAAG,UAAU,+BAA+B,GAAG,eAAY,UACzE,QACH;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useButtonGroup } from './button-group'\n\nimport { type ButtonColor } from './button'\n\n// Solid color maps (same as Button)\nconst solidColorMap = {\n  default: 'bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80',\n  primary: 'bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active',\n  secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active',\n  destructive: 'bg-error text-error-foreground hover:bg-error-hover active:bg-error-active',\n} as const\n\nconst iconButtonVariants = cva(\n  'inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border border-border-form bg-background text-foreground hover:bg-background-muted',\n        ghost: 'text-foreground hover:bg-background-muted',\n        subtle: 'text-text-muted hover:text-foreground',\n      },\n      size: {\n        xs: 'h-7 w-7',      // 28px - spacing.7\n        sm: 'h-8 w-8',      // 32px - spacing.8\n        md: 'h-9 w-9',      // 36px - spacing.9\n        default: 'h-10 w-10', // 40px - spacing.10\n        lg: 'h-12 w-12',    // 48px - spacing.12\n      },\n      radius: {\n        none: 'rounded-none',      // 0px - primitive.borderRadius.none\n        sm: 'rounded-sm',          // 2px - primitive.borderRadius.sm\n        base: 'rounded',           // 4px - primitive.borderRadius.base\n        default: 'rounded-md',     // 6px - primitive.borderRadius.md (Figma button default)\n        lg: 'rounded-lg',          // 8px - primitive.borderRadius.lg\n        xl: 'rounded-xl',          // 12px - primitive.borderRadius.xl\n        '2xl': 'rounded-2xl',      // 16px - primitive.borderRadius.2xl\n        '3xl': 'rounded-3xl',      // 24px - primitive.borderRadius.3xl\n        full: 'rounded-full',      // 9999px - primitive.borderRadius.full\n      },\n    },\n    defaultVariants: {\n      variant: 'solid',\n      size: 'default',\n      radius: 'default',\n    },\n  }\n)\n\nexport interface IconButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButtonVariants> {\n  /** Solid variant color */\n  color?: ButtonColor\n  asChild?: boolean\n  loading?: boolean\n  pressEffect?: boolean\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {\n    const groupContext = useButtonGroup()\n\n    // Priority: direct prop > ButtonGroup context > variant default\n    const variant = variantProp ?? groupContext?.variant ?? 'solid'\n    const color = colorProp ?? 'default'\n    const size = sizeProp ?? groupContext?.size\n    const radius = radiusProp ?? groupContext?.radius\n    const disabled = disabledProp ?? groupContext?.disabled\n\n    const Comp = asChild ? Slot : 'button'\n\n    // Icon size for icon-only button (5-step scale)\n    // XS: 14px, SM~MD: 16px, Default: 20px, LG: 24px\n    const iconSize = {\n      xs: 'icon-xs',      // 14px\n      sm: 'icon-sm',      // 16px\n      md: 'icon-sm',      // 16px\n      default: 'icon-md', // 20px\n      lg: 'icon-lg',      // 24px\n    }[size || 'default']\n\n    return (\n      <Comp\n        className={cn(iconButtonVariants({ variant, size, radius }), variant === 'solid' && solidColorMap[color], pressEffect !== false && 'active:scale-pressed', className)}\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {loading ? (\n          <svg\n            className={cn(iconSize, 'animate-spin')}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n        ) : (\n          <span className={cn(iconSize, '[&>svg]:w-full [&>svg]:h-full')} aria-hidden=\"true\">\n            {children}\n          </span>\n        )}\n      </Comp>\n    )\n  }\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton, iconButtonVariants }\n"],"mappings":";AAiGU,SAME,KANF;AA/FV,YAAY,WAAW;AACvB,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAK/B,MAAM,gBAAgB;AAAA,EACpB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AACf;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,MAAM;AAAA;AAAA,QACN,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,OAAO;AAAA;AAAA,QACP,OAAO;AAAA;AAAA,QACP,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAYA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,SAAS,aAAa,OAAO,WAAW,MAAM,UAAU,QAAQ,YAAY,UAAU,OAAO,SAAS,aAAa,UAAU,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AACrL,UAAM,eAAe,eAAe;AAGpC,UAAM,UAAU,eAAe,cAAc,WAAW;AACxD,UAAM,QAAQ,aAAa;AAC3B,UAAM,OAAO,YAAY,cAAc;AACvC,UAAM,SAAS,cAAc,cAAc;AAC3C,UAAM,WAAW,gBAAgB,cAAc;AAE/C,UAAM,OAAO,UAAU,OAAO;AAI9B,UAAM,WAAW;AAAA,MACf,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,SAAS;AAAA;AAAA,MACT,IAAI;AAAA;AAAA,IACN,EAAE,QAAQ,SAAS;AAEnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,MAAM,OAAO,CAAC,GAAG,YAAY,WAAW,cAAc,KAAK,GAAG,gBAAgB,SAAS,wBAAwB,SAAS;AAAA,QACpK;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACrB,GAAG;AAAA,QAEH,oBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,UAAU,cAAc;AAAA,YACtC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,eAAY;AAAA,YAEZ;AAAA,kCAAC,YAAO,WAAU,cAAa,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,gBAAe,aAAY,KAAI;AAAA,cAC5F,oBAAC,UAAK,WAAU,cAAa,MAAK,gBAAe,GAAE,mHAAkH;AAAA;AAAA;AAAA,QACvK,IAEA,oBAAC,UAAK,WAAW,GAAG,UAAU,+BAA+B,GAAG,eAAY,QACzE,UACH;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;","names":[]}

package/dist/components/ui/input.js

@@ -33,6 +33,7 @@ __export(input_exports, {
   inputVariants: () => inputVariants
 });
 module.exports = __toCommonJS(input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
 var import_utils = require("../../lib/utils");
@@ -192,36 +193,40 @@ const Input = React.forwardRef(
       onBlur: handleBlur
     };
     if (leftIcon || rightIcon) {
-      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, leftIcon && /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
-        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
-        iconPositionClasses[resolvedSize].left,
-        `[&>svg]:${iconSizeClasses[resolvedSize]}`
-      ) }, leftIcon), /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          type,
-          id: inputId,
-          className: (0, import_utils.cn)(
-            inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
-            keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
-            leftIcon && iconPaddingClasses[resolvedSize].left,
-            rightIcon && iconPaddingClasses[resolvedSize].right,
-            className
-          ),
-          "aria-invalid": resolvedError || void 0,
-          "aria-describedby": ariaDescribedBy,
-          disabled: isDisabled,
-          ref,
-          ...focusHandlers,
-          ...props
-        }
-      ), rightIcon && /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
-        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
-        iconPositionClasses[resolvedSize].right,
-        `[&>svg]:${iconSizeClasses[resolvedSize]}`
-      ) }, rightIcon));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)(
+          "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+          iconPositionClasses[resolvedSize].left,
+          `[&>svg]:${iconSizeClasses[resolvedSize]}`
+        ), children: leftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            type,
+            id: inputId,
+            className: (0, import_utils.cn)(
+              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+              keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+              leftIcon && iconPaddingClasses[resolvedSize].left,
+              rightIcon && iconPaddingClasses[resolvedSize].right,
+              className
+            ),
+            "aria-invalid": resolvedError || void 0,
+            "aria-describedby": ariaDescribedBy,
+            disabled: isDisabled,
+            ref,
+            ...focusHandlers,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)(
+          "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+          iconPositionClasses[resolvedSize].right,
+          `[&>svg]:${iconSizeClasses[resolvedSize]}`
+        ), children: rightIcon })
+      ] });
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
       {
         type,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border-form hover:border-border-form-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
+{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border-form hover:border-border-form-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}

package/dist/components/ui/input.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -158,36 +159,40 @@ const Input = React.forwardRef(
       onBlur: handleBlur
     };
     if (leftIcon || rightIcon) {
-      return /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, leftIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
-        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
-        iconPositionClasses[resolvedSize].left,
-        `[&>svg]:${iconSizeClasses[resolvedSize]}`
-      ) }, leftIcon), /* @__PURE__ */ React.createElement(
-        "input",
-        {
-          type,
-          id: inputId,
-          className: cn(
-            inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
-            keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
-            leftIcon && iconPaddingClasses[resolvedSize].left,
-            rightIcon && iconPaddingClasses[resolvedSize].right,
-            className
-          ),
-          "aria-invalid": resolvedError || void 0,
-          "aria-describedby": ariaDescribedBy,
-          disabled: isDisabled,
-          ref,
-          ...focusHandlers,
-          ...props
-        }
-      ), rightIcon && /* @__PURE__ */ React.createElement("div", { className: cn(
-        "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
-        iconPositionClasses[resolvedSize].right,
-        `[&>svg]:${iconSizeClasses[resolvedSize]}`
-      ) }, rightIcon));
+      return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+        leftIcon && /* @__PURE__ */ jsx("div", { className: cn(
+          "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+          iconPositionClasses[resolvedSize].left,
+          `[&>svg]:${iconSizeClasses[resolvedSize]}`
+        ), children: leftIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type,
+            id: inputId,
+            className: cn(
+              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),
+              keyboardFocus && "shadow-[0_0_0_2px_var(--color-focus-ring)]",
+              leftIcon && iconPaddingClasses[resolvedSize].left,
+              rightIcon && iconPaddingClasses[resolvedSize].right,
+              className
+            ),
+            "aria-invalid": resolvedError || void 0,
+            "aria-describedby": ariaDescribedBy,
+            disabled: isDisabled,
+            ref,
+            ...focusHandlers,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx("div", { className: cn(
+          "absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10",
+          iconPositionClasses[resolvedSize].right,
+          `[&>svg]:${iconSizeClasses[resolvedSize]}`
+        ), children: rightIcon })
+      ] });
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "input",
       {
         type,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border-form hover:border-border-form-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
+{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n  [\n    'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n    'border transition-colors duration-micro outline-transparent',\n    'focus:[outline:2px_solid_transparent]',\n    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n    'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: 'border-border-form hover:border-border-form-strong',\n        filled: 'border-transparent bg-background-muted',\n      },\n      focusRing: {\n        true: '',\n        false: '',\n      },\n      size: {\n        xs: 'h-9 px-3 text-sm',          // 36px / 12px padding / 13px font (3.0:1)\n        sm: 'h-10 px-3 text-md',         // 40px / 12px padding / 14px font (3.3:1)\n        default: 'h-11 px-4 text-base',  // 44px / 16px padding / 16px font (2.75:1)\n        lg: 'h-12 px-4 text-base',       // 48px / 16px padding / 16px font (3.0:1)\n        xl: 'h-14 px-4 text-base',        // 56px / 16px padding / 16px font (3.5:1)\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      state: {\n        default: '',\n        error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n      },\n    },\n    compoundVariants: [\n      // focusRing: true → show custom focus ring\n      { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n      // focusRing: false → keep same state as hover\n      { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n      // filled + error\n      {\n        variant: 'filled',\n        state: 'error',\n        className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n      },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      state: 'default',\n      focusRing: false,\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  leftIcon?: React.ReactNode\n  rightIcon?: React.ReactNode\n  error?: boolean\n  focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n  xs: 'icon-xs',      // 14px\n  sm: 'icon-xs',      // 14px\n  default: 'icon-sm', // 16px\n  lg: 'icon-sm',      // 16px\n  xl: 'icon-sm',      // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n  xs: { left: 'pl-8', right: 'pr-8' },       // 12px + 14px icon + 6px gap = 32px\n  sm: { left: 'pl-9', right: 'pr-9' },       // 12px + 14px icon + 8px gap = 34px → 36px\n  default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n  lg: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n  xl: { left: 'pl-10', right: 'pr-10' },     // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n  xs: { left: 'left-3', right: 'right-3' },      // 12px\n  sm: { left: 'left-3', right: 'right-3' },      // 12px\n  default: { left: 'left-4', right: 'right-4' }, // 16px\n  lg: { left: 'left-4', right: 'right-4' },      // 16px\n  xl: { left: 'left-4', right: 'right-4' },      // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n    const fieldContext = useFieldContext()\n    const resolvedSize = size || 'default'\n    const resolvedError = error ?? fieldContext?.error\n    const resolvedState = resolvedError ? 'error' : state\n    const inputId = id ?? fieldContext?.id\n    const isDisabled = props.disabled ?? fieldContext?.disabled\n\n    // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n    const pointerRef = React.useRef(false)\n    const windowBlurredRef = React.useRef(false)\n    const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n    // Track window blur/focus to distinguish Tab navigation from window re-activation\n    React.useEffect(() => {\n      const onBlur = () => { windowBlurredRef.current = true }\n      const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n      window.addEventListener('blur', onBlur)\n      window.addEventListener('focus', onFocus)\n      return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n    }, [])\n\n    const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n      pointerRef.current = true\n      onPointerDown?.(e)\n    }, [onPointerDown])\n\n    const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n        setKeyboardFocus(true)\n      }\n      pointerRef.current = false\n      onFocus?.(e)\n    }, [focusRing, onFocus])\n\n    const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n      setKeyboardFocus(false)\n      pointerRef.current = false\n      onBlur?.(e)\n    }, [onBlur])\n\n    // Build aria-describedby from context\n    const ariaDescribedBy = fieldContext\n      ? [\n          resolvedError ? `${fieldContext.id}-error` : null,\n        ]\n          .filter(Boolean)\n          .join(' ') || undefined\n      : undefined\n\n    const focusHandlers = {\n      onPointerDown: handlePointerDown,\n      onFocus: handleFocus,\n      onBlur: handleBlur,\n    }\n\n    // If icons are present, wrap input in a container\n    if (leftIcon || rightIcon) {\n      return (\n        <div className=\"relative w-full\">\n          {leftIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].left,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {leftIcon}\n            </div>\n          )}\n          <input\n            type={type}\n            id={inputId}\n            className={cn(\n              inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n              keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n              leftIcon && iconPaddingClasses[resolvedSize].left,\n              rightIcon && iconPaddingClasses[resolvedSize].right,\n              className\n            )}\n            aria-invalid={resolvedError || undefined}\n            aria-describedby={ariaDescribedBy}\n            disabled={isDisabled}\n            ref={ref}\n            {...focusHandlers}\n            {...props}\n          />\n          {rightIcon && (\n            <div className={cn(\n              'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n              iconPositionClasses[resolvedSize].right,\n              `[&>svg]:${iconSizeClasses[resolvedSize]}`\n            )}>\n              {rightIcon}\n            </div>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <input\n        type={type}\n        id={inputId}\n        className={cn(\n          inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n          keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n          className\n        )}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={ariaDescribedBy}\n        disabled={isDisabled}\n        ref={ref}\n        {...focusHandlers}\n        {...props}\n      />\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}