@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

package/dist/ActionBar.js

@@ -1,7 +1,32 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, insert, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2020 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.
+*/
+/*
+* 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/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, insert, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, useContext } from "solid-js";
 import { announce } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/ActionBar.tsx
 /**
 * ActionBar component for solidaria-components
@@ -9,11 +34,17 @@ import { announce } from "@proyecto-viviana/solidaria";
 * Headless action bar that appears when items are selected in a collection.
 * Shows a selection count, clear button, and action buttons.
 *
-* No RAC headless equivalent — this is a thin component layer that ties
-* selection state to visibility and keyboard behavior.
+* Based on packages/@react-spectrum/s2/src/ActionBar.tsx and
+* https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.
+* The Solid port keeps the S2 action-bar structure and the Spectrum
+* ActionBarContainer ownership model. It exposes the selection count and clear
+* action as separate headless primitives.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div style=position:relative>`), _tmpl$3 = /*#__PURE__*/ template(`<span>`), _tmpl$4 = /*#__PURE__*/ template(`<button type=button>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div style=position:relative>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<button type=button>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -37,15 +68,14 @@ function ActionBar(props) {
 		"actionsAvailableMessage",
 		"ref"
 	]);
-	const selectedItemCount = () => local.selectedItemCount ?? 0;
+	const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);
 	const isOpen = () => selectedItemCount() !== 0;
 	let wasOpen = false;
-	createEffect(() => {
-		const open = isOpen();
-		if (open && !wasOpen) {
-			const message = local.actionsAvailableMessage ?? "Actions available.";
-			if (message) announce(message);
-		}
+	createEffect(() => ({
+		open: isOpen(),
+		message: local.actionsAvailableMessage
+	}), ({ open, message }) => {
+		if (open && !wasOpen && message) announce(message);
 		wasOpen = open;
 	});
 	const handleKeyDown = (e) => {
@@ -78,15 +108,17 @@ function ActionBar(props) {
 			return isOpen();
 		},
 		get children() {
-			return createComponent(ActionBarContext.Provider, {
+			return createComponent(ActionBarContext, {
 				get value() {
 					return contextValue();
 				},
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
-					use((el) => assignRef(local.ref, el), _el$);
-					spread(_el$, mergeProps(filteredDOMProps, {
-						get ["class"]() {
+					ref(() => {
+						return (el) => assignRef$1(local.ref, el);
+					}, _el$);
+					spread(_el$, [filteredDOMProps, {
+						get "class"() {
 							return renderProps.class();
 						},
 						get style() {
@@ -95,12 +127,14 @@ function ActionBar(props) {
 						get slot() {
 							return local.slot;
 						},
-						get ["data-open"]() {
-							return isOpen() || void 0;
+						get "data-open"() {
+							return dataAttr(isOpen());
 						},
-						"onKeyDown": handleKeyDown
-					}), false, true);
-					insert(_el$, () => local.children);
+						onKeyDown: handleKeyDown
+					}], true);
+					insert(_el$, scope(() => {
+						return local.children;
+					}));
 					runHydrationEvents();
 					return _el$;
 				}
@@ -112,20 +146,20 @@ function ActionBar(props) {
 * Container that positions a collection and its ActionBar.
 */
 function ActionBarContainer(props) {
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2);
-		insert(_el$2, () => props.children);
-		effect((_p$) => {
-			var _v$ = props.class ?? "solidaria-ActionBarContainer", _v$2 = { ...props.style };
-			_v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-			_p$.t = style(_el$2, _v$2, _p$.t);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$2;
-	})();
+	var _el$2 = getNextElement(_tmpl$2);
+	insert(_el$2, scope(() => {
+		return props.children;
+	}));
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-ActionBarContainer"),
+			t: { ...props.style }
+		};
+	}, ({ e, t }, _p$) => {
+		className(_el$2, e, _p$?.e);
+		style(_el$2, t, _p$?.t);
+	});
+	return _el$2;
 }
 /**
 * Displays the count of selected items.
@@ -139,34 +173,36 @@ function ActionBarSelectionCount(props) {
 		if (count === 0) return "None selected";
 		return `${count} selected`;
 	};
-	return (() => {
-		var _el$3 = getNextElement(_tmpl$3);
-		insert(_el$3, text);
-		effect(() => className(_el$3, props.class));
-		return _el$3;
-	})();
+	var _el$3 = getNextElement(_tmpl$3);
+	insert(_el$3, scope(() => {
+		return text();
+	}));
+	effect(() => readShallow(props.class), (_v$, _$p) => {
+		className(_el$3, _v$, _$p);
+	});
+	return _el$3;
 }
 /**
 * Button to clear the current selection.
 */
 function ActionBarClearButton(props) {
 	const ctx = useActionBarContext();
-	return (() => {
-		var _el$4 = getNextElement(_tmpl$4);
-		_el$4.$$click = () => ctx?.onClearSelection?.();
-		insert(_el$4, () => props.children ?? "✕");
-		effect((_p$) => {
-			var _v$3 = props["aria-label"] ?? "Clear selection", _v$4 = props.class;
-			_v$3 !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$3);
-			_v$4 !== _p$.t && className(_el$4, _p$.t = _v$4);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		runHydrationEvents();
-		return _el$4;
-	})();
+	var _el$4 = getNextElement(_tmpl$4);
+	_el$4._$$click = () => ctx?.onClearSelection?.();
+	insert(_el$4, () => {
+		return props.children ?? "✕";
+	});
+	effect(() => {
+		return {
+			e: props["aria-label"] ?? "Clear selection",
+			t: readShallow(props.class)
+		};
+	}, ({ e, t }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$4, "aria-label", e);
+		className(_el$4, t, _p$?.t);
+	});
+	runHydrationEvents();
+	return _el$4;
 }
 delegateEvents(["click"]);
 //#endregion

package/dist/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","names":["JSX","ParentProps","Show","createContext","createMemo","createEffect","splitProps","useContext","announce","Key","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","RefLike","el","T","current","assignRef","ref","ActionBarRenderProps","isOpen","selectedItemCount","ActionBarProps","Omit","HTMLAttributes","HTMLDivElement","onClearSelection","onAction","key","children","Element","class","style","onKeyDown","EventHandlerUnion","KeyboardEvent","actionsAvailableMessage","ActionBarContextValue","ActionBarContext","useActionBarContext","ActionBar","props","local","domProps","wasOpen","open","message","handleKeyDown","e","EventHandler","defaultPrevented","preventDefault","stopPropagation","renderProps","undefined","defaultClassName","filteredDOMProps","Record","global","contextValue","_$createComponent","when","Provider","value","_el$","_$getNextElement","_tmpl$","_$use","_$spread","_$mergeProps","slot","data-open","_$insert","_$runHydrationEvents","ActionBarContainerProps","CSSProperties","ActionBarContainer","_el$2","_tmpl$2","_$effect","_p$","_v$","_v$2","_$className","t","_$style","ActionBarSelectionCountProps","ActionBarSelectionCount","ctx","text","count","_el$3","_tmpl$3","ActionBarClearButtonProps","ActionBarClearButton","_el$4","_tmpl$4","$$click","_v$3","_v$4","_$setAttribute","_$delegateEvents"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * No RAC headless equivalent — this is a thin component layer that ties\n * selection state to visibility and keyboard behavior.\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  Show,\n  createContext,\n  createMemo,\n  createEffect,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ActionBarRenderProps {\n  /** Whether the action bar is visible. */\n  isOpen: boolean;\n  /** The number of selected items. */\n  selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n    SlotProps {\n  /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n  selectedItemCount?: number | \"all\";\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  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionBarRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionBarRenderProps>;\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 on the action bar element. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  /** Screen reader announcement when the action bar becomes available. */\n  actionsAvailableMessage?: string;\n  /** Ref for the underlying action bar element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n  selectedItemCount: () => number | \"all\";\n  onClearSelection?: () => void;\n  onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n  return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectedItemCount\",\n    \"onClearSelection\",\n    \"onAction\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"onKeyDown\",\n    \"actionsAvailableMessage\",\n    \"ref\",\n  ]);\n\n  const selectedItemCount = () => local.selectedItemCount ?? 0;\n  const isOpen = () => selectedItemCount() !== 0;\n\n  // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n  // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n  // handler that clears the selection) onto it. The single `toolbar` is the\n  // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n  // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n  // S2 never renders and (b) nest the real action toolbar inside it, forcing\n  // its role to downgrade to `group`. So the root deliberately carries no\n  // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n  // ActionButtonGroup at the styled layer.\n  let wasOpen = false;\n  createEffect(() => {\n    const open = isOpen();\n    if (open && !wasOpen) {\n      const message = local.actionsAvailableMessage ?? \"Actions available.\";\n      if (message) {\n        announce(message);\n      }\n    }\n    wasOpen = open;\n  });\n\n  const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n    const onKeyDown = local.onKeyDown as\n      | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n      | undefined;\n    onKeyDown?.(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === \"Escape\" && isOpen()) {\n      e.preventDefault();\n      e.stopPropagation();\n      local.onClearSelection?.();\n    }\n  };\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionBar\",\n    },\n    () => ({\n      isOpen: isOpen(),\n      selectedItemCount: selectedItemCount(),\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  const contextValue = createMemo<ActionBarContextValue>(() => ({\n    selectedItemCount,\n    onClearSelection: local.onClearSelection,\n    onAction: local.onAction,\n  }));\n\n  return (\n    <Show when={isOpen()}>\n      <ActionBarContext.Provider value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={isOpen() || undefined}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext.Provider>\n    </Show>\n  );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <div\n      class={props.class ?? \"solidaria-ActionBarContainer\"}\n      style={{ position: \"relative\", ...props.style }}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport interface ActionBarSelectionCountProps {\n  class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  const text = () => {\n    if (!ctx) return \"\";\n    const count = ctx.selectedItemCount();\n    if (count === \"all\") return \"All selected\";\n    if (count === 0) return \"None selected\";\n    return `${count} selected`;\n  };\n\n  return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      class={props.class}\n      onClick={() => ctx?.onClearSelection?.()}\n    >\n      {props.children ?? \"\\u2715\"}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,SAASmB,UAAaC,KAAiBJ,IAAa;CAClD,IAAI,CAACI,KAAK;CACV,IAAI,OAAOA,QAAQ,YACjBA,IAAIJ,EAAE;MAENI,IAAIF,UAAUF;AAElB;AA2CA,MAAawB,mBAAmBrC,cAA4C,IAAI;AAEhF,SAAgBsC,sBAAoD;CAClE,OAAOlC,WAAWiC,gBAAgB;AACpC;AAEA,SAAgBE,UAAUC,OAAoC;CAC5D,MAAM,CAACC,OAAOC,YAAYvC,WAAWqC,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAK,CACN;CAED,MAAMpB,0BAA0BqB,MAAMrB,qBAAqB;CAC3D,MAAMD,eAAeC,kBAAkB,MAAM;CAW7C,IAAIuB,UAAU;CACdzC,mBAAmB;EACjB,MAAM0C,OAAOzB,OAAO;EACpB,IAAIyB,QAAQ,CAACD,SAAS;GACpB,MAAME,UAAUJ,MAAMN,2BAA2B;GACjD,IAAIU,SACFxC,SAASwC,OAAO;EAEpB;EACAF,UAAUC;CACZ,CAAC;CAED,MAAME,iBAAuEC,MAAM;EACjF,MAAMf,YAAYS,MAAMT;EAGxBA,YAAYe,CAAC;EACb,IAAIA,EAAEE,kBACJ;EAGF,IAAIF,EAAEpB,QAAQ,YAAYR,OAAO,GAAG;GAClC4B,EAAEG,eAAe;GACjBH,EAAEI,gBAAgB;GAClBV,MAAMhB,mBAAmB;EAC3B;CACF;CAEA,MAAM2B,cAAc1C,eAClB;EACEkB,UAAUyB,KAAAA;EACVvB,OAAOW,MAAMX;EACbC,OAAOU,MAAMV;EACbuB,kBAAkB;CACpB,UACO;EACLnC,QAAQA,OAAO;EACfC,mBAAmBA,kBAAkB;CACvC,EACF;CAEA,MAAMmC,mBAAmBtD,iBACvBU,eAAe+B,UAAqC,EAAEe,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAMC,eAAezD,kBAAyC;EAC5DmB;EACAK,kBAAkBgB,MAAMhB;EACxBC,UAAUe,MAAMf;CAClB,EAAE;CAEF,OAAAiC,gBACG5D,MAAI;EAAA,IAAC6D,OAAI;GAAA,OAAEzC,OAAO;EAAC;EAAA,IAAAS,WAAA;GAAA,OAAA+B,gBACjBtB,iBAAiBwB,UAAQ;IAAA,IAACC,QAAK;KAAA,OAAEJ,aAAa;IAAC;IAAA,IAAA9B,WAAA;KAAA,IAAAmC,OAAAC,eAAAC,MAAA;KAAAC,KAQtCrD,OAAOG,UAAUyB,MAAMxB,KAAKJ,EAAE,GAACkD,IAAA;KAAAI,OAAAJ,MAAAK,WANjCb,kBAAgB;MAAA,KAAA,WAAA;OAAA,OACbH,YAAYtB,MAAM;MAAC;MAAA,IAC1BC,QAAK;OAAA,OAAEqB,YAAYrB,MAAM;MAAC;MAAA,IAC1BsC,OAAI;OAAA,OAAE5B,MAAM4B;MAAI;MAAA,KAAA,eAAA;OAAA,OACLlD,OAAO,KAAKkC,KAAAA;MAAS;MAAA,aACrBP;KAAa,CAAA,GAAA,OAAA,IAAA;KAAAyB,OAAAR,YAGvBtB,MAAMb,QAAQ;KAAA4C,mBAAA;KAAA,OAAAT;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAKzB;;;;AAUA,SAAgBY,mBAAmBnC,OAA6C;CAC9E,cAAA;EAAA,IAAAoC,QAAAZ,eAAAa,OAAA;EAAAN,OAAAK,aAKKpC,MAAMZ,QAAQ;EAAAkD,QAAAC,QAAA;GAAA,IAAAC,MAHRxC,MAAMV,SAAS,gCAA8BmD,OAC7C,EAAwB,GAAGzC,MAAMT,MAAM;GAACiD,QAAAD,IAAAhC,KAAAmC,UAAAN,OAAAG,IAAAhC,IAAAiC,GAAA;GAAAD,IAAAI,IAAAC,MAAAR,OAAAK,MAAAF,IAAAI,CAAA;GAAA,OAAAJ;EAAA,GAAA;GAAAhC,GAAAM,KAAAA;GAAA8B,GAAA9B,KAAAA;EAAA,CAAA;EAAA,OAAAuB;CAAA,EAAA,CAAA;AAKrD;;;;AASA,SAAgBU,wBAAwB9C,OAAkD;CACxF,MAAM+C,MAAMjD,oBAAoB;CAEhC,MAAMkD,aAAa;EACjB,IAAI,CAACD,KAAK,OAAO;EACjB,MAAME,QAAQF,IAAInE,kBAAkB;EACpC,IAAIqE,UAAU,OAAO,OAAO;EAC5B,IAAIA,UAAU,GAAG,OAAO;EACxB,OAAO,GAAGA,MAAK;CACjB;CAEA,cAAA;EAAA,IAAAC,QAAA1B,eAAA2B,OAAA;EAAApB,OAAAmB,OAAkCF,IAAI;EAAAV,aAAAI,UAAAQ,OAAlBlD,MAAMV,KAAK,CAAA;EAAA,OAAA4D;CAAA,EAAA,CAAA;AACjC;;;;AAWA,SAAgBG,qBAAqBrD,OAA+C;CAClF,MAAM+C,MAAMjD,oBAAoB;CAEhC,cAAA;EAAA,IAAAwD,QAAA9B,eAAA+B,OAAA;EAAAD,MAAAE,gBAKmBT,KAAK9D,mBAAmB;EAAC8C,OAAAuB,aAEvCtD,MAAMZ,YAAY,GAAQ;EAAAkD,QAAAC,QAAA;GAAA,IAAAkB,OAJfzD,MAAM,iBAAiB,mBAAiB0D,OAC7C1D,MAAMV;GAAKmE,SAAAlB,IAAAhC,KAAAoD,aAAAL,OAAA,cAAAf,IAAAhC,IAAAkD,IAAA;GAAAC,SAAAnB,IAAAI,KAAAD,UAAAY,OAAAf,IAAAI,IAAAe,IAAA;GAAA,OAAAnB;EAAA,GAAA;GAAAhC,GAAAM,KAAAA;GAAA8B,GAAA9B,KAAAA;EAAA,CAAA;EAAAmB,mBAAA;EAAA,OAAAsB;CAAA,EAAA,CAAA;AAMxB;AAACM,eAAA,CAAA,OAAA,CAAA"}
+{"version":3,"file":"ActionBar.js","names":["<Show when={isOpen()}>\n      <ActionBarContext value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={dataAttr(isOpen())}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext>\n    </Show>","<ActionBarContext value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={dataAttr(isOpen())}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext>","ref={(el) => assignRef(local.ref, el)}","onKeyDown={handleKeyDown}","{local.children}","<div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={dataAttr(isOpen())}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>","{props.children}","style={{ position: \"relative\", ...props.style }}","<div\n      class={props.class ?? \"solidaria-ActionBarContainer\"}\n      style={{ position: \"relative\", ...props.style }}\n    >\n      {props.children}\n    </div>","{text()}","<span class={props.class}>{text()}</span>","class={props.class}","<button\n      type=\"button\"\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      class={props.class}\n      onClick={() => ctx?.onClearSelection?.()}\n    >\n      {props.children ?? \"\\u2715\"}\n    </button>"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 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/*\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/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ActionBarRenderProps {\n  /** Whether the action bar is visible. */\n  isOpen: boolean;\n  /** The number of selected items. */\n  selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n    SlotProps {\n  /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n  selectedItemCount?: number | \"all\";\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  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionBarRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionBarRenderProps>;\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 on the action bar element. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  /** Screen reader announcement when the action bar becomes available. */\n  actionsAvailableMessage?: string;\n  /** Ref for the underlying action bar element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n  selectedItemCount: () => number | \"all\";\n  onClearSelection?: () => void;\n  onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n  return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectedItemCount\",\n    \"onClearSelection\",\n    \"onAction\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"onKeyDown\",\n    \"actionsAvailableMessage\",\n    \"ref\",\n  ]);\n\n  // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n  // created on first read, and createTrackedEffect forbids primitives.\n  const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n  const isOpen = () => selectedItemCount() !== 0;\n\n  // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n  // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n  // handler that clears the selection) onto it. The single `toolbar` is the\n  // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n  // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n  // S2 never renders and (b) nest the real action toolbar inside it, forcing\n  // its role to downgrade to `group`. So the root deliberately carries no\n  // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n  // ActionButtonGroup at the styled layer.\n  let wasOpen = false;\n  createEffect(\n    () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n    ({ open, message }) => {\n      if (open && !wasOpen && message) {\n        announce(message);\n      }\n      wasOpen = open;\n    },\n  );\n\n  const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n    const onKeyDown = local.onKeyDown as\n      | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n      | undefined;\n    onKeyDown?.(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === \"Escape\" && isOpen()) {\n      e.preventDefault();\n      e.stopPropagation();\n      local.onClearSelection?.();\n    }\n  };\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionBar\",\n    },\n    () => ({\n      isOpen: isOpen(),\n      selectedItemCount: selectedItemCount(),\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  const contextValue = createMemo<ActionBarContextValue>(() => ({\n    selectedItemCount,\n    onClearSelection: local.onClearSelection,\n    onAction: local.onAction,\n  }));\n\n  return (\n    <Show when={isOpen()}>\n      <ActionBarContext value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={dataAttr(isOpen())}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext>\n    </Show>\n  );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <div\n      class={props.class ?? \"solidaria-ActionBarContainer\"}\n      style={{ position: \"relative\", ...props.style }}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport interface ActionBarSelectionCountProps {\n  class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  const text = () => {\n    if (!ctx) return \"\";\n    const count = ctx.selectedItemCount();\n    if (count === \"all\") return \"All selected\";\n    if (count === 0) return \"None selected\";\n    return `${count} selected`;\n  };\n\n  return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      class={props.class}\n      onClick={() => ctx?.onClearSelection?.()}\n    >\n      {props.children ?? \"\\u2715\"}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/ActionBar.jsx

@@ -1,6 +1,31 @@
-import { filterDOMProps, useRenderProps } from "./utils.jsx";
-import { Show, createContext, createEffect, createMemo, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2020 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.
+*/
+/*
+* 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/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Show, createContext, createEffect, createMemo, useContext } from "solid-js";
 import { announce } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/ActionBar.tsx
 /**
 * ActionBar component for solidaria-components
@@ -8,10 +33,13 @@ import { announce } from "@proyecto-viviana/solidaria";
 * Headless action bar that appears when items are selected in a collection.
 * Shows a selection count, clear button, and action buttons.
 *
-* No RAC headless equivalent — this is a thin component layer that ties
-* selection state to visibility and keyboard behavior.
+* Based on packages/@react-spectrum/s2/src/ActionBar.tsx and
+* https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.
+* The Solid port keeps the S2 action-bar structure and the Spectrum
+* ActionBarContainer ownership model. It exposes the selection count and clear
+* action as separate headless primitives.
 */
-function assignRef(ref, el) {
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -35,15 +63,14 @@ function ActionBar(props) {
 		"actionsAvailableMessage",
 		"ref"
 	]);
-	const selectedItemCount = () => local.selectedItemCount ?? 0;
+	const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);
 	const isOpen = () => selectedItemCount() !== 0;
 	let wasOpen = false;
-	createEffect(() => {
-		const open = isOpen();
-		if (open && !wasOpen) {
-			const message = local.actionsAvailableMessage ?? "Actions available.";
-			if (message) announce(message);
-		}
+	createEffect(() => ({
+		open: isOpen(),
+		message: local.actionsAvailableMessage
+	}), ({ open, message }) => {
+		if (open && !wasOpen && message) announce(message);
 		wasOpen = open;
 	});
 	const handleKeyDown = (e) => {
@@ -72,11 +99,11 @@ function ActionBar(props) {
 		onAction: local.onAction
 	}));
 	return <Show when={isOpen()}>
-      <ActionBarContext.Provider value={contextValue()}>
-        <div {...filteredDOMProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-open={isOpen() || void 0} onKeyDown={handleKeyDown} ref={(el) => assignRef(local.ref, el)}>
+      <ActionBarContext value={contextValue()}>
+        <div {...filteredDOMProps()} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-open={dataAttr(isOpen())} onKeyDown={handleKeyDown} ref={(el) => assignRef$1(local.ref, el)}>
           {local.children}
         </div>
-      </ActionBarContext.Provider>
+      </ActionBarContext>
     </Show>;
 }
 /**

package/dist/ActionBar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.jsx","names":[],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * No RAC headless equivalent — this is a thin component layer that ties\n * selection state to visibility and keyboard behavior.\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  Show,\n  createContext,\n  createMemo,\n  createEffect,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ActionBarRenderProps {\n  /** Whether the action bar is visible. */\n  isOpen: boolean;\n  /** The number of selected items. */\n  selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n    SlotProps {\n  /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n  selectedItemCount?: number | \"all\";\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  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionBarRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionBarRenderProps>;\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 on the action bar element. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  /** Screen reader announcement when the action bar becomes available. */\n  actionsAvailableMessage?: string;\n  /** Ref for the underlying action bar element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n  selectedItemCount: () => number | \"all\";\n  onClearSelection?: () => void;\n  onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n  return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectedItemCount\",\n    \"onClearSelection\",\n    \"onAction\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"onKeyDown\",\n    \"actionsAvailableMessage\",\n    \"ref\",\n  ]);\n\n  const selectedItemCount = () => local.selectedItemCount ?? 0;\n  const isOpen = () => selectedItemCount() !== 0;\n\n  // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n  // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n  // handler that clears the selection) onto it. The single `toolbar` is the\n  // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n  // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n  // S2 never renders and (b) nest the real action toolbar inside it, forcing\n  // its role to downgrade to `group`. So the root deliberately carries no\n  // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n  // ActionButtonGroup at the styled layer.\n  let wasOpen = false;\n  createEffect(() => {\n    const open = isOpen();\n    if (open && !wasOpen) {\n      const message = local.actionsAvailableMessage ?? \"Actions available.\";\n      if (message) {\n        announce(message);\n      }\n    }\n    wasOpen = open;\n  });\n\n  const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n    const onKeyDown = local.onKeyDown as\n      | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n      | undefined;\n    onKeyDown?.(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === \"Escape\" && isOpen()) {\n      e.preventDefault();\n      e.stopPropagation();\n      local.onClearSelection?.();\n    }\n  };\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionBar\",\n    },\n    () => ({\n      isOpen: isOpen(),\n      selectedItemCount: selectedItemCount(),\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  const contextValue = createMemo<ActionBarContextValue>(() => ({\n    selectedItemCount,\n    onClearSelection: local.onClearSelection,\n    onAction: local.onAction,\n  }));\n\n  return (\n    <Show when={isOpen()}>\n      <ActionBarContext.Provider value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={isOpen() || undefined}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext.Provider>\n    </Show>\n  );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <div\n      class={props.class ?? \"solidaria-ActionBarContainer\"}\n      style={{ position: \"relative\", ...props.style }}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport interface ActionBarSelectionCountProps {\n  class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  const text = () => {\n    if (!ctx) return \"\";\n    const count = ctx.selectedItemCount();\n    if (count === \"all\") return \"All selected\";\n    if (count === 0) return \"None selected\";\n    return `${count} selected`;\n  };\n\n  return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      class={props.class}\n      onClick={() => ctx?.onClearSelection?.()}\n    >\n      {props.children ?? \"\\u2715\"}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAgCA,SAAS,UAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,0BAA0B,MAAM,qBAAqB;CAC3D,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,mBAAmB;EACjB,MAAM,OAAO,OAAO;EACpB,IAAI,QAAQ,CAAC,SAAS;GACpB,MAAM,UAAU,MAAM,2BAA2B;GACjD,IAAI,SACF,SAAS,OAAO;EAEpB;EACA,UAAU;CACZ,CAAC;CAED,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,SAAS,OAAO,aAAa,GAAG;QAChD,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,OAAO,KAAK,KAAA,GACvB,WAAW,eACX,MAAM,OAAO,UAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB,SAAS;IAC9B,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}
+{"version":3,"file":"ActionBar.jsx","names":["assignRef"],"sources":["../src/ActionBar.tsx"],"sourcesContent":["/*\n * Copyright 2020 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/*\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/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ActionBar.tsx\n\n/**\n * ActionBar component for solidaria-components\n *\n * Headless action bar that appears when items are selected in a collection.\n * Shows a selection count, clear button, and action buttons.\n *\n * Based on packages/@react-spectrum/s2/src/ActionBar.tsx and\n * https://github.com/adobe/react-spectrum/blob/5ecb3333001313e83898cd07644227897e3bae1f/packages/@adobe/react-spectrum/src/actionbar/ActionBarContainer.tsx.\n * The Solid port keeps the S2 action-bar structure and the Spectrum\n * ActionBarContainer ownership model. It exposes the selection count and clear\n * action as separate headless primitives.\n */\n\nimport { Show, createContext, createMemo, createEffect, useContext } from \"solid-js\";\nimport type { ParentProps } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { announce } from \"@proyecto-viviana/solidaria\";\nimport type { Key } from \"@proyecto-viviana/solid-stately\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\n\ntype RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;\n\nfunction assignRef<T>(ref: RefLike<T>, el: T): void {\n  if (!ref) return;\n  if (typeof ref === \"function\") {\n    ref(el);\n  } else {\n    ref.current = el;\n  }\n}\n\nexport interface ActionBarRenderProps {\n  /** Whether the action bar is visible. */\n  isOpen: boolean;\n  /** The number of selected items. */\n  selectedItemCount: number | \"all\";\n}\n\nexport interface ActionBarProps\n  extends\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"ref\" | \"slot\">,\n    SlotProps {\n  /** The number of selected items. ActionBar is hidden when 0. @default 0 */\n  selectedItemCount?: number | \"all\";\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  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionBarRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionBarRenderProps>;\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 on the action bar element. */\n  onKeyDown?: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent>;\n  /** Screen reader announcement when the action bar becomes available. */\n  actionsAvailableMessage?: string;\n  /** Ref for the underlying action bar element. */\n  ref?: RefLike<HTMLDivElement>;\n}\n\nexport interface ActionBarContextValue {\n  selectedItemCount: () => number | \"all\";\n  onClearSelection?: () => void;\n  onAction?: (key: Key) => void;\n}\n\nexport const ActionBarContext = createContext<ActionBarContextValue | null>(null);\n\nexport function useActionBarContext(): ActionBarContextValue | null {\n  return useContext(ActionBarContext);\n}\n\nexport function ActionBar(props: ActionBarProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"selectedItemCount\",\n    \"onClearSelection\",\n    \"onAction\",\n    \"children\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"onKeyDown\",\n    \"actionsAvailableMessage\",\n    \"ref\",\n  ]);\n\n  // Hoist the JSX getter: `selectedItemCount={count()}` compiles as a memo\n  // created on first read, and createTrackedEffect forbids primitives.\n  const selectedItemCount = createMemo(() => local.selectedItemCount ?? 0);\n  const isOpen = () => selectedItemCount() !== 0;\n\n  // Faithful to S2 `ActionBar` (ActionBar.tsx:192): the ROOT is a PLAIN\n  // container with NO `role` — S2 spreads only `keyboardProps` (an Escape\n  // handler that clears the selection) onto it. The single `toolbar` is the\n  // inner `ActionButtonGroup` (styled layer), NOT this root. Applying\n  // `createToolbar` here would (a) give the root a spurious `role=\"toolbar\"`\n  // S2 never renders and (b) nest the real action toolbar inside it, forcing\n  // its role to downgrade to `group`. So the root deliberately carries no\n  // toolbar props — `aria-label`/`aria-labelledby` are consumed by the inner\n  // ActionButtonGroup at the styled layer.\n  let wasOpen = false;\n  createEffect(\n    () => ({ open: isOpen(), message: local.actionsAvailableMessage }),\n    ({ open, message }) => {\n      if (open && !wasOpen && message) {\n        announce(message);\n      }\n      wasOpen = open;\n    },\n  );\n\n  const handleKeyDown: JSX.EventHandlerUnion<HTMLDivElement, KeyboardEvent> = (e) => {\n    const onKeyDown = local.onKeyDown as\n      | JSX.EventHandler<HTMLDivElement, KeyboardEvent>\n      | undefined;\n    onKeyDown?.(e);\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (e.key === \"Escape\" && isOpen()) {\n      e.preventDefault();\n      e.stopPropagation();\n      local.onClearSelection?.();\n    }\n  };\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionBar\",\n    },\n    () => ({\n      isOpen: isOpen(),\n      selectedItemCount: selectedItemCount(),\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  const contextValue = createMemo<ActionBarContextValue>(() => ({\n    selectedItemCount,\n    onClearSelection: local.onClearSelection,\n    onAction: local.onAction,\n  }));\n\n  return (\n    <Show when={isOpen()}>\n      <ActionBarContext value={contextValue()}>\n        <div\n          {...filteredDOMProps()}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-open={dataAttr(isOpen())}\n          onKeyDown={handleKeyDown}\n          ref={(el) => assignRef(local.ref, el)}\n        >\n          {local.children}\n        </div>\n      </ActionBarContext>\n    </Show>\n  );\n}\n\nexport interface ActionBarContainerProps extends ParentProps {\n  class?: string;\n  style?: JSX.CSSProperties;\n}\n\n/**\n * Container that positions a collection and its ActionBar.\n */\nexport function ActionBarContainer(props: ActionBarContainerProps): JSX.Element {\n  return (\n    <div\n      class={props.class ?? \"solidaria-ActionBarContainer\"}\n      style={{ position: \"relative\", ...props.style }}\n    >\n      {props.children}\n    </div>\n  );\n}\n\nexport interface ActionBarSelectionCountProps {\n  class?: string;\n}\n\n/**\n * Displays the count of selected items.\n */\nexport function ActionBarSelectionCount(props: ActionBarSelectionCountProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  const text = () => {\n    if (!ctx) return \"\";\n    const count = ctx.selectedItemCount();\n    if (count === \"all\") return \"All selected\";\n    if (count === 0) return \"None selected\";\n    return `${count} selected`;\n  };\n\n  return <span class={props.class}>{text()}</span>;\n}\n\nexport interface ActionBarClearButtonProps {\n  class?: string;\n  children?: JSX.Element;\n  \"aria-label\"?: string;\n}\n\n/**\n * Button to clear the current selection.\n */\nexport function ActionBarClearButton(props: ActionBarClearButtonProps): JSX.Element {\n  const ctx = useActionBarContext();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={props[\"aria-label\"] ?? \"Clear selection\"}\n      class={props.class}\n      onClick={() => ctx?.onClearSelection?.()}\n    >\n      {props.children ?? \"\\u2715\"}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAASA,YAAa,KAAiB,IAAa;CAClD,IAAI,CAAC,KAAK;CACV,IAAI,OAAO,QAAQ,YACjB,IAAI,EAAE;MAEN,IAAI,UAAU;AAElB;AA2CA,MAAa,mBAAmB,cAA4C,IAAI;AAEhF,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAEA,SAAgB,UAAU,OAAoC;CAC5D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAID,MAAM,oBAAoB,iBAAiB,MAAM,qBAAqB,CAAC;CACvE,MAAM,eAAe,kBAAkB,MAAM;CAW7C,IAAI,UAAU;CACd,oBACS;EAAE,MAAM,OAAO;EAAG,SAAS,MAAM;CAAwB,KAC/D,EAAE,MAAM,cAAc;EACrB,IAAI,QAAQ,CAAC,WAAW,SACtB,SAAS,OAAO;EAElB,UAAU;CACZ,CACF;CAEA,MAAM,iBAAuE,MAAM;EACjF,MAAM,YAAY,MAAM;EAGxB,YAAY,CAAC;EACb,IAAI,EAAE,kBACJ;EAGF,IAAI,EAAE,QAAQ,YAAY,OAAO,GAAG;GAClC,EAAE,eAAe;GACjB,EAAE,gBAAgB;GAClB,MAAM,mBAAmB;EAC3B;CACF;CAEA,MAAM,cAAc,eAClB;EACE,UAAU,KAAA;EACV,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,UACO;EACL,QAAQ,OAAO;EACf,mBAAmB,kBAAkB;CACvC,EACF;CAEA,MAAM,mBAAmB,iBACvB,eAAe,UAAqC,EAAE,QAAQ,KAAK,CAAC,CACtE;CAEA,MAAM,eAAe,kBAAyC;EAC5D;EACA,kBAAkB,MAAM;EACxB,UAAU,MAAM;CAClB,EAAE;CAEF,OACE,CAAC,KAAK,MAAM,OAAO,GAAG;MACpB,CAAC,iBAAiB,OAAO,aAAa,GAAG;QACvC,CAAC,QACK,iBAAiB,GACrB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,MAAM,MAAM,MACZ,WAAW,SAAS,OAAO,CAAC,GAC5B,WAAW,eACX,MAAM,OAAOA,YAAU,MAAM,KAAK,EAAE,GACrC;WACE,MAAM,SAAS;QAClB,EAAE,IAAI;MACR,EAAE,iBAAiB;IACrB,EAAE;AAEN;;;;AAUA,SAAgB,mBAAmB,OAA6C;CAC9E,OACE,CAAC,IACC,OAAO,MAAM,SAAS,gCACtB,OAAO;EAAE,UAAU;EAAY,GAAG,MAAM;CAAM,GAC/C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AASA,SAAgB,wBAAwB,OAAkD;CACxF,MAAM,MAAM,oBAAoB;CAEhC,MAAM,aAAa;EACjB,IAAI,CAAC,KAAK,OAAO;EACjB,MAAM,QAAQ,IAAI,kBAAkB;EACpC,IAAI,UAAU,OAAO,OAAO;EAC5B,IAAI,UAAU,GAAG,OAAO;EACxB,OAAO,GAAG,MAAM;CAClB;CAEA,OAAO,CAAC,KAAK,OAAO,MAAM,QAAQ,KAAK,EAAE,EAAE;AAC7C;;;;AAWA,SAAgB,qBAAqB,OAA+C;CAClF,MAAM,MAAM,oBAAoB;CAEhC,OACE,CAAC,OACC,cACA,YAAY,MAAM,iBAAiB,mBACnC,OAAO,MAAM,OACb,eAAe,KAAK,mBAAmB,GACxC;OACE,MAAM,YAAY,IAAS;IAC9B,EAAE;AAEN"}

package/dist/ActionGroup.d.ts

@@ -1,15 +1,4 @@
-/**
- * ActionGroup component for solidaria-components
- *
- * Pre-wired headless action group component that combines
- * createListState + createActionGroup/createActionGroupItem.
- * Provides proper dynamic roles (toolbar/radiogroup), keyboard
- * navigation, and ARIA attributes.
- *
- * No RAC equivalent exists — this bridges solidaria ARIA hooks
- * directly to a headless component.
- */
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ListState, type Key, type SelectionMode } from "@proyecto-viviana/solid-stately";
 import { type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";
 export interface ActionGroupRenderProps {

package/dist/ActionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EACL,KAAK,GAAG,EAOT,MAAM,UAAU,CAAC;AAMlB,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC9F,qCAAqC;IACrC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;IACpD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IAClF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6EAAsD,CAAC;AACtF,eAAO,MAAM,uBAAuB,+DAAyD,CAAC;AAE9F,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACrE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,GAAG,CAAC,OAAO,CA0Hb;AAiDD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE"}
+{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../src/ActionGroup.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAMxC,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,aAAa,EACnB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,SAAS,EAIf,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,sBAAsB;IACrC,2CAA2C;IAC3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,0BAA0B;IAC1B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,WAAW,0BAA0B;IACzC,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,CAAE,SAAQ,SAAS;IAC9F,qCAAqC;IACrC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,0CAA0C;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,sDAAsD;IACtD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,6CAA6C;IAC7C,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,EAAE,0BAA0B,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,sBAAsB,CAAC,CAAC;IACpD,sCAAsC;IACtC,KAAK,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe;IAClF,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6EAAsD,CAAC;AACtF,eAAO,MAAM,uBAAuB,+DAAyD,CAAC;AAE9F,wBAAgB,WAAW,CAAC,CAAC,SAAS,eAAe,GAAG,eAAe,EACrE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GACzB,GAAG,CAAC,OAAO,CA0Hb;AAiDD,wBAAgB,qBAAqB,IAAI,uBAAuB,GAAG,IAAI,CAEtE"}

package/dist/ActionGroup.js

@@ -1,7 +1,21 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
-import { createComponent, getNextElement, insert, mergeProps, runHydrationEvents, spread, template, use } from "solid-js/web";
-import { For, createContext, createMemo, splitProps, useContext } from "solid-js";
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroup.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/actiongroup/useActionGroupItem.ts
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { createComponent, getNextElement, insert, ref, runHydrationEvents, scope, spread, template } from "@solidjs/web";
+import { For, createContext, createMemo, useContext } from "solid-js";
 import { createActionGroup, createActionGroupItem } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createListState } from "@proyecto-viviana/solid-stately";
 //#region src/ActionGroup.tsx
 /**
@@ -12,10 +26,12 @@ import { createListState } from "@proyecto-viviana/solid-stately";
 * Provides proper dynamic roles (toolbar/radiogroup), keyboard
 * navigation, and ARIA attributes.
 *
-* No RAC equivalent exists — this bridges solidaria ARIA hooks
-* directly to a headless component.
+* Based on packages/react-aria/src/actiongroup/useActionGroup.ts and
+* packages/react-aria/src/actiongroup/useActionGroupItem.ts. React Aria
+* Components has no ActionGroup component, so this file wires the two hooks.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 const ActionGroupContext = createContext(null);
 const ActionGroupStateContext = createContext(null);
 function ActionGroup(props) {
@@ -89,34 +105,40 @@ function ActionGroup(props) {
 		selectionMode: local.selectionMode ?? "none"
 	}));
 	const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
-	return createComponent(ActionGroupContext.Provider, {
+	return createComponent(ActionGroupContext, {
 		value: { state },
 		get children() {
-			return createComponent(ActionGroupStateContext.Provider, {
+			return createComponent(ActionGroupStateContext, {
 				value: state,
 				get children() {
 					var _el$ = getNextElement(_tmpl$);
-					use((el) => {
-						const refFn = actionGroupProps.ref;
-						refFn?.(el);
+					ref(() => {
+						return (el) => {
+							const refFn = actionGroupProps.ref;
+							refFn?.(el);
+						};
 					}, _el$);
-					spread(_el$, mergeProps(filteredDOMProps, actionGroupProps, {
-						get ["class"]() {
-							return renderProps.class();
-						},
-						get style() {
-							return renderProps.style();
-						},
-						get slot() {
-							return local.slot;
-						},
-						get ["data-orientation"]() {
-							return orientation();
-						},
-						get ["data-disabled"]() {
-							return local.isDisabled || void 0;
+					spread(_el$, [
+						filteredDOMProps,
+						actionGroupProps,
+						{
+							get "class"() {
+								return renderProps.class();
+							},
+							get style() {
+								return renderProps.style();
+							},
+							get slot() {
+								return local.slot;
+							},
+							get "data-orientation"() {
+								return orientation();
+							},
+							get "data-disabled"() {
+								return dataAttr(local.isDisabled);
+							}
 						}
-					}), false, true);
+					], true);
 					insert(_el$, createComponent(For, {
 						get each() {
 							return local.items;
@@ -152,23 +174,23 @@ function ActionGroupItemWrapper(props) {
 		isFocused: isFocused()
 	}));
 	const [, restButtonProps] = splitProps(buttonProps, ["ref"]);
-	return (() => {
-		var _el$2 = getNextElement(_tmpl$2);
-		spread(_el$2, mergeProps(restButtonProps, {
-			get ["data-selected"]() {
-				return isSelected() || void 0;
-			},
-			get ["data-disabled"]() {
-				return isDisabled() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			}
-		}), false, true);
-		insert(_el$2, () => props.renderChild(props.item, renderProps()));
-		runHydrationEvents();
-		return _el$2;
-	})();
+	var _el$2 = getNextElement(_tmpl$2);
+	spread(_el$2, [restButtonProps, {
+		get "data-selected"() {
+			return dataAttr(isSelected());
+		},
+		get "data-disabled"() {
+			return dataAttr(isDisabled());
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		}
+	}], true);
+	insert(_el$2, scope(() => {
+		return props.renderChild(props.item, renderProps());
+	}));
+	runHydrationEvents();
+	return _el$2;
 }
 function useActionGroupContext() {
 	return useContext(ActionGroupContext);