@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/ActionBar.js

@@ -0,0 +1,184 @@
+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";
+import { announce, createToolbar } from "@proyecto-viviana/solidaria";
+//#region src/ActionBar.tsx
+/**
+* ActionBar component for solidaria-components
+*
+* 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.
+*/
+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) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const ActionBarContext = createContext(null);
+function useActionBarContext() {
+	return useContext(ActionBarContext);
+}
+function ActionBar(props) {
+	const [local, domProps] = splitProps(props, [
+		"selectedItemCount",
+		"onClearSelection",
+		"onAction",
+		"children",
+		"class",
+		"style",
+		"slot",
+		"aria-label",
+		"aria-labelledby",
+		"onKeyDown",
+		"actionsAvailableMessage",
+		"ref"
+	]);
+	const selectedItemCount = () => local.selectedItemCount ?? 0;
+	const isOpen = () => selectedItemCount() !== 0;
+	const { toolbarProps } = createToolbar({
+		orientation: "horizontal",
+		get "aria-label"() {
+			return local["aria-label"] ?? (local["aria-labelledby"] ? void 0 : "Actions");
+		},
+		get "aria-labelledby"() {
+			return local["aria-labelledby"];
+		}
+	});
+	let wasOpen = false;
+	createEffect(() => {
+		const open = isOpen();
+		if (open && !wasOpen) {
+			const message = local.actionsAvailableMessage ?? "Actions available.";
+			if (message) announce(message);
+		}
+		wasOpen = open;
+	});
+	const handleKeyDown = (e) => {
+		const onKeyDown = local.onKeyDown;
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (e.key === "Escape" && isOpen()) {
+			e.preventDefault();
+			e.stopPropagation();
+			local.onClearSelection?.();
+		}
+	};
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ActionBar"
+	}, () => ({
+		isOpen: isOpen(),
+		selectedItemCount: selectedItemCount()
+	}));
+	const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	const contextValue = createMemo(() => ({
+		selectedItemCount,
+		onClearSelection: local.onClearSelection,
+		onAction: local.onAction
+	}));
+	return createComponent(Show, {
+		get when() {
+			return isOpen();
+		},
+		get children() {
+			return createComponent(ActionBarContext.Provider, {
+				get value() {
+					return contextValue();
+				},
+				get children() {
+					var _el$ = getNextElement(_tmpl$);
+					use((el) => assignRef(local.ref, el), _el$);
+					spread(_el$, mergeProps(filteredDOMProps, toolbarProps, {
+						get ["class"]() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						get slot() {
+							return local.slot;
+						},
+						get ["data-open"]() {
+							return isOpen() || void 0;
+						},
+						"onKeyDown": handleKeyDown
+					}), false, true);
+					insert(_el$, () => local.children);
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+/**
+* 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;
+	})();
+}
+/**
+* Displays the count of selected items.
+*/
+function ActionBarSelectionCount(props) {
+	const ctx = useActionBarContext();
+	const text = () => {
+		if (!ctx) return "";
+		const count = ctx.selectedItemCount();
+		if (count === "all") return "All selected";
+		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;
+	})();
+}
+/**
+* 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;
+	})();
+}
+delegateEvents(["click"]);
+//#endregion
+export { ActionBar, ActionBarClearButton, ActionBarContainer, ActionBarContext, ActionBarSelectionCount, useActionBarContext };
+
+//# sourceMappingURL=ActionBar.js.map

package/dist/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","names":["JSX","ParentProps","Show","createContext","createMemo","createEffect","splitProps","useContext","announce","createToolbar","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","toolbarProps","orientation","aria-label","undefined","aria-labelledby","wasOpen","open","message","handleKeyDown","e","EventHandler","defaultPrevented","preventDefault","stopPropagation","renderProps","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, createToolbar } 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  const { toolbarProps } = createToolbar({\n    orientation: \"horizontal\",\n    get \"aria-label\"() {\n      return local[\"aria-label\"] ?? (local[\"aria-labelledby\"] ? undefined : \"Actions\");\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n  });\n\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          {...toolbarProps}\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":"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"}

package/dist/ActionBar.jsx

@@ -0,0 +1,128 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { Show, createContext, createEffect, createMemo, splitProps, useContext } from "solid-js";
+import { announce, createToolbar } from "@proyecto-viviana/solidaria";
+//#region src/ActionBar.tsx
+/**
+* ActionBar component for solidaria-components
+*
+* 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.
+*/
+function assignRef(ref, el) {
+	if (!ref) return;
+	if (typeof ref === "function") ref(el);
+	else ref.current = el;
+}
+const ActionBarContext = createContext(null);
+function useActionBarContext() {
+	return useContext(ActionBarContext);
+}
+function ActionBar(props) {
+	const [local, domProps] = splitProps(props, [
+		"selectedItemCount",
+		"onClearSelection",
+		"onAction",
+		"children",
+		"class",
+		"style",
+		"slot",
+		"aria-label",
+		"aria-labelledby",
+		"onKeyDown",
+		"actionsAvailableMessage",
+		"ref"
+	]);
+	const selectedItemCount = () => local.selectedItemCount ?? 0;
+	const isOpen = () => selectedItemCount() !== 0;
+	const { toolbarProps } = createToolbar({
+		orientation: "horizontal",
+		get "aria-label"() {
+			return local["aria-label"] ?? (local["aria-labelledby"] ? void 0 : "Actions");
+		},
+		get "aria-labelledby"() {
+			return local["aria-labelledby"];
+		}
+	});
+	let wasOpen = false;
+	createEffect(() => {
+		const open = isOpen();
+		if (open && !wasOpen) {
+			const message = local.actionsAvailableMessage ?? "Actions available.";
+			if (message) announce(message);
+		}
+		wasOpen = open;
+	});
+	const handleKeyDown = (e) => {
+		const onKeyDown = local.onKeyDown;
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (e.key === "Escape" && isOpen()) {
+			e.preventDefault();
+			e.stopPropagation();
+			local.onClearSelection?.();
+		}
+	};
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ActionBar"
+	}, () => ({
+		isOpen: isOpen(),
+		selectedItemCount: selectedItemCount()
+	}));
+	const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	const contextValue = createMemo(() => ({
+		selectedItemCount,
+		onClearSelection: local.onClearSelection,
+		onAction: local.onAction
+	}));
+	return <Show when={isOpen()}>
+      <ActionBarContext.Provider value={contextValue()}>
+        <div {...filteredDOMProps()} {...toolbarProps} class={renderProps.class()} style={renderProps.style()} slot={local.slot} data-open={isOpen() || void 0} onKeyDown={handleKeyDown} ref={(el) => assignRef(local.ref, el)}>
+          {local.children}
+        </div>
+      </ActionBarContext.Provider>
+    </Show>;
+}
+/**
+* Container that positions a collection and its ActionBar.
+*/
+function ActionBarContainer(props) {
+	return <div class={props.class ?? "solidaria-ActionBarContainer"} style={{
+		position: "relative",
+		...props.style
+	}}>
+      {props.children}
+    </div>;
+}
+/**
+* Displays the count of selected items.
+*/
+function ActionBarSelectionCount(props) {
+	const ctx = useActionBarContext();
+	const text = () => {
+		if (!ctx) return "";
+		const count = ctx.selectedItemCount();
+		if (count === "all") return "All selected";
+		if (count === 0) return "None selected";
+		return `${count} selected`;
+	};
+	return <span class={props.class}>{text()}</span>;
+}
+/**
+* Button to clear the current selection.
+*/
+function ActionBarClearButton(props) {
+	const ctx = useActionBarContext();
+	return <button type="button" aria-label={props["aria-label"] ?? "Clear selection"} class={props.class} onClick={() => ctx?.onClearSelection?.()}>
+      {props.children ?? "✕"}
+    </button>;
+}
+//#endregion
+export { ActionBar, ActionBarClearButton, ActionBarContainer, ActionBarContext, ActionBarSelectionCount, useActionBarContext };
+
+//# sourceMappingURL=ActionBar.jsx.map

package/dist/ActionBar.jsx.map

@@ -0,0 +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, createToolbar } 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  const { toolbarProps } = createToolbar({\n    orientation: \"horizontal\",\n    get \"aria-label\"() {\n      return local[\"aria-label\"] ?? (local[\"aria-labelledby\"] ? undefined : \"Actions\");\n    },\n    get \"aria-labelledby\"() {\n      return local[\"aria-labelledby\"];\n    },\n  });\n\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          {...toolbarProps}\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":"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"}

package/dist/ActionGroup.js

@@ -0,0 +1,179 @@
+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";
+import { createActionGroup, createActionGroupItem } from "@proyecto-viviana/solidaria";
+import { createListState } from "@proyecto-viviana/solid-stately";
+//#region src/ActionGroup.tsx
+/**
+* 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.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<button>`);
+const ActionGroupContext = createContext(null);
+const ActionGroupStateContext = createContext(null);
+function ActionGroup(props) {
+	const [local, ariaGroupProps, domProps] = splitProps(props, [
+		"items",
+		"selectionMode",
+		"orientation",
+		"isDisabled",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"onAction",
+		"disabledKeys",
+		"children",
+		"class",
+		"style",
+		"slot"
+	], ["aria-label", "aria-labelledby"]);
+	const state = createListState({
+		get items() {
+			return local.items;
+		},
+		get selectionMode() {
+			return local.selectionMode ?? "none";
+		},
+		get selectedKeys() {
+			return local.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return local.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return local.onSelectionChange;
+		},
+		get disabledKeys() {
+			return local.disabledKeys;
+		},
+		getKey: (item) => item.id,
+		getTextValue: (item) => item.label,
+		getDisabled: (item) => !!item.isDisabled
+	});
+	const { actionGroupProps } = createActionGroup({
+		get items() {
+			return local.items;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		},
+		get orientation() {
+			return local.orientation;
+		},
+		get "aria-label"() {
+			return ariaGroupProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaGroupProps["aria-labelledby"];
+		},
+		get onAction() {
+			return local.onAction;
+		}
+	}, state);
+	const orientation = () => local.orientation ?? "horizontal";
+	const renderProps = useRenderProps({
+		children: void 0,
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-ActionGroup"
+	}, () => ({
+		orientation: orientation(),
+		isDisabled: !!local.isDisabled,
+		selectionMode: local.selectionMode ?? "none"
+	}));
+	const filteredDOMProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+	return createComponent(ActionGroupContext.Provider, {
+		value: { state },
+		get children() {
+			return createComponent(ActionGroupStateContext.Provider, {
+				value: state,
+				get children() {
+					var _el$ = getNextElement(_tmpl$);
+					use((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;
+						}
+					}), false, true);
+					insert(_el$, createComponent(For, {
+						get each() {
+							return local.items;
+						},
+						children: (item) => createComponent(ActionGroupItemWrapper, {
+							item,
+							state,
+							get renderChild() {
+								return local.children;
+							}
+						})
+					}));
+					runHydrationEvents();
+					return _el$;
+				}
+			});
+		}
+	});
+}
+function ActionGroupItemWrapper(props) {
+	const { buttonProps } = createActionGroupItem({ get key() {
+		return props.item.id;
+	} }, props.state);
+	const isFocused = () => props.state.focusedKey() === props.item.id;
+	const isSelected = () => {
+		const keys = props.state.selectedKeys();
+		return keys === "all" || keys instanceof Set && keys.has(props.item.id);
+	};
+	const isDisabled = () => props.state.isDisabled(props.item.id);
+	const renderProps = createMemo(() => ({
+		isSelected: isSelected(),
+		isDisabled: isDisabled(),
+		isFocused: isFocused()
+	}));
+	const { ref: _ref, ...restButtonProps } = buttonProps;
+	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;
+	})();
+}
+function useActionGroupContext() {
+	return useContext(ActionGroupContext);
+}
+//#endregion
+export { ActionGroup, ActionGroupContext, ActionGroupStateContext, useActionGroupContext };
+
+//# sourceMappingURL=ActionGroup.js.map

package/dist/ActionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.js","names":["JSX","ParentProps","createContext","createMemo","splitProps","useContext","For","createActionGroup","createActionGroupItem","AriaActionGroupProps","createListState","ListState","Key","SelectionMode","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","ActionGroupRenderProps","orientation","isDisabled","selectionMode","ActionGroupItemRenderProps","isSelected","isFocused","ActionGroupItem","id","label","key","ActionGroupProps","items","T","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","onAction","disabledKeys","children","item","renderProps","Element","class","style","ActionGroupContextValue","state","ActionGroupContext","ActionGroupStateContext","ActionGroup","props","local","ariaGroupProps","domProps","getKey","getTextValue","getDisabled","groupAriaProps","aria-label","aria-labelledby","actionGroupProps","undefined","defaultClassName","filteredDOMProps","Record","global","_$createComponent","Provider","value","_el$","_$getNextElement","_tmpl$","_$use","el","HTMLDivElement","refFn","ref","HTMLElement","_$spread","_$mergeProps","slot","data-orientation","data-disabled","_$insert","each","ActionGroupItemWrapper","renderChild","rp","_$runHydrationEvents","ActionGroupItemWrapperProps","buttonProps","focusedKey","has","_ref","restButtonProps","_el$2","_tmpl$2","data-selected","data-focused","useActionGroupContext"],"sources":["../src/ActionGroup.tsx"],"sourcesContent":["/**\n * ActionGroup component for solidaria-components\n *\n * Pre-wired headless action group component that combines\n * createListState + createActionGroup/createActionGroupItem.\n * Provides proper dynamic roles (toolbar/radiogroup), keyboard\n * navigation, and ARIA attributes.\n *\n * No RAC equivalent exists — this bridges solidaria ARIA hooks\n * directly to a headless component.\n */\n\nimport {\n  type JSX,\n  type ParentProps,\n  createContext,\n  createMemo,\n  splitProps,\n  useContext,\n  For,\n} from \"solid-js\";\nimport {\n  createActionGroup,\n  createActionGroupItem,\n  type AriaActionGroupProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createListState,\n  type ListState,\n  type Key,\n  type SelectionMode,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n} from \"./utils\";\n\nexport interface ActionGroupRenderProps {\n  /** The orientation of the action group. */\n  orientation: \"horizontal\" | \"vertical\";\n  /** Whether the entire group is disabled. */\n  isDisabled: boolean;\n  /** The selection mode. */\n  selectionMode: SelectionMode;\n}\n\nexport interface ActionGroupItemRenderProps {\n  /** Whether the item is selected. */\n  isSelected: boolean;\n  /** Whether the item is disabled. */\n  isDisabled: boolean;\n  /** Whether the item is focused. */\n  isFocused: boolean;\n}\n\nexport interface ActionGroupItem {\n  id: string;\n  label: string;\n  isDisabled?: boolean;\n  [key: string]: unknown;\n}\n\nexport interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem> extends SlotProps {\n  /** The items in the action group. */\n  items: T[];\n  /** The selection mode. @default 'none' */\n  selectionMode?: SelectionMode;\n  /** Orientation of the group. @default 'horizontal' */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Whether the entire group is disabled. */\n  isDisabled?: boolean;\n  /** Accessible label. */\n  \"aria-label\"?: string;\n  /** Labelled-by id. */\n  \"aria-labelledby\"?: string;\n  /** Currently selected keys (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** Default selected keys (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler called when selection changes. */\n  onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n  /** Handler called when an item action is triggered. */\n  onAction?: (key: Key) => void;\n  /** Keys of disabled items. */\n  disabledKeys?: Iterable<Key>;\n  /** Render function for each item. */\n  children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n  /** CSS class for the container. */\n  class?: ClassNameOrFunction<ActionGroupRenderProps>;\n  /** Inline style for the container. */\n  style?: StyleOrFunction<ActionGroupRenderProps>;\n}\n\nexport interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {\n  state: ListState<T>;\n}\n\nexport const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);\nexport const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);\n\nexport function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(\n  props: ActionGroupProps<T>,\n): JSX.Element {\n  const [local, ariaGroupProps, domProps] = splitProps(\n    props,\n    [\n      \"items\",\n      \"selectionMode\",\n      \"orientation\",\n      \"isDisabled\",\n      \"selectedKeys\",\n      \"defaultSelectedKeys\",\n      \"onSelectionChange\",\n      \"onAction\",\n      \"disabledKeys\",\n      \"children\",\n      \"class\",\n      \"style\",\n      \"slot\",\n    ],\n    [\"aria-label\", \"aria-labelledby\"],\n  );\n\n  const state = createListState<T>({\n    get items() {\n      return local.items;\n    },\n    get selectionMode() {\n      return local.selectionMode ?? \"none\";\n    },\n    get selectedKeys() {\n      return local.selectedKeys;\n    },\n    get defaultSelectedKeys() {\n      return local.defaultSelectedKeys;\n    },\n    get onSelectionChange() {\n      return local.onSelectionChange;\n    },\n    get disabledKeys() {\n      return local.disabledKeys;\n    },\n    getKey: (item) => item.id,\n    getTextValue: (item) => item.label,\n    getDisabled: (item) => !!item.isDisabled,\n  });\n\n  const groupAriaProps: AriaActionGroupProps<T> = {\n    get items() {\n      return local.items;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n    get orientation() {\n      return local.orientation;\n    },\n    get \"aria-label\"() {\n      return ariaGroupProps[\"aria-label\"];\n    },\n    get \"aria-labelledby\"() {\n      return ariaGroupProps[\"aria-labelledby\"];\n    },\n    get onAction() {\n      return local.onAction;\n    },\n  };\n\n  const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);\n\n  const orientation = () => local.orientation ?? \"horizontal\";\n\n  const renderProps = useRenderProps(\n    {\n      children: undefined,\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-ActionGroup\",\n    },\n    () => ({\n      orientation: orientation(),\n      isDisabled: !!local.isDisabled,\n      selectionMode: (local.selectionMode ?? \"none\") as SelectionMode,\n    }),\n  );\n\n  const filteredDOMProps = createMemo(() =>\n    filterDOMProps(domProps as Record<string, unknown>, { global: true }),\n  );\n\n  return (\n    <ActionGroupContext.Provider value={{ state: state as ListState<ActionGroupItem> }}>\n      <ActionGroupStateContext.Provider value={state as ListState<ActionGroupItem>}>\n        <div\n          {...filteredDOMProps()}\n          {...actionGroupProps}\n          ref={(el: HTMLDivElement) => {\n            const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;\n            refFn?.(el);\n          }}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          slot={local.slot}\n          data-orientation={orientation()}\n          data-disabled={local.isDisabled || undefined}\n        >\n          <For each={local.items}>\n            {(item) => (\n              <ActionGroupItemWrapper\n                item={item}\n                state={state as ListState<ActionGroupItem>}\n                renderChild={\n                  local.children as (\n                    item: ActionGroupItem,\n                    rp: ActionGroupItemRenderProps,\n                  ) => JSX.Element\n                }\n              />\n            )}\n          </For>\n        </div>\n      </ActionGroupStateContext.Provider>\n    </ActionGroupContext.Provider>\n  );\n}\n\ninterface ActionGroupItemWrapperProps {\n  item: ActionGroupItem;\n  state: ListState<ActionGroupItem>;\n  renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;\n}\n\nfunction ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {\n  const { buttonProps } = createActionGroupItem(\n    {\n      get key() {\n        return props.item.id;\n      },\n    },\n    props.state,\n  );\n\n  const isFocused = () => props.state.focusedKey() === props.item.id;\n  const isSelected = () => {\n    const keys = props.state.selectedKeys();\n    return keys === \"all\" || (keys instanceof Set && keys.has(props.item.id));\n  };\n  const isDisabled = () => props.state.isDisabled(props.item.id);\n\n  const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({\n    isSelected: isSelected(),\n    isDisabled: isDisabled(),\n    isFocused: isFocused(),\n  }));\n\n  const { ref: _ref, ...restButtonProps } = buttonProps as Record<string, unknown> & {\n    ref?: unknown;\n  };\n\n  return (\n    <button\n      {...restButtonProps}\n      data-selected={isSelected() || undefined}\n      data-disabled={isDisabled() || undefined}\n      data-focused={isFocused() || undefined}\n    >\n      {props.renderChild(props.item, renderProps())}\n    </button>\n  );\n}\n\nexport function useActionGroupContext(): ActionGroupContextValue | null {\n  return useContext(ActionGroupContext);\n}\n"],"mappings":"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"}