@sableui/react 0.13.2 → 0.14.0

package/dist/index.js

@@ -43,6 +43,7 @@ export * from "./icon/index.js";
 export * from "./motion/index.js";
 export * from "./components/button/index.js";
 export * from "./components/button-group/index.js";
+export * from "./components/confirm-button/index.js";
 export * from "./components/card/index.js";
 export * from "./components/caret-menu/index.js";
 export * from "./components/badge/index.js";
@@ -63,10 +64,12 @@ export * from "./components/avatar/index.js";
 export * from "./components/skeleton/index.js";
 export * from "./components/spinner/index.js";
 export * from "./components/thinking-orb/index.js";
+export * from "./components/tool-call/index.js";
 export * from "./components/streaming-text/index.js";
 export * from "./components/gliding-highlight/index.js";
 export * from "./components/progress/index.js";
 export * from "./components/meter/index.js";
+export * from "./components/number-ticker/index.js";
 export * from "./components/segmented-bar/index.js";
 export * from "./components/area-chart/index.js";
 export * from "./components/bar-chart/index.js";
@@ -172,7 +175,7 @@ import {
 } from "./lib/use-caret-trigger.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.13.2";
+var SABLE_UI_VERSION = "0.14.0";
 export {
   ART_TOKENS,
   CHART_SERIES_COUNT,

package/dist/lib/chart/cartesian.js

@@ -3,10 +3,11 @@
 // src/lib/chart/cartesian.tsx
 import { useId } from "react";
 import { cn } from "../cn.js";
-import { ChartFrame } from "./chart-frame.js";
+import { ChartFrame, chartMotion } from "./chart-frame.js";
 import { ChartLegend } from "./chart-legend.js";
 import { ChartTooltipContent } from "./chart-tooltip.js";
 import { approxTextWidth, categoryText, chartFormatters } from "./format.js";
+import { FILL_HOVER, dimmed } from "./dim.js";
 import { areaPath, linePath, rectPath } from "./geometry.js";
 import { GLIDE, barTransition, drawTransition, morphTransition, pathStyle, riseTransition, stagger } from "./motion.js";
 import { bandScale, extent, linearScale, niceTicks, pointScale, stack } from "./scale.js";
@@ -34,7 +35,8 @@ function CartesianChart(props) {
     locale,
     tooltip = true,
     legend,
-    animate = true,
+    motion,
+    animate,
     activeIndex,
     defaultActiveIndex,
     onActiveIndexChange,
@@ -150,7 +152,7 @@ function CartesianChart(props) {
       className,
       count: n,
       interactive: tooltip !== false,
-      animate,
+      motion: chartMotion(motion, animate),
       activeIndex,
       defaultActiveIndex,
       onActiveIndexChange,
@@ -232,15 +234,12 @@ function CartesianChart(props) {
                   "path",
                   {
                     d,
-                    className: cn(
-                      horizontal ? "[[data-reveal=out]_&]:scale-x-0" : "[[data-reveal=out]_&]:scale-y-0",
-                      dim && "opacity-40"
-                    ),
+                    className: horizontal ? "[[data-reveal=out]_&]:scale-x-0" : "[[data-reveal=out]_&]:scale-y-0",
                     style: {
                       ...pathStyle(d),
-                      fill: colorAt(k, i),
+                      fill: dim ? dimmed(colorAt(k, i), 38) : colorAt(k, i),
                       transformOrigin: origin,
-                      transition: barTransition(stagger(i))
+                      transition: `${barTransition(stagger(i))}, ${FILL_HOVER}`
                     }
                   },
                   `b${k}-${i}`
@@ -329,7 +328,7 @@ function CartesianChart(props) {
                         r: 4,
                         strokeWidth: 2,
                         className: cn(SURFACE, "[[data-reveal=out]_&]:opacity-0"),
-                        style: { fill: colorBy === "index" ? colorAt(k, i) : s.colorValue, transition: morphTransition(), transitionDelay: `calc(${300 + i * 25}ms * var(--motion-scale, 1))` }
+                        style: { fill: colorBy === "index" ? colorAt(k, i) : s.colorValue, transition: morphTransition(), transitionDelay: `calc(${300 + i * 25}ms * var(--motion-scale, 1) * var(--motion-expressive, 1))` }
                       },
                       `p${k}-${i}`
                     )

package/dist/lib/chart/chart-center.js

@@ -0,0 +1,30 @@
+"use client";
+
+// src/lib/chart/chart-center.tsx
+import { NumberTicker } from "../../components/number-ticker/number-ticker.js";
+import { cn } from "../cn.js";
+import { centerValueFormat } from "./format.js";
+import { morphTransition } from "./motion.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChartCenter({ center, x, y, placement = "middle", locale, motion }) {
+  const value = typeof center.value === "number" ? /* @__PURE__ */ jsx(NumberTicker, { value: center.value, format: centerValueFormat(center.value), locales: locale, motion, className: "text-heading-2 text-foreground" }) : /* @__PURE__ */ jsx("span", { className: "text-heading-2 text-foreground tabular-nums", children: center.value });
+  const middle = placement === "middle";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute whitespace-nowrap [[data-reveal=out]_&]:opacity-0",
+      style: { left: x, top: y, transform: middle ? "translate(-50%, -50%)" : "translate(-50%, -100%)", transition: morphTransition() },
+      children: /* @__PURE__ */ jsxs("div", { className: cn("relative flex flex-col items-center", !middle && center.label && "pb-4"), children: [
+        value,
+        center.label ? middle ? (
+          // Out of flow, so the number alone is centred; centred by flex so a
+          // caption wider than the number overhangs it evenly on both sides.
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-full mt-1 flex justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: center.label }) })
+        ) : /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: center.label }) : null
+      ] })
+    }
+  );
+}
+export {
+  ChartCenter
+};

package/dist/lib/chart/chart-frame.js

@@ -2,16 +2,19 @@
 
 // src/lib/chart/chart-frame.tsx
 import { useEffect, useId, useRef, useState } from "react";
-import { useMotion } from "../../motion/MotionProvider.js";
+import { motionAttribute, useMotionLevel } from "../../motion/MotionProvider.js";
 import { useArrival } from "./use-arrival.js";
 import { cn } from "../cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+function chartMotion(motion, animate) {
+  return motion ?? (animate === false ? "subtle" : void 0);
+}
 function ChartFrame({
   label,
   className,
   count,
   interactive,
-  animate,
+  motion,
   activeIndex: controlled,
   defaultActiveIndex = null,
   onActiveIndexChange,
@@ -20,13 +23,14 @@ function ChartFrame({
   describe,
   legend,
   table,
-  children
+  children,
+  overlay
 }) {
-  const { enabled } = useMotion();
+  const { expressive } = useMotionLevel(motion);
   const [viewRef, inView] = useArrival();
   const plotRef = useRef(null);
   const [size, setSize] = useState(null);
-  const [shown, setShown] = useState(!animate);
+  const [shown, setShown] = useState(motion === "off" || motion === "subtle");
   const [uncontrolled, setUncontrolled] = useState(defaultActiveIndex);
   const [viaKeyboard, setViaKeyboard] = useState(false);
   const appeared = useRef(true);
@@ -54,7 +58,7 @@ function ChartFrame({
   }, []);
   useEffect(() => {
     if (shown) return;
-    if (!animate || !enabled) {
+    if (!expressive) {
       setShown(true);
       return;
     }
@@ -67,7 +71,7 @@ function ChartFrame({
       cancelAnimationFrame(outer);
       cancelAnimationFrame(inner);
     };
-  }, [shown, animate, enabled, size, inView]);
+  }, [shown, expressive, size, inView]);
   const local = (event) => {
     const r = event.currentTarget.getBoundingClientRect();
     return { x: event.clientX - r.left, y: event.clientY - r.top };
@@ -98,6 +102,7 @@ function ChartFrame({
     {
       ref: viewRef,
       "data-reveal": shown ? "in" : "out",
+      "data-motion": motionAttribute(motion),
       className: cn("m-0 flex h-60 w-full min-w-0 flex-col gap-3", className),
       children: [
         /* @__PURE__ */ jsxs(
@@ -129,6 +134,7 @@ function ChartFrame({
                   children: children({ size, activeIndex: interactive ? active : null })
                 }
               ) : null,
+              overlay && size && size.width > 0 && size.height > 0 ? /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0", children: overlay({ size, activeIndex: interactive ? active : null }) }) : null,
               placement ? /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -159,5 +165,6 @@ function ChartFrame({
   );
 }
 export {
-  ChartFrame
+  ChartFrame,
+  chartMotion
 };

package/dist/lib/chart/dim.js

@@ -0,0 +1,13 @@
+// src/lib/chart/dim.ts
+import { HOVER } from "./motion.js";
+var SURFACE = "var(--sable-surface-bg, var(--background))";
+function dimmed(color, keep) {
+  return `color-mix(in oklab, ${color} ${keep}%, ${SURFACE})`;
+}
+var FILL_HOVER = `fill ${HOVER}`;
+var STROKE_HOVER = `stroke ${HOVER}`;
+export {
+  FILL_HOVER,
+  STROKE_HOVER,
+  dimmed
+};

package/dist/lib/chart/format.js

@@ -14,11 +14,17 @@ function approxTextWidth(text) {
 }
 function centerValueText(value, locale) {
   if (typeof value === "string") return value;
-  return Math.abs(value) < 1e4 ? new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value) : new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(value);
+  return new Intl.NumberFormat(locale, centerValueFormat(value)).format(value);
 }
+function centerValueFormat(value) {
+  return Math.abs(value) < 1e4 ? FULL_CENTER : COMPACT_CENTER;
+}
+var FULL_CENTER = { maximumFractionDigits: 1 };
+var COMPACT_CENTER = { notation: "compact", maximumFractionDigits: 1 };
 export {
   approxTextWidth,
   categoryText,
+  centerValueFormat,
   centerValueText,
   chartFormatters
 };

package/dist/lib/chart/motion.js

@@ -1,14 +1,15 @@
 // src/lib/chart/motion.ts
-var DRAW_DURATION = "calc(var(--motion-duration-slower) * 1.8)";
-var RISE = "var(--motion-duration-slower) var(--motion-ease-emphasized)";
-var MORPH = "var(--motion-duration-slow) var(--motion-ease-standard)";
+var expressive = (token, factor = 1) => `calc(var(${token}) * ${factor} * var(--motion-expressive, 1))`;
+var DRAW_DURATION = expressive("--motion-duration-slower", 1.8);
+var RISE = `${expressive("--motion-duration-slower")} var(--motion-ease-emphasized)`;
+var MORPH = `${expressive("--motion-duration-slow")} var(--motion-ease-standard)`;
 var HOVER = "var(--motion-duration-fast) var(--motion-ease-standard)";
 var GLIDE = `transform ${HOVER}, opacity ${HOVER}, cx ${HOVER}, cy ${HOVER}`;
 function barTransition(delay = "0ms") {
   return `scale ${RISE} ${delay}, opacity ${HOVER}, d ${MORPH}`;
 }
 function stagger(index, stepMs = 35) {
-  return `calc(${Math.min(index, 24) * stepMs}ms * var(--motion-scale, 1))`;
+  return `calc(${Math.min(index, 24) * stepMs}ms * var(--motion-scale, 1) * var(--motion-expressive, 1))`;
 }
 function drawTransition(delay = "0ms") {
   return `stroke-dashoffset ${DRAW_DURATION} var(--motion-ease-decelerate) ${delay}, d ${MORPH}, opacity ${HOVER}`;
@@ -25,6 +26,7 @@ function pathStyle(d) {
 export {
   DRAW_DURATION,
   GLIDE,
+  HOVER,
   barTransition,
   drawTransition,
   morphTransition,

package/dist/lib/highlight-glide.js

@@ -3,17 +3,26 @@
 // src/lib/highlight-glide.tsx
 import { useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
+var expressive = (token) => `calc(var(${token}) * var(--motion-expressive, 1))`;
+function HighlightGlide({
+  className = "rounded-popup-item bg-accent",
+  follow = "data-highlighted",
+  timing = "highlight"
+}) {
   const ref = useRef(null);
   useLayoutEffect(() => {
     const glide = ref.current;
     const host = glide?.parentElement;
     if (!glide || !host) return;
     host.setAttribute("data-glide", "");
+    const selection = timing === "selection";
     let shown = false;
+    let placed = false;
+    let lastRow = null;
+    let lastTarget = "";
     let frame = 0;
     const place = () => {
-      const row = host.querySelector("[data-highlighted]:not([data-highlight-glide])");
+      const row = host.querySelector(`[${follow}]:not([data-highlight-glide])`);
       if (!row) {
         shown = false;
         glide.style.opacity = "0";
@@ -21,20 +30,59 @@ function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
       }
       const hostBox = host.getBoundingClientRect();
       const rowBox = row.getBoundingClientRect();
-      const scale = host.offsetWidth > 0 ? hostBox.width / host.offsetWidth || 1 : 1;
+      const layoutWidth = selection ? Number.parseFloat(getComputedStyle(host).width) || host.offsetWidth : host.offsetWidth;
+      const scale = layoutWidth > 0 ? hostBox.width / layoutWidth || 1 : 1;
       const x = (rowBox.left - hostBox.left) / scale + host.scrollLeft - host.clientLeft;
       const y = (rowBox.top - hostBox.top) / scale + host.scrollTop - host.clientTop;
       const geometry = (s) => {
         s.width = `${rowBox.width / scale}px`;
         s.height = `${rowBox.height / scale}px`;
-        s.transform = `translate(${x}px, ${y}px)`;
+        if (selection) s.translate = `${x}px ${y}px`;
+        else s.transform = `translate(${x}px, ${y}px)`;
       };
+      if (selection) {
+        const target = `${x},${y},${rowBox.width / scale},${rowBox.height / scale}`;
+        const sameRow = placed && shown && row === lastRow;
+        lastRow = row;
+        const moved = target !== lastTarget;
+        lastTarget = target;
+        if (sameRow) {
+          if (moved) {
+            glide.style.transitionProperty = "none";
+            geometry(glide.style);
+            void glide.offsetWidth;
+            glide.style.transitionProperty = "";
+          }
+          return;
+        }
+        if (!placed) {
+          glide.style.transitionProperty = "none";
+          geometry(glide.style);
+          glide.style.opacity = "1";
+          void glide.offsetWidth;
+          glide.style.transitionProperty = "";
+          placed = true;
+          shown = true;
+          return;
+        }
+        if (!shown) {
+          glide.style.transitionProperty = "opacity";
+          geometry(glide.style);
+          void glide.offsetWidth;
+          glide.style.transitionProperty = "";
+          shown = true;
+        } else {
+          geometry(glide.style);
+        }
+        glide.style.opacity = "1";
+        return;
+      }
       if (!shown) {
         glide.style.transitionProperty = "opacity";
         geometry(glide.style);
         cancelAnimationFrame(frame);
         frame = requestAnimationFrame(() => {
-          glide.style.transitionProperty = "transform, width, height, opacity";
+          glide.style.transitionProperty = "opacity, transform, width, height";
         });
         shown = true;
       } else {
@@ -44,7 +92,7 @@ function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
     };
     place();
     const mutations = new MutationObserver(place);
-    mutations.observe(host, { attributes: true, attributeFilter: ["data-highlighted"], subtree: true, childList: true });
+    mutations.observe(host, { attributes: true, attributeFilter: [follow], subtree: true, childList: true });
     const resize = new ResizeObserver(place);
     resize.observe(host);
     host.addEventListener("scroll", place, true);
@@ -59,7 +107,7 @@ function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
       host.removeEventListener("animationend", place);
       host.removeAttribute("data-glide");
     };
-  }, []);
+  }, [follow, timing]);
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -72,9 +120,19 @@ function HighlightGlide({ className = "rounded-popup-item bg-accent" }) {
         // getBoundingClientRect, which is physical in RTL too.
         left: 0,
         opacity: 0,
-        transitionProperty: "opacity",
-        transitionDuration: "var(--motion-duration-instant)",
-        transitionTimingFunction: "var(--motion-ease-standard)"
+        ...timing === "highlight" && {
+          transitionProperty: "opacity",
+          // One duration per property in "opacity, transform, width, height"
+          // order. The fade that shows or hides the highlight is essential;
+          // the travel is expressive.
+          transitionDuration: [
+            "var(--motion-duration-instant)",
+            expressive("--motion-duration-instant"),
+            expressive("--motion-duration-instant"),
+            expressive("--motion-duration-instant")
+          ].join(", "),
+          transitionTimingFunction: "var(--motion-ease-standard)"
+        }
       }
     }
   );

package/dist/lib/taxonomy.js

@@ -25,6 +25,7 @@ var COMPONENT_TAXONOMY = {
      what it is. Copying is `useCopy` on a Button, not a component. */
   Button: ["Actions", "either"],
   ButtonGroup: ["Actions", "either"],
+  ConfirmButton: ["Actions", "either"],
   Menubar: ["Actions", "either"],
   OverflowMenu: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
@@ -136,6 +137,7 @@ var COMPONENT_TAXONOMY = {
   Entity: ["Data display", "either"],
   GlidingHighlight: ["Data display", "either"],
   Meter: ["Data display", "either"],
+  NumberTicker: ["Data display", "either"],
   RelativeTime: ["Data display", "either"],
   SegmentedBar: ["Data display", "either"],
   Table: ["Data display", "either"],
@@ -184,6 +186,7 @@ var COMPONENT_TAXONOMY = {
   MessageScroller: ["Chat & AI", "either"],
   StreamingText: ["Chat & AI", "either"],
   ThinkingOrb: ["Chat & AI", "either"],
+  ToolCall: ["Chat & AI", "either"],
   /* ── Media & mockups ──────────────────────────────────────────────────────
      Presenting images and video: players, galleries, scrolling strips, and the
      device frames a product image sits in. `Video` was filed as a mockup; it is

package/dist/motion/MotionProvider.js

@@ -17,6 +17,9 @@ function resolveEnabled(policy, prefersReducedMotion) {
   if (policy === "full") return true;
   return !prefersReducedMotion;
 }
+function resolveExpressive(policy, prefersReducedMotion) {
+  return policy !== "subtle" && resolveEnabled(policy, prefersReducedMotion);
+}
 function MotionProvider({
   children,
   defaultPolicy = "system",
@@ -51,12 +54,47 @@ function MotionProvider({
       policy,
       setPolicy,
       prefersReducedMotion,
-      enabled: resolveEnabled(policy, prefersReducedMotion)
+      enabled: resolveEnabled(policy, prefersReducedMotion),
+      expressive: resolveExpressive(policy, prefersReducedMotion)
     }),
     [policy, setPolicy, prefersReducedMotion]
   );
   return /* @__PURE__ */ jsx(MotionContext.Provider, { value, children });
 }
+var LEVEL_RANK = { off: 0, subtle: 1, full: 2 };
+function lowerLevel(a, b) {
+  return LEVEL_RANK[a] <= LEVEL_RANK[b] ? a : b;
+}
+function contextLevel(ctx) {
+  if (!ctx.enabled) return "off";
+  return ctx.expressive ? "full" : "subtle";
+}
+function motionAttribute(level) {
+  return level === void 0 || level === "full" ? void 0 : level;
+}
+function useMotionLevel(level) {
+  const ctx = useMotion();
+  const resolved = lowerLevel(contextLevel(ctx), level ?? "full");
+  return {
+    level: resolved,
+    enabled: resolved !== "off",
+    expressive: resolved === "full",
+    attribute: motionAttribute(level)
+  };
+}
+function MotionScope({ children, level }) {
+  const parent = useMotion();
+  const resolved = lowerLevel(contextLevel(parent), level);
+  const value = useMemo(
+    () => ({
+      ...parent,
+      enabled: resolved !== "off",
+      expressive: resolved === "full"
+    }),
+    [parent, resolved]
+  );
+  return /* @__PURE__ */ jsx(MotionContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { "data-motion": level, style: { display: "contents" }, children }) });
+}
 function useMotion() {
   const ctx = useContext(MotionContext);
   const prefersReducedMotion = useReducedMotion();
@@ -66,10 +104,14 @@ function useMotion() {
     setPolicy: () => {
     },
     prefersReducedMotion,
-    enabled: resolveEnabled("system", prefersReducedMotion)
+    enabled: resolveEnabled("system", prefersReducedMotion),
+    expressive: resolveExpressive("system", prefersReducedMotion)
   };
 }
 export {
   MotionProvider,
-  useMotion
+  MotionScope,
+  motionAttribute,
+  useMotion,
+  useMotionLevel
 };

package/dist/motion/Reveal.js

@@ -18,7 +18,7 @@ function Reveal({
   ...props
 }) {
   const Comp = as ?? "div";
-  const { enabled } = useMotion();
+  const { expressive: enabled } = useMotion();
   const { ref, inView } = useInView({ once, amount, rootMargin });
   const shown = inView && when || !enabled;
   return /* @__PURE__ */ jsx(

package/dist/motion/TextReveal.js

@@ -18,7 +18,7 @@ function TextReveal({
   ...props
 }) {
   const Comp = as ?? "span";
-  const { enabled } = useMotion();
+  const { expressive: enabled } = useMotion();
   const { ref, inView } = useInView({ once, amount, rootMargin });
   const shown = inView && when || !enabled;
   const units = split === "char" ? typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(text), ({ segment }) => segment) : Array.from(text) : text.split(/(\s+)/).filter(Boolean);

package/dist/motion/index.js

@@ -1,6 +1,14 @@
 // src/motion/index.ts
-import { MotionProvider, useMotion } from "./MotionProvider.js";
+import {
+  MotionProvider,
+  MotionScope,
+  motionAttribute,
+  useMotion,
+  useMotionLevel
+} from "./MotionProvider.js";
 import { useReducedMotion } from "./useReducedMotion.js";
+import { useShake } from "./useShake.js";
+import { useAutoSize } from "./useAutoSize.js";
 import { useInView } from "./useInView.js";
 import { Reveal } from "./Reveal.js";
 import { TextReveal } from "./TextReveal.js";
@@ -12,13 +20,18 @@ import {
 } from "./viewTransition.js";
 export {
   MotionProvider,
+  MotionScope,
   Presence,
   Reveal,
   TextReveal,
   ViewTransitionName,
+  motionAttribute,
   startViewTransition,
   supportsViewTransitions,
+  useAutoSize,
   useInView,
   useMotion,
-  useReducedMotion
+  useMotionLevel,
+  useReducedMotion,
+  useShake
 };

package/dist/motion/useAutoSize.js

@@ -0,0 +1,42 @@
+"use client";
+
+// src/motion/useAutoSize.ts
+import { useLayoutEffect, useRef } from "react";
+function useAutoSize({ axis = "width", enabled = true } = {}) {
+  const outerRef = useRef(null);
+  const innerRef = useRef(null);
+  useLayoutEffect(() => {
+    const outer = outerRef.current;
+    const inner = innerRef.current;
+    if (!enabled || !outer || !inner || typeof ResizeObserver === "undefined") return;
+    let first = true;
+    const apply = () => {
+      const style = getComputedStyle(outer);
+      const px = (value) => Number.parseFloat(value) || 0;
+      const extraX = px(style.paddingLeft) + px(style.paddingRight) + px(style.borderLeftWidth) + px(style.borderRightWidth);
+      const extraY = px(style.paddingTop) + px(style.paddingBottom) + px(style.borderTopWidth) + px(style.borderBottomWidth);
+      const width = inner.offsetWidth || inner.getBoundingClientRect().width;
+      const height = inner.offsetHeight || inner.getBoundingClientRect().height;
+      if (first) outer.style.transition = "none";
+      if (axis !== "height") outer.style.width = `${width + extraX}px`;
+      if (axis !== "width") outer.style.height = `${height + extraY}px`;
+      if (first) {
+        void outer.offsetWidth;
+        outer.style.transition = "";
+        first = false;
+      }
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(inner);
+    return () => {
+      observer.disconnect();
+      outer.style.width = "";
+      outer.style.height = "";
+    };
+  }, [axis, enabled]);
+  return { outerRef, innerRef };
+}
+export {
+  useAutoSize
+};

package/dist/motion/useShake.js

@@ -0,0 +1,25 @@
+"use client";
+
+// src/motion/useShake.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useShake() {
+  const [shaking, setShaking] = useState(false);
+  const frame = useRef(0);
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  const shake = useCallback(() => {
+    cancelAnimationFrame(frame.current);
+    setShaking(false);
+    frame.current = requestAnimationFrame(() => {
+      frame.current = requestAnimationFrame(() => setShaking(true));
+    });
+  }, []);
+  const onAnimationEnd = useCallback((event) => {
+    if (event.target === event.currentTarget && event.animationName === "sable-shake") {
+      setShaking(false);
+    }
+  }, []);
+  return { shake, shakeProps: { "data-shake": shaking ? "" : void 0, onAnimationEnd } };
+}
+export {
+  useShake
+};