npm - @hexdspace/react - Versions diffs - 0.1.16 → 0.1.18 - Mend

@hexdspace/react 0.1.16 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/css/component.css CHANGED Viewed

@@ -181,18 +181,22 @@
     @keyframes dialog-surface-in {
         from {
+            opacity: 0;
             transform: translateY(1.25rem);
         }
         to {
+            opacity: 1;
             transform: translateY(0);
         }
     }
     @keyframes dialog-surface-out {
         from {
+            opacity: 1;
             transform: translateY(0);
         }
         to {
+            opacity: 0;
             transform: translateY(1.25rem);
         }
     }

package/dist/index.d.ts CHANGED Viewed

@@ -546,9 +546,11 @@ declare class DialogController {
 }
 declare const dialogController: DialogController;
-declare const dialogPanelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare const dialogSurfaceVariants: (props?: ({
+    chrome?: "flat" | "glass" | "glow" | "hairline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function DialogContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dialogPanelVariants> {
+interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dialogSurfaceVariants> {
     id: string;
     template: DialogTemplate<TPayload>;
     payload: TPayload;
@@ -565,7 +567,7 @@ interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTML
     open?: boolean;
     defaultOpen?: boolean;
 }
-declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
+declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, chrome, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
 type ControlLikeProps = {
     id?: string;
@@ -610,6 +612,7 @@ declare const skeletonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
     animate?: boolean;
+    asChild?: boolean;
 }
 declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.js CHANGED Viewed

@@ -1559,16 +1559,55 @@ var dialogPanelVariants = cva2(
 );
 var dialogOverlayClass = cn(
   "fixed inset-0 bg-[color:var(--overlay)]",
-  "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)]",
   "data-[state=closed]:pointer-events-none"
 );
+var dialogSurfaceVariants = cva2("dialog-surface relative overflow-hidden", {
+  variants: {
+    chrome: {
+      flat: "shell",
+      glass: cn(
+        "border border-[color:color-mix(in_oklab,var(--border),transparent_50%)]",
+        "bg-[color:color-mix(in_oklab,var(--surface-1),transparent_25%)]",
+        "backdrop-blur-[6px]",
+        "rounded-[var(--radius-shell)]",
+        "shadow-[0_18px_40px_rgba(0,0,0,0.18)]"
+      ),
+      glow: cn(
+        "rounded-[var(--radius-shell)]",
+        "border border-[color:color-mix(in_oklab,var(--border),transparent_60%)]",
+        "bg-[color:var(--surface-1)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_55%),0_16px_36px_color-mix(in_oklab,var(--border),transparent_70%)]"
+      ),
+      hairline: cn(
+        "rounded-[var(--radius-shell)]",
+        "border border-[color:color-mix(in_oklab,var(--border),transparent_70%)]",
+        "bg-transparent",
+        "shadow-none"
+      )
+    }
+  },
+  defaultVariants: {
+    chrome: "flat"
+  }
+});
 function DialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
 }
-function AutoHeight({ children }) {
+function AutoHeight({
+  children,
+  onReady,
+  resetKey
+}) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
+  const readyRef = React2.useRef(false);
+  const resetKeyRef = React2.useRef(resetKey);
+  React2.useEffect(() => {
+    if (resetKeyRef.current === resetKey) return;
+    resetKeyRef.current = resetKey;
+    readyRef.current = false;
+  });
   React2.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -1584,6 +1623,12 @@ function AutoHeight({ children }) {
           if (prevNum < 0 || Math.abs(snapped - prevNum) >= 2) return snapped;
           return prev;
         });
+        if (!readyRef.current) {
+          readyRef.current = true;
+          requestAnimationFrame(() => {
+            onReady?.();
+          });
+        }
       });
     });
     ro.observe(el);
@@ -1591,13 +1636,11 @@ function AutoHeight({ children }) {
       ro.disconnect();
       cancelAnimationFrame(raf);
     };
-  }, []);
+  }, [onReady]);
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: cn(
-        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none"
-      ),
+      className: cn("transition-[height] duration-(--motion-med) ease"),
       style: {
         height: height === "auto" ? "auto" : height,
         maxHeight: "calc(100vh - 4rem)",
@@ -1624,17 +1667,20 @@ function Dialog({
   closeLabel = "Close dialog",
   open: open2,
   defaultOpen,
+  chrome,
   className,
   style,
   ...props
 }) {
   const fallbackId = React2.useId();
   const resolvedRef = React2.useRef(false);
-  const rafRef = React2.useRef(null);
   const isControlled = open2 !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
-  const currentOpen = isControlled ? open2 : uncontrolledOpen;
-  const [animateSurface, setAnimateSurface] = React2.useState(false);
+  const isOpen = isControlled ? open2 : uncontrolledOpen;
+  const prevOpenRef = React2.useRef(false);
+  const [contentCycle, setContentCycle] = React2.useState(0);
+  const [surfaceReady, setSurfaceReady] = React2.useState(false);
+  const [overlayReady, setOverlayReady] = React2.useState(false);
   const Template = template;
   const handleOpenChange = (nextOpen) => {
     if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -1657,34 +1703,41 @@ function Dialog({
     [onResolve]
   );
   React2.useEffect(() => {
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-    if (!currentOpen) {
-      setAnimateSurface(false);
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = Boolean(isOpen);
+    if (isOpen && !wasOpen) {
+      setContentCycle((value) => value + 1);
+      setSurfaceReady(false);
+      setOverlayReady(false);
       return;
     }
-    setAnimateSurface(false);
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = requestAnimationFrame(() => {
-        setAnimateSurface(true);
-      });
+    if (!isOpen && wasOpen) {
+      setSurfaceReady(false);
+      setOverlayReady(false);
+    }
+  }, [isOpen]);
+  const handleAutoHeightReady = React2.useCallback(() => {
+    if (!isOpen) return;
+    requestAnimationFrame(() => {
+      setSurfaceReady(true);
+      setOverlayReady(true);
     });
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, [currentOpen]);
+  }, [isOpen]);
+  const overlayClassName = cn(
+    "DialogOverlay",
+    dialogOverlayClass,
+    isOpen && !overlayReady ? "opacity-0" : null,
+    overlayReady ? "animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)] [animation-fill-mode:both]" : null
+  );
+  const surfaceClassName = cn(
+    dialogSurfaceVariants({ chrome }),
+    isOpen && !surfaceReady ? "opacity-0 translate-y-5" : null,
+    surfaceReady ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)] [animation-fill-mode:both]" : null
+  );
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
     trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
     /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-      modal ? /* @__PURE__ */ jsx7(
-        DialogPrimitive.Overlay,
-        {
-          className: cn("DialogOverlay", dialogOverlayClass),
-          style: { zIndex: zIndex - 1 }
-        }
-      ) : null,
+      modal ? /* @__PURE__ */ jsx7(DialogPrimitive.Overlay, { className: overlayClassName, style: { zIndex: zIndex - 1 } }) : null,
       /* @__PURE__ */ jsx7(
         DialogPrimitive.Content,
         {
@@ -1706,29 +1759,19 @@ function Dialog({
             if (!dismissible) event.preventDefault();
           },
           ...props,
-          children: /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: cn(
-                "dialog-surface relative shell overflow-hidden",
-                currentOpen && !animateSurface ? "opacity-0 translate-y-5" : null,
-                animateSurface ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]" : null
-              ),
-              children: [
-                showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
-                    className: "absolute right-2 top-2 z-10 rounded-full",
-                    "aria-label": closeLabel
-                  }
-                ) }) : null,
-                /* @__PURE__ */ jsx7(AutoHeight, { children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
-              ]
-            }
-          )
+          children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, style: { willChange: "transform" }, children: [
+            showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
+                className: "absolute right-2 top-2 z-10 rounded-full",
+                "aria-label": closeLabel
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx7(AutoHeight, { onReady: handleAutoHeightReady, resetKey: contentCycle, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+          ] })
         }
       )
     ] })
@@ -1739,7 +1782,7 @@ function Dialog({
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ConfirmDialog = (props) => {
   const p = props.payload ?? { title: "Are you sure?" };
-  const confirmVariant = p.variant ?? (p.danger ? "danger" : "secondary");
+  const confirmVariant = p.variant ?? (p.danger ? "danger" : "success");
   return /* @__PURE__ */ jsxs4(DialogContent, { children: [
     /* @__PURE__ */ jsx8(DialogPrimitive2.Title, { className: "text-lg font-semibold", children: p.title }),
     p.children && p.children,
@@ -2207,6 +2250,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 { jsx as jsx15 } from "react/jsx-runtime";
 var skeletonBase = cn(
@@ -2219,7 +2263,7 @@ var shimmerEffect = cn(
   "before:content-[''] before:absolute before:inset-0",
   "before:bg-[linear-gradient(110deg,transparent_0%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_25%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_55%)_50%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_75%,transparent_100%)]",
   "before:[background-size:200%_100%]",
-  "before:animate-[skeleton-shimmer_1.6s_linear_infinite] motion-reduce:before:animate-none"
+  "before:animate-[skeleton-shimmer_1.6s_linear_infinite]"
 );
 var skeletonVariants = cva4(skeletonBase, {
   variants: {
@@ -2242,7 +2286,7 @@ var skeletonVariants = cva4(skeletonBase, {
     fullWidth: { true: "w-full", false: "w-auto" },
     animation: {
       none: "",
-      pulse: "animate-pulse motion-reduce:animate-none",
+      pulse: "animate-pulse",
       shimmer: shimmerEffect
     },
     preset: {
@@ -2263,10 +2307,11 @@ var skeletonVariants = cva4(skeletonBase, {
   }
 });
 var Skeleton = React7.forwardRef(
-  ({ variant, size, radius, fullWidth, animation, preset, animate, className, ...props }, ref) => {
+  ({ 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";
     return /* @__PURE__ */ jsx15(
-      "div",
+      Component,
       {
         ref,
         className: cn(
@@ -2280,7 +2325,9 @@ var Skeleton = React7.forwardRef(
           }),
           className
         ),
-        ...props
+        "aria-hidden": props["aria-hidden"] ?? true,
+        ...props,
+        children: asChild ? /* @__PURE__ */ jsx15(Slot2.Slottable, { children }) : children
       }
     );
   }
@@ -2426,8 +2473,7 @@ var tooltipContentBase = cn(
   "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]",
-  "motion-reduce:animate-none"
+  "data-[state=closed]:animate-[tooltip-out_120ms_ease-in]"
 );
 function Tooltip({
   children,

package/package.json CHANGED Viewed

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