@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/buttongroup/index.js

@@ -1,16 +1,37 @@
-import { useProviderProps } from "../provider/index.js";
+/*
+* Copyright 2024 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-spectrum/s2/src/ButtonGroup.tsx
+import { a as useProviderProps } from "../_chunk/provider.js";
 import { n as ButtonContext, r as LinkButtonContext } from "../_chunk/context.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
 import { f as useButtonGroupContext, o as s2ButtonGroup } from "../_chunk/s2-action-button-styles.js";
-/* empty css                                                                               */
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { createEffect, createSignal, mergeProps as mergeProps$1, onCleanup, onMount, splitProps } from "solid-js";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, spread, template } from "@solidjs/web";
+import { createEffect, createSignal, onCleanup, onSettled } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/buttongroup/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function ButtonGroup(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);
-	const [local, domProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps$1(flags, contextProps ?? {}, props);
+	const [local, domProps] = splitProps(merged, [
 		"UNSAFE_className",
 		"UNSAFE_style",
 		"styles",
@@ -27,10 +48,11 @@ function ButtonGroup(props) {
 	const align = () => local.align ?? "start";
 	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
 	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
-	const [hasOverflow, setHasOverflow] = createSignal(false);
+	const [hasOverflow, setHasOverflow] = createSignal(false, { ownedWrite: true });
 	let groupElement;
 	const assignGroupRefs = mergeContextRefs(contextProps?.ref, props.ref);
 	let resizeObserver;
+	let mutationObserver;
 	let measurementFrame = 0;
 	const effectiveOrientation = () => orientation() === "vertical" || hasOverflow() ? "vertical" : "horizontal";
 	const className = () => [local.UNSAFE_className, s2ButtonGroup({
@@ -44,10 +66,11 @@ function ButtonGroup(props) {
 			return;
 		}
 		const maxX = groupElement.offsetWidth + 1;
-		setHasOverflow(Array.from(groupElement.children).some((child) => {
+		const overflows = Array.from(groupElement.children).some((child) => {
 			const element = child;
 			return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;
-		}));
+		});
+		setHasOverflow(overflows);
 	};
 	const scheduleOverflowCheck = () => {
 		if (typeof requestAnimationFrame !== "function") {
@@ -65,10 +88,21 @@ function ButtonGroup(props) {
 			measureOverflow();
 		});
 	};
-	onMount(() => {
-		if (typeof ResizeObserver !== "undefined" && groupElement?.parentElement) {
+	onSettled(() => {
+		if (typeof ResizeObserver !== "undefined") {
 			resizeObserver = new ResizeObserver(scheduleOverflowCheck);
-			resizeObserver.observe(groupElement.parentElement);
+			if (groupElement) {
+				resizeObserver.observe(groupElement);
+				if (groupElement.parentElement) resizeObserver.observe(groupElement.parentElement);
+			}
+		}
+		if (typeof MutationObserver !== "undefined" && groupElement) {
+			mutationObserver = new MutationObserver(scheduleOverflowCheck);
+			mutationObserver.observe(groupElement, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
 		}
 		scheduleOverflowCheck();
 	});
@@ -76,13 +110,14 @@ function ButtonGroup(props) {
 		orientation();
 		align();
 		size();
-		local.children;
 		local.UNSAFE_style;
+	}, () => {
 		scheduleOverflowCheck();
 	});
 	onCleanup(() => {
 		if (measurementFrame) cancelAnimationFrame(measurementFrame);
 		resizeObserver?.disconnect();
+		mutationObserver?.disconnect();
 	});
 	const contextValue = {
 		get size() {
@@ -92,38 +127,38 @@ function ButtonGroup(props) {
 			return local.isDisabled;
 		},
 		get styles() {
-			return " _va151";
+			return " _va17";
 		}
 	};
 	if (local.isHidden) return null;
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		use((element) => {
+	var _el$ = getNextElement(_tmpl$);
+	ref(() => {
+		return (element) => {
 			groupElement = element;
 			assignGroupRefs(element);
-		}, _el$);
-		spread(_el$, mergeProps(domProps, {
-			get ["class"]() {
-				return className();
-			},
-			get style() {
-				return mergedUnsafeStyle();
-			}
-		}), false, true);
-		insert(_el$, createComponent(ButtonContext.Provider, {
-			value: contextValue,
-			get children() {
-				return createComponent(LinkButtonContext.Provider, {
-					value: contextValue,
-					get children() {
-						return local.children;
-					}
-				});
-			}
-		}));
-		runHydrationEvents();
-		return _el$;
-	})();
+		};
+	}, _el$);
+	spread(_el$, [domProps, {
+		get "class"() {
+			return className();
+		},
+		get style() {
+			return mergedUnsafeStyle();
+		}
+	}], true);
+	insert(_el$, createComponent(ButtonContext, {
+		value: contextValue,
+		get children() {
+			return createComponent(LinkButtonContext, {
+				value: contextValue,
+				get children() {
+					return local.children;
+				}
+			});
+		}
+	}));
+	runHydrationEvents();
+	return _el$;
 }
 //#endregion
 export { ButtonGroup };

package/dist/buttongroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/buttongroup/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  type JSX,\n  splitProps,\n} from \"solid-js\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ButtonContext, LinkButtonContext } from \"../button/context\";\nimport { useButtonGroupContext } from \"../button/group-context\";\nimport { s2ButtonGroup } from \"../button/s2-action-button-styles\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"../button/spectrum-context\";\nimport type { ButtonSize } from \"../button/types\";\n\nexport interface ButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The Buttons contained within the ButtonGroup. */\n  children?: JSX.Element;\n  /** The axis the ButtonGroup should align with. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The alignment of the Buttons within the ButtonGroup. @default 'start' */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The size of the Buttons within the ButtonGroup. @default 'M' */\n  size?: ButtonSize;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** @internal Whether a parent context should suppress rendering the group. */\n  isHidden?: boolean;\n}\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"styles\",\n    \"children\",\n    \"orientation\",\n    \"align\",\n    \"size\",\n    \"isDisabled\",\n    \"isHidden\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const align = () => local.align ?? \"start\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const [hasOverflow, setHasOverflow] = createSignal(false);\n  let groupElement: HTMLDivElement | undefined;\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  let resizeObserver: ResizeObserver | undefined;\n  let measurementFrame = 0;\n\n  const effectiveOrientation = () =>\n    orientation() === \"vertical\" || hasOverflow() ? \"vertical\" : \"horizontal\";\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ButtonGroup(\n        {\n          size: size(),\n          orientation: effectiveOrientation(),\n          align: align(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const measureOverflow = () => {\n    if (!groupElement || orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    const maxX = groupElement.offsetWidth + 1;\n    const overflows = Array.from(groupElement.children).some((child) => {\n      const element = child as HTMLElement;\n      return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;\n    });\n    setHasOverflow(overflows);\n  };\n\n  const scheduleOverflowCheck = () => {\n    if (typeof requestAnimationFrame !== \"function\") {\n      measureOverflow();\n      return;\n    }\n\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n\n    if (orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    setHasOverflow(false);\n    measurementFrame = requestAnimationFrame(() => {\n      measurementFrame = 0;\n      measureOverflow();\n    });\n  };\n\n  onMount(() => {\n    if (typeof ResizeObserver !== \"undefined\" && groupElement?.parentElement) {\n      resizeObserver = new ResizeObserver(scheduleOverflowCheck);\n      resizeObserver.observe(groupElement.parentElement);\n    }\n    scheduleOverflowCheck();\n  });\n\n  createEffect(() => {\n    orientation();\n    align();\n    size();\n    local.children;\n    local.UNSAFE_style;\n    scheduleOverflowCheck();\n  });\n\n  onCleanup(() => {\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n    resizeObserver?.disconnect();\n  });\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get styles() {\n      return style({ flexShrink: 0 });\n    },\n  };\n\n  if (local.isHidden) {\n    return null;\n  }\n\n  return (\n    <div\n      {...domProps}\n      ref={(element) => {\n        groupElement = element;\n        assignGroupRefs(element);\n      }}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <ButtonContext.Provider value={contextValue}>\n        <LinkButtonContext.Provider value={contextValue}>\n          {local.children}\n        </LinkButtonContext.Provider>\n      </ButtonContext.Provider>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/buttongroup/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 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-spectrum/s2/src/ButtonGroup.tsx\n\n// Port of packages/@react-spectrum/s2/src/ButtonGroup.tsx.\nimport { createEffect, createSignal, onCleanup, onSettled } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ButtonContext, LinkButtonContext } from \"../button/context\";\nimport { useButtonGroupContext } from \"../button/group-context\";\nimport { s2ButtonGroup } from \"../button/s2-action-button-styles\";\nimport { useProviderProps, type ProviderInheritedProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"../button/spectrum-context\";\nimport type { ButtonSize } from \"../button/types\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface ButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The Buttons contained within the ButtonGroup. */\n  children?: JSX.Element;\n  /** The axis the ButtonGroup should align with. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The alignment of the Buttons within the ButtonGroup. @default 'start' */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The size of the Buttons within the ButtonGroup. @default 'M' */\n  size?: ButtonSize;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** @internal Whether a parent context should suppress rendering the group. */\n  isHidden?: boolean;\n}\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props) as ButtonGroupProps & ProviderInheritedProps;\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);\n  const merged = mergeProps<ButtonGroupProps>(flags, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"styles\",\n    \"children\",\n    \"orientation\",\n    \"align\",\n    \"size\",\n    \"isDisabled\",\n    \"isHidden\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const align = () => local.align ?? \"start\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const [hasOverflow, setHasOverflow] = createSignal(false, { ownedWrite: true });\n  let groupElement: HTMLDivElement | undefined;\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  let resizeObserver: ResizeObserver | undefined;\n  let mutationObserver: MutationObserver | undefined;\n  let measurementFrame = 0;\n\n  const effectiveOrientation = () =>\n    orientation() === \"vertical\" || hasOverflow() ? \"vertical\" : \"horizontal\";\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ButtonGroup(\n        {\n          size: size(),\n          orientation: effectiveOrientation(),\n          align: align(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const measureOverflow = () => {\n    if (!groupElement || orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    const maxX = groupElement.offsetWidth + 1;\n    const overflows = Array.from(groupElement.children).some((child) => {\n      const element = child as HTMLElement;\n      return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;\n    });\n    setHasOverflow(overflows);\n  };\n\n  const scheduleOverflowCheck = () => {\n    if (typeof requestAnimationFrame !== \"function\") {\n      measureOverflow();\n      return;\n    }\n\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n\n    if (orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    setHasOverflow(false);\n    measurementFrame = requestAnimationFrame(() => {\n      measurementFrame = 0;\n      measureOverflow();\n    });\n  };\n\n  onSettled(() => {\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(scheduleOverflowCheck);\n      if (groupElement) {\n        resizeObserver.observe(groupElement);\n        if (groupElement.parentElement) {\n          resizeObserver.observe(groupElement.parentElement);\n        }\n      }\n    }\n\n    // Upstream puts `children` in the dependencies of its overflow measurement\n    // (`ButtonGroup.tsx:157`). A width-constrained group keeps its own border\n    // box when a child is added, removed or relabelled, so no ResizeObserver\n    // fires; the rendered DOM is what changed. Same shape as the breadcrumbs\n    // overflow observer (`../breadcrumbs/index.tsx`).\n    if (typeof MutationObserver !== \"undefined\" && groupElement) {\n      mutationObserver = new MutationObserver(scheduleOverflowCheck);\n      mutationObserver.observe(groupElement, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    scheduleOverflowCheck();\n  });\n\n  // Do not read `local.children` here: mergeProps children getters instantiate\n  // JSX (Show/Button) and that is PRIMITIVE_IN_FORBIDDEN_SCOPE inside a tracked\n  // effect. Child changes arrive through the MutationObserver above instead.\n  createEffect(\n    () => {\n      orientation();\n      align();\n      size();\n      local.UNSAFE_style;\n    },\n    () => {\n      scheduleOverflowCheck();\n    },\n  );\n\n  onCleanup(() => {\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n    resizeObserver?.disconnect();\n    mutationObserver?.disconnect();\n  });\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get styles() {\n      return style({ flexShrink: 0 });\n    },\n  };\n\n  if (local.isHidden) {\n    return null;\n  }\n\n  return (\n    <div\n      {...domProps}\n      ref={(element) => {\n        groupElement = element;\n        assignGroupRefs(element);\n      }}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <ButtonContext value={contextValue}>\n        <LinkButtonContext value={contextValue}>{local.children}</LinkButtonContext>\n      </ButtonContext>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/buttongroup/index.jsx

@@ -1,13 +1,35 @@
-import { useProviderProps } from "../provider/index.jsx";
+/*
+* Copyright 2024 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-spectrum/s2/src/ButtonGroup.tsx
+import { a as useProviderProps } from "../_chunk/provider.jsx";
 import { n as ButtonContext, r as LinkButtonContext } from "../_chunk/context.jsx";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
 import { f as useButtonGroupContext, o as s2ButtonGroup } from "../_chunk/s2-action-button-styles.jsx";
-import { createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { createEffect, createSignal, onCleanup, onSettled } from "solid-js";
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/buttongroup/index.tsx
 function ButtonGroup(props) {
 	const providerProps = useProviderProps(props);
+	const [flags] = splitProps(providerProps, [
+		"isQuiet",
+		"isEmphasized",
+		"isDisabled",
+		"isRequired",
+		"isReadOnly",
+		"validationState"
+	]);
 	const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);
-	const [local, domProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+	const merged = mergeProps(flags, contextProps ?? {}, props);
+	const [local, domProps] = splitProps(merged, [
 		"UNSAFE_className",
 		"UNSAFE_style",
 		"styles",
@@ -24,10 +46,11 @@ function ButtonGroup(props) {
 	const align = () => local.align ?? "start";
 	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
 	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
-	const [hasOverflow, setHasOverflow] = createSignal(false);
+	const [hasOverflow, setHasOverflow] = createSignal(false, { ownedWrite: true });
 	let groupElement;
 	const assignGroupRefs = mergeContextRefs(contextProps?.ref, props.ref);
 	let resizeObserver;
+	let mutationObserver;
 	let measurementFrame = 0;
 	const effectiveOrientation = () => orientation() === "vertical" || hasOverflow() ? "vertical" : "horizontal";
 	const className = () => [local.UNSAFE_className, s2ButtonGroup({
@@ -41,10 +64,11 @@ function ButtonGroup(props) {
 			return;
 		}
 		const maxX = groupElement.offsetWidth + 1;
-		setHasOverflow(Array.from(groupElement.children).some((child) => {
+		const overflows = Array.from(groupElement.children).some((child) => {
 			const element = child;
 			return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;
-		}));
+		});
+		setHasOverflow(overflows);
 	};
 	const scheduleOverflowCheck = () => {
 		if (typeof requestAnimationFrame !== "function") {
@@ -62,10 +86,21 @@ function ButtonGroup(props) {
 			measureOverflow();
 		});
 	};
-	onMount(() => {
-		if (typeof ResizeObserver !== "undefined" && groupElement?.parentElement) {
+	onSettled(() => {
+		if (typeof ResizeObserver !== "undefined") {
 			resizeObserver = new ResizeObserver(scheduleOverflowCheck);
-			resizeObserver.observe(groupElement.parentElement);
+			if (groupElement) {
+				resizeObserver.observe(groupElement);
+				if (groupElement.parentElement) resizeObserver.observe(groupElement.parentElement);
+			}
+		}
+		if (typeof MutationObserver !== "undefined" && groupElement) {
+			mutationObserver = new MutationObserver(scheduleOverflowCheck);
+			mutationObserver.observe(groupElement, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
 		}
 		scheduleOverflowCheck();
 	});
@@ -73,13 +108,14 @@ function ButtonGroup(props) {
 		orientation();
 		align();
 		size();
-		local.children;
 		local.UNSAFE_style;
+	}, () => {
 		scheduleOverflowCheck();
 	});
 	onCleanup(() => {
 		if (measurementFrame) cancelAnimationFrame(measurementFrame);
 		resizeObserver?.disconnect();
+		mutationObserver?.disconnect();
 	});
 	const contextValue = {
 		get size() {
@@ -89,7 +125,7 @@ function ButtonGroup(props) {
 			return local.isDisabled;
 		},
 		get styles() {
-			return " _va151";
+			return " _va17";
 		}
 	};
 	if (local.isHidden) return null;
@@ -97,11 +133,9 @@ function ButtonGroup(props) {
 		groupElement = element;
 		assignGroupRefs(element);
 	}} class={className()} style={mergedUnsafeStyle()}>
-      <ButtonContext.Provider value={contextValue}>
-        <LinkButtonContext.Provider value={contextValue}>
-          {local.children}
-        </LinkButtonContext.Provider>
-      </ButtonContext.Provider>
+      <ButtonContext value={contextValue}>
+        <LinkButtonContext value={contextValue}>{local.children}</LinkButtonContext>
+      </ButtonContext>
     </div>;
 }
 //#endregion

package/dist/buttongroup/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/buttongroup/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  type JSX,\n  splitProps,\n} from \"solid-js\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ButtonContext, LinkButtonContext } from \"../button/context\";\nimport { useButtonGroupContext } from \"../button/group-context\";\nimport { s2ButtonGroup } from \"../button/s2-action-button-styles\";\nimport { useProviderProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"../button/spectrum-context\";\nimport type { ButtonSize } from \"../button/types\";\n\nexport interface ButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The Buttons contained within the ButtonGroup. */\n  children?: JSX.Element;\n  /** The axis the ButtonGroup should align with. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The alignment of the Buttons within the ButtonGroup. @default 'start' */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The size of the Buttons within the ButtonGroup. @default 'M' */\n  size?: ButtonSize;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** @internal Whether a parent context should suppress rendering the group. */\n  isHidden?: boolean;\n}\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"styles\",\n    \"children\",\n    \"orientation\",\n    \"align\",\n    \"size\",\n    \"isDisabled\",\n    \"isHidden\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const align = () => local.align ?? \"start\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const [hasOverflow, setHasOverflow] = createSignal(false);\n  let groupElement: HTMLDivElement | undefined;\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  let resizeObserver: ResizeObserver | undefined;\n  let measurementFrame = 0;\n\n  const effectiveOrientation = () =>\n    orientation() === \"vertical\" || hasOverflow() ? \"vertical\" : \"horizontal\";\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ButtonGroup(\n        {\n          size: size(),\n          orientation: effectiveOrientation(),\n          align: align(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const measureOverflow = () => {\n    if (!groupElement || orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    const maxX = groupElement.offsetWidth + 1;\n    const overflows = Array.from(groupElement.children).some((child) => {\n      const element = child as HTMLElement;\n      return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;\n    });\n    setHasOverflow(overflows);\n  };\n\n  const scheduleOverflowCheck = () => {\n    if (typeof requestAnimationFrame !== \"function\") {\n      measureOverflow();\n      return;\n    }\n\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n\n    if (orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    setHasOverflow(false);\n    measurementFrame = requestAnimationFrame(() => {\n      measurementFrame = 0;\n      measureOverflow();\n    });\n  };\n\n  onMount(() => {\n    if (typeof ResizeObserver !== \"undefined\" && groupElement?.parentElement) {\n      resizeObserver = new ResizeObserver(scheduleOverflowCheck);\n      resizeObserver.observe(groupElement.parentElement);\n    }\n    scheduleOverflowCheck();\n  });\n\n  createEffect(() => {\n    orientation();\n    align();\n    size();\n    local.children;\n    local.UNSAFE_style;\n    scheduleOverflowCheck();\n  });\n\n  onCleanup(() => {\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n    resizeObserver?.disconnect();\n  });\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get styles() {\n      return style({ flexShrink: 0 });\n    },\n  };\n\n  if (local.isHidden) {\n    return null;\n  }\n\n  return (\n    <div\n      {...domProps}\n      ref={(element) => {\n        groupElement = element;\n        assignGroupRefs(element);\n      }}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <ButtonContext.Provider value={contextValue}>\n        <LinkButtonContext.Provider value={contextValue}>\n          {local.children}\n        </LinkButtonContext.Provider>\n      </ButtonContext.Provider>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAE,YAAuB,OAAA;CACvB,MAAK,gBAAO,iBAAA,KAAA;CACZ,MAAQ,eAAQ,uBAAiB,sBAAA,GAAA,MAAA,IAAA;sCACrB,WAAa,eAAgB,gBAAM,CAAA,GAAA,KAAA,GAAA;EAE1C;EACD;EACE;EACN;EACI;EACJ;EACI;EACJ;EACI;EACE;CACJ,CAAC;CACH,MAAO,aAAU,MAAA,QAAA;CACf,MAAE,oBAAsB,MAAK,eAAgB;CAC/C,MAAA,cAAoB,MAAA,SAAA;CAClB,MAAE,qBAAiB,mBAAoB,cAAA,QAAA,MAAA,MAAA;CACzC,MAAQ,0BAAY,wBAAA,cAAA,cAAA,MAAA,YAAA;CAClB,MAAE,CAAA,aAAe,kBAAqB,aAAU,KAAQ;CAC1D,IAAA;CACE,MAAE,kBAAkB,iBAAsB,cAE/B,KAAC,MAAU,GAA8B;CACtD,IAAA;CACF,IAAA,mBAAA;;CAEA,MAAO,kBAAS,CACR,MAAA,kBACA,cAAe;EACP,MAAC,KAAU;EACX,aAAY,qBAAmB;EAC1C,OAAiB,MAAA;CACjB,GAAA,aAAa,CAAA,CACb,EAAA,OAAO,OAAA,EAAA,KAAA,GAAA;CACR,MAAC,wBAAS;EACT,IAAA,CAAA,gBAAY,YAAA,MAAA,cAAA;GACN,eAAA,KAAA;GACD;EACL;EACA,MAAS,OAAA,aAAA,cAAA;EAKN,eAJC,MAAA,KAAA,aAAA,QAAA,EAAA,MAAA,UAAA;GACL,MAAA,UAAA;GACQ,OAAO,QAAQ,aAAW,KAAA,QAAA,aAAA,QAAA,cAAA;EAC9B,CACoB,CAAA;CAC1B;CACA,MAAM,8BAAwB;EAC5B,IAAA,OAAA,0BAAsC,YAAc;GAC/C,gBAAa;GAChB;EACE;EACH,IAAA,kBACK,qBAAe,gBAAe;EAElC,IAAA,YAAgB,MAAA,cAAiB;GACjC,eAAoB,KAAA;;EAElB;EACJ,eAAmB,KAAA;EACf,mBAAgB,4BAAA;GACpB,mBAAA;GACQ,gBAAgB;EACtB,CAAA;CACF;CACA,cAAY;EACR,IAAE,OAAA,mBAAa,eAAsB,cAAA,eAAA;GACnC,iBAAc,IAAA,eAAA,qBAAA;GACf,eAAA,QAAA,aAAA,aAAA;EACD;EACD,sBAAA;CACH,CAAA;CACA,mBAAiB;EACd,YAAS;;EAER,KAAA;EACA,MAAC;EACH,MAAA;EACA,sBAAM;CACR,CAAA;;EAEA,IAAM,kBACA,qBAAuB,gBAAa;EAExC,gBAAe,WAAc;CAC/B,CAAC;CACD,MAAA,eAAe;EAChB,IAAA,OAAA;;EAEK;EACA,IAAA,aAAO;GACT,OAAA,MAAiB;EACjB;EACF,IAAA,SAAA;;EAEI;CACJ;CACA,IAAA,MAAA,UAAA,OAAA;CAGA,OAAE,CAAA,QAAe,UAAM,MAAA,YAAA;EACrB,eAAM;EACR,gBAAA,OAAA;;MAEA,CAAA,cAAe,SAAM,OAAA,cAAA;QACrB,CAAA,kBAAmB,SAAA,OAAA,cAA4B;WAC7C,MAAA,SAAoB;QACpB,EAAA,kBAAiB,SAAA;MACjB,EAAA,cAAA,SAAA;IACH,EAAA"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/buttongroup/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 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-spectrum/s2/src/ButtonGroup.tsx\n\n// Port of packages/@react-spectrum/s2/src/ButtonGroup.tsx.\nimport { createEffect, createSignal, onCleanup, onSettled } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ButtonContext, LinkButtonContext } from \"../button/context\";\nimport { useButtonGroupContext } from \"../button/group-context\";\nimport { s2ButtonGroup } from \"../button/s2-action-button-styles\";\nimport { useProviderProps, type ProviderInheritedProps } from \"../provider\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n} from \"../button/spectrum-context\";\nimport type { ButtonSize } from \"../button/types\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface ButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The Buttons contained within the ButtonGroup. */\n  children?: JSX.Element;\n  /** The axis the ButtonGroup should align with. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** The alignment of the Buttons within the ButtonGroup. @default 'start' */\n  align?: \"start\" | \"end\" | \"center\";\n  /** The size of the Buttons within the ButtonGroup. @default 'M' */\n  size?: ButtonSize;\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString;\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  /** @internal Whether a parent context should suppress rendering the group. */\n  isHidden?: boolean;\n}\n\nexport function ButtonGroup(props: ButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props) as ButtonGroupProps & ProviderInheritedProps;\n  const [flags] = splitProps(providerProps, [\n    \"isQuiet\",\n    \"isEmphasized\",\n    \"isDisabled\",\n    \"isRequired\",\n    \"isReadOnly\",\n    \"validationState\",\n  ]);\n  const contextProps = getSlottedContextProps(useButtonGroupContext(), props.slot);\n  const merged = mergeProps<ButtonGroupProps>(flags, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"styles\",\n    \"children\",\n    \"orientation\",\n    \"align\",\n    \"size\",\n    \"isDisabled\",\n    \"isHidden\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const align = () => local.align ?? \"start\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const [hasOverflow, setHasOverflow] = createSignal(false, { ownedWrite: true });\n  let groupElement: HTMLDivElement | undefined;\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  let resizeObserver: ResizeObserver | undefined;\n  let mutationObserver: MutationObserver | undefined;\n  let measurementFrame = 0;\n\n  const effectiveOrientation = () =>\n    orientation() === \"vertical\" || hasOverflow() ? \"vertical\" : \"horizontal\";\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ButtonGroup(\n        {\n          size: size(),\n          orientation: effectiveOrientation(),\n          align: align(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const measureOverflow = () => {\n    if (!groupElement || orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    const maxX = groupElement.offsetWidth + 1;\n    const overflows = Array.from(groupElement.children).some((child) => {\n      const element = child as HTMLElement;\n      return element.offsetLeft < 0 || element.offsetLeft + element.offsetWidth > maxX;\n    });\n    setHasOverflow(overflows);\n  };\n\n  const scheduleOverflowCheck = () => {\n    if (typeof requestAnimationFrame !== \"function\") {\n      measureOverflow();\n      return;\n    }\n\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n\n    if (orientation() !== \"horizontal\") {\n      setHasOverflow(false);\n      return;\n    }\n\n    setHasOverflow(false);\n    measurementFrame = requestAnimationFrame(() => {\n      measurementFrame = 0;\n      measureOverflow();\n    });\n  };\n\n  onSettled(() => {\n    if (typeof ResizeObserver !== \"undefined\") {\n      resizeObserver = new ResizeObserver(scheduleOverflowCheck);\n      if (groupElement) {\n        resizeObserver.observe(groupElement);\n        if (groupElement.parentElement) {\n          resizeObserver.observe(groupElement.parentElement);\n        }\n      }\n    }\n\n    // Upstream puts `children` in the dependencies of its overflow measurement\n    // (`ButtonGroup.tsx:157`). A width-constrained group keeps its own border\n    // box when a child is added, removed or relabelled, so no ResizeObserver\n    // fires; the rendered DOM is what changed. Same shape as the breadcrumbs\n    // overflow observer (`../breadcrumbs/index.tsx`).\n    if (typeof MutationObserver !== \"undefined\" && groupElement) {\n      mutationObserver = new MutationObserver(scheduleOverflowCheck);\n      mutationObserver.observe(groupElement, {\n        childList: true,\n        subtree: true,\n        characterData: true,\n      });\n    }\n\n    scheduleOverflowCheck();\n  });\n\n  // Do not read `local.children` here: mergeProps children getters instantiate\n  // JSX (Show/Button) and that is PRIMITIVE_IN_FORBIDDEN_SCOPE inside a tracked\n  // effect. Child changes arrive through the MutationObserver above instead.\n  createEffect(\n    () => {\n      orientation();\n      align();\n      size();\n      local.UNSAFE_style;\n    },\n    () => {\n      scheduleOverflowCheck();\n    },\n  );\n\n  onCleanup(() => {\n    if (measurementFrame) {\n      cancelAnimationFrame(measurementFrame);\n    }\n    resizeObserver?.disconnect();\n    mutationObserver?.disconnect();\n  });\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get styles() {\n      return style({ flexShrink: 0 });\n    },\n  };\n\n  if (local.isHidden) {\n    return null;\n  }\n\n  return (\n    <div\n      {...domProps}\n      ref={(element) => {\n        groupElement = element;\n        assignGroupRefs(element);\n      }}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <ButtonContext value={contextValue}>\n        <LinkButtonContext value={contextValue}>{local.children}</LinkButtonContext>\n      </ButtonContext>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,YAAY,OAA8B;CACxD,MAAM,gBAAgB,iBAAiB,KAAA;CACvC,MAAM,CAAC,SAAS,WAAW,eAAe;EACxC;EACA;EACA;EACA;EACA;EACA;CACD,CAAA;CACD,MAAM,eAAe,uBAAuB,sBAAA,GAAyB,MAAM,IAAI;CAC/E,MAAM,SAAS,WAA6B,OAAO,gBAAgB,CAAC,GAAG,KAAA;CACvE,MAAM,CAAC,OAAO,YAAY,WAAW,QAAQ;EAC3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CAAA;CACD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,cAAc,MAAM,SAAS;CACnC,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CACxE,MAAM,CAAC,aAAa,kBAAkB,aAAa,OAAO,EAAE,YAAY,KAAK,CAAA;CAC7E,IAAI;CACJ,MAAM,kBAAkB,iBACrB,cAA2D,KAC5D,MAAM,GAAe;CAEvB,IAAI;CACJ,IAAI;CACJ,IAAI,mBAAmB;CAEvB,MAAM,6BACJ,YAAA,MAAkB,cAAc,YAAA,IAAgB,aAAa;CAC/D,MAAM,kBACJ,CACE,MAAM,kBACN,cACE;EACE,MAAM,KAAA;EACN,aAAa,qBAAA;EACb,OAAO,MAAA;CACT,GACA,aAAA,CAAA,CAEH,CAAA,CACE,OAAO,OAAA,CAAA,CACP,KAAK,GAAA;CAEV,MAAM,wBAAkB;EACtB,IAAI,CAAC,gBAAgB,YAAA,MAAkB,cAAc;GACnD,eAAe,KAAA;GACf;EACF;EAEA,MAAM,OAAO,aAAa,cAAc;EACxC,MAAM,YAAY,MAAM,KAAK,aAAa,QAAQ,CAAA,CAAE,MAAM,UAAA;GACxD,MAAM,UAAU;GAChB,OAAO,QAAQ,aAAa,KAAK,QAAQ,aAAa,QAAQ,cAAc;EAC9E,CAAA;EACA,eAAe,SAAA;CACjB;CAEA,MAAM,8BAAwB;EAC5B,IAAI,OAAO,0BAA0B,YAAY;GAC/C,gBAAA;GACA;EACF;EAEA,IAAI,kBACF,qBAAqB,gBAAA;EAGvB,IAAI,YAAA,MAAkB,cAAc;GAClC,eAAe,KAAA;GACf;EACF;EAEA,eAAe,KAAA;EACf,mBAAmB,4BAAsB;GACvC,mBAAmB;GACnB,gBAAA;EACF,CAAA;CACF;CAEA,gBAAU;EACR,IAAI,OAAO,mBAAmB,aAAa;GACzC,iBAAiB,IAAI,eAAe,qBAAA;GACpC,IAAI,cAAc;IAChB,eAAe,QAAQ,YAAA;IACvB,IAAI,aAAa,eACf,eAAe,QAAQ,aAAa,aAAa;GAErD;EACF;EAOA,IAAI,OAAO,qBAAqB,eAAe,cAAc;GAC3D,mBAAmB,IAAI,iBAAiB,qBAAA;GACxC,iBAAiB,QAAQ,cAAc;IACrC,WAAW;IACX,SAAS;IACT,eAAe;GACjB,CAAA;EACF;EAEA,sBAAA;CACF,CAAA;CAKA,mBACE;EACE,YAAA;EACA,MAAA;EACA,KAAA;EACA,MAAM;CACR,SACA;EACE,sBAAA;CACF,CAAA;CAGF,gBAAU;EACR,IAAI,kBACF,qBAAqB,gBAAA;EAEvB,gBAAgB,WAAA;EAChB,kBAAkB,WAAA;CACpB,CAAA;CAEA,MAAM,eAAe;EACnB,IAAI,OAAO;GACT,OAAO,KAAA;EACT;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,SAAS;GACX,OAAA;EACF;CACF;CAEA,IAAI,MAAM,UACR,OAAO;CAGT,OAAO,CACJ,QACK,UACJ,MAAM,YAAA;EACJ,eAAe;EACf,gBAAgB,OAAA;CAClB,GACA,OAAO,UAAA,GACP,OAAO,kBAAA,GACR;MACC,CAAC,cAAc,OAAO,cAAc;QAClC,CAAC,kBAAkB,OAAO,eAAe,MAAM,SAAQ,EAAG,kBAAkB;MAC9E,EAAE,cAAc;IAClB,EAAE;AAEN"}

package/dist/calendar/DateField.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type DateFieldProps as HeadlessDateFieldProps, type CalendarDate, type DateValue } from "@proyecto-viviana/solidaria-components";
 import type { StyleString } from "../style";
 import { type SpectrumContextValue } from "../button/spectrum-context";

package/dist/calendar/DateField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/calendar/DateField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,GAAG,EAMT,MAAM,UAAU,CAAC;AAClB,OAAO,EAQL,KAAK,cAAc,IAAI,sBAAsB,EAG7C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAMhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAe5C,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAE/F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC3E,sBAAsB,CAAC,CAAC,CAAC,EACzB,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,qBAAqB;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,mDAAmD;IACnD,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,uCAAuC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,uEAAiE,CAAC;AA8Y/F;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC1D,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,GAAG,CAAC,OAAO,CA2Eb;AAED,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/calendar/DateField.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAQL,KAAK,cAAc,IAAI,sBAAsB,EAG7C,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,wCAAwC,CAAC;AAOhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAiB5C,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAG/F,MAAM,MAAM,aAAa,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAExE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,IAAI,CAC3E,sBAAsB,CAAC,CAAC,CAAC,EACzB,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC7B,wBAAwB;IACxB,WAAW,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC1B,qBAAqB;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC3B,mDAAmD;IACnD,aAAa,CAAC,EAAE,sBAAsB,CAAC;IACvC,uCAAuC;IACvC,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,uEAAiE,CAAC;AAqZ/F;;GAEG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,SAAS,GAAG,YAAY,EAC1D,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,GAAG,CAAC,OAAO,CA2Eb;AAED,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}