doodleui-react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,10 +1,11 @@
 "use client";
-import { createContext, forwardRef, useState, useId, useRef, useLayoutEffect, useContext, Children, isValidElement, cloneElement, useEffect, useCallback, useMemo } from 'react';
+import { createContext, forwardRef, useRef, useState, useId, useLayoutEffect, useContext, Children, isValidElement, cloneElement, useEffect, useSyncExternalStore, useCallback, useMemo } from 'react';
 import rough from 'roughjs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as Dialog from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
@@ -48,6 +49,11 @@ var SKETCH_COLORS = {
 };
 
 // src/utils.ts
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") ref(value);
+  else ref.current = value;
+}
 function randomSeed() {
   return Math.floor(Math.random() * 2 ** 31);
 }
@@ -248,6 +254,177 @@ function RoughSvg({
     }
   );
 }
+var DoodleUIContext = createContext(null);
+function DoodleUIProvider({
+  children,
+  animate = true,
+  forceAnimate = false
+}) {
+  const value = useMemo(
+    () => ({ animate, forceAnimate }),
+    [animate, forceAnimate]
+  );
+  return /* @__PURE__ */ jsx(DoodleUIContext.Provider, { value, children });
+}
+function useDoodleUI() {
+  return useContext(DoodleUIContext) ?? { animate: true, forceAnimate: false };
+}
+
+// src/animations/resolveAnimate.ts
+function resolveAnimate({
+  animate,
+  providerAnimate = true,
+  forceAnimate = false,
+  prefersReducedMotion = false
+}) {
+  if (prefersReducedMotion && !forceAnimate) return false;
+  if (animate !== void 0) return animate;
+  return providerAnimate;
+}
+function subscribe(onStoreChange) {
+  const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+  media.addEventListener("change", onStoreChange);
+  return () => media.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/animations/useAnimate.ts
+function useAnimate(animate) {
+  const { animate: providerAnimate, forceAnimate } = useDoodleUI();
+  const prefersReducedMotion = usePrefersReducedMotion();
+  return resolveAnimate({
+    animate,
+    providerAnimate,
+    forceAnimate,
+    prefersReducedMotion
+  });
+}
+function useTweenNumber(target, enabled, duration = 400) {
+  const [value, setValue] = useState(target);
+  const valueRef = useRef(target);
+  valueRef.current = value;
+  useEffect(() => {
+    if (!enabled) {
+      valueRef.current = target;
+      setValue(target);
+      return;
+    }
+    const from = valueRef.current;
+    if (from === target) return;
+    const start = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const t = Math.min(1, (now - start) / duration);
+      const eased = 1 - (1 - t) ** 3;
+      const next = from + (target - from) * eased;
+      valueRef.current = next;
+      setValue(next);
+      if (t < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, enabled, duration]);
+  return enabled ? value : target;
+}
+var DRAW_IN_DURATION_MS = 400;
+var DRAW_IN_ALERT_MS = 200;
+var DRAW_IN_TOOLTIP_MS = 180;
+var DRAW_IN_MARK_MS = 240;
+var TABLE_STAGGER_MS = 40;
+var DRAW_IN_EASING = "ease-out";
+var running = /* @__PURE__ */ new WeakMap();
+function collectStrokePaths(root) {
+  const groups = root.querySelectorAll("g");
+  if (groups.length > 0) {
+    const paths = [];
+    groups.forEach((group) => {
+      const children = group.querySelectorAll(":scope > path");
+      if (children.length === 0) return;
+      paths.push(children[children.length - 1]);
+    });
+    return paths;
+  }
+  return Array.from(root.querySelectorAll("path"));
+}
+function getStrokePaths(target) {
+  if (target instanceof SVGPathElement) return [target];
+  if (target instanceof SVGSVGElement) return collectStrokePaths(target);
+  const svgs = target.querySelectorAll("svg");
+  if (svgs.length > 0) {
+    return Array.from(svgs).flatMap((svg) => collectStrokePaths(svg));
+  }
+  return collectStrokePaths(target);
+}
+function clearDash(path) {
+  path.style.strokeDasharray = "";
+  path.style.strokeDashoffset = "";
+}
+function cancelDrawIn(target) {
+  if (!target) return;
+  const animations = running.get(target);
+  animations?.forEach((animation) => animation.cancel());
+  running.delete(target);
+  getStrokePaths(target).forEach(clearDash);
+}
+function drawIn(target, duration = DRAW_IN_DURATION_MS, delay = 0) {
+  cancelDrawIn(target);
+  const paths = getStrokePaths(target);
+  const animations = [];
+  for (const path of paths) {
+    let length = 0;
+    try {
+      length = path.getTotalLength();
+    } catch {
+      continue;
+    }
+    if (length <= 0) continue;
+    path.style.strokeDasharray = `${length}`;
+    path.style.strokeDashoffset = `${length}`;
+    const animation = path.animate(
+      [{ strokeDashoffset: String(length) }, { strokeDashoffset: "0" }],
+      { duration, delay, easing: DRAW_IN_EASING, fill: "forwards" }
+    );
+    animation.finished.then(() => {
+      clearDash(path);
+    }).catch(() => {
+    });
+    animations.push(animation);
+  }
+  running.set(target, animations);
+}
+function useDrawIn(pathRef, duration = DRAW_IN_DURATION_MS, enabled = true, replayKey, delay = 0) {
+  useLayoutEffect(() => {
+    const target = pathRef.current;
+    if (!target) return;
+    if (!enabled) {
+      cancelDrawIn(target);
+      return;
+    }
+    const apply = () => drawIn(target, duration, delay);
+    if (getStrokePaths(target).length > 0) {
+      apply();
+      return () => cancelDrawIn(target);
+    }
+    const observer = new MutationObserver(() => {
+      if (getStrokePaths(target).length === 0) return;
+      observer.disconnect();
+      apply();
+    });
+    observer.observe(target, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cancelDrawIn(target);
+    };
+  }, [pathRef, duration, enabled, replayKey, delay]);
+}
 var SketchBox = forwardRef(
   function SketchBox2({
     children,
@@ -266,12 +443,21 @@ var SketchBox = forwardRef(
     strokeWidth,
     inset,
     path,
+    animate,
+    drawInDuration = DRAW_IN_DURATION_MS,
+    drawInKey,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(rootRef, drawInDuration, shouldAnimate, drawInKey);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         style: { position: "relative", ...style },
         ...rest,
@@ -329,6 +515,10 @@ var SIZE_STYLES = {
   md: { fontSize: 15, padding: "8px 16px", minHeight: 38 },
   lg: { fontSize: 17, padding: "11px 22px", minHeight: 46 }
 };
+function assignRef2(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
 var Button = forwardRef(
   function Button2({
     children,
@@ -343,18 +533,28 @@ var Button = forwardRef(
     fillStyle,
     strokeWidth,
     disabled,
+    animate,
     onMouseEnter,
     onMouseLeave,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
     const [hovered, setHovered] = useState(false);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const hoverSeed = deriveSeed(resolvedSeed, "hover");
+    const sketchSeed = shouldAnimate && hovered && !disabled ? hoverSeed : resolvedSeed;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const fill = variant === "primary" ? SKETCH_COLORS.accentFill : variant === "secondary" ? SKETCH_COLORS.secondaryFill : void 0;
     const stroke = variant === "ghost" && !hovered ? "transparent" : variant === "primary" ? sketchColor ?? SKETCH_COLORS.accent : ink;
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "button",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef2(ref, node);
+        },
         type: "button",
         className: cn(className),
         disabled,
@@ -390,12 +590,12 @@ var Button = forwardRef(
             {
               shape: "rectangle",
               roughness,
-              seed,
+              seed: sketchSeed,
               sketchColor: stroke,
               bowing,
               fillStyle: fillStyle ?? "hachure",
               fill,
-              strokeWidth: hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
+              strokeWidth: !shouldAnimate && hovered ? (strokeWidth ?? 1.75) + 0.4 : strokeWidth
             }
           ),
           /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
@@ -417,11 +617,18 @@ var Input = forwardRef(function Input2({
   id,
   onFocus,
   onBlur,
+  animate,
   ...rest
 }, ref) {
   const [focused, setFocused] = useState(false);
+  const fieldRef = useRef(null);
+  const shouldAnimate = useAnimate(animate);
+  const resolvedSeed = useResolvedSeed(seed);
+  const focusSeed = deriveSeed(resolvedSeed, "focus");
+  const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   const inputId = id;
+  useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
   return /* @__PURE__ */ jsxs(
     "label",
     {
@@ -445,17 +652,17 @@ var Input = forwardRef(function Input2({
             children: label
           }
         ) : null,
-        /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
+        /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
           /* @__PURE__ */ jsx(
             RoughSvg,
             {
               shape: "rectangle",
               roughness,
-              seed,
+              seed: sketchSeed,
               sketchColor: focused ? SKETCH_COLORS.accent : ink,
               bowing,
               fillStyle,
-              strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+              strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
             }
           ),
           /* @__PURE__ */ jsx(
@@ -509,10 +716,17 @@ var Textarea = forwardRef(
     rows = 4,
     onFocus,
     onBlur,
+    animate,
     ...rest
   }, ref) {
     const [focused, setFocused] = useState(false);
+    const fieldRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    const resolvedSeed = useResolvedSeed(seed);
+    const focusSeed = deriveSeed(resolvedSeed, "focus");
+    const sketchSeed = shouldAnimate && focused ? focusSeed : resolvedSeed;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
+    useDrawIn(fieldRef, DRAW_IN_DURATION_MS, shouldAnimate, sketchSeed);
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -536,17 +750,17 @@ var Textarea = forwardRef(
               children: label
             }
           ) : null,
-          /* @__PURE__ */ jsxs("span", { style: { position: "relative", display: "block" }, children: [
+          /* @__PURE__ */ jsxs("span", { ref: fieldRef, style: { position: "relative", display: "block" }, children: [
             /* @__PURE__ */ jsx(
               RoughSvg,
               {
                 shape: "rectangle",
                 roughness,
-                seed,
+                seed: sketchSeed,
                 sketchColor: focused ? SKETCH_COLORS.accent : ink,
                 bowing,
                 fillStyle,
-                strokeWidth: focused ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth
+                strokeWidth: focused && !shouldAnimate ? (strokeWidth ?? 1.75) + 0.35 : focused ? (strokeWidth ?? 1.75) + 0.2 : strokeWidth
               }
             ),
             /* @__PURE__ */ jsx(
@@ -591,6 +805,36 @@ var Textarea = forwardRef(
 );
 var BOX = 20;
 var CHECK_PATH = "M 4.5 10.5 L 8.5 14.5 L 15.5 5.5";
+function CheckMark({
+  roughness,
+  seed,
+  bowing,
+  strokeWidth,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      style: { position: "absolute", inset: 0, pointerEvents: "none" },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "path",
+          path: CHECK_PATH,
+          roughness: (roughness ?? 1.5) * 0.7,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          bowing,
+          strokeWidth: (strokeWidth ?? 1.6) + 0.4,
+          inset: 0
+        }
+      )
+    }
+  );
+}
 var Checkbox = forwardRef(
   function Checkbox2({
     className,
@@ -606,11 +850,15 @@ var Checkbox = forwardRef(
     defaultChecked,
     onCheckedChange,
     id,
+    animate,
     ...rest
   }, ref) {
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const generatedId = useId();
     const inputId = id ?? generatedId;
+    const boxRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
+    useDrawIn(boxRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -645,16 +893,23 @@ var Checkbox = forwardRef(
               ...rest,
               children: [
                 /* @__PURE__ */ jsx(
-                  RoughSvg,
+                  "span",
                   {
-                    shape: "rectangle",
-                    roughness,
-                    seed,
-                    sketchColor: ink,
-                    bowing,
-                    fillStyle,
-                    strokeWidth: strokeWidth ?? 1.6,
-                    inset: 1.5
+                    ref: boxRef,
+                    style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "rectangle",
+                        roughness,
+                        seed,
+                        sketchColor: ink,
+                        bowing,
+                        fillStyle,
+                        strokeWidth: strokeWidth ?? 1.6,
+                        inset: 1.5
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -666,16 +921,13 @@ var Checkbox = forwardRef(
                       display: "block"
                     },
                     children: /* @__PURE__ */ jsx(
-                      RoughSvg,
+                      CheckMark,
                       {
-                        shape: "path",
-                        path: CHECK_PATH,
-                        roughness: (roughness ?? 1.5) * 0.7,
+                        roughness,
                         seed,
-                        sketchColor: SKETCH_COLORS.accent,
                         bowing,
-                        strokeWidth: (strokeWidth ?? 1.6) + 0.4,
-                        inset: 0
+                        strokeWidth,
+                        shouldAnimate
                       }
                     )
                   }
@@ -716,6 +968,53 @@ var RadioGroup = forwardRef(
   }
 );
 var SIZE = 20;
+function RadioDot({
+  roughness,
+  seed,
+  bowing,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, shouldAnimate);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node || !shouldAnimate) return;
+    const animation = node.animate(
+      [
+        { transform: "scale(0.35)", opacity: 0 },
+        { transform: "scale(1)", opacity: 1 }
+      ],
+      { duration: 180, easing: "ease-out", fill: "forwards" }
+    );
+    return () => animation.cancel();
+  }, [shouldAnimate]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        display: "block"
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "ellipse",
+          roughness: (roughness ?? 1.5) + 0.2,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          fill: SKETCH_COLORS.accent,
+          fillStyle: "solid",
+          bowing,
+          strokeWidth: 1,
+          inset: 6
+        }
+      )
+    }
+  );
+}
 var Radio = forwardRef(function Radio2({
   className,
   style,
@@ -727,11 +1026,15 @@ var Radio = forwardRef(function Radio2({
   fillStyle,
   strokeWidth,
   id,
+  animate,
   ...rest
 }, ref) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   const generatedId = useId();
   const inputId = id ?? generatedId;
+  const ringRef = useRef(null);
+  const shouldAnimate = useAnimate(animate);
+  useDrawIn(ringRef, DRAW_IN_DURATION_MS, shouldAnimate);
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -764,16 +1067,23 @@ var Radio = forwardRef(function Radio2({
             ...rest,
             children: [
               /* @__PURE__ */ jsx(
-                RoughSvg,
+                "span",
                 {
-                  shape: "ellipse",
-                  roughness,
-                  seed,
-                  sketchColor: ink,
-                  bowing,
-                  fillStyle,
-                  strokeWidth: strokeWidth ?? 1.6,
-                  inset: 1.5
+                  ref: ringRef,
+                  style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                  children: /* @__PURE__ */ jsx(
+                    RoughSvg,
+                    {
+                      shape: "ellipse",
+                      roughness,
+                      seed,
+                      sketchColor: ink,
+                      bowing,
+                      fillStyle,
+                      strokeWidth: strokeWidth ?? 1.6,
+                      inset: 1.5
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -785,17 +1095,12 @@ var Radio = forwardRef(function Radio2({
                     display: "block"
                   },
                   children: /* @__PURE__ */ jsx(
-                    RoughSvg,
+                    RadioDot,
                     {
-                      shape: "ellipse",
-                      roughness: (roughness ?? 1.5) + 0.2,
+                      roughness,
                       seed,
-                      sketchColor: SKETCH_COLORS.accent,
-                      fill: SKETCH_COLORS.accent,
-                      fillStyle: "solid",
                       bowing,
-                      strokeWidth: 1,
-                      inset: 6
+                      shouldAnimate
                     }
                   )
                 }
@@ -829,6 +1134,7 @@ var Card = forwardRef(function Card2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const boxProps = {
@@ -839,7 +1145,8 @@ var Card = forwardRef(function Card2({
     sketchColor: sketchColor ?? SKETCH_COLORS.ink,
     bowing,
     fillStyle,
-    strokeWidth
+    strokeWidth,
+    animate
   };
   return /* @__PURE__ */ jsxs(
     SketchBox,
@@ -879,6 +1186,7 @@ var Badge = forwardRef(function Badge2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const ink = variant === "accent" ? sketchColor ?? SKETCH_COLORS.accent : sketchColor ?? SKETCH_COLORS.ink;
@@ -906,6 +1214,7 @@ var Badge = forwardRef(function Badge2({
       sketchColor: ink,
       bowing,
       strokeWidth: strokeWidth ?? 1.4,
+      animate,
       ...rest,
       children: /* @__PURE__ */ jsx("span", { ref, children })
     }
@@ -936,6 +1245,7 @@ var Alert = forwardRef(function Alert2({
   fillStyle,
   strokeWidth,
   role = "status",
+  animate,
   ...rest
 }, ref) {
   const color = sketchColor ?? VARIANT_COLOR[variant];
@@ -954,6 +1264,8 @@ var Alert = forwardRef(function Alert2({
       fillStyle: fillStyle ?? "hachure",
       fill: VARIANT_FILL[variant],
       strokeWidth,
+      animate,
+      drawInDuration: DRAW_IN_ALERT_MS,
       ...rest,
       children: [
         title ? /* @__PURE__ */ jsx(
@@ -986,15 +1298,27 @@ function Modal({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
-  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen === true);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open: isOpen, onOpenChange: handleOpenChange, children: [
     trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }) : null,
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(
-        Dialog.Overlay,
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxs(Dialog.Portal, { forceMount: true, children: [
+      /* @__PURE__ */ jsx(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+        motion.div,
         {
+          initial: shouldAnimate ? { opacity: 0 } : false,
+          animate: { opacity: 1 },
+          exit: shouldAnimate ? { opacity: 0 } : void 0,
+          transition: shouldAnimate ? { duration: 0.2, ease: "easeOut" } : { duration: 0 },
           style: {
             position: "fixed",
             inset: 0,
@@ -1002,92 +1326,121 @@ function Modal({
             zIndex: 70
           }
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx(
-        Dialog.Content,
+        "div",
         {
-          className: cn(className),
           style: {
             position: "fixed",
-            left: "50%",
-            top: "50%",
-            transform: "translate(-50%, -50%)",
+            inset: 0,
             zIndex: 80,
-            width: "min(480px, calc(100vw - 32px))",
-            outline: "none"
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+            padding: 16
           },
-          children: /* @__PURE__ */ jsxs(
-            SketchBox,
+          children: /* @__PURE__ */ jsx(Dialog.Content, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx(
+            motion.div,
             {
-              roughness,
-              seed,
-              sketchColor: ink,
-              bowing,
-              fillStyle: fillStyle ?? "solid",
-              fill: "#f7f6f2",
-              strokeWidth: strokeWidth ?? 2,
-              shadow: true,
-              contentStyle: { padding: "20px 22px 18px" },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      alignItems: "flex-start",
-                      justifyContent: "space-between",
-                      gap: 12,
-                      marginBottom: title ? 10 : 0
-                    },
-                    children: [
-                      title ? /* @__PURE__ */ jsx(
-                        Dialog.Title,
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: 18,
-                            fontWeight: doodleUiFontWeight(700),
-                            fontFamily: doodleUiFontFamily,
-                            color: ink
-                          },
-                          children: title
-                        }
-                      ) : /* @__PURE__ */ jsx(Dialog.Title, { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: "Dialog" }),
-                      /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "sm",
-                          roughness,
-                          seed,
-                          sketchColor: ink,
-                          "aria-label": "Close",
-                          children: "Close"
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                description ? /* @__PURE__ */ jsx(
-                  Dialog.Description,
-                  {
-                    style: {
-                      margin: "0 0 14px",
-                      fontSize: 14,
-                      lineHeight: 1.5,
-                      color: ink,
-                      opacity: 0.8
-                    },
-                    children: description
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx("div", { children })
-              ]
+              className: cn(className),
+              initial: shouldAnimate ? { opacity: 0, scale: 0.96, y: 10 } : false,
+              animate: { opacity: 1, scale: 1, y: 0 },
+              exit: shouldAnimate ? { opacity: 0, scale: 0.96, y: 8 } : void 0,
+              transition: shouldAnimate ? { duration: 0.22, ease: "easeOut" } : { duration: 0 },
+              style: {
+                width: "min(480px, calc(100vw - 32px))",
+                outline: "none",
+                pointerEvents: "auto"
+              },
+              children: /* @__PURE__ */ jsxs(
+                SketchBox,
+                {
+                  roughness,
+                  seed,
+                  sketchColor: ink,
+                  bowing,
+                  fillStyle: fillStyle ?? "solid",
+                  fill: "#f7f6f2",
+                  strokeWidth: strokeWidth ?? 2,
+                  shadow: true,
+                  animate,
+                  contentStyle: { padding: "20px 22px 18px" },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-start",
+                          justifyContent: "space-between",
+                          gap: 12,
+                          marginBottom: title ? 10 : 0
+                        },
+                        children: [
+                          title ? /* @__PURE__ */ jsx(
+                            Dialog.Title,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 18,
+                                fontWeight: doodleUiFontWeight(700),
+                                fontFamily: doodleUiFontFamily,
+                                color: ink
+                              },
+                              children: title
+                            }
+                          ) : /* @__PURE__ */ jsx(
+                            Dialog.Title,
+                            {
+                              style: {
+                                position: "absolute",
+                                width: 1,
+                                height: 1,
+                                overflow: "hidden",
+                                clip: "rect(0 0 0 0)"
+                              },
+                              children: "Dialog"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              roughness,
+                              seed,
+                              sketchColor: ink,
+                              animate,
+                              "aria-label": "Close",
+                              children: "Close"
+                            }
+                          ) })
+                        ]
+                      }
+                    ),
+                    description ? /* @__PURE__ */ jsx(
+                      Dialog.Description,
+                      {
+                        style: {
+                          margin: "0 0 14px",
+                          fontSize: 14,
+                          lineHeight: 1.5,
+                          color: ink,
+                          opacity: 0.8
+                        },
+                        children: description
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx("div", { children })
+                  ]
+                }
+              )
             }
-          )
+          ) })
         }
       )
-    ] })
+    ] }) : null })
   ] });
 }
 var ModalRoot = Dialog.Root;
@@ -1105,13 +1458,20 @@ var Divider = forwardRef(
     sketchColor,
     bowing,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(animate);
     const horizontal = orientation === "horizontal";
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsx(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "separator",
         "aria-orientation": orientation,
         className: cn(className),
@@ -1151,15 +1511,27 @@ var Progress = forwardRef(
     bowing,
     fillStyle,
     strokeWidth,
+    animate,
     ...rest
   }, ref) {
+    const rootRef = useRef(null);
+    const trackRef = useRef(null);
     const ink = sketchColor ?? SKETCH_COLORS.accent;
     const clamped = Math.min(max, Math.max(0, value));
     const percent = max === 0 ? 0 : clamped / max * 100;
+    const shouldAnimate = useAnimate(animate);
+    const displayed = useTweenNumber(percent, shouldAnimate, 420);
+    const resolvedSeed = useResolvedSeed(seed);
+    const fillSeed = shouldAnimate ? deriveSeed(resolvedSeed, `fill-${Math.round(displayed / 6)}`) : resolvedSeed;
+    const fillRoughness = (roughness ?? 1.5) + 0.4 + displayed / 100 * 0.7;
+    useDrawIn(trackRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         role: "progressbar",
         "aria-valuemin": 0,
         "aria-valuemax": max,
@@ -1174,18 +1546,25 @@ var Progress = forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsx(
-            RoughSvg,
+            "span",
             {
-              shape: "rectangle",
-              roughness,
-              seed,
-              sketchColor: SKETCH_COLORS.ink,
-              bowing,
-              strokeWidth: strokeWidth ?? 1.5,
-              inset: 2
+              ref: trackRef,
+              style: { position: "absolute", inset: 0, pointerEvents: "none" },
+              children: /* @__PURE__ */ jsx(
+                RoughSvg,
+                {
+                  shape: "rectangle",
+                  roughness,
+                  seed: resolvedSeed,
+                  sketchColor: SKETCH_COLORS.ink,
+                  bowing,
+                  strokeWidth: strokeWidth ?? 1.5,
+                  inset: 2
+                }
+              )
             }
           ),
-          percent > 0 ? /* @__PURE__ */ jsx(
+          displayed > 0 ? /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1193,16 +1572,16 @@ var Progress = forwardRef(
                 left: 5,
                 top: 4,
                 bottom: 4,
-                width: `calc(${percent}% - 10px)`,
-                minWidth: percent > 0 ? 8 : 0,
+                width: `calc(${displayed}% - 10px)`,
+                minWidth: displayed > 0 ? 8 : 0,
                 overflow: "hidden"
               },
               children: /* @__PURE__ */ jsx(
                 RoughSvg,
                 {
                   shape: "rectangle",
-                  roughness: (roughness ?? 1.5) + 0.55,
-                  seed,
+                  roughness: fillRoughness,
+                  seed: fillSeed,
                   sketchColor: ink,
                   fill: ink,
                   fillStyle: fillStyle ?? "hachure",
@@ -1230,7 +1609,8 @@ function Tooltip({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const ink = sketchColor ?? SKETCH_COLORS.ink;
   return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { delayDuration, children: [
@@ -1252,6 +1632,8 @@ function Tooltip({
             fillStyle: fillStyle ?? "solid",
             fill: "#f7f6f2",
             strokeWidth: strokeWidth ?? 1.4,
+            animate,
+            drawInDuration: DRAW_IN_TOOLTIP_MS,
             contentStyle: {
               padding: "6px 10px",
               fontSize: 13,
@@ -1293,6 +1675,7 @@ function Select({
   value,
   defaultValue,
   onValueChange,
+  animate,
   "aria-label": ariaLabel,
   ...rest
 }) {
@@ -1315,7 +1698,8 @@ function Select({
         ink,
         selectedValue,
         selectedLabel,
-        placeholder
+        placeholder,
+        animate
       },
       children: /* @__PURE__ */ jsxs(
         SelectPrimitive.Root,
@@ -1356,10 +1740,16 @@ var SelectTrigger = forwardRef(
   function SelectTrigger2({ className, style, placeholder, children, ...rest }, ref) {
     const sketch = useSelectSketch();
     const [openish, setOpenish] = useState(false);
+    const rootRef = useRef(null);
+    const shouldAnimate = useAnimate(sketch.animate);
+    useDrawIn(rootRef, DRAW_IN_DURATION_MS, shouldAnimate);
     return /* @__PURE__ */ jsxs(
       SelectPrimitive.Trigger,
       {
-        ref,
+        ref: (node) => {
+          rootRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         onPointerDown: () => setOpenish(true),
         onBlur: () => setOpenish(false),
@@ -1468,6 +1858,7 @@ var SelectContent = forwardRef(
             fillStyle: sketch.fillStyle ?? "solid",
             fill: "#f7f6f2",
             strokeWidth: sketch.strokeWidth ?? 1.5,
+            animate: sketch.animate,
             contentStyle: { padding: "6px 4px" },
             children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { children })
           }
@@ -1558,12 +1949,17 @@ var Switch = forwardRef(
     defaultChecked,
     onCheckedChange,
     id,
+    animate,
     ...rest
   }, ref) {
     const [uncontrolled, setUncontrolled] = useState(defaultChecked === true);
     const isOn = checked ?? uncontrolled;
     const ink = sketchColor ?? SKETCH_COLORS.ink;
     const resolvedSeed = useResolvedSeed(seed);
+    const shouldAnimate = useAnimate(animate);
+    const trackRef = useRef(null);
+    const trackSeed = shouldAnimate ? deriveSeed(resolvedSeed, isOn ? "on" : "off") : resolvedSeed;
+    useDrawIn(trackRef, DRAW_IN_DURATION_MS, shouldAnimate, trackSeed);
     return /* @__PURE__ */ jsxs(
       "span",
       {
@@ -1602,22 +1998,32 @@ var Switch = forwardRef(
               ...rest,
               children: [
                 /* @__PURE__ */ jsx(
-                  RoughSvg,
+                  "span",
                   {
-                    shape: "rectangle",
-                    roughness,
-                    seed: resolvedSeed,
-                    sketchColor: isOn ? SKETCH_COLORS.accent : ink,
-                    bowing: bowing ?? 1.4,
-                    fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
-                    fill: isOn ? SKETCH_COLORS.accentFill : void 0,
-                    strokeWidth: strokeWidth ?? 1.6,
-                    inset: 1.5
+                    ref: trackRef,
+                    style: { position: "absolute", inset: 0, pointerEvents: "none" },
+                    children: /* @__PURE__ */ jsx(
+                      RoughSvg,
+                      {
+                        shape: "rectangle",
+                        roughness,
+                        seed: trackSeed,
+                        sketchColor: isOn ? SKETCH_COLORS.accent : ink,
+                        bowing: bowing ?? 1.4,
+                        fillStyle: fillStyle ?? (isOn ? "hachure" : void 0),
+                        fill: isOn ? SKETCH_COLORS.accentFill : void 0,
+                        strokeWidth: strokeWidth ?? 1.6,
+                        inset: 1.5
+                      }
+                    )
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  SwitchPrimitive.Thumb,
+                /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { asChild: true, children: /* @__PURE__ */ jsx(
+                  motion.span,
                   {
+                    initial: false,
+                    animate: { x: isOn ? THUMB_ON : THUMB_OFF },
+                    transition: shouldAnimate ? { type: "spring", stiffness: 420, damping: 30 } : { duration: 0 },
                     style: {
                       position: "absolute",
                       top: (TRACK_H - THUMB) / 2,
@@ -1625,8 +2031,6 @@ var Switch = forwardRef(
                       width: THUMB,
                       height: THUMB,
                       display: "block",
-                      transform: `translateX(${isOn ? THUMB_ON : THUMB_OFF}px)`,
-                      transition: "transform 160ms ease",
                       zIndex: 1
                     },
                     children: /* @__PURE__ */ jsx(
@@ -1644,7 +2048,7 @@ var Switch = forwardRef(
                       }
                     )
                   }
-                )
+                ) })
               ]
             }
           ),
@@ -1686,12 +2090,14 @@ var Tabs = forwardRef(function Tabs2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const [uncontrolled, setUncontrolled] = useState(defaultValue);
   const current = value ?? uncontrolled;
   const resolvedSeed = useResolvedSeed(seed);
   const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
   return /* @__PURE__ */ jsx(
     TabsSketchContext.Provider,
     {
@@ -1704,7 +2110,8 @@ var Tabs = forwardRef(function Tabs2({
         strokeWidth,
         resolvedSeed,
         ink,
-        current
+        current,
+        shouldAnimate
       },
       children: /* @__PURE__ */ jsx(
         TabsPrimitive.Root,
@@ -1725,21 +2132,94 @@ var Tabs = forwardRef(function Tabs2({
     }
   );
 });
+function TabUnderline({
+  box,
+  seed,
+  sketch
+}) {
+  const ref = useRef(null);
+  useDrawIn(ref, DRAW_IN_MARK_MS, sketch.shouldAnimate, seed);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        left: box.left,
+        top: box.top,
+        width: box.width,
+        height: 10,
+        pointerEvents: "none",
+        transition: sketch.shouldAnimate ? "left 220ms ease, width 220ms ease, top 220ms ease" : void 0
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: (sketch.roughness ?? 1.5) + 0.35,
+          seed,
+          sketchColor: SKETCH_COLORS.accent,
+          bowing: sketch.bowing ?? 1.8,
+          strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
+          inset: 2
+        }
+      )
+    }
+  );
+}
 var TabList = forwardRef(
   function TabList2({ className, style, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx(
+    const sketch = useTabsSketch();
+    const listRef = useRef(null);
+    const [underline, setUnderline] = useState(null);
+    useLayoutEffect(() => {
+      const list = listRef.current;
+      if (!list) return;
+      const measure = () => {
+        const active = list.querySelector('[data-state="active"]');
+        if (!active) {
+          setUnderline(null);
+          return;
+        }
+        setUnderline({
+          left: active.offsetLeft + 8,
+          top: active.offsetTop + active.offsetHeight - 10,
+          width: Math.max(12, active.offsetWidth - 16)
+        });
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(list);
+      return () => observer.disconnect();
+    }, [sketch.current, children]);
+    return /* @__PURE__ */ jsxs(
       TabsPrimitive.List,
       {
-        ref,
+        ref: (node) => {
+          listRef.current = node;
+          assignRef(ref, node);
+        },
         className: cn(className),
         style: {
           display: "flex",
           flexWrap: "wrap",
           gap: 4,
+          position: "relative",
           ...style
         },
         ...rest,
-        children
+        children: [
+          children,
+          underline && sketch.current ? /* @__PURE__ */ jsx(
+            TabUnderline,
+            {
+              box: underline,
+              seed: deriveSeed(sketch.resolvedSeed, sketch.current),
+              sketch
+            }
+          ) : null
+        ]
       }
     );
   }
@@ -1747,7 +2227,7 @@ var TabList = forwardRef(
 var Tab = forwardRef(function Tab2({ className, style, children, value, ...rest }, ref) {
   const sketch = useTabsSketch();
   const active = sketch.current === value;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
     {
       ref,
@@ -1767,34 +2247,7 @@ var Tab = forwardRef(function Tab2({ className, style, children, value, ...rest
         ...style
       },
       ...rest,
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children }),
-        active ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              position: "absolute",
-              left: 8,
-              right: 8,
-              bottom: 2,
-              height: 10,
-              pointerEvents: "none"
-            },
-            children: /* @__PURE__ */ jsx(
-              RoughSvg,
-              {
-                shape: "line",
-                roughness: (sketch.roughness ?? 1.5) + 0.35,
-                seed: deriveSeed(sketch.resolvedSeed, value),
-                sketchColor: SKETCH_COLORS.accent,
-                bowing: sketch.bowing ?? 1.8,
-                strokeWidth: (sketch.strokeWidth ?? 1.75) + 0.4,
-                inset: 2
-              }
-            )
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children })
     }
   );
 });
@@ -1829,6 +2282,46 @@ function useTableSketch() {
   }
   return ctx;
 }
+function TableRule({
+  line,
+  headerUnderline,
+  roughness,
+  resolvedSeed,
+  ink,
+  bowing,
+  strokeWidth,
+  shouldAnimate
+}) {
+  const ref = useRef(null);
+  const delay = shouldAnimate ? Math.min(line.index, 6) * TABLE_STAGGER_MS : 0;
+  useDrawIn(ref, DRAW_IN_DURATION_MS, shouldAnimate, void 0, delay);
+  if (line.header && !headerUnderline) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        left: 0,
+        width: line.width,
+        top: line.y - 6,
+        height: 12
+      },
+      children: /* @__PURE__ */ jsx(
+        RoughSvg,
+        {
+          shape: "line",
+          roughness: line.header ? (roughness ?? 1.5) + 0.2 : roughness ?? 1.7,
+          seed: deriveSeed(resolvedSeed, line.key),
+          sketchColor: ink,
+          bowing: bowing ?? (line.header ? 1.4 : 2),
+          strokeWidth: line.header ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth ?? 1.35,
+          inset: 6
+        }
+      )
+    }
+  );
+}
 var Table = forwardRef(function Table2({
   className,
   style,
@@ -1840,6 +2333,7 @@ var Table = forwardRef(function Table2({
   bowing,
   fillStyle,
   strokeWidth,
+  animate,
   ...rest
 }, ref) {
   const wrapperRef = useRef(null);
@@ -1847,6 +2341,7 @@ var Table = forwardRef(function Table2({
   const [lines, setLines] = useState([]);
   const resolvedSeed = useResolvedSeed(seed);
   const ink = sketchColor ?? SKETCH_COLORS.ink;
+  const shouldAnimate = useAnimate(animate);
   useLayoutEffect(() => {
     const wrapper = wrapperRef.current;
     const table = tableRef.current;
@@ -1862,7 +2357,8 @@ var Table = forwardRef(function Table2({
           y: row.offsetTop + row.offsetHeight,
           width: table.offsetWidth,
           key: isHeader ? `header-${index}` : `row-${index}`,
-          header: Boolean(isHeader)
+          header: Boolean(isHeader),
+          index
         });
       });
       setLines(next);
@@ -1884,7 +2380,8 @@ var Table = forwardRef(function Table2({
         fillStyle,
         strokeWidth,
         resolvedSeed,
-        ink
+        ink,
+        shouldAnimate
       },
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -1904,34 +2401,20 @@ var Table = forwardRef(function Table2({
                   zIndex: 1,
                   overflow: "visible"
                 },
-                children: lines.map((line) => {
-                  if (line.header && !headerUnderline) return null;
-                  return /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        left: 0,
-                        width: line.width,
-                        top: line.y - 6,
-                        height: 12
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        RoughSvg,
-                        {
-                          shape: "line",
-                          roughness: line.header ? (roughness ?? 1.5) + 0.2 : roughness ?? 1.7,
-                          seed: deriveSeed(resolvedSeed, line.key),
-                          sketchColor: ink,
-                          bowing: bowing ?? (line.header ? 1.4 : 2),
-                          strokeWidth: line.header ? (strokeWidth ?? 1.75) + 0.35 : strokeWidth ?? 1.35,
-                          inset: 6
-                        }
-                      )
-                    },
-                    line.key
-                  );
-                })
+                children: lines.map((line) => /* @__PURE__ */ jsx(
+                  TableRule,
+                  {
+                    line,
+                    headerUnderline,
+                    roughness,
+                    resolvedSeed,
+                    ink,
+                    bowing,
+                    strokeWidth,
+                    shouldAnimate
+                  },
+                  line.key
+                ))
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1939,8 +2422,7 @@ var Table = forwardRef(function Table2({
               {
                 ref: (node) => {
                   tableRef.current = node;
-                  if (typeof ref === "function") ref(node);
-                  else if (ref) ref.current = node;
+                  assignRef(ref, node);
                 },
                 style: {
                   width: "100%",
@@ -2102,84 +2584,89 @@ function Toast({
   sketchColor,
   bowing,
   fillStyle,
-  strokeWidth
+  strokeWidth,
+  animate
 }) {
   const position = useContext(ToastPositionContext);
   const fromTop = position.startsWith("top");
-  const [entered, setEntered] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const shouldAnimate = useAnimate(animate);
   const color = sketchColor ?? VARIANT_COLOR2[variant];
-  const visible = open ?? true;
-  useLayoutEffect(() => {
-    if (!visible) {
-      setEntered(false);
-      return;
-    }
-    setEntered(false);
-    const frame = requestAnimationFrame(() => {
-      requestAnimationFrame(() => setEntered(true));
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [visible]);
-  return /* @__PURE__ */ jsx(
+  const offset = fromTop ? -14 : 14;
+  function handleOpenChange(next) {
+    setUncontrolled(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsx(
     ToastPrimitive.Root,
     {
-      open,
-      defaultOpen,
-      onOpenChange,
+      open: isOpen,
+      onOpenChange: handleOpenChange,
       duration,
-      className: cn(className),
-      style: {
-        transform: entered ? "translateY(0)" : `translateY(${fromTop ? "-10px" : "10px"})`,
-        opacity: entered ? 1 : 0,
-        transition: "transform 200ms ease, opacity 200ms ease",
-        outline: "none",
-        ...style
-      },
-      children: /* @__PURE__ */ jsxs(
-        SketchBox,
+      forceMount: true,
+      asChild: true,
+      children: /* @__PURE__ */ jsx(
+        motion.li,
         {
-          roughness,
-          seed,
-          sketchColor: color,
-          bowing,
-          fillStyle: fillStyle ?? "hachure",
-          fill: VARIANT_FILL2[variant],
-          strokeWidth: strokeWidth ?? 1.7,
-          shadow: true,
-          contentStyle: { padding: "12px 16px" },
-          children: [
-            title ? /* @__PURE__ */ jsx(
-              ToastPrimitive.Title,
-              {
-                style: {
-                  margin: 0,
-                  fontWeight: doodleUiFontWeight(700),
-                  fontSize: 15,
-                  fontFamily: doodleUiFontFamily,
-                  color,
-                  marginBottom: children ? 4 : 0
-                },
-                children: title
-              }
-            ) : null,
-            children ? /* @__PURE__ */ jsx(
-              ToastPrimitive.Description,
-              {
-                style: {
-                  margin: 0,
-                  fontSize: 14,
-                  lineHeight: 1.5,
-                  fontFamily: doodleUiFontFamily,
-                  color: SKETCH_COLORS.ink
-                },
-                children
-              }
-            ) : null
-          ]
+          className: cn(className),
+          initial: shouldAnimate ? { y: offset, opacity: 0, rotate: -1.4 } : false,
+          animate: shouldAnimate ? { y: 0, opacity: 1, rotate: [-1.2, 0.9, -0.35, 0] } : { y: 0, opacity: 1, rotate: 0 },
+          exit: shouldAnimate ? { y: offset, opacity: 0, rotate: 1.2 } : { opacity: 0 },
+          transition: shouldAnimate ? { duration: 0.38, ease: "easeOut" } : { duration: 0 },
+          style: {
+            listStyle: "none",
+            outline: "none",
+            ...style
+          },
+          children: /* @__PURE__ */ jsxs(
+            SketchBox,
+            {
+              roughness,
+              seed,
+              sketchColor: color,
+              bowing,
+              fillStyle: fillStyle ?? "hachure",
+              fill: VARIANT_FILL2[variant],
+              strokeWidth: strokeWidth ?? 1.7,
+              shadow: true,
+              animate,
+              contentStyle: { padding: "12px 16px" },
+              children: [
+                title ? /* @__PURE__ */ jsx(
+                  ToastPrimitive.Title,
+                  {
+                    style: {
+                      margin: 0,
+                      fontWeight: doodleUiFontWeight(700),
+                      fontSize: 15,
+                      fontFamily: doodleUiFontFamily,
+                      color,
+                      marginBottom: children ? 4 : 0
+                    },
+                    children: title
+                  }
+                ) : null,
+                children ? /* @__PURE__ */ jsx(
+                  ToastPrimitive.Description,
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      fontFamily: doodleUiFontFamily,
+                      color: SKETCH_COLORS.ink
+                    },
+                    children
+                  }
+                ) : null
+              ]
+            }
+          )
         }
       )
     }
-  );
+  ) : null });
 }
 var ToastRoot = ToastPrimitive.Root;
 var ToastTitle = ToastPrimitive.Title;
@@ -3211,6 +3698,6 @@ var Stepper = forwardRef(
   }
 );
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, Divider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Pagination, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SketchBox, SketchSeedProvider, Slider, Stepper, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useResolvedSeed, useSketchSeed };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, Badge, Breadcrumb, BreadcrumbItem, Button, Card, Checkbox, DEFAULT_BOWING, DEFAULT_INK, DEFAULT_ROUGHNESS, DEFAULT_STROKE_WIDTH, DRAW_IN_ALERT_MS, DRAW_IN_DURATION_MS, DRAW_IN_MARK_MS, DRAW_IN_TOOLTIP_MS, Divider, DoodleUIProvider, Input, Modal, ModalClose, ModalDescription, ModalRoot, ModalTitle, ModalTrigger, Pagination, Progress, Radio, RadioGroup, RoughSvg, SKETCH_COLORS, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Skeleton, SketchBox, SketchSeedProvider, Slider, Stepper, Switch, TABLE_STAGGER_MS, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Tabs, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport, Tooltip, TooltipProvider, deriveSeed, toRoughOptions, useAnimate, useDoodleUI, useDrawIn, useResolvedSeed, useSketchSeed };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map