@hexdspace/react 0.1.13 → 0.1.15

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-med)_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-med)_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(() => {
+  React2.useEffect(() => {
+    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;
@@ -1666,6 +1684,7 @@ function Dialog({
             "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" }) }) })
   ] });
 };
 
@@ -1912,7 +1954,7 @@ var DialogHost = () => {
   React3.useEffect(() => {
     if (typeof window === "undefined") return;
     const raw = getComputedStyle(document.documentElement).getPropertyValue("--motion-fast").trim();
-    const parsed = parseDurationMs(raw);
+    const parsed = parseDurationMs2(raw);
     if (parsed) setCloseDelayMs(parsed);
   }, []);
   React3.useEffect(() => {
@@ -1968,7 +2010,7 @@ var DialogHost = () => {
     );
   }) });
 };
-function parseDurationMs(value) {
+function parseDurationMs2(value) {
   if (!value) return null;
   const trimmed = value.trim();
   const asNumber = Number(trimmed.replace(/ms|s/g, ""));
@@ -2014,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}`;
@@ -2033,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
@@ -2050,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)]",
@@ -2123,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),
@@ -2374,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]",
@@ -2396,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.13",
+  "version": "0.1.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",