@humain/ui 2.2.3 → 2.2.5

package/dist/wc-react/Badge.js

@@ -1,8 +1,8 @@
-import { f as s } from "./_shared.js";
+import { f as a } from "./_shared.js";
 import { t as N } from "./x.js";
 import { t as w } from "./dist.js";
 import { forwardRef as k } from "react";
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
 var z = w("inline-flex items-center justify-center gap-1.5 font-medium transition-colors whitespace-nowrap shrink-0 [&>svg]:pointer-events-none [&>svg]:shrink-0", {
   variants: {
     variant: {
@@ -55,22 +55,22 @@ var z = w("inline-flex items-center justify-center gap-1.5 font-medium transitio
     {
       variant: "solid",
       color: "info",
-      className: "bg-info text-primary-foreground hover:bg-info/90"
+      className: "bg-info text-info-foreground hover:bg-info/90"
     },
     {
       variant: "solid",
       color: "success",
-      className: "bg-success text-primary-foreground hover:bg-success/90"
+      className: "bg-success text-success-foreground hover:bg-success/90"
     },
     {
       variant: "solid",
       color: "warning",
-      className: "bg-warning text-primary-foreground hover:bg-warning/90"
+      className: "bg-warning text-warning-foreground hover:bg-warning/90"
     },
     {
       variant: "solid",
       color: "destructive",
-      className: "bg-destructive text-primary-foreground hover:bg-destructive/90"
+      className: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
     },
     {
       variant: "soft",
@@ -269,7 +269,7 @@ var z = w("inline-flex items-center justify-center gap-1.5 font-medium transitio
     size: "sm",
     shape: "round"
   }
-}), a = {
+}), s = {
   primary: "bg-primary",
   secondary: "bg-muted-foreground",
   info: "bg-info",
@@ -280,14 +280,14 @@ var z = w("inline-flex items-center justify-center gap-1.5 font-medium transitio
 }, C = ({ color: e = "secondary" }) => /* @__PURE__ */ d("span", {
   className: "relative flex size-2 shrink-0",
   "aria-hidden": "true",
-  children: [/* @__PURE__ */ r("span", { className: s("absolute inline-flex size-full animate-ping rounded-full opacity-40 motion-reduce:animate-none", a[e] ?? a.secondary) }), /* @__PURE__ */ r("span", { className: s("relative inline-flex size-2 rounded-full", a[e] ?? a.secondary) })]
+  children: [/* @__PURE__ */ o("span", { className: a("absolute inline-flex size-full animate-ping rounded-full opacity-40 motion-reduce:animate-none", s[e] ?? s.secondary) }), /* @__PURE__ */ o("span", { className: a("relative inline-flex size-2 rounded-full", s[e] ?? s.secondary) })]
 }), j = k(({ children: e, leadingIcon: n, trailingIcon: i, avatar: t, iconOnly: l = !1, closable: c = !1, closeLabel: u = "Remove", onClose: v, className: p, variant: f = "soft", color: g = "secondary", size: m = "sm", shape: b = "round", ...y }, x) => {
-  const o = f === "dot", h = s((t || n || o) && "ps-1.5", (i || c) && "pe-1", l && "px-1.5");
+  const r = f === "dot", h = a((t || n || r) && "ps-1.5", (i || c) && "pe-1", l && "px-1.5");
   return /* @__PURE__ */ d("span", {
     ref: x,
     "data-slot": "badge",
-    ...o && { role: "status" },
-    className: s(z({
+    ...r && { role: "status" },
+    className: a(z({
       variant: f,
       color: g,
       size: m,
@@ -295,20 +295,20 @@ var z = w("inline-flex items-center justify-center gap-1.5 font-medium transitio
     }), h, p),
     ...y,
     children: [
-      o && /* @__PURE__ */ r(C, { color: g ?? "secondary" }),
-      t && !o && /* @__PURE__ */ r("span", {
+      r && /* @__PURE__ */ o(C, { color: g ?? "secondary" }),
+      t && !r && /* @__PURE__ */ o("span", {
         className: "shrink-0 -ms-0.5 [&>*]:size-4 [&>*]:rounded-full",
         children: t
       }),
-      n && !t && !o && n,
+      n && !t && !r && n,
       e,
       i && !c && i,
-      c && /* @__PURE__ */ r("button", {
+      c && /* @__PURE__ */ o("button", {
         type: "button",
         onClick: v,
         className: "group/close relative shrink-0 rounded-full hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 -me-0.5 p-0.5 before:absolute before:-inset-3.5 before:content-['']",
         "aria-label": u,
-        children: /* @__PURE__ */ r(N, { className: "size-3 transition-transform duration-150 ease-out group-hover/close:rotate-90 motion-reduce:transition-none" })
+        children: /* @__PURE__ */ o(N, { className: "size-3 transition-transform duration-150 ease-out group-hover/close:rotate-90 motion-reduce:transition-none" })
       })
     ]
   });

package/dist/wc-react/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":[],"sources":["../../src/components/atoms/display/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors whitespace-nowrap shrink-0 [&>svg]:pointer-events-none [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        soft: '',\n        outline: 'border',\n        white:\n          'bg-opacity-white-80 transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current/50',\n        dot: 'bg-transparent text-muted-foreground',\n      },\n      color: {\n        primary: '',\n        secondary: '',\n        info: '',\n        success: '',\n        warning: '',\n        destructive: '',\n        gray: '',\n        cyan: '',\n        teal: '',\n        green: '',\n        blue: '',\n        indigo: '',\n        purple: '',\n        pink: '',\n        orange: '',\n        yellow: '',\n      },\n      size: {\n        xs: 'h-[18px] px-1.5 py-0.5 text-[10px] [&>svg]:size-2.5',\n        sm: 'h-5 px-2 py-0.5 text-xs [&>svg]:size-3',\n        md: 'h-[22px] px-2.5 py-1 text-xs [&>svg]:size-3.5',\n        lg: 'h-[26px] px-3 py-1.5 text-sm [&>svg]:size-4',\n      },\n      shape: {\n        round: 'rounded-full',\n        rounded: 'rounded-sm',\n      },\n    },\n    compoundVariants: [\n      // Solid variants\n      {\n        variant: 'solid',\n        color: 'primary',\n        className: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      },\n      {\n        variant: 'solid',\n        color: 'secondary',\n        className:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/90',\n      },\n      {\n        variant: 'solid',\n        color: 'info',\n        className: 'bg-info text-primary-foreground hover:bg-info/90',\n      },\n      {\n        variant: 'solid',\n        color: 'success',\n        className: 'bg-success text-primary-foreground hover:bg-success/90',\n      },\n      {\n        variant: 'solid',\n        color: 'warning',\n        className: 'bg-warning text-primary-foreground hover:bg-warning/90',\n      },\n      {\n        variant: 'solid',\n        color: 'destructive',\n        className:\n          'bg-destructive text-primary-foreground hover:bg-destructive/90',\n      },\n\n      // Soft variants\n      {\n        variant: 'soft',\n        color: 'primary',\n        className:\n          'bg-soft-primary text-soft-primary-foreground hover:bg-opacity-primary-20 dark:bg-soft-primary dark:text-soft-primary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'secondary',\n        className:\n          'bg-soft-secondary text-soft-secondary-foreground hover:bg-opacity-secondary-20 dark:bg-soft-secondary dark:text-soft-secondary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'info',\n        className:\n          'bg-soft-info text-soft-info-foreground hover:bg-opacity-info-20 dark:bg-soft-info dark:text-soft-info-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'success',\n        className:\n          'bg-soft-success text-soft-success-foreground hover:bg-opacity-success-20 dark:bg-soft-success dark:text-soft-success-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'warning',\n        className:\n          'bg-soft-warning text-soft-warning-foreground hover:bg-opacity-warning-20 dark:bg-soft-warning dark:text-soft-warning-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'destructive',\n        className:\n          'bg-soft-destructive text-soft-destructive-foreground hover:bg-opacity-destructive-20 dark:bg-soft-destructive dark:text-soft-destructive-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'gray',\n        className:\n          'bg-soft-gray text-soft-gray-foreground hover:bg-opacity-neutral-20 dark:bg-soft-gray dark:text-soft-gray-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'cyan',\n        className:\n          'bg-soft-cyan text-soft-cyan-foreground hover:bg-opacity-info-20 dark:bg-soft-cyan dark:text-soft-cyan-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'teal',\n        className:\n          'bg-soft-primary text-soft-primary-foreground hover:bg-opacity-primary-20 dark:bg-soft-primary dark:text-soft-primary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'green',\n        className:\n          'bg-soft-green text-soft-green-foreground hover:bg-opacity-success-20 dark:bg-soft-green dark:text-soft-green-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'blue',\n        className:\n          'bg-soft-blue text-soft-blue-foreground hover:bg-opacity-info-20 dark:bg-soft-blue dark:text-soft-blue-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'indigo',\n        className:\n          'bg-soft-indigo text-soft-indigo-foreground hover:bg-opacity-info-20 dark:bg-soft-indigo dark:text-soft-indigo-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'purple',\n        className:\n          'bg-soft-purple text-soft-purple-foreground hover:bg-opacity-primary-20 dark:bg-soft-purple dark:text-soft-purple-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'pink',\n        className:\n          'bg-soft-pink text-soft-pink-foreground hover:bg-opacity-destructive-20 dark:bg-soft-pink dark:text-soft-pink-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'orange',\n        className:\n          'bg-soft-orange text-soft-orange-foreground hover:bg-opacity-warning-20 dark:bg-soft-orange dark:text-soft-orange-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'yellow',\n        className:\n          'bg-soft-yellow text-soft-yellow-foreground hover:bg-opacity-warning-20 dark:bg-soft-yellow dark:text-soft-yellow-foreground',\n      },\n\n      // Outline variants\n      {\n        variant: 'outline',\n        color: 'primary',\n        className: 'border-primary text-primary hover:bg-primary/10',\n      },\n      {\n        variant: 'outline',\n        color: 'secondary',\n        className:\n          'border-border text-secondary-foreground hover:bg-secondary/50',\n      },\n      {\n        variant: 'outline',\n        color: 'info',\n        className: 'border-info text-info hover:bg-info/10',\n      },\n      {\n        variant: 'outline',\n        color: 'success',\n        className: 'border-success text-success hover:bg-success/10',\n      },\n      {\n        variant: 'outline',\n        color: 'warning',\n        className: 'border-warning text-warning hover:bg-warning/10',\n      },\n      {\n        variant: 'outline',\n        color: 'destructive',\n        className:\n          'border-destructive text-destructive hover:bg-destructive/10',\n      },\n\n      // White variants\n      {\n        variant: 'white',\n        color: 'primary',\n        className: 'text-primary',\n      },\n      {\n        variant: 'white',\n        color: 'secondary',\n        className: 'text-secondary-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'info',\n        className: 'text-info',\n      },\n      {\n        variant: 'white',\n        color: 'success',\n        className: 'text-success',\n      },\n      {\n        variant: 'white',\n        color: 'warning',\n        className: 'text-warning',\n      },\n      {\n        variant: 'white',\n        color: 'destructive',\n        className: 'text-destructive',\n      },\n      {\n        variant: 'white',\n        color: 'gray',\n        className: 'text-soft-gray-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'cyan',\n        className: 'text-soft-cyan-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'teal',\n        className: 'text-primary',\n      },\n      {\n        variant: 'white',\n        color: 'green',\n        className: 'text-soft-green-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'blue',\n        className: 'text-soft-blue-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'indigo',\n        className: 'text-soft-indigo-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'purple',\n        className: 'text-soft-purple-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'pink',\n        className: 'text-soft-pink-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'orange',\n        className: 'text-soft-orange-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'yellow',\n        className: 'text-soft-yellow-foreground',\n      },\n    ],\n    defaultVariants: {\n      variant: 'soft',\n      color: 'secondary',\n      size: 'sm',\n      shape: 'round',\n    },\n  },\n);\n\ntype BadgeColor = NonNullable<VariantProps<typeof badgeVariants>['color']>;\n\n// Dot color mapping for the dot variant\nconst dotColorClasses: Partial<Record<BadgeColor, string>> = {\n  primary: 'bg-primary',\n  secondary: 'bg-muted-foreground',\n  info: 'bg-info',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  destructive: 'bg-destructive',\n  cyan: 'bg-soft-cyan-foreground',\n};\n\nexport interface BadgeProps\n  extends Omit<React.ComponentProps<'span'>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Leading icon displayed before the text */\n  leadingIcon?: React.ReactNode;\n  /** Trailing icon displayed after the text */\n  trailingIcon?: React.ReactNode;\n  /** Avatar element to display before the text */\n  avatar?: React.ReactNode;\n  /** For icon-only badges - no text, just an icon */\n  iconOnly?: boolean;\n  /** Shows a close button and enables onClose callback */\n  closable?: boolean;\n  /** Accessible label for the close button */\n  closeLabel?: string;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\n/**\n * Dot indicator for the dot variant\n */\nconst BadgeDot = ({ color = 'secondary' }: { color?: BadgeColor }) => (\n  <span className=\"relative flex size-2 shrink-0\" aria-hidden=\"true\">\n    <span\n      className={cn(\n        'absolute inline-flex size-full animate-ping rounded-full opacity-40 motion-reduce:animate-none',\n        dotColorClasses[color] ?? dotColorClasses.secondary,\n      )}\n    />\n    <span\n      className={cn(\n        'relative inline-flex size-2 rounded-full',\n        dotColorClasses[color] ?? dotColorClasses.secondary,\n      )}\n    />\n  </span>\n);\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      children,\n      leadingIcon,\n      trailingIcon,\n      avatar,\n      iconOnly = false,\n      closable = false,\n      closeLabel = 'Remove',\n      onClose,\n      className,\n      variant = 'soft',\n      color = 'secondary',\n      size = 'sm',\n      shape = 'round',\n      ...props\n    },\n    ref,\n  ) => {\n    const isDot = variant === 'dot';\n\n    // Adjust padding for different configurations\n    const paddingClasses = cn(\n      // Leading content - reduce left padding\n      (avatar || leadingIcon || isDot) && 'ps-1.5',\n      // Trailing content - reduce right padding\n      (trailingIcon || closable) && 'pe-1',\n      // Icon only - equal padding\n      iconOnly && 'px-1.5',\n    );\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...(isDot && { role: 'status' })}\n        className={cn(\n          badgeVariants({ variant, color, size, shape }),\n          paddingClasses,\n          className,\n        )}\n        {...props}\n      >\n        {isDot && <BadgeDot color={color ?? 'secondary'} />}\n\n        {avatar && !isDot && (\n          <span className=\"shrink-0 -ms-0.5 [&>*]:size-4 [&>*]:rounded-full\">\n            {avatar}\n          </span>\n        )}\n\n        {leadingIcon && !avatar && !isDot && leadingIcon}\n\n        {children}\n\n        {trailingIcon && !closable && trailingIcon}\n\n        {closable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"group/close relative shrink-0 rounded-full hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 -me-0.5 p-0.5 before:absolute before:-inset-3.5 before:content-['']\"\n            aria-label={closeLabel}\n          >\n            <X className=\"size-3 transition-transform duration-150 ease-out group-hover/close:rotate-90 motion-reduce:transition-none\" />\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge, BadgeDot, badgeVariants };\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":[],"sources":["../../src/components/atoms/display/Badge/Badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex items-center justify-center gap-1.5 font-medium transition-colors whitespace-nowrap shrink-0 [&>svg]:pointer-events-none [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        solid: '',\n        soft: '',\n        outline: 'border',\n        white:\n          'bg-opacity-white-80 transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current/50',\n        dot: 'bg-transparent text-muted-foreground',\n      },\n      color: {\n        primary: '',\n        secondary: '',\n        info: '',\n        success: '',\n        warning: '',\n        destructive: '',\n        gray: '',\n        cyan: '',\n        teal: '',\n        green: '',\n        blue: '',\n        indigo: '',\n        purple: '',\n        pink: '',\n        orange: '',\n        yellow: '',\n      },\n      size: {\n        xs: 'h-[18px] px-1.5 py-0.5 text-[10px] [&>svg]:size-2.5',\n        sm: 'h-5 px-2 py-0.5 text-xs [&>svg]:size-3',\n        md: 'h-[22px] px-2.5 py-1 text-xs [&>svg]:size-3.5',\n        lg: 'h-[26px] px-3 py-1.5 text-sm [&>svg]:size-4',\n      },\n      shape: {\n        round: 'rounded-full',\n        rounded: 'rounded-sm',\n      },\n    },\n    compoundVariants: [\n      // Solid variants\n      {\n        variant: 'solid',\n        color: 'primary',\n        className: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      },\n      {\n        variant: 'solid',\n        color: 'secondary',\n        className:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/90',\n      },\n      {\n        variant: 'solid',\n        color: 'info',\n        className: 'bg-info text-info-foreground hover:bg-info/90',\n      },\n      {\n        variant: 'solid',\n        color: 'success',\n        className: 'bg-success text-success-foreground hover:bg-success/90',\n      },\n      {\n        variant: 'solid',\n        color: 'warning',\n        className: 'bg-warning text-warning-foreground hover:bg-warning/90',\n      },\n      {\n        variant: 'solid',\n        color: 'destructive',\n        className:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n\n      // Soft variants\n      {\n        variant: 'soft',\n        color: 'primary',\n        className:\n          'bg-soft-primary text-soft-primary-foreground hover:bg-opacity-primary-20 dark:bg-soft-primary dark:text-soft-primary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'secondary',\n        className:\n          'bg-soft-secondary text-soft-secondary-foreground hover:bg-opacity-secondary-20 dark:bg-soft-secondary dark:text-soft-secondary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'info',\n        className:\n          'bg-soft-info text-soft-info-foreground hover:bg-opacity-info-20 dark:bg-soft-info dark:text-soft-info-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'success',\n        className:\n          'bg-soft-success text-soft-success-foreground hover:bg-opacity-success-20 dark:bg-soft-success dark:text-soft-success-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'warning',\n        className:\n          'bg-soft-warning text-soft-warning-foreground hover:bg-opacity-warning-20 dark:bg-soft-warning dark:text-soft-warning-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'destructive',\n        className:\n          'bg-soft-destructive text-soft-destructive-foreground hover:bg-opacity-destructive-20 dark:bg-soft-destructive dark:text-soft-destructive-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'gray',\n        className:\n          'bg-soft-gray text-soft-gray-foreground hover:bg-opacity-neutral-20 dark:bg-soft-gray dark:text-soft-gray-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'cyan',\n        className:\n          'bg-soft-cyan text-soft-cyan-foreground hover:bg-opacity-info-20 dark:bg-soft-cyan dark:text-soft-cyan-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'teal',\n        className:\n          'bg-soft-primary text-soft-primary-foreground hover:bg-opacity-primary-20 dark:bg-soft-primary dark:text-soft-primary-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'green',\n        className:\n          'bg-soft-green text-soft-green-foreground hover:bg-opacity-success-20 dark:bg-soft-green dark:text-soft-green-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'blue',\n        className:\n          'bg-soft-blue text-soft-blue-foreground hover:bg-opacity-info-20 dark:bg-soft-blue dark:text-soft-blue-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'indigo',\n        className:\n          'bg-soft-indigo text-soft-indigo-foreground hover:bg-opacity-info-20 dark:bg-soft-indigo dark:text-soft-indigo-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'purple',\n        className:\n          'bg-soft-purple text-soft-purple-foreground hover:bg-opacity-primary-20 dark:bg-soft-purple dark:text-soft-purple-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'pink',\n        className:\n          'bg-soft-pink text-soft-pink-foreground hover:bg-opacity-destructive-20 dark:bg-soft-pink dark:text-soft-pink-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'orange',\n        className:\n          'bg-soft-orange text-soft-orange-foreground hover:bg-opacity-warning-20 dark:bg-soft-orange dark:text-soft-orange-foreground',\n      },\n      {\n        variant: 'soft',\n        color: 'yellow',\n        className:\n          'bg-soft-yellow text-soft-yellow-foreground hover:bg-opacity-warning-20 dark:bg-soft-yellow dark:text-soft-yellow-foreground',\n      },\n\n      // Outline variants\n      {\n        variant: 'outline',\n        color: 'primary',\n        className: 'border-primary text-primary hover:bg-primary/10',\n      },\n      {\n        variant: 'outline',\n        color: 'secondary',\n        className:\n          'border-border text-secondary-foreground hover:bg-secondary/50',\n      },\n      {\n        variant: 'outline',\n        color: 'info',\n        className: 'border-info text-info hover:bg-info/10',\n      },\n      {\n        variant: 'outline',\n        color: 'success',\n        className: 'border-success text-success hover:bg-success/10',\n      },\n      {\n        variant: 'outline',\n        color: 'warning',\n        className: 'border-warning text-warning hover:bg-warning/10',\n      },\n      {\n        variant: 'outline',\n        color: 'destructive',\n        className:\n          'border-destructive text-destructive hover:bg-destructive/10',\n      },\n\n      // White variants\n      {\n        variant: 'white',\n        color: 'primary',\n        className: 'text-primary',\n      },\n      {\n        variant: 'white',\n        color: 'secondary',\n        className: 'text-secondary-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'info',\n        className: 'text-info',\n      },\n      {\n        variant: 'white',\n        color: 'success',\n        className: 'text-success',\n      },\n      {\n        variant: 'white',\n        color: 'warning',\n        className: 'text-warning',\n      },\n      {\n        variant: 'white',\n        color: 'destructive',\n        className: 'text-destructive',\n      },\n      {\n        variant: 'white',\n        color: 'gray',\n        className: 'text-soft-gray-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'cyan',\n        className: 'text-soft-cyan-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'teal',\n        className: 'text-primary',\n      },\n      {\n        variant: 'white',\n        color: 'green',\n        className: 'text-soft-green-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'blue',\n        className: 'text-soft-blue-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'indigo',\n        className: 'text-soft-indigo-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'purple',\n        className: 'text-soft-purple-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'pink',\n        className: 'text-soft-pink-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'orange',\n        className: 'text-soft-orange-foreground',\n      },\n      {\n        variant: 'white',\n        color: 'yellow',\n        className: 'text-soft-yellow-foreground',\n      },\n    ],\n    defaultVariants: {\n      variant: 'soft',\n      color: 'secondary',\n      size: 'sm',\n      shape: 'round',\n    },\n  },\n);\n\ntype BadgeColor = NonNullable<VariantProps<typeof badgeVariants>['color']>;\n\n// Dot color mapping for the dot variant\nconst dotColorClasses: Partial<Record<BadgeColor, string>> = {\n  primary: 'bg-primary',\n  secondary: 'bg-muted-foreground',\n  info: 'bg-info',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  destructive: 'bg-destructive',\n  cyan: 'bg-soft-cyan-foreground',\n};\n\nexport interface BadgeProps\n  extends Omit<React.ComponentProps<'span'>, 'color'>,\n    VariantProps<typeof badgeVariants> {\n  /** Leading icon displayed before the text */\n  leadingIcon?: React.ReactNode;\n  /** Trailing icon displayed after the text */\n  trailingIcon?: React.ReactNode;\n  /** Avatar element to display before the text */\n  avatar?: React.ReactNode;\n  /** For icon-only badges - no text, just an icon */\n  iconOnly?: boolean;\n  /** Shows a close button and enables onClose callback */\n  closable?: boolean;\n  /** Accessible label for the close button */\n  closeLabel?: string;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n}\n\n/**\n * Dot indicator for the dot variant\n */\nconst BadgeDot = ({ color = 'secondary' }: { color?: BadgeColor }) => (\n  <span className=\"relative flex size-2 shrink-0\" aria-hidden=\"true\">\n    <span\n      className={cn(\n        'absolute inline-flex size-full animate-ping rounded-full opacity-40 motion-reduce:animate-none',\n        dotColorClasses[color] ?? dotColorClasses.secondary,\n      )}\n    />\n    <span\n      className={cn(\n        'relative inline-flex size-2 rounded-full',\n        dotColorClasses[color] ?? dotColorClasses.secondary,\n      )}\n    />\n  </span>\n);\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (\n    {\n      children,\n      leadingIcon,\n      trailingIcon,\n      avatar,\n      iconOnly = false,\n      closable = false,\n      closeLabel = 'Remove',\n      onClose,\n      className,\n      variant = 'soft',\n      color = 'secondary',\n      size = 'sm',\n      shape = 'round',\n      ...props\n    },\n    ref,\n  ) => {\n    const isDot = variant === 'dot';\n\n    // Adjust padding for different configurations\n    const paddingClasses = cn(\n      // Leading content - reduce left padding\n      (avatar || leadingIcon || isDot) && 'ps-1.5',\n      // Trailing content - reduce right padding\n      (trailingIcon || closable) && 'pe-1',\n      // Icon only - equal padding\n      iconOnly && 'px-1.5',\n    );\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        {...(isDot && { role: 'status' })}\n        className={cn(\n          badgeVariants({ variant, color, size, shape }),\n          paddingClasses,\n          className,\n        )}\n        {...props}\n      >\n        {isDot && <BadgeDot color={color ?? 'secondary'} />}\n\n        {avatar && !isDot && (\n          <span className=\"shrink-0 -ms-0.5 [&>*]:size-4 [&>*]:rounded-full\">\n            {avatar}\n          </span>\n        )}\n\n        {leadingIcon && !avatar && !isDot && leadingIcon}\n\n        {children}\n\n        {trailingIcon && !closable && trailingIcon}\n\n        {closable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"group/close relative shrink-0 rounded-full hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 -me-0.5 p-0.5 before:absolute before:-inset-3.5 before:content-['']\"\n            aria-label={closeLabel}\n          >\n            <X className=\"size-3 transition-transform duration-150 ease-out group-hover/close:rotate-90 motion-reduce:transition-none\" />\n          </button>\n        )}\n      </span>\n    );\n  },\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge, BadgeDot, badgeVariants };\n"],"mappings":"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"}

package/dist/wc-react/Checkbox.js

@@ -46,22 +46,22 @@ var O = C("relative flex shrink-0 items-center justify-center border shadow-xs t
     {
       variant: "info",
       checked: !0,
-      className: "border-info bg-info text-primary-foreground hover:bg-info/90"
+      className: "border-info bg-info text-info-foreground hover:bg-info/90"
     },
     {
       variant: "success",
       checked: !0,
-      className: "border-success bg-success text-primary-foreground hover:bg-success/90"
+      className: "border-success bg-success text-success-foreground hover:bg-success/90"
     },
     {
       variant: "warning",
       checked: !0,
-      className: "border-warning bg-warning text-primary-foreground hover:bg-warning/90"
+      className: "border-warning bg-warning text-warning-foreground hover:bg-warning/90"
     },
     {
       variant: "destructive",
       checked: !0,
-      className: "border-destructive bg-destructive text-primary-foreground hover:bg-destructive/90"
+      className: "border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90"
     }
   ],
   defaultVariants: {
@@ -73,22 +73,22 @@ var O = C("relative flex shrink-0 items-center justify-center border shadow-xs t
   sm: "size-3",
   md: "size-3.5",
   lg: "size-4"
-}, h = l.forwardRef(({ className: m, variant: i, size: a = "sm", checked: c, defaultChecked: p = !1, onCheckedChange: s, ...t }, n) => {
-  const [u, d] = l.useState(p), o = c !== void 0, e = o ? c : u, b = D()?.state === "destructive", v = i ?? (b ? "destructive" : "primary"), y = l.useCallback((g) => {
+}, h = l.forwardRef(({ className: u, variant: i, size: a = "sm", checked: c, defaultChecked: v = !1, onCheckedChange: s, ...t }, n) => {
+  const [b, d] = l.useState(v), o = c !== void 0, e = o ? c : b, m = D()?.state === "destructive", p = i ?? (m ? "destructive" : "primary"), y = l.useCallback((g) => {
     o || d(g), s?.(g);
   }, [o, s]);
   return /* @__PURE__ */ r(z, {
     ref: n,
     "data-slot": "checkbox",
     "data-size": a,
-    "data-variant": v,
+    "data-variant": p,
     checked: e,
     onCheckedChange: y,
     className: x(O({
-      variant: v,
+      variant: p,
       size: a,
       checked: e
-    }), 'before:content-[""] before:absolute before:-inset-[4px] before:rounded-[inherit]', "focus-visible:ring-4 focus-visible:ring-bg-secondary focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]", "dark:focus-visible:ring-bg-tertiary dark:focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]", e && "delight-check-bounce", m),
+    }), 'before:content-[""] before:absolute before:-inset-[4px] before:rounded-[inherit]', "focus-visible:ring-4 focus-visible:ring-bg-secondary focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]", "dark:focus-visible:ring-bg-tertiary dark:focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]", e && "delight-check-bounce", u),
     ...t,
     children: /* @__PURE__ */ r(j, {
       "data-slot": "checkbox-indicator",
@@ -101,19 +101,19 @@ var O = C("relative flex shrink-0 items-center justify-center border shadow-xs t
   });
 });
 h.displayName = "CheckboxControl";
-var B = l.forwardRef((m, i) => {
-  const [a, c] = w(m), { ref: p, ...s } = c;
+var B = l.forwardRef((u, i) => {
+  const [a, c] = w(u), { ref: v, ...s } = c;
   if (!F(a)) return /* @__PURE__ */ r(h, {
     ref: i,
     ...s,
     required: a.required
   });
-  const { label: t, required: n, labelIcon: u, tooltip: d, description: o, error: e, fieldClassName: b } = a;
+  const { label: t, required: n, labelIcon: b, tooltip: d, description: o, error: e, fieldClassName: m } = a;
   return /* @__PURE__ */ f(V, {
     layout: "inline",
     state: e ? "destructive" : void 0,
     disabled: s.disabled,
-    className: b,
+    className: m,
     children: [
       /* @__PURE__ */ r(h, {
         ref: i,
@@ -122,7 +122,7 @@ var B = l.forwardRef((m, i) => {
       }),
       t && /* @__PURE__ */ f(R, {
         required: n,
-        labelIcon: u,
+        labelIcon: b,
         children: [t, d && /* @__PURE__ */ r(N, { content: d })]
       }),
       (e || o) && /* @__PURE__ */ f(q, { children: [e && /* @__PURE__ */ r(I, { children: e }), !e && o && /* @__PURE__ */ r(P, { children: o })] })

package/dist/wc-react/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/atoms/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport {\n  type FieldProps,\n  FieldTooltip,\n  hasFieldProps,\n  splitFieldProps,\n} from '@/components/atoms/forms/_shared';\nimport {\n  Field,\n  FieldBottom,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useFieldContextOptional,\n} from '@/components/ui/form-field';\nimport { DrawCheck } from '@/components/ui/selection-group';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// CVA Variants\n// ============================================\n\nconst checkboxVariants = cva(\n  // Base styles\n  'relative flex shrink-0 items-center justify-center border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        primary: '',\n        secondary: '',\n        info: '',\n        success: '',\n        warning: '',\n        destructive: '',\n      },\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n      checked: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // ===== UNCHECKED (all variants) =====\n      {\n        checked: false,\n        className:\n          'bg-background border-border hover:border-primary hover:bg-primary/10',\n      },\n      // ===== PRIMARY CHECKED =====\n      {\n        variant: 'primary',\n        checked: true,\n        className:\n          'border-primary bg-primary text-primary-foreground hover:bg-primary/90',\n      },\n      // ===== SECONDARY CHECKED (outline style) =====\n      {\n        variant: 'secondary',\n        checked: true,\n        className: 'border-border bg-background text-foreground hover:bg-muted',\n      },\n      // ===== INFO CHECKED =====\n      {\n        variant: 'info',\n        checked: true,\n        className:\n          'border-info bg-info text-primary-foreground hover:bg-info/90',\n      },\n      // ===== SUCCESS CHECKED =====\n      {\n        variant: 'success',\n        checked: true,\n        className:\n          'border-success bg-success text-primary-foreground hover:bg-success/90',\n      },\n      // ===== WARNING CHECKED =====\n      {\n        variant: 'warning',\n        checked: true,\n        className:\n          'border-warning bg-warning text-primary-foreground hover:bg-warning/90',\n      },\n      // ===== DESTRUCTIVE CHECKED =====\n      {\n        variant: 'destructive',\n        checked: true,\n        className:\n          'border-destructive bg-destructive text-primary-foreground hover:bg-destructive/90',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'sm',\n      checked: false,\n    },\n  },\n);\n\n// ============================================\n// Types\n// ============================================\n\ntype CheckboxVariant =\n  | 'primary'\n  | 'secondary'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'destructive';\ntype CheckboxSize = 'sm' | 'md' | 'lg';\n\n/**\n * Checkbox is a pure atom component that renders ONLY the checkbox element.\n * It does NOT render label, description, or error.\n *\n * Supports 6 color variants and 3 sizes matching Figma design.\n * When used inside a Field with an error, automatically uses destructive variant.\n *\n * @example\n * ```tsx\n * // Simple checkbox\n * <Checkbox />\n *\n * // With variant and size\n * <Checkbox variant=\"success\" size=\"lg\" />\n *\n * // Auto-destructive when Field has error\n * <Field error=\"Required\">\n *   <Checkbox />  // automatically uses destructive variant\n * </Field>\n * ```\n */\ntype CheckboxControlProps = Omit<\n  CheckboxPrimitive.Root.Props,\n  'onCheckedChange'\n> & {\n  /** Color variant for the checkbox */\n  variant?: CheckboxVariant;\n  /** Size variant for the checkbox */\n  size?: CheckboxSize;\n  /** Controlled checked state. When provided, component is controlled. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport interface CheckboxProps\n  extends CheckboxControlProps,\n    Omit<FieldProps, 'topRight' | 'bottomRight'> {}\n\nexport type { CheckboxSize, CheckboxVariant };\n\n// ============================================\n// Size configuration\n// ============================================\n\nconst iconClasses = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n};\n\n// ============================================\n// Checkbox (pure atom)\n// ============================================\n\nconst CheckboxControl = React.forwardRef<\n  HTMLButtonElement,\n  CheckboxControlProps\n>(\n  (\n    {\n      className,\n      variant: variantProp,\n      size = 'sm',\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      ...props\n    },\n    ref,\n  ) => {\n    // Internal state for uncontrolled mode\n    const [internalChecked, setInternalChecked] =\n      React.useState(defaultChecked);\n\n    // Use controlled value if provided, otherwise use internal state\n    const isControlled = controlledChecked !== undefined;\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    // Field context integration - auto-destructive on error\n    const fieldContext = useFieldContextOptional();\n    const hasFieldError = fieldContext?.state === 'destructive';\n    const variant = variantProp ?? (hasFieldError ? 'destructive' : 'primary');\n\n    const handleCheckedChange = React.useCallback(\n      (newChecked: boolean) => {\n        if (!isControlled) {\n          setInternalChecked(newChecked);\n        }\n        onCheckedChange?.(newChecked);\n      },\n      [isControlled, onCheckedChange],\n    );\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        data-slot=\"checkbox\"\n        data-size={size}\n        data-variant={variant}\n        checked={checked}\n        onCheckedChange={handleCheckedChange}\n        className={cn(\n          checkboxVariants({ variant, size, checked }),\n          // Touch target expansion (ensures ≥24px hit area)\n          'before:content-[\"\"] before:absolute before:-inset-[4px] before:rounded-[inherit]',\n          // Focus state - double ring effect\n          'focus-visible:ring-4 focus-visible:ring-bg-secondary focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]',\n          'dark:focus-visible:ring-bg-tertiary dark:focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]',\n          checked && 'delight-check-bounce',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          className=\"flex items-center justify-center text-current\"\n        >\n          {props.indeterminate ? (\n            <Minus\n              className={cn(\n                iconClasses[size],\n                'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n              )}\n              strokeWidth={3}\n            />\n          ) : (\n            <DrawCheck className={iconClasses[size]} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\n\nCheckboxControl.displayName = 'CheckboxControl';\n\n// =============================================================================\n// Checkbox — public API with smart field mode (inline layout)\n// =============================================================================\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, forwardedRef) => {\n    const [fieldPropsObj, controlProps] = splitFieldProps(props);\n    const { ref: _ref, ...cp } = controlProps as CheckboxControlProps & {\n      ref?: unknown;\n    };\n\n    if (!hasFieldProps(fieldPropsObj)) {\n      return (\n        <CheckboxControl\n          ref={forwardedRef}\n          {...cp}\n          required={fieldPropsObj.required}\n        />\n      );\n    }\n\n    const {\n      label,\n      required,\n      labelIcon,\n      tooltip,\n      description,\n      error,\n      fieldClassName,\n    } = fieldPropsObj;\n\n    return (\n      <Field\n        layout=\"inline\"\n        state={error ? 'destructive' : undefined}\n        disabled={cp.disabled}\n        className={fieldClassName}\n      >\n        <CheckboxControl ref={forwardedRef} {...cp} required={required} />\n        {label && (\n          <FieldLabel required={required} labelIcon={labelIcon}>\n            {label}\n            {tooltip && <FieldTooltip content={tooltip} />}\n          </FieldLabel>\n        )}\n        {(error || description) && (\n          <FieldBottom>\n            {error && <FieldError>{error}</FieldError>}\n            {!error && description && (\n              <FieldDescription>{description}</FieldDescription>\n            )}\n          </FieldBottom>\n        )}\n      </Field>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/atoms/forms/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport {\n  type FieldProps,\n  FieldTooltip,\n  hasFieldProps,\n  splitFieldProps,\n} from '@/components/atoms/forms/_shared';\nimport {\n  Field,\n  FieldBottom,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useFieldContextOptional,\n} from '@/components/ui/form-field';\nimport { DrawCheck } from '@/components/ui/selection-group';\nimport { cn } from '@/lib/utils';\n\n// ============================================\n// CVA Variants\n// ============================================\n\nconst checkboxVariants = cva(\n  // Base styles\n  'relative flex shrink-0 items-center justify-center border shadow-xs transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        primary: '',\n        secondary: '',\n        info: '',\n        success: '',\n        warning: '',\n        destructive: '',\n      },\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n      checked: {\n        true: '',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // ===== UNCHECKED (all variants) =====\n      {\n        checked: false,\n        className:\n          'bg-background border-border hover:border-primary hover:bg-primary/10',\n      },\n      // ===== PRIMARY CHECKED =====\n      {\n        variant: 'primary',\n        checked: true,\n        className:\n          'border-primary bg-primary text-primary-foreground hover:bg-primary/90',\n      },\n      // ===== SECONDARY CHECKED (outline style) =====\n      {\n        variant: 'secondary',\n        checked: true,\n        className: 'border-border bg-background text-foreground hover:bg-muted',\n      },\n      // ===== INFO CHECKED =====\n      {\n        variant: 'info',\n        checked: true,\n        className: 'border-info bg-info text-info-foreground hover:bg-info/90',\n      },\n      // ===== SUCCESS CHECKED =====\n      {\n        variant: 'success',\n        checked: true,\n        className:\n          'border-success bg-success text-success-foreground hover:bg-success/90',\n      },\n      // ===== WARNING CHECKED =====\n      {\n        variant: 'warning',\n        checked: true,\n        className:\n          'border-warning bg-warning text-warning-foreground hover:bg-warning/90',\n      },\n      // ===== DESTRUCTIVE CHECKED =====\n      {\n        variant: 'destructive',\n        checked: true,\n        className:\n          'border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90',\n      },\n    ],\n    defaultVariants: {\n      variant: 'primary',\n      size: 'sm',\n      checked: false,\n    },\n  },\n);\n\n// ============================================\n// Types\n// ============================================\n\ntype CheckboxVariant =\n  | 'primary'\n  | 'secondary'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'destructive';\ntype CheckboxSize = 'sm' | 'md' | 'lg';\n\n/**\n * Checkbox is a pure atom component that renders ONLY the checkbox element.\n * It does NOT render label, description, or error.\n *\n * Supports 6 color variants and 3 sizes matching Figma design.\n * When used inside a Field with an error, automatically uses destructive variant.\n *\n * @example\n * ```tsx\n * // Simple checkbox\n * <Checkbox />\n *\n * // With variant and size\n * <Checkbox variant=\"success\" size=\"lg\" />\n *\n * // Auto-destructive when Field has error\n * <Field error=\"Required\">\n *   <Checkbox />  // automatically uses destructive variant\n * </Field>\n * ```\n */\ntype CheckboxControlProps = Omit<\n  CheckboxPrimitive.Root.Props,\n  'onCheckedChange'\n> & {\n  /** Color variant for the checkbox */\n  variant?: CheckboxVariant;\n  /** Size variant for the checkbox */\n  size?: CheckboxSize;\n  /** Controlled checked state. When provided, component is controlled. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Callback when checked state changes */\n  onCheckedChange?: (checked: boolean) => void;\n};\n\nexport interface CheckboxProps\n  extends CheckboxControlProps,\n    Omit<FieldProps, 'topRight' | 'bottomRight'> {}\n\nexport type { CheckboxSize, CheckboxVariant };\n\n// ============================================\n// Size configuration\n// ============================================\n\nconst iconClasses = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n};\n\n// ============================================\n// Checkbox (pure atom)\n// ============================================\n\nconst CheckboxControl = React.forwardRef<\n  HTMLButtonElement,\n  CheckboxControlProps\n>(\n  (\n    {\n      className,\n      variant: variantProp,\n      size = 'sm',\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      ...props\n    },\n    ref,\n  ) => {\n    // Internal state for uncontrolled mode\n    const [internalChecked, setInternalChecked] =\n      React.useState(defaultChecked);\n\n    // Use controlled value if provided, otherwise use internal state\n    const isControlled = controlledChecked !== undefined;\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    // Field context integration - auto-destructive on error\n    const fieldContext = useFieldContextOptional();\n    const hasFieldError = fieldContext?.state === 'destructive';\n    const variant = variantProp ?? (hasFieldError ? 'destructive' : 'primary');\n\n    const handleCheckedChange = React.useCallback(\n      (newChecked: boolean) => {\n        if (!isControlled) {\n          setInternalChecked(newChecked);\n        }\n        onCheckedChange?.(newChecked);\n      },\n      [isControlled, onCheckedChange],\n    );\n\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        data-slot=\"checkbox\"\n        data-size={size}\n        data-variant={variant}\n        checked={checked}\n        onCheckedChange={handleCheckedChange}\n        className={cn(\n          checkboxVariants({ variant, size, checked }),\n          // Touch target expansion (ensures ≥24px hit area)\n          'before:content-[\"\"] before:absolute before:-inset-[4px] before:rounded-[inherit]',\n          // Focus state - double ring effect\n          'focus-visible:ring-4 focus-visible:ring-bg-secondary focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]',\n          'dark:focus-visible:ring-bg-tertiary dark:focus-visible:shadow-[0_0_0_2px_var(--card),0_0_0_4px_var(--border)]',\n          checked && 'delight-check-bounce',\n          className,\n        )}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator\n          data-slot=\"checkbox-indicator\"\n          className=\"flex items-center justify-center text-current\"\n        >\n          {props.indeterminate ? (\n            <Minus\n              className={cn(\n                iconClasses[size],\n                'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n              )}\n              strokeWidth={3}\n            />\n          ) : (\n            <DrawCheck className={iconClasses[size]} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\n\nCheckboxControl.displayName = 'CheckboxControl';\n\n// =============================================================================\n// Checkbox — public API with smart field mode (inline layout)\n// =============================================================================\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, forwardedRef) => {\n    const [fieldPropsObj, controlProps] = splitFieldProps(props);\n    const { ref: _ref, ...cp } = controlProps as CheckboxControlProps & {\n      ref?: unknown;\n    };\n\n    if (!hasFieldProps(fieldPropsObj)) {\n      return (\n        <CheckboxControl\n          ref={forwardedRef}\n          {...cp}\n          required={fieldPropsObj.required}\n        />\n      );\n    }\n\n    const {\n      label,\n      required,\n      labelIcon,\n      tooltip,\n      description,\n      error,\n      fieldClassName,\n    } = fieldPropsObj;\n\n    return (\n      <Field\n        layout=\"inline\"\n        state={error ? 'destructive' : undefined}\n        disabled={cp.disabled}\n        className={fieldClassName}\n      >\n        <CheckboxControl ref={forwardedRef} {...cp} required={required} />\n        {label && (\n          <FieldLabel required={required} labelIcon={labelIcon}>\n            {label}\n            {tooltip && <FieldTooltip content={tooltip} />}\n          </FieldLabel>\n        )}\n        {(error || description) && (\n          <FieldBottom>\n            {error && <FieldError>{error}</FieldError>}\n            {!error && description && (\n              <FieldDescription>{description}</FieldDescription>\n            )}\n          </FieldBottom>\n        )}\n      </Field>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\n"],"mappings":"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"}