@cloudflare/kumo 1.17.0 → 1.18.0

package/dist/chunks/{input-kvhyo3p4859bexvx.js → input-h48k3uagzrgb98au.js}

@@ -1,9 +1,9 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
+import { jsx as p } from "react/jsx-runtime";
+import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
 import { forwardRef as I } from "react";
-import { F as k } from "./field-fq504lyu7ttsh5m9.js";
-import { I as v } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
+import { F as E } from "./field-krp6z6vfbkrvufz2.js";
+import { I as N } from "./vendor-base-ui-k7bzesq81ie36nya.js";
 const c = {
   size: {
     xs: {
@@ -25,7 +25,7 @@ const c = {
   },
   variant: {
     default: {
-      classes: "focus:ring-kumo-ring",
+      classes: "focus:ring-kumo-hairline",
       description: "Default input appearance"
     },
     error: {
@@ -37,73 +37,77 @@ const c = {
   size: "base",
   variant: "default"
 };
-function N({
-  variant: s = u.variant,
-  size: r = u.size,
+function k({
+  variant: r = u.variant,
+  size: s = u.size,
   parentFocusIndicator: o = !1,
   focusIndicator: i = !1
 } = {}) {
-  return p(
+  return d(
     // Base styles
     "border-0 bg-kumo-control text-kumo-default ring ring-kumo-line",
     // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)
     "kumo-input-placeholder disabled:text-kumo-subtle",
     // Apply size styles from KUMO_INPUT_VARIANTS
-    c.size[r].classes,
+    c.size[s].classes,
     // Apply variant styles from KUMO_INPUT_VARIANTS
-    c.variant[s].classes,
+    c.variant[r].classes,
     // Focus state handling
-    o && "focus-within:ring-kumo-ring",
-    i && "focus:ring-kumo-ring"
+    o && "focus-within:ring-kumo-hairline",
+    i && "focus:ring-kumo-hairline"
   );
 }
-const A = I((s, r) => {
+const y = I((r, s) => {
   const {
     className: o,
     size: i = "base",
-    variant: d = "default",
+    variant: n,
     label: t,
     labelTooltip: m,
     description: f,
-    error: a,
-    ...e
-  } = s, { required: b } = e;
+    error: e,
+    ...a
+  } = r;
+  process.env.NODE_ENV !== "production" && n === "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 b = n ?? (e ? "error" : "default"), { required: h } = a;
   if (process.env.NODE_ENV !== "production") {
-    const g = !!t, h = !!(e.placeholder && e["aria-label"]), x = !!e["aria-labelledby"];
-    !g && !h && !x && console.warn(
+    const g = !!t, v = !!(a.placeholder && a["aria-label"]), x = !!a["aria-labelledby"];
+    !g && !v && !x && console.warn(
       `[Kumo Input]: Input must have an accessible name. Provide either:
   - label prop: <Input label='Email' />
   - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />
   - aria-labelledby for custom label association`
     );
   }
-  const n = /* @__PURE__ */ l(
-    v,
+  const l = /* @__PURE__ */ p(
+    N,
     {
-      ref: r,
-      className: p(
-        N({ size: i, variant: d, focusIndicator: !0 }),
+      ref: s,
+      className: d(
+        k({ size: i, variant: b, focusIndicator: !0 }),
         o
       ),
-      ...e
+      ...a
     }
   );
-  return t ? /* @__PURE__ */ l(
-    k,
+  return t ? /* @__PURE__ */ p(
+    E,
     {
       label: t,
-      required: b,
+      required: h,
       labelTooltip: m,
       description: f,
-      error: a ? typeof a == "string" ? { message: a, match: !0 } : a : void 0,
-      children: n
+      error: e ? typeof e == "string" ? { message: e, match: !0 } : e : void 0,
+      children: l
     }
-  ) : n;
+  ) : l;
 });
-A.displayName = "Input";
+y.displayName = "Input";
 export {
-  A as I,
+  y as I,
   c as K,
-  N as i
+  k as i
 };
-//# sourceMappingURL=input-kvhyo3p4859bexvx.js.map
+//# sourceMappingURL=input-h48k3uagzrgb98au.js.map

package/dist/chunks/input-h48k3uagzrgb98au.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-h48k3uagzrgb98au.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\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-hairline\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\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\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator && \"focus-within:ring-kumo-hairline\",\n    focusIndicator && \"focus:ring-kumo-hairline\",\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 hasPlaceholderAndAriaLabel = Boolean(\n      inputProps.placeholder && inputProps[\"aria-label\"],\n    );\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - placeholder + aria-label: <Input placeholder='Email' 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","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,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,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAASS;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,QAAMV,IAAUU,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;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/{label-j9owppbgnn35mebg.js → label-latndvb1ngem7we8.js}

@@ -2,8 +2,8 @@
 import { jsx as e, jsxs as c, Fragment as f } from "react/jsx-runtime";
 import { Info as u } from "@phosphor-icons/react";
 import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
-import { B as p } from "./button-odxi0hp4fvi5i2w3.js";
-import { T as d } from "./tooltip-cit9ltlxfuhwctuj.js";
+import { B as p } from "./button-cdxnqcgzwko8ooha.js";
+import { T as d } from "./tooltip-belkznz8t8333h5f.js";
 const T = {
   // Label currently has no variant options but structure is ready for future additions
 }, g = {};
@@ -59,4 +59,4 @@ export {
   g as b,
   h as l
 };
-//# sourceMappingURL=label-j9owppbgnn35mebg.js.map
+//# sourceMappingURL=label-latndvb1ngem7we8.js.map

package/dist/chunks/{label-j9owppbgnn35mebg.js.map → label-latndvb1ngem7we8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"label-j9owppbgnn35mebg.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n  return cn(\n    // Base styles - when used standalone, apply text styling\n    // When used inside Field, the parent FieldBase.Label provides these styles\n    \"m-0 text-base font-medium text-kumo-default\",\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\",\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-kumo-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip content={tooltip} asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"xs\"\n            shape=\"square\"\n            aria-label=\"More information\"\n          >\n            <Info className=\"size-4\" />\n          </Button>\n        </Tooltip>\n      )}\n    </>\n  );\n\n  // When used as content inside another styled element, just render inline\n  if (asContent) {\n    return (\n      <span className={cn(labelContentVariants(), className)}>{content}</span>\n    );\n  }\n\n  // When used standalone, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAAS,SAAO,IAChC,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,EAC3B,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
+{"version":3,"file":"label-latndvb1ngem7we8.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n  // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n  return cn(\n    // Base styles - when used standalone, apply text styling\n    // When used inside Field, the parent FieldBase.Label provides these styles\n    \"m-0 text-base font-medium text-kumo-default\",\n  );\n}\n\nexport function labelContentVariants() {\n  return cn(\n    // Content wrapper styles - always applied\n    \"inline-flex items-center gap-1\",\n  );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n  /** The label content — can be a string or any React node. */\n  children: ReactNode;\n  /** When `true`, shows gray \"(optional)\" text after the label. */\n  showOptional?: boolean;\n  /** Tooltip content displayed next to the label via an info icon. */\n  tooltip?: ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The id of the form element this label is associated with */\n  htmlFor?: string;\n  /**\n   * When true, only renders the inline content (indicators, tooltip) without\n   * the outer label element with font styling. Useful when composed inside another\n   * label element that already provides the text styling.\n   * @default false\n   */\n  asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n *   <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n  children,\n  showOptional = false,\n  tooltip,\n  className,\n  htmlFor,\n  asContent = false,\n}: LabelProps) {\n  const content = (\n    <>\n      {children}\n      {showOptional && (\n        <span className=\"font-normal text-kumo-strong\">(optional)</span>\n      )}\n      {tooltip && (\n        <Tooltip content={tooltip} asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"xs\"\n            shape=\"square\"\n            aria-label=\"More information\"\n          >\n            <Info className=\"size-4\" />\n          </Button>\n        </Tooltip>\n      )}\n    </>\n  );\n\n  // When used as content inside another styled element, just render inline\n  if (asContent) {\n    return (\n      <span className={cn(labelContentVariants(), className)}>{content}</span>\n    );\n  }\n\n  // When used standalone, render as <label> for accessibility\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(labelVariants(), labelContentVariants(), className)}\n    >\n      {content}\n    </label>\n  );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAAS,SAAO,IAChC,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,EAC3B,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}

package/dist/chunks/{link-hmmf3k1xn6rm72rt.js → link-hn5ejal7nhh0o0b4.js}

@@ -3,7 +3,7 @@ import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
 import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
 import { u as p } from "./link-provider-mn2voeohon7cj9o4.js";
-import { b3 as f, b4 as L } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
+import { b6 as f, b7 as L } from "./vendor-base-ui-k7bzesq81ie36nya.js";
 const i = (n) => /* @__PURE__ */ d(
   "svg",
   {
@@ -76,4 +76,4 @@ export {
   h as a,
   C as l
 };
-//# sourceMappingURL=link-hmmf3k1xn6rm72rt.js.map
+//# sourceMappingURL=link-hn5ejal7nhh0o0b4.js.map

package/dist/chunks/{link-hmmf3k1xn6rm72rt.js.map → link-hn5ejal7nhh0o0b4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"link-hmmf3k1xn6rm72rt.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  useLinkComponent,\n  type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    className=\"link-external-icon\"\n    {...props}\n  >\n    <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n    <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n  </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Inline text link that flows with content\",\n    },\n    current: {\n      classes:\n        \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Link that inherits color from parent text\",\n    },\n    plain: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link hover:text-kumo-link/70 transition-colors\",\n      description: \"Link without underline decoration\",\n    },\n  },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n  variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n  /**\n   * Visual style of the link.\n   * - `\"inline\"` — Inline text link that flows with content\n   * - `\"current\"` — Link that inherits color from parent text\n   * - `\"plain\"` — Link without underline decoration\n   * @default \"inline\"\n   */\n  variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n  variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n  return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n  LinkComponentProps &\n  KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n *   Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, variant = \"inline\", render, ...props },\n  ref,\n) {\n  const LinkComponent = useLinkComponent();\n\n  const defaultProps: useRender.ElementProps<\"a\"> = {\n    className: cn(\n      linkVariants({ variant }),\n      \"group/link inline-flex items-center gap-[0.1875em]\",\n    ),\n  };\n\n  const element = useRender({\n    render: render ?? <LinkComponent />,\n    ref,\n    props: mergeProps<\"a\">(defaultProps, props, { className }),\n  });\n\n  return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n  ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}
+{"version":3,"file":"link-hn5ejal7nhh0o0b4.js","sources":["../../src/components/link/link.tsx"],"sourcesContent":["import { forwardRef, type SVGProps } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { cn } from \"../../utils/cn\";\nimport {\n  useLinkComponent,\n  type LinkComponentProps,\n} from \"../../utils/link-provider\";\n\n/**\n * ExternalIcon - Visual indicator for links that open in a new tab/window.\n *\n * Use this as a child of Link to indicate external navigation:\n * ```tsx\n * <Link href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Example <Link.ExternalIcon />\n * </Link>\n * ```\n */\nconst ExternalIcon = (props: SVGProps<SVGSVGElement>) => (\n  <svg\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden=\"true\"\n    className=\"link-external-icon\"\n    {...props}\n  >\n    <path d=\"M9 4H8.8C7.11984 4 6.27976 4 5.63803 4.32698C5.07354 4.6146 4.6146 5.07354 4.32698 5.63803C4 6.27976 4 7.11984 4 8.8V15.2C4 16.8802 4 17.7202 4.32698 18.362C4.6146 18.9265 5.07354 19.3854 5.63803 19.673C6.27976 20 7.11984 20 8.8 20H15.2C16.8802 20 17.7202 20 18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362C20 17.7202 20 16.8802 20 15.2V15\" />\n    <path d=\"M14 4H20M20 4V10M20 4L11 13\" />\n  </svg>\n);\n\nExternalIcon.displayName = \"Link.ExternalIcon\";\n\n/** Link variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_LINK_VARIANTS = {\n  variant: {\n    inline: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Inline text link that flows with content\",\n    },\n    current: {\n      classes:\n        \"text-current underline underline-offset-[0.15em] decoration-[0.0625em] link-current transition-colors\",\n      description: \"Link that inherits color from parent text\",\n    },\n    plain: {\n      classes:\n        // text-kumo-link provides defensive color that won't be overridden by global `a` styles\n        \"text-kumo-link hover:text-kumo-link/70 transition-colors\",\n      description: \"Link without underline decoration\",\n    },\n  },\n} as const;\n\nexport const KUMO_LINK_DEFAULT_VARIANTS = {\n  variant: \"inline\",\n} as const;\n\nexport type KumoLinkVariant = keyof typeof KUMO_LINK_VARIANTS.variant;\n\nexport interface KumoLinkVariantsProps {\n  /**\n   * Visual style of the link.\n   * - `\"inline\"` — Inline text link that flows with content\n   * - `\"current\"` — Link that inherits color from parent text\n   * - `\"plain\"` — Link without underline decoration\n   * @default \"inline\"\n   */\n  variant?: KumoLinkVariant;\n}\n\nexport function linkVariants({\n  variant = KUMO_LINK_DEFAULT_VARIANTS.variant,\n}: KumoLinkVariantsProps = {}) {\n  return cn(KUMO_LINK_VARIANTS.variant[variant].classes);\n}\n\n/**\n * Link component props.\n *\n * @example\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * <Link render={<RouterLink to=\"/dashboard\" />}>Dashboard</Link>\n * ```\n */\nexport type LinkProps = useRender.ComponentProps<\"a\"> &\n  LinkComponentProps &\n  KumoLinkVariantsProps;\n\n/**\n * Link component for consistent inline text links.\n *\n * Supports composition via `render` prop for framework-specific routing:\n * - Without render: renders via LinkProvider (default anchor or configured component)\n * - With render: merges props onto the provided element with proper ref/event handling\n *\n * @example Basic usage\n * ```tsx\n * <Link href=\"/docs\">Learn more</Link>\n * ```\n *\n * @example External link with icon\n * ```tsx\n * <Link href=\"https://cloudflare.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n *   Visit Cloudflare <Link.ExternalIcon />\n * </Link>\n * ```\n *\n * @example Composition with React Router\n * ```tsx\n * <Link render={<RouterLink to=\"/dashboard\" />} variant=\"inline\">\n *   Dashboard\n * </Link>\n * ```\n */\nconst LinkBase = forwardRef<HTMLAnchorElement, LinkProps>(function Link(\n  { className, variant = \"inline\", render, ...props },\n  ref,\n) {\n  const LinkComponent = useLinkComponent();\n\n  const defaultProps: useRender.ElementProps<\"a\"> = {\n    className: cn(\n      linkVariants({ variant }),\n      \"group/link inline-flex items-center gap-[0.1875em]\",\n    ),\n  };\n\n  const element = useRender({\n    render: render ?? <LinkComponent />,\n    ref,\n    props: mergeProps<\"a\">(defaultProps, props, { className }),\n  });\n\n  return element;\n});\n\nLinkBase.displayName = \"Link\";\n\n// Compound component with ExternalIcon subcomponent\nexport const Link = Object.assign(LinkBase, {\n  ExternalIcon,\n});\n"],"names":["ExternalIcon","props","jsxs","jsx","KUMO_LINK_VARIANTS","KUMO_LINK_DEFAULT_VARIANTS","linkVariants","variant","cn","LinkBase","forwardRef","className","render","ref","LinkComponent","useLinkComponent","defaultProps","useRender","mergeProps","Link"],"mappings":";;;;;;AAmBA,MAAMA,IAAe,CAACC,MACpB,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,eAAc;AAAA,IACd,gBAAe;AAAA,IACf,eAAY;AAAA,IACZ,WAAU;AAAA,IACT,GAAGD;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAE,EAAC,QAAA,EAAK,GAAE,kWAAA,CAAkW;AAAA,MAC1W,gBAAAA,EAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGFH,EAAa,cAAc;AAGpB,MAAMI,IAAqB;AAAA,EAChC,SAAS;AAAA,IACP,QAAQ;AAAA,MACN;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SACE;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL;AAAA;AAAA,QAEE;AAAA;AAAA,MACF,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA6B;AAAA,EACxC,SAAS;AACX;AAeO,SAASC,EAAa;AAAA,EAC3B,SAAAC,IAAUF,EAA2B;AACvC,IAA2B,IAAI;AAC7B,SAAOG,EAAGJ,EAAmB,QAAQG,CAAO,EAAE,OAAO;AACvD;AA4CA,MAAME,IAAWC,EAAyC,SACxD,EAAE,WAAAC,GAAW,SAAAJ,IAAU,UAAU,QAAAK,GAAQ,GAAGX,EAAA,GAC5CY,GACA;AACA,QAAMC,IAAgBC,EAAA,GAEhBC,IAA4C;AAAA,IAChD,WAAWR;AAAA,MACTF,EAAa,EAAE,SAAAC,GAAS;AAAA,MACxB;AAAA,IAAA;AAAA,EACF;AASF,SANgBU,EAAU;AAAA,IACxB,QAAQL,KAAU,gBAAAT,EAACW,GAAA,CAAA,CAAc;AAAA,IACjC,KAAAD;AAAA,IACA,OAAOK,EAAgBF,GAAcf,GAAO,EAAE,WAAAU,GAAW;AAAA,EAAA,CAC1D;AAGH,CAAC;AAEDF,EAAS,cAAc;AAGhB,MAAMU,IAAO,OAAO,OAAOV,GAAU;AAAA,EAC1C,cAAAT;AACF,CAAC;"}

package/dist/chunks/{loader-m5wfmqwgucrr4i5v.js → loader-hr2w7cpqeev3p3vl.js}

@@ -18,16 +18,17 @@ const n = {
 }, a = {
   size: "base"
 };
-function o({
+function l({
   size: e = a.size
 } = {}) {
   return typeof e == "number" ? e : n.size[e].value;
 }
-const u = ({
+const d = ({
   className: e,
-  size: s = a.size
+  size: s = a.size,
+  "aria-label": o = "Loading"
 }) => {
-  const r = o({ size: s });
+  const r = l({ size: s });
   return /* @__PURE__ */ i(
     "svg",
     {
@@ -38,6 +39,8 @@ const u = ({
       stroke: "currentColor",
       className: e,
       style: { height: r, width: r },
+      role: "status",
+      "aria-label": o,
       children: [
         /* @__PURE__ */ i(
           "circle",
@@ -100,6 +103,6 @@ const u = ({
   );
 };
 export {
-  u as L
+  d as L
 };
-//# sourceMappingURL=loader-m5wfmqwgucrr4i5v.js.map
+//# sourceMappingURL=loader-hr2w7cpqeev3p3vl.js.map

package/dist/chunks/loader-hr2w7cpqeev3p3vl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-hr2w7cpqeev3p3vl.js","sources":["../../src/components/loader/loader.tsx"],"sourcesContent":["/** Loader size variant definitions mapping sizes to their pixel values. */\nexport const KUMO_LOADER_VARIANTS = {\n  size: {\n    sm: {\n      value: 16,\n      description: \"Small loader for inline use\",\n    },\n    base: {\n      value: 24,\n      description: \"Default loader size\",\n    },\n    lg: {\n      value: 32,\n      description: \"Large loader for prominent loading states\",\n    },\n  },\n} as const;\n\nexport const KUMO_LOADER_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\n// Derived types from KUMO_LOADER_VARIANTS\nexport type KumoLoaderSize = keyof typeof KUMO_LOADER_VARIANTS.size;\n\nexport interface KumoLoaderVariantsProps {\n  /**\n   * Size of the loader. Use a preset name or a custom pixel number.\n   * - `\"sm\"` — 16px, small loader for inline use\n   * - `\"base\"` — 24px, default loader size\n   * - `\"lg\"` — 32px, large loader for prominent loading states\n   * @default \"base\"\n   */\n  size?: KumoLoaderSize | number;\n}\n\nexport function loaderVariants({\n  size = KUMO_LOADER_DEFAULT_VARIANTS.size,\n}: KumoLoaderVariantsProps = {}): number {\n  if (typeof size === \"number\") return size;\n  return KUMO_LOADER_VARIANTS.size[size].value;\n}\n\n/**\n * Loader component props.\n *\n * @example\n * ```tsx\n * <Loader />\n * <Loader size=\"sm\" />\n * <Loader size={24} />\n * ```\n */\nexport interface LoaderProps {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /**\n   * Size of the spinner. Use a preset name or a custom pixel number.\n   * - `\"sm\"` — 16px, for inline use\n   * - `\"base\"` — 24px, default size\n   * - `\"lg\"` — 32px, for prominent loading states\n   * @default \"base\"\n   */\n  size?: KumoLoaderSize | number;\n  /**\n   * Accessible label for the loader, announced by screen readers.\n   * Pass a translated string for internationalization.\n   * @default \"Loading\"\n   */\n  \"aria-label\"?: string;\n}\n\n/**\n * Animated circular spinner for indicating loading states.\n *\n * @example\n * ```tsx\n * <Loader />\n * ```\n */\nexport const Loader = ({\n  className,\n  size = KUMO_LOADER_DEFAULT_VARIANTS.size,\n  \"aria-label\": ariaLabel = \"Loading\",\n}: LoaderProps) => {\n  const sizeValue = loaderVariants({ size });\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      stroke=\"currentColor\"\n      className={className}\n      style={{ height: sizeValue, width: sizeValue }}\n      role=\"status\"\n      aria-label={ariaLabel}\n    >\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9.5\"\n        fill=\"none\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      >\n        <animateTransform\n          attributeName=\"transform\"\n          type=\"rotate\"\n          from=\"0 12 12\"\n          to=\"360 12 12\"\n          dur=\"2s\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-dasharray\"\n          values=\"0 150;42 150;42 150\"\n          keyTimes=\"0;0.5;1\"\n          dur=\"1.5s\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-dashoffset\"\n          values=\"0;-16;-59\"\n          keyTimes=\"0;0.5;1\"\n          dur=\"1.5s\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9.5\"\n        fill=\"none\"\n        opacity={0.1}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n};\n"],"names":["KUMO_LOADER_VARIANTS","KUMO_LOADER_DEFAULT_VARIANTS","loaderVariants","size","Loader","className","ariaLabel","sizeValue","jsxs","jsx"],"mappings":";;AACO,MAAMA,IAAuB;AAAA,EAClC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA+B;AAAA,EAC1C,MAAM;AACR;AAgBO,SAASC,EAAe;AAAA,EAC7B,MAAAC,IAAOF,EAA6B;AACtC,IAA6B,IAAY;AACvC,SAAI,OAAOE,KAAS,WAAiBA,IAC9BH,EAAqB,KAAKG,CAAI,EAAE;AACzC;AAuCO,MAAMC,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,MAAAF,IAAOF,EAA6B;AAAA,EACpC,cAAcK,IAAY;AAC5B,MAAmB;AACjB,QAAMC,IAAYL,EAAe,EAAE,MAAAC,GAAM;AACzC,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,QAAO;AAAA,MACP,WAAAH;AAAA,MACA,OAAO,EAAE,QAAQE,GAAW,OAAOA,EAAA;AAAA,MACnC,MAAK;AAAA,MACL,cAAYD;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,aAAY;AAAA,YACZ,eAAc;AAAA,YAEd,UAAA;AAAA,cAAA,gBAAAC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,IAAG;AAAA,kBACH,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEd,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,QAAO;AAAA,kBACP,UAAS;AAAA,kBACT,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEd,gBAAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAc;AAAA,kBACd,QAAO;AAAA,kBACP,UAAS;AAAA,kBACT,KAAI;AAAA,kBACJ,aAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA,YACL,SAAS;AAAA,YACT,aAAY;AAAA,YACZ,eAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/chunks/{menubar-abojnm0uwjuni8ok.js → menubar-f1pilzooe5mue7c4.js}

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as c } from "react/jsx-runtime";
-import { T as g } from "./tooltip-cit9ltlxfuhwctuj.js";
+import { T as g } from "./tooltip-belkznz8t8333h5f.js";
 import { c as h } from "./cn-ct4n7r74mh8y0f48.js";
 import { IconContext as w } from "@phosphor-icons/react";
 import { useRef as p, useEffect as y } from "react";
@@ -89,4 +89,4 @@ export {
   I as M,
   E as u
 };
-//# sourceMappingURL=menubar-abojnm0uwjuni8ok.js.map
+//# sourceMappingURL=menubar-f1pilzooe5mue7c4.js.map

package/dist/chunks/{menubar-abojnm0uwjuni8ok.js.map → menubar-f1pilzooe5mue7c4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"menubar-abojnm0uwjuni8ok.js","sources":["../../src/components/menubar/use-menu-navigation.ts","../../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-kumo-recessed bg-kumo-recessed pl-px shadow-xs transition-colors\",\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip} asChild>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-recessed first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-2 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n          },\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"isolate flex rounded-lg border border-kumo-fill bg-kumo-recessed pl-px shadow-xs transition-colors\",\n        className,\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}
+{"version":3,"file":"menubar-f1pilzooe5mue7c4.js","sources":["../../src/components/menubar/use-menu-navigation.ts","../../src/components/menubar/menubar.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\ntype UseMenuNavigationProps = {\n  menuRef: React.RefObject<HTMLElement | null>;\n  direction?: \"horizontal\" | \"vertical\"; // Default: horizontal\n};\n\nexport const useMenuNavigation = ({\n  menuRef,\n  direction = \"horizontal\",\n}: UseMenuNavigationProps) => {\n  const activeElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!menuRef.current) return;\n\n    const focusableElements = Array.from(\n      menuRef.current.querySelectorAll(\n        'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"])',\n      ),\n    ) as HTMLElement[];\n\n    if (focusableElements.length === 0) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (!activeElementRef.current) return;\n\n      const currentIndex = focusableElements.indexOf(activeElementRef.current);\n      let nextIndex = currentIndex;\n\n      const isHorizontal = direction === \"horizontal\";\n      const forwardKey = isHorizontal ? \"ArrowRight\" : \"ArrowDown\";\n      const backwardKey = isHorizontal ? \"ArrowLeft\" : \"ArrowUp\";\n\n      if (e.key === forwardKey) {\n        e.preventDefault();\n        nextIndex = (currentIndex + 1) % focusableElements.length;\n      } else if (e.key === backwardKey) {\n        e.preventDefault();\n        nextIndex =\n          (currentIndex - 1 + focusableElements.length) %\n          focusableElements.length;\n      } else {\n        return;\n      }\n\n      const nextElement = focusableElements[nextIndex];\n      activeElementRef.current = nextElement;\n      nextElement.focus();\n    };\n\n    const addKeyListener = () =>\n      document.addEventListener(\"keydown\", handleKeyDown);\n    const removeKeyListener = () =>\n      document.removeEventListener(\"keydown\", handleKeyDown);\n\n    const handleFocusIn = () => {\n      activeElementRef.current = document.activeElement as HTMLElement;\n      addKeyListener();\n    };\n\n    const handleFocusOut = () => {\n      activeElementRef.current = null;\n      removeKeyListener();\n    };\n\n    menuRef.current.addEventListener(\"focusin\", handleFocusIn);\n    menuRef.current.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      menuRef.current?.removeEventListener(\"focusin\", handleFocusIn);\n      menuRef.current?.removeEventListener(\"focusout\", handleFocusOut);\n      removeKeyListener();\n    };\n  }, [menuRef, direction]);\n};\n","import { Tooltip } from \"../tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { IconContext } from \"@phosphor-icons/react\";\nimport React, { useRef } from \"react\";\nimport { useMenuNavigation } from \"./use-menu-navigation\";\n\n/** MenuBar variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_MENUBAR_VARIANTS = {\n  // MenuBar currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_MENUBAR_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_MENUBAR_VARIANTS\nexport interface KumoMenuBarVariantsProps {}\n\nexport function menuBarVariants(_props: KumoMenuBarVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex rounded-lg border border-kumo-recessed bg-kumo-recessed pl-px shadow-xs transition-colors\",\n  );\n}\n\n/** Props for an individual menu option within a MenuBar. */\ntype MenuOptionProps = {\n  /** Icon element (typically from `@phosphor-icons/react`) rendered at 18px */\n  icon: React.ReactNode;\n  /** Unique identifier for the option (used when `optionIds` is true) */\n  id?: number | string;\n  /** Currently active value from the parent MenuBar */\n  isActive?: number | boolean | string | undefined;\n  /** Callback when this option is clicked */\n  onClick: () => void;\n  /** Tooltip text shown on hover */\n  tooltip: string;\n};\n\nconst MenuOption = ({\n  icon,\n  id,\n  isActive,\n  onClick,\n  tooltip,\n}: MenuOptionProps) => {\n  return (\n    <Tooltip content={tooltip} asChild>\n      <button\n        className={cn(\n          \"focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-recessed first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]\",\n          {\n            \"z-2 bg-kumo-base shadow-xs transition-colors\": isActive === id,\n          },\n        )}\n        onClick={onClick}\n      >\n        <IconContext.Provider value={{ size: 18 }} {...({} as any)}>\n          {icon}\n        </IconContext.Provider>\n      </button>\n    </Tooltip>\n  );\n};\n\n/**\n * MenuBar component props.\n *\n * Horizontal icon-button toolbar with keyboard navigation and tooltip labels.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={activeIndex}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List view\", onClick: () => setView(\"list\") },\n *     { icon: <GridFourIcon />, tooltip: \"Grid view\", onClick: () => setView(\"grid\") },\n *   ]}\n * />\n * ```\n */\ntype MenuBarProps = {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** The currently active option value — matched against option index or `id`. */\n  isActive: number | boolean | string | undefined;\n  /** Array of menu option configurations. */\n  options: MenuOptionProps[];\n  /** When true, each option's `id` field is used for matching instead of its array index. */\n  optionIds?: boolean;\n};\n\n/**\n * MenuBar — horizontal icon-button toolbar with keyboard arrow-key navigation.\n *\n * Each option renders as a `<button>` with a Tooltip. The active option is\n * visually highlighted with an elevated background.\n *\n * @example\n * ```tsx\n * <MenuBar\n *   isActive={0}\n *   options={[\n *     { icon: <ListIcon />, tooltip: \"List\", onClick: () => {} },\n *     { icon: <GridFourIcon />, tooltip: \"Grid\", onClick: () => {} },\n *   ]}\n * />\n * ```\n */\nexport const MenuBar = ({\n  className,\n  isActive,\n  options,\n  optionIds = false, // if option needs an extra unique ID\n}: MenuBarProps) => {\n  const menuRef = useRef<HTMLElement | null>(null);\n\n  useMenuNavigation({ menuRef, direction: \"horizontal\" });\n\n  return (\n    <nav\n      className={cn(\n        \"isolate flex rounded-lg border border-kumo-fill bg-kumo-recessed pl-px shadow-xs transition-colors\",\n        className,\n      )}\n      ref={menuRef}\n    >\n      {options.map((option, index) => (\n        <MenuOption\n          key={index}\n          {...option}\n          isActive={isActive}\n          id={optionIds ? option.id : index}\n        />\n      ))}\n    </nav>\n  );\n};\n"],"names":["useMenuNavigation","menuRef","direction","activeElementRef","useRef","useEffect","focusableElements","handleKeyDown","e","currentIndex","nextIndex","isHorizontal","forwardKey","backwardKey","nextElement","addKeyListener","removeKeyListener","handleFocusIn","handleFocusOut","MenuOption","icon","id","isActive","onClick","tooltip","jsx","Tooltip","cn","IconContext","MenuBar","className","options","optionIds","option","index"],"mappings":"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"}

package/dist/chunks/{meter-i84dte2f82qmvn7y.js → meter-gfa1hz9fhjnvx784.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as r, jsx as e, Fragment as d } from "react/jsx-runtime";
 import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
-import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-n30qblevnpk9cc5c.js";
+import { aQ as c, aR as f, aS as x, aT as b, aU as h } from "./vendor-base-ui-k7bzesq81ie36nya.js";
 function N({
   value: l,
   customValue: a,
@@ -48,4 +48,4 @@ function N({
 export {
   N as M
 };
-//# sourceMappingURL=meter-i84dte2f82qmvn7y.js.map
+//# sourceMappingURL=meter-gfa1hz9fhjnvx784.js.map

package/dist/chunks/{meter-i84dte2f82qmvn7y.js.map → meter-gfa1hz9fhjnvx784.js.map}

@@ -1 +1 @@
-{"version":3,"file":"meter-i84dte2f82qmvn7y.js","sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\",\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n          trackClassName,\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName,\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"meter-gfa1hz9fhjnvx784.js","sources":["../../src/components/meter/meter.tsx"],"sourcesContent":["import { Meter as BaseMeter } from \"@base-ui/react/meter\";\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n/** Meter variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_METER_VARIANTS = {\n  // Meter currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_METER_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_METER_VARIANTS\nexport interface KumoMeterVariantsProps {}\n\nexport function meterVariants(_props: KumoMeterVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-full flex-col gap-2\",\n  );\n}\n\ntype RootProps = ComponentPropsWithoutRef<typeof BaseMeter.Root>;\n\n/**\n * Meter component props.\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage used\" value={65} />\n * <Meter label=\"API requests\" value={75} customValue=\"750 / 1,000\" />\n * ```\n */\nexport interface MeterProps extends RootProps, KumoMeterVariantsProps {\n  /** Custom formatted value text (e.g. \"750 / 1,000\") displayed instead of percentage. */\n  customValue?: string;\n  /** Label text displayed above the meter track. */\n  label: string;\n  /**\n   * Whether to display the percentage value next to the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** Additional CSS classes for the track (background bar). */\n  trackClassName?: string;\n  /** Additional CSS classes for the indicator (filled bar). */\n  indicatorClassName?: string;\n}\n\n/**\n * Progress bar showing a measured value within a known range (e.g. quota usage).\n *\n * @example\n * ```tsx\n * <Meter label=\"Storage\" value={65} />\n * ```\n */\nexport function Meter({\n  value,\n  customValue,\n  label,\n  showValue = true,\n  className,\n  trackClassName,\n  indicatorClassName,\n  ...props\n}: MeterProps) {\n  return (\n    <BaseMeter.Root\n      value={value}\n      {...props}\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n    >\n      <div className=\"flex items-center justify-between gap-4\">\n        <BaseMeter.Label className=\"text-xs text-kumo-strong\">\n          {label}\n        </BaseMeter.Label>\n        {customValue ? (\n          <span className=\"text-sm font-medium text-kumo-default tabular-nums\">\n            {customValue}\n          </span>\n        ) : (\n          <>\n            {showValue && (\n              <BaseMeter.Value className=\"text-sm font-medium text-kumo-default tabular-nums\" />\n            )}\n          </>\n        )}\n      </div>\n      <BaseMeter.Track\n        className={cn(\n          \"relative h-2 w-full overflow-hidden rounded-full bg-kumo-fill\",\n          trackClassName,\n        )}\n      >\n        <BaseMeter.Indicator\n          className={cn(\n            \"absolute inset-y-0 left-0 rounded-full bg-linear-to-r from-kumo-brand via-kumo-brand to-kumo-brand transition-[width] duration-300 ease-out\",\n            indicatorClassName,\n          )}\n        />\n      </BaseMeter.Track>\n    </BaseMeter.Root>\n  );\n}\n"],"names":["Meter","value","customValue","label","showValue","className","trackClassName","indicatorClassName","props","jsxs","BaseMeter.Root","cn","jsx","BaseMeter.Label","Fragment","BaseMeter.Value","BaseMeter.Track","BaseMeter.Indicator"],"mappings":";;;;AAwDO,SAASA,EAAM;AAAA,EACpB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAe;AACb,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAT;AAAA,MACC,GAAGO;AAAA,MACJ,WAAWG,EAAG,8BAA8BN,CAAS;AAAA,MAErD,UAAA;AAAA,QAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,UAAA,gBAAAG,EAACC,GAAA,EAAgB,WAAU,4BACxB,UAAAV,GACH;AAAA,UACCD,IACC,gBAAAU,EAAC,QAAA,EAAK,WAAU,sDACb,UAAAV,EAAA,CACH,IAEA,gBAAAU,EAAAE,GAAA,EACG,UAAAV,uBACEW,GAAA,EAAgB,WAAU,sDAAqD,EAAA,CAEpF;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAAA,UAAA;AAAA,YACC,WAAWL;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAM;AAAA,cAACK;AAAAA,cAAA;AAAA,gBACC,WAAWN;AAAA,kBACT;AAAA,kBACAJ;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}