@wow-two-beta/ui 0.0.56 → 0.0.58

package/dist/{chunk-5QP5D3H3.js → chunk-GSAOM2ZR.js}

@@ -1,8 +1,8 @@
-import { useControlled, useClipboard, useDebounceHandler, useEscape, useOutsideClick } from './chunk-NUMFGKPY.js';
-import { Icon, Spinner } from './chunk-F227LKWK.js';
-import { tv, PressExtensions, HtmlElement, CssExtensions, ColorExtensions, ButtonType, OptionalExtensions, dataAttr, composeEventHandlers, Key } from './chunk-RDDIOVK4.js';
-import { Slot, RovingFocusGroup, useRovingFocusItem } from './chunk-BMABNEZX.js';
-import { cn, composeRefs } from './chunk-LDRFQG44.js';
+import { useControlled, useClipboard, useDebounceHandler, useEscape, useOutsideClick } from './chunk-V267IMBH.js';
+import { Icon, Spinner } from './chunk-MVMDDGW7.js';
+import { tv, Tones, IS_DEV, PressExtensions, HtmlElement, CssExtensions, ColorExtensions, ButtonType, OptionalExtensions, dataAttr, composeEventHandlers, Key } from './chunk-JYGC5SRP.js';
+import { useFormControl, Slot, RovingFocusGroup, useRovingFocusItem } from './chunk-TTSJZEL7.js';
+import { cn, composeRefs } from './chunk-X2MYOHOB.js';
 import { forwardRef, Children, isValidElement, cloneElement, useRef, useEffect, useCallback, createContext, useState, useContext, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Check, Copy, ChevronDown, X, Plus, ArrowUp } from 'lucide-react';
@@ -37,8 +37,11 @@ var buttonVariants = tv({
       outline: "bg-transparent",
       ghost: "bg-transparent",
       link: "bg-transparent !h-auto !p-0 !rounded-none underline-offset-4 hover:underline focus-visible:ring-offset-0",
-      glass: "bg-black/45 text-white/70 backdrop-blur-md hover:bg-black/65 hover:text-white active:bg-black/75",
-      "glass-surface": "bg-black/45 text-white/70 backdrop-blur-md hover:bg-black/65 hover:text-white active:bg-black/75 border-white/10"
+      // Base = neutral/default tone: dark image-overlay wash + blur. Non-neutral tones resolve
+      // through the shared `Tones.glass` palette via compoundVariants below (so tone + color
+      // overrides apply). `backdrop-blur-md` stays here for every tone.
+      glass: "backdrop-blur-md",
+      "glass-surface": "backdrop-blur-md border-white/10"
     },
     tone: {
       primary: "",
@@ -48,7 +51,10 @@ var buttonVariants = tv({
       warning: ""
     },
     size: {
-      xs: "h-[calc(1.5rem*var(--ui-density-scale,1))] px-[calc(0.5rem*var(--ui-density-scale,1))] text-xs rounded-sm gap-1",
+      // min-h/min-w floor keeps the hit-target ≥ 24×24 (WCAG 2.2 SC 2.5.8) even when
+      // --ui-density-scale < 1 would otherwise shrink it below the floor. Applies to
+      // square/circle xs too (the min-h sets the box height; min-w the width).
+      xs: "h-[calc(1.5rem*var(--ui-density-scale,1))] min-h-6 min-w-6 px-[calc(0.5rem*var(--ui-density-scale,1))] text-xs rounded-sm gap-1",
       sm: "h-[calc(2rem*var(--ui-density-scale,1))] px-[calc(0.75rem*var(--ui-density-scale,1))] text-sm rounded-md gap-1.5",
       md: "h-[calc(2.5rem*var(--ui-density-scale,1))] px-[calc(1rem*var(--ui-density-scale,1))] text-sm rounded-md gap-2",
       lg: "h-[calc(3rem*var(--ui-density-scale,1))] px-[calc(1.5rem*var(--ui-density-scale,1))] text-base rounded-lg gap-2",
@@ -106,10 +112,19 @@ var buttonVariants = tv({
     { variant: "link", tone: "success", class: "text-success" },
     { variant: "link", tone: "warning", class: "text-warning" },
     // === GLASS / GLASS-SURFACE × tone ===
-    // Only `danger` is wired today (matches old image-overlay convention: red on hover).
-    // Other tones are inert — base dark glass renders identically across tones.
-    { variant: "glass", tone: "danger", class: "hover:bg-destructive/65 active:bg-destructive/75" },
-    { variant: "glass-surface", tone: "danger", class: "hover:bg-destructive/65 active:bg-destructive/75" }
+    // neutral = the image-overlay default: fixed dark wash + light text (reads over any imagery).
+    { variant: ["glass", "glass-surface"], tone: "neutral", class: "bg-black/45 text-white/70 hover:bg-black/65 hover:text-white active:bg-black/75" },
+    // Every other tone resolves through the shared `Tones.glass` palette (`bg-{tone}/30 text-{tone}-foreground`)
+    // so `tone="success"` etc. AND per-instance `color` overrides actually apply, plus a tone-matched hover/active wash.
+    { variant: ["glass", "glass-surface"], tone: "primary", class: `${Tones.glass.primary} hover:bg-primary/45 active:bg-primary/55` },
+    { variant: ["glass", "glass-surface"], tone: "danger", class: `${Tones.glass.danger} hover:bg-destructive/45 active:bg-destructive/55` },
+    { variant: ["glass", "glass-surface"], tone: "success", class: `${Tones.glass.success} hover:bg-success/45 active:bg-success/55` },
+    { variant: ["glass", "glass-surface"], tone: "warning", class: `${Tones.glass.warning} hover:bg-warning/45 active:bg-warning/55` },
+    // glass-surface non-neutral tones swap the white hairline for a tone-accent border (50% alpha).
+    { variant: "glass-surface", tone: "primary", class: "border-primary/50" },
+    { variant: "glass-surface", tone: "danger", class: "border-destructive/50" },
+    { variant: "glass-surface", tone: "success", class: "border-success/50" },
+    { variant: "glass-surface", tone: "warning", class: "border-warning/50" }
   ],
   defaultVariants: {
     variant: "solid",
@@ -153,17 +168,18 @@ function useButtonInteractivity(opts) {
   };
   const handlePointerDown = (e) => {
     if (opts.isInactive) return;
+    cancelLongPress();
     if (!isPressingRef.current) {
       isPressingRef.current = true;
       longPressFiredRef.current = false;
       opts.onPressStart?.(e);
-    }
-    if (opts.onLongPress) {
-      longPressTimerRef.current = setTimeout(() => {
-        longPressFiredRef.current = true;
-        opts.onLongPress?.(e);
-        longPressTimerRef.current = void 0;
-      }, opts.longPressDelay);
+      if (opts.onLongPress) {
+        longPressTimerRef.current = setTimeout(() => {
+          longPressFiredRef.current = true;
+          opts.onLongPress?.(e);
+          longPressTimerRef.current = void 0;
+        }, opts.longPressDelay);
+      }
     }
   };
   const handlePointerUp = (e) => {
@@ -194,7 +210,10 @@ function useButtonInteractivity(opts) {
   };
   const debouncedOnClick = useDebounceHandler(opts.onClick, opts.debounceMs);
   const handleClick = (e) => {
-    if (opts.isLoading || opts.isSkeleton) return;
+    if (opts.isLoading || opts.isSkeleton) {
+      e.preventDefault();
+      return;
+    }
     if (longPressFiredRef.current) {
       longPressFiredRef.current = false;
       e.preventDefault();
@@ -254,22 +273,31 @@ var Button = forwardRef(
     onKeyUp,
     ...rest
   }, ref) => {
-    if (isLoading && isSkeleton) {
+    if (IS_DEV && isLoading && isSkeleton) {
       console.warn(
         `[${COMPONENT_NAME}] \`isLoading\` and \`isSkeleton\` are mutually exclusive \u2014 \`isSkeleton\` takes precedence.`
       );
     }
     let safeLongPressDelay = longPressDelay;
     if (longPressDelay < PressExtensions.longPressDelay.min || longPressDelay > PressExtensions.longPressDelay.max) {
+      if (IS_DEV) {
+        console.warn(
+          `[${COMPONENT_NAME}] longPressDelay=${longPressDelay}ms is outside reasonable range (${PressExtensions.longPressDelay.min}\u2013${PressExtensions.longPressDelay.max}ms). Falling back to ${PressExtensions.longPressDelay.default}ms.`
+        );
+      }
+      safeLongPressDelay = PressExtensions.longPressDelay.default;
+    }
+    if (IS_DEV && (children === void 0 || children === null || children === false) && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0) {
       console.warn(
-        `[${COMPONENT_NAME}] longPressDelay=${longPressDelay}ms is outside reasonable range (${PressExtensions.longPressDelay.min}\u2013${PressExtensions.longPressDelay.max}ms). Falling back to ${PressExtensions.longPressDelay.default}ms.`
+        `[${COMPONENT_NAME}] icon-only button (no text children) is missing an accessible name \u2014 pass \`aria-label\` or \`aria-labelledby\` (Button.standard.md rule 12).`
       );
-      safeLongPressDelay = PressExtensions.longPressDelay.default;
     }
+    const formControl = useFormControl();
+    const resolvedDisabled = isDisabled ?? formControl?.isDisabled ?? false;
     const skeletonActive = !!isSkeleton;
     const loadingActive = !skeletonActive && !!isLoading;
-    const isInactive = loadingActive || skeletonActive || !!isDisabled;
-    const dataState = skeletonActive ? ButtonDataState.Skeleton : loadingActive ? ButtonDataState.Loading : isDisabled ? ButtonDataState.Disabled : void 0;
+    const isInactive = loadingActive || skeletonActive || resolvedDisabled;
+    const dataState = skeletonActive ? ButtonDataState.Skeleton : loadingActive ? ButtonDataState.Loading : resolvedDisabled ? ButtonDataState.Disabled : void 0;
     const Comp = asChild ? Slot : HtmlElement.Button;
     const { preset: sizePreset, box: sizeBox } = CssExtensions.parseSizeUnion(
       size,
@@ -310,7 +338,10 @@ var Button = forwardRef(
     });
     const content = loadingActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
       loadingSlot ?? /* @__PURE__ */ jsx(Spinner, {}),
-      loadingText !== void 0 && /* @__PURE__ */ jsx("span", { children: loadingText })
+      loadingText !== void 0 ? /* @__PURE__ */ jsx("span", { children: loadingText }) : (
+        // No loadingText: keep children in sr-only so the accessible name survives (Spinner is aria-hidden).
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children })
+      )
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       leadingSlot,
       children,
@@ -334,8 +365,9 @@ var Button = forwardRef(
           className
         ),
         style: overrideStyle,
-        disabled: OptionalExtensions.from(isDisabled, true),
+        disabled: OptionalExtensions.from(resolvedDisabled, true),
         "aria-busy": OptionalExtensions.from(loadingActive || skeletonActive, true),
+        "aria-disabled": OptionalExtensions.from(loadingActive || skeletonActive, true),
         tabIndex: OptionalExtensions.from(skeletonActive, -1),
         "data-state": dataState,
         ...eventHandlers,
@@ -383,7 +415,7 @@ var Link = forwardRef(
 );
 Link.displayName = "Link";
 var ButtonGroup = forwardRef(
-  ({ orientation = "horizontal", attached = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ orientation = "horizontal", isAttached = true, className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -392,7 +424,7 @@ var ButtonGroup = forwardRef(
       className: cn(
         "inline-flex",
         orientation === "horizontal" ? "flex-row" : "flex-col",
-        attached ? orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px" : "gap-2",
+        isAttached ? orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px" : "gap-2",
         className
       ),
       ...props
@@ -467,7 +499,7 @@ var toggleButtonVariants = tv({
 var COMPONENT_NAME2 = "ToggleButton";
 var ToggleButton = forwardRef(
   ({
-    pressed,
+    isPressed,
     defaultPressed,
     onPressedChange,
     onClick,
@@ -481,7 +513,7 @@ var ToggleButton = forwardRef(
     ...buttonProps
   }, ref) => {
     const [value, setValue] = useControlled({
-      controlled: pressed,
+      controlled: isPressed,
       default: defaultPressed ?? false,
       onChange: onPressedChange
     });
@@ -513,17 +545,27 @@ var ToggleButton = forwardRef(
 ToggleButton.displayName = COMPONENT_NAME2;
 var ToggleButtonGroup = forwardRef(
   (props, ref) => {
-    const { orientation = "horizontal", attached = true, className, children, ...rest } = props;
-    const mode = props.type === "multi" ? "multi" : "single";
+    const {
+      orientation = "horizontal",
+      isAttached = true,
+      className,
+      children,
+      type,
+      value,
+      defaultValue,
+      onValueChange,
+      ...rest
+    } = props;
+    const mode = type === "multi" ? "multi" : "single";
     const [singleValue, setSingleValue] = useControlled({
-      controlled: mode === "single" ? rest.value : void 0,
-      default: mode === "single" ? rest.defaultValue ?? null : null,
-      onChange: mode === "single" ? rest.onValueChange : void 0
+      controlled: mode === "single" ? value : void 0,
+      default: mode === "single" ? defaultValue ?? null : null,
+      onChange: mode === "single" ? onValueChange : void 0
     });
     const [multiValue, setMultiValue] = useControlled({
-      controlled: mode === "multi" ? rest.value : void 0,
-      default: mode === "multi" ? rest.defaultValue ?? [] : [],
-      onChange: mode === "multi" ? rest.onValueChange : void 0
+      controlled: mode === "multi" ? value : void 0,
+      default: mode === "multi" ? defaultValue ?? [] : [],
+      onChange: mode === "multi" ? onValueChange : void 0
     });
     const isPressed = (childValue) => {
       if (childValue === void 0) return false;
@@ -543,21 +585,25 @@ var ToggleButtonGroup = forwardRef(
       "div",
       {
         ref,
-        role: mode === "single" ? "radiogroup" : "group",
+        role: "group",
         "data-orientation": orientation,
         className: cn(
           "inline-flex",
           orientation === "horizontal" ? "flex-row" : "flex-col",
-          attached ? orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px" : "gap-2",
+          isAttached ? orientation === "horizontal" ? "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px" : "[&>*]:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px" : "gap-2",
           className
         ),
+        ...rest,
         children: Children.map(children, (child) => {
           if (!isValidElement(child)) return child;
           const c = child;
           const childValue = c.props.value;
           return cloneElement(c, {
-            pressed: isPressed(childValue),
-            onPressedChange: () => togglePressed(childValue)
+            isPressed: c.props.isPressed ?? isPressed(childValue),
+            onPressedChange: (pressed) => {
+              c.props.onPressedChange?.(pressed);
+              togglePressed(childValue);
+            }
           });
         })
       }
@@ -570,7 +616,7 @@ var SegmentedControl = forwardRef(
     ToggleButtonGroup,
     {
       ref,
-      attached: true,
+      isAttached: true,
       className: cn(
         "rounded-md bg-muted p-1",
         "[&>*]:!rounded-md [&>*]:!ml-0 [&>*]:!border-transparent [&>*]:!bg-transparent",
@@ -666,7 +712,7 @@ CopyButton.displayName = COMPONENT_NAME3;
 var DisclosureButton = forwardRef(
   ({
     children,
-    open,
+    isOpen,
     defaultOpen = false,
     onOpenChange,
     onClick,
@@ -676,7 +722,7 @@ var DisclosureButton = forwardRef(
     ...props
   }, ref) => {
     const [value, setValue] = useControlled({
-      controlled: open,
+      controlled: isOpen,
       default: defaultOpen,
       onChange: onOpenChange
     });
@@ -727,7 +773,7 @@ var Toolbar = forwardRef(function Toolbar2({ orientation = "horizontal", classNa
     {
       ref,
       orientation,
-      loop: true,
+      canLoop: true,
       role: "toolbar",
       "aria-orientation": orientation,
       "data-orientation": orientation,
@@ -814,7 +860,7 @@ function ToolbarSeparator(props) {
       "aria-orientation": ctx.orientation === "vertical" ? "horizontal" : "vertical",
       className: cn(
         "shrink-0 bg-border",
-        ctx.orientation === "vertical" ? "mx-1 h-px" : "my-1 w-px"
+        ctx.orientation === "vertical" ? "mx-1 h-px" : "my-1 w-px self-stretch"
       ),
       ...props
     }
@@ -858,7 +904,7 @@ var DIRECTION_LABEL_SIDE = {
 function SpeedDial({
   position = "bottom-right",
   direction,
-  open: openProp,
+  isOpen: openProp,
   defaultOpen = false,
   onOpenChange,
   gap = 12,
@@ -889,25 +935,47 @@ function SpeedDial({
     () => ({ open, setOpen, triggerRef, rootRef, direction: resolvedDirection, position }),
     [open, setOpen, resolvedDirection, position]
   );
-  return /* @__PURE__ */ jsx(SpeedDialContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+  const childArray = Children.toArray(children);
+  const triggerChildren = childArray.filter(
+    (child) => isValidElement(child) && child.type === SpeedDialTrigger
+  );
+  const actionChildren = childArray.filter(
+    (child) => !(isValidElement(child) && child.type === SpeedDialTrigger)
+  );
+  const handleKeyDown = (e) => {
+    if (!open || e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    const root = rootRef.current;
+    if (!root) return;
+    const items = Array.from(root.querySelectorAll('[role="menuitem"]'));
+    if (items.length === 0) return;
+    e.preventDefault();
+    const currentIndex = items.indexOf(document.activeElement);
+    const nextIndex = currentIndex === -1 ? e.key === "ArrowDown" ? 0 : items.length - 1 : (currentIndex + (e.key === "ArrowDown" ? 1 : -1) + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsx(SpeedDialContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       "data-state": open ? "open" : "closed",
+      onKeyDown: handleKeyDown,
       className: cn("fixed", POSITION_OFFSETS[position], className),
-      children: open && /* @__PURE__ */ jsx(
-        "ul",
-        {
-          role: "menu",
-          "data-direction": resolvedDirection,
-          style: { gap },
-          className: cn(
-            "absolute flex animate-in fade-in-0",
-            DIRECTION_TO_STACK[resolvedDirection]
-          ),
-          children
-        }
-      )
+      children: [
+        open && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            role: "menu",
+            "data-direction": resolvedDirection,
+            style: { gap },
+            className: cn(
+              "absolute flex animate-in fade-in-0",
+              DIRECTION_TO_STACK[resolvedDirection]
+            ),
+            children: actionChildren
+          }
+        ),
+        triggerChildren
+      ]
     }
   ) });
 }
@@ -949,7 +1017,7 @@ var SpeedDialAction = forwardRef(
   function SpeedDialAction2({ "aria-label": ariaLabel, icon, onSelect, tooltip, className, onClick, type = "button", ...rest }, forwardedRef) {
     const ctx = useSpeedDialContext();
     const labelSide = DIRECTION_LABEL_SIDE[ctx.direction];
-    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", "data-side": labelSide, children: [
+    return /* @__PURE__ */ jsxs("li", { role: "none", className: "flex items-center gap-2", "data-side": labelSide, children: [
       tooltip && labelSide === "left" && /* @__PURE__ */ jsx("span", { className: "rounded-md bg-popover px-2 py-1 text-xs text-popover-foreground shadow", children: tooltip }),
       /* @__PURE__ */ jsx(
         "button",
@@ -1047,5 +1115,5 @@ var BackToTopButton = forwardRef(
 BackToTopButton.displayName = "BackToTopButton";
 
 export { BackToTopButton, Button, ButtonGroup, CopyButton, DisclosureButton, FAB, Link, SegmentedControl, SpeedDial, SpeedDialAction, SpeedDialTrigger, ToggleButton, ToggleButtonGroup, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, buttonVariants, fabVariants, linkVariants, toggleButtonVariants };
-//# sourceMappingURL=chunk-5QP5D3H3.js.map
-//# sourceMappingURL=chunk-5QP5D3H3.js.map
+//# sourceMappingURL=chunk-GSAOM2ZR.js.map
+//# sourceMappingURL=chunk-GSAOM2ZR.js.map