@tribepad/themis 1.0.0

package/dist/chunk-B6DHPMDP.mjs

@@ -0,0 +1,335 @@
+import { FOCUS_STYLES, HIGH_CONTRAST_FOCUS } from './chunk-HK46BT5U.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { createContext, forwardRef, useId, useContext } from 'react';
+import { RadioGroup as RadioGroup$1, Label, Text, FieldError, Radio as Radio$1 } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+var RadioGroupContext = createContext({
+  variant: "default",
+  size: "default",
+  isInvalid: false
+});
+var radioGroupVariants = cva(
+  // Base: flex container
+  "flex",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col gap-2",
+        horizontal: "flex-row flex-wrap gap-2"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+var radioItemVariants = cva(
+  // Base: bordered container with flex layout, RTL support
+  [
+    "flex items-center gap-3 rounded-md border cursor-pointer",
+    "transition-colors duration-200",
+    "rtl:flex-row-reverse",
+    // RTL: indicator flips to right
+    // Focus ring on entire container
+    FOCUS_STYLES,
+    HIGH_CONTRAST_FOCUS
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[var(--border)]",
+          "data-[hovered]:bg-[var(--accent)]/10",
+          "data-[selected]:border-[var(--primary)]",
+          "data-[selected]:bg-[var(--primary)]/10"
+        ].join(" "),
+        destructive: [
+          "border-[var(--border)]",
+          "data-[hovered]:bg-[var(--destructive)]/10",
+          "data-[selected]:border-[var(--destructive)]",
+          "data-[selected]:bg-[var(--destructive)]/10"
+        ].join(" ")
+      },
+      size: {
+        sm: "min-h-[44px] py-2 px-3 text-sm",
+        default: "min-h-[48px] py-3 px-4 text-sm",
+        lg: "min-h-[56px] py-4 px-5 text-base"
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      isInvalid: {
+        // Error: ALL items get destructive border (cognitive accessibility)
+        true: "border-[var(--destructive)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      isDisabled: false,
+      isInvalid: false
+    }
+  }
+);
+var radioIndicatorVariants = cva(
+  // Base: circle with border, flex-shrink-0 to prevent squishing
+  "flex-shrink-0 rounded-full border-2 flex items-center justify-center transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-[var(--border)]",
+          "data-[selected]:border-[var(--primary)]"
+        ].join(" "),
+        destructive: [
+          "border-[var(--border)]",
+          "data-[selected]:border-[var(--destructive)]"
+        ].join(" ")
+      },
+      size: {
+        sm: "h-4 w-4",
+        default: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var radioInnerDotVariants = cva(
+  // Base: centered dot with spring animation
+  [
+    "rounded-full transition-transform duration-200",
+    // Spring animation with overshoot
+    "[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]",
+    // Respect reduced motion preference
+    "motion-reduce:transition-none",
+    // Scale from 0 to 1 on selection
+    "scale-0 data-[selected]:scale-100"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary)]",
+        destructive: "bg-[var(--destructive)]"
+      },
+      size: {
+        sm: "h-2 w-2",
+        default: "h-2.5 w-2.5",
+        lg: "h-3 w-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function RadioLabel({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("font-medium text-[var(--content-foreground)]", className), children });
+}
+RadioLabel.displayName = "Radio.Label";
+function RadioDescription({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("text-sm text-[var(--menu-muted)]", className), children });
+}
+RadioDescription.displayName = "Radio.Description";
+function RadioComponent({ value, isDisabled, children, className }) {
+  const { variant, size, isInvalid } = useContext(RadioGroupContext);
+  return /* @__PURE__ */ jsx(
+    Radio$1,
+    {
+      value,
+      isDisabled,
+      className: (renderProps) => cn(
+        radioItemVariants({
+          variant,
+          size,
+          isDisabled: renderProps.isDisabled,
+          isInvalid
+        }),
+        className
+      ),
+      children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: radioIndicatorVariants({ variant, size }),
+            "data-selected": renderProps.isSelected || void 0,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: radioInnerDotVariants({ variant, size }),
+                "data-selected": renderProps.isSelected || void 0
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col", children })
+      ] })
+    }
+  );
+}
+var Radio = Object.assign(RadioComponent, {
+  Label: RadioLabel,
+  Description: RadioDescription
+});
+Radio.displayName = "Radio";
+var RadioGroup = forwardRef(
+  function RadioGroup2(props, ref) {
+    const {
+      // Display props
+      label,
+      description,
+      errorMessage,
+      // Selection props
+      value,
+      defaultValue,
+      // State props
+      isDisabled = false,
+      isReadOnly = false,
+      isRequired = false,
+      isInvalid = false,
+      // Layout props
+      orientation = "vertical",
+      // Variant props
+      variant = "default",
+      size = "default",
+      // Form props
+      name,
+      // Event handlers
+      onChange,
+      onFocusChange,
+      // Standard props
+      className,
+      children,
+      id,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "data-testid": dataTestId,
+      ...restProps
+    } = props;
+    const generatedId = useId();
+    const radioGroupId = id ?? generatedId;
+    const labelId = `${radioGroupId}-label`;
+    const descriptionId = `${radioGroupId}-description`;
+    const errorId = `${radioGroupId}-error`;
+    const describedByParts = [];
+    if (ariaDescribedby) describedByParts.push(ariaDescribedby);
+    if (description) describedByParts.push(descriptionId);
+    if (isInvalid && errorMessage) describedByParts.push(errorId);
+    const computedAriaDescribedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { variant, size, isInvalid }, children: /* @__PURE__ */ jsxs(
+      RadioGroup$1,
+      {
+        ref,
+        id: radioGroupId,
+        name,
+        value: value ?? void 0,
+        defaultValue: defaultValue ?? void 0,
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        isInvalid,
+        orientation,
+        onChange,
+        onFocusChange,
+        "aria-label": ariaLabel,
+        "aria-labelledby": label ? labelId : ariaLabelledby,
+        "aria-describedby": computedAriaDescribedBy,
+        "data-testid": dataTestId,
+        "data-orientation": orientation,
+        className: cn("flex flex-col gap-1.5", className),
+        ...restProps,
+        children: [
+          label && /* @__PURE__ */ jsxs(Label, { id: labelId, className: "text-sm font-medium text-[var(--content-foreground)]", children: [
+            label,
+            isRequired && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--destructive)]", "aria-hidden": "true", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              id: descriptionId,
+              slot: "description",
+              className: "text-sm text-[var(--menu-muted)]",
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: radioGroupVariants({ orientation }), children }),
+          isInvalid && errorMessage && /* @__PURE__ */ jsx(
+            FieldError,
+            {
+              id: errorId,
+              className: "text-sm text-[var(--destructive)]",
+              children: /* @__PURE__ */ jsx("span", { role: "alert", children: errorMessage })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupVariantSchema = z.enum(["default", "destructive"]);
+var RadioGroupSizeSchema = z.enum(["sm", "default", "lg"]);
+var RadioGroupOrientationSchema = z.enum(["vertical", "horizontal"]);
+var RadioGroupPropsSchema = BaseComponentPropsSchema.extend({
+  // Display props (US-4)
+  label: z.string().optional(),
+  description: z.string().optional(),
+  errorMessage: z.string().optional(),
+  // Selection props (US-1) - nullable for no initial selection
+  value: z.string().nullable().optional(),
+  defaultValue: z.string().nullable().optional(),
+  // State props (US-6)
+  isDisabled: z.boolean().optional().default(false),
+  isReadOnly: z.boolean().optional().default(false),
+  isRequired: z.boolean().optional().default(false),
+  isInvalid: z.boolean().optional().default(false),
+  // Layout props (US-5)
+  orientation: RadioGroupOrientationSchema.optional().default("vertical"),
+  // Variant props (US-2, US-3) - 2 variants only
+  variant: RadioGroupVariantSchema.optional().default("default"),
+  size: RadioGroupSizeSchema.optional().default("default"),
+  // Form props (US-6)
+  name: z.string().optional(),
+  // Event handlers
+  onChange: z.custom().optional(),
+  onFocusChange: z.custom().optional(),
+  // Children (Radio components)
+  children: z.custom()
+});
+var RadioPropsSchema = BaseComponentPropsSchema.extend({
+  // Item value (required)
+  value: z.string(),
+  // Disabled state (individual item)
+  isDisabled: z.boolean().optional().default(false),
+  // Item content - accepts any ReactNode for flexible children
+  children: z.custom(),
+  // Optional className for custom styling
+  className: z.string().optional()
+});
+var RadioLabelPropsSchema = z.object({
+  // Label content
+  children: z.custom(),
+  // Optional className for custom styling
+  className: z.string().optional()
+});
+var RadioDescriptionPropsSchema = z.object({
+  // Description content
+  children: z.custom(),
+  // Optional className for custom styling
+  className: z.string().optional()
+});
+
+export { Radio, RadioDescriptionPropsSchema, RadioGroup, RadioGroupOrientationSchema, RadioGroupPropsSchema, RadioGroupSizeSchema, RadioGroupVariantSchema, RadioLabelPropsSchema, RadioPropsSchema };
+//# sourceMappingURL=chunk-B6DHPMDP.mjs.map
+//# sourceMappingURL=chunk-B6DHPMDP.mjs.map

package/dist/chunk-B6DHPMDP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/RadioGroup/RadioGroup.tsx","../src/elements/RadioGroup/RadioGroup.types.ts"],"names":["AriaRadio","RadioGroup","AriaRadioGroup"],"mappings":";;;;;;;;;AA2DA,IAAM,oBAAoB,aAAA,CAAsC;AAAA,EAC9D,OAAA,EAAS,SAAA;AAAA,EACT,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW;AACb,CAAC,CAAA;AAUD,IAAM,kBAAA,GAAqB,GAAA;AAAA;AAAA,EAEzB,MAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,WAAA,EAAa;AAAA,QACX,QAAA,EAAU,gBAAA;AAAA,QACV,UAAA,EAAY;AAAA;AACd,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa;AAAA;AACf;AAEJ,CAAA;AAQA,IAAM,iBAAA,GAAoB,GAAA;AAAA;AAAA,EAExB;AAAA,IACE,0DAAA;AAAA,IACA,gCAAA;AAAA,IACA,sBAAA;AAAA;AAAA;AAAA,IAEA,YAAA;AAAA,IACA;AAAA,GACF,CAAE,KAAK,GAAG,CAAA;AAAA,EACV;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,wBAAA;AAAA,UACA,sCAAA;AAAA,UACA,yCAAA;AAAA,UACA;AAAA,SACF,CAAE,KAAK,GAAG,CAAA;AAAA,QACV,WAAA,EAAa;AAAA,UACX,wBAAA;AAAA,UACA,2CAAA;AAAA,UACA,6CAAA;AAAA,UACA;AAAA,SACF,CAAE,KAAK,GAAG;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gCAAA;AAAA,QACJ,OAAA,EAAS,gCAAA;AAAA,QACT,EAAA,EAAI;AAAA,OACN;AAAA,MACA,UAAA,EAAY;AAAA,QACV,IAAA,EAAM,+BAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,SAAA,EAAW;AAAA;AAAA,QAET,IAAA,EAAM,6BAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM,SAAA;AAAA,MACN,UAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW;AAAA;AACb;AAEJ,CAAA;AAKA,IAAM,sBAAA,GAAyB,GAAA;AAAA;AAAA,EAE7B,qGAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS;AAAA,UACP,wBAAA;AAAA,UACA;AAAA,SACF,CAAE,KAAK,GAAG,CAAA;AAAA,QACV,WAAA,EAAa;AAAA,UACX,wBAAA;AAAA,UACA;AAAA,SACF,CAAE,KAAK,GAAG;AAAA,OACZ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,OAAA,EAAS,SAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAMA,IAAM,qBAAA,GAAwB,GAAA;AAAA;AAAA,EAE5B;AAAA,IACE,gDAAA;AAAA;AAAA,IAEA,6DAAA;AAAA;AAAA,IAEA,+BAAA;AAAA;AAAA,IAEA;AAAA,GACF,CAAE,KAAK,GAAG,CAAA;AAAA,EACV;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,qBAAA;AAAA,QACT,WAAA,EAAa;AAAA,OACf;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,OAAA,EAAS,aAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AASA,SAAS,UAAA,CAAW,EAAE,QAAA,EAAU,SAAA,EAAU,EAA+B;AACvE,EAAA,2BACG,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,8CAAA,EAAgD,SAAS,GAC1E,QAAA,EACH,CAAA;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,aAAA;AAKzB,SAAS,gBAAA,CAAiB,EAAE,QAAA,EAAU,SAAA,EAAU,EAAqC;AACnF,EAAA,2BACG,MAAA,EAAA,EAAK,SAAA,EAAW,GAAG,kCAAA,EAAoC,SAAS,GAC9D,QAAA,EACH,CAAA;AAEJ;AAEA,gBAAA,CAAiB,WAAA,GAAc,mBAAA;AAS/B,SAAS,eAAe,EAAE,KAAA,EAAO,UAAA,EAAY,QAAA,EAAU,WAAU,EAA0B;AACzF,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAU,GAAI,WAAW,iBAAiB,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,CAAC,WAAA,KACV,EAAA;AAAA,QACE,iBAAA,CAAkB;AAAA,UAChB,OAAA;AAAA,UACA,IAAA;AAAA,UACA,YAAY,WAAA,CAAY,UAAA;AAAA,UACxB;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MAGD,QAAA,EAAA,CAAC,gCACA,IAAA,CAAA,QAAA,EAAA,EAEE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,sBAAA,CAAuB,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,YACnD,eAAA,EAAe,YAAY,UAAA,IAAc,MAAA;AAAA,YAGzC,QAAA,kBAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,qBAAA,CAAsB,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,gBAClD,eAAA,EAAe,YAAY,UAAA,IAAc;AAAA;AAAA;AAC3C;AAAA,SACF;AAAA,wBAGA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sBAAA,EACZ,QAAA,EACH;AAAA,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;AAGA,IAAM,KAAA,GAAQ,MAAA,CAAO,MAAA,CAAO,cAAA,EAAgB;AAAA,EAC1C,KAAA,EAAO,UAAA;AAAA,EACP,WAAA,EAAa;AACf,CAAC;AAMD,KAAA,CAAM,WAAA,GAAc,OAAA;AAUpB,IAAM,UAAA,GAAa,UAAA;AAAA,EACjB,SAASC,WAAAA,CAAW,KAAA,EAAwB,GAAA,EAAmC;AAC7E,IAAA,MAAM;AAAA;AAAA,MAEJ,KAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA;AAAA,MAEA,KAAA;AAAA,MACA,YAAA;AAAA;AAAA,MAEA,UAAA,GAAa,KAAA;AAAA,MACb,UAAA,GAAa,KAAA;AAAA,MACb,UAAA,GAAa,KAAA;AAAA,MACb,SAAA,GAAY,KAAA;AAAA;AAAA,MAEZ,WAAA,GAAc,UAAA;AAAA;AAAA,MAEd,OAAA,GAAU,SAAA;AAAA,MACV,IAAA,GAAO,SAAA;AAAA;AAAA,MAEP,IAAA;AAAA;AAAA,MAEA,QAAA;AAAA,MACA,aAAA;AAAA;AAAA,MAEA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,EAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,kBAAA,EAAoB,eAAA;AAAA,MACpB,aAAA,EAAe,UAAA;AAAA,MACf,GAAG;AAAA,KACL,GAAI,KAAA;AAGJ,IAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,IAAA,MAAM,eAAe,EAAA,IAAM,WAAA;AAC3B,IAAA,MAAM,OAAA,GAAU,GAAG,YAAY,CAAA,MAAA,CAAA;AAC/B,IAAA,MAAM,aAAA,GAAgB,GAAG,YAAY,CAAA,YAAA,CAAA;AACrC,IAAA,MAAM,OAAA,GAAU,GAAG,YAAY,CAAA,MAAA,CAAA;AAG/B,IAAA,MAAM,mBAA6B,EAAC;AACpC,IAAA,IAAI,eAAA,EAAiB,gBAAA,CAAiB,IAAA,CAAK,eAAe,CAAA;AAC1D,IAAA,IAAI,WAAA,EAAa,gBAAA,CAAiB,IAAA,CAAK,aAAa,CAAA;AACpD,IAAA,IAAI,SAAA,IAAa,YAAA,EAAc,gBAAA,CAAiB,IAAA,CAAK,OAAO,CAAA;AAC5D,IAAA,MAAM,0BAA0B,gBAAA,CAAiB,MAAA,GAAS,IACtD,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,GACzB,MAAA;AAEJ,IAAA,uBACE,GAAA,CAAC,kBAAkB,QAAA,EAAlB,EAA2B,OAAO,EAAE,OAAA,EAAS,IAAA,EAAM,SAAA,EAAU,EAC5D,QAAA,kBAAA,IAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,YAAA;AAAA,QACJ,IAAA;AAAA,QACA,OAAO,KAAA,IAAS,MAAA;AAAA,QAChB,cAAc,YAAA,IAAgB,MAAA;AAAA,QAC9B,UAAA;AAAA,QACA,UAAA;AAAA,QACA,UAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,QAAQ,OAAA,GAAU,cAAA;AAAA,QACnC,kBAAA,EAAkB,uBAAA;AAAA,QAClB,aAAA,EAAa,UAAA;AAAA,QACb,kBAAA,EAAkB,WAAA;AAAA,QAClB,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,SAAS,CAAA;AAAA,QAC/C,GAAG,SAAA;AAAA,QAGH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAM,EAAA,EAAI,OAAA,EAAS,WAAU,sDAAA,EAC3B,QAAA,EAAA;AAAA,YAAA,KAAA;AAAA,YACA,8BACC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gCAAA,EAAiC,aAAA,EAAY,QAAO,QAAA,EAAA,GAAA,EAEpE;AAAA,WAAA,EAEJ,CAAA;AAAA,UAID,WAAA,oBACC,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,aAAA;AAAA,cACJ,IAAA,EAAK,aAAA;AAAA,cACL,SAAA,EAAU,kCAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BAIF,GAAA,CAAC,SAAI,SAAA,EAAW,kBAAA,CAAmB,EAAE,WAAA,EAAa,GAC/C,QAAA,EACH,CAAA;AAAA,UAGC,aAAa,YAAA,oBACZ,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAI,OAAA;AAAA,cACJ,SAAA,EAAU,mCAAA;AAAA,cAEV,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAS,QAAA,EAAA,YAAA,EAAa;AAAA;AAAA;AACnC;AAAA;AAAA,KAEJ,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AC7ZlB,IAAM,0BAA0B,CAAA,CAAE,IAAA,CAAK,CAAC,SAAA,EAAW,aAAa,CAAC;AAUjE,IAAM,uBAAuB,CAAA,CAAE,IAAA,CAAK,CAAC,IAAA,EAAM,SAAA,EAAW,IAAI,CAAC;AAQ3D,IAAM,8BAA8B,CAAA,CAAE,IAAA,CAAK,CAAC,UAAA,EAAY,YAAY,CAAC;AAWrE,IAAM,qBAAA,GAAwB,yBAAyB,MAAA,CAAO;AAAA;AAAA,EAEnE,KAAA,EAAO,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA,EAC3B,WAAA,EAAa,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA,EACjC,YAAA,EAAc,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA;AAAA,EAGlC,OAAO,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,GAAW,QAAA,EAAS;AAAA,EACtC,cAAc,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,GAAW,QAAA,EAAS;AAAA;AAAA,EAG7C,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA,EAChD,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA,EAChD,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA,EAChD,WAAW,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA;AAAA,EAG/C,WAAA,EAAa,2BAAA,CAA4B,QAAA,EAAS,CAAE,QAAQ,UAAU,CAAA;AAAA;AAAA,EAGtE,OAAA,EAAS,uBAAA,CAAwB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA,EAC7D,IAAA,EAAM,oBAAA,CAAqB,QAAA,EAAS,CAAE,QAAQ,SAAS,CAAA;AAAA;AAAA,EAGvD,IAAA,EAAM,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA,EAAS;AAAA;AAAA,EAG1B,QAAA,EAAU,CAAA,CAAE,MAAA,EAAgC,CAAE,QAAA,EAAS;AAAA,EACvD,aAAA,EAAe,CAAA,CAAE,MAAA,EAAqC,CAAE,QAAA,EAAS;AAAA;AAAA,EAGjE,QAAA,EAAU,EAAE,MAAA;AACd,CAAC;AAWM,IAAM,gBAAA,GAAmB,yBAAyB,MAAA,CAAO;AAAA;AAAA,EAE9D,KAAA,EAAO,EAAE,MAAA,EAAO;AAAA;AAAA,EAGhB,YAAY,CAAA,CAAE,OAAA,GAAU,QAAA,EAAS,CAAE,QAAQ,KAAK,CAAA;AAAA;AAAA,EAGhD,QAAA,EAAU,EAAE,MAAA,EAAkB;AAAA;AAAA,EAG9B,SAAA,EAAW,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA;AACxB,CAAC;AAYM,IAAM,qBAAA,GAAwB,EAAE,MAAA,CAAO;AAAA;AAAA,EAE5C,QAAA,EAAU,EAAE,MAAA,EAAkB;AAAA;AAAA,EAG9B,SAAA,EAAW,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA;AACxB,CAAC;AAWM,IAAM,2BAAA,GAA8B,EAAE,MAAA,CAAO;AAAA;AAAA,EAElD,QAAA,EAAU,EAAE,MAAA,EAAkB;AAAA;AAAA,EAG9B,SAAA,EAAW,CAAA,CAAE,MAAA,EAAO,CAAE,QAAA;AACxB,CAAC","file":"chunk-B6DHPMDP.mjs","sourcesContent":["\"use client\";\n\n/**\n * RadioGroup Component\n * Accessible single-selection radio group with React Aria primitives and CVA styling\n *\n * Key Features:\n * - Bordered container design with explicit 44px+ touch targets\n * - 2 variants: default, destructive (no outline per clarification)\n * - 3 sizes: sm (44px), default (48px), lg (56px)\n * - Arrow keys move focus AND select (WAI-ARIA standard selection-follows-focus)\n * - Error styling on ALL items (cognitive accessibility)\n * - Spring animation for selection indicator\n * - RTL support (indicator auto-flips)\n * - Radio.Label and Radio.Description sub-components\n *\n * @see radiogroup-prd.md (Product Requirements)\n * @see plan.md (11 Key Clarifications)\n * @see React Aria RadioGroup: https://react-spectrum.adobe.com/react-aria/RadioGroup.html\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AAA)\n */\n\nimport {\n  forwardRef,\n  createContext,\n  useContext,\n  useId,\n  type ReactNode,\n  type ForwardedRef,\n} from 'react';\nimport {\n  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n  Label,\n  Text,\n  FieldError,\n} from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { FOCUS_STYLES, HIGH_CONTRAST_FOCUS } from '../../styles/interaction-states';\nimport type {\n  RadioGroupProps,\n  RadioProps,\n  RadioLabelProps,\n  RadioDescriptionProps,\n  RadioGroupVariant,\n  RadioGroupSize,\n} from './RadioGroup.types';\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface RadioGroupContextValue {\n  variant: RadioGroupVariant;\n  size: RadioGroupSize;\n  isInvalid: boolean;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue>({\n  variant: 'default',\n  size: 'default',\n  isInvalid: false,\n});\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * RadioGroup container variants\n * Controls orientation and spacing (gap-2 = 8px per clarification)\n */\nconst radioGroupVariants = cva(\n  // Base: flex container\n  \"flex\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col gap-2\",\n        horizontal: \"flex-row flex-wrap gap-2\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n);\n\n/**\n * Radio item bordered container variants\n * Bordered container design with explicit touch targets\n * All sizes maintain 44px minimum height (WCAG 2.2 AAA)\n * All sizes use rounded-md (6px) per clarification\n */\nconst radioItemVariants = cva(\n  // Base: bordered container with flex layout, RTL support\n  [\n    \"flex items-center gap-3 rounded-md border cursor-pointer\",\n    \"transition-colors duration-200\",\n    \"rtl:flex-row-reverse\", // RTL: indicator flips to right\n    // Focus ring on entire container\n    FOCUS_STYLES,\n    HIGH_CONTRAST_FOCUS,\n  ].join(\" \"),\n  {\n    variants: {\n      variant: {\n        default: [\n          \"border-[var(--border)]\",\n          \"data-[hovered]:bg-[var(--accent)]/10\",\n          \"data-[selected]:border-[var(--primary)]\",\n          \"data-[selected]:bg-[var(--primary)]/10\",\n        ].join(\" \"),\n        destructive: [\n          \"border-[var(--border)]\",\n          \"data-[hovered]:bg-[var(--destructive)]/10\",\n          \"data-[selected]:border-[var(--destructive)]\",\n          \"data-[selected]:bg-[var(--destructive)]/10\",\n        ].join(\" \"),\n      },\n      size: {\n        sm: \"min-h-[44px] py-2 px-3 text-sm\",\n        default: \"min-h-[48px] py-3 px-4 text-sm\",\n        lg: \"min-h-[56px] py-4 px-5 text-base\",\n      },\n      isDisabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"\",\n      },\n      isInvalid: {\n        // Error: ALL items get destructive border (cognitive accessibility)\n        true: \"border-[var(--destructive)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      isDisabled: false,\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Circle indicator (outer ring) variants\n */\nconst radioIndicatorVariants = cva(\n  // Base: circle with border, flex-shrink-0 to prevent squishing\n  \"flex-shrink-0 rounded-full border-2 flex items-center justify-center transition-colors duration-200\",\n  {\n    variants: {\n      variant: {\n        default: [\n          \"border-[var(--border)]\",\n          \"data-[selected]:border-[var(--primary)]\",\n        ].join(\" \"),\n        destructive: [\n          \"border-[var(--border)]\",\n          \"data-[selected]:border-[var(--destructive)]\",\n        ].join(\" \"),\n      },\n      size: {\n        sm: \"h-4 w-4\",\n        default: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n/**\n * Inner dot variants (appears when selected)\n * Spring animation: cubic-bezier(0.34, 1.56, 0.64, 1) with slight overshoot\n */\nconst radioInnerDotVariants = cva(\n  // Base: centered dot with spring animation\n  [\n    \"rounded-full transition-transform duration-200\",\n    // Spring animation with overshoot\n    \"[transition-timing-function:cubic-bezier(0.34,1.56,0.64,1)]\",\n    // Respect reduced motion preference\n    \"motion-reduce:transition-none\",\n    // Scale from 0 to 1 on selection\n    \"scale-0 data-[selected]:scale-100\",\n  ].join(\" \"),\n  {\n    variants: {\n      variant: {\n        default: \"bg-[var(--primary)]\",\n        destructive: \"bg-[var(--destructive)]\",\n      },\n      size: {\n        sm: \"h-2 w-2\",\n        default: \"h-2.5 w-2.5\",\n        lg: \"h-3 w-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\n/**\n * Radio.Label - Styled label for radio item content\n */\nfunction RadioLabel({ children, className }: RadioLabelProps): ReactNode {\n  return (\n    <span className={cn(\"font-medium text-[var(--content-foreground)]\", className)}>\n      {children}\n    </span>\n  );\n}\n\nRadioLabel.displayName = \"Radio.Label\";\n\n/**\n * Radio.Description - Styled description for radio item content (muted)\n */\nfunction RadioDescription({ children, className }: RadioDescriptionProps): ReactNode {\n  return (\n    <span className={cn(\"text-sm text-[var(--menu-muted)]\", className)}>\n      {children}\n    </span>\n  );\n}\n\nRadioDescription.displayName = \"Radio.Description\";\n\n// ============================================================================\n// Radio Component\n// ============================================================================\n\n/**\n * Radio item component with bordered container design\n */\nfunction RadioComponent({ value, isDisabled, children, className }: RadioProps): ReactNode {\n  const { variant, size, isInvalid } = useContext(RadioGroupContext);\n\n  return (\n    <AriaRadio\n      value={value}\n      isDisabled={isDisabled}\n      className={(renderProps) =>\n        cn(\n          radioItemVariants({\n            variant,\n            size,\n            isDisabled: renderProps.isDisabled,\n            isInvalid,\n          }),\n          className\n        )\n      }\n    >\n      {(renderProps) => (\n        <>\n          {/* Circle indicator */}\n          <div\n            className={radioIndicatorVariants({ variant, size })}\n            data-selected={renderProps.isSelected || undefined}\n          >\n            {/* Inner dot with spring animation */}\n            <div\n              className={radioInnerDotVariants({ variant, size })}\n              data-selected={renderProps.isSelected || undefined}\n            />\n          </div>\n\n          {/* Children content (flexible - text, icons, complex layouts) */}\n          <div className=\"flex-1 flex flex-col\">\n            {children}\n          </div>\n        </>\n      )}\n    </AriaRadio>\n  );\n}\n\n// Attach sub-components\nconst Radio = Object.assign(RadioComponent, {\n  Label: RadioLabel,\n  Description: RadioDescription,\n}) as typeof RadioComponent & {\n  Label: typeof RadioLabel;\n  Description: typeof RadioDescription;\n  displayName: string;\n};\n\nRadio.displayName = \"Radio\";\n\n// ============================================================================\n// RadioGroup Component\n// ============================================================================\n\n/**\n * RadioGroup root component\n * Accessible single-selection control with bordered container design\n */\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n    const {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Selection props\n      value,\n      defaultValue,\n      // State props\n      isDisabled = false,\n      isReadOnly = false,\n      isRequired = false,\n      isInvalid = false,\n      // Layout props\n      orientation = 'vertical',\n      // Variant props\n      variant = 'default',\n      size = 'default',\n      // Form props\n      name,\n      // Event handlers\n      onChange,\n      onFocusChange,\n      // Standard props\n      className,\n      children,\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      'aria-describedby': ariaDescribedby,\n      'data-testid': dataTestId,\n      ...restProps\n    } = props;\n\n    // Generate unique IDs for accessibility\n    const generatedId = useId();\n    const radioGroupId = id ?? generatedId;\n    const labelId = `${radioGroupId}-label`;\n    const descriptionId = `${radioGroupId}-description`;\n    const errorId = `${radioGroupId}-error`;\n\n    // Build aria-describedby from description and error\n    const describedByParts: string[] = [];\n    if (ariaDescribedby) describedByParts.push(ariaDescribedby);\n    if (description) describedByParts.push(descriptionId);\n    if (isInvalid && errorMessage) describedByParts.push(errorId);\n    const computedAriaDescribedBy = describedByParts.length > 0\n      ? describedByParts.join(' ')\n      : undefined;\n\n    return (\n      <RadioGroupContext.Provider value={{ variant, size, isInvalid }}>\n        <AriaRadioGroup\n          ref={ref}\n          id={radioGroupId}\n          name={name}\n          value={value ?? undefined}\n          defaultValue={defaultValue ?? undefined}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isRequired={isRequired}\n          isInvalid={isInvalid}\n          orientation={orientation}\n          onChange={onChange}\n          onFocusChange={onFocusChange}\n          aria-label={ariaLabel}\n          aria-labelledby={label ? labelId : ariaLabelledby}\n          aria-describedby={computedAriaDescribedBy}\n          data-testid={dataTestId}\n          data-orientation={orientation}\n          className={cn(\"flex flex-col gap-1.5\", className)}\n          {...restProps}\n        >\n          {/* Label with optional required asterisk */}\n          {label && (\n            <Label id={labelId} className=\"text-sm font-medium text-[var(--content-foreground)]\">\n              {label}\n              {isRequired && (\n                <span className=\"ml-1 text-[var(--destructive)]\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </Label>\n          )}\n\n          {/* Description */}\n          {description && (\n            <Text\n              id={descriptionId}\n              slot=\"description\"\n              className=\"text-sm text-[var(--menu-muted)]\"\n            >\n              {description}\n            </Text>\n          )}\n\n          {/* Radio items container with orientation */}\n          <div className={radioGroupVariants({ orientation })}>\n            {children}\n          </div>\n\n          {/* Error message with role=\"alert\" for screen reader announcements */}\n          {isInvalid && errorMessage && (\n            <FieldError\n              id={errorId}\n              className=\"text-sm text-[var(--destructive)]\"\n            >\n              <span role=\"alert\">{errorMessage}</span>\n            </FieldError>\n          )}\n        </AriaRadioGroup>\n      </RadioGroupContext.Provider>\n    );\n  }\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  RadioGroup,\n  Radio,\n  radioGroupVariants,\n  radioItemVariants,\n  radioIndicatorVariants,\n  radioInnerDotVariants,\n};\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { ReactNode } from 'react';\nimport type {\n  RadioGroupProps as AriaRadioGroupProps,\n  RadioProps as AriaRadioProps,\n} from 'react-aria-components';\n\n/**\n * RadioGroup variant schema\n * Only 2 variants: default and destructive (no outline per clarification)\n *\n * @see radiogroup-prd.md US-2 (Style Variants)\n * @see plan.md Decision 9 (2 variants only)\n */\nexport const RadioGroupVariantSchema = z.enum(['default', 'destructive']);\nexport type RadioGroupVariant = z.infer<typeof RadioGroupVariantSchema>;\n\n/**\n * RadioGroup size schema\n * All sizes maintain 44px minimum height for WCAG 2.2 AAA compliance\n *\n * @see radiogroup-prd.md US-3 (Size Variants)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const RadioGroupSizeSchema = z.enum(['sm', 'default', 'lg']);\nexport type RadioGroupSize = z.infer<typeof RadioGroupSizeSchema>;\n\n/**\n * RadioGroup orientation schema\n *\n * @see radiogroup-prd.md US-5 (Orientation Support)\n */\nexport const RadioGroupOrientationSchema = z.enum(['vertical', 'horizontal']);\nexport type RadioGroupOrientation = z.infer<typeof RadioGroupOrientationSchema>;\n\n/**\n * RadioGroup root component props schema\n *\n * @see radiogroup-prd.md US-1 (Basic Single Selection)\n * @see radiogroup-prd.md US-4 (Labels, Descriptions, Errors)\n * @see radiogroup-prd.md US-6 (Validation States)\n * @see plan.md (All design decisions from clarification session)\n */\nexport const RadioGroupPropsSchema = BaseComponentPropsSchema.extend({\n  // Display props (US-4)\n  label: z.string().optional(),\n  description: z.string().optional(),\n  errorMessage: z.string().optional(),\n\n  // Selection props (US-1) - nullable for no initial selection\n  value: z.string().nullable().optional(),\n  defaultValue: z.string().nullable().optional(),\n\n  // State props (US-6)\n  isDisabled: z.boolean().optional().default(false),\n  isReadOnly: z.boolean().optional().default(false),\n  isRequired: z.boolean().optional().default(false),\n  isInvalid: z.boolean().optional().default(false),\n\n  // Layout props (US-5)\n  orientation: RadioGroupOrientationSchema.optional().default('vertical'),\n\n  // Variant props (US-2, US-3) - 2 variants only\n  variant: RadioGroupVariantSchema.optional().default('default'),\n  size: RadioGroupSizeSchema.optional().default('default'),\n\n  // Form props (US-6)\n  name: z.string().optional(),\n\n  // Event handlers\n  onChange: z.custom<(value: string) => void>().optional(),\n  onFocusChange: z.custom<(isFocused: boolean) => void>().optional(),\n\n  // Children (Radio components)\n  children: z.custom<ReactNode>(),\n});\n\nexport type RadioGroupProps = z.infer<typeof RadioGroupPropsSchema> &\n  Omit<AriaRadioGroupProps, keyof z.infer<typeof RadioGroupPropsSchema>>;\n\n/**\n * Radio item component props schema\n *\n * @see radiogroup-prd.md US-1 (Basic Single Selection)\n * @see radiogroup-prd.md US-7 (Rich Content Support)\n */\nexport const RadioPropsSchema = BaseComponentPropsSchema.extend({\n  // Item value (required)\n  value: z.string(),\n\n  // Disabled state (individual item)\n  isDisabled: z.boolean().optional().default(false),\n\n  // Item content - accepts any ReactNode for flexible children\n  children: z.custom<ReactNode>(),\n\n  // Optional className for custom styling\n  className: z.string().optional(),\n});\n\nexport type RadioProps = z.infer<typeof RadioPropsSchema> &\n  Omit<AriaRadioProps, keyof z.infer<typeof RadioPropsSchema>>;\n\n/**\n * Radio.Label sub-component props schema\n * Helper component for styled label within Radio item\n *\n * @see radiogroup-prd.md US-7 (Rich Content Support)\n * @see plan.md Decision 1 (Sub-components)\n */\nexport const RadioLabelPropsSchema = z.object({\n  // Label content\n  children: z.custom<ReactNode>(),\n\n  // Optional className for custom styling\n  className: z.string().optional(),\n});\n\nexport type RadioLabelProps = z.infer<typeof RadioLabelPropsSchema>;\n\n/**\n * Radio.Description sub-component props schema\n * Helper component for styled description within Radio item (muted text)\n *\n * @see radiogroup-prd.md US-7 (Rich Content Support)\n * @see plan.md Decision 1 (Sub-components)\n */\nexport const RadioDescriptionPropsSchema = z.object({\n  // Description content\n  children: z.custom<ReactNode>(),\n\n  // Optional className for custom styling\n  className: z.string().optional(),\n});\n\nexport type RadioDescriptionProps = z.infer<typeof RadioDescriptionPropsSchema>;\n\n/**\n * CVA variant configuration types\n * Used for class-variance-authority integration\n */\nexport type RadioGroupVariantType = RadioGroupVariant;\nexport type RadioGroupSizeType = RadioGroupSize;\nexport type RadioGroupOrientationType = RadioGroupOrientation;\n"]}

package/dist/chunk-BDXKKMBZ.mjs

@@ -0,0 +1,184 @@
+import { useButtonGroupContext, useButtonGroupItemContext, buttonGroupItemVariants } from './chunk-FPKEAJRZ.mjs';
+import { PRESSED_STYLES, HOVER_STYLES, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_PRESSED } from './chunk-HK46BT5U.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { memo, forwardRef, useId } from 'react';
+import { Button as Button$1 } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { Loader2, Zap } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var buttonOuterVariants = cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var buttonVariants = buttonVisualVariants;
+var Button = memo(forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsx(
+                  Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+
+export { Button, buttonOuterVariants, buttonVariants, buttonVisualVariants };
+//# sourceMappingURL=chunk-BDXKKMBZ.mjs.map
+//# sourceMappingURL=chunk-BDXKKMBZ.mjs.map

package/dist/chunk-BDXKKMBZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Button/Button.tsx"],"names":["AriaButton"],"mappings":"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","file":"chunk-BDXKKMBZ.mjs","sourcesContent":["\"use client\";\n\n/**\n * Button Component - 3-Layer Architecture\n * Accessible button with React Aria primitives and CVA styling\n *\n * Architecture:\n * - Layer 1: Touch Target (44x44px WCAG AAA compliant, transparent)\n * - Layer 2: Visual Button (configurable size, colors, borders)\n * - Layer 3: Content & Effects (text, icons, ripple, loading spinner)\n *\n * @see 3layer-plan.md for architecture details\n * @see spec.md FR-029 to FR-037 (Button Component Requirements)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see spec.md FR-014 (44x44px minimum touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, useId, type ReactNode } from 'react';\nimport {\n  Button as AriaButton,\n  type ButtonProps as AriaButtonProps,\n} from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Loader2, Zap } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { PRESSED_STYLES, HOVER_STYLES, HIGH_CONTRAST_HOVER, HIGH_CONTRAST_PRESSED } from '../../styles/interaction-states';\nimport {\n  useButtonGroupContext,\n  useButtonGroupItemContext,\n} from '../ButtonGroup/ButtonGroupContext';\nimport { buttonGroupItemVariants } from '../ButtonGroup/ButtonGroup.variants';\n\n/**\n * Layer 1: Transparent outer touch target (44x44px minimum)\n * Handles WCAG 2.2 AAA touch target requirement\n * Always transparent, centers the visual button inside\n * IMPORTANT: Focus ring stays on Layer 1 for AAA compliance (2.4.13)\n *\n * In vertical ButtonGroups, uses items-stretch so the visual layer (Layer 2)\n * can fill the full touch target height, eliminating gaps between buttons.\n */\nconst buttonOuterVariants = cva(\n  \"inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      fullWidth: {\n        true: \"w-full\",\n        false: \"\",\n      },\n      inVerticalGroup: {\n        true: \"items-stretch\",\n        false: \"items-center\",\n      },\n    },\n    defaultVariants: {\n      fullWidth: false,\n      inVerticalGroup: false,\n    },\n  }\n);\n\n/**\n * Layer 2: Visual button appearance (adjustable size)\n * Provides the visual appearance with configurable size\n * Can be smaller than touch target for use cases like carousel dots\n * NOTE: NO focus-visible styles here - focus ring is on Layer 1\n */\nconst buttonVisualVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80\",\n        destructive:\n          \"bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80\",\n        outline:\n          \"border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]\",\n        secondary:\n          \"bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70\",\n        ghost:\n          \"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]\",\n        link: \"text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]\",\n      },\n      fullWidth: {\n        true: \"w-full\",\n        false: \"\",\n      },\n      visualSize: {\n        default: \"h-10 px-4 py-2\",\n        sm: \"h-9 rounded-md px-3 text-xs\",\n        lg: \"h-11 rounded-md px-8\",\n        icon: \"h-10 w-10\",\n        dot: \"h-5 w-5 rounded-full p-0 min-h-0 min-w-0\",\n      },\n      paywall: {\n        true: \"!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      visualSize: \"default\",\n      paywall: false,\n    },\n  }\n);\n\n/**\n * @deprecated Use buttonVisualVariants instead. This alias is kept for backward compatibility.\n */\nconst buttonVariants = buttonVisualVariants;\n\nexport interface ButtonProps\n  extends Omit<AriaButtonProps, 'className'>,\n    VariantProps<typeof buttonVisualVariants> {\n  as?: 'button' | 'a';\n  loading?: boolean;\n  loadingText?: string;\n  shortcut?: string;\n  className?: string;\n  buttonVisualClassName?: string;\n  children?: ReactNode;\n  /** Enables paywall state - overrides variant styling and prevents normal action */\n  paywall?: boolean;\n  /** URL to open in new tab when paywalled button is clicked */\n  paywallRedirect?: string;\n  /** Description of the premium feature for tooltips and screen readers (max 200 chars) */\n  paywallDescription?: string;\n  /** Full width button */\n  fullWidth?: boolean;\n  /**\n   * Visual size of the button (Layer 2)\n   * Defaults to `size` for backward compatibility\n   * Use independently for small visual buttons with large touch targets\n   * @example <Button size=\"default\" visualSize=\"dot\" /> // 44px touch, 12px visual\n   */\n  visualSize?: 'sm' | 'default' | 'lg' | 'icon' | 'dot';\n  /**\n   * Size of the button - controls both touch target awareness and visual size\n   * @deprecated For independent visual sizing, use visualSize prop instead\n   */\n  size?: 'sm' | 'default' | 'lg' | 'icon';\n}\n\n/**\n * Button Component - 3-Layer Architecture\n * Fully accessible button with React Aria and themed styling\n *\n * Layer 1: Touch Target (AriaButton) - 44x44px WCAG AAA compliant\n * Layer 2: Visual Button (span) - configurable appearance\n * Layer 3: Content (children) - text, icons, effects\n */\nconst Button = memo(forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      buttonVisualClassName,\n      variant,\n      size,\n      visualSize,\n      fullWidth,\n      loading = false,\n      loadingText = \"Loading...\",\n      shortcut,\n      children,\n      isDisabled,\n      paywall = false,\n      paywallRedirect,\n      paywallDescription,\n      onPress,\n      ...props\n    },\n    ref\n  ) => {\n    const paywallDescriptionId = useId();\n\n    // ==========================================================================\n    // ButtonGroup Context Integration\n    // ==========================================================================\n\n    // Consume group-level context (variant, size, isDisabled, orientation)\n    const groupContext = useButtonGroupContext();\n\n    // Consume item-level context (position for border-radius styling)\n    const itemContext = useButtonGroupItemContext();\n\n    // Merge context values with props (props take precedence)\n    const effectiveVariant = variant ?? groupContext?.variant ?? 'default';\n    const effectiveSize = size ?? groupContext?.size;\n    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;\n\n    // In vertical groups, buttons should be full width automatically\n    const isInVerticalGroup = groupContext?.orientation === 'vertical';\n    const effectiveFullWidth = fullWidth || isInVerticalGroup;\n\n    // Position styling for ButtonGroup (only applied when in a group)\n    const positionClassName = itemContext\n      ? buttonGroupItemVariants({\n          orientation: groupContext?.orientation ?? 'horizontal',\n          position: itemContext.position,\n        })\n      : '';\n\n    // Default visualSize to size for backward compatibility\n    const effectiveVisualSize = visualSize ?? effectiveSize ?? 'default';\n\n    // AAA Accessibility: Warn in dev/test if icon/dot variant lacks accessible name\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        (effectiveVisualSize === 'dot' || effectiveVisualSize === 'icon') &&\n        !props['aria-label'] &&\n        !children\n      ) {\n        console.warn(\n          '[Button] visualSize=\"dot\" or \"icon\" requires aria-label when no visible text is provided (WCAG 1.1.1)'\n        );\n      }\n    }\n\n    /**\n     * Handle button press - intercepts action when paywalled\n     * If paywalled with redirect URL, opens in new tab\n     * Otherwise, calls the normal onPress handler\n     */\n    const handlePress = (e: Parameters<NonNullable<AriaButtonProps['onPress']>>[0]): void => {\n      if (paywall) {\n        if (paywallRedirect) {\n          window.open(paywallRedirect, '_blank', 'noopener,noreferrer');\n        }\n        // Don't call onPress when paywalled\n        return;\n      }\n      onPress?.(e);\n    };\n\n    // Only set isDisabled when we have a reason to disable\n    // Otherwise, let slot system control disabled state (e.g., in NumberField)\n    const computedIsDisabled = effectiveIsDisabled || loading || undefined;\n\n    return (\n      <AriaButton\n        ref={ref}\n        isDisabled={computedIsDisabled}\n        aria-disabled={paywall ? true : undefined}\n        aria-describedby={paywall ? paywallDescriptionId : undefined}\n        onPress={handlePress}\n        className={cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className)}\n        {...props}\n      >\n        {(renderProps) => (\n          /* Layer 2: Visual Button */\n          <span\n            className={cn(\n              buttonVisualVariants({\n                variant: effectiveVariant,\n                visualSize: effectiveVisualSize,\n                paywall,\n                fullWidth: effectiveFullWidth,\n              }),\n              // Position styling from ButtonGroup context (border-radius adjustments)\n              positionClassName,\n              buttonVisualClassName,\n              // Layer 2 interaction styles (no focus - focus ring is on Layer 1)\n              PRESSED_STYLES,\n              HOVER_STYLES,\n              HIGH_CONTRAST_HOVER,\n              HIGH_CONTRAST_PRESSED\n            )}\n            data-pressed={renderProps.isPressed || undefined}\n          >\n            {/* Layer 3: Content & Effects */}\n\n            {/* FR-033: Loading spinner with screen reader announcement */}\n            {/* Uses motion-safe: for WCAG 2.3.3 AAA (Animation from Interactions) */}\n            {loading && (\n              <>\n                <Loader2 className=\"motion-safe:animate-spin\" aria-hidden=\"true\" />\n                <span className=\"sr-only\" aria-live=\"polite\">\n                  {loadingText}\n                </span>\n              </>\n            )}\n\n            {/* Hide children during loading */}\n            {!loading && children}\n\n            {/* Paywall: Lightning bolt icon */}\n            {paywall && (\n              <Zap\n                data-testid=\"zap-icon\"\n                aria-hidden=\"true\"\n                className=\"ml-1\"\n              />\n            )}\n\n            {/* Paywall: Screen reader description */}\n            {paywall && (\n              <span id={paywallDescriptionId} className=\"sr-only\">\n                Premium feature: {paywallDescription || \"Upgrade required to access this feature\"}\n              </span>\n            )}\n\n            {/* FR-034: Keyboard shortcut display on focus */}\n            {renderProps.isFocusVisible && shortcut && (\n              <kbd className=\"ml-auto hidden text-xs opacity-60 lg:inline\">\n                {shortcut}\n              </kbd>\n            )}\n\n            {/* Touch/press ripple effect - FR-031: Pressed state feedback */}\n            {/* Uses motion-safe: for WCAG 2.3.3 AAA (Animation from Interactions) */}\n            {renderProps.isPressed && (\n              <span\n                className=\"absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        )}\n      </AriaButton>\n    );\n  }\n));\n\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants, buttonOuterVariants, buttonVisualVariants };\n"]}