@karakuri-ui/react 0.2.2 → 0.2.4

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

@@ -0,0 +1,33 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+interface FieldContextValue {
+    id: string;
+    error?: boolean;
+    disabled?: boolean;
+}
+declare function useFieldContext(): FieldContextValue | null;
+declare const fieldVariants: (props?: ({
+    gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
+    error?: boolean;
+    disabled?: boolean;
+}
+interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldCharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    Error: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    CharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+};
+declare namespace Field {
+    type LabelProps = FieldLabelProps;
+}
+
+export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext };

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

@@ -0,0 +1,33 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+interface FieldContextValue {
+    id: string;
+    error?: boolean;
+    disabled?: boolean;
+}
+declare function useFieldContext(): FieldContextValue | null;
+declare const fieldVariants: (props?: ({
+    gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
+    error?: boolean;
+    disabled?: boolean;
+}
+interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+}
+declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldCharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>> & {
+    Label: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+    Error: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    CharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+};
+declare namespace Field {
+    type LabelProps = FieldLabelProps;
+}
+
+export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext };

package/dist/components/ui/field.js

@@ -0,0 +1,146 @@
+"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 field_exports = {};
+__export(field_exports, {
+  Field: () => Field,
+  FieldCharCount: () => FieldCharCount,
+  FieldError: () => FieldError,
+  FieldLabel: () => FieldLabel,
+  useFieldContext: () => useFieldContext
+});
+module.exports = __toCommonJS(field_exports);
+var React = __toESM(require("react"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const FieldContext = React.createContext(null);
+function useFieldContext() {
+  return React.useContext(FieldContext);
+}
+const fieldVariants = (0, import_class_variance_authority.cva)("flex flex-col", {
+  variants: {
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-1.5",
+      default: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    gap: "default"
+  }
+});
+const FieldRoot = 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(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.cn)(fieldVariants({ gap }), className),
+        "data-error": error || void 0,
+        "data-disabled": disabled || void 0,
+        ...props
+      },
+      children
+    ));
+  }
+);
+FieldRoot.displayName = "Field";
+const FieldLabel = React.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFieldContext();
+    return /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        ref,
+        htmlFor: context?.id,
+        className: (0, import_utils.cn)(
+          "text-md font-semibold text-foreground",
+          // 14px - primary field identifier
+          context?.disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props
+      },
+      children,
+      required && /* @__PURE__ */ React.createElement("span", { className: "text-error ml-0.5" }, "*")
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+const FieldError = React.forwardRef(({ className, children, ...props }, ref) => {
+  const context = useFieldContext();
+  if (!children) return null;
+  return /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      ref,
+      id: context ? `${context.id}-error` : void 0,
+      role: "alert",
+      className: (0, import_utils.cn)("text-xs text-error pl-1", className),
+      ...props
+    },
+    children
+  );
+});
+FieldError.displayName = "FieldError";
+const FieldCharCount = React.forwardRef(({ className, ...props }, ref) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      ref,
+      id: context ? `${context.id}-charcount` : void 0,
+      className: (0, import_utils.cn)(
+        "text-xs text-text-muted text-right pr-1 -mt-1",
+        // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)
+        context?.disabled && "opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FieldCharCount.displayName = "FieldCharCount";
+const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Error: FieldError,
+  CharCount: FieldCharCount
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Field,
+  FieldCharCount,
+  FieldError,
+  FieldLabel,
+  useFieldContext
+});
+//# sourceMappingURL=field.js.map

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

@@ -0,0 +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 FieldRoot = 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)\nFieldRoot.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\n// ─── Namespace ──────────────────────────────────────────\nconst Field = Object.assign(FieldRoot, {\n  Label: FieldLabel,\n  Error: FieldError,\n  CharCount: FieldCharCount,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Field {\n  export type LabelProps = FieldLabelProps\n}\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AASnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AAGA,MAAM,oBAAgB,qCAAI,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,YAAY,MAAM;AAAA,EACtB,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,eAAW,iBAAG,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,UAAU,cAAc;AAOxB,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,eAAW;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,eAAW,iBAAG,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,eAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;AAG7B,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EACrC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb,CAAC;","names":[]}

package/dist/components/ui/field.mjs

@@ -0,0 +1,108 @@
+"use client";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const FieldContext = React.createContext(null);
+function useFieldContext() {
+  return React.useContext(FieldContext);
+}
+const fieldVariants = cva("flex flex-col", {
+  variants: {
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-1.5",
+      default: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    gap: "default"
+  }
+});
+const FieldRoot = 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(
+      "div",
+      {
+        ref,
+        className: cn(fieldVariants({ gap }), className),
+        "data-error": error || void 0,
+        "data-disabled": disabled || void 0,
+        ...props
+      },
+      children
+    ));
+  }
+);
+FieldRoot.displayName = "Field";
+const FieldLabel = React.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFieldContext();
+    return /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        ref,
+        htmlFor: context?.id,
+        className: cn(
+          "text-md font-semibold text-foreground",
+          // 14px - primary field identifier
+          context?.disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props
+      },
+      children,
+      required && /* @__PURE__ */ React.createElement("span", { className: "text-error ml-0.5" }, "*")
+    );
+  }
+);
+FieldLabel.displayName = "FieldLabel";
+const FieldError = React.forwardRef(({ className, children, ...props }, ref) => {
+  const context = useFieldContext();
+  if (!children) return null;
+  return /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      ref,
+      id: context ? `${context.id}-error` : void 0,
+      role: "alert",
+      className: cn("text-xs text-error pl-1", className),
+      ...props
+    },
+    children
+  );
+});
+FieldError.displayName = "FieldError";
+const FieldCharCount = React.forwardRef(({ className, ...props }, ref) => {
+  const context = useFieldContext();
+  return /* @__PURE__ */ React.createElement(
+    "p",
+    {
+      ref,
+      id: context ? `${context.id}-charcount` : void 0,
+      className: cn(
+        "text-xs text-text-muted text-right pr-1 -mt-1",
+        // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)
+        context?.disabled && "opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+});
+FieldCharCount.displayName = "FieldCharCount";
+const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Error: FieldError,
+  CharCount: FieldCharCount
+});
+export {
+  Field,
+  FieldCharCount,
+  FieldError,
+  FieldLabel,
+  useFieldContext
+};
+//# sourceMappingURL=field.mjs.map

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

@@ -0,0 +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 FieldRoot = 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)\nFieldRoot.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\n// ─── Namespace ──────────────────────────────────────────\nconst Field = Object.assign(FieldRoot, {\n  Label: FieldLabel,\n  Error: FieldError,\n  CharCount: FieldCharCount,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Field {\n  export type LabelProps = FieldLabelProps\n}\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,YAAY,MAAM;AAAA,EACtB,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,UAAU,cAAc;AAOxB,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;AAG7B,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EACrC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,WAAW;AACb,CAAC;","names":[]}

package/dist/components/ui/icon-button.d.mts

@@ -0,0 +1,20 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ButtonColor } from './button.mjs';
+
+declare const iconButtonVariants: (props?: ({
+    variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    /** Solid variant color */
+    color?: ButtonColor;
+    asChild?: boolean;
+    loading?: boolean;
+    pressEffect?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps, iconButtonVariants };

package/dist/components/ui/icon-button.d.ts

@@ -0,0 +1,20 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ButtonColor } from './button.js';
+
+declare const iconButtonVariants: (props?: ({
+    variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    /** Solid variant color */
+    color?: ButtonColor;
+    asChild?: boolean;
+    loading?: boolean;
+    pressEffect?: boolean;
+}
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton, type IconButtonProps, iconButtonVariants };

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

@@ -0,0 +1,147 @@
+"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 icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => IconButton,
+  iconButtonVariants: () => iconButtonVariants
+});
+module.exports = __toCommonJS(icon_button_exports);
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+var import_button_group = require("./button-group");
+const solidColorMap = {
+  default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
+  primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active",
+  destructive: "bg-error text-error-foreground hover:bg-error-hover active:bg-error-active"
+};
+const iconButtonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center transition-all duration-micro focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        solid: "",
+        outline: "border border-border-form bg-background text-foreground hover:bg-background-muted",
+        ghost: "text-foreground hover:bg-background-muted",
+        subtle: "text-text-muted hover:text-foreground"
+      },
+      size: {
+        xs: "h-7 w-7",
+        // 28px - spacing.7
+        sm: "h-8 w-8",
+        // 32px - spacing.8
+        md: "h-9 w-9",
+        // 36px - spacing.9
+        default: "h-10 w-10",
+        // 40px - spacing.10
+        lg: "h-12 w-12"
+        // 48px - spacing.12
+      },
+      radius: {
+        none: "rounded-none",
+        // 0px - primitive.borderRadius.none
+        sm: "rounded-sm",
+        // 2px - primitive.borderRadius.sm
+        base: "rounded",
+        // 4px - primitive.borderRadius.base
+        default: "rounded-md",
+        // 6px - primitive.borderRadius.md (Figma button default)
+        lg: "rounded-lg",
+        // 8px - primitive.borderRadius.lg
+        xl: "rounded-xl",
+        // 12px - primitive.borderRadius.xl
+        "2xl": "rounded-2xl",
+        // 16px - primitive.borderRadius.2xl
+        "3xl": "rounded-3xl",
+        // 24px - primitive.borderRadius.3xl
+        full: "rounded-full"
+        // 9999px - primitive.borderRadius.full
+      }
+    },
+    defaultVariants: {
+      variant: "solid",
+      size: "default",
+      radius: "default"
+    }
+  }
+);
+const IconButton = React.forwardRef(
+  ({ className, variant: variantProp, color: colorProp, size: sizeProp, radius: radiusProp, asChild = false, loading, pressEffect, children, disabled: disabledProp, ...props }, ref) => {
+    const groupContext = (0, import_button_group.useButtonGroup)();
+    const variant = variantProp ?? groupContext?.variant ?? "solid";
+    const color = colorProp ?? "default";
+    const size = sizeProp ?? groupContext?.size;
+    const radius = radiusProp ?? groupContext?.radius;
+    const disabled = disabledProp ?? groupContext?.disabled;
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const iconSize = {
+      xs: "icon-xs",
+      // 14px
+      sm: "icon-sm",
+      // 16px
+      md: "icon-sm",
+      // 16px
+      default: "icon-md",
+      // 20px
+      lg: "icon-lg"
+      // 24px
+    }[size || "default"];
+    return /* @__PURE__ */ React.createElement(
+      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)
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton,
+  iconButtonVariants
+});
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +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":[]}