@sableui/react 0.13.2 → 0.15.0

package/dist/components/tree/tree.js

@@ -15,6 +15,7 @@ import {
 import { Icon } from "../../icon/index.js";
 import { cn } from "../../lib/cn.js";
 import { hitTargetMin } from "../../lib/hit-target.js";
+import { motionAttribute, useMotionLevel } from "../../motion/MotionProvider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function treeIndent(depth) {
   return `calc(var(--tree-rail) + var(--tree-indent) * ${Math.max(0, depth)})`;
@@ -43,8 +44,39 @@ function useTreeItem(idProp) {
     claimFocus: () => ctx?.setFocusedId(id)
   };
 }
+var ARRIVAL_CAP = 10;
+var ARRIVAL_STEP_MS = 18;
+function createArrival() {
+  const seen = /* @__PURE__ */ new Map();
+  return {
+    index(id) {
+      let at = seen.get(id);
+      if (at === void 0) {
+        at = seen.size;
+        seen.set(id, at);
+      }
+      return at;
+    }
+  };
+}
+var TreeArrivalContext = createContext(null);
+var TreeMotionContext = createContext(void 0);
+function arrivalProps(index) {
+  return {
+    className: "motion-arrive",
+    style: { "--motion-arrive-delay": `${Math.min(index, ARRIVAL_CAP) * ARRIVAL_STEP_MS}ms` }
+  };
+}
+function useArrival(id) {
+  const arrival = useContext(TreeArrivalContext);
+  const [props, setProps] = useState(() => arrival ? arrivalProps(arrival.index(id)) : {});
+  const onAnimationEnd = useCallback((event) => {
+    if (event.target === event.currentTarget && event.animationName === "sable-arrive") setProps({});
+  }, []);
+  return { ...props, onAnimationEnd };
+}
 var ITEM_FOCUS = "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring";
-function Tree({ className, children, onKeyDown, ...props }) {
+function Tree({ className, children, onKeyDown, motion, ...props }) {
   const [focusedId, setFocusedId] = useState(null);
   const rootRef = useRef(null);
   const items = () => Array.from(rootRef.current?.querySelectorAll(ITEM) ?? []).filter(
@@ -120,17 +152,18 @@ function Tree({ className, children, onKeyDown, ...props }) {
         break;
     }
   };
-  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TreeContext.Provider, { value: context, children: /* @__PURE__ */ jsx(TreeMotionContext.Provider, { value: motion, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: rootRef,
       role: "tree",
+      "data-motion": motionAttribute(motion),
       onKeyDown: handleKeyDown,
       className: cn("flex flex-col py-1", className),
       ...props,
       children
     }
-  ) });
+  ) }) });
 }
 Tree.displayName = "Tree";
 function TreeSection({ title, hint, action, className, children, ...props }) {
@@ -199,10 +232,26 @@ function TreeRow({
   };
   const item = useTreeItem(idProp);
   const nameId = useId();
+  const arrivalOwn = useArrival(item.id);
+  const inheritedArrival = useContext(TreeArrivalContext);
+  const motionLevel = useMotionLevel(useContext(TreeMotionContext));
+  const [seenExpanded, setSeenExpanded] = useState(expanded);
+  const [arrival, setArrival] = useState(null);
+  if (seenExpanded !== expanded) {
+    setSeenExpanded(expanded);
+    setArrival(expanded && subtree !== void 0 && motionLevel.expressive ? createArrival() : null);
+  }
+  useEffect(() => {
+    if (arrival) setArrival(null);
+  }, [arrival]);
   const row = /* @__PURE__ */ jsxs(
     "div",
     {
       ...props,
+      onAnimationEnd: (event) => {
+        arrivalOwn.onAnimationEnd(event);
+        props.onAnimationEnd?.(event);
+      },
       id: item.inTree ? item.id : idProp,
       "data-selected": selected || void 0,
       role: item.inTree ? "treeitem" : void 0,
@@ -217,9 +266,10 @@ function TreeRow({
         onFocus?.(event);
       },
       onClick: onClick ?? (expandable ? () => setExpanded(!expanded) : void 0),
-      style: { paddingInlineStart: treeIndent(depth), ...style },
+      style: { paddingInlineStart: treeIndent(depth), ...arrivalOwn.style, ...style },
       className: cn(
         "group relative flex h-(--control-xs) items-center gap-1.5 rounded-xs pe-1 motion-interactive",
+        arrivalOwn.className,
         selected ? "bg-panel-raised" : "hover:bg-panel-raised/60",
         item.inTree && ITEM_FOCUS,
         dimmed && "opacity-50",
@@ -253,6 +303,8 @@ function TreeRow({
               // The drawn box stays on --tree-column because that column is also
               // the indent step; a bigger button moves every name in the tree.
               hitTargetMin,
+              // motion-interactive lists `rotate` (what -rotate-90 writes), so the
+              // chevron turns with the rows arriving under it instead of snapping.
               "rounded-xs text-muted-foreground motion-interactive hover:text-foreground",
               !expanded && "-rotate-90"
             ),
@@ -268,7 +320,7 @@ function TreeRow({
   if (subtree === void 0) return row;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     row,
-    expanded ? /* @__PURE__ */ jsx(TreeDepthContext.Provider, { value: depth + 1, children: subtree }) : null
+    expanded ? /* @__PURE__ */ jsx(TreeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(TreeArrivalContext.Provider, { value: arrival ?? inheritedArrival, children: subtree }) }) : null
   ] });
 }
 TreeRow.displayName = "TreeRow";
@@ -283,6 +335,7 @@ function TreeEmpty({
 }) {
   const inheritedDepth = useContext(TreeDepthContext);
   const depth = depthProp ?? inheritedDepth;
+  const arrival = useArrival(useId());
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -290,9 +343,15 @@ function TreeEmpty({
       className: cn(
         "flex flex-col",
         dropTarget && "mx-2 my-1 gap-1 rounded-sm border border-dashed border-hairline-strong p-2",
+        arrival.className,
         className
       ),
       ...props,
+      onAnimationEnd: (event) => {
+        arrival.onAnimationEnd(event);
+        props.onAnimationEnd?.(event);
+      },
+      style: arrival.style ? { ...arrival.style, ...props.style } : props.style,
       children: [
         /* @__PURE__ */ jsx(
           "p",
@@ -325,11 +384,16 @@ function TreeAddRow({
   const inheritedDepth = useContext(TreeDepthContext);
   const depth = depthProp ?? inheritedDepth;
   const item = useTreeItem(idProp);
+  const arrival = useArrival(item.id);
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       ...props,
+      onAnimationEnd: (event) => {
+        arrival.onAnimationEnd(event);
+        props.onAnimationEnd?.(event);
+      },
       id: item.inTree ? item.id : idProp,
       role: item.inTree ? "treeitem" : void 0,
       "aria-level": item.inTree ? depth + 1 : void 0,
@@ -338,9 +402,10 @@ function TreeAddRow({
         item.claimFocus();
         onFocus?.(event);
       },
-      style: { paddingInlineStart: treeIndent(depth), ...style },
+      style: { paddingInlineStart: treeIndent(depth), ...arrival.style, ...style },
       className: cn(
         "group flex h-(--control-xs) w-full items-center gap-1.5 rounded-xs pe-1 motion-interactive",
+        arrival.className,
         "text-ui-md text-muted-foreground hover:bg-panel-raised/60 hover:text-foreground",
         ITEM_FOCUS,
         className

package/dist/components/tree/tree.meta.js

@@ -167,6 +167,12 @@ var treeMeta = {
       name: "label",
       type: "ReactNode",
       description: "TreeAddRow's visible label. Name what gets added \u2014 'Add effect', not 'Add'."
+    },
+    {
+      name: "motion",
+      type: '"full" | "subtle" | "off"',
+      default: '"full"',
+      description: "On Tree. How much motion this component uses: `full` (default) inherits the app's policy, `subtle` keeps feedback and drops the flourish, `off` stills it. It can only turn motion down \u2014 it never overrides a reader's reduce-motion setting. Under `subtle` expanded rows appear at once instead of unfolding; the chevron still turns."
     }
   ],
   subcomponents: [
@@ -208,6 +214,32 @@ var treeMeta = {
     "Right-rail controls that appear on hover must also appear on focus-visible, or they are unreachable by keyboard."
   ],
   tokensUsed: ["panel-raised", "hairline", "foreground", "muted-foreground", "primary", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-arrive",
+      part: "TreeRow",
+      why: "Rows a user's expand reveals fade down into place in document order (a capped 18ms stagger), so the eye can follow where the children came from. An animation (motion-arrive) rather than a transition, because the rows already wear motion-interactive and a second transition list would fight it. Only on a user expand of a `subtree` \u2014 a tree that mounts open shows its rows at once, and rows added later to an open folder do not cascade. Expressive: `subtle` shows them at once."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "TreeRow",
+      why: "Hover and selection fills ease, so sweeping the pointer down a dense panel reads as a highlight following it rather than rows flickering."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Disclosure",
+      why: "The chevron turns with the rows arriving under it; motion-interactive lists `rotate`, which is what -rotate-90 writes, so it no longer flips in one frame."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Tree",
+      why: "A tree has no indeterminate state of its own; a branch that loads its children should render a TreeEmpty or a loading row inside it."
+    }
+  ],
   examples: [
     {
       label: "File tree",

package/dist/components/video/video.meta.js

@@ -57,6 +57,38 @@ var videoMeta = {
     }
   ],
   tokensUsed: ["border", "overlay", "overlay-foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "The frame arrives with its page. Once there is a source, the poster and controls are the browser's."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Play button",
+      why: "With `onRequestPlay`, the play disc firms its scrim on hover, eased, so the mark reads as pressable over any image."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Play button",
+      why: "Loading a source can take a moment; the settle on press confirms the tap before the player appears."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "Placeholder to player is a swap of elements: the native video mounts where the poster was. Animating the swap would delay the playback the person just asked for."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Buffering belongs to the native controls, which draw their own indicator. A second loader over the frame would compete with the browser's."
+    }
+  ],
   a11y: [
     "Mounts a native <video> element, preserving built-in keyboard controls when controls is enabled.",
     'Without onRequestPlay the placeholder play mark is decorative (aria-hidden) \u2014 nothing on the frame pretends to be pressable. With it, the mark is a native button named "Play video".'