@cloudflare/kumo 1.16.0 → 1.18.0

package/dist/chunks/{button-j0hi0afn33w9lxgi.js → button-cdxnqcgzwko8ooha.js}

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as n, jsxs as k } from "react/jsx-runtime";
+import { jsx as a, jsxs as k } from "react/jsx-runtime";
 import f from "react";
-import { ArrowsClockwise as v } from "@phosphor-icons/react";
-import { L as z } from "./loader-m5wfmqwgucrr4i5v.js";
-import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
-import { u as w } from "./link-provider-mn2voeohon7cj9o4.js";
-const r = {
+import { ArrowsClockwise as w } from "@phosphor-icons/react";
+import { L as N } from "./loader-hr2w7cpqeev3p3vl.js";
+import { T } from "./tooltip-belkznz8t8333h5f.js";
+import { c } from "./cn-ct4n7r74mh8y0f48.js";
+import { u as B } from "./link-provider-mn2voeohon7cj9o4.js";
+const i = {
   shape: {
     base: {
       classes: "",
@@ -50,7 +51,7 @@ const r = {
       description: "High-emphasis button for primary actions"
     },
     secondary: {
-      classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-ring data-[state=open]:bg-kumo-base",
+      classes: "bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base",
       description: "Default button style for most actions"
     },
     ghost: {
@@ -66,7 +67,7 @@ const r = {
       description: "Secondary button with destructive text for less prominent dangerous actions"
     },
     outline: {
-      classes: "bg-transparent text-kumo-default ring ring-kumo-ring",
+      classes: "bg-transparent text-kumo-default ring ring-kumo-hairline",
       description: "Bordered button with transparent background"
     }
   }
@@ -75,13 +76,13 @@ const r = {
   size: "base",
   variant: "secondary"
 };
-function h({
+function x({
   variant: s = g.variant,
   size: t = g.size,
   shape: e = g.shape
 } = {}) {
   const o = e === "square" || e === "circle";
-  return i(
+  return c(
     // Base styles
     "group flex w-max shrink-0 items-center font-medium select-none",
     "border-0 shadow-xs",
@@ -89,103 +90,104 @@ function h({
     // Disabled state
     "disabled:cursor-not-allowed disabled:text-kumo-subtle",
     // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS
-    r.variant[s].classes,
-    r.size[t].classes,
-    r.shape[e].classes,
-    o && r.compactSize[t].classes
+    i.variant[s].classes,
+    i.size[t].classes,
+    i.shape[e].classes,
+    o && i.compactSize[t].classes
   );
 }
-const x = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */ n(s, {}) : null, y = f.forwardRef(
+const y = (s) => s ? f.isValidElement(s) ? s : /* @__PURE__ */ a(s, {}) : null, v = f.forwardRef(
   ({
     children: s,
     className: t,
     disabled: e,
     loading: o,
-    shape: c = "base",
-    size: a = "base",
-    variant: u = "secondary",
-    icon: d,
-    ...l
-  }, b) => {
-    const { type: m, ...p } = l;
-    return /* @__PURE__ */ k(
+    shape: u = "base",
+    size: r = "base",
+    variant: d = "secondary",
+    icon: l,
+    title: n,
+    ...b
+  }, m) => {
+    const { type: p, ...z } = b, h = /* @__PURE__ */ k(
       "button",
       {
-        ref: b,
-        className: i(
-          h({ variant: u, size: a, shape: c }),
-          "focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100",
+        ref: m,
+        className: c(
+          x({ variant: d, size: r, shape: u }),
+          "focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100",
           // Focus styles
           e && "cursor-not-allowed opacity-50",
           t
         ),
         disabled: o || e,
-        type: m ?? "button",
-        ...p,
+        type: p ?? "button",
+        ...z,
         children: [
-          o && /* @__PURE__ */ n(z, { size: a === "lg" ? 16 : 14 }),
-          !o && x(d),
+          o && /* @__PURE__ */ a(N, { size: r === "lg" ? 16 : 14 }),
+          !o && y(l),
           s
         ]
       }
     );
+    return n ? /* @__PURE__ */ a(T, { content: n, asChild: !0, children: h }) : h;
   }
 );
-y.displayName = "Button";
-const R = ({
+v.displayName = "Button";
+const j = ({
   "aria-label": s = "Refresh",
   loading: t,
   ...e
-}) => /* @__PURE__ */ n(y, { shape: "square", "aria-label": s, ...e, children: /* @__PURE__ */ n(
-  v,
+}) => /* @__PURE__ */ a(v, { shape: "square", "aria-label": s, ...e, children: /* @__PURE__ */ a(
+  w,
   {
-    className: i({
+    className: c({
       "animate-refresh": t,
       "size-4.5": e.size === "base" || !e.size,
       "size-4": e.size === "sm",
       "size-5": e.size === "lg"
     })
   }
-) }), N = f.forwardRef(
+) }), L = f.forwardRef(
   ({
     children: s,
     className: t,
     external: e,
     href: o,
-    shape: c = "base",
-    size: a = "base",
-    variant: u = "ghost",
-    icon: d,
+    shape: u = "base",
+    size: r = "base",
+    variant: d = "ghost",
+    icon: l,
     // linksExternal = false,
-    ...l
+    ...n
   }, b) => {
-    const m = w(), p = e ? { target: "_blank", rel: "noopener noreferrer" } : {};
+    const m = B(), p = e ? { target: "_blank", rel: "noopener noreferrer" } : {};
     return /* @__PURE__ */ k(
       m,
       {
         ref: b,
-        className: i(
-          h({ variant: u, size: a, shape: c }),
+        className: c(
+          x({ variant: d, size: r, shape: u }),
           "flex items-center no-underline!",
           t
         ),
         href: o,
         to: typeof o == "string" ? o : void 0,
         ...p,
-        ...l,
+        ...n,
         children: [
-          x(d),
+          y(l),
           s
         ]
       }
     );
   }
 );
-N.displayName = "LinkButton";
+L.displayName = "LinkButton";
 export {
-  y as B,
-  N as L,
-  R,
-  h as b
+  v as B,
+  L,
+  j as R,
+  x as b
 };
-//# sourceMappingURL=button-j0hi0afn33w9lxgi.js.map
+//# sourceMappingURL=button-cdxnqcgzwko8ooha.js.map

package/dist/chunks/button-cdxnqcgzwko8ooha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-cdxnqcgzwko8ooha.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import React from \"react\";\nimport { ArrowsClockwise, type Icon } from \"@phosphor-icons/react\";\nimport { Loader } from \"../loader/loader\";\nimport { Tooltip } from \"../tooltip/tooltip\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\n\n/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */\nexport const KUMO_BUTTON_VARIANTS = {\n  shape: {\n    base: {\n      classes: \"\",\n      description: \"Default rectangular button shape\",\n    },\n    square: {\n      classes: \"items-center justify-center p-0\",\n      description: \"Square button for icon-only actions\",\n    },\n    circle: {\n      classes: \"items-center justify-center p-0 rounded-full\",\n      description: \"Circular button for icon-only actions\",\n    },\n  },\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small button for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small button for secondary actions\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default button size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large button for primary CTAs\",\n    },\n  },\n  compactSize: {\n    xs: { classes: \"size-3.5\" },\n    sm: { classes: \"size-6.5\" },\n    base: { classes: \"size-9\" },\n    lg: { classes: \"size-10\" },\n  },\n  variant: {\n    primary: {\n      classes:\n        \"bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50\",\n      description: \"High-emphasis button for primary actions\",\n    },\n    secondary: {\n      classes:\n        \"bg-kumo-base !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-tint disabled:bg-kumo-base/50 disabled:!text-kumo-default/70 ring-kumo-hairline data-[state=open]:bg-kumo-base\",\n      description: \"Default button style for most actions\",\n    },\n    ghost: {\n      classes: \"text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit\",\n      description: \"Minimal button with no background\",\n    },\n    destructive: {\n      classes: \"bg-kumo-danger !text-white hover:bg-kumo-danger/70\",\n      description: \"Danger button for destructive actions like delete\",\n    },\n    \"secondary-destructive\": {\n      classes:\n        \"bg-kumo-base !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-base disabled:bg-kumo-base/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-base\",\n      description:\n        \"Secondary button with destructive text for less prominent dangerous actions\",\n    },\n    outline: {\n      classes: \"bg-transparent text-kumo-default ring ring-kumo-hairline\",\n      description: \"Bordered button with transparent background\",\n    },\n  },\n} as const;\n\nexport const KUMO_BUTTON_DEFAULT_VARIANTS = {\n  shape: \"base\",\n  size: \"base\",\n  variant: \"secondary\",\n} as const;\n\n// Derived types from KUMO_BUTTON_VARIANTS\nexport type KumoButtonShape = keyof typeof KUMO_BUTTON_VARIANTS.shape;\nexport type KumoButtonSize = keyof typeof KUMO_BUTTON_VARIANTS.size;\nexport type KumoButtonVariant = keyof typeof KUMO_BUTTON_VARIANTS.variant;\n\nexport interface KumoButtonVariantsProps {\n  /**\n   * Button shape.\n   * - `\"base\"` — Default rectangular button\n   * - `\"square\"` — Square button for icon-only actions\n   * - `\"circle\"` — Circular button for icon-only actions\n   * @default \"base\"\n   */\n  shape?: KumoButtonShape;\n  /**\n   * Button size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary actions\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for primary CTAs\n   * @default \"base\"\n   */\n  size?: KumoButtonSize;\n  /**\n   * Visual style of the button.\n   * - `\"primary\"` — High-emphasis, brand-colored for primary actions\n   * - `\"secondary\"` — Default style with border for most actions\n   * - `\"ghost\"` — Minimal, no background for tertiary actions\n   * - `\"destructive\"` — Danger button for destructive actions\n   * - `\"secondary-destructive\"` — Secondary style with destructive text\n   * - `\"outline\"` — Bordered with transparent background\n   * @default \"secondary\"\n   */\n  variant?: KumoButtonVariant;\n}\n\nexport function buttonVariants({\n  variant = KUMO_BUTTON_DEFAULT_VARIANTS.variant,\n  size = KUMO_BUTTON_DEFAULT_VARIANTS.size,\n  shape = KUMO_BUTTON_DEFAULT_VARIANTS.shape,\n}: KumoButtonVariantsProps = {}) {\n  const isCompactShape = shape === \"square\" || shape === \"circle\";\n\n  return cn(\n    // Base styles\n    \"group flex w-max shrink-0 items-center font-medium select-none\",\n    \"border-0 shadow-xs\",\n    \"cursor-pointer\",\n    // Disabled state\n    \"disabled:cursor-not-allowed disabled:text-kumo-subtle\",\n    // Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS\n    KUMO_BUTTON_VARIANTS.variant[variant].classes,\n    KUMO_BUTTON_VARIANTS.size[size].classes,\n    KUMO_BUTTON_VARIANTS.shape[shape].classes,\n    isCompactShape && KUMO_BUTTON_VARIANTS.compactSize[size].classes,\n  );\n}\n\n// Normalize icon prop to support both React elements and component types\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n  if (!IconComponent) return null;\n  if (React.isValidElement(IconComponent)) return IconComponent;\n  const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n  return <Comp />;\n};\n\n/**\n * Button component props.\n *\n * Uses a discriminated union on `shape` so that icon-only buttons\n * (`shape=\"square\"` or `shape=\"circle\"`) require an `aria-label`.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" shape=\"square\" icon={PlusIcon} aria-label=\"Add\" />\n * <Button variant=\"destructive\" loading>Deleting...</Button>\n * ```\n */\ntype ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  /** Content rendered inside the button. */\n  children?: React.ReactNode;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n  icon?: Icon | React.ReactNode;\n  /** Shows a loading spinner and disables interaction. */\n  loading?: boolean;\n  /** When set, wraps the button in a Tooltip with this content. */\n  title?: React.ReactNode;\n};\n\ntype ButtonWithTextProps = ButtonBaseProps & {\n  shape?: \"base\";\n  size?: KumoButtonSize;\n  variant?: KumoButtonVariant;\n};\n\ntype IconOnlyButtonProps = ButtonBaseProps & {\n  shape: \"square\" | \"circle\";\n  size?: KumoButtonSize;\n  variant?: KumoButtonVariant;\n  /** Required for icon-only buttons to provide accessible label for screen readers */\n  \"aria-label\": string;\n};\n\nexport type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;\n\n/**\n * LinkButton component props — renders an anchor styled as a button.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/docs\" variant=\"ghost\" icon={BookIcon}>Docs</LinkButton>\n * <LinkButton href=\"https://example.com\" external>Visit Site</LinkButton>\n * ```\n */\nexport type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  KumoButtonVariantsProps & {\n    /** Content rendered inside the link button. */\n    children?: React.ReactNode;\n    /** Additional CSS classes merged via `cn()`. */\n    className?: string;\n    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */\n    icon?: Icon | React.ReactNode;\n    /** When `true`, opens in a new tab with `rel=\"noopener noreferrer\"`. */\n    external?: boolean;\n    linksExternal?: boolean;\n  };\n\n/**\n * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\">Save</Button>\n * <Button variant=\"secondary\" icon={PlusIcon}>Create Worker</Button>\n * ```\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled,\n      loading,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"secondary\",\n      icon: IconComponent,\n      title,\n      ...props\n    },\n    ref,\n  ) => {\n    const { type, ...restProps } = props;\n    const button = (\n      <button\n        ref={ref}\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          \"focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-hairline *:in-focus:opacity-100\", // Focus styles\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        disabled={loading || disabled}\n        type={type ?? \"button\"}\n        {...restProps}\n      >\n        {loading && <Loader size={size === \"lg\" ? 16 : 14} />}\n        {!loading && renderIconNode(IconComponent)}\n\n        {children}\n      </button>\n    );\n\n    if (title) {\n      return (\n        <Tooltip content={title} asChild>\n          {button}\n        </Tooltip>\n      );\n    }\n\n    return button;\n  },\n);\n\nButton.displayName = \"Button\";\n\n/**\n * Square button with a rotating arrows icon, used to trigger data refresh actions.\n *\n * @example\n * ```tsx\n * <RefreshButton loading={isRefreshing} onClick={refresh} />\n * ```\n */\nexport const RefreshButton = ({\n  \"aria-label\": ariaLabel = \"Refresh\",\n  loading,\n  ...props\n}: ButtonProps) => (\n  <Button shape=\"square\" aria-label={ariaLabel} {...props}>\n    <ArrowsClockwise\n      className={cn({\n        \"animate-refresh\": loading,\n        \"size-4.5\": props.size === \"base\" || !props.size,\n        \"size-4\": props.size === \"sm\",\n        \"size-5\": props.size === \"lg\",\n      })}\n    />\n  </Button>\n);\n\n/**\n * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.\n *\n * @example\n * ```tsx\n * <LinkButton href=\"/settings\" variant=\"ghost\">Settings</LinkButton>\n * ```\n */\nexport const LinkButton = React.forwardRef<HTMLAnchorElement, LinkButtonProps>(\n  (\n    {\n      children,\n      className,\n      external,\n      href,\n      shape = \"base\",\n      size = \"base\",\n      variant = \"ghost\",\n      icon: IconComponent,\n      // linksExternal = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const LinkComponent = useLinkComponent();\n    const externalProps = external\n      ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n      : {};\n\n    return (\n      <LinkComponent\n        ref={ref}\n        className={cn(\n          buttonVariants({ variant, size, shape }),\n          \"flex items-center no-underline!\",\n          className,\n        )}\n        href={href}\n        to={typeof href === \"string\" ? href : undefined}\n        {...externalProps}\n        {...props}\n      >\n        {renderIconNode(IconComponent)}\n        {children}\n      </LinkComponent>\n    );\n  },\n);\n\nLinkButton.displayName = \"LinkButton\";\n"],"names":["KUMO_BUTTON_VARIANTS","KUMO_BUTTON_DEFAULT_VARIANTS","buttonVariants","variant","size","shape","isCompactShape","cn","renderIconNode","IconComponent","React","Button","children","className","disabled","loading","title","props","ref","type","restProps","button","jsxs","Loader","Tooltip","RefreshButton","ariaLabel","jsx","ArrowsClockwise","LinkButton","external","href","LinkComponent","useLinkComponent","externalProps"],"mappings":"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"}

package/dist/chunks/{checkbox-lawmt1894wr6rpgi.js → checkbox-kt1uojk2f9e0d0h1.js}

@@ -3,12 +3,12 @@ import { jsx as e, jsxs as C } from "react/jsx-runtime";
 import { forwardRef as N, createContext as B, useContext as F } from "react";
 import { MinusIcon as y, CheckIcon as w } from "@phosphor-icons/react";
 import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
-import { L as K } from "./label-i46xnnzdh9bsxk6a.js";
-import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-ccr5l0ynrievzzv3.js";
+import { L as K } from "./label-latndvb1ngem7we8.js";
+import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-k7bzesq81ie36nya.js";
 const Q = {
   variant: {
     default: {
-      classes: "[&:focus-within>span]:ring-kumo-ring [&:hover>span]:ring-kumo-ring",
+      classes: "[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline",
       description: "Default checkbox appearance"
     },
     error: {
@@ -27,18 +27,18 @@ const Q = {
     indeterminate: o,
     disabled: t,
     variant: l = "default",
-    label: a,
-    labelTooltip: d,
-    controlFirst: m = !0,
-    onCheckedChange: u,
+    label: r,
+    labelTooltip: m,
+    controlFirst: u = !0,
+    onCheckedChange: d,
     onValueChange: h,
     onChange: i,
     required: f,
-    name: g,
-    ...r
-  }, x) => {
+    name: x,
+    ...a
+  }, g) => {
     if (process.env.NODE_ENV !== "production") {
-      const n = !!a, k = !!r["aria-label"], p = !!r["aria-labelledby"];
+      const n = !!r, k = !!a["aria-label"], p = !!a["aria-labelledby"];
       !n && !k && !p && console.warn(
         `[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:
   - label prop: <Checkbox label='Accept terms' />
@@ -50,13 +50,13 @@ const Q = {
     const v = /* @__PURE__ */ e(
       j,
       {
-        ref: x,
-        name: g,
+        ref: g,
+        name: x,
         checked: c,
         indeterminate: o,
         disabled: t,
         onCheckedChange: (n, k) => {
-          if (u?.(n), h?.(n), i) {
+          if (d?.(n), h?.(n), i) {
             const p = Object.assign(k.event, {
               target: { checked: n }
             });
@@ -66,12 +66,12 @@ const Q = {
         className: b(
           "relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
           l === "error" ? "ring-kumo-danger" : "ring-kumo-line",
-          !t && "hover:ring-kumo-ring focus-visible:ring-kumo-ring",
+          !t && "hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
           "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
           t && "cursor-not-allowed opacity-50",
           s
         ),
-        ...r,
+        ...a,
         children: /* @__PURE__ */ e(
           L,
           {
@@ -82,12 +82,12 @@ const Q = {
         )
       }
     );
-    return a ? /* @__PURE__ */ e(E, { className: "inline-flex", children: /* @__PURE__ */ C(
+    return r ? /* @__PURE__ */ e(E, { className: "inline-flex", children: /* @__PURE__ */ C(
       R,
       {
         className: b(
           "!m-0 !min-h-0 !text-base inline-flex items-center gap-2",
-          m ? "flex-row" : "flex-row-reverse justify-end",
+          u ? "flex-row" : "flex-row-reverse justify-end",
           t ? "cursor-not-allowed" : "cursor-pointer"
         ),
         children: [
@@ -96,9 +96,9 @@ const Q = {
             K,
             {
               showOptional: f === !1,
-              tooltip: d,
+              tooltip: m,
               asContent: !0,
-              children: a
+              children: r
             }
           )
         ]
@@ -114,14 +114,14 @@ const I = N(
     indeterminate: o,
     disabled: t,
     variant: l = "default",
-    label: a,
-    value: d,
-    onCheckedChange: m,
-    onValueChange: u,
+    label: r,
+    value: m,
+    onCheckedChange: u,
+    onValueChange: d,
     name: h
   }, i) => {
-    const { controlFirst: f } = F(O), g = (r) => {
-      m?.(r), u?.(r);
+    const { controlFirst: f } = F(O), x = (a) => {
+      u?.(a), d?.(a);
     };
     return /* @__PURE__ */ C(
       "label",
@@ -139,16 +139,16 @@ const I = N(
             j,
             {
               ref: i,
-              value: d,
+              value: m,
               name: h,
               checked: c,
               indeterminate: o,
               disabled: t,
-              onCheckedChange: g,
+              onCheckedChange: x,
               className: b(
                 "peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
                 l === "error" ? "ring-kumo-danger" : "ring-kumo-line",
-                !t && "group-hover:ring-kumo-ring hover:ring-kumo-ring focus-visible:ring-kumo-ring",
+                !t && "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
                 "data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast"
               ),
               children: /* @__PURE__ */ e(
@@ -156,12 +156,12 @@ const I = N(
                 {
                   keepMounted: !0,
                   className: "flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible",
-                  render: (r, x) => /* @__PURE__ */ e("span", { ...r, children: x.indeterminate ? /* @__PURE__ */ e(y, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(w, { weight: "bold", size: 12 }) })
+                  render: (a, g) => /* @__PURE__ */ e("span", { ...a, children: g.indeterminate ? /* @__PURE__ */ e(y, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(w, { weight: "bold", size: 12 }) })
                 }
               )
             }
           ),
-          /* @__PURE__ */ e("span", { className: "text-base font-medium text-kumo-default", children: a })
+          /* @__PURE__ */ e("span", { className: "text-base text-kumo-default", children: r })
         ]
       }
     );
@@ -174,10 +174,10 @@ function z({
   error: o,
   description: t,
   defaultValue: l,
-  value: a,
-  onValueChange: d,
-  allValues: m,
-  disabled: u,
+  value: r,
+  onValueChange: m,
+  allValues: u,
+  disabled: d,
   controlFirst: h = !0,
   className: i
 }) {
@@ -185,25 +185,16 @@ function z({
     _,
     {
       defaultValue: l,
-      value: a,
-      onValueChange: d,
-      allValues: m,
-      disabled: u,
-      children: /* @__PURE__ */ C(
-        G,
-        {
-          className: b(
-            "flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
-            i
-          ),
-          children: [
-            /* @__PURE__ */ e(M, { className: "text-lg font-medium text-kumo-default", children: s }),
-            /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c }),
-            o && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: o }),
-            t && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: t })
-          ]
-        }
-      )
+      value: r,
+      onValueChange: m,
+      allValues: u,
+      disabled: d,
+      children: /* @__PURE__ */ C(G, { className: b("flex flex-col gap-4", i), children: [
+        /* @__PURE__ */ e(M, { className: "text-base font-medium text-kumo-default", children: s }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c }),
+        o && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: o }),
+        t && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: t })
+      ] })
     }
   ) });
 }
@@ -217,4 +208,4 @@ export {
   Q as K,
   W as a
 };
-//# sourceMappingURL=checkbox-lawmt1894wr6rpgi.js.map
+//# sourceMappingURL=checkbox-kt1uojk2f9e0d0h1.js.map

package/dist/chunks/checkbox-kt1uojk2f9e0d0h1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-kt1uojk2f9e0d0h1.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n  Checkbox as BaseCheckbox,\n  type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n  variant: {\n    default: {\n      classes:\n        \"[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline\",\n      description: \"Default checkbox appearance\",\n    },\n    error: {\n      classes: \"[&>span]:ring-kumo-danger\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n  variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard checkbox appearance\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n  variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n  return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n  controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n *   <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n *   <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n  variant?: CheckboxVariant;\n  /** Label content for the checkbox (enables built-in 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  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Whether the checkbox is checked (controlled) */\n  checked?: boolean;\n  /** Whether the checkbox is in indeterminate state */\n  indeterminate?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Click handler */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Name for form submission */\n  name?: string;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Additional class name */\n  className?: string;\n  /** Accessible label when no visible label is provided */\n  \"aria-label\"?: string;\n  /** ID of element that labels this checkbox */\n  \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n *   legend=\"Choose preferences\"\n *   defaultValue={['email']}\n *   error=\"You must select at least one option\"\n * >\n *   <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n *   <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n  /** Legend text for the group */\n  legend: string;\n  /** Child Checkbox.Item components */\n  children: ReactNode;\n  /** Error message for the group (only appears in groups, not single checkboxes) */\n  error?: string;\n  /** Helper text for the group */\n  description?: ReactNode;\n  /** Values of checkboxes that should be initially checked (uncontrolled) */\n  defaultValue?: string[];\n  /** Values of checkboxes that should be checked (controlled) */\n  value?: string[];\n  /** Event handler called when checkbox values change */\n  onValueChange?: (value: string[]) => void;\n  /** All possible checkbox values (required for parent checkbox pattern) */\n  allValues?: string[];\n  /** Whether all checkboxes in the group are disabled */\n  disabled?: boolean;\n  /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n  controlFirst?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n  /** Visual variant: \"default\" or \"error\" for validation failures */\n  variant?: CheckboxVariant;\n  /** Label text displayed next to checkbox */\n  label: string;\n  /** Value of the checkbox (required when used in Checkbox.Group) */\n  value?: string;\n  /** Additional CSS classes for the label wrapper */\n  className?: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  /** Callback when the checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n  /** @deprecated Use onCheckedChange instead */\n  onValueChange?: (checked: boolean) => void;\n  name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      labelTooltip,\n      controlFirst = true,\n      onCheckedChange,\n      onValueChange,\n      onChange,\n      required,\n      name,\n      ...props\n    },\n    ref,\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(props[\"aria-label\"]);\n      const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n      if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n        console.warn(\n          \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n            \"  - label prop: <Checkbox label='Accept terms' />\\n\" +\n            \"  - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n            \"  - aria-labelledby for custom label association\\n\" +\n            \"  Note: When used inside Checkbox.Group, label is optional\",\n        );\n      }\n    }\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n    const handleCheckedChange = (\n      newChecked: boolean,\n      eventDetails: CheckboxRootChangeEventDetails,\n    ) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n      if (onChange) {\n        // Backwards compatibility: extend native event with target.checked\n        // so existing code using `e.target.checked` continues to work\n        const event = Object.assign(eventDetails.event, {\n          target: { checked: newChecked },\n        });\n        onChange(event as never);\n      }\n    };\n\n    const checkboxControl = (\n      <BaseCheckbox.Root\n        ref={ref}\n        name={name}\n        checked={checked}\n        indeterminate={indeterminate}\n        disabled={disabled}\n        onCheckedChange={handleCheckedChange}\n        className={cn(\n          \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n          variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n          !disabled && \"hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\n          \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        <BaseCheckbox.Indicator\n          keepMounted\n          className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n          render={(renderProps, state) => (\n            <span {...renderProps}>\n              {state.indeterminate ? (\n                <MinusIcon weight=\"bold\" size={12} />\n              ) : (\n                <CheckIcon weight=\"bold\" size={12} />\n              )}\n            </span>\n          )}\n        />\n      </BaseCheckbox.Root>\n    );\n\n    // If no label provided, return bare checkbox (for use in other components like Dropdown)\n    if (!label) {\n      return checkboxControl;\n    }\n\n    // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n    // See: https://base-ui.com/react/components/field\n    return (\n      <FieldBase.Root className=\"inline-flex\">\n        <FieldBase.Label\n          className={cn(\n            \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n            controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n            disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n          )}\n        >\n          {checkboxControl}\n          <Label\n            showOptional={required === false}\n            tooltip={labelTooltip}\n            asContent\n          >\n            {label}\n          </Label>\n        </FieldBase.Label>\n      </FieldBase.Root>\n    );\n  },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n  (\n    {\n      className,\n      checked,\n      indeterminate,\n      disabled,\n      variant = \"default\",\n      label,\n      value,\n      onCheckedChange,\n      onValueChange,\n      name,\n    },\n    ref,\n  ) => {\n    const { controlFirst } = useContext(CheckboxGroupContext);\n\n    // Handle onCheckedChange (preferred) and deprecated onValueChange\n    const handleCheckedChange = (newChecked: boolean) => {\n      onCheckedChange?.(newChecked);\n      onValueChange?.(newChecked);\n    };\n\n    return (\n      <label\n        className={cn(\n          \"m-0 relative inline-flex items-center gap-2\",\n          // Control first (default): checkbox before label\n          // Label first: label before checkbox using flex-row-reverse\n          !controlFirst && \"flex-row-reverse justify-end\",\n          disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n          className,\n        )}\n      >\n        <BaseCheckbox.Root\n          ref={ref}\n          value={value}\n          name={name}\n          checked={checked}\n          indeterminate={indeterminate}\n          disabled={disabled}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n            variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-line\",\n            !disabled &&\n              \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\n            \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n          )}\n        >\n          <BaseCheckbox.Indicator\n            keepMounted\n            className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n            render={(renderProps, state) => (\n              <span {...renderProps}>\n                {state.indeterminate ? (\n                  <MinusIcon weight=\"bold\" size={12} />\n                ) : (\n                  <CheckIcon weight=\"bold\" size={12} />\n                )}\n              </span>\n            )}\n          />\n        </BaseCheckbox.Root>\n        <span className=\"text-base text-kumo-default\">{label}</span>\n      </label>\n    );\n  },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n  legend,\n  children,\n  error,\n  description,\n  defaultValue,\n  value,\n  onValueChange,\n  allValues,\n  disabled,\n  controlFirst = true,\n  className,\n}: CheckboxGroupProps) {\n  return (\n    <CheckboxGroupContext.Provider value={{ controlFirst }}>\n      <BaseCheckboxGroup\n        defaultValue={defaultValue}\n        value={value}\n        onValueChange={onValueChange}\n        allValues={allValues}\n        disabled={disabled}\n      >\n        <Fieldset.Root className={cn(\"flex flex-col gap-4\", className)}>\n          <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n            {legend}\n          </Fieldset.Legend>\n          <div className=\"flex flex-col gap-2\">{children}</div>\n          {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n          {description && (\n            <p className=\"text-sm text-kumo-subtle\">{description}</p>\n          )}\n        </Fieldset.Root>\n      </BaseCheckboxGroup>\n    </CheckboxGroupContext.Provider>\n  );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n  Item: CheckboxItem,\n  Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}