@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/dist/SharedElementTransition.js

@@ -0,0 +1,167 @@
+import { filterDOMProps, useRenderProps } from "./utils.js";
+import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
+import { Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, on, onCleanup, splitProps, untrack, useContext } from "solid-js";
+//#region src/SharedElementTransition.tsx
+/**
+* SharedElementTransition primitives for solidaria-components.
+*
+* Provides FLIP-based shared element animations when elements move between
+* parents within a scope. Captures geometry snapshots on unmount and applies
+* transition animations on mount.
+*
+* Parity target: react-aria-components/src/SharedElementTransition.tsx
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+/** Safe wrapper — jsdom doesn't implement the Web Animations API. */
+function getAnimations(el) {
+	return typeof el.getAnimations === "function" ? el.getAnimations() : [];
+}
+const SharedElementContext = createContext(null);
+function useHasSharedElementTransitionScope() {
+	return useContext(SharedElementContext) != null;
+}
+/**
+* A scope for SharedElements, which animate between parents.
+*/
+function SharedElementTransition(props) {
+	return createComponent(SharedElementContext.Provider, {
+		value: { snapshots: {} },
+		get children() {
+			return props.children;
+		}
+	});
+}
+/**
+* An element that animates between its old and new position when moving
+* between parents within a SharedElementTransition scope.
+*/
+function SharedElement(props) {
+	const scope = useContext(SharedElementContext);
+	if (!scope) throw new Error("<SharedElement> must be rendered inside a <SharedElementTransition>");
+	const [local, domProps] = splitProps(props, [
+		"name",
+		"isVisible",
+		"children",
+		"class",
+		"style",
+		"ref"
+	]);
+	const [lifecycle, setLifecycle] = createSignal(local.isVisible === false ? "hidden" : "visible");
+	const [element, setElement] = createSignal();
+	let frame;
+	const setRef = (el) => {
+		setElement(el);
+		const userRef = local.ref;
+		if (typeof userRef === "function") userRef(el);
+		else if (userRef !== void 0) userRef.current = el;
+	};
+	const storeSnapshot = () => {
+		const el = untrack(element);
+		if (el && el.isConnected && !el.hasAttribute("data-exiting")) {
+			const style = window.getComputedStyle(el);
+			if (style.transitionProperty !== "none") {
+				const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+				scope.snapshots[local.name] = {
+					rect: el.getBoundingClientRect(),
+					style: transitionProperty.map((property) => [property, style.getPropertyValue(property)])
+				};
+			}
+		}
+	};
+	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
+		if (isVisible && untrack(lifecycle) === "hidden") setLifecycle("visible");
+	}));
+	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
+		onCleanup(() => {
+			if (isVisible) storeSnapshot();
+		});
+	}));
+	createEffect(on([() => local.isVisible !== false, element], ([isVisible, el]) => {
+		const name = local.name;
+		if (frame != null) {
+			cancelAnimationFrame(frame);
+			frame = void 0;
+		}
+		if (isVisible && el) {
+			const prevSnapshot = scope.snapshots[name];
+			if (prevSnapshot) {
+				setLifecycle("visible");
+				const animations = getAnimations(el);
+				const values = prevSnapshot.style.map(([property, prevValue]) => {
+					const value = el.style.getPropertyValue(property);
+					if (property === "translate") {
+						const prevRect = prevSnapshot.rect;
+						const currentRect = el.getBoundingClientRect();
+						const deltaX = prevRect.left - currentRect.left;
+						const deltaY = prevRect.top - currentRect.top;
+						el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+					} else el.style.setProperty(property, prevValue);
+					return [property, value];
+				});
+				for (const a of getAnimations(el)) if (!animations.includes(a)) a.cancel();
+				frame = requestAnimationFrame(() => {
+					frame = void 0;
+					for (const [property, value] of values) el.style.setProperty(property, value);
+				});
+				delete scope.snapshots[name];
+			} else {
+				queueMicrotask(() => setLifecycle("entering"));
+				frame = requestAnimationFrame(() => {
+					frame = void 0;
+					setLifecycle("visible");
+				});
+			}
+		} else if (!isVisible && el) queueMicrotask(() => {
+			if (scope.snapshots[name]) {
+				delete scope.snapshots[name];
+				setLifecycle("exiting");
+				Promise.all(getAnimations(el).map((a) => a.finished)).then(() => setLifecycle("hidden")).catch(() => {});
+			} else setLifecycle("hidden");
+		});
+	}));
+	onCleanup(() => {
+		if (frame != null) cancelAnimationFrame(frame);
+	});
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-SharedElement"
+	}, () => ({
+		isEntering: lifecycle() === "entering",
+		isExiting: lifecycle() === "exiting"
+	}));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return createComponent(Show, {
+		get when() {
+			return lifecycle() !== "hidden";
+		},
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			use(setRef, _el$);
+			spread(_el$, mergeProps(filteredDomProps, {
+				get ["class"]() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				get ["data-entering"]() {
+					return lifecycle() === "entering" || void 0;
+				},
+				get ["data-exiting"]() {
+					return lifecycle() === "exiting" || void 0;
+				}
+			}), false, true);
+			insert(_el$, () => renderProps.renderChildren());
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+//#endregion
+export { SharedElement, SharedElementTransition, useHasSharedElementTransitionScope };
+
+//# sourceMappingURL=SharedElementTransition.js.map

package/dist/SharedElementTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedElementTransition.js","names":["JSX","createContext","createEffect","createMemo","createRenderEffect","createSignal","onCleanup","splitProps","untrack","useContext","Show","on","ClassNameOrFunction","StyleOrFunction","RenderChildren","useRenderProps","filterDOMProps","SharedElementLifecycle","getAnimations","el","HTMLElement","Animation","Snapshot","rect","DOMRect","style","SharedElementScope","snapshots","name","SharedElementContext","useHasSharedElementTransitionScope","SharedElementTransitionProps","children","Element","SharedElementTransition","props","scope","_$createComponent","Provider","value","SharedElementRenderProps","isEntering","isExiting","SharedElementPropsBase","Omit","HTMLAttributes","HTMLDivElement","class","SharedElementProps","isVisible","ref","current","SharedElement","Error","local","domProps","lifecycle","setLifecycle","element","setElement","frame","setRef","userRef","undefined","storeSnapshot","isConnected","hasAttribute","window","getComputedStyle","transitionProperty","split","getBoundingClientRect","map","property","getPropertyValue","const","cancelAnimationFrame","prevSnapshot","animations","values","prevValue","prevRect","currentRect","deltaX","left","deltaY","top","setProperty","a","includes","cancel","requestAnimationFrame","queueMicrotask","Promise","all","finished","then","catch","renderProps","defaultClassName","filteredDomProps","global","when","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","data-entering","data-exiting","_$insert","renderChildren","_$runHydrationEvents"],"sources":["../src/SharedElementTransition.tsx"],"sourcesContent":["/**\n * SharedElementTransition primitives for solidaria-components.\n *\n * Provides FLIP-based shared element animations when elements move between\n * parents within a scope. Captures geometry snapshots on unmount and applies\n * transition animations on mount.\n *\n * Parity target: react-aria-components/src/SharedElementTransition.tsx\n */\n\nimport {\n  type JSX,\n  createContext,\n  createEffect,\n  createMemo,\n  createRenderEffect,\n  createSignal,\n  onCleanup,\n  splitProps,\n  untrack,\n  useContext,\n  Show,\n  on,\n} from \"solid-js\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype SharedElementLifecycle = \"hidden\" | \"entering\" | \"visible\" | \"exiting\";\n\n/** Safe wrapper — jsdom doesn't implement the Web Animations API. */\nfunction getAnimations(el: HTMLElement): Animation[] {\n  return typeof el.getAnimations === \"function\" ? el.getAnimations() : [];\n}\n\ninterface Snapshot {\n  rect: DOMRect;\n  style: [string, string][];\n}\n\ninterface SharedElementScope {\n  snapshots: { [name: string]: Snapshot };\n}\n\nconst SharedElementContext = createContext<SharedElementScope | null>(null);\n\nexport function useHasSharedElementTransitionScope(): boolean {\n  return useContext(SharedElementContext) != null;\n}\n\nexport interface SharedElementTransitionProps {\n  children?: JSX.Element;\n}\n\n/**\n * A scope for SharedElements, which animate between parents.\n */\nexport function SharedElementTransition(props: SharedElementTransitionProps): JSX.Element {\n  const scope: SharedElementScope = {\n    snapshots: {},\n  };\n\n  return (\n    <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>\n  );\n}\n\nexport interface SharedElementRenderProps {\n  isEntering: boolean;\n  isExiting: boolean;\n}\n\nexport interface SharedElementPropsBase extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\"\n> {\n  children?: RenderChildren<SharedElementRenderProps>;\n  class?: ClassNameOrFunction<SharedElementRenderProps>;\n  style?: StyleOrFunction<SharedElementRenderProps>;\n}\n\nexport interface SharedElementProps extends SharedElementPropsBase {\n  name: string;\n  isVisible?: boolean;\n  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };\n}\n\n/**\n * An element that animates between its old and new position when moving\n * between parents within a SharedElementTransition scope.\n */\nexport function SharedElement(props: SharedElementProps): JSX.Element | null {\n  const scope = useContext(SharedElementContext);\n  if (!scope) {\n    throw new Error(\"<SharedElement> must be rendered inside a <SharedElementTransition>\");\n  }\n\n  const [local, domProps] = splitProps(props, [\n    \"name\",\n    \"isVisible\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(\n    local.isVisible === false ? \"hidden\" : \"visible\",\n  );\n\n  // The mounted div, tracked as a signal so the FLIP-read effect below REACTS to\n  // it appearing. React guarantees `ref.current` is committed before the layout\n  // effect body runs; Solid gives no such ordering between the `<Show>`'s\n  // insertion render-effect and a plain createEffect, so we make the read depend\n  // on the element instead of racing its mount (see READ PHASE).\n  const [element, setElement] = createSignal<HTMLDivElement | undefined>();\n  let frame: number | undefined;\n\n  const setRef = (el: HTMLDivElement) => {\n    setElement(el);\n    // Forward ref to consumer\n    const userRef = local.ref;\n    if (typeof userRef === \"function\") {\n      userRef(el);\n    } else if (userRef !== undefined) {\n      userRef.current = el;\n    }\n  };\n\n  // Store a geometry + transition-style snapshot of the currently-mounted\n  // element, so a sibling SharedElement with the same `name` can FLIP from it.\n  // Mirrors upstream's layout-effect *cleanup*\n  // (react-aria-components/src/SharedElementTransition.tsx), which runs for\n  // every `isVisible` flip — not only on unmount.\n  const storeSnapshot = () => {\n    const el = untrack(element);\n    if (el && el.isConnected && !el.hasAttribute(\"data-exiting\")) {\n      // Store a snapshot of the rectangle and computed style for transitioning properties.\n      const style = window.getComputedStyle(el);\n      if (style.transitionProperty !== \"none\") {\n        const transitionProperty = style.transitionProperty.split(/\\s*,\\s*/);\n        scope.snapshots[local.name] = {\n          rect: el.getBoundingClientRect(),\n          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),\n        };\n      }\n    }\n  };\n\n  // MOUNT-IN-RENDER — mirrors upstream's render-phase\n  // `if (isVisible && state === 'hidden') setState('visible')`. Promoting a\n  // hidden element to visible in the render phase mounts its div (via the\n  // `<Show>` below) BEFORE the FLIP-read createEffect runs, so the incoming\n  // element is in the DOM to be measured and translated. Without this the\n  // incoming element's ref is still null when the read effect fires and it can\n  // only enter fresh — never FLIP. Keyed on `isVisible` (untracked lifecycle\n  // read) so it cannot loop.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        if (isVisible && untrack(lifecycle) === \"hidden\") {\n          setLifecycle(\"visible\");\n        }\n      },\n    ),\n  );\n\n  // STORE PHASE — a render effect runs before user effects within a Solid\n  // batch, exactly as React runs all layout-effect destroys before any create.\n  // The cleanup registered here fires on the *next* `isVisible` change (and on\n  // disposal), capturing the outgoing snapshot BEFORE any sibling's FLIP-read\n  // createEffect below runs — React's two-phase commit. Only the cleanup\n  // registered while VISIBLE stores (an outgoing element); an incoming\n  // element's prior cleanup was registered while hidden and must not clobber\n  // the outgoing snapshot. This mirrors React closing over `element =\n  // ref.current`, which is null while hidden.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        onCleanup(() => {\n          if (isVisible) {\n            storeSnapshot();\n          }\n        });\n      },\n    ),\n  );\n\n  // READ PHASE — mirrors upstream's layout-effect body, which reads the freshly\n  // committed `ref.current`. Keying on the `element` signal (not just isVisible)\n  // makes this run only once the incoming div is actually mounted: when isVisible\n  // flips true the mount-in-render effect above mounts the div, `setRef` sets the\n  // signal, and this effect runs with `el` present — never against a null ref.\n  // (Solid batches, so an isVisible flip + the resulting mount coalesce into one\n  // run with the mounted element.) There is therefore no \"element not yet in DOM\"\n  // fresh-enter branch: with no committed div there is nothing to measure, so we\n  // wait — exactly as React never runs the body before commit.\n  createEffect(\n    on(\n      [() => local.isVisible !== false, element] as const,\n      ([isVisible, el]) => {\n        const name = local.name;\n\n        if (frame != null) {\n          cancelAnimationFrame(frame);\n          frame = undefined;\n        }\n\n        if (isVisible && el) {\n          const prevSnapshot = scope.snapshots[name];\n\n          if (prevSnapshot) {\n            // FLIP: Element is transitioning from a previous instance.\n            setLifecycle(\"visible\");\n            const animations = getAnimations(el);\n\n            // Set properties to animate from.\n            const values = prevSnapshot.style.map(([property, prevValue]) => {\n              const value = el.style.getPropertyValue(property);\n              if (property === \"translate\") {\n                const prevRect = prevSnapshot.rect;\n                const currentRect = el.getBoundingClientRect();\n                const deltaX = prevRect.left - currentRect.left;\n                const deltaY = prevRect.top - currentRect.top;\n                el.style.setProperty(\"translate\", `${deltaX}px ${deltaY}px`);\n              } else {\n                el.style.setProperty(property, prevValue);\n              }\n              return [property, value] as [string, string];\n            });\n\n            // Cancel any new animations triggered by these properties.\n            for (const a of getAnimations(el)) {\n              if (!animations.includes(a)) {\n                a.cancel();\n              }\n            }\n\n            // Remove overrides after one frame to animate to the current values.\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              for (const [property, value] of values) {\n                el.style.setProperty(property, value);\n              }\n            });\n\n            delete scope.snapshots[name];\n          } else {\n            // No previous instance exists, apply the entering state.\n            queueMicrotask(() => setLifecycle(\"entering\"));\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              setLifecycle(\"visible\");\n            });\n          }\n        } else if (!isVisible && el) {\n          // Wait a microtask to check if a snapshot still exists (meaning no new\n          // SharedElement consumed it), then enter exiting state.\n          queueMicrotask(() => {\n            if (scope.snapshots[name]) {\n              delete scope.snapshots[name];\n              setLifecycle(\"exiting\");\n              // Wait for animations to finish before hiding.\n              Promise.all(getAnimations(el).map((a) => a.finished))\n                .then(() => setLifecycle(\"hidden\"))\n                .catch(() => {});\n            } else {\n              // Snapshot was consumed by another instance, unmount immediately.\n              setLifecycle(\"hidden\");\n            }\n          });\n        }\n      },\n    ),\n  );\n\n  // Cancel any pending FLIP frame on disposal. The snapshot store lives in the\n  // render-effect cleanup above, which also fires on disposal.\n  onCleanup(() => {\n    if (frame != null) {\n      cancelAnimationFrame(frame);\n    }\n  });\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-SharedElement\",\n    },\n    () => ({\n      isEntering: lifecycle() === \"entering\",\n      isExiting: lifecycle() === \"exiting\",\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n\n  return (\n    <Show when={lifecycle() !== \"hidden\"}>\n      <div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={lifecycle() === \"entering\" || undefined}\n        data-exiting={lifecycle() === \"exiting\" || undefined}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":"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"}

package/dist/SharedElementTransition.jsx

@@ -0,0 +1,140 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, on, onCleanup, splitProps, untrack, useContext } from "solid-js";
+//#region src/SharedElementTransition.tsx
+/**
+* SharedElementTransition primitives for solidaria-components.
+*
+* Provides FLIP-based shared element animations when elements move between
+* parents within a scope. Captures geometry snapshots on unmount and applies
+* transition animations on mount.
+*
+* Parity target: react-aria-components/src/SharedElementTransition.tsx
+*/
+/** Safe wrapper — jsdom doesn't implement the Web Animations API. */
+function getAnimations(el) {
+	return typeof el.getAnimations === "function" ? el.getAnimations() : [];
+}
+const SharedElementContext = createContext(null);
+function useHasSharedElementTransitionScope() {
+	return useContext(SharedElementContext) != null;
+}
+/**
+* A scope for SharedElements, which animate between parents.
+*/
+function SharedElementTransition(props) {
+	const scope = { snapshots: {} };
+	return <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>;
+}
+/**
+* An element that animates between its old and new position when moving
+* between parents within a SharedElementTransition scope.
+*/
+function SharedElement(props) {
+	const scope = useContext(SharedElementContext);
+	if (!scope) throw new Error("<SharedElement> must be rendered inside a <SharedElementTransition>");
+	const [local, domProps] = splitProps(props, [
+		"name",
+		"isVisible",
+		"children",
+		"class",
+		"style",
+		"ref"
+	]);
+	const [lifecycle, setLifecycle] = createSignal(local.isVisible === false ? "hidden" : "visible");
+	const [element, setElement] = createSignal();
+	let frame;
+	const setRef = (el) => {
+		setElement(el);
+		const userRef = local.ref;
+		if (typeof userRef === "function") userRef(el);
+		else if (userRef !== void 0) userRef.current = el;
+	};
+	const storeSnapshot = () => {
+		const el = untrack(element);
+		if (el && el.isConnected && !el.hasAttribute("data-exiting")) {
+			const style = window.getComputedStyle(el);
+			if (style.transitionProperty !== "none") {
+				const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
+				scope.snapshots[local.name] = {
+					rect: el.getBoundingClientRect(),
+					style: transitionProperty.map((property) => [property, style.getPropertyValue(property)])
+				};
+			}
+		}
+	};
+	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
+		if (isVisible && untrack(lifecycle) === "hidden") setLifecycle("visible");
+	}));
+	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
+		onCleanup(() => {
+			if (isVisible) storeSnapshot();
+		});
+	}));
+	createEffect(on([() => local.isVisible !== false, element], ([isVisible, el]) => {
+		const name = local.name;
+		if (frame != null) {
+			cancelAnimationFrame(frame);
+			frame = void 0;
+		}
+		if (isVisible && el) {
+			const prevSnapshot = scope.snapshots[name];
+			if (prevSnapshot) {
+				setLifecycle("visible");
+				const animations = getAnimations(el);
+				const values = prevSnapshot.style.map(([property, prevValue]) => {
+					const value = el.style.getPropertyValue(property);
+					if (property === "translate") {
+						const prevRect = prevSnapshot.rect;
+						const currentRect = el.getBoundingClientRect();
+						const deltaX = prevRect.left - currentRect.left;
+						const deltaY = prevRect.top - currentRect.top;
+						el.style.setProperty("translate", `${deltaX}px ${deltaY}px`);
+					} else el.style.setProperty(property, prevValue);
+					return [property, value];
+				});
+				for (const a of getAnimations(el)) if (!animations.includes(a)) a.cancel();
+				frame = requestAnimationFrame(() => {
+					frame = void 0;
+					for (const [property, value] of values) el.style.setProperty(property, value);
+				});
+				delete scope.snapshots[name];
+			} else {
+				queueMicrotask(() => setLifecycle("entering"));
+				frame = requestAnimationFrame(() => {
+					frame = void 0;
+					setLifecycle("visible");
+				});
+			}
+		} else if (!isVisible && el) queueMicrotask(() => {
+			if (scope.snapshots[name]) {
+				delete scope.snapshots[name];
+				setLifecycle("exiting");
+				Promise.all(getAnimations(el).map((a) => a.finished)).then(() => setLifecycle("hidden")).catch(() => {});
+			} else setLifecycle("hidden");
+		});
+	}));
+	onCleanup(() => {
+		if (frame != null) cancelAnimationFrame(frame);
+	});
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-SharedElement"
+	}, () => ({
+		isEntering: lifecycle() === "entering",
+		isExiting: lifecycle() === "exiting"
+	}));
+	const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return <Show when={lifecycle() !== "hidden"}>
+      <div ref={setRef} {...filteredDomProps()} class={renderProps.class()} style={renderProps.style()} data-entering={lifecycle() === "entering" || void 0} data-exiting={lifecycle() === "exiting" || void 0}>
+        {renderProps.renderChildren()}
+      </div>
+    </Show>;
+}
+//#endregion
+export { SharedElement, SharedElementTransition, useHasSharedElementTransitionScope };
+
+//# sourceMappingURL=SharedElementTransition.jsx.map

package/dist/SharedElementTransition.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedElementTransition.jsx","names":[],"sources":["../src/SharedElementTransition.tsx"],"sourcesContent":["/**\n * SharedElementTransition primitives for solidaria-components.\n *\n * Provides FLIP-based shared element animations when elements move between\n * parents within a scope. Captures geometry snapshots on unmount and applies\n * transition animations on mount.\n *\n * Parity target: react-aria-components/src/SharedElementTransition.tsx\n */\n\nimport {\n  type JSX,\n  createContext,\n  createEffect,\n  createMemo,\n  createRenderEffect,\n  createSignal,\n  onCleanup,\n  splitProps,\n  untrack,\n  useContext,\n  Show,\n  on,\n} from \"solid-js\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype SharedElementLifecycle = \"hidden\" | \"entering\" | \"visible\" | \"exiting\";\n\n/** Safe wrapper — jsdom doesn't implement the Web Animations API. */\nfunction getAnimations(el: HTMLElement): Animation[] {\n  return typeof el.getAnimations === \"function\" ? el.getAnimations() : [];\n}\n\ninterface Snapshot {\n  rect: DOMRect;\n  style: [string, string][];\n}\n\ninterface SharedElementScope {\n  snapshots: { [name: string]: Snapshot };\n}\n\nconst SharedElementContext = createContext<SharedElementScope | null>(null);\n\nexport function useHasSharedElementTransitionScope(): boolean {\n  return useContext(SharedElementContext) != null;\n}\n\nexport interface SharedElementTransitionProps {\n  children?: JSX.Element;\n}\n\n/**\n * A scope for SharedElements, which animate between parents.\n */\nexport function SharedElementTransition(props: SharedElementTransitionProps): JSX.Element {\n  const scope: SharedElementScope = {\n    snapshots: {},\n  };\n\n  return (\n    <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>\n  );\n}\n\nexport interface SharedElementRenderProps {\n  isEntering: boolean;\n  isExiting: boolean;\n}\n\nexport interface SharedElementPropsBase extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\"\n> {\n  children?: RenderChildren<SharedElementRenderProps>;\n  class?: ClassNameOrFunction<SharedElementRenderProps>;\n  style?: StyleOrFunction<SharedElementRenderProps>;\n}\n\nexport interface SharedElementProps extends SharedElementPropsBase {\n  name: string;\n  isVisible?: boolean;\n  ref?: ((el: HTMLDivElement) => void) | { current?: HTMLDivElement };\n}\n\n/**\n * An element that animates between its old and new position when moving\n * between parents within a SharedElementTransition scope.\n */\nexport function SharedElement(props: SharedElementProps): JSX.Element | null {\n  const scope = useContext(SharedElementContext);\n  if (!scope) {\n    throw new Error(\"<SharedElement> must be rendered inside a <SharedElementTransition>\");\n  }\n\n  const [local, domProps] = splitProps(props, [\n    \"name\",\n    \"isVisible\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const [lifecycle, setLifecycle] = createSignal<SharedElementLifecycle>(\n    local.isVisible === false ? \"hidden\" : \"visible\",\n  );\n\n  // The mounted div, tracked as a signal so the FLIP-read effect below REACTS to\n  // it appearing. React guarantees `ref.current` is committed before the layout\n  // effect body runs; Solid gives no such ordering between the `<Show>`'s\n  // insertion render-effect and a plain createEffect, so we make the read depend\n  // on the element instead of racing its mount (see READ PHASE).\n  const [element, setElement] = createSignal<HTMLDivElement | undefined>();\n  let frame: number | undefined;\n\n  const setRef = (el: HTMLDivElement) => {\n    setElement(el);\n    // Forward ref to consumer\n    const userRef = local.ref;\n    if (typeof userRef === \"function\") {\n      userRef(el);\n    } else if (userRef !== undefined) {\n      userRef.current = el;\n    }\n  };\n\n  // Store a geometry + transition-style snapshot of the currently-mounted\n  // element, so a sibling SharedElement with the same `name` can FLIP from it.\n  // Mirrors upstream's layout-effect *cleanup*\n  // (react-aria-components/src/SharedElementTransition.tsx), which runs for\n  // every `isVisible` flip — not only on unmount.\n  const storeSnapshot = () => {\n    const el = untrack(element);\n    if (el && el.isConnected && !el.hasAttribute(\"data-exiting\")) {\n      // Store a snapshot of the rectangle and computed style for transitioning properties.\n      const style = window.getComputedStyle(el);\n      if (style.transitionProperty !== \"none\") {\n        const transitionProperty = style.transitionProperty.split(/\\s*,\\s*/);\n        scope.snapshots[local.name] = {\n          rect: el.getBoundingClientRect(),\n          style: transitionProperty.map((property) => [property, style.getPropertyValue(property)]),\n        };\n      }\n    }\n  };\n\n  // MOUNT-IN-RENDER — mirrors upstream's render-phase\n  // `if (isVisible && state === 'hidden') setState('visible')`. Promoting a\n  // hidden element to visible in the render phase mounts its div (via the\n  // `<Show>` below) BEFORE the FLIP-read createEffect runs, so the incoming\n  // element is in the DOM to be measured and translated. Without this the\n  // incoming element's ref is still null when the read effect fires and it can\n  // only enter fresh — never FLIP. Keyed on `isVisible` (untracked lifecycle\n  // read) so it cannot loop.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        if (isVisible && untrack(lifecycle) === \"hidden\") {\n          setLifecycle(\"visible\");\n        }\n      },\n    ),\n  );\n\n  // STORE PHASE — a render effect runs before user effects within a Solid\n  // batch, exactly as React runs all layout-effect destroys before any create.\n  // The cleanup registered here fires on the *next* `isVisible` change (and on\n  // disposal), capturing the outgoing snapshot BEFORE any sibling's FLIP-read\n  // createEffect below runs — React's two-phase commit. Only the cleanup\n  // registered while VISIBLE stores (an outgoing element); an incoming\n  // element's prior cleanup was registered while hidden and must not clobber\n  // the outgoing snapshot. This mirrors React closing over `element =\n  // ref.current`, which is null while hidden.\n  createRenderEffect(\n    on(\n      () => local.isVisible !== false,\n      (isVisible) => {\n        onCleanup(() => {\n          if (isVisible) {\n            storeSnapshot();\n          }\n        });\n      },\n    ),\n  );\n\n  // READ PHASE — mirrors upstream's layout-effect body, which reads the freshly\n  // committed `ref.current`. Keying on the `element` signal (not just isVisible)\n  // makes this run only once the incoming div is actually mounted: when isVisible\n  // flips true the mount-in-render effect above mounts the div, `setRef` sets the\n  // signal, and this effect runs with `el` present — never against a null ref.\n  // (Solid batches, so an isVisible flip + the resulting mount coalesce into one\n  // run with the mounted element.) There is therefore no \"element not yet in DOM\"\n  // fresh-enter branch: with no committed div there is nothing to measure, so we\n  // wait — exactly as React never runs the body before commit.\n  createEffect(\n    on(\n      [() => local.isVisible !== false, element] as const,\n      ([isVisible, el]) => {\n        const name = local.name;\n\n        if (frame != null) {\n          cancelAnimationFrame(frame);\n          frame = undefined;\n        }\n\n        if (isVisible && el) {\n          const prevSnapshot = scope.snapshots[name];\n\n          if (prevSnapshot) {\n            // FLIP: Element is transitioning from a previous instance.\n            setLifecycle(\"visible\");\n            const animations = getAnimations(el);\n\n            // Set properties to animate from.\n            const values = prevSnapshot.style.map(([property, prevValue]) => {\n              const value = el.style.getPropertyValue(property);\n              if (property === \"translate\") {\n                const prevRect = prevSnapshot.rect;\n                const currentRect = el.getBoundingClientRect();\n                const deltaX = prevRect.left - currentRect.left;\n                const deltaY = prevRect.top - currentRect.top;\n                el.style.setProperty(\"translate\", `${deltaX}px ${deltaY}px`);\n              } else {\n                el.style.setProperty(property, prevValue);\n              }\n              return [property, value] as [string, string];\n            });\n\n            // Cancel any new animations triggered by these properties.\n            for (const a of getAnimations(el)) {\n              if (!animations.includes(a)) {\n                a.cancel();\n              }\n            }\n\n            // Remove overrides after one frame to animate to the current values.\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              for (const [property, value] of values) {\n                el.style.setProperty(property, value);\n              }\n            });\n\n            delete scope.snapshots[name];\n          } else {\n            // No previous instance exists, apply the entering state.\n            queueMicrotask(() => setLifecycle(\"entering\"));\n            frame = requestAnimationFrame(() => {\n              frame = undefined;\n              setLifecycle(\"visible\");\n            });\n          }\n        } else if (!isVisible && el) {\n          // Wait a microtask to check if a snapshot still exists (meaning no new\n          // SharedElement consumed it), then enter exiting state.\n          queueMicrotask(() => {\n            if (scope.snapshots[name]) {\n              delete scope.snapshots[name];\n              setLifecycle(\"exiting\");\n              // Wait for animations to finish before hiding.\n              Promise.all(getAnimations(el).map((a) => a.finished))\n                .then(() => setLifecycle(\"hidden\"))\n                .catch(() => {});\n            } else {\n              // Snapshot was consumed by another instance, unmount immediately.\n              setLifecycle(\"hidden\");\n            }\n          });\n        }\n      },\n    ),\n  );\n\n  // Cancel any pending FLIP frame on disposal. The snapshot store lives in the\n  // render-effect cleanup above, which also fires on disposal.\n  onCleanup(() => {\n    if (frame != null) {\n      cancelAnimationFrame(frame);\n    }\n  });\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-SharedElement\",\n    },\n    () => ({\n      isEntering: lifecycle() === \"entering\",\n      isExiting: lifecycle() === \"exiting\",\n    }),\n  );\n\n  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));\n\n  return (\n    <Show when={lifecycle() !== \"hidden\"}>\n      <div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={lifecycle() === \"entering\" || undefined}\n        data-exiting={lifecycle() === \"exiting\" || undefined}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":"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"}

package/dist/Slider.d.ts

@@ -5,7 +5,7 @@
  * Port of react-aria-components/src/Slider.tsx
  */
 import { type JSX } from "solid-js";
-import { type AriaSliderProps } from "@proyecto-viviana/solidaria";
+import { type AriaSliderProps, type HoverEvents } from "@proyecto-viviana/solidaria";
 import { type SliderState, type SliderOrientation } from "@proyecto-viviana/solid-stately";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";
 export interface SliderRenderProps {
@@ -96,6 +96,26 @@ export interface SliderThumbProps extends SlotProps, Omit<JSX.HTMLAttributes<HTM
     /** The inline style for the element. */
     style?: StyleOrFunction<SliderThumbRenderProps>;
 }
+export interface SliderFillRenderProps {
+    /** Whether the slider is disabled. */
+    isDisabled: boolean;
+    /** Whether the slider fill is currently hovered with a mouse. */
+    isHovered: boolean;
+    /** The value as a percent (0-1). */
+    valuePercent: number;
+    /** The orientation. */
+    orientation: SliderOrientation;
+}
+export interface SliderFillProps extends SlotProps, HoverEvents, Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+    /** The offset from which to start the fill. Defaults to the slider's minValue. */
+    offset?: number;
+    /** The children of the fill. */
+    children?: RenderChildren<SliderFillRenderProps>;
+    /** The CSS className for the element. */
+    class?: ClassNameOrFunction<SliderFillRenderProps>;
+    /** The inline style for the element. */
+    style?: StyleOrFunction<SliderFillRenderProps>;
+}
 export interface SliderOutputRenderProps {
     /** The current value. */
     value: number;
@@ -124,6 +144,7 @@ interface SliderContextValue {
 export declare const SliderContext: import("solid-js").Context<SliderContextValue | null>;
 export declare const SliderStateContext: import("solid-js").Context<SliderContextValue | null>;
 export declare const SliderTrackContext: import("solid-js").Context<SliderContextValue | null>;
+export declare const SliderFillContext: import("solid-js").Context<SliderContextValue | null>;
 export declare const SliderOutputContext: import("solid-js").Context<SliderContextValue | null>;
 /**
  * A slider allows users to select a value from a range.
@@ -132,6 +153,7 @@ export declare function Slider(props: SliderProps): JSX.Element;
 export declare namespace Slider {
     var Track: typeof SliderTrack;
     var Thumb: typeof SliderThumb;
+    var Fill: typeof SliderFill;
     var Output: typeof SliderOutput;
 }
 /**
@@ -142,6 +164,16 @@ export declare function SliderTrack(props: SliderTrackProps): JSX.Element;
  * The thumb element of a slider.
  */
 export declare function SliderThumb(props: SliderThumbProps): JSX.Element;
+/**
+ * The fill element of a slider, displaying the selected range.
+ *
+ * Port of react-aria-components `SliderFill` (RAC 1.18). Upstream reads the
+ * array-based `SliderState` (`values`/`getThumbPercent`); our `SliderState` is
+ * single-value, so this fills from `offset` (default the slider's minValue, i.e.
+ * 0%) to the current value — the single-thumb branch of upstream's math, using
+ * the same `(v - min) / (max - min)` percent formula the state itself uses.
+ */
+export declare function SliderFill(props: SliderFillProps): JSX.Element;
 /**
  * The output element of a slider, displaying the current value.
  */

package/dist/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.tsx"],"names":[],"mappings":"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"}