@ship-it-ui/ui 0.0.8 → 0.0.9

package/dist/index.js

@@ -138,14 +138,16 @@ function useOutsideClick(ref, handler, enabled = true) {
 }
 
 // src/hooks/useTheme.ts
-import { useCallback as useCallback4, useEffect as useEffect4, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect4, useRef as useRef3, useState as useState4 } from "react";
 function useTheme() {
   const [theme, setThemeState] = useState4("dark");
+  const internalMutation = useRef3(false);
   const setTheme = useCallback4((next) => {
     if (typeof document === "undefined") {
       setThemeState(next);
       return;
     }
+    internalMutation.current = true;
     if (next === "light") {
       document.documentElement.setAttribute("data-theme", "light");
     } else {
@@ -160,6 +162,10 @@ function useTheme() {
     const initial = document.documentElement.getAttribute("data-theme");
     setThemeState(initial === "light" ? "light" : "dark");
     const observer = new MutationObserver(() => {
+      if (internalMutation.current) {
+        internalMutation.current = false;
+        return;
+      }
       const attr = document.documentElement.getAttribute("data-theme");
       setThemeState(attr === "light" ? "light" : "dark");
     });
@@ -544,7 +550,7 @@ import {
   useCallback as useCallback5,
   useEffect as useEffect5,
   useImperativeHandle,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState5
 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -612,7 +618,7 @@ var InlineEdit = forwardRef7(function InlineEdit2({
   });
   const [draft, setDraft] = useState5(value);
   const [error, setError] = useState5(null);
-  const inputRef = useRef3(null);
+  const inputRef = useRef4(null);
   useEffect5(() => {
     if (!editing) {
       setDraft(value);
@@ -855,7 +861,7 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect6,
   useId as useId3,
-  useRef as useRef4
+  useRef as useRef5
 } from "react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var wrapperSizes = {
@@ -891,8 +897,8 @@ var NumberInput = forwardRef10(function NumberInput2({
   });
   const reactId = useId3();
   const id = idProp ?? `ni-${reactId}`;
-  const repeatTimer = useRef4(void 0);
-  const repeatInterval = useRef4(void 0);
+  const repeatTimer = useRef5(void 0);
+  const repeatInterval = useRef5(void 0);
   const clamp = useCallback6((n) => Math.min(max, Math.max(min, n)), [min, max]);
   const bump = useCallback6(
     (dir) => {
@@ -1008,13 +1014,13 @@ import {
   forwardRef as forwardRef11,
   useId as useId4,
   useImperativeHandle as useImperativeHandle2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState6
 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var OTP = forwardRef11(function OTP2({ length = 6, onComplete, onChange, defaultValue = "", ariaLabel = "Code", className, disabled }, ref) {
   const baseId = useId4();
-  const refs = useRef5([]);
+  const refs = useRef6([]);
   const [values, setValues] = useState6(
     () => Array.from({ length }, (_, i) => defaultValue[i] ?? "")
   );
@@ -1563,6 +1569,53 @@ AccordionContent.displayName = "AccordionContent";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import { forwardRef as forwardRef20 } from "react";
 
+// src/utils/color-override.ts
+var HEX = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var FUNCTIONAL = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\([^()]*(?:\([^()]*\)[^()]*)*\)$/;
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "inherit",
+  "initial",
+  "unset",
+  "red",
+  "green",
+  "blue",
+  "black",
+  "white",
+  "gray",
+  "grey",
+  "orange",
+  "yellow",
+  "purple",
+  "pink",
+  "brown",
+  "cyan",
+  "magenta"
+]);
+var isValid = (value) => {
+  const v = value.trim();
+  if (!v) return false;
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("color", v);
+  }
+  return HEX.test(v) || FUNCTIONAL.test(v) || KEYWORDS.has(v);
+};
+var warnIfInvalidColor = (value, component) => {
+  if (isValid(value)) return true;
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[${component}] Invalid color value "${value}". Falling back to the default variant. Use a hex, rgb/rgba, hsl, oklch, lab/lch, color(), color-mix(), or a CSS color keyword.`
+    );
+  }
+  return false;
+};
+var tintStyle = (color) => ({
+  background: `color-mix(in oklab, ${color}, transparent 85%)`,
+  color
+});
+
 // src/components/StatusDot/StatusDot.tsx
 import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -1590,13 +1643,14 @@ var stateLabel = {
   sync: "Syncing",
   accent: "Active"
 };
-var StatusDot = forwardRef19(function StatusDot2({ state = "ok", label, pulse, size = 8, className, ...props }, ref) {
+var StatusDot = forwardRef19(function StatusDot2({ state = "ok", color, label, pulse, size = 8, className, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "StatusDot");
   return /* @__PURE__ */ jsxs16(
     "span",
     {
       ref,
       role: label ? "status" : "img",
-      "aria-label": !label ? stateLabel[state] : void 0,
+      "aria-label": !label ? useColor ? "Status" : stateLabel[state] : void 0,
       className: cn("inline-flex items-center gap-[6px]", className),
       ...props,
       children: [
@@ -1605,11 +1659,15 @@ var StatusDot = forwardRef19(function StatusDot2({ state = "ok", label, pulse, s
           {
             className: cn(
               "inline-block rounded-full",
-              stateColor[state],
-              pulse && "animate-[ship-pulse-ring_1.6s_infinite]",
-              stateText[state]
+              !useColor && stateColor[state],
+              !useColor && stateText[state],
+              pulse && "animate-[ship-pulse-ring_1.6s_infinite]"
             ),
-            style: { width: size, height: size }
+            style: {
+              width: size,
+              height: size,
+              ...useColor ? { backgroundColor: color, color } : {}
+            }
           }
         ),
         label && /* @__PURE__ */ jsx20("span", { className: "text-text-muted text-[12px]", children: label })
@@ -1644,10 +1702,12 @@ function hashHue(str) {
   for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) % 360;
   return h;
 }
-var Avatar = forwardRef20(function Avatar2({ name = "?", src, size = "md", status, initials, className, style, ...props }, ref) {
+var Avatar = forwardRef20(function Avatar2({ name = "?", src, size = "md", status, initials, color, className, style, ...props }, ref) {
   const dim = sizePx[size];
   const hue = hashHue(name);
   const computedInitials = initials ?? initialsFor(name);
+  const useColor = color && warnIfInvalidColor(color, "Avatar");
+  const fallbackBg = useColor ? color : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`;
   return /* @__PURE__ */ jsxs17(
     "span",
     {
@@ -1661,7 +1721,7 @@ var Avatar = forwardRef20(function Avatar2({ name = "?", src, size = "md", statu
           {
             className: "border-border relative inline-flex h-full w-full shrink-0 overflow-hidden rounded-full border",
             style: {
-              background: src ? void 0 : `oklch(var(--color-avatar-fallback-l) var(--color-avatar-fallback-c) ${hue})`
+              background: src ? void 0 : fallbackBg
             },
             children: [
               src && /* @__PURE__ */ jsx21(RadixAvatar.Image, { src, alt: name, className: "h-full w-full object-cover" }),
@@ -1729,6 +1789,16 @@ AvatarGroup.displayName = "AvatarGroup";
 import { cva as cva6 } from "class-variance-authority";
 import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var badgeStructural = cva6("inline-flex items-center font-sans leading-none whitespace-nowrap", {
+  variants: {
+    size: {
+      sm: "h-[18px] px-[6px] py-[1px] text-[10px] gap-1 rounded-full",
+      md: "h-[22px] px-2 py-[2px] text-[11px] gap-[5px] rounded-full",
+      lg: "h-[26px] px-[10px] py-[3px] text-[12px] gap-[6px] rounded-full"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
 var badgeStyles = cva6("inline-flex items-center font-sans leading-none whitespace-nowrap", {
   variants: {
     variant: {
@@ -1762,20 +1832,53 @@ var dotColorClass = {
   solid: "bg-bg"
 };
 var dotSize = { sm: "h-[5px] w-[5px]", md: "h-[6px] w-[6px]", lg: "h-[7px] w-[7px]" };
-var Badge = forwardRef22(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, ...props }, ref) {
+var Badge = forwardRef22(function Badge2({ variant = "neutral", size = "md", dot, icon, className, children, color, style, ...props }, ref) {
   const sz = size ?? "md";
-  const v = variant ?? "neutral";
-  return /* @__PURE__ */ jsxs19("span", { ref, className: cn(badgeStyles({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx23(
+  const useColor = color && warnIfInvalidColor(color, "Badge");
+  if (useColor) {
+    return /* @__PURE__ */ jsxs19(
       "span",
       {
-        "aria-hidden": true,
-        className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+        ref,
+        className: cn(badgeStructural({ size }), className),
+        style: { ...tintStyle(color), ...style },
+        ...props,
+        children: [
+          dot && /* @__PURE__ */ jsx23(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("inline-block rounded-full", dotSize[sz]),
+              style: { background: color }
+            }
+          ),
+          icon && /* @__PURE__ */ jsx23("span", { className: "inline-flex leading-none", children: icon }),
+          children
+        ]
       }
-    ),
-    icon && /* @__PURE__ */ jsx23("span", { className: "inline-flex leading-none", children: icon }),
-    children
-  ] });
+    );
+  }
+  const v = variant ?? "neutral";
+  return /* @__PURE__ */ jsxs19(
+    "span",
+    {
+      ref,
+      className: cn(badgeStyles({ variant, size }), className),
+      style,
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx23(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn("inline-block rounded-full", dotSize[sz], dotColorClass[v])
+          }
+        ),
+        icon && /* @__PURE__ */ jsx23("span", { className: "inline-flex leading-none", children: icon }),
+        children
+      ]
+    }
+  );
 });
 Badge.displayName = "Badge";
 
@@ -1923,18 +2026,23 @@ StatCard.displayName = "StatCard";
 // src/components/Chip/Chip.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-var Chip = forwardRef25(function Chip2({ icon, onRemove, density = "comfortable", className, children, ...props }, ref) {
+var Chip = forwardRef25(function Chip2({ icon, onRemove, density = "comfortable", color, className, children, style, ...props }, ref) {
   const isTouch = density === "touch";
+  const useColor = color && warnIfInvalidColor(color, "Chip");
+  const structural = cn(
+    "inline-flex items-center gap-[6px] font-sans rounded-full border",
+    isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]"
+  );
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ jsxs22(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] font-sans",
-        isTouch ? "text-m-mono h-8 py-[5px] pr-[6px] pl-3" : "h-[26px] py-[4px] pr-1 pl-[10px] text-[12px]",
-        "bg-panel-2 text-text border-border rounded-full border",
-        className
-      ),
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx26("span", { className: cn("text-text-dim inline-flex", isTouch ? "text-[12px]" : "text-[10px]"), children: icon }),
@@ -1985,7 +2093,7 @@ import {
   forwardRef as forwardRef27,
   useEffect as useEffect7,
   useId as useId7,
-  useRef as useRef6
+  useRef as useRef7
 } from "react";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var sizeMap = {
@@ -2003,8 +2111,10 @@ var Rating = forwardRef27(function Rating2({
   readOnly = false,
   className,
   "aria-label": ariaLabel,
+  color,
   ...props
 }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Rating");
   const [current, setCurrent] = useControllableState({
     value,
     defaultValue: defaultValue ?? 0,
@@ -2013,8 +2123,8 @@ var Rating = forwardRef27(function Rating2({
   const reactId = useId7();
   const px = sizeMap[size];
   const currentInt = Math.round(current ?? 0);
-  const buttonsRef = useRef6([]);
-  const shouldFocusRef = useRef6(false);
+  const buttonsRef = useRef7([]);
+  const shouldFocusRef = useRef7(false);
   useEffect7(() => {
     if (!shouldFocusRef.current) return;
     shouldFocusRef.current = false;
@@ -2058,10 +2168,19 @@ var Rating = forwardRef27(function Rating2({
           /* @__PURE__ */ jsx28(
             "div",
             {
+              "data-filled-stars": true,
               className: "pointer-events-none absolute inset-0 inline-flex items-center gap-0.5 overflow-hidden",
-              style: { width: `${fillPct}%` },
+              style: { width: `${fillPct}%`, ...useColor ? { color } : {} },
               "aria-hidden": true,
-              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx28(IconGlyph3, { name: "star", size: px, className: "text-rating shrink-0" }, i))
+              children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx28(
+                IconGlyph3,
+                {
+                  name: "star",
+                  size: px,
+                  className: cn("shrink-0", !useColor && "text-rating")
+                },
+                i
+              ))
             }
           )
         ]
@@ -2076,6 +2195,7 @@ var Rating = forwardRef27(function Rating2({
       "aria-label": ariaLabel ?? "Rating",
       tabIndex: -1,
       className: cn("inline-flex items-center gap-0.5", className),
+      style: useColor ? { color } : void 0,
       onKeyDown: handleKey,
       ...props,
       children: Array.from({ length: max }).map((_, i) => {
@@ -2099,8 +2219,8 @@ var Rating = forwardRef27(function Rating2({
               "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm",
               "focus-visible:ring-accent-dim outline-none focus-visible:ring-[3px]",
               "transition-colors duration-(--duration-micro)",
-              filled ? "text-rating" : "text-rating-dim",
-              "hover:text-rating"
+              useColor ? filled ? "" : "opacity-30" : filled ? "text-rating" : "text-rating-dim",
+              !useColor && "hover:text-rating"
             ),
             children: /* @__PURE__ */ jsx28(IconGlyph3, { name: "star", size: px })
           },
@@ -2226,17 +2346,20 @@ SkeletonGroup.displayName = "SkeletonGroup";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef30 } from "react";
 import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
-var Tag = forwardRef30(function Tag2({ onRemove, icon, size = 22, className, children, ...props }, ref) {
+var Tag = forwardRef30(function Tag2({ onRemove, icon, size = 22, color, className, children, style, ...props }, ref) {
+  const useColor = color && warnIfInvalidColor(color, "Tag");
+  const structural = "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px] rounded-xs border";
+  const defaultPaint = "bg-panel-2 text-text border-border";
   return /* @__PURE__ */ jsxs25(
     "span",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-[6px] px-2 py-[3px] font-sans text-[11px]",
-        "bg-panel-2 text-text border-border rounded-xs border",
-        className
-      ),
-      style: { height: size },
+      className: cn(structural, !useColor && defaultPaint, className),
+      style: {
+        height: size,
+        ...useColor ? { ...tintStyle(color), borderColor: "transparent" } : {},
+        ...style
+      },
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx31("span", { className: "text-text-dim inline-flex", children: icon }),
@@ -2365,18 +2488,25 @@ var DialogContent = forwardRef32(function DialogContent2({ className, width = 46
 });
 DialogContent.displayName = "DialogContent";
 function Dialog({ title, description, footer, width, children, ...rootProps }) {
-  return /* @__PURE__ */ jsx33(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs27(DialogContent, { width, children: [
-    title && /* @__PURE__ */ jsx33(
-      RadixDialog.Title,
-      {
-        className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
-        children: title
-      }
-    ),
-    description && /* @__PURE__ */ jsx33(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
-    children,
-    footer && /* @__PURE__ */ jsx33("div", { className: "mt-5 flex justify-end gap-2", children: footer })
-  ] }) });
+  return /* @__PURE__ */ jsx33(DialogRoot, { ...rootProps, children: /* @__PURE__ */ jsxs27(
+    DialogContent,
+    {
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title && /* @__PURE__ */ jsx33(
+          RadixDialog.Title,
+          {
+            className: cn("text-[16px] font-medium", description ? "mb-[6px]" : "mb-4"),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx33(RadixDialog.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+        children,
+        footer && /* @__PURE__ */ jsx33("div", { className: "mt-5 flex justify-end gap-2", children: footer })
+      ]
+    }
+  ) });
 }
 
 // src/components/Dialog/Drawer.tsx
@@ -2494,7 +2624,13 @@ var AlertDialog = forwardRef35(function AlertDialog2({ title, description, foote
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsx36(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }),
+          description ? /* @__PURE__ */ jsx36(RadixAlert.Description, { className: "text-text-muted mb-[18px] text-[13px] leading-[1.55]", children: description }) : (
+            // Radix AlertDialog requires a description for screen-reader users
+            // and warns in dev mode when one is missing. When the caller opts
+            // out of a visible description, fall back to the title text in a
+            // visually-hidden Description so the a11y contract is still met.
+            /* @__PURE__ */ jsx36(RadixAlert.Description, { className: "sr-only", children: title })
+          ),
           children,
           footer && /* @__PURE__ */ jsx36("div", { className: "mt-5 flex justify-end gap-2", children: footer })
         ]
@@ -2944,7 +3080,7 @@ import {
   forwardRef as forwardRef44,
   useCallback as useCallback9,
   useEffect as useEffect8,
-  useRef as useRef7
+  useRef as useRef8
 } from "react";
 import { Fragment, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 var Carousel = forwardRef44(function Carousel2({
@@ -2966,7 +3102,7 @@ var Carousel = forwardRef44(function Carousel2({
     defaultValue: defaultIndex ?? 0,
     onChange: onIndexChange
   });
-  const viewportRef = useRef7(null);
+  const viewportRef = useRef8(null);
   const goTo = useCallback9(
     (i) => {
       const clamped = Math.max(0, Math.min(items.length - 1, i));
@@ -3104,7 +3240,7 @@ import {
   useEffect as useEffect9,
   useId as useId8,
   useMemo as useMemo2,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState9
 } from "react";
 import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -3163,7 +3299,7 @@ var Combobox = forwardRef45(function Combobox2({
     onChange: onQueryChange
   });
   const [open, setOpen] = useState9(false);
-  const wrapperRef = useRef8(null);
+  const wrapperRef = useRef9(null);
   useOutsideClick(wrapperRef, () => setOpen(false));
   const filtered = useMemo2(
     () => query ? normalized.filter((o) => filter(o, query)) : normalized,
@@ -3443,7 +3579,7 @@ function filterCommandItems(query, groups) {
 }
 
 // src/patterns/DataTable/DataTable.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef9 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef10 } from "react";
 import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
 var alignClass = {
   left: "text-left",
@@ -3500,7 +3636,7 @@ function DataTable(props) {
   const selectedSet = selected ?? EMPTY_SET;
   const allSelected = allIds.length > 0 && allIds.every((id) => selectedSet.has(id));
   const someSelected = !allSelected && allIds.some((id) => selectedSet.has(id));
-  const headerCheckRef = useRef9(null);
+  const headerCheckRef = useRef10(null);
   useEffect11(() => {
     if (headerCheckRef.current) headerCheckRef.current.indeterminate = someSelected;
   }, [someSelected]);
@@ -3532,7 +3668,7 @@ function DataTable(props) {
       return next;
     });
   };
-  return /* @__PURE__ */ jsxs41("table", { ref, className: cn("w-full border-collapse text-[12px]", className), children: [
+  return /* @__PURE__ */ jsxs41("table", { ref, className: cn("relative w-full border-collapse text-[12px]", className), children: [
     caption && /* @__PURE__ */ jsx48("caption", { className: "sr-only", children: caption }),
     /* @__PURE__ */ jsx48("thead", { className: cn("bg-panel-2", stickyHeader && "z-raised sticky top-0"), children: /* @__PURE__ */ jsxs41("tr", { children: [
       selectable && /* @__PURE__ */ jsx48("th", { scope: "col", className: "border-border w-8 border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx48(
@@ -3627,7 +3763,7 @@ import {
   forwardRef as forwardRef47,
   useCallback as useCallback10,
   useEffect as useEffect12,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState10
 } from "react";
 import { jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
@@ -3721,8 +3857,8 @@ var Calendar = forwardRef47(function Calendar2({
   }, [selectedDate]);
   const focusedInVisibleMonth = focusedDate.getMonth() === month && focusedDate.getFullYear() === year;
   const effectiveFocusDay = focusedInVisibleMonth ? focusedDate.getDate() : clampDay(year, month, focusedDate.getDate());
-  const dayRefs = useRef10(/* @__PURE__ */ new Map());
-  const shouldFocusRef = useRef10(false);
+  const dayRefs = useRef11(/* @__PURE__ */ new Map());
+  const shouldFocusRef = useRef11(false);
   useEffect12(() => {
     if (!shouldFocusRef.current) return;
     shouldFocusRef.current = false;
@@ -4320,7 +4456,7 @@ var ListingCard = forwardRef51(function ListingCard2({
 ListingCard.displayName = "ListingCard";
 
 // src/patterns/PhoneInput/PhoneInput.tsx
-import { forwardRef as forwardRef52, useEffect as useEffect14, useMemo as useMemo5, useRef as useRef11, useState as useState13 } from "react";
+import { forwardRef as forwardRef52, useEffect as useEffect14, useMemo as useMemo5, useRef as useRef12, useState as useState13 } from "react";
 
 // src/patterns/PhoneInput/countries.ts
 var phoneCountries = [
@@ -4398,7 +4534,7 @@ var PhoneInput = forwardRef52(function PhoneInput2({
     parsed?.country ?? countries.find((c) => c.code === defaultCountry) ?? countries[0]
   );
   const [national, setNational] = useState13(parsed?.national ?? "");
-  const lastEmittedRef = useRef11(committed ?? "");
+  const lastEmittedRef = useRef12(committed ?? "");
   useEffect14(() => {
     const current = committed ?? "";
     if (current === lastEmittedRef.current) return;
@@ -5228,7 +5364,7 @@ import {
   forwardRef as forwardRef65,
   useCallback as useCallback14,
   useEffect as useEffect15,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState17
 } from "react";
 
@@ -5662,7 +5798,7 @@ function VerticalItem({ item, activeId, onActivate }) {
   const hasChildren = (item.children?.length ?? 0) > 0;
   const treeActive = isActiveTree(item, activeId);
   const [open, setOpen] = useState17(treeActive);
-  const prevTreeActive = useRef12(treeActive);
+  const prevTreeActive = useRef13(treeActive);
   useEffect15(() => {
     if (treeActive && !prevTreeActive.current) setOpen(true);
     prevTreeActive.current = treeActive;
@@ -6582,9 +6718,10 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect16,
   useMemo as useMemo7,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState19
 } from "react";
+import { flushSync } from "react-dom";
 import { jsx as jsx80, jsxs as jsxs70 } from "react/jsx-runtime";
 var EMPTY_SET2 = /* @__PURE__ */ new Set();
 function flattenVisible(items, expanded, level, parentId, out) {
@@ -6635,7 +6772,7 @@ var Tree = forwardRef78(function Tree2({
     if (value && flatVisible.some((f) => f.id === value)) return value;
     return flatVisible[0]?.id ?? null;
   }, [activeId, flatVisible, value]);
-  const listRef = useRef13(null);
+  const listRef = useRef14(null);
   const setRefs = useCallback16(
     (node) => {
       listRef.current = node;
@@ -6652,8 +6789,8 @@ var Tree = forwardRef78(function Tree2({
   }, []);
   const moveActive = useCallback16(
     (id) => {
-      setActiveId(id);
-      queueMicrotask(() => focusItem(id));
+      flushSync(() => setActiveId(id));
+      focusItem(id);
     },
     [focusItem]
   );
@@ -6924,17 +7061,30 @@ var WizardDialog = forwardRef79(function WizardDialog2({
       goNext();
     }
   };
-  return /* @__PURE__ */ jsx81(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs71(DialogContent, { ref, width, children: [
-    title && /* @__PURE__ */ jsx81(WizardTitle, { children: title }),
-    description && /* @__PURE__ */ jsx81(WizardDescription, { children: description }),
-    /* @__PURE__ */ jsx81("div", { className: "mb-5", children: /* @__PURE__ */ jsx81(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
-    /* @__PURE__ */ jsx81("div", { className: "mb-5", children: body }),
-    /* @__PURE__ */ jsxs71("div", { className: "flex justify-end gap-2", children: [
-      cancelLabel && /* @__PURE__ */ jsx81(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ jsx81(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
-      /* @__PURE__ */ jsx81(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx81(DialogRoot, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs71(
+    DialogContent,
+    {
+      ref,
+      width,
+      ...description ? {} : { "aria-describedby": void 0 },
+      children: [
+        title ? /* @__PURE__ */ jsx81(WizardTitle, { children: title }) : (
+          // Radix Dialog requires a Title for assistive tech and warns in dev
+          // mode without one. Fall back to a visually-hidden generic title so
+          // the contract is met even when no title prop is supplied.
+          /* @__PURE__ */ jsx81(RadixDialog6.Title, { className: "sr-only", children: "Wizard" })
+        ),
+        description && /* @__PURE__ */ jsx81(WizardDescription, { children: description }),
+        /* @__PURE__ */ jsx81("div", { className: "mb-5", children: /* @__PURE__ */ jsx81(Stepper, { steps: stepperSteps, current: safeCurrent }) }),
+        /* @__PURE__ */ jsx81("div", { className: "mb-5", children: body }),
+        /* @__PURE__ */ jsxs71("div", { className: "flex justify-end gap-2", children: [
+          cancelLabel && /* @__PURE__ */ jsx81(Button, { type: "button", variant: "ghost", onClick: onCancel, children: cancelLabel }),
+          /* @__PURE__ */ jsx81(Button, { type: "button", variant: "secondary", onClick: goBack, disabled: ctx.isFirst, children: backLabel }),
+          /* @__PURE__ */ jsx81(Button, { type: "button", variant: "primary", onClick: handlePrimary, disabled: !canAdvance, children: ctx.isLast ? completeLabel : nextLabel })
+        ] })
+      ]
+    }
+  ) });
 });
 function WizardTitle({ children }) {
   return /* @__PURE__ */ jsx81(RadixDialog6.Title, { className: "mb-2 text-[16px] font-medium", children });