@sableui/react 0.13.2 → 0.15.0

package/dist/index.js

@@ -43,6 +43,8 @@ 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/like-button/index.js";
 export * from "./components/card/index.js";
 export * from "./components/caret-menu/index.js";
 export * from "./components/badge/index.js";
@@ -63,10 +65,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";
@@ -160,6 +164,7 @@ export * from "./components/chat-composer/index.js";
 export * from "./components/settings-menu/index.js";
 export * from "./components/message/index.js";
 export * from "./components/bubble/index.js";
+export * from "./components/reaction-picker/index.js";
 export * from "./components/attachment/index.js";
 export * from "./components/marker/index.js";
 import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier } from "./lib/density.js";
@@ -172,7 +177,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.15.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,8 +25,11 @@ var COMPONENT_TAXONOMY = {
      what it is. Copying is `useCopy` on a Button, not a component. */
   Button: ["Actions", "either"],
   ButtonGroup: ["Actions", "either"],
+  ConfirmButton: ["Actions", "either"],
+  LikeButton: ["Actions", "either"],
   Menubar: ["Actions", "either"],
   OverflowMenu: ["Actions", "either"],
+  ReactionPicker: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
   /* ── Forms ────────────────────────────────────────────────────────────────
      Typing or entering a value, and the structure a form is built from.
@@ -136,6 +139,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 +188,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/Burst.js

@@ -0,0 +1,79 @@
+"use client";
+
+// src/motion/Burst.tsx
+import { useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { motionAttribute, useMotionLevel } from "./MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PALETTE = ["pink", "purple", "blue", "orange"];
+function Burst({
+  trigger,
+  palette = DEFAULT_PALETTE,
+  count = 7,
+  particle,
+  playOnMount = false,
+  className,
+  motion
+}) {
+  const { expressive } = useMotionLevel(motion);
+  const [last, setLast] = useState(trigger);
+  const [shot, setShot] = useState(playOnMount ? 1 : 0);
+  if (!Object.is(trigger, last)) {
+    setLast(trigger);
+    setShot((n) => n + 1);
+  }
+  const [done, setDone] = useState(0);
+  const landed = useRef({ shot: 0, pieces: 0 });
+  if (shot === 0 || shot === done || !expressive || palette.length === 0) return null;
+  const places = Math.max(1, Math.round(count));
+  const onAnimationEnd = (event) => {
+    if (!event.target.classList.contains("sable-burst-dot")) return;
+    if (landed.current.shot !== shot) landed.current = { shot, pieces: 0 };
+    landed.current.pieces += 1;
+    if (landed.current.pieces >= places * 2) setDone(shot);
+  };
+  const step = 360 / places;
+  const scale = particle === void 0 ? 1 : 2.5;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-motion": motionAttribute(motion),
+      className: cn("sable-burst [--burst-size:2.25em]", className),
+      onAnimationEnd,
+      children: [
+        particle === void 0 ? /* @__PURE__ */ jsx("span", { className: "sable-burst-ring", "data-palette": palette[0] }) : null,
+        Array.from({ length: places }, (_, i) => {
+          const angle = i * step - 90;
+          return [
+            { angle, reach: 0.95, size: `calc(var(--burst-size) * ${0.14 * scale})`, family: palette[i % palette.length] },
+            {
+              angle: angle + step / 3,
+              reach: 0.75,
+              size: `calc(var(--burst-size) * ${0.1 * scale})`,
+              family: palette[(i + 1) % palette.length]
+            }
+          ].map((dot, j) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sable-burst-dot",
+              "data-palette": particle === void 0 ? dot.family : void 0,
+              "data-particle": particle === void 0 ? void 0 : "",
+              style: {
+                "--burst-dot-angle": `${dot.angle}deg`,
+                "--burst-dot-reach": dot.reach,
+                "--burst-dot-size": dot.size
+              },
+              children: particle
+            },
+            `${i}-${j}`
+          ));
+        })
+      ]
+    },
+    shot
+  );
+}
+export {
+  Burst
+};

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,24 +1,39 @@
 // 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";
 import { Presence } from "./Presence.js";
+import { Burst } from "./Burst.js";
 import {
   startViewTransition,
   supportsViewTransitions,
   ViewTransitionName
 } from "./viewTransition.js";
 export {
+  Burst,
   MotionProvider,
+  MotionScope,
   Presence,
   Reveal,
   TextReveal,
   ViewTransitionName,
+  motionAttribute,
   startViewTransition,
   supportsViewTransitions,
+  useAutoSize,
   useInView,
   useMotion,
-  useReducedMotion
+  useMotionLevel,
+  useReducedMotion,
+  useShake
 };