@wow-two-beta/ui 0.0.43 → 0.0.45

package/dist/{chunk-ITSJYVYW.js → chunk-HDKEZTC3.js}

@@ -1,9 +1,9 @@
-import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-G4H4EDAC.js';
+import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-YYY5WBR2.js';
 import { PopoverTrigger, Popover, PopoverContent } from './chunk-VDE5B3IY.js';
-import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-LFZV2XTZ.js';
+import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-K2TZTSNQ.js';
 import { useControlled } from './chunk-NUMFGKPY.js';
 import { Icon } from './chunk-F227LKWK.js';
-import { tv, dataAttr } from './chunk-DKR5PHQR.js';
+import { tv, CssExtensions, dataAttr } from './chunk-MUUFERDO.js';
 import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-BMABNEZX.js';
 import { useId } from './chunk-KDXJQNB6.js';
 import { cn, composeRefs } from './chunk-LDRFQG44.js';
@@ -478,18 +478,18 @@ var checkboxVariants = tv({
     { variant: "ghost", tone: "danger", class: "text-destructive peer-checked:bg-destructive/10" },
     { variant: "ghost", tone: "success", class: "text-success peer-checked:bg-success/10" },
     { variant: "ghost", tone: "warning", class: "text-warning peer-checked:bg-warning/10" },
-    // === GLASS × tone — dark glass unchecked → tone fill checked, white check throughout ===
-    { variant: "glass", tone: "primary", class: "text-white peer-checked:bg-primary peer-checked:border-primary" },
-    { variant: "glass", tone: "neutral", class: "text-white peer-checked:bg-foreground peer-checked:border-foreground peer-checked:text-background" },
-    { variant: "glass", tone: "danger", class: "text-white peer-checked:bg-destructive peer-checked:border-destructive" },
-    { variant: "glass", tone: "success", class: "text-white peer-checked:bg-success peer-checked:border-success" },
-    { variant: "glass", tone: "warning", class: "text-white peer-checked:bg-warning peer-checked:border-warning" },
-    // === GLASS-SURFACE × tone — same as glass but border stays light when checked ===
-    { variant: "glass-surface", tone: "primary", class: "text-white peer-checked:bg-primary peer-checked:border-white/60" },
-    { variant: "glass-surface", tone: "neutral", class: "text-white peer-checked:bg-foreground peer-checked:border-white/60 peer-checked:text-background" },
-    { variant: "glass-surface", tone: "danger", class: "text-white peer-checked:bg-destructive peer-checked:border-white/60" },
-    { variant: "glass-surface", tone: "success", class: "text-white peer-checked:bg-success peer-checked:border-white/60" },
-    { variant: "glass-surface", tone: "warning", class: "text-white peer-checked:bg-warning peer-checked:border-white/60" }
+    // === GLASS × tone — dark glass stays on check; only the white check icon appears (peer-checked:opacity-100 on Check). Tone is preserved as text-white throughout — bg doesn't swap, matching the photo-overlay aesthetic. ===
+    { variant: "glass", tone: "primary", class: "text-white" },
+    { variant: "glass", tone: "neutral", class: "text-white" },
+    { variant: "glass", tone: "danger", class: "text-white" },
+    { variant: "glass", tone: "success", class: "text-white" },
+    { variant: "glass", tone: "warning", class: "text-white" },
+    // === GLASS-SURFACE × tone — same: dark glass + white check on check. Border emphasis (white/80) optional on check for stronger affordance. ===
+    { variant: "glass-surface", tone: "primary", class: "text-white peer-checked:border-white/80" },
+    { variant: "glass-surface", tone: "neutral", class: "text-white peer-checked:border-white/80" },
+    { variant: "glass-surface", tone: "danger", class: "text-white peer-checked:border-white/80" },
+    { variant: "glass-surface", tone: "success", class: "text-white peer-checked:border-white/80" },
+    { variant: "glass-surface", tone: "warning", class: "text-white peer-checked:border-white/80" }
   ],
   defaultVariants: {
     variant: "solid",
@@ -497,11 +497,33 @@ var checkboxVariants = tv({
   }
 });
 var COMPONENT_NAME = "Checkbox";
-var SIZE_CLASS = {
+var CHECKBOX_SIZE_PRESETS = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl"
+]);
+var BOX_SIZE_CLASS = {
+  xs: "h-3.5 w-3.5",
+  // 14px — dense / mobile-tight (consumer must ensure ≥24px hit target via wrapping label)
   sm: "h-4 w-4",
+  // 16px
   md: "h-5 w-5",
-  lg: "h-6 w-6"
+  // 20px (default)
+  lg: "h-6 w-6",
+  // 24px (WCAG-compliant standalone)
+  xl: "h-7 w-7"
+  // 28px (emphasis / a11y-first)
 };
+var ICON_SIZE_CLASS = {
+  xs: "h-2.5 w-2.5",
+  sm: "h-3 w-3",
+  md: "h-3.5 w-3.5",
+  lg: "h-4 w-4",
+  xl: "h-5 w-5"
+};
+var DEFAULT_ICON_CLASS = "h-3 w-3";
 var INDETERMINATE_CHECKED_CLASS = {
   solid: {
     primary: "bg-primary border-primary text-primary-foreground",
@@ -531,19 +553,20 @@ var INDETERMINATE_CHECKED_CLASS = {
     success: "bg-success/10 text-success",
     warning: "bg-warning/10 text-warning"
   },
+  /* Glass family keeps dark glass bg in indeterminate state (matches checked behavior). The Minus icon renders unconditionally; text-white from variant base makes it visible. */
   glass: {
-    primary: "bg-primary border-primary text-white",
-    neutral: "bg-foreground border-foreground text-background",
-    danger: "bg-destructive border-destructive text-white",
-    success: "bg-success border-success text-white",
-    warning: "bg-warning border-warning text-white"
+    primary: "text-white",
+    neutral: "text-white",
+    danger: "text-white",
+    success: "text-white",
+    warning: "text-white"
   },
   "glass-surface": {
-    primary: "bg-primary border-white/60 text-white",
-    neutral: "bg-foreground border-white/60 text-background",
-    danger: "bg-destructive border-white/60 text-white",
-    success: "bg-success border-white/60 text-white",
-    warning: "bg-warning border-white/60 text-white"
+    primary: "text-white border-white/80",
+    neutral: "text-white border-white/80",
+    danger: "text-white border-white/80",
+    success: "text-white border-white/80",
+    warning: "text-white border-white/80"
   }
 };
 var Checkbox = forwardRef(
@@ -561,38 +584,52 @@ var Checkbox = forwardRef(
   }, ref) => {
     const ctx = useFormControl();
     const isDisabled = disabled ?? ctx?.isDisabled;
-    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "checkbox",
-          id: id ?? ctx?.id,
-          disabled: isDisabled,
-          required: required ?? ctx?.isRequired,
-          checked,
-          "aria-invalid": ctx?.isInvalid || void 0,
-          "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
-          className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn(
-            checkboxVariants({ variant, tone }),
-            indeterminate && INDETERMINATE_CHECKED_CLASS[variant][tone]
+    const { preset: sizePreset, box: sizeBox } = CssExtensions.parseSizeUnion(
+      size,
+      CHECKBOX_SIZE_PRESETS
+    );
+    const boxClass = sizePreset ? BOX_SIZE_CLASS[sizePreset] : void 0;
+    const iconClass = sizePreset ? ICON_SIZE_CLASS[sizePreset] : DEFAULT_ICON_CLASS;
+    const boxStyle = sizeBox ? CssExtensions.resolveBoxSize(sizeBox) : void 0;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn("relative inline-flex shrink-0", boxClass, className),
+        style: boxStyle,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              id: id ?? ctx?.id,
+              disabled: isDisabled,
+              required: required ?? ctx?.isRequired,
+              checked,
+              "aria-invalid": ctx?.isInvalid || void 0,
+              "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
+              className: "peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+              ...props
+            }
           ),
-          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 opacity-0 peer-checked:opacity-100" })
-        }
-      )
-    ] });
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                checkboxVariants({ variant, tone }),
+                indeterminate && INDETERMINATE_CHECKED_CLASS[variant][tone]
+              ),
+              children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: iconClass }) : /* @__PURE__ */ jsx(Check, { className: cn(iconClass, "opacity-0 peer-checked:opacity-100") })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = COMPONENT_NAME;
-var SIZE_CLASS2 = {
+var SIZE_CLASS = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -600,7 +637,7 @@ var SIZE_CLASS2 = {
 var Radio = forwardRef(
   ({ className, size = "md", id, disabled, required, ...props }, ref) => {
     const ctx = useFormControl();
-    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS2[size], className), children: [
+    return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -7235,5 +7272,5 @@ var ChatComposer = forwardRef(
 ChatComposer.displayName = "ChatComposer";
 
 export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, ChatComposer, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, ReactionPicker, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
-//# sourceMappingURL=chunk-ITSJYVYW.js.map
-//# sourceMappingURL=chunk-ITSJYVYW.js.map
+//# sourceMappingURL=chunk-HDKEZTC3.js.map
+//# sourceMappingURL=chunk-HDKEZTC3.js.map