@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Separator.js

@@ -1,8 +1,21 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Separator.tsx
 import { filterDOMProps } from "./utils.js";
 import { ElementTag } from "./ElementTag.js";
-import { createComponent, mergeProps } from "solid-js/web";
-import { createContext, createMemo, splitProps } from "solid-js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { createContext, createMemo } from "solid-js";
 import { createSeparator } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Separator.tsx
 /**
 * Separator component for solidaria-components
@@ -10,7 +23,7 @@ import { createSeparator } from "@proyecto-viviana/solidaria";
 * Pre-wired headless separator component that combines aria hooks.
 * Port of react-aria-components/src/Separator.tsx
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -77,11 +90,14 @@ function Separator(props) {
 		if (typeof style === "function") return style(renderValues());
 		return style;
 	});
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
 	return createComponent(ElementTag, mergeProps({ get tag() {
 		return elementType();
-	} }, createMemo(() => filterDOMProps(ariaProps, { global: true })), () => separatorAria.separatorProps, {
-		ref: (el) => assignRef(local.ref, el),
-		get ["class"]() {
+	} }, domProps, () => {
+		return separatorAria.separatorProps;
+	}, {
+		ref: (el) => assignRef$1(local.ref, el),
+		get "class"() {
 			return resolvedClass();
 		},
 		get style() {

package/dist/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":["JSX","createContext","createMemo","splitProps","ElementTag","createSeparator","AriaSeparatorProps","Orientation","SlotProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","SeparatorRenderProps","orientation","SeparatorProps","class","renderProps","style","CSSProperties","HTMLElement","SeparatorContext","Separator","props","Element","local","ariaProps","elementType","element","separatorAria","aria-label","aria-labelledby","aria-describedby","aria-details","id","renderValues","resolvedClass","cls","resolvedStyle","domProps","global","_$createComponent","_$mergeProps","tag","separatorProps","slot"],"sources":["../src/Separator.tsx"],"sourcesContent":["/**\n * Separator component for solidaria-components\n *\n * Pre-wired headless separator component that combines aria hooks.\n * Port of react-aria-components/src/Separator.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\nimport {\n  createSeparator,\n  type AriaSeparatorProps,\n  type Orientation,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface SeparatorRenderProps {\n  /** The orientation of the separator. */\n  orientation: Orientation;\n}\n\nexport interface SeparatorProps extends AriaSeparatorProps, SlotProps {\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: SeparatorRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);\n  /** Ref for the underlying separator element. */\n  ref?: RefLike<HTMLElement>;\n}\n\nexport const SeparatorContext = createContext<SeparatorProps | null>(null);\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <Separator orientation=\"vertical\" />\n *\n * // Custom element type\n * <Separator elementType=\"div\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"class\", \"style\", \"ref\", \"slot\"]);\n\n  const elementType = createMemo(() => {\n    let element = ariaProps.elementType || \"hr\";\n    // If vertical and using hr, switch to div since hr is inherently horizontal\n    if (element === \"hr\" && ariaProps.orientation === \"vertical\") {\n      element = \"div\";\n    }\n    return element;\n  });\n\n  const separatorAria = createSeparator({\n    get orientation() {\n      return ariaProps.orientation;\n    },\n    get elementType() {\n      return ariaProps.elementType;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n    get id() {\n      return ariaProps.id;\n    },\n  });\n\n  const renderValues = createMemo<SeparatorRenderProps>(() => ({\n    orientation: ariaProps.orientation ?? \"horizontal\",\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? \"solidaria-Separator\";\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <ElementTag\n      tag={elementType()}\n      {...domProps()}\n      {...separatorAria.separatorProps}\n      ref={(el: HTMLElement) => assignRef(local.ref, el)}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,SAASc,UAAaC,KAAiBJ,IAAa;CAClD,IAAI,CAACI,KAAK;CACV,IAAI,OAAOA,QAAQ,YACjBA,IAAIJ,EAAE;MAENI,IAAIF,UAAUF;AAElB;AAgBA,MAAaa,mBAAmBvB,cAAqC,IAAI;;;;;;;;;;;;;;;;AAiBzE,SAAgBwB,UAAUC,OAAoC;CAC5D,MAAM,CAACE,OAAOC,aAAa1B,WAAWuB,OAAO;EAAC;EAAS;EAAS;EAAO;CAAM,CAAC;CAE9E,MAAMI,cAAc5B,iBAAiB;EACnC,IAAI6B,UAAUF,UAAUC,eAAe;EAEvC,IAAIC,YAAY,QAAQF,UAAUZ,gBAAgB,YAChDc,UAAU;EAEZ,OAAOA;CACT,CAAC;CAED,MAAMC,gBAAgB3B,gBAAgB;EACpC,IAAIY,cAAc;GAChB,OAAOY,UAAUZ;EACnB;EACA,IAAIa,cAAc;GAChB,OAAOD,UAAUC;EACnB;EACA,IAAI,eAAe;GACjB,OAAOD,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAOA,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAOA,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAOA,UAAU;EACnB;EACA,IAAIQ,KAAK;GACP,OAAOR,UAAUQ;EACnB;CACF,CAAC;CAED,MAAMC,eAAepC,kBAAwC,EAC3De,aAAaY,UAAUZ,eAAe,aACxC,EAAE;CAEF,MAAMsB,gBAAgBrC,iBAAiB;EACrC,MAAMsC,MAAMZ,MAAMT;EAClB,IAAI,OAAOqB,QAAQ,YACjB,OAAOA,IAAIF,aAAa,CAAC;EAE3B,OAAOE,OAAO;CAChB,CAAC;CAED,MAAMC,gBAAgBvC,iBAAiB;EACrC,MAAMmB,QAAQO,MAAMP;EACpB,IAAI,OAAOA,UAAU,YACnB,OAAOA,MAAMiB,aAAa,CAAC;EAE7B,OAAOjB;CACT,CAAC;CAID,OAAAuB,gBACGxC,YAAUyC,WAAA,EAAA,IACTC,MAAG;EAAA,OAAEhB,YAAY;CAAC,EAAA,GAJL5B,iBAAiBO,eAAeoB,WAAW,EAAEc,QAAQ,KAAK,CAAC,CAKpED,SACAV,cAAce,gBAAc;EAAAhC,MAC1BJ,OAAoBG,UAAUc,MAAMb,KAAKJ,EAAE;EAAC,KAAA,WAAA;GAAA,OAC3C4B,cAAc;EAAC;EAAA,IACtBlB,QAAK;GAAA,OAAEoB,cAAc;EAAC;EAAA,IACtBO,OAAI;GAAA,OAAEpB,MAAMoB;EAAI;CAAA,CAAA,CAAA;AAGtB"}
+{"version":3,"file":"Separator.js","names":["<ElementTag\n      tag={elementType()}\n      {...domProps()}\n      {...separatorAria.separatorProps}\n      ref={(el: HTMLElement) => assignRef(local.ref, el)}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    />","ref={(el: HTMLElement) => assignRef(local.ref, el)}"],"sources":["../src/Separator.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Separator.tsx\n\n/**\n * Separator component for solidaria-components\n *\n * Pre-wired headless separator component that combines aria hooks.\n * Port of react-aria-components/src/Separator.tsx\n */\n\nimport { createContext, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { ElementTag } from \"./ElementTag\";\nimport {\n  createSeparator,\n  type AriaSeparatorProps,\n  type Orientation,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface SeparatorRenderProps {\n  /** The orientation of the separator. */\n  orientation: Orientation;\n}\n\nexport interface SeparatorProps extends AriaSeparatorProps, SlotProps {\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: SeparatorRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);\n  /** Ref for the underlying separator element. */\n  ref?: RefLike<HTMLElement>;\n}\n\nexport const SeparatorContext = createContext<SeparatorProps | null>(null);\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <Separator orientation=\"vertical\" />\n *\n * // Custom element type\n * <Separator elementType=\"div\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"class\", \"style\", \"ref\", \"slot\"]);\n\n  const elementType = createMemo(() => {\n    let element = ariaProps.elementType || \"hr\";\n    // If vertical and using hr, switch to div since hr is inherently horizontal\n    if (element === \"hr\" && ariaProps.orientation === \"vertical\") {\n      element = \"div\";\n    }\n    return element;\n  });\n\n  const separatorAria = createSeparator({\n    get orientation() {\n      return ariaProps.orientation;\n    },\n    get elementType() {\n      return ariaProps.elementType;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n    get id() {\n      return ariaProps.id;\n    },\n  });\n\n  const renderValues = createMemo<SeparatorRenderProps>(() => ({\n    orientation: ariaProps.orientation ?? \"horizontal\",\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? \"solidaria-Separator\";\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <ElementTag\n      tag={elementType()}\n      {...domProps()}\n      {...separatorAria.separatorProps}\n      ref={(el: HTMLElement) => assignRef(local.ref, el)}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAS,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgBA,MAAa,mBAAmB,cAAqC,IAAI;;;;;;;;;;;;;;;;AAiBzE,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,aAAa,WAAW,OAAO;EAAC;EAAS;EAAS;EAAO;CAAM,CAAC;CAE9E,MAAM,cAAc,iBAAiB;EACnC,IAAI,UAAU,UAAU,eAAe;EAEvC,IAAI,YAAY,QAAQ,UAAU,gBAAgB,YAChD,UAAU;EAEZ,OAAO;CACT,CAAC;CAED,MAAM,gBAAgB,gBAAgB;EACpC,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;EACA,IAAI,KAAK;GACP,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,eAAe,kBAAwC,EAC3D,aAAa,UAAU,eAAe,aACxC,EAAE;CAEF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,aAAa,CAAC;EAE3B,OAAO,OAAO;CAChB,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,QAAQ,MAAM;EACpB,IAAI,OAAO,UAAU,YACnB,OAAO,MAAM,aAAa,CAAC;EAE7B,OAAO;CACT,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAE7E,OACEA,gBAAAA,YAAAA,WAAAA,EACE,IAAA,MAAA;EAAK,OAAA,YAAY;CAAC,EAOnB,GANK,gBACJ;EAAI,OAAA,cAAc;CAAc,GAHlC;EAIEC,MAAM,OAAoB,YAAU,MAAM,KAAK,EAAE;EACjD,IAAA,UAAA;GAAO,OAAA,cAAc;EAAC;EACtB,IAAA,QAAA;GAAO,OAAA,cAAc;EAAC;EACtB,IAAA,OAAA;GAAM,OAAA,MAAM;EAAI;CACjB,CAAA,CAAA;AAEL"}

package/dist/Separator.jsx

@@ -1,7 +1,20 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Separator.tsx
 import { filterDOMProps } from "./utils.jsx";
 import { ElementTag } from "./ElementTag.jsx";
-import { createContext, createMemo, splitProps } from "solid-js";
+import { createContext, createMemo } from "solid-js";
 import { createSeparator } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/Separator.tsx
 /**
 * Separator component for solidaria-components
@@ -9,7 +22,7 @@ import { createSeparator } from "@proyecto-viviana/solidaria";
 * Pre-wired headless separator component that combines aria hooks.
 * Port of react-aria-components/src/Separator.tsx
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -77,7 +90,7 @@ function Separator(props) {
 		return style;
 	});
 	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
-	return <ElementTag tag={elementType()} {...domProps()} {...separatorAria.separatorProps} ref={(el) => assignRef(local.ref, el)} class={resolvedClass()} style={resolvedStyle()} slot={local.slot} />;
+	return <ElementTag tag={elementType()} {...domProps()} {...separatorAria.separatorProps} ref={(el) => assignRef$1(local.ref, el)} class={resolvedClass()} style={resolvedStyle()} slot={local.slot} />;
 }
 //#endregion
 export { Separator, SeparatorContext };

package/dist/Separator.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.jsx","names":[],"sources":["../src/Separator.tsx"],"sourcesContent":["/**\n * Separator component for solidaria-components\n *\n * Pre-wired headless separator component that combines aria hooks.\n * Port of react-aria-components/src/Separator.tsx\n */\n\nimport { type JSX, createContext, createMemo, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\nimport {\n  createSeparator,\n  type AriaSeparatorProps,\n  type Orientation,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface SeparatorRenderProps {\n  /** The orientation of the separator. */\n  orientation: Orientation;\n}\n\nexport interface SeparatorProps extends AriaSeparatorProps, SlotProps {\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: SeparatorRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);\n  /** Ref for the underlying separator element. */\n  ref?: RefLike<HTMLElement>;\n}\n\nexport const SeparatorContext = createContext<SeparatorProps | null>(null);\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <Separator orientation=\"vertical\" />\n *\n * // Custom element type\n * <Separator elementType=\"div\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"class\", \"style\", \"ref\", \"slot\"]);\n\n  const elementType = createMemo(() => {\n    let element = ariaProps.elementType || \"hr\";\n    // If vertical and using hr, switch to div since hr is inherently horizontal\n    if (element === \"hr\" && ariaProps.orientation === \"vertical\") {\n      element = \"div\";\n    }\n    return element;\n  });\n\n  const separatorAria = createSeparator({\n    get orientation() {\n      return ariaProps.orientation;\n    },\n    get elementType() {\n      return ariaProps.elementType;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n    get id() {\n      return ariaProps.id;\n    },\n  });\n\n  const renderValues = createMemo<SeparatorRenderProps>(() => ({\n    orientation: ariaProps.orientation ?? \"horizontal\",\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? \"solidaria-Separator\";\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <ElementTag\n      tag={elementType()}\n      {...domProps()}\n      {...separatorAria.separatorProps}\n      ref={(el: HTMLElement) => assignRef(local.ref, el)}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAS,UAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgBA,MAAa,mBAAmB,cAAqC,IAAI;;;;;;;;;;;;;;;;AAiBzE,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,aAAa,WAAW,OAAO;EAAC;EAAS;EAAS;EAAO;CAAM,CAAC;CAE9E,MAAM,cAAc,iBAAiB;EACnC,IAAI,UAAU,UAAU,eAAe;EAEvC,IAAI,YAAY,QAAQ,UAAU,gBAAgB,YAChD,UAAU;EAEZ,OAAO;CACT,CAAC;CAED,MAAM,gBAAgB,gBAAgB;EACpC,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;EACA,IAAI,KAAK;GACP,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,eAAe,kBAAwC,EAC3D,aAAa,UAAU,eAAe,aACxC,EAAE;CAEF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,aAAa,CAAC;EAE3B,OAAO,OAAO;CAChB,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,QAAQ,MAAM;EACpB,IAAI,OAAO,UAAU,YACnB,OAAO,MAAM,aAAa,CAAC;EAE7B,OAAO;CACT,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAE7E,OACE,CAAC,WACC,KAAK,YAAY,OACb,SAAS,OACT,cAAc,gBAClB,MAAM,OAAoB,UAAU,MAAM,KAAK,EAAE,GACjD,OAAO,cAAc,GACrB,OAAO,cAAc,GACrB,MAAM,MAAM;AAGlB"}
+{"version":3,"file":"Separator.jsx","names":["assignRef"],"sources":["../src/Separator.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Separator.tsx\n\n/**\n * Separator component for solidaria-components\n *\n * Pre-wired headless separator component that combines aria hooks.\n * Port of react-aria-components/src/Separator.tsx\n */\n\nimport { createContext, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { ElementTag } from \"./ElementTag\";\nimport {\n  createSeparator,\n  type AriaSeparatorProps,\n  type Orientation,\n} from \"@proyecto-viviana/solidaria\";\nimport { type SlotProps, filterDOMProps } from \"./utils\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface SeparatorRenderProps {\n  /** The orientation of the separator. */\n  orientation: Orientation;\n}\n\nexport interface SeparatorProps extends AriaSeparatorProps, SlotProps {\n  /** The CSS className for the element. A function may be provided to receive render props. */\n  class?: string | ((renderProps: SeparatorRenderProps) => string);\n  /** The inline style for the element. A function may be provided to receive render props. */\n  style?: JSX.CSSProperties | ((renderProps: SeparatorRenderProps) => JSX.CSSProperties);\n  /** Ref for the underlying separator element. */\n  ref?: RefLike<HTMLElement>;\n}\n\nexport const SeparatorContext = createContext<SeparatorProps | null>(null);\n\n/**\n * A separator is a visual divider between two groups of content,\n * e.g. groups of menu items or sections of a page.\n *\n * @example\n * ```tsx\n * <Separator />\n *\n * // Vertical separator\n * <Separator orientation=\"vertical\" />\n *\n * // Custom element type\n * <Separator elementType=\"div\" />\n * ```\n */\nexport function Separator(props: SeparatorProps): JSX.Element {\n  const [local, ariaProps] = splitProps(props, [\"class\", \"style\", \"ref\", \"slot\"]);\n\n  const elementType = createMemo(() => {\n    let element = ariaProps.elementType || \"hr\";\n    // If vertical and using hr, switch to div since hr is inherently horizontal\n    if (element === \"hr\" && ariaProps.orientation === \"vertical\") {\n      element = \"div\";\n    }\n    return element;\n  });\n\n  const separatorAria = createSeparator({\n    get orientation() {\n      return ariaProps.orientation;\n    },\n    get elementType() {\n      return ariaProps.elementType;\n    },\n    get \"aria-label\"() {\n      return ariaProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaProps[\"aria-labelledby\"];\n    },\n    get \"aria-describedby\"() {\n      return ariaProps[\"aria-describedby\"];\n    },\n    get \"aria-details\"() {\n      return ariaProps[\"aria-details\"];\n    },\n    get id() {\n      return ariaProps.id;\n    },\n  });\n\n  const renderValues = createMemo<SeparatorRenderProps>(() => ({\n    orientation: ariaProps.orientation ?? \"horizontal\",\n  }));\n\n  const resolvedClass = createMemo(() => {\n    const cls = local.class;\n    if (typeof cls === \"function\") {\n      return cls(renderValues());\n    }\n    return cls ?? \"solidaria-Separator\";\n  });\n\n  const resolvedStyle = createMemo(() => {\n    const style = local.style;\n    if (typeof style === \"function\") {\n      return style(renderValues());\n    }\n    return style;\n  });\n\n  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));\n\n  return (\n    <ElementTag\n      tag={elementType()}\n      {...domProps()}\n      {...separatorAria.separatorProps}\n      ref={(el: HTMLElement) => assignRef(local.ref, el)}\n      class={resolvedClass()}\n      style={resolvedStyle()}\n      slot={local.slot}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AAgBA,MAAa,mBAAmB,cAAqC,IAAI;;;;;;;;;;;;;;;;AAiBzE,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,aAAa,WAAW,OAAO;EAAC;EAAS;EAAS;EAAO;CAAM,CAAC;CAE9E,MAAM,cAAc,iBAAiB;EACnC,IAAI,UAAU,UAAU,eAAe;EAEvC,IAAI,YAAY,QAAQ,UAAU,gBAAgB,YAChD,UAAU;EAEZ,OAAO;CACT,CAAC;CAED,MAAM,gBAAgB,gBAAgB;EACpC,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,cAAc;GAChB,OAAO,UAAU;EACnB;EACA,IAAI,eAAe;GACjB,OAAO,UAAU;EACnB;EACA,IAAI,oBAAoB;GACtB,OAAO,UAAU;EACnB;EACA,IAAI,qBAAqB;GACvB,OAAO,UAAU;EACnB;EACA,IAAI,iBAAiB;GACnB,OAAO,UAAU;EACnB;EACA,IAAI,KAAK;GACP,OAAO,UAAU;EACnB;CACF,CAAC;CAED,MAAM,eAAe,kBAAwC,EAC3D,aAAa,UAAU,eAAe,aACxC,EAAE;CAEF,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,MAAM,MAAM;EAClB,IAAI,OAAO,QAAQ,YACjB,OAAO,IAAI,aAAa,CAAC;EAE3B,OAAO,OAAO;CAChB,CAAC;CAED,MAAM,gBAAgB,iBAAiB;EACrC,MAAM,QAAQ,MAAM;EACpB,IAAI,OAAO,UAAU,YACnB,OAAO,MAAM,aAAa,CAAC;EAE7B,OAAO;CACT,CAAC;CAED,MAAM,WAAW,iBAAiB,eAAe,WAAW,EAAE,QAAQ,KAAK,CAAC,CAAC;CAE7E,OACE,CAAC,WACC,KAAK,YAAY,OACb,SAAS,OACT,cAAc,gBAClB,MAAM,OAAoBA,YAAU,MAAM,KAAK,EAAE,GACjD,OAAO,cAAc,GACrB,OAAO,cAAc,GACrB,MAAM,MAAM;AAGlB"}

package/dist/SharedElementTransition.d.ts

@@ -1,13 +1,4 @@
-/**
- * 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
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ClassNameOrFunction, type StyleOrFunction, type RenderChildren } from "./utils";
 export declare function useHasSharedElementTransitionScope(): boolean;
 export interface SharedElementTransitionProps {

package/dist/SharedElementTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SharedElementTransition.d.ts","sourceRoot":"","sources":["../src/SharedElementTransition.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,KAAK,GAAG,EAYT,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EAGpB,MAAM,SAAS,CAAC;AAoBjB,wBAAgB,kCAAkC,IAAI,OAAO,CAE5D;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAQxF;AAED,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CACvC;IACC,QAAQ,CAAC,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;CACrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkO3E"}
+{"version":3,"file":"SharedElementTransition.d.ts","sourceRoot":"","sources":["../src/SharedElementTransition.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,cAAc,EAIpB,MAAM,SAAS,CAAC;AAoBjB,wBAAgB,kCAAkC,IAAI,OAAO,CAE5D;AAED,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAMxF;AAED,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CACvC;IACC,QAAQ,CAAC,EAAE,cAAc,CAAC,wBAAwB,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACtD,KAAK,CAAC,EAAE,eAAe,CAAC,wBAAwB,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,cAAc,CAAA;KAAE,CAAC;CACrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAwO3E"}

package/dist/SharedElementTransition.js

@@ -1,6 +1,19 @@
-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";
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/SharedElementTransition.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, onCleanup, untrack, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/SharedElementTransition.tsx
 /**
 * SharedElementTransition primitives for solidaria-components.
@@ -9,9 +22,9 @@ import { Show, createContext, createEffect, createMemo, createRenderEffect, crea
 * parents within a scope. Captures geometry snapshots on unmount and applies
 * transition animations on mount.
 *
-* Parity target: react-aria-components/src/SharedElementTransition.tsx
+* Based on packages/react-aria-components/src/SharedElementTransition.tsx.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+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() : [];
@@ -24,7 +37,7 @@ function useHasSharedElementTransitionScope() {
 * A scope for SharedElements, which animate between parents.
 */
 function SharedElementTransition(props) {
-	return createComponent(SharedElementContext.Provider, {
+	return createComponent(SharedElementContext, {
 		value: { snapshots: {} },
 		get children() {
 			return props.children;
@@ -36,8 +49,8 @@ function SharedElementTransition(props) {
 * 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 scope$1 = useContext(SharedElementContext);
+	if (!scope$1) throw new Error("<SharedElement> must be rendered inside a <SharedElementTransition>");
 	const [local, domProps] = splitProps(props, [
 		"name",
 		"isVisible",
@@ -46,8 +59,9 @@ function SharedElement(props) {
 		"style",
 		"ref"
 	]);
-	const [lifecycle, setLifecycle] = createSignal(local.isVisible === false ? "hidden" : "visible");
-	const [element, setElement] = createSignal();
+	const [lifecycle, setLifecycle] = createSignal(untrack(() => local.isVisible === false ? "hidden" : "visible"));
+	let pendingFreshEnter = false;
+	const [element, setElement] = createSignal(void 0, { ownedWrite: true });
 	let frame;
 	const setRef = (el) => {
 		setElement(el);
@@ -61,30 +75,39 @@ function SharedElement(props) {
 			const style = window.getComputedStyle(el);
 			if (style.transitionProperty !== "none") {
 				const transitionProperty = style.transitionProperty.split(/\s*,\s*/);
-				scope.snapshots[local.name] = {
+				scope$1.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(() => {
+	createRenderEffect(() => local.isVisible !== false, (isVisible) => {
+		if (isVisible && untrack(lifecycle) === "hidden") {
+			pendingFreshEnter = true;
+			setLifecycle("visible");
+		}
+	});
+	createRenderEffect(() => local.isVisible !== false, (isVisible) => {
+		return () => {
 			if (isVisible) storeSnapshot();
-		});
-	}));
-	createEffect(on([() => local.isVisible !== false, element], ([isVisible, el]) => {
+		};
+	});
+	createEffect(() => {
+		return {
+			isVisible: local.isVisible !== false,
+			el: element()
+		};
+	}, ({ isVisible, el }) => {
 		const name = local.name;
 		if (frame != null) {
 			cancelAnimationFrame(frame);
 			frame = void 0;
 		}
 		if (isVisible && el) {
-			const prevSnapshot = scope.snapshots[name];
+			const prevSnapshot = scope$1.snapshots[name];
 			if (prevSnapshot) {
+				pendingFreshEnter = false;
 				setLifecycle("visible");
 				const animations = getAnimations(el);
 				const values = prevSnapshot.style.map(([property, prevValue]) => {
@@ -103,22 +126,23 @@ function SharedElement(props) {
 					frame = void 0;
 					for (const [property, value] of values) el.style.setProperty(property, value);
 				});
-				delete scope.snapshots[name];
-			} else {
-				queueMicrotask(() => setLifecycle("entering"));
+				delete scope$1.snapshots[name];
+			} else if (pendingFreshEnter) {
+				pendingFreshEnter = false;
+				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");
-		});
-	}));
+		} else if (!isVisible) {
+			setLifecycle("hidden");
+			const snapshotName = name;
+			queueMicrotask(() => {
+				if (scope$1.snapshots[snapshotName]) delete scope$1.snapshots[snapshotName];
+			});
+		}
+	});
 	onCleanup(() => {
 		if (frame != null) cancelAnimationFrame(frame);
 	});
@@ -140,22 +164,26 @@ function SharedElement(props) {
 		},
 		get children() {
 			var _el$ = getNextElement(_tmpl$);
-			use(setRef, _el$);
-			spread(_el$, mergeProps(filteredDomProps, {
-				get ["class"]() {
+			ref(() => {
+				return setRef;
+			}, _el$);
+			spread(_el$, [filteredDomProps, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				},
-				get ["data-entering"]() {
-					return lifecycle() === "entering" || void 0;
+				get "data-entering"() {
+					return dataAttr(lifecycle() === "entering");
 				},
-				get ["data-exiting"]() {
-					return lifecycle() === "exiting" || void 0;
+				get "data-exiting"() {
+					return dataAttr(lifecycle() === "exiting");
 				}
-			}), false, true);
-			insert(_el$, () => renderProps.renderChildren());
+			}], true);
+			insert(_el$, scope(() => {
+				return renderProps.renderChildren();
+			}));
 			runHydrationEvents();
 			return _el$;
 		}

package/dist/SharedElementTransition.js.map

@@ -1 +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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"}
+{"version":3,"file":"SharedElementTransition.js","names":["<SharedElementContext value={scope}>{props.children}</SharedElementContext>","value={scope}","<Show when={lifecycle() !== \"hidden\"}>\n      <div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={dataAttr(lifecycle() === \"entering\")}\n        data-exiting={dataAttr(lifecycle() === \"exiting\")}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>","ref={setRef}","{renderProps.renderChildren()}","<div\n        ref={setRef}\n        {...filteredDomProps()}\n        class={renderProps.class()}\n        style={renderProps.style()}\n        data-entering={dataAttr(lifecycle() === \"entering\")}\n        data-exiting={dataAttr(lifecycle() === \"exiting\")}\n      >\n        {renderProps.renderChildren()}\n      </div>"],"sources":["../src/SharedElementTransition.tsx"],"sourcesContent":["/*\n * Copyright 2025 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/SharedElementTransition.tsx\n\n/**\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 * Based on packages/react-aria-components/src/SharedElementTransition.tsx.\n */\n\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createRenderEffect,\n  createSignal,\n  onCleanup,\n  untrack,\n  useContext,\n  Show,\n} from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type RenderChildren,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\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 <SharedElementContext value={scope}>{props.children}</SharedElementContext>;\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    untrack(() => (local.isVisible === false ? \"hidden\" : \"visible\")),\n  );\n  // Fresh-enter (data-entering) is only for elements that were hidden and then\n  // shown. An element that starts visible must not queue the enter microtask on\n  // first mount — that microtask would otherwise fire after a later hide and\n  // resurrect the outgoing node as `data-entering`.\n  let pendingFreshEnter = false;\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>(undefined, {\n    ownedWrite: true,\n  });\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    () => local.isVisible !== false,\n    (isVisible) => {\n      if (isVisible && untrack(lifecycle) === \"hidden\") {\n        pendingFreshEnter = true;\n        setLifecycle(\"visible\");\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    () => local.isVisible !== false,\n    (isVisible) => {\n      return () => {\n        if (isVisible) {\n          storeSnapshot();\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    () => {\n      const isVisible = local.isVisible !== false;\n      const el = element();\n      return { isVisible, el };\n    },\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          pendingFreshEnter = false;\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 if (pendingFreshEnter) {\n          // No previous instance exists, apply the entering state.\n          pendingFreshEnter = false;\n          setLifecycle(\"entering\");\n          frame = requestAnimationFrame(() => {\n            frame = undefined;\n            setLifecycle(\"visible\");\n          });\n        }\n      } else if (!isVisible) {\n        // Unmount immediately. The outgoing snapshot was stored in the\n        // store-phase cleanup before this user effect, so a sibling FLIP in\n        // the same flush can still consume it. Deferring hide to a microtask\n        // left the outgoing node mounted after flush() (React unmounts when\n        // isVisible is false). Drop an unconsumed snapshot after the flush so\n        // a later same-name mount does not FLIP from a stale rect.\n        setLifecycle(\"hidden\");\n        const snapshotName = name;\n        queueMicrotask(() => {\n          if (scope.snapshots[snapshotName]) {\n            delete scope.snapshots[snapshotName];\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={dataAttr(lifecycle() === \"entering\")}\n        data-exiting={dataAttr(lifecycle() === \"exiting\")}\n      >\n        {renderProps.renderChildren()}\n      </div>\n    </Show>\n  );\n}\n"],"mappings":"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"}

package/dist/SharedElementTransition.jsx

@@ -1,5 +1,18 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-import { Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, on, onCleanup, splitProps, untrack, useContext } from "solid-js";
+/*
+* Copyright 2025 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/SharedElementTransition.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, onCleanup, untrack, useContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/SharedElementTransition.tsx
 /**
 * SharedElementTransition primitives for solidaria-components.
@@ -8,7 +21,7 @@ import { Show, createContext, createEffect, createMemo, createRenderEffect, crea
 * parents within a scope. Captures geometry snapshots on unmount and applies
 * transition animations on mount.
 *
-* Parity target: react-aria-components/src/SharedElementTransition.tsx
+* Based on packages/react-aria-components/src/SharedElementTransition.tsx.
 */
 /** Safe wrapper — jsdom doesn't implement the Web Animations API. */
 function getAnimations(el) {
@@ -23,7 +36,7 @@ function useHasSharedElementTransitionScope() {
 */
 function SharedElementTransition(props) {
 	const scope = { snapshots: {} };
-	return <SharedElementContext.Provider value={scope}>{props.children}</SharedElementContext.Provider>;
+	return <SharedElementContext value={scope}>{props.children}</SharedElementContext>;
 }
 /**
 * An element that animates between its old and new position when moving
@@ -40,8 +53,9 @@ function SharedElement(props) {
 		"style",
 		"ref"
 	]);
-	const [lifecycle, setLifecycle] = createSignal(local.isVisible === false ? "hidden" : "visible");
-	const [element, setElement] = createSignal();
+	const [lifecycle, setLifecycle] = createSignal(untrack(() => local.isVisible === false ? "hidden" : "visible"));
+	let pendingFreshEnter = false;
+	const [element, setElement] = createSignal(void 0, { ownedWrite: true });
 	let frame;
 	const setRef = (el) => {
 		setElement(el);
@@ -62,15 +76,23 @@ function SharedElement(props) {
 			}
 		}
 	};
-	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
-		if (isVisible && untrack(lifecycle) === "hidden") setLifecycle("visible");
-	}));
-	createRenderEffect(on(() => local.isVisible !== false, (isVisible) => {
-		onCleanup(() => {
+	createRenderEffect(() => local.isVisible !== false, (isVisible) => {
+		if (isVisible && untrack(lifecycle) === "hidden") {
+			pendingFreshEnter = true;
+			setLifecycle("visible");
+		}
+	});
+	createRenderEffect(() => local.isVisible !== false, (isVisible) => {
+		return () => {
 			if (isVisible) storeSnapshot();
-		});
-	}));
-	createEffect(on([() => local.isVisible !== false, element], ([isVisible, el]) => {
+		};
+	});
+	createEffect(() => {
+		return {
+			isVisible: local.isVisible !== false,
+			el: element()
+		};
+	}, ({ isVisible, el }) => {
 		const name = local.name;
 		if (frame != null) {
 			cancelAnimationFrame(frame);
@@ -79,6 +101,7 @@ function SharedElement(props) {
 		if (isVisible && el) {
 			const prevSnapshot = scope.snapshots[name];
 			if (prevSnapshot) {
+				pendingFreshEnter = false;
 				setLifecycle("visible");
 				const animations = getAnimations(el);
 				const values = prevSnapshot.style.map(([property, prevValue]) => {
@@ -98,21 +121,22 @@ function SharedElement(props) {
 					for (const [property, value] of values) el.style.setProperty(property, value);
 				});
 				delete scope.snapshots[name];
-			} else {
-				queueMicrotask(() => setLifecycle("entering"));
+			} else if (pendingFreshEnter) {
+				pendingFreshEnter = false;
+				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");
-		});
-	}));
+		} else if (!isVisible) {
+			setLifecycle("hidden");
+			const snapshotName = name;
+			queueMicrotask(() => {
+				if (scope.snapshots[snapshotName]) delete scope.snapshots[snapshotName];
+			});
+		}
+	});
 	onCleanup(() => {
 		if (frame != null) cancelAnimationFrame(frame);
 	});
@@ -129,7 +153,7 @@ function SharedElement(props) {
 	}));
 	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}>
+      <div ref={setRef} {...filteredDomProps()} class={renderProps.class()} style={renderProps.style()} data-entering={dataAttr(lifecycle() === "entering")} data-exiting={dataAttr(lifecycle() === "exiting")}>
         {renderProps.renderChildren()}
       </div>
     </Show>;