@wow-two-beta/ui 0.0.62 → 0.0.64

package/dist/actions/index.js

@@ -1,4 +1,5 @@
-export { BackToTopButton, Button, ButtonGroup, CopyButton, DisclosureButton, FAB, Link, SegmentedControl, SpeedDial, SpeedDialAction, SpeedDialTrigger, ToggleButton, ToggleButtonGroup, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, buttonVariants, fabVariants, linkVariants, toggleButtonVariants } from '../chunk-DPB2K3BH.js';
+export { BackToTopButton, Button, ButtonGroup, CopyButton, DisclosureButton, FAB, Link, SegmentedControl, SpeedDial, SpeedDialAction, SpeedDialTrigger, ToggleButton, ToggleButtonGroup, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, buttonVariants, fabVariants, linkVariants, toggleButtonVariants } from '../chunk-O4Y52ERR.js';
+import '../chunk-YQGEF43L.js';
 import '../chunk-V267IMBH.js';
 import '../chunk-MVMDDGW7.js';
 import '../chunk-DX7FYAKY.js';

package/dist/actions/toggleButton/ToggleButton.d.ts

@@ -15,6 +15,7 @@ export interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'tone'
     title?: StateAware<string>;
     'aria-label'?: StateAware<string>;
     color?: ColorProp;
+    tooltip?: ReactNode;
 }
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/{chunk-INSI3NPU.js → chunk-5YT7XRTW.js}

@@ -1,10 +1,10 @@
 import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-FMTBJJP6.js';
-import { PopoverTrigger, Popover, PopoverContent } from './chunk-BLU5JZAB.js';
+import { PopoverTrigger, Popover, PopoverContent } from './chunk-GTBNVI77.js';
 import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-3SWPYYRQ.js';
 import { useControlled, useTypeahead } from './chunk-V267IMBH.js';
 import { Icon } from './chunk-MVMDDGW7.js';
 import { tv, CssExtensions, ColorExtensions, dataAttr, surfaceVariants, Equality } from './chunk-DX7FYAKY.js';
-import { useFormControl, FormControlProvider, Announce, RovingFocusGroup, useRovingFocusItem, Portal, AnchoredPositioner, DismissableLayer } from './chunk-XLYJF3HC.js';
+import { useFormControl, FormControlProvider, Announce, Portal, RovingFocusGroup, useRovingFocusItem, Presence, AnchoredPositioner, DismissableLayer } from './chunk-XLYJF3HC.js';
 import { useId } from './chunk-LGTGZ3RW.js';
 import { cn, composeRefs } from './chunk-X2MYOHOB.js';
 import * as React from 'react';
@@ -101,7 +101,7 @@ Legend.displayName = "Legend";
 
 // src/forms/InputStyles.ts
 var inputBaseVariants = tv({
-  base: "flex w-full rounded-md border bg-popover text-foreground placeholder:text-subtle-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted",
+  base: "flex w-full rounded-md bg-popover text-foreground placeholder:text-subtle-foreground transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 read-only:bg-muted",
   variants: {
     size: {
       xs: "h-7 px-2 text-xs",
@@ -112,15 +112,33 @@ var inputBaseVariants = tv({
     state: {
       default: "border-input hover:border-border-strong",
       invalid: "border-destructive focus-visible:ring-destructive"
+    },
+    /* Border weight — scale like `size`/`radius`; default `sm` (1px). Set a literal via `className="border-[1.5px]"`. */
+    border: {
+      none: "border-0",
+      xs: "border-[0.5px]",
+      sm: "border",
+      md: "border-2",
+      lg: "border-4",
+      xl: "border-8"
+    },
+    /* Focus-ring weight — default `md` (2px). The ring being wider than the border read as "thick"; use `sm` for a hairline focus. */
+    ring: {
+      none: "focus-visible:ring-0",
+      sm: "focus-visible:ring-1",
+      md: "focus-visible:ring-2",
+      lg: "focus-visible:ring-4"
     }
   },
   defaultVariants: {
     size: "md",
-    state: "default"
+    state: "default",
+    border: "sm",
+    ring: "md"
   }
 });
 var TextInput = forwardRef(
-  ({ className, size, state, id, disabled, required, readOnly, ...props }, ref) => {
+  ({ className, size, state, border, ring, id, disabled, required, readOnly, ...props }, ref) => {
     const ctx = useFormControl();
     const finalState = state ?? (ctx?.isInvalid ? "invalid" : "default");
     return /* @__PURE__ */ jsx(
@@ -134,7 +152,7 @@ var TextInput = forwardRef(
         readOnly: readOnly ?? ctx?.isReadOnly,
         "aria-invalid": ctx?.isInvalid || void 0,
         "aria-describedby": ctx ? `${ctx.helperId} ${ctx.errorId}` : void 0,
-        className: cn(inputBaseVariants({ size, state: finalState }), className),
+        className: cn(inputBaseVariants({ size, state: finalState, border, ring }), className),
         ...props
       }
     );
@@ -2201,7 +2219,7 @@ var MultiSelectTrigger = forwardRef(
             ChevronDown,
             {
               className: cn(
-                "h-4 w-4 shrink-0 self-center text-muted-foreground transition-transform",
+                "h-4 w-4 shrink-0 self-center text-muted-foreground motion-safe:transition-transform",
                 ctx.open && "rotate-180"
               )
             }
@@ -2527,9 +2545,8 @@ function ComboboxContent({
       ctx.setActiveId(list[0]?.id ?? null);
     }
   });
-  if (!ctx.open) return null;
   const resolvedPadding = padding ?? "xs";
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Presence, { isPresent: ctx.open, children: /* @__PURE__ */ jsx(ComboboxPortalRoot, { children: /* @__PURE__ */ jsx(
     AnchoredPositioner,
     {
       anchor: ctx.inputRef.current,
@@ -2551,6 +2568,10 @@ function ComboboxContent({
               id: ctx.listboxId,
               role: "listbox",
               className: cn(
+                /* pop (fade+scale) gated on the portal-root data-state + motion-safe
+                   so reduced-motion users get no movement. */
+                "motion-safe:group-data-[state=open]:animate-(--animate-pop-in)",
+                "motion-safe:group-data-[state=closed]:animate-(--animate-pop-out) motion-reduce:animate-none",
                 surfaceVariants({
                   variant,
                   tone,
@@ -2568,8 +2589,13 @@ function ComboboxContent({
         }
       )
     }
-  ) });
+  ) }) });
 }
+var ComboboxPortalRoot = forwardRef(
+  function ComboboxPortalRoot2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { ref, className: cn("group contents", className), ...props, children }) });
+  }
+);
 var ComboboxItem = forwardRef(function ComboboxItem2({ value, isDisabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
   const ctx = useComboboxContext();
   const id = useId$1();
@@ -3445,6 +3471,8 @@ var ColorField = forwardRef(function ColorField2({
   hasAlpha = false,
   size,
   state,
+  border,
+  ring,
   className,
   id,
   disabled,
@@ -3506,7 +3534,7 @@ var ColorField = forwardRef(function ColorField2({
           }
         },
         className: cn(
-          inputBaseVariants({ size, state: state ?? (ctx?.isInvalid ? "invalid" : "default") }),
+          inputBaseVariants({ size, state: state ?? (ctx?.isInvalid ? "invalid" : "default"), border, ring }),
           "pl-9 font-mono uppercase",
           className
         ),
@@ -7748,5 +7776,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-INSI3NPU.js.map
-//# sourceMappingURL=chunk-INSI3NPU.js.map
+//# sourceMappingURL=chunk-5YT7XRTW.js.map
+//# sourceMappingURL=chunk-5YT7XRTW.js.map