@hexdspace/react 0.1.12 → 0.1.14

package/dist/css/component.css

@@ -181,7 +181,7 @@
 
     @keyframes dialog-surface-in {
         from {
-            transform: translateY(0.75rem);
+            transform: translateY(1.25rem);
         }
         to {
             transform: translateY(0);
@@ -193,7 +193,7 @@
             transform: translateY(0);
         }
         to {
-            transform: translateY(0.75rem);
+            transform: translateY(1.25rem);
         }
     }
 

package/dist/index.d.ts

@@ -426,6 +426,7 @@ interface ConfirmDialogProps {
 declare const ConfirmDialog: React__default.FC<ConfirmDialogProps>;
 
 interface CustomDialogPayload {
+    title?: string;
     children?: React__default.ReactNode;
 }
 interface CustomDialogProps {

package/dist/index.js

@@ -1552,26 +1552,30 @@ var dialogPanelVariants = cva2(
     "-translate-x-1/2 -translate-y-1/2",
     "w-[min(92vw,var(--dialog-width))]",
     "pointer-events-auto",
-    "data-[state=open]:animate-[dialog-fade-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+    "data-[state=open]:animate-[dialog-fade-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
+    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
     "motion-reduce:animate-none",
     "data-[state=closed]:pointer-events-none"
   )
 );
 var dialogOverlayClass = cn(
   "fixed inset-0 bg-[color:var(--overlay)]",
-  "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+  "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
+  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
   "motion-reduce:animate-none",
   "data-[state=closed]:pointer-events-none"
 );
 function DialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
 }
-function AutoHeight({ children }) {
+function AutoHeight({ children, freeze = false }) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
   React2.useLayoutEffect(() => {
+    if (freeze) {
+      setHeight("auto");
+      return;
+    }
     const el = ref.current;
     if (!el) return;
     const dpr = Math.max(1, Math.round(window.devicePixelRatio || 1));
@@ -1593,11 +1597,14 @@ function AutoHeight({ children }) {
       ro.disconnect();
       cancelAnimationFrame(raf);
     };
-  }, []);
+  }, [freeze]);
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: "transition-[height] duration-(--motion-med) ease",
+      className: cn(
+        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none",
+        freeze && "transition-none"
+      ),
       style: { height: height === "auto" ? "auto" : height, overflow: "hidden", willChange: "height" },
       children: /* @__PURE__ */ jsx7("div", { ref, style: { boxSizing: "border-box" }, children })
     }
@@ -1625,8 +1632,19 @@ function Dialog({
 }) {
   const fallbackId = React2.useId();
   const resolvedRef = React2.useRef(false);
+  const [isAnimating, setIsAnimating] = React2.useState(false);
+  const animationTimer = React2.useRef(null);
+  const motionMs = useMotionDurationMs("--motion-med", 160);
   const Template = template;
   const handleOpenChange = (nextOpen) => {
+    if (typeof window !== "undefined") {
+      if (animationTimer.current) window.clearTimeout(animationTimer.current);
+      setIsAnimating(true);
+      animationTimer.current = window.setTimeout(() => {
+        setIsAnimating(false);
+        animationTimer.current = null;
+      }, motionMs);
+    }
     onOpenChange?.(nextOpen);
     if (nextOpen) {
       resolvedRef.current = false;
@@ -1662,10 +1680,11 @@ function Dialog({
             "DialogContent",
             dialogPanelVariants(),
             "data-[state=open]:[&_.dialog-surface]:animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
-            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-med)_cubic-bezier(0.4,0,1,1)]",
             "motion-reduce:[&_.dialog-surface]:animate-none",
             className
           ),
+          "aria-describedby": void 0,
           style: {
             ...style,
             zIndex,
@@ -1689,13 +1708,32 @@ function Dialog({
                 "aria-label": closeLabel
               }
             ) }) : null,
-            /* @__PURE__ */ jsx7(AutoHeight, { children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+            /* @__PURE__ */ jsx7(AutoHeight, { freeze: isAnimating, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
           ] })
         }
       )
     ] })
   ] });
 }
+function useMotionDurationMs(token, fallback) {
+  const [ms, setMs] = React2.useState(fallback);
+  React2.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+    const parsed = parseDurationMs(raw);
+    if (parsed !== null) setMs(parsed);
+  }, [token]);
+  return ms;
+}
+function parseDurationMs(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const numeric = Number(trimmed.replace(/ms|s/g, ""));
+  if (Number.isNaN(numeric)) return null;
+  if (trimmed.endsWith("ms")) return numeric;
+  if (trimmed.endsWith("s")) return numeric * 1e3;
+  return numeric;
+}
 
 // src/ui/components/dialog/dialog-variant/ConfirmDialog.tsx
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1703,9 +1741,9 @@ var ConfirmDialog = (props) => {
   const p = props.payload ?? { title: "Are you sure?" };
   const confirmVariant = p.variant ?? (p.danger ? "danger" : "secondary");
   return /* @__PURE__ */ jsxs4(DialogContent, { children: [
-    /* @__PURE__ */ jsx8("h3", { className: "text-lg font-semibold", children: p.title }),
+    /* @__PURE__ */ jsx8(DialogPrimitive2.Title, { className: "text-lg font-semibold", children: p.title }),
     p.children && p.children,
-    p.message ? /* @__PURE__ */ jsx8("p", { className: "mt-2 text-sm opacity-80", children: p.message }) : null,
+    p.message ? /* @__PURE__ */ jsx8(DialogPrimitive2.Description, { className: "mt-2 text-sm opacity-80", children: p.message }) : null,
     /* @__PURE__ */ jsxs4("div", { className: "mt-5 flex items-center justify-end gap-4", children: [
       /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: "secondary", children: p.cancelText ?? "Cancel" }) }),
       /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: confirmVariant, onClick: () => props.onResolve?.({ confirmed: true }), children: p.confirmText ?? "Confirm" }) })
@@ -1714,21 +1752,25 @@ var ConfirmDialog = (props) => {
 };
 
 // src/ui/components/dialog/dialog-variant/CustomDialog.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive3 } from "radix-ui";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var CustomDialog = (props) => {
   const p = props.payload ?? { children: /* @__PURE__ */ jsx9("div", { children: "Empty custom dialog" }) };
-  return /* @__PURE__ */ jsx9(DialogContent, { children: p.children });
+  return /* @__PURE__ */ jsxs5(DialogContent, { children: [
+    /* @__PURE__ */ jsx9(DialogPrimitive3.Title, { className: "sr-only", children: p.title ?? "Dialog" }),
+    p.children
+  ] });
 };
 
 // src/ui/components/dialog/dialog-variant/InfoDialog.tsx
-import { Dialog as DialogPrimitive3 } from "radix-ui";
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive4 } from "radix-ui";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var InfoDialog = (props) => {
   const p = props.payload ?? { title: "Information" };
-  return /* @__PURE__ */ jsxs5(DialogContent, { children: [
-    /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold", children: p.title }),
-    p.children,
-    /* @__PURE__ */ jsx10("div", { className: "mt-5 flex items-center justify-end gap-4", children: /* @__PURE__ */ jsx10(DialogPrimitive3.Close, { asChild: true, children: /* @__PURE__ */ jsx10(Button, { variant: "secondary", children: p.confirmText || "Dismiss" }) }) })
+  return /* @__PURE__ */ jsxs6(DialogContent, { children: [
+    /* @__PURE__ */ jsx10(DialogPrimitive4.Title, { className: "text-lg font-semibold", children: p.title }),
+    p.children ? /* @__PURE__ */ jsx10(DialogPrimitive4.Description, { asChild: true, children: /* @__PURE__ */ jsx10("div", { className: "mt-2 text-sm opacity-80", children: p.children }) }) : null,
+    /* @__PURE__ */ jsx10("div", { className: "mt-5 flex items-center justify-end gap-4", children: /* @__PURE__ */ jsx10(DialogPrimitive4.Close, { asChild: true, children: /* @__PURE__ */ jsx10(Button, { variant: "secondary", children: p.confirmText || "Dismiss" }) }) })
   ] });
 };
 
@@ -1905,13 +1947,52 @@ var dialogController = new DialogController(registry, open, resolve, dismiss, cl
 import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
 var DialogHost = () => {
   const [state, setState] = React3.useState(dialogController.handleGetRegistry().getState());
+  const [closingIds, setClosingIds] = React3.useState(() => /* @__PURE__ */ new Set());
+  const closeTimers = React3.useRef(/* @__PURE__ */ new Map());
+  const [closeDelayMs, setCloseDelayMs] = React3.useState(160);
   React3.useEffect(() => dialogController.handleGetRegistry().subscribe(setState), []);
+  React3.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue("--motion-fast").trim();
+    const parsed = parseDurationMs2(raw);
+    if (parsed) setCloseDelayMs(parsed);
+  }, []);
+  React3.useEffect(() => {
+    return () => {
+      for (const timer of closeTimers.current.values()) {
+        window.clearTimeout(timer);
+      }
+      closeTimers.current.clear();
+    };
+  }, []);
+  const scheduleClose = React3.useCallback(
+    (id, action, result) => {
+      if (closingIds.has(id)) return;
+      setClosingIds((prev) => new Set(prev).add(id));
+      const timer = window.setTimeout(() => {
+        if (action === "resolve") {
+          dialogController.handleResolve(id, result);
+        } else {
+          dialogController.handleDismiss(id);
+        }
+        setClosingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+        closeTimers.current.delete(id);
+      }, closeDelayMs);
+      closeTimers.current.set(id, timer);
+    },
+    [closeDelayMs, closingIds]
+  );
   return /* @__PURE__ */ jsx11(Fragment2, { children: state.stack.map((dialog, index) => {
     const template = getDialogTemplate(dialog.templateKey);
     if (!template) {
       console.error(`Missing dialog template: ${dialog.templateKey}`);
       return null;
     }
+    const isClosing = closingIds.has(dialog.id);
     return /* @__PURE__ */ jsx11(
       Dialog,
       {
@@ -1921,14 +2002,23 @@ var DialogHost = () => {
         modal: dialog.options.modal,
         dismissible: dialog.options.dismissible,
         zIndex: dialog.options.zIndex + index,
-        defaultOpen: true,
-        onResolve: (result) => dialogController.handleResolve(dialog.id, result),
-        onDismiss: () => dialogController.handleDismiss(dialog.id)
+        open: !isClosing,
+        onResolve: (result) => scheduleClose(dialog.id, "resolve", result),
+        onDismiss: () => scheduleClose(dialog.id, "dismiss")
       },
       dialog.id
     );
   }) });
 };
+function parseDurationMs2(value) {
+  if (!value) return null;
+  const trimmed = value.trim();
+  const asNumber = Number(trimmed.replace(/ms|s/g, ""));
+  if (Number.isNaN(asNumber)) return null;
+  if (trimmed.endsWith("ms")) return asNumber;
+  if (trimmed.endsWith("s")) return asNumber * 1e3;
+  return asNumber;
+}
 
 // src/feature/dialog/infra/web/react/useDialog.tsx
 import { useMemo as useMemo3 } from "react";
@@ -1966,7 +2056,7 @@ var Label = React4.forwardRef(
 Label.displayName = "Label";
 
 // src/ui/components/Field.tsx
-import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function Field({ label, hint, error, required, disabled, id, children, className, ...props }) {
   const reactId = React5.useId();
   const controlId = id ?? `field-${reactId}`;
@@ -1985,10 +2075,10 @@ function Field({ label, hint, error, required, disabled, id, children, className
     invalid,
     "aria-describedby": ariaDescribedBy
   });
-  return /* @__PURE__ */ jsxs6("div", { className: cn("grid gap-1.5", className), ...props, children: [
-    label ? /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs6(Label, { htmlFor: controlId, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cn("grid gap-1.5", className), ...props, children: [
+    label ? /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs7(Label, { htmlFor: controlId, children: [
       label,
-      resolvedRequired ? /* @__PURE__ */ jsxs6("span", { "aria-hidden": "true", className: "text-(--muted)", children: [
+      resolvedRequired ? /* @__PURE__ */ jsxs7("span", { "aria-hidden": "true", className: "text-(--muted)", children: [
         " ",
         "*"
       ] }) : null
@@ -2002,7 +2092,7 @@ function Field({ label, hint, error, required, disabled, id, children, className
 // src/ui/components/Input.tsx
 import { cva as cva3 } from "class-variance-authority";
 import * as React6 from "react";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var controlShellBase = cn(
   "relative inline-flex items-center gap-2",
   "rounded-[var(--radius-input)]",
@@ -2075,7 +2165,7 @@ var Input = React6.forwardRef(
     const isDisabled = Boolean(disabled);
     const showLeftSlot = Boolean(leftSlot || reserveLeftSlot);
     const showRightSlot = Boolean(rightSlot || reserveRightSlot);
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "div",
       {
         className: cn(controlShellVariants({ variant, size, fullWidth }), className),
@@ -2326,7 +2416,7 @@ Textarea.displayName = "Textarea";
 
 // src/ui/components/Tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var tooltipContentBase = cn(
   "panel shadow-none px-4 py-2.5 text-xs z-5000 select-none",
   "origin-center will-change-[transform,opacity]",
@@ -2348,9 +2438,9 @@ function Tooltip({
   maxWidthPx = 240,
   preserveWhitespace = false
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs8(TooltipPrimitive.Root, { children: [
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs9(TooltipPrimitive.Root, { children: [
     /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
       TooltipPrimitive.Content,
       {
         side,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",