@hexdspace/react 0.1.20 → 0.1.22

package/dist/css/component.css

@@ -121,28 +121,6 @@
         }
     }
 
-    @keyframes tooltip-in {
-        0% {
-            opacity: 0;
-            transform: translate(var(--tooltip-x, 0px), var(--tooltip-y, 4px)) scale(0.98);
-        }
-        100% {
-            opacity: 1;
-            transform: translate(0, 0) scale(1);
-        }
-    }
-
-    @keyframes tooltip-out {
-        0% {
-            opacity: 1;
-            transform: translate(0, 0) scale(1);
-        }
-        100% {
-            opacity: 0;
-            transform: translate(var(--tooltip-x, 0px), var(--tooltip-y, 4px)) scale(0.98);
-        }
-    }
-
     :root .prose code {
         background: rgba(0, 0, 0, 0.08);
         padding: 3px 3px 0;

package/dist/index.js

@@ -1545,7 +1545,34 @@ import { cva as cva2 } from "class-variance-authority";
 import { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React3 from "react";
+
+// src/ui/utils/motion.ts
 import * as React2 from "react";
+function parseCssTimeSeconds(value) {
+  if (!value) return null;
+  if (value.endsWith("ms")) {
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) ? numeric / 1e3 : null;
+  }
+  if (value.endsWith("s")) {
+    const numeric = Number.parseFloat(value);
+    return Number.isFinite(numeric) ? numeric : null;
+  }
+  return null;
+}
+function useMotionDuration(varName, fallbackSeconds) {
+  const [duration, setDuration] = React2.useState(fallbackSeconds);
+  React2.useLayoutEffect(() => {
+    if (typeof window === "undefined") return;
+    const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    const parsed = parseCssTimeSeconds(value);
+    if (parsed !== null) setDuration(parsed);
+  }, [varName]);
+  return duration;
+}
+
+// src/ui/components/dialog/Dialog.tsx
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var dialogPanelVariants = cva2(
   cn(
@@ -1594,16 +1621,16 @@ function AutoHeight({
   resetKey,
   durationSeconds
 }) {
-  const ref = React2.useRef(null);
-  const [height, setHeight] = React2.useState("auto");
-  const readyRef = React2.useRef(false);
-  const resetKeyRef = React2.useRef(resetKey);
-  React2.useEffect(() => {
+  const ref = React3.useRef(null);
+  const [height, setHeight] = React3.useState("auto");
+  const readyRef = React3.useRef(false);
+  const resetKeyRef = React3.useRef(resetKey);
+  React3.useEffect(() => {
     if (resetKeyRef.current === resetKey) return;
     resetKeyRef.current = resetKey;
     readyRef.current = false;
   });
-  React2.useLayoutEffect(() => {
+  React3.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     const dpr = Math.max(1, Math.round(window.devicePixelRatio || 1));
@@ -1640,35 +1667,12 @@ function AutoHeight({
       transition: { duration: durationSeconds, ease: "easeOut" },
       style: {
         maxHeight: "calc(100vh - 4rem)",
-        overflow: "auto",
-        willChange: "height"
+        overflow: "auto"
       },
       children: /* @__PURE__ */ jsx7("div", { ref, style: { boxSizing: "border-box" }, children })
     }
   );
 }
-function parseCssTimeSeconds(value) {
-  if (!value) return null;
-  if (value.endsWith("ms")) {
-    const numeric = Number.parseFloat(value);
-    return Number.isFinite(numeric) ? numeric / 1e3 : null;
-  }
-  if (value.endsWith("s")) {
-    const numeric = Number.parseFloat(value);
-    return Number.isFinite(numeric) ? numeric : null;
-  }
-  return null;
-}
-function useMotionDuration(varName, fallbackSeconds) {
-  const [duration, setDuration] = React2.useState(fallbackSeconds);
-  React2.useLayoutEffect(() => {
-    if (typeof window === "undefined") return;
-    const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
-    const parsed = parseCssTimeSeconds(value);
-    if (parsed !== null) setDuration(parsed);
-  }, [varName]);
-  return duration;
-}
 function Dialog({
   id,
   template,
@@ -1690,13 +1694,13 @@ function Dialog({
   style,
   ...props
 }) {
-  const fallbackId = React2.useId();
-  const resolvedRef = React2.useRef(false);
+  const fallbackId = React3.useId();
+  const resolvedRef = React3.useRef(false);
   const isControlled = open2 !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(defaultOpen ?? false);
   const isOpen = isControlled ? open2 : uncontrolledOpen;
-  const [surfaceReady, setSurfaceReady] = React2.useState(false);
-  const [overlayReady, setOverlayReady] = React2.useState(false);
+  const [surfaceReady, setSurfaceReady] = React3.useState(false);
+  const [overlayReady, setOverlayReady] = React3.useState(false);
   const Template = template;
   const motionDuration = useMotionDuration("--motion-med", 0.16);
   const handleOpenChange = (nextOpen) => {
@@ -1712,14 +1716,14 @@ function Dialog({
     }
     onDismiss?.();
   };
-  const handleResolve = React2.useCallback(
+  const handleResolve = React3.useCallback(
     (result) => {
       resolvedRef.current = true;
       onResolve?.(result);
     },
     [onResolve]
   );
-  const handleAutoHeightReady = React2.useCallback(() => {
+  const handleAutoHeightReady = React3.useCallback(() => {
     if (!isOpen) return;
     requestAnimationFrame(() => {
       setSurfaceReady(true);
@@ -1728,6 +1732,7 @@ function Dialog({
   }, [isOpen]);
   const overlayClassName = cn(dialogOverlayClass);
   const surfaceClassName = cn(dialogSurfaceVariants({ chrome }));
+  const panelRef = React3.useRef(null);
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
     trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
     /* @__PURE__ */ jsx7(DialogPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx7(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
@@ -1750,6 +1755,10 @@ function Dialog({
         {
           forceMount: true,
           asChild: true,
+          onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            panelRef.current?.focus();
+          },
           onInteractOutside: (event) => {
             if (!dismissible) event.preventDefault();
           },
@@ -1761,6 +1770,8 @@ function Dialog({
             motion.div,
             {
               className: cn(dialogPanelVariants(), className),
+              ref: panelRef,
+              tabIndex: -1,
               style: {
                 ...style,
                 zIndex,
@@ -1777,7 +1788,6 @@ function Dialog({
                 motion.div,
                 {
                   className: surfaceClassName,
-                  style: { willChange: "transform" },
                   variants: {
                     open: { opacity: 1, y: 0, transition: { duration: motionDuration, ease: "easeOut" } },
                     closed: { opacity: 0, y: 20, transition: { duration: motionDuration, ease: "easeIn" } }
@@ -1883,7 +1893,7 @@ function registerDefaultDialogs() {
 var DefaultDialogTemplateKeys = ["custom", "confirm", "info"];
 
 // src/feature/dialog/infra/web/react/DialogHost.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 
 // src/feature/dialog/application/use-case/close-top-dialog-use-case.ts
 var CloseTopUseCase = class {
@@ -2034,18 +2044,18 @@ var dialogController = new DialogController(registry, open, resolve, dismiss, cl
 // src/feature/dialog/infra/web/react/DialogHost.tsx
 import { Fragment as Fragment3, 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(() => {
+  const [state, setState] = React4.useState(dialogController.handleGetRegistry().getState());
+  const [closingIds, setClosingIds] = React4.useState(() => /* @__PURE__ */ new Set());
+  const closeTimers = React4.useRef(/* @__PURE__ */ new Map());
+  const [closeDelayMs, setCloseDelayMs] = React4.useState(160);
+  React4.useEffect(() => dialogController.handleGetRegistry().subscribe(setState), []);
+  React4.useEffect(() => {
     if (typeof window === "undefined") return;
     const raw = getComputedStyle(document.documentElement).getPropertyValue("--motion-fast").trim();
     const parsed = parseDurationMs(raw);
     if (parsed) setCloseDelayMs(parsed);
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       for (const timer of closeTimers.current.values()) {
         window.clearTimeout(timer);
@@ -2053,7 +2063,7 @@ var DialogHost = () => {
       closeTimers.current.clear();
     };
   }, []);
-  const scheduleClose = React3.useCallback(
+  const scheduleClose = React4.useCallback(
     (id, action, result) => {
       if (closingIds.has(id)) return;
       setClosingIds((prev) => new Set(prev).add(id));
@@ -2124,12 +2134,12 @@ function useDialog() {
 }
 
 // src/ui/components/Field.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 
 // src/ui/components/Label.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var Label = React4.forwardRef(
+var Label = React5.forwardRef(
   ({ className, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsx12(
     "label",
     {
@@ -2146,7 +2156,7 @@ Label.displayName = "Label";
 // src/ui/components/Field.tsx
 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 reactId = React6.useId();
   const controlId = id ?? `field-${reactId}`;
   const hintId = hint ? `${controlId}-hint` : void 0;
   const errorId = error ? `${controlId}-error` : void 0;
@@ -2156,7 +2166,7 @@ function Field({ label, hint, error, required, disabled, id, children, className
   const ariaDescribedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
   const resolvedDisabled = disabled ?? children.props.disabled;
   const resolvedRequired = required ?? children.props.required;
-  const control = React5.cloneElement(children, {
+  const control = React6.cloneElement(children, {
     id: controlId,
     disabled: resolvedDisabled,
     required: resolvedRequired,
@@ -2179,7 +2189,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 * as React7 from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var controlShellBase = cn(
   "relative inline-flex items-center gap-2",
@@ -2235,7 +2245,7 @@ var slotBase = cn(
   "data-[disabled]:text-[color:var(--disabled-fg)]"
 );
 var slotReserve = "min-w-[var(--input-slot-size)]";
-var Input = React6.forwardRef(
+var Input = React7.forwardRef(
   ({
     variant,
     size,
@@ -2296,7 +2306,7 @@ Input.displayName = "Input";
 // src/ui/components/Skeleton.tsx
 import { cva as cva4 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var skeletonBase = cn(
   "relative isolate inline-flex overflow-hidden",
@@ -2351,7 +2361,7 @@ var skeletonVariants = cva4(skeletonBase, {
     preset: "none"
   }
 });
-var Skeleton = React7.forwardRef(
+var Skeleton = React8.forwardRef(
   ({ variant, size, radius, fullWidth, animation, preset, animate, asChild, className, children, ...props }, ref) => {
     const resolvedAnimation = animation ?? (animate === false ? "none" : animate ? "pulse" : void 0);
     const Component = asChild ? Slot2.Root : "div";
@@ -2381,7 +2391,7 @@ Skeleton.displayName = "Skeleton";
 
 // src/ui/components/Textarea.tsx
 import { cva as cva5 } from "class-variance-authority";
-import * as React8 from "react";
+import * as React9 from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var controlShellBase2 = cn(
   "relative inline-flex w-full",
@@ -2444,7 +2454,7 @@ function mergeRefs(...refs) {
     }
   };
 }
-var Textarea = React8.forwardRef(
+var Textarea = React9.forwardRef(
   ({
     variant,
     size,
@@ -2461,8 +2471,8 @@ var Textarea = React8.forwardRef(
     ...props
   }, ref) => {
     const isDisabled = Boolean(disabled);
-    const innerRef = React8.useRef(null);
-    const resize = React8.useCallback(() => {
+    const innerRef = React9.useRef(null);
+    const resize = React9.useCallback(() => {
       if (!autoResize) return;
       const el = innerRef.current;
       if (!el) return;
@@ -2474,7 +2484,7 @@ var Textarea = React8.forwardRef(
       resize();
       onInput?.(e);
     };
-    React8.useLayoutEffect(() => {
+    React9.useLayoutEffect(() => {
       resize();
     }, [resize, value]);
     return /* @__PURE__ */ jsx16(
@@ -2507,18 +2517,17 @@ var Textarea = React8.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/ui/components/Tooltip.tsx
+import { AnimatePresence as AnimatePresence2, motion as motion2 } from "motion/react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
+import * as React10 from "react";
 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]",
+  "origin-center",
   "[--tooltip-x:0px] [--tooltip-y:4px]",
   "data-[side=bottom]:[--tooltip-y:-4px]",
   "data-[side=left]:[--tooltip-x:4px] data-[side=left]:[--tooltip-y:0px]",
-  "data-[side=right]:[--tooltip-x:-4px] data-[side=right]:[--tooltip-y:0px]",
-  "data-[state=delayed-open]:animate-[tooltip-in_140ms_ease-out]",
-  "data-[state=instant-open]:animate-[tooltip-in_140ms_ease-out]",
-  "data-[state=closed]:animate-[tooltip-out_120ms_ease-in]"
+  "data-[side=right]:[--tooltip-x:-4px] data-[side=right]:[--tooltip-y:0px]"
 );
 function Tooltip({
   children,
@@ -2529,27 +2538,51 @@ function Tooltip({
   maxWidthPx = 240,
   preserveWhitespace = false
 }) {
-  return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs9(TooltipPrimitive.Root, { children: [
+  const [open2, setOpen] = React10.useState(false);
+  const motionDuration = useMotionDuration("--motion-fast", 0.14);
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs9(TooltipPrimitive.Root, { onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { forceMount: true, children: /* @__PURE__ */ jsx17(AnimatePresence2, { children: open2 ? /* @__PURE__ */ jsx17(
       TooltipPrimitive.Content,
       {
+        asChild: true,
+        forceMount: true,
         side,
         sideOffset,
-        className: tooltipContentBase,
-        style: {
-          width: "max-content",
-          maxWidth: `min(${maxWidthPx}px, 90vw)`,
-          whiteSpace: preserveWhitespace ? "pre-line" : "normal",
-          overflowWrap: "break-word",
-          hyphens: "auto"
-        },
-        children: [
-          content,
-          /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { style: { fill: "var(--surface-2)" } })
-        ]
+        children: /* @__PURE__ */ jsxs9(
+          motion2.div,
+          {
+            className: tooltipContentBase,
+            initial: {
+              opacity: 0,
+              scale: 0.98,
+              x: "var(--tooltip-x)",
+              y: "var(--tooltip-y)"
+            },
+            animate: { opacity: 1, scale: 1, x: 0, y: 0 },
+            exit: {
+              opacity: 0,
+              scale: 0.98,
+              x: "var(--tooltip-x)",
+              y: "var(--tooltip-y)",
+              transition: { duration: motionDuration, ease: "easeIn" }
+            },
+            transition: { duration: motionDuration, ease: "easeOut" },
+            style: {
+              width: "max-content",
+              maxWidth: `min(${maxWidthPx}px, 90vw)`,
+              whiteSpace: preserveWhitespace ? "pre-line" : "normal",
+              overflowWrap: "break-word",
+              hyphens: "auto"
+            },
+            children: [
+              content,
+              /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { style: { fill: "var(--surface-2)" } })
+            ]
+          }
+        )
       }
-    ) })
+    ) : null }) })
   ] }) });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,7 +38,7 @@
     "@tanstack/react-query": "^5.90.11",
     "lucide-react": "^0.555.0",
     "radix-ui": "^1.4.3",
-    "react": "^20.2.3",
+    "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-router-dom": "^7.10.1",
     "react-toastify": "^11.0.5"