@wow-two-beta/ui 0.0.42 → 0.0.44

package/dist/{chunk-I7UOT7TA.js → chunk-CYQQKZZ6.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';
@@ -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",
@@ -561,38 +583,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 +636,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",
         {
@@ -1728,15 +1764,16 @@ function extractText(node) {
 }
 var SelectItem = forwardRef(function SelectItem2({ value, disabled, text, className, children }, ref) {
   const ctx = useSelectContext();
+  const { registerItem, unregisterItem, query } = ctx;
   const itemText = useMemo(
     () => text ?? extractText(children),
     [text, children]
   );
   useEffect(() => {
-    ctx.registerItem({ value, label: children, text: itemText });
-    return () => ctx.unregisterItem(value);
-  }, [ctx, value, children, itemText]);
-  const matchesQuery = !ctx.query || itemText.toLowerCase().includes(ctx.query.toLowerCase());
+    registerItem({ value, label: children, text: itemText });
+    return () => unregisterItem(value);
+  }, [registerItem, unregisterItem, value, children, itemText]);
+  const matchesQuery = !query || itemText.toLowerCase().includes(query.toLowerCase());
   if (!matchesQuery) return null;
   return /* @__PURE__ */ jsx(ListboxItem, { ref, value, disabled, className, children });
 });
@@ -1914,10 +1951,11 @@ function MultiSelectContent({ className, children }) {
 var MultiSelectItem = forwardRef(
   function MultiSelectItem2(props, ref) {
     const ctx = useMultiSelectContext();
+    const { registerLabel, unregisterLabel } = ctx;
     useEffect(() => {
-      ctx.registerLabel(props.value, props.children);
-      return () => ctx.unregisterLabel(props.value);
-    }, [ctx, props.value, props.children]);
+      registerLabel(props.value, props.children);
+      return () => unregisterLabel(props.value);
+    }, [registerLabel, unregisterLabel, props.value, props.children]);
     return /* @__PURE__ */ jsx(ListboxItem, { ref, ...props });
   }
 );
@@ -7233,5 +7271,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-I7UOT7TA.js.map
-//# sourceMappingURL=chunk-I7UOT7TA.js.map
+//# sourceMappingURL=chunk-CYQQKZZ6.js.map
+//# sourceMappingURL=chunk-CYQQKZZ6.js.map