@cloudflare/kumo 2.0.1 → 2.0.3

package/dist/chunks/{field-c0wf94plit2gci59.js.map → field-dgf36p7cmz1crlnu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"field-c0wf94plit2gci59.js","sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ],\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n *   <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n *   <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n  /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n  children: ReactNode;\n  /** The label content — can be a string or any React node. */\n  label: ReactNode;\n  /**\n   * When explicitly `false`, shows gray \"(optional)\" text after the label.\n   * When `true` or `undefined`, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Validation error with a message and a browser `ValidityState` match key. */\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  /** Helper text displayed below the control (hidden when `error` is present). */\n  description?: ReactNode;\n  /** When `true`, places the control before the label (for checkbox/switch layouts). */\n  controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n *   <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"m-0 text-base font-medium text-kumo-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm leading-snug text-kumo-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\",\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-kumo-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\",\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,+CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
+{"version":3,"file":"field-dgf36p7cmz1crlnu.js","sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n  // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n  /**\n   * When true, places the control (checkbox/switch) before the label visually.\n   * When false (default), places the label before the control.\n   * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n   */\n  controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n  controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n  return cn(\n    // Base styles - vertical layout (default)\n    \"grid gap-2\",\n\n    // Horizontal layout for checkbox and switch\n    // Default: Grid auto-reverses in RTL (desired)\n    \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n    \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n    // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n    // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n    controlFirst && [\n      \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n      \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n      \"[&>label]:flex-1\",\n    ],\n  );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n  | boolean\n  | \"badInput\"\n  | \"customError\"\n  | \"patternMismatch\"\n  | \"rangeOverflow\"\n  | \"rangeUnderflow\"\n  | \"stepMismatch\"\n  | \"tooLong\"\n  | \"tooShort\"\n  | \"typeMismatch\"\n  | \"valid\"\n  | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n *   <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n *   <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n  /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n  children: ReactNode;\n  /** The label content — can be a string or any React node. */\n  label: ReactNode;\n  /**\n   * When explicitly `false`, shows gray \"(optional)\" text after the label.\n   * When `true` or `undefined`, no indicator is shown.\n   */\n  required?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  labelTooltip?: ReactNode;\n  /** Validation error with a message and a browser `ValidityState` match key. */\n  error?: {\n    message: ReactNode;\n    match: FieldErrorMatch;\n  };\n  /** Helper text displayed below the control (hidden when `error` is present). */\n  description?: ReactNode;\n  /** When `true`, places the control before the label (for checkbox/switch layouts). */\n  controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n *   <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n  children,\n  label,\n  required,\n  labelTooltip,\n  error,\n  description,\n  controlFirst = false,\n}: FieldProps) {\n  // Show \"(optional)\" when required is explicitly false\n  const showOptional = required === false;\n\n  return (\n    <FieldBase.Root className={fieldVariants({ controlFirst })}>\n      <FieldBase.Label className=\"m-0 text-base font-medium text-kumo-default\">\n        <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n          {label}\n        </Label>\n      </FieldBase.Label>\n      {children}\n      {error ? (\n        <FieldBase.Error\n          className={cn(\n            \"text-sm leading-snug text-kumo-danger\",\n            // Span full width in horizontal layout\n            \"col-span-full\",\n          )}\n          match={error.match}\n        >\n          {error.message}\n        </FieldBase.Error>\n      ) : (\n        description && (\n          <FieldBase.Description\n            className={cn(\n              \"text-sm leading-snug text-kumo-subtle\",\n              // Span full width in horizontal layout\n              \"col-span-full\",\n            )}\n          >\n            {description}\n          </FieldBase.Description>\n        )\n      )}\n    </FieldBase.Root>\n  );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,+CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}

package/dist/chunks/{grid-hj1ylz16p7g5uelh.js → grid-do93dv1rjggqxx7p.js}

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as l } from "react/jsx-runtime";
-import d from "react";
-import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
-const t = {
+import a from "react";
+import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as n } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+const g = {
   variant: {
     "2up": {
       classes: "grid-cols-1 md:grid-cols-2",
@@ -59,69 +60,69 @@ const t = {
       description: "Large gap between grid items"
     }
   }
-}, n = {
+}, t = {
   gap: "base"
-}, g = d.createContext({
+}, p = a.createContext({
   gap: "base"
 });
-function m({
+function u({
   variant: s,
-  gap: e = n.gap
+  gap: e = t.gap
 } = {}) {
-  return a(
+  return d(
     "grid",
-    s && t.variant[s].classes,
-    t.gap[e].classes
+    s && n(g.variant, s, "2up").classes,
+    n(g.gap, e, t.gap).classes
   );
 }
-function u({
+function b({
   variant: s,
   mobileDivider: e
 } = {}) {
-  return a(
+  return d(
     e && s === "4up" && "border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0"
   );
 }
-const b = d.forwardRef(
+const f = a.forwardRef(
   ({
     children: s,
     className: e,
     mobileDivider: o,
-    gap: r = n.gap,
+    gap: r = t.gap,
     variant: i,
     ...c
-  }, p) => /* @__PURE__ */ l(g.Provider, { value: { variant: i, gap: r, mobileDivider: o }, children: /* @__PURE__ */ l(
+  }, m) => /* @__PURE__ */ l(p.Provider, { value: { variant: i, gap: r, mobileDivider: o }, children: /* @__PURE__ */ l(
     "div",
     {
-      ref: p,
-      className: a(m({ variant: i, gap: r }), e),
+      ref: m,
+      className: d(u({ variant: i, gap: r }), e),
       ...c,
       children: s
     }
   ) })
 );
-b.displayName = "Grid";
-const f = d.forwardRef(
+f.displayName = "Grid";
+const G = a.forwardRef(
   ({ children: s, className: e, ...o }, r) => {
-    const { variant: i, mobileDivider: c } = d.useContext(g);
+    const { variant: i, mobileDivider: c } = a.useContext(p);
     return /* @__PURE__ */ l(
       "div",
       {
         ref: r,
-        className: a(u({ variant: i, mobileDivider: c }), e),
+        className: d(b({ variant: i, mobileDivider: c }), e),
         ...o,
         children: s
       }
     );
   }
 );
-f.displayName = "GridItem";
+G.displayName = "GridItem";
 export {
-  b as G,
-  t as K,
-  f as a,
-  u as b,
-  n as c,
-  m as g
+  f as G,
+  g as K,
+  G as a,
+  b,
+  t as c,
+  u as g
 };
-//# sourceMappingURL=grid-hj1ylz16p7g5uelh.js.map
+//# sourceMappingURL=grid-do93dv1rjggqxx7p.js.map

package/dist/chunks/grid-do93dv1rjggqxx7p.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-do93dv1rjggqxx7p.js","sources":["../../src/components/grid/grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\n\n/** Grid variant and gap definitions mapping layout names to their responsive Tailwind classes. */\nexport const KUMO_GRID_VARIANTS = {\n  variant: {\n    \"2up\": {\n      classes: \"grid-cols-1 md:grid-cols-2\",\n      description:\n        \"Grid items stack on small screens, display side-by-side on medium screens and up\",\n    },\n    \"side-by-side\": {\n      classes: \"grid-cols-2\",\n      description: \"Grid items always displayed side-by-side\",\n    },\n    \"2-1\": {\n      classes: \"grid-cols-1 md:grid-cols-[2fr_1fr]\",\n      description:\n        \"Two-thirds / one-third split (66%/33%) on medium screens and up\",\n    },\n    \"1-2\": {\n      classes: \"grid-cols-1 md:grid-cols-[1fr_2fr]\",\n      description:\n        \"One-third / two-thirds split (33%/66%) on medium screens and up\",\n    },\n    \"1-3up\": {\n      classes: \"grid-cols-1 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, expand to 3 across on large screens\",\n    },\n    \"3up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 3 across on large\",\n    },\n    \"4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, progressively increase columns at larger breakpoints\",\n    },\n    \"6up\": {\n      classes: \"grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6\",\n      description: \"Grid items start at 2 across, expand to 6 across on XL\",\n    },\n    \"1-2-4up\": {\n      classes: \"grid-cols-1 md:grid-cols-2 lg:grid-cols-4\",\n      description:\n        \"Grid items stack on small screens, 2 across on medium, 4 across on large\",\n    },\n  },\n  gap: {\n    none: {\n      classes: \"gap-0\",\n      description: \"No gap between grid items\",\n    },\n    sm: {\n      classes: \"gap-3\",\n      description: \"Small gap between grid items\",\n    },\n    base: {\n      classes: \"gap-2 md:gap-6 lg:gap-8\",\n      description: \"Default responsive gap between grid items\",\n    },\n    lg: {\n      classes: \"gap-8\",\n      description: \"Large gap between grid items\",\n    },\n  },\n} as const;\n\nexport const KUMO_GRID_DEFAULT_VARIANTS = {\n  gap: \"base\",\n} as const;\n\nexport type KumoGridVariant = keyof typeof KUMO_GRID_VARIANTS.variant;\nexport type KumoGridGap = keyof typeof KUMO_GRID_VARIANTS.gap;\n\n/**\n * Grid component props.\n *\n * @example\n * ```tsx\n * <Grid variant=\"3up\" gap=\"sm\">\n *   <GridItem><Surface className=\"p-4\">1</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">2</Surface></GridItem>\n *   <GridItem><Surface className=\"p-4\">3</Surface></GridItem>\n * </Grid>\n * ```\n */\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Grid items to render. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Show dividers between grid items on mobile (only works with `\"4up\"` variant). */\n  mobileDivider?: boolean;\n  /**\n   * Gap size between grid items.\n   * - `\"none\"` — No gap\n   * - `\"sm\"` — 12px gap\n   * - `\"base\"` — Responsive gap (8px → 24px → 32px)\n   * - `\"lg\"` — 32px gap\n   * @default \"base\"\n   */\n  gap?: KumoGridGap;\n  /**\n   * Responsive column layout variant.\n   * - `\"2up\"` — 1 col → 2 cols at md\n   * - `\"side-by-side\"` — Always 2 cols\n   * - `\"2-1\"` — 66%/33% split at md\n   * - `\"1-2\"` — 33%/66% split at md\n   * - `\"3up\"` — 1 → 2 → 3 cols\n   * - `\"4up\"` — 1 → 2 → 3 → 4 cols\n   * - `\"6up\"` — 2 → 3 → 4 → 6 cols\n   * - `\"1-2-4up\"` — 1 → 2 → 4 cols\n   */\n  variant?: KumoGridVariant;\n}\n\n/** GridItem component props — a single cell within a Grid. */\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Content for this grid cell. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\ninterface GridContextValue {\n  variant?: KumoGridVariant;\n  gap: KumoGridGap;\n  mobileDivider?: boolean;\n}\n\nconst GridContext = React.createContext<GridContextValue>({\n  gap: \"base\",\n});\n\nexport function gridVariants({\n  variant,\n  gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n}: {\n  variant?: KumoGridVariant;\n  gap?: KumoGridGap;\n} = {}) {\n  return cn(\n    \"grid\",\n    variant && resolveVariant(KUMO_GRID_VARIANTS.variant, variant, \"2up\").classes,\n    resolveVariant(KUMO_GRID_VARIANTS.gap, gap, KUMO_GRID_DEFAULT_VARIANTS.gap).classes,\n  );\n}\n\nexport function gridItemVariants({\n  variant,\n  mobileDivider,\n}: {\n  variant?: KumoGridVariant;\n  mobileDivider?: boolean;\n} = {}) {\n  return cn(\n    mobileDivider &&\n      variant === \"4up\" &&\n      \"border-b border-kumo-hairline pb-8 md:border-b-0 md:pb-0\",\n  );\n}\n\n/**\n * Responsive CSS grid layout container with preset column configurations.\n *\n * @example\n * ```tsx\n * <Grid variant=\"2up\" gap=\"base\">\n *   <GridItem>Left</GridItem>\n *   <GridItem>Right</GridItem>\n * </Grid>\n * ```\n */\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  (\n    {\n      children,\n      className,\n      mobileDivider,\n      gap = KUMO_GRID_DEFAULT_VARIANTS.gap,\n      variant,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <GridContext.Provider value={{ variant, gap, mobileDivider }}>\n        <div\n          ref={ref}\n          className={cn(gridVariants({ variant, gap }), className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </GridContext.Provider>\n    );\n  },\n);\n\nGrid.displayName = \"Grid\";\n\nexport const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, className, ...props }, ref) => {\n    const { variant, mobileDivider } = React.useContext(GridContext);\n\n    return (\n      <div\n        ref={ref}\n        className={cn(gridItemVariants({ variant, mobileDivider }), className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nGridItem.displayName = \"GridItem\";\n"],"names":["KUMO_GRID_VARIANTS","KUMO_GRID_DEFAULT_VARIANTS","GridContext","React","gridVariants","variant","gap","cn","resolveVariant","gridItemVariants","mobileDivider","Grid","children","className","props","ref","jsx","GridItem"],"mappings":";;;;;AAKO,MAAMA,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,gBAAgB;AAAA,MACd,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,IAEJ,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,WAAW;AAAA,MACT,SAAS;AAAA,MACT,aACE;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,KAAK;AAAA,IACH,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,KAAK;AACP,GA6DMC,IAAcC,EAAM,cAAgC;AAAA,EACxD,KAAK;AACP,CAAC;AAEM,SAASC,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,KAAAC,IAAML,EAA2B;AACnC,IAGI,IAAI;AACN,SAAOM;AAAA,IACL;AAAA,IACAF,KAAWG,EAAeR,EAAmB,SAASK,GAAS,KAAK,EAAE;AAAA,IACtEG,EAAeR,EAAmB,KAAKM,GAAKL,EAA2B,GAAG,EAAE;AAAA,EAAA;AAEhF;AAEO,SAASQ,EAAiB;AAAA,EAC/B,SAAAJ;AAAA,EACA,eAAAK;AACF,IAGI,IAAI;AACN,SAAOH;AAAA,IACLG,KACEL,MAAY,SACZ;AAAA,EAAA;AAEN;AAaO,MAAMM,IAAOR,EAAM;AAAA,EACxB,CACE;AAAA,IACE,UAAAS;AAAA,IACA,WAAAC;AAAA,IACA,eAAAH;AAAA,IACA,KAAAJ,IAAML,EAA2B;AAAA,IACjC,SAAAI;AAAA,IACA,GAAGS;AAAA,EAAA,GAELC,MAGE,gBAAAC,EAACd,EAAY,UAAZ,EAAqB,OAAO,EAAE,SAAAG,GAAS,KAAAC,GAAK,eAAAI,KAC3C,UAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWR,EAAGH,EAAa,EAAE,SAAAC,GAAS,KAAAC,EAAA,CAAK,GAAGO,CAAS;AAAA,MACtD,GAAGC;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA,GAEL;AAGN;AAEAD,EAAK,cAAc;AAEZ,MAAMM,IAAWd,EAAM;AAAA,EAC5B,CAAC,EAAE,UAAAS,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAAQ;AAC1C,UAAM,EAAE,SAAAV,GAAS,eAAAK,EAAA,IAAkBP,EAAM,WAAWD,CAAW;AAE/D,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWR,EAAGE,EAAiB,EAAE,SAAAJ,GAAS,eAAAK,EAAA,CAAe,GAAGG,CAAS;AAAA,QACpE,GAAGC;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAK,EAAS,cAAc;"}

package/dist/chunks/{input-ncfowphv81yq7fyy.js → input-2y9vg81trmamkb6k.js}

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as u } from "react/jsx-runtime";
-import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
-import { forwardRef as v } from "react";
-import { F as k } from "./field-c0wf94plit2gci59.js";
-import { I as N } from "./vendor-base-ui-ie71jahf0czyf58j.js";
-const c = {
+import { jsx as p } from "react/jsx-runtime";
+import { c as f } from "./cn-ct4n7r74mh8y0f48.js";
+import { r as c } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
+import { forwardRef as k } from "react";
+import { F as N } from "./field-dgf36p7cmz1crlnu.js";
+import { I as y } from "./vendor-base-ui-ie71jahf0czyf58j.js";
+const d = {
   size: {
     xs: {
       classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
@@ -33,81 +34,81 @@ const c = {
       description: "Error state for validation failures"
     }
   }
-}, p = {
+}, s = {
   size: "base",
   variant: "default"
 };
-function y({
-  variant: e = p.variant,
-  size: s = p.size,
-  parentFocusIndicator: o = !1,
-  focusIndicator: i = !1
+function E({
+  variant: r = s.variant,
+  size: o = s.size,
+  parentFocusIndicator: i = !1,
+  focusIndicator: n = !1
 } = {}) {
-  return d(
+  return f(
     // Base styles
     "border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none focus:outline-none",
     // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
     "kumo-input-placeholder disabled:text-kumo-disabled",
     // Apply size styles from KUMO_INPUT_VARIANTS
-    c.size[s].classes,
+    c(d.size, o, s.size).classes,
     // Apply variant styles from KUMO_INPUT_VARIANTS
-    c.variant[e].classes,
+    c(d.variant, r, s.variant).classes,
     // Focus state handling
-    o && (e === "error" ? "focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]" : "focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]"),
-    i && (e === "error" ? "focus:ring-kumo-danger/50 focus:ring-[1.5px]" : "focus:ring-kumo-focus/50 focus:ring-[1.5px]")
+    i && (r === "error" ? "focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]" : "focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]"),
+    n && (r === "error" ? "focus:ring-kumo-danger/50 focus:ring-[1.5px]" : "focus:ring-kumo-focus/50 focus:ring-[1.5px]")
   );
 }
-const E = v((e, s) => {
+const w = k((r, o) => {
   const {
-    className: o,
-    size: i = "base",
-    variant: t,
-    label: n,
-    labelTooltip: f,
-    description: m,
-    error: r,
+    className: i,
+    size: n = "base",
+    variant: l,
+    label: t,
+    labelTooltip: m,
+    description: g,
+    error: e,
     ...a
-  } = e;
-  process.env.NODE_ENV !== "production" && t === "error" && console.warn(
+  } = r;
+  process.env.NODE_ENV !== "production" && l === "error" && console.warn(
     '[Kumo Input]: variant="error" is deprecated. Error styling is now automatically applied when the `error` prop is truthy. Simply remove the variant prop and pass an error message instead.'
   );
-  const g = t ?? (r ? "error" : "default"), { required: b } = a;
+  const b = l ?? (e ? "error" : "default"), { required: x } = a;
   if (process.env.NODE_ENV !== "production") {
-    const x = !!n, h = !!a["aria-label"], I = !!a["aria-labelledby"];
-    !x && !h && !I && console.warn(
+    const h = !!t, v = !!a["aria-label"], I = !!a["aria-labelledby"];
+    !h && !v && !I && console.warn(
       `[Kumo Input]: Input must have an accessible name. Provide either:
   - label prop: <Input label='Email' />
   - aria-label: <Input aria-label='Email address' />
   - aria-labelledby for custom label association`
     );
   }
-  const l = /* @__PURE__ */ u(
-    N,
+  const u = /* @__PURE__ */ p(
+    y,
     {
-      ref: s,
-      className: d(
-        y({ size: i, variant: g, focusIndicator: !0 }),
-        o
+      ref: o,
+      className: f(
+        E({ size: n, variant: b, focusIndicator: !0 }),
+        i
       ),
       ...a
     }
   );
-  return n ? /* @__PURE__ */ u(
-    k,
+  return t ? /* @__PURE__ */ p(
+    N,
     {
-      label: n,
-      required: b,
-      labelTooltip: f,
-      description: m,
-      error: r ? typeof r == "string" ? { message: r, match: !0 } : r : void 0,
-      children: l
+      label: t,
+      required: x,
+      labelTooltip: m,
+      description: g,
+      error: e ? typeof e == "string" ? { message: e, match: !0 } : e : void 0,
+      children: u
     }
-  ) : l;
+  ) : u;
 });
-E.displayName = "Input";
+w.displayName = "Input";
 export {
-  E as I,
-  c as K,
-  y as i
+  w as I,
+  d as K,
+  E as i
 };
-//# sourceMappingURL=input-ncfowphv81yq7fyy.js.map
+//# sourceMappingURL=input-2y9vg81trmamkb6k.js.map

package/dist/chunks/input-2y9vg81trmamkb6k.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-2y9vg81trmamkb6k.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none focus:outline-none\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-disabled\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    resolveVariant(KUMO_INPUT_VARIANTS.size, size, KUMO_INPUT_DEFAULT_VARIANTS.size).classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    resolveVariant(KUMO_INPUT_VARIANTS.variant, variant, KUMO_INPUT_DEFAULT_VARIANTS.variant).classes,\n    // Focus state handling\n    parentFocusIndicator &&\n      (variant === \"error\"\n        ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n        : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n    focusIndicator &&\n      (variant === \"error\"\n        ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n        : \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\"),\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant: variantProp,\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Kumo Input]: variant=\"error\" is deprecated. ' +\n        \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n        \"Simply remove the variant prop and pass an error message instead.\",\n    );\n  }\n\n  // Auto-apply error styling when error prop is truthy\n  // Explicit variant prop takes precedence for backwards compatibility\n  const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - aria-label: <Input aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","resolveVariant","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;;AAWO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAC,EAAeR,EAAoB,MAAMI,GAAMH,EAA4B,IAAI,EAAE;AAAA;AAAA,IAEjFO,EAAeR,EAAoB,SAASG,GAASF,EAA4B,OAAO,EAAE;AAAA;AAAA,IAE1FI,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMM,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAT,IAAO;AAAA,IACP,SAASU;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMX,IAAUW,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWL;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDU;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}

package/dist/chunks/{input-area-bkyzu6f7gsck479h.js → input-area-i5wulip5pau3u6ss.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { i as y } from "./input-ncfowphv81yq7fyy.js";
+import { i as y } from "./input-2y9vg81trmamkb6k.js";
 import { c as N } from "./cn-ct4n7r74mh8y0f48.js";
 import * as x from "react";
 import { useCallback as I } from "react";
-import { F as b } from "./field-c0wf94plit2gci59.js";
+import { F as b } from "./field-dgf36p7cmz1crlnu.js";
 import { aT as w } from "./vendor-base-ui-ie71jahf0czyf58j.js";
 const c = x.forwardRef(
   (u, t) => {
@@ -75,4 +75,4 @@ export {
   c as I,
   j as T
 };
-//# sourceMappingURL=input-area-bkyzu6f7gsck479h.js.map
+//# sourceMappingURL=input-area-i5wulip5pau3u6ss.js.map

package/dist/chunks/{input-area-bkyzu6f7gsck479h.js.map → input-area-i5wulip5pau3u6ss.js.map}

@@ -1 +1 @@
-{"version":3,"file":"input-area-bkyzu6f7gsck479h.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n  (props, ref) => {\n    const {\n      className,\n      onValueChange,\n      size = \"base\",\n      variant: variantProp,\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\n\n    // Deprecation warning for variant=\"error\"\n    if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n      console.warn(\n        '[Kumo InputArea]: variant=\"error\" is deprecated. ' +\n          \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n          \"Simply remove the variant prop and pass an error message instead.\",\n      );\n    }\n\n    // Auto-apply error styling when error prop is truthy\n    // Explicit variant prop takes precedence for backwards compatibility\n    const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n    // Extract required from inputProps to pass to Field for label decoration\n    const { required } = inputProps;\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event);\n        onValueChange?.(event.target.value);\n      },\n      [onChange, onValueChange],\n    );\n\n    const textareaClassName = cn(\n      inputVariants({ size, variant, focusIndicator: true }),\n      \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n      className,\n    );\n\n    // Render with Field wrapper if label is provided\n    // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n    // The render callback receives props with the correct id/aria-labelledby from Field context.\n    if (label) {\n      return (\n        <KumoField\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          <FieldBase.Control\n            render={(controlProps) => (\n              <textarea\n                {...controlProps}\n                ref={ref}\n                className={textareaClassName}\n                onChange={handleChange}\n                {...inputProps}\n              />\n            )}\n          />\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return (\n      <textarea\n        ref={ref}\n        className={textareaClassName}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n  },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variantProp","onChange","label","labelTooltip","description","error","inputProps","variant","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAASC;AAAA,MACT,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX;AAGJ,IAAI,QAAQ,IAAI,aAAa,gBAAgBK,MAAgB,WAC3D,QAAQ;AAAA,MACN;AAAA,IAAA;AAQJ,UAAMO,IAAUP,MAAgBK,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaF,GACfG,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAV,IAAWU,CAAK,GAChBb,IAAgBa,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACV,GAAUH,CAAa;AAAA,IAAA,GAGpBc,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAf,GAAM,SAAAQ,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAV;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAa;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAd;AAAA,QACA,UAAAM;AAAA,QACA,cAAAL;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAAtB;AAAA,gBACA,WAAWgB;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGH;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,UAAUH;AAAA,QACT,GAAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAM0B,IAAW1B;"}
+{"version":3,"file":"input-area-i5wulip5pau3u6ss.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n  (props, ref) => {\n    const {\n      className,\n      onValueChange,\n      size = \"base\",\n      variant: variantProp,\n      onChange,\n      label,\n      labelTooltip,\n      description,\n      error,\n      ...inputProps\n    } = props;\n\n    // Deprecation warning for variant=\"error\"\n    if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n      console.warn(\n        '[Kumo InputArea]: variant=\"error\" is deprecated. ' +\n          \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n          \"Simply remove the variant prop and pass an error message instead.\",\n      );\n    }\n\n    // Auto-apply error styling when error prop is truthy\n    // Explicit variant prop takes precedence for backwards compatibility\n    const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n    // Extract required from inputProps to pass to Field for label decoration\n    const { required } = inputProps;\n    const handleChange = useCallback(\n      (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        onChange?.(event);\n        onValueChange?.(event.target.value);\n      },\n      [onChange, onValueChange],\n    );\n\n    const textareaClassName = cn(\n      inputVariants({ size, variant, focusIndicator: true }),\n      \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n      className,\n    );\n\n    // Render with Field wrapper if label is provided\n    // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n    // The render callback receives props with the correct id/aria-labelledby from Field context.\n    if (label) {\n      return (\n        <KumoField\n          label={label}\n          required={required}\n          labelTooltip={labelTooltip}\n          description={description}\n          error={\n            error\n              ? typeof error === \"string\"\n                ? { message: error, match: true }\n                : error\n              : undefined\n          }\n        >\n          <FieldBase.Control\n            render={(controlProps) => (\n              <textarea\n                {...controlProps}\n                ref={ref}\n                className={textareaClassName}\n                onChange={handleChange}\n                {...inputProps}\n              />\n            )}\n          />\n        </KumoField>\n      );\n    }\n\n    // Render bare textarea without Field wrapper\n    return (\n      <textarea\n        ref={ref}\n        className={textareaClassName}\n        onChange={handleChange}\n        {...inputProps}\n      />\n    );\n  },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n  onValueChange?: (value: string) => void;\n  variant?: \"default\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n  // Then other custom props\n  children?: React.ReactNode;\n  className?: string;\n  /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the textarea */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n  // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variantProp","onChange","label","labelTooltip","description","error","inputProps","variant","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAASC;AAAA,MACT,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX;AAGJ,IAAI,QAAQ,IAAI,aAAa,gBAAgBK,MAAgB,WAC3D,QAAQ;AAAA,MACN;AAAA,IAAA;AAQJ,UAAMO,IAAUP,MAAgBK,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaF,GACfG,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAV,IAAWU,CAAK,GAChBb,IAAgBa,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACV,GAAUH,CAAa;AAAA,IAAA,GAGpBc,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAf,GAAM,SAAAQ,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAV;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAa;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAd;AAAA,QACA,UAAAM;AAAA,QACA,cAAAL;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAU;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAAtB;AAAA,gBACA,WAAWgB;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGH;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnB;AAAA,QACA,WAAWgB;AAAA,QACX,UAAUH;AAAA,QACT,GAAGH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAM0B,IAAW1B;"}

package/dist/chunks/{input-group-bidweffa0zyg8gt0.js → input-group-bm9wxzovpvzn1c25.js}

@@ -2,9 +2,9 @@
 import { jsx as s, jsxs as O, Fragment as $ } from "react/jsx-runtime";
 import P, { createContext as T, Children as _, isValidElement as E, useContext as V, forwardRef as m, cloneElement as H, useId as J, useMemo as Q } from "react";
 import { c as l } from "./cn-ct4n7r74mh8y0f48.js";
-import { I as W, i as A } from "./input-ncfowphv81yq7fyy.js";
-import { F as C } from "./field-c0wf94plit2gci59.js";
-import { B as X } from "./button-6by9ntsa3nj553mq.js";
+import { I as W, i as A } from "./input-2y9vg81trmamkb6k.js";
+import { F as C } from "./field-dgf36p7cmz1crlnu.js";
+import { B as X } from "./button-dh366jtvswxj0fw3.js";
 import { T as Y } from "./tooltip-odudhkxe282wxinq.js";
 const G = {
   xs: {
@@ -502,4 +502,4 @@ export {
   dt as K,
   pt as a
 };
-//# sourceMappingURL=input-group-bidweffa0zyg8gt0.js.map
+//# sourceMappingURL=input-group-bm9wxzovpvzn1c25.js.map