@proyecto-viviana/ui 0.5.0 → 0.6.1

package/dist/actionbar/index.jsx

@@ -0,0 +1,345 @@
+import { t as mergeStyles } from "../_chunk/runtime.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { ActionButtonGroup } from "../actionbuttongroup/index.jsx";
+import { t as s2IntlStrings } from "../_chunk/intl.jsx";
+import { Show, createContext, createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { FocusScope, createStringFormatter } from "@proyecto-viviana/solidaria";
+import { ActionBar as ActionBar$1, ActionBarContainer as ActionBarContainer$1, Button, useActionBarContext } from "@proyecto-viviana/solidaria-components";
+//#region src/actionbar/index.tsx
+const ACTION_BAR_EXIT_DURATION = 200;
+const actionBarStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " oQvqurc151";
+	rules += " nQvqurc151";
+	rules += " kQvqurc151";
+	rules += " jQvqurc151";
+	if (props.isEmphasized) rules += " -Ovbhqd-gHKLAu151";
+	else rules += " -Ovbhqd-g9ORGnd151";
+	rules += " gEzkoQe151";
+	rules += " -Jvcevd-Nbc1hc151";
+	rules += " _nfRoCnb151";
+	rules += " _oa151";
+	rules += " _Lf151";
+	rules += " _Mb151";
+	if (props.isEmphasized) rules += " Oj151";
+	else rules += " OLNnmzc151";
+	rules += " Ola151";
+	rules += " St151";
+	rules += " Rt151";
+	rules += " Te151";
+	rules += " Qe151";
+	rules += " sd151";
+	rules += " Ul151";
+	rules += " ql151";
+	rules += " eb151";
+	if (props.isInContainer) rules += " _Pa151";
+	rules += " _lr151";
+	rules += " _AI151";
+	rules += " -F3Iohc-_zI151";
+	if (props.isInContainer) rules += " Zd151";
+	else rules += " Za151";
+	rules += " IM151";
+	rules += " HM151";
+	rules += " Ll151";
+	rules += " Yg151";
+	rules += " Xc151";
+	rules += " _2b151";
+	if (props.isExiting) {
+		rules += " -_8PloMd-t151";
+		rules += " __Ya151";
+	} else if (props.isEntering) {
+		rules += " -_8PloMd-t151";
+		rules += " __Ya151";
+	} else {
+		rules += " -_8PloMd-q151";
+		rules += " __Ya151";
+	}
+	return rules;
+};
+const actionsWrapperStyles = " _Jb151 IM151";
+const selectionWrapperStyles = " _Ja151 sd151 eb151 Ub151 qb151";
+const selectionCountStyles = function anonymous(props) {
+	let rules = " ";
+	rules += " uxe7h4151";
+	rules += " -_6BNtrc-c151";
+	rules += " vx151";
+	rules += " xb151";
+	rules += " _xa151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isEmphasized) rules += " pLZZSrd151";
+	else rules += " pHKLAu151";
+	return rules;
+};
+const closeButtonStyles = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	if (props.isStaticColor) rules += " Oe151";
+	else rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	if (props.staticColor === "white") rules += " -Ovbhqd-gcwrnr151";
+	else if (props.staticColor === "black") rules += " -Ovbhqd-g4hn3s151";
+	rules += " sd151";
+	rules += " eb151";
+	rules += " _Ca151";
+	if (props.size === "XL") rules += " ZF151";
+	else if (props.size === "L") rules += " Zw151";
+	else if (props.size === "S") rules += " Zo151";
+	else if (props.size === "XS") rules += " Zm151";
+	else rules += " ZC151";
+	if (props.size === "XL") rules += " Fz151";
+	else if (props.size === "L") rules += " Fv151";
+	else if (props.size === "S") rules += " Fp151";
+	else if (props.size === "XS") rules += " Fn151";
+	else rules += " Fx151";
+	rules += " _va151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " Td151";
+	rules += " Qd151";
+	rules += " Sd151";
+	rules += " Rd151";
+	rules += " _je151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	if (props.isPressed) if (props.isStaticColor) rules += " gg151";
+	else rules += " gG1H3ce151";
+	else if (props.isFocusVisible) if (props.isStaticColor) rules += " gg151";
+	else rules += " gG1H3ce151";
+	else if (props.isHovered) if (props.isStaticColor) rules += " gg151";
+	else rules += " gG1H3ce151";
+	else rules += " g9151";
+	if (props.isStaticColor) if (props.isDisabled) rules += " -_8sjo0b-pi151";
+	else if (props.isPressed) rules += " -_8sjo0b-pk151";
+	else if (props.isFocusVisible) rules += " -_8sjo0b-pk151";
+	else if (props.isHovered) rules += " -_8sjo0b-pk151";
+	else rules += " -_8sjo0b-pj151";
+	else if (props.isDisabled) rules += " -_8sjo0b-pUvnvv151";
+	else if (props.isPressed) rules += " -_8sjo0b-pMwyHo151";
+	else if (props.isFocusVisible) rules += " -_8sjo0b-pMwyHo151";
+	else if (props.isHovered) rules += " -_8sjo0b-pMwyHo151";
+	else rules += " -_8sjo0b-pHKLAu151";
+	if (props.isDisabled) rules += " -_8sjo0b-lpc151";
+	else rules += " -_8sjo0b-lpb151";
+	rules += " __ca151";
+	return rules;
+};
+const closeIconStyles = " Zj151 Fk151";
+function ActionBarCloseIcon() {
+	return <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" class={closeIconStyles}>
+      <path fill="var(--iconPrimary, #222)" d="m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z" />
+    </svg>;
+}
+const ActionBarContext = createContext(null);
+function normalizeSelectedKeys(keys) {
+	return keys === "all" ? "all" : new Set(keys ?? []);
+}
+function copySelectedKeys(keys) {
+	return keys === "all" ? "all" : new Set(keys);
+}
+function getScrollElement(scrollRef) {
+	if (!scrollRef) return null;
+	if (typeof HTMLElement !== "undefined" && scrollRef instanceof HTMLElement) return scrollRef;
+	return "current" in scrollRef ? scrollRef.current ?? null : null;
+}
+function createActionBarContainer(props) {
+	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = createSignal(normalizeSelectedKeys(props.defaultSelectedKeys));
+	const [actionBarHeight, setActionBarHeight] = createSignal(0);
+	const selectedKeys = createMemo(() => props.selectedKeys !== void 0 ? normalizeSelectedKeys(props.selectedKeys) : uncontrolledSelectedKeys());
+	const selectedItemCount = createMemo(() => {
+		const keys = selectedKeys();
+		return keys === "all" ? "all" : keys.size;
+	});
+	const setSelectedKeys = (keys) => {
+		const normalized = normalizeSelectedKeys(keys);
+		if (props.selectedKeys === void 0) setUncontrolledSelectedKeys(normalized);
+		props.onSelectionChange?.(copySelectedKeys(normalized));
+	};
+	const actionBarRef = (element) => {
+		setActionBarHeight(element ? element.offsetHeight + 8 : 0);
+	};
+	const actionBarContext = {
+		ref: actionBarRef,
+		get scrollRef() {
+			return props.scrollRef;
+		},
+		get selectedItemCount() {
+			return selectedItemCount();
+		},
+		onClearSelection: () => setSelectedKeys(/* @__PURE__ */ new Set())
+	};
+	return {
+		selectedKeys,
+		onSelectionChange: setSelectedKeys,
+		actionBar: () => <ActionBarContext.Provider value={actionBarContext}>
+        {props.renderActionBar?.(selectedKeys())}
+      </ActionBarContext.Provider>,
+		actionBarHeight
+	};
+}
+function getBarClassName(renderProps, contextUnsafeClassName, propUnsafeClassName, contextClassName, propClassName, isEmphasized, isInContainer, isEntering, isExiting, styles) {
+	return [
+		"vui-action-bar",
+		isEmphasized ? "vui-action-bar--emphasized" : "",
+		isInContainer ? "vui-action-bar--in-container" : "",
+		isEntering ? "vui-action-bar--entering" : "",
+		isExiting ? "vui-action-bar--exiting" : "",
+		contextUnsafeClassName ?? "",
+		propUnsafeClassName ?? "",
+		contextClassName ?? "",
+		propClassName ?? "",
+		mergeStyles(actionBarStyles({
+			isEmphasized,
+			isInContainer,
+			isEntering,
+			isExiting
+		}), styles)
+	].filter(Boolean).join(" ");
+}
+function countMessage(formatter, count) {
+	if (count === "all") return formatter.format("actionbar.selectedAll");
+	const message = formatter.format("actionbar.selected", { count });
+	return message.includes("{count}") ? message.replace("{count}", String(count)) : message;
+}
+function ActionBarCloseButton(props) {
+	const ctx = useActionBarContext();
+	const staticColorValue = () => props.isEmphasized ? "auto" : void 0;
+	return <Button aria-label={props["aria-label"]} onPress={() => ctx?.onClearSelection?.()} class={(renderProps) => closeButtonStyles({
+		...renderProps,
+		staticColor: staticColorValue(),
+		isStaticColor: !!staticColorValue()
+	})}>
+      <ActionBarCloseIcon />
+    </Button>;
+}
+function ActionBar(props) {
+	const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);
+	const [local, headlessProps] = splitProps(mergeProps(contextProps ?? {}, props), [
+		"class",
+		"children",
+		"isEmphasized",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"slot",
+		"ref",
+		"scrollRef"
+	]);
+	const [scrollbarWidth, setScrollbarWidth] = createSignal(0);
+	const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0);
+	const [isEntering, setIsEntering] = createSignal(false);
+	const [isExiting, setIsExiting] = createSignal(false);
+	const [lastCount, setLastCount] = createSignal(headlessProps.selectedItemCount ?? 0);
+	let exitTimeout;
+	let enterFrame;
+	const scrollElement = () => getScrollElement(local.scrollRef);
+	const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
+	const selectedItemCount = () => headlessProps.selectedItemCount ?? 0;
+	const isOpen = () => selectedItemCount() !== 0;
+	const renderedCount = () => isOpen() ? selectedItemCount() : lastCount();
+	const selectedItemCountForHeadless = () => isRendered() ? renderedCount() : 0;
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const actionBarRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const rootStyle = () => {
+		const unsafeStyle = mergedUnsafeStyle();
+		return {
+			"inset-inline-end": `calc(var(--insetEnd, 8px) + ${scrollbarWidth()}px)`,
+			...unsafeStyle
+		};
+	};
+	const updateScrollbarWidth = () => {
+		const element = scrollElement();
+		setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);
+	};
+	createEffect(updateScrollbarWidth);
+	createEffect(() => {
+		const count = selectedItemCount();
+		const open = count !== 0;
+		if (count === "all" || count > 0) setLastCount(count);
+		if (exitTimeout) {
+			clearTimeout(exitTimeout);
+			exitTimeout = void 0;
+		}
+		if (open) {
+			setIsRendered(true);
+			setIsExiting(false);
+			if (local.scrollRef) {
+				setIsEntering(true);
+				if (typeof requestAnimationFrame !== "undefined") {
+					if (enterFrame != null) cancelAnimationFrame(enterFrame);
+					enterFrame = requestAnimationFrame(() => {
+						enterFrame = void 0;
+						setIsEntering(false);
+					});
+				} else setTimeout(() => setIsEntering(false), 0);
+			} else setIsEntering(false);
+			return;
+		}
+		setIsEntering(false);
+		if (!isRendered()) {
+			setIsExiting(false);
+			return;
+		}
+		if (!local.scrollRef) {
+			setIsRendered(false);
+			setIsExiting(false);
+			return;
+		}
+		setIsExiting(true);
+		exitTimeout = setTimeout(() => {
+			exitTimeout = void 0;
+			setIsRendered(false);
+			setIsExiting(false);
+		}, ACTION_BAR_EXIT_DURATION);
+	});
+	onMount(() => {
+		updateScrollbarWidth();
+		const element = scrollElement();
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateScrollbarWidth);
+		observer.observe(element);
+		onCleanup(() => observer.disconnect());
+	});
+	onCleanup(() => {
+		if (exitTimeout) clearTimeout(exitTimeout);
+		if (enterFrame != null && typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(enterFrame);
+	});
+	const actionGroupLabel = createMemo(() => stringFormatter().format("actionbar.actions"));
+	const actionsAvailableLabel = createMemo(() => stringFormatter().format("actionbar.actionsAvailable"));
+	const clearSelectionLabel = createMemo(() => stringFormatter().format("actionbar.clearSelection"));
+	const selectionLabel = createMemo(() => countMessage(stringFormatter(), renderedCount()));
+	return <Show when={isRendered()}>
+      <FocusScope restoreFocus>
+        <ActionBar$1 {...headlessProps} selectedItemCount={selectedItemCountForHeadless()} onClearSelection={headlessProps.onClearSelection} actionsAvailableMessage={actionsAvailableLabel()} ref={actionBarRef} slot={local.slot ?? void 0} class={(rp) => getBarClassName(rp, contextProps?.UNSAFE_className, props.UNSAFE_className, contextProps?.class, props.class, local.isEmphasized, !!local.scrollRef, isEntering(), isExiting(), mergedStyles())} style={() => rootStyle()}>
+          {}
+          <div class={actionsWrapperStyles}>
+            <ActionButtonGroup staticColor={local.isEmphasized ? "auto" : void 0} isQuiet aria-label={actionGroupLabel()}>
+              {local.children}
+            </ActionButtonGroup>
+          </div>
+          <div class={selectionWrapperStyles}>
+            <ActionBarCloseButton isEmphasized={local.isEmphasized} aria-label={clearSelectionLabel()} />
+            <span class={selectionCountStyles({ isEmphasized: local.isEmphasized })}>
+              {selectionLabel()}
+            </span>
+          </div>
+        </ActionBar$1>
+      </FocusScope>
+    </Show>;
+}
+function ActionBarContainer(props) {
+	return <ActionBarContainer$1 class={["vui-action-bar-container", props.class].filter(Boolean).join(" ")}>
+      {props.children}
+    </ActionBarContainer$1>;
+}
+//#endregion
+export { ActionBar, ActionBarContainer, ActionBarContext, createActionBarContainer };
+
+//# sourceMappingURL=index.jsx.map

package/dist/actionbar/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/actionbar/index.tsx"],"sourcesContent":["import {\n  type JSX,\n  Show,\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport {\n  ActionBar as HeadlessActionBar,\n  ActionBarContainer as HeadlessActionBarContainer,\n  Button as HeadlessButton,\n  type ActionBarRenderProps,\n  type ButtonRenderProps,\n  useActionBarContext,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { FocusScope, createStringFormatter } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport type { StyleString } from \"../style\";\nimport { baseColor, focusRing, lightDark, style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport { controlSize, staticColor } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { ActionButtonGroup } from \"../actionbuttongroup\";\nimport { s2IntlStrings } from \"../intl\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport type { StaticColor } from \"../button/types\";\n\ntype ScrollRef = { current?: HTMLElement | null } | HTMLElement | undefined;\ntype SelectedItemCount = number | \"all\";\ntype ActionBarAnimationState = {\n  isEmphasized?: boolean;\n  isInContainer?: boolean;\n  isEntering?: boolean;\n  isExiting?: boolean;\n};\ntype ActionBarCloseButtonState = ButtonRenderProps & {\n  staticColor?: StaticColor;\n  isStaticColor: boolean;\n};\n\nconst ACTION_BAR_EXIT_DURATION = 200;\n\nconst actionBarStyles = style<ActionBarAnimationState>({\n  borderRadius: \"card\",\n  \"--s2-container-bg\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"elevated\",\n      isEmphasized: \"neutral\",\n    },\n  },\n  backgroundColor: \"--s2-container-bg\",\n  // Glasselated: frost the scene behind the surface — the container bg is the\n  // translucent `--surface-card`; the blur is what makes it read as glass.\n  backdropFilter: \"var(--blur-card)\",\n  boxShadow: \"elevated\",\n  boxSizing: \"border-box\",\n  outlineStyle: \"solid\",\n  outlineWidth: 1,\n  outlineColor: {\n    default: lightDark(\"transparent-white-25\", \"gray-200\"),\n    isEmphasized: \"transparent\",\n    forcedColors: \"ButtonBorder\",\n  },\n  paddingX: 8,\n  paddingY: 12,\n  display: \"flex\",\n  gap: 16,\n  alignItems: \"center\",\n  position: {\n    isInContainer: \"absolute\",\n  },\n  bottom: 0,\n  insetStart: 8,\n  \"--insetEnd\": {\n    type: \"insetEnd\",\n    value: 8,\n  },\n  width: {\n    default: \"full\",\n    isInContainer: \"auto\",\n  },\n  marginX: \"auto\",\n  maxWidth: 960,\n  transition: \"transform\",\n  transitionDuration: 200,\n  translateY: {\n    default: -8,\n    isEntering: \"full\",\n    isExiting: \"full\",\n  },\n});\n\nconst actionsWrapperStyles = style({\n  order: 1,\n  marginStart: \"auto\",\n});\n\nconst selectionWrapperStyles = style({\n  order: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst selectionCountStyles = style<{ isEmphasized?: boolean }>({\n  font: \"ui\",\n  color: {\n    default: \"neutral\",\n    isEmphasized: \"gray-25\",\n  },\n});\n\nconst closeButtonHoverBackground = {\n  default: \"gray-200\",\n  isStaticColor: \"transparent-overlay-200\",\n} as const;\n\nconst closeButtonStyles = style<ActionBarCloseButtonState>({\n  ...focusRing(),\n  ...staticColor(),\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  size: controlSize(),\n  flexShrink: 0,\n  borderRadius: \"full\",\n  padding: 0,\n  borderStyle: \"none\",\n  transition: \"default\",\n  backgroundColor: {\n    default: \"transparent\",\n    isHovered: closeButtonHoverBackground,\n    isFocusVisible: closeButtonHoverBackground,\n    isPressed: closeButtonHoverBackground,\n  },\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: baseColor(\"neutral\"),\n      isDisabled: \"disabled\",\n      isStaticColor: {\n        default: baseColor(\"transparent-overlay-800\"),\n        isDisabled: \"transparent-overlay-400\",\n      },\n      forcedColors: {\n        default: \"ButtonText\",\n        isDisabled: \"GrayText\",\n      },\n    },\n  },\n  outlineColor: {\n    default: \"focus-ring\",\n    isStaticColor: \"transparent-overlay-1000\",\n    forcedColors: \"Highlight\",\n  },\n  disableTapHighlight: true,\n});\n\nconst closeIconStyles = style({\n  size: 12,\n});\n\nfunction ActionBarCloseIcon(): JSX.Element {\n  // Faithful to S2's `CloseButton` (CloseButton.mjs), which renders the\n  // `Cross` UI-icon: a bare `<svg>` with NO `aria-hidden` (the ui-icon path\n  // does not run the `createIcon` factory that would set it). Chromium exposes\n  // a bare `<svg>` as `role=\"img\"`, so it surfaces as an `img` child of the\n  // clear button in the accessibility tree — the port must NOT mark it hidden.\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      class={closeIconStyles}\n    >\n      <path\n        fill=\"var(--iconPrimary, #222)\"\n        d=\"m7.342 6 3.396-3.396a.95.95 0 1 0-1.342-1.342L6 4.658 2.604 1.262a.95.95 0 1 0-1.343 1.342L4.659 6 1.262 9.396a.95.95 0 1 0 1.343 1.342L6 7.342l3.396 3.396a.946.946 0 0 0 1.342.001.95.95 0 0 0 0-1.343z\"\n      />\n    </svg>\n  );\n}\n\nexport interface ActionBarProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\"\n> {\n  /** The number of selected items. ActionBar is hidden when 0. */\n  selectedItemCount?: number | \"all\";\n  /** Whether the ActionBar should be displayed with an emphasized style. */\n  isEmphasized?: boolean;\n  /** Callback when the clear button is pressed. */\n  onClearSelection?: () => void;\n  /** Callback when an action is triggered. */\n  onAction?: (key: Key) => void;\n  /** The action buttons to display. */\n  children?: JSX.Element;\n  /** A ref to the scrollable element the ActionBar appears above. */\n  scrollRef?: ScrollRef;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\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  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  /** Accessible label for the action bar. @default 'Actions' */\n  \"aria-label\"?: string;\n  /** Identifies the element (or elements) that labels the action bar. */\n  \"aria-labelledby\"?: string;\n  /** Optional keydown handler for the action bar root. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContainerProps {\n  children?: JSX.Element;\n  class?: string;\n}\n\nexport type ActionBarSelectedKeys = \"all\" | Set<Key>;\n\nexport interface ActionBarContainerStateProps {\n  selectedKeys?: \"all\" | Iterable<Key>;\n  defaultSelectedKeys?: \"all\" | Iterable<Key>;\n  onSelectionChange?: (keys: ActionBarSelectedKeys) => void;\n  renderActionBar?: (selectedKeys: ActionBarSelectedKeys) => JSX.Element;\n  scrollRef?: ScrollRef;\n}\n\nexport interface ActionBarContainerState {\n  selectedKeys: () => ActionBarSelectedKeys;\n  onSelectionChange: (keys: \"all\" | Iterable<Key>) => void;\n  actionBar: () => JSX.Element;\n  actionBarHeight: () => number;\n}\n\nexport const ActionBarContext = createContext<SpectrumContextValue<ActionBarProps>>(null);\n\nfunction normalizeSelectedKeys(keys: \"all\" | Iterable<Key> | undefined): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys ?? []);\n}\n\nfunction copySelectedKeys(keys: ActionBarSelectedKeys): ActionBarSelectedKeys {\n  return keys === \"all\" ? \"all\" : new Set(keys);\n}\n\nfunction getScrollElement(scrollRef: ScrollRef): HTMLElement | null {\n  if (!scrollRef) {\n    return null;\n  }\n\n  if (typeof HTMLElement !== \"undefined\" && scrollRef instanceof HTMLElement) {\n    return scrollRef;\n  }\n\n  return \"current\" in scrollRef ? (scrollRef.current ?? null) : null;\n}\n\nexport function createActionBarContainer(\n  props: ActionBarContainerStateProps,\n): ActionBarContainerState {\n  const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] =\n    createSignal<ActionBarSelectedKeys>(normalizeSelectedKeys(props.defaultSelectedKeys));\n  const [actionBarHeight, setActionBarHeight] = createSignal(0);\n\n  const selectedKeys = createMemo<ActionBarSelectedKeys>(() =>\n    props.selectedKeys !== undefined\n      ? normalizeSelectedKeys(props.selectedKeys)\n      : uncontrolledSelectedKeys(),\n  );\n  const selectedItemCount = createMemo<SelectedItemCount>(() => {\n    const keys = selectedKeys();\n    return keys === \"all\" ? \"all\" : keys.size;\n  });\n  const setSelectedKeys = (keys: \"all\" | Iterable<Key>) => {\n    const normalized = normalizeSelectedKeys(keys);\n\n    if (props.selectedKeys === undefined) {\n      setUncontrolledSelectedKeys(normalized);\n    }\n\n    props.onSelectionChange?.(copySelectedKeys(normalized));\n  };\n  const actionBarRef = (element: HTMLDivElement) => {\n    setActionBarHeight(element ? element.offsetHeight + 8 : 0);\n  };\n  const actionBarContext: SpectrumContextValue<ActionBarProps> = {\n    ref: actionBarRef,\n    get scrollRef() {\n      return props.scrollRef;\n    },\n    get selectedItemCount() {\n      return selectedItemCount();\n    },\n    onClearSelection: () => setSelectedKeys(new Set()),\n  };\n\n  return {\n    selectedKeys,\n    onSelectionChange: setSelectedKeys,\n    actionBar: () => (\n      <ActionBarContext.Provider value={actionBarContext}>\n        {props.renderActionBar?.(selectedKeys())}\n      </ActionBarContext.Provider>\n    ),\n    actionBarHeight,\n  };\n}\n\nfunction getBarClassName(\n  renderProps: ActionBarRenderProps,\n  contextUnsafeClassName?: string,\n  propUnsafeClassName?: string,\n  contextClassName?: string,\n  propClassName?: string,\n  isEmphasized?: boolean,\n  isInContainer?: boolean,\n  isEntering?: boolean,\n  isExiting?: boolean,\n  styles?: StyleString,\n): string {\n  return [\n    \"vui-action-bar\",\n    isEmphasized ? \"vui-action-bar--emphasized\" : \"\",\n    isInContainer ? \"vui-action-bar--in-container\" : \"\",\n    isEntering ? \"vui-action-bar--entering\" : \"\",\n    isExiting ? \"vui-action-bar--exiting\" : \"\",\n    contextUnsafeClassName ?? \"\",\n    propUnsafeClassName ?? \"\",\n    contextClassName ?? \"\",\n    propClassName ?? \"\",\n    mergeStyles(\n      actionBarStyles({\n        isEmphasized,\n        isInContainer,\n        isEntering,\n        isExiting,\n      }),\n      styles,\n    ),\n  ]\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction countMessage(\n  formatter: ReturnType<ReturnType<typeof createStringFormatter>>,\n  count: SelectedItemCount,\n): string {\n  if (count === \"all\") {\n    return formatter.format(\"actionbar.selectedAll\");\n  }\n\n  const message = formatter.format(\"actionbar.selected\", { count });\n  return message.includes(\"{count}\") ? message.replace(\"{count}\", String(count)) : message;\n}\n\nfunction ActionBarCloseButton(props: {\n  isEmphasized?: boolean;\n  \"aria-label\": string;\n}): JSX.Element {\n  const ctx = useActionBarContext();\n  const staticColorValue = () => (props.isEmphasized ? \"auto\" : undefined);\n\n  return (\n    <HeadlessButton\n      aria-label={props[\"aria-label\"]}\n      onPress={() => ctx?.onClearSelection?.()}\n      class={(renderProps: ButtonRenderProps) =>\n        closeButtonStyles({\n          ...renderProps,\n          staticColor: staticColorValue(),\n          isStaticColor: !!staticColorValue(),\n        })\n      }\n    >\n      <ActionBarCloseIcon />\n    </HeadlessButton>\n  );\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ActionBarContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local, headlessProps] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"isEmphasized\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"scrollRef\",\n  ]);\n  const [scrollbarWidth, setScrollbarWidth] = createSignal(0);\n  const [isRendered, setIsRendered] = createSignal((headlessProps.selectedItemCount ?? 0) !== 0);\n  const [isEntering, setIsEntering] = createSignal(false);\n  const [isExiting, setIsExiting] = createSignal(false);\n  const [lastCount, setLastCount] = createSignal<SelectedItemCount>(\n    headlessProps.selectedItemCount ?? 0,\n  );\n  let exitTimeout: ReturnType<typeof setTimeout> | undefined;\n  let enterFrame: number | undefined;\n\n  const scrollElement = () => getScrollElement(local.scrollRef);\n  const stringFormatter = createStringFormatter(s2IntlStrings, \"@react-spectrum/s2\");\n  const selectedItemCount = () => headlessProps.selectedItemCount ?? 0;\n  const isOpen = () => selectedItemCount() !== 0;\n  const renderedCount = () => (isOpen() ? selectedItemCount() : lastCount());\n  const selectedItemCountForHeadless = () => (isRendered() ? renderedCount() : 0);\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const actionBarRef = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref,\n  );\n  const rootStyle = (): JSX.CSSProperties => {\n    const unsafeStyle = mergedUnsafeStyle();\n    const containerStyle = {\n      \"inset-inline-end\": `calc(var(--insetEnd, 8px) + ${scrollbarWidth()}px)`,\n    } satisfies JSX.CSSProperties;\n\n    return { ...containerStyle, ...unsafeStyle };\n  };\n  const updateScrollbarWidth = () => {\n    const element = scrollElement();\n    setScrollbarWidth(element ? element.offsetWidth - element.clientWidth : 0);\n  };\n\n  createEffect(updateScrollbarWidth);\n  createEffect(() => {\n    const count = selectedItemCount();\n    const open = count !== 0;\n\n    if (count === \"all\" || count > 0) {\n      setLastCount(count);\n    }\n\n    if (exitTimeout) {\n      clearTimeout(exitTimeout);\n      exitTimeout = undefined;\n    }\n\n    if (open) {\n      setIsRendered(true);\n      setIsExiting(false);\n\n      if (local.scrollRef) {\n        setIsEntering(true);\n        if (typeof requestAnimationFrame !== \"undefined\") {\n          if (enterFrame != null) {\n            cancelAnimationFrame(enterFrame);\n          }\n          enterFrame = requestAnimationFrame(() => {\n            enterFrame = undefined;\n            setIsEntering(false);\n          });\n        } else {\n          setTimeout(() => setIsEntering(false), 0);\n        }\n      } else {\n        setIsEntering(false);\n      }\n      return;\n    }\n\n    setIsEntering(false);\n    if (!isRendered()) {\n      setIsExiting(false);\n      return;\n    }\n\n    if (!local.scrollRef) {\n      setIsRendered(false);\n      setIsExiting(false);\n      return;\n    }\n\n    setIsExiting(true);\n    exitTimeout = setTimeout(() => {\n      exitTimeout = undefined;\n      setIsRendered(false);\n      setIsExiting(false);\n    }, ACTION_BAR_EXIT_DURATION);\n  });\n  onMount(() => {\n    updateScrollbarWidth();\n    const element = scrollElement();\n    if (!element || typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n\n    const observer = new ResizeObserver(updateScrollbarWidth);\n    observer.observe(element);\n    onCleanup(() => observer.disconnect());\n  });\n  onCleanup(() => {\n    if (exitTimeout) {\n      clearTimeout(exitTimeout);\n    }\n    if (enterFrame != null && typeof cancelAnimationFrame !== \"undefined\") {\n      cancelAnimationFrame(enterFrame);\n    }\n  });\n\n  const actionGroupLabel = createMemo(() => stringFormatter().format(\"actionbar.actions\"));\n  const actionsAvailableLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.actionsAvailable\"),\n  );\n  const clearSelectionLabel = createMemo(() =>\n    stringFormatter().format(\"actionbar.clearSelection\"),\n  );\n  const selectionLabel = createMemo(() => countMessage(stringFormatter(), renderedCount()));\n\n  return (\n    <Show when={isRendered()}>\n      <FocusScope restoreFocus>\n        <HeadlessActionBar\n          {...headlessProps}\n          selectedItemCount={selectedItemCountForHeadless()}\n          onClearSelection={headlessProps.onClearSelection}\n          actionsAvailableMessage={actionsAvailableLabel()}\n          ref={actionBarRef}\n          slot={local.slot ?? undefined}\n          class={(rp: ActionBarRenderProps) =>\n            getBarClassName(\n              rp,\n              contextProps?.UNSAFE_className,\n              props.UNSAFE_className,\n              contextProps?.class,\n              props.class,\n              local.isEmphasized,\n              !!local.scrollRef,\n              isEntering(),\n              isExiting(),\n              mergedStyles(),\n            )\n          }\n          style={() => rootStyle()}\n        >\n          {/*\n            Actions FIRST in DOM order, selection SECOND — faithful to S2\n            `ActionBar` (ActionBar.tsx:200-231): the actions wrapper is written\n            before the selection wrapper, and CSS `order` (`order:1` actions,\n            `order:0` selection) swaps their VISUAL order so the selection reads\n            on the leading side while the sole `toolbar` (the ActionButtonGroup)\n            stays first in the accessibility tree. This is what makes the clear\n            button + count text OUTSIDE siblings of the toolbar rather than the\n            first entries under it.\n          */}\n          <div class={actionsWrapperStyles}>\n            <ActionButtonGroup\n              staticColor={local.isEmphasized ? \"auto\" : undefined}\n              isQuiet\n              aria-label={actionGroupLabel()}\n            >\n              {local.children}\n            </ActionButtonGroup>\n          </div>\n          <div class={selectionWrapperStyles}>\n            <ActionBarCloseButton\n              isEmphasized={local.isEmphasized}\n              aria-label={clearSelectionLabel()}\n            />\n            <span class={selectionCountStyles({ isEmphasized: local.isEmphasized })}>\n              {selectionLabel()}\n            </span>\n          </div>\n        </HeadlessActionBar>\n      </FocusScope>\n    </Show>\n  );\n}\n\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <HeadlessActionBarContainer\n      class={[\"vui-action-bar-container\", props.class].filter(Boolean).join(\" \")}\n    >\n      {props.children}\n    </HeadlessActionBarContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/actionbuttongroup/index.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from "solid-js";
+import type { StyleString } from "../style";
+import { type ActionButtonDensity, type ActionButtonOrientation, type ActionButtonSize } from "../button/group-context";
+import type { StaticColor } from "../button/types";
+export interface ActionButtonGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+    /** The children of the group. */
+    children?: JSX.Element;
+    /** Size of the buttons. @default 'M' */
+    size?: ActionButtonSize;
+    /** Spacing between the buttons. @default 'regular' */
+    density?: ActionButtonDensity;
+    /** Whether the buttons should be displayed with a quiet style. */
+    isQuiet?: boolean;
+    /** Whether the buttons should divide the container width equally. */
+    isJustified?: boolean;
+    /** The static color style to apply. Useful when the group appears over a color background. */
+    staticColor?: StaticColor;
+    /** The axis the group should align with. @default 'horizontal' */
+    orientation?: ActionButtonOrientation;
+    /** Whether the group is disabled. */
+    isDisabled?: boolean;
+    /** Spectrum-defined generated classes. */
+    styles?: StyleString;
+    /** Additional CSS class name. Use only as a last resort. */
+    UNSAFE_className?: string;
+    /** Additional inline styles. Use only as a last resort. */
+    UNSAFE_style?: JSX.CSSProperties;
+}
+/**
+ * An ActionButtonGroup is a grouping of related ActionButtons.
+ */
+export declare function ActionButtonGroup(props: ActionButtonGroupProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/actionbuttongroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actionbuttongroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA0B,MAAM,UAAU,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EAEtB,MAAM,yBAAyB,CAAC;AAUjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC,EAClC,OAAO,GAAG,OAAO,GAAG,UAAU,CAC/B;IACC,iCAAiC;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,wCAAwC;IACxC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,sDAAsD;IACtD,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,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;CAClC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAkF5E"}

package/dist/actionbuttongroup/index.js

@@ -0,0 +1,90 @@
+import { useProviderProps } from "../provider/index.js";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
+import { c as ActionButtonGroupContext, d as useActionButtonGroupContext, n as s2ActionButtonGroup } from "../_chunk/s2-action-button-styles.js";
+import { createComponent, mergeProps } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { Toolbar } from "@proyecto-viviana/solidaria-components";
+//#region src/actionbuttongroup/index.tsx
+/**
+* An ActionButtonGroup is a grouping of related ActionButtons.
+*/
+function ActionButtonGroup(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useActionButtonGroupContext(), props.slot);
+	const [local, domProps] = splitProps(mergeProps$1(providerProps, contextProps ?? {}, props), [
+		"children",
+		"size",
+		"density",
+		"isQuiet",
+		"isJustified",
+		"staticColor",
+		"orientation",
+		"isDisabled",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"ref"
+	]);
+	const size = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const orientation = () => local.orientation ?? "horizontal";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignGroupRefs = mergeContextRefs(contextProps?.ref, props.ref);
+	const className = () => [local.UNSAFE_className, s2ActionButtonGroup({
+		size: size(),
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified
+	}, mergedStyles())].filter(Boolean).join(" ");
+	const contextValue = {
+		get size() {
+			return size();
+		},
+		get density() {
+			return density();
+		},
+		get orientation() {
+			return orientation();
+		},
+		get isQuiet() {
+			return local.isQuiet;
+		},
+		get isJustified() {
+			return local.isJustified;
+		},
+		get staticColor() {
+			return local.staticColor;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		}
+	};
+	return createComponent(Toolbar, mergeProps(domProps, {
+		get orientation() {
+			return orientation();
+		},
+		ref: assignGroupRefs,
+		get ["class"]() {
+			return className();
+		},
+		get style() {
+			return mergedUnsafeStyle();
+		},
+		get ["data-orientation"]() {
+			return orientation();
+		},
+		get children() {
+			return createComponent(ActionButtonGroupContext.Provider, {
+				value: contextValue,
+				get children() {
+					return local.children;
+				}
+			});
+		}
+	}));
+}
+//#endregion
+export { ActionButtonGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/actionbuttongroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["JSX","mergeProps","splitProps","Toolbar","HeadlessToolbar","StyleString","ActionButtonGroupContext","ActionButtonDensity","ActionButtonOrientation","ActionButtonSize","useActionButtonGroupContext","s2ActionButtonGroup","useProviderProps","getSlottedContextProps","mergeContextRefs","mergeContextStyles","mergeContextUnsafeStyle","RefLike","StaticColor","ActionButtonGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","size","density","isQuiet","isJustified","staticColor","orientation","isDisabled","styles","UNSAFE_className","UNSAFE_style","CSSProperties","ActionButtonGroup","props","providerProps","contextProps","slot","merged","local","domProps","mergedStyles","mergedUnsafeStyle","assignGroupRefs","ref","className","filter","Boolean","join","contextValue","_$createComponent","_$mergeProps","class","style","data-orientation","Provider","value"],"sources":["../../src/actionbuttongroup/index.tsx"],"sourcesContent":["import { type JSX, mergeProps, splitProps } from \"solid-js\";\nimport { Toolbar as HeadlessToolbar } from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport {\n  ActionButtonGroupContext,\n  type ActionButtonDensity,\n  type ActionButtonOrientation,\n  type ActionButtonSize,\n  useActionButtonGroupContext,\n} from \"../button/group-context\";\nimport { s2ActionButtonGroup } 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 { StaticColor } from \"../button/types\";\n\nexport interface ActionButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The children of the group. */\n  children?: JSX.Element;\n  /** Size of the buttons. @default 'M' */\n  size?: ActionButtonSize;\n  /** Spacing between the buttons. @default 'regular' */\n  density?: ActionButtonDensity;\n  /** Whether the buttons should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /** Whether the buttons should divide the container width equally. */\n  isJustified?: boolean;\n  /** The static color style to apply. Useful when the group appears over a color background. */\n  staticColor?: StaticColor;\n  /** The axis the group should align with. @default 'horizontal' */\n  orientation?: ActionButtonOrientation;\n  /** Whether the group is 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}\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport function ActionButtonGroup(props: ActionButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useActionButtonGroupContext(), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"children\",\n    \"size\",\n    \"density\",\n    \"isQuiet\",\n    \"isJustified\",\n    \"staticColor\",\n    \"orientation\",\n    \"isDisabled\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const density = () => local.density ?? \"regular\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ActionButtonGroup(\n        {\n          size: size(),\n          density: density(),\n          orientation: orientation(),\n          isJustified: local.isJustified,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get density() {\n      return density();\n    },\n    get orientation() {\n      return orientation();\n    },\n    get isQuiet() {\n      return local.isQuiet;\n    },\n    get isJustified() {\n      return local.isJustified;\n    },\n    get staticColor() {\n      return local.staticColor;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n\n  return (\n    <HeadlessToolbar\n      {...domProps}\n      orientation={orientation()}\n      ref={assignGroupRefs}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-orientation={orientation()}\n    >\n      <ActionButtonGroupContext.Provider value={contextValue}>\n        {local.children}\n      </ActionButtonGroupContext.Provider>\n    </HeadlessToolbar>\n  );\n}\n"],"mappings":";;;;;;;;;;AAoDA,SAAgBoC,kBAAkBC,OAA4C;CAC5E,MAAMC,gBAAgB1B,iBAAiByB,KAAK;CAC5C,MAAME,eAAe1B,uBAAuBH,4BAA4B,GAAG2B,MAAMG,IAAI;CAErF,MAAM,CAACE,OAAOC,YAAYzC,WADXD,aAAWqC,eAAeC,gBAAgB,CAAC,GAAGF,KACxBI,GAAQ;EAC3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAK,CACN;CACD,MAAMhB,aAAaiB,MAAMjB,QAAQ;CACjC,MAAMC,gBAAgBgB,MAAMhB,WAAW;CACvC,MAAMI,oBAAoBY,MAAMZ,eAAe;CAC/C,MAAMc,qBAAqB7B,mBAAmBwB,cAAcP,QAAQK,MAAML,MAAM;CAChF,MAAMa,0BACJ7B,wBAAwBuB,cAAcL,cAAcG,MAAMH,YAAY;CACxE,MAAMY,kBAAkBhC,iBACrByB,cAA2DQ,KAC5DV,MAAMU,GACR;CACA,MAAMC,kBACJ,CACEN,MAAMT,kBACNtB,oBACE;EACEc,MAAMA,KAAK;EACXC,SAASA,QAAQ;EACjBI,aAAaA,YAAY;EACzBF,aAAac,MAAMd;CACrB,GACAgB,aAAa,CACf,CAAC,EAEAK,OAAOC,OAAO,EACdC,KAAK,GAAG;CAEb,MAAMC,eAAe;EACnB,IAAI3B,OAAO;GACT,OAAOA,KAAK;EACd;EACA,IAAIC,UAAU;GACZ,OAAOA,QAAQ;EACjB;EACA,IAAII,cAAc;GAChB,OAAOA,YAAY;EACrB;EACA,IAAIH,UAAU;GACZ,OAAOe,MAAMf;EACf;EACA,IAAIC,cAAc;GAChB,OAAOc,MAAMd;EACf;EACA,IAAIC,cAAc;GAChB,OAAOa,MAAMb;EACf;EACA,IAAIE,aAAa;GACf,OAAOW,MAAMX;EACf;CACF;CAEA,OAAAsB,gBACGjD,SAAekD,WACVX,UAAQ;EAAA,IACZb,cAAW;GAAA,OAAEA,YAAY;EAAC;EAAAiB,KACrBD;EAAe,KAAA,WAAA;GAAA,OACbE,UAAU;EAAC;EAAA,IAClBQ,QAAK;GAAA,OAAEX,kBAAkB;EAAC;EAAA,KAAA,sBAAA;GAAA,OACRf,YAAY;EAAC;EAAA,IAAAP,WAAA;GAAA,OAAA8B,gBAE9B/C,yBAAyBoD,UAAQ;IAACC,OAAOP;IAAY,IAAA7B,WAAA;KAAA,OACnDmB,MAAMnB;IAAQ;GAAA,CAAA;EAAA;CAAA,CAAA,CAAA;AAIvB"}

package/dist/actionbuttongroup/index.jsx

@@ -0,0 +1,71 @@
+import { useProviderProps } from "../provider/index.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.jsx";
+import { c as ActionButtonGroupContext, d as useActionButtonGroupContext, n as s2ActionButtonGroup } from "../_chunk/s2-action-button-styles.jsx";
+import { mergeProps, splitProps } from "solid-js";
+import { Toolbar } from "@proyecto-viviana/solidaria-components";
+//#region src/actionbuttongroup/index.tsx
+/**
+* An ActionButtonGroup is a grouping of related ActionButtons.
+*/
+function ActionButtonGroup(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useActionButtonGroupContext(), props.slot);
+	const [local, domProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+		"children",
+		"size",
+		"density",
+		"isQuiet",
+		"isJustified",
+		"staticColor",
+		"orientation",
+		"isDisabled",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"ref"
+	]);
+	const size = () => local.size ?? "M";
+	const density = () => local.density ?? "regular";
+	const orientation = () => local.orientation ?? "horizontal";
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignGroupRefs = mergeContextRefs(contextProps?.ref, props.ref);
+	const className = () => [local.UNSAFE_className, s2ActionButtonGroup({
+		size: size(),
+		density: density(),
+		orientation: orientation(),
+		isJustified: local.isJustified
+	}, mergedStyles())].filter(Boolean).join(" ");
+	const contextValue = {
+		get size() {
+			return size();
+		},
+		get density() {
+			return density();
+		},
+		get orientation() {
+			return orientation();
+		},
+		get isQuiet() {
+			return local.isQuiet;
+		},
+		get isJustified() {
+			return local.isJustified;
+		},
+		get staticColor() {
+			return local.staticColor;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		}
+	};
+	return <Toolbar {...domProps} orientation={orientation()} ref={assignGroupRefs} class={className()} style={mergedUnsafeStyle()} data-orientation={orientation()}>
+      <ActionButtonGroupContext.Provider value={contextValue}>
+        {local.children}
+      </ActionButtonGroupContext.Provider>
+    </Toolbar>;
+}
+//#endregion
+export { ActionButtonGroup };
+
+//# sourceMappingURL=index.jsx.map

package/dist/actionbuttongroup/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","names":["HeadlessToolbar"],"sources":["../../src/actionbuttongroup/index.tsx"],"sourcesContent":["import { type JSX, mergeProps, splitProps } from \"solid-js\";\nimport { Toolbar as HeadlessToolbar } from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport {\n  ActionButtonGroupContext,\n  type ActionButtonDensity,\n  type ActionButtonOrientation,\n  type ActionButtonSize,\n  useActionButtonGroupContext,\n} from \"../button/group-context\";\nimport { s2ActionButtonGroup } 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 { StaticColor } from \"../button/types\";\n\nexport interface ActionButtonGroupProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"class\" | \"style\" | \"children\"\n> {\n  /** The children of the group. */\n  children?: JSX.Element;\n  /** Size of the buttons. @default 'M' */\n  size?: ActionButtonSize;\n  /** Spacing between the buttons. @default 'regular' */\n  density?: ActionButtonDensity;\n  /** Whether the buttons should be displayed with a quiet style. */\n  isQuiet?: boolean;\n  /** Whether the buttons should divide the container width equally. */\n  isJustified?: boolean;\n  /** The static color style to apply. Useful when the group appears over a color background. */\n  staticColor?: StaticColor;\n  /** The axis the group should align with. @default 'horizontal' */\n  orientation?: ActionButtonOrientation;\n  /** Whether the group is 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}\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport function ActionButtonGroup(props: ActionButtonGroupProps): JSX.Element {\n  const providerProps = useProviderProps(props);\n  const contextProps = getSlottedContextProps(useActionButtonGroupContext(), props.slot);\n  const merged = mergeProps(providerProps, contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"children\",\n    \"size\",\n    \"density\",\n    \"isQuiet\",\n    \"isJustified\",\n    \"staticColor\",\n    \"orientation\",\n    \"isDisabled\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"ref\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const density = () => local.density ?? \"regular\";\n  const orientation = () => local.orientation ?? \"horizontal\";\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const assignGroupRefs = mergeContextRefs(\n    (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n    props.ref as RefLike<HTMLDivElement>,\n  );\n  const className = () =>\n    [\n      local.UNSAFE_className,\n      s2ActionButtonGroup(\n        {\n          size: size(),\n          density: density(),\n          orientation: orientation(),\n          isJustified: local.isJustified,\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  const contextValue = {\n    get size() {\n      return size();\n    },\n    get density() {\n      return density();\n    },\n    get orientation() {\n      return orientation();\n    },\n    get isQuiet() {\n      return local.isQuiet;\n    },\n    get isJustified() {\n      return local.isJustified;\n    },\n    get staticColor() {\n      return local.staticColor;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n\n  return (\n    <HeadlessToolbar\n      {...domProps}\n      orientation={orientation()}\n      ref={assignGroupRefs}\n      class={className()}\n      style={mergedUnsafeStyle()}\n      data-orientation={orientation()}\n    >\n      <ActionButtonGroupContext.Provider value={contextValue}>\n        {local.children}\n      </ActionButtonGroupContext.Provider>\n    </HeadlessToolbar>\n  );\n}\n"],"mappings":";;;;;;;;;AAoDA,SAAgB,kBAAkB,OAA4C;CAC5E,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,eAAe,uBAAuB,4BAA4B,GAAG,MAAM,IAAI;CAErF,MAAM,CAAC,OAAO,YAAY,WADX,WAAW,eAAe,gBAAgB,CAAC,GAAG,KACnB,GAAG;EAC3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,gBAAgB,MAAM,WAAW;CACvC,MAAM,oBAAoB,MAAM,eAAe;CAC/C,MAAM,qBAAqB,mBAAmB,cAAc,QAAQ,MAAM,MAAM;CAChF,MAAM,0BACJ,wBAAwB,cAAc,cAAc,MAAM,YAAY;CACxE,MAAM,kBAAkB,iBACrB,cAA2D,KAC5D,MAAM,GACR;CACA,MAAM,kBACJ,CACE,MAAM,kBACN,oBACE;EACE,MAAM,KAAK;EACX,SAAS,QAAQ;EACjB,aAAa,YAAY;EACzB,aAAa,MAAM;CACrB,GACA,aAAa,CACf,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAEb,MAAM,eAAe;EACnB,IAAI,OAAO;GACT,OAAO,KAAK;EACd;EACA,IAAI,UAAU;GACZ,OAAO,QAAQ;EACjB;EACA,IAAI,cAAc;GAChB,OAAO,YAAY;EACrB;EACA,IAAI,UAAU;GACZ,OAAO,MAAM;EACf;EACA,IAAI,cAAc;GAChB,OAAO,MAAM;EACf;EACA,IAAI,cAAc;GAChB,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;CACF;CAEA,OACE,CAACA,YACK,UACJ,aAAa,YAAY,GACzB,KAAK,iBACL,OAAO,UAAU,GACjB,OAAO,kBAAkB,GACzB,kBAAkB,YAAY,GAC/B;MACC,CAAC,yBAAyB,SAAS,OAAO,cAAc;SACrD,MAAM,SAAS;MAClB,EAAE,yBAAyB,SAAS;IACtC,EAAEA;AAEN"}