@ai-matrx/design-system 0.53.3 → 0.54.0

package/dist/index.d.cts

@@ -641,6 +641,13 @@ interface ConfirmDialogProps {
      * choice is missing, not loading — `busy` would show a misleading spinner.
      */
     confirmDisabled?: boolean | undefined;
+    /**
+     * The question is not answerable yet — Confirm is ABSENT, not disabled (a
+     * control is absent or honest, never dead). The body carries its own loading
+     * state; Cancel stays. Set by `ConfirmDialogHost` while `ConfirmOptions.ready`
+     * is pending (0.54.0).
+     */
+    confirmHeld?: boolean | undefined;
     /**
      * Explicit portal target. Default (undefined): the container injected by
      * `PortalContainerProvider`, else `document.body`. Hosts with retargeting
@@ -654,7 +661,7 @@ interface ConfirmDialogProps {
  * Drop-in replacement for `window.confirm`. Use this anywhere you would
  * otherwise reach for a browser-level confirm dialog.
  */
-declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, confirmHeld, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
 
 declare function ConfirmDialogHost(): React.JSX.Element;
 

package/dist/index.d.ts

@@ -641,6 +641,13 @@ interface ConfirmDialogProps {
      * choice is missing, not loading — `busy` would show a misleading spinner.
      */
     confirmDisabled?: boolean | undefined;
+    /**
+     * The question is not answerable yet — Confirm is ABSENT, not disabled (a
+     * control is absent or honest, never dead). The body carries its own loading
+     * state; Cancel stays. Set by `ConfirmDialogHost` while `ConfirmOptions.ready`
+     * is pending (0.54.0).
+     */
+    confirmHeld?: boolean | undefined;
     /**
      * Explicit portal target. Default (undefined): the container injected by
      * `PortalContainerProvider`, else `document.body`. Hosts with retargeting
@@ -654,7 +661,7 @@ interface ConfirmDialogProps {
  * Drop-in replacement for `window.confirm`. Use this anywhere you would
  * otherwise reach for a browser-level confirm dialog.
  */
-declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
+declare function ConfirmDialog({ open, onOpenChange, title, description, content, contentClassName, confirmLabel, cancelLabel, variant, busy, confirmDisabled, confirmHeld, portalContainer, onConfirm, }: ConfirmDialogProps): React.JSX.Element;
 
 declare function ConfirmDialogHost(): React.JSX.Element;
 

package/dist/index.js

@@ -1532,6 +1532,7 @@ function ConfirmDialog({
   variant = "default",
   busy = false,
   confirmDisabled = false,
+  confirmHeld = false,
   portalContainer,
   onConfirm
 }) {
@@ -1548,7 +1549,7 @@ function ConfirmDialog({
         content ?? null,
         /* @__PURE__ */ jsxs9(AlertDialogFooter, { children: [
           cancelLabel === null ? null : /* @__PURE__ */ jsx18(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
-          /* @__PURE__ */ jsxs9(
+          confirmHeld ? null : /* @__PURE__ */ jsxs9(
             AlertDialogAction,
             {
               disabled: busy || confirmDisabled,
@@ -1582,6 +1583,20 @@ import * as React15 from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ConfirmDialogHost() {
   const { shown, open, settle } = useOpenerHost(confirmOpener);
+  const [readyFor, setReadyFor] = React15.useState(null);
+  const ready = shown?.ready;
+  React15.useEffect(() => {
+    if (!shown || !ready) return void 0;
+    let live = true;
+    const release = () => {
+      if (live) setReadyFor(shown);
+    };
+    Promise.resolve(ready).then(release, release);
+    return () => {
+      live = false;
+    };
+  }, [shown, ready]);
+  const held = !!ready && readyFor !== shown;
   const handleConfirm = React15.useCallback(() => settle(true), [settle]);
   const handleOpenChange = React15.useCallback(
     (next) => {
@@ -1599,6 +1614,7 @@ function ConfirmDialogHost() {
       confirmLabel: shown?.confirmLabel,
       cancelLabel: shown?.cancelLabel,
       variant: shown?.variant,
+      confirmHeld: held,
       onConfirm: handleConfirm
     }
   );
@@ -1612,10 +1628,10 @@ import * as React18 from "react";
 import * as React16 from "react";
 
 // src/use-scroll-fade.ts
-import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 var EPSILON = 2;
 function useScrollFade() {
-  const [state, setState] = useState2({
+  const [state, setState] = useState3({
     top: false,
     bottom: false
   });
@@ -1653,7 +1669,7 @@ function useScrollFade() {
     },
     [measure]
   );
-  useEffect(() => () => cleanupRef.current?.(), []);
+  useEffect2(() => () => cleanupRef.current?.(), []);
   return {
     ref,
     state,
@@ -2059,7 +2075,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 // src/creatable-picker.tsx
 import {
   useRef as useRef4,
-  useState as useState3
+  useState as useState4
 } from "react";
 
 // src/popover.tsx
@@ -2135,11 +2151,11 @@ function CreatablePicker({
   renderSelected,
   size = "sm"
 }) {
-  const [open, setOpen] = useState3(false);
-  const [query, setQuery] = useState3("");
-  const [busy, setBusy] = useState3(false);
+  const [open, setOpen] = useState4(false);
+  const [query, setQuery] = useState4("");
+  const [busy, setBusy] = useState4(false);
   const inputRef = useRef4(null);
-  const [needsName, setNeedsName] = useState3(false);
+  const [needsName, setNeedsName] = useState4(false);
   const selected = options.find((option) => option.value === value) ?? null;
   const groups = [];
   for (const option of options) {
@@ -2806,7 +2822,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/editable-label.tsx
-import { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function EditableLabel({
   value,
@@ -2827,16 +2843,16 @@ function EditableLabel({
   inputClassName
 }) {
   const controlled = activation === "controlled";
-  const [internalEditing, setInternalEditing] = useState5(false);
+  const [internalEditing, setInternalEditing] = useState6(false);
   const editing = controlled ? !!editingProp : internalEditing;
-  const [draft, setDraft] = useState5(value);
-  const [error, setError] = useState5(null);
-  const [busy, setBusy] = useState5(false);
+  const [draft, setDraft] = useState6(value);
+  const [error, setError] = useState6(null);
+  const [busy, setBusy] = useState6(false);
   const inputRef = useRef6(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editing) setDraft(value);
   }, [value, editing]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
       if (selectOnEdit) inputRef.current.select();
@@ -3113,7 +3129,7 @@ var Label4 = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Label4.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
-import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef7, useState as useState7 } from "react";
 import { Fragment as Fragment3, jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
 var GAP_PX = 6;
 var TONE = {
@@ -3202,7 +3218,7 @@ function OverflowToolbar({
   const containerRef = useRef7(null);
   const ghostRef = useRef7(null);
   const leadingRef = useRef7(null);
-  const [visibleCount, setVisibleCount] = useState6(visibleActions.length);
+  const [visibleCount, setVisibleCount] = useState7(visibleActions.length);
   const signature = visibleActions.map(
     (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
   ).join("|");
@@ -5246,7 +5262,7 @@ var Switch = React37.forwardRef(({ className, size = "md", ...props }, ref) => /
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/tabbed-bottom-sheet.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 function TabbedBottomSheet({
   open,
@@ -5255,8 +5271,8 @@ function TabbedBottomSheet({
   tabs,
   initialTabId = null
 }) {
-  const [selectedTabId, setSelectedTabId] = useState9(initialTabId);
-  const [wasOpen, setWasOpen] = useState9(open);
+  const [selectedTabId, setSelectedTabId] = useState10(initialTabId);
+  const [wasOpen, setWasOpen] = useState10(open);
   if (open !== wasOpen) {
     setWasOpen(open);
     if (open) setSelectedTabId(initialTabId);
@@ -6151,7 +6167,7 @@ function useTapGuardRef(forwarded, propViolation) {
 }
 
 // src/tap-target/tap-features.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 var TAP_TONE_CLASS = {
   default: "text-foreground",
@@ -6193,7 +6209,7 @@ function matchesShortcut(e, shortcut) {
   return e.key.toLowerCase() === p.key;
 }
 function useTapShortcut(shortcut, getNode, enabled) {
-  useEffect8(() => {
+  useEffect9(() => {
     if (!shortcut || !enabled) return;
     const onKey = (e) => {
       if (!matchesShortcut(e, shortcut)) return;
@@ -6889,7 +6905,7 @@ function TapTargetLabeled({
 }
 
 // src/tap-target/tap-target-copy.tsx
-import { forwardRef as forwardRef35, useEffect as useEffect9, useRef as useRef12, useState as useState10 } from "react";
+import { forwardRef as forwardRef35, useEffect as useEffect10, useRef as useRef12, useState as useState11 } from "react";
 import { Fragment as Fragment7, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 var COPY = /* @__PURE__ */ jsxs35(Fragment7, { children: [
   /* @__PURE__ */ jsx60("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
@@ -6908,9 +6924,9 @@ var VARIANTS = {
 };
 var TapTargetCopyButton = forwardRef35(
   function TapTargetCopyButton2({ value, variant = "glass", onCopied, ariaLabel = "Copy", tooltip, ...rest }, ref) {
-    const [state, setState] = useState10("idle");
+    const [state, setState] = useState11("idle");
     const timer = useRef12(null);
-    useEffect9(() => () => {
+    useEffect10(() => () => {
       if (timer.current) clearTimeout(timer.current);
     }, []);
     const copy = async () => {
@@ -6944,11 +6960,11 @@ var TapTargetCopyButton = forwardRef35(
 // src/tap-target/tap-target-search.tsx
 import {
   useCallback as useCallback11,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useId,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef13,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { Fragment as Fragment8, jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
 var SHORTCUT_LABEL = {
@@ -6983,8 +6999,8 @@ function TapTargetSearchGroup({
   width = "fit",
   shortcut = false
 }) {
-  const [ownValue, setOwnValue] = useState11(defaultValue);
-  const [ownOpen, setOwnOpen] = useState11(defaultOpen);
+  const [ownValue, setOwnValue] = useState12(defaultValue);
+  const [ownOpen, setOwnOpen] = useState12(defaultOpen);
   const value = valueProp ?? ownValue;
   const open = openProp ?? ownOpen;
   const fieldId = useId();
@@ -6992,7 +7008,7 @@ function TapTargetSearchGroup({
   const inputRef = useRef13(null);
   const triggerRef = useRef13(null);
   const measureRef = useRef13(null);
-  const [buttonsWidth, setButtonsWidth] = useState11(null);
+  const [buttonsWidth, setButtonsWidth] = useState12(null);
   useLayoutEffect3(() => {
     const el = measureRef.current;
     if (!el) return;
@@ -7021,7 +7037,7 @@ function TapTargetSearchGroup({
   useLayoutEffect3(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!shortcut) return;
     const onKey = (e) => {
       const mod = e.metaKey || e.ctrlKey;