@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/TagGroup.js

@@ -0,0 +1,378 @@
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { SharedElementTransition } from "./SharedElementTransition.js";
+import { SelectionIndicatorContext } from "./SelectionIndicator.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
+import { For, Show, createContext, createMemo, createSignal, splitProps, useContext } from "solid-js";
+import { createTag, createTagGroup } from "@proyecto-viviana/solidaria";
+import { createListState } from "@proyecto-viviana/solid-stately";
+//#region src/TagGroup.tsx
+/**
+* TagGroup component for solidaria-components
+*
+* Pre-wired headless tag group component that combines aria hooks.
+* Port of react-aria-components/src/TagGroup.tsx
+*
+* A tag group is a focusable list of labels, categories, keywords, filters, or other items,
+* with support for keyboard navigation, selection, and removal.
+*/
+var _tmpl$ = /*#__PURE__*/ template(`<div>`), _tmpl$2 = /*#__PURE__*/ template(`<div><div>`), _tmpl$3 = /*#__PURE__*/ template(`<button type=button>`);
+const TagGroupContext = createContext(null);
+const TagListStateContext = createContext(null);
+const TagContext = createContext(null);
+function useTagGroupContext() {
+	return useContext(TagGroupContext);
+}
+/**
+* A tag group is a focusable list of labels, categories, keywords, filters, or other items,
+* with support for keyboard navigation, selection, and removal.
+*
+* @example
+* ```tsx
+* <TagGroup label="Categories" onRemove={(keys) => removeItems(keys)}>
+*   <TagList items={items}>
+*     {(item) => <Tag id={item.id}>{item.name}</Tag>}
+*   </TagList>
+* </TagGroup>
+* ```
+*/
+function TagGroup(props) {
+	const [local, domProps] = splitProps(props, [
+		"class",
+		"style",
+		"slot",
+		"children"
+	]);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, mergeProps(domProps, {
+			get ["class"]() {
+				return memo(() => typeof local.class === "string")() ? local.class : "solidaria-TagGroup";
+			},
+			get style() {
+				return memo(() => typeof local.style === "object")() ? local.style : void 0;
+			},
+			get slot() {
+				return local.slot;
+			}
+		}), false, true);
+		insert(_el$, () => props.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+/**
+* TagList contains the list of tags within a TagGroup.
+*/
+function TagList(props) {
+	const [local, domProps] = splitProps(props, [
+		"items",
+		"class",
+		"style",
+		"slot",
+		"renderEmptyState",
+		"children",
+		"selectionMode",
+		"selectionBehavior",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"disabledKeys",
+		"getKey",
+		"label",
+		"aria-label",
+		"aria-labelledby",
+		"aria-describedby",
+		"isDisabled",
+		"onRemove"
+	]);
+	const [gridRef, setGridRef] = createSignal(null);
+	const getKey = (item) => {
+		if (local.getKey) return local.getKey(item);
+		if (item.id !== void 0) return item.id;
+		if (item.key !== void 0) return item.key;
+		return String(item);
+	};
+	const state = createListState({
+		get items() {
+			return local.items;
+		},
+		getKey,
+		get selectionMode() {
+			return local.selectionMode ?? "none";
+		},
+		get selectionBehavior() {
+			return local.selectionBehavior ?? "toggle";
+		},
+		get selectedKeys() {
+			return local.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return local.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return local.onSelectionChange;
+		},
+		get disabledKeys() {
+			return local.disabledKeys;
+		}
+	});
+	const tagGroupAria = createTagGroup({
+		get "aria-label"() {
+			return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : void 0);
+		},
+		get "aria-labelledby"() {
+			return local["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return local["aria-describedby"];
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		},
+		get onRemove() {
+			return local.onRemove;
+		}
+	}, state, gridRef);
+	const [isFocused, setIsFocused] = createSignal(false);
+	const renderValues = createMemo(() => ({
+		isEmpty: local.items.length === 0,
+		isFocused: isFocused()
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-TagList"
+	}, renderValues);
+	const contextValue = {
+		state,
+		get onRemove() {
+			return local.onRemove;
+		},
+		get isDisabled() {
+			return local.isDisabled;
+		}
+	};
+	return createComponent(TagGroupContext.Provider, {
+		value: contextValue,
+		get children() {
+			return createComponent(TagListStateContext.Provider, {
+				value: state,
+				get children() {
+					var _el$2 = getNextElement(_tmpl$);
+					use(setGridRef, _el$2);
+					spread(_el$2, mergeProps(domProps, () => tagGroupAria.gridProps, {
+						get ["class"]() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						"onFocus": () => {
+							setIsFocused(true);
+							state.setFocused(true);
+						},
+						"onBlur": (e) => {
+							const nextTarget = e.relatedTarget;
+							if (nextTarget && e.currentTarget.contains(nextTarget)) return;
+							setIsFocused(false);
+							state.setFocused(false);
+						},
+						get ["data-empty"]() {
+							return dataAttr(local.items.length === 0);
+						},
+						get ["data-focused"]() {
+							return dataAttr(isFocused());
+						}
+					}), false, true);
+					insert(_el$2, createComponent(SharedElementTransition, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return local.items.length > 0;
+							},
+							get fallback() {
+								return local.renderEmptyState?.();
+							},
+							get children() {
+								return createComponent(For, {
+									get each() {
+										return local.items;
+									},
+									children: (item) => props.children(item)
+								});
+							}
+						});
+					} }));
+					runHydrationEvents();
+					return _el$2;
+				}
+			});
+		}
+	});
+}
+/**
+* A Tag is an individual item within a TagList.
+*/
+function Tag(props) {
+	const [local, rest] = splitProps(props, [
+		"id",
+		"class",
+		"style",
+		"slot",
+		"isDisabled",
+		"textValue",
+		"onAction"
+	]);
+	const state = useContext(TagListStateContext);
+	const groupContext = useContext(TagGroupContext);
+	const [tagRef, setTagRef] = createSignal(null);
+	const tagAria = createTag({
+		get key() {
+			return local.id;
+		},
+		role: "row",
+		get isDisabled() {
+			return local.isDisabled || groupContext?.isDisabled;
+		},
+		get textValue() {
+			return local.textValue;
+		}
+	}, state, tagRef);
+	const normalizedRemoveButtonProps = createMemo(() => {
+		const raw = tagAria.removeButtonProps;
+		const rawHandler = typeof raw.onPress === "function" ? raw.onPress : void 0;
+		return {
+			...raw,
+			onPress: () => {
+				if (!tagAria.isDisabled && groupContext?.onRemove) {
+					groupContext.onRemove(new Set([local.id]));
+					return;
+				}
+				rawHandler?.();
+			}
+		};
+	});
+	const renderValues = createMemo(() => ({
+		isSelected: tagAria.isSelected,
+		isDisabled: tagAria.isDisabled,
+		isFocused: tagAria.isFocused,
+		isPressed: tagAria.isPressed,
+		allowsRemoving: tagAria.allowsRemoving,
+		selectionMode: state?.selectionMode() ?? "none",
+		removeButtonProps: normalizedRemoveButtonProps()
+	}));
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Tag"
+	}, renderValues);
+	const selectionIndicatorContext = createMemo(() => ({ isSelected: () => tagAria.isSelected }));
+	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+	return createComponent(SelectionIndicatorContext.Provider, {
+		get value() {
+			return selectionIndicatorContext();
+		},
+		get children() {
+			return createComponent(TagContext.Provider, {
+				value: {
+					get removeButtonProps() {
+						return normalizedRemoveButtonProps();
+					},
+					get allowsRemoving() {
+						return tagAria.allowsRemoving;
+					}
+				},
+				get children() {
+					var _el$3 = getNextElement(_tmpl$2), _el$4 = _el$3.firstChild;
+					use(setTagRef, _el$3);
+					spread(_el$3, mergeProps(domProps, () => tagAria.rowProps, {
+						get ["class"]() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						},
+						"onClick": (event) => {
+							const rowClick = tagAria.rowProps.onClick;
+							if (typeof rowClick === "function") rowClick(event);
+							if (!tagAria.isDisabled && !event.target?.closest("button")) local.onAction?.(local.id);
+						},
+						get ["data-selected"]() {
+							return dataAttr(tagAria.isSelected);
+						},
+						get ["data-disabled"]() {
+							return dataAttr(tagAria.isDisabled);
+						},
+						get ["data-focused"]() {
+							return dataAttr(tagAria.isFocused);
+						},
+						get ["data-pressed"]() {
+							return dataAttr(tagAria.isPressed);
+						},
+						get ["data-allows-removing"]() {
+							return dataAttr(tagAria.allowsRemoving);
+						}
+					}), false, true);
+					spread(_el$4, mergeProps(() => tagAria.gridCellProps, { "style": { display: "contents" } }), false, true);
+					insert(_el$4, () => renderProps.renderChildren());
+					runHydrationEvents();
+					return _el$3;
+				}
+			});
+		}
+	});
+}
+/**
+* TagRemoveButton is the button used to remove a tag.
+* It should be placed inside a Tag component.
+*/
+function TagRemoveButton(props) {
+	const tagContext = useContext(TagContext);
+	const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};
+	const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);
+	const rawId = getRemoveButtonProps().id;
+	const rawAriaLabel = getRemoveButtonProps()["aria-label"];
+	const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
+	const buttonId = typeof rawId === "string" ? rawId : void 0;
+	const ariaLabel = typeof rawAriaLabel === "string" ? rawAriaLabel : "Remove";
+	const ariaLabelledBy = typeof rawAriaLabelledBy === "string" ? rawAriaLabelledBy : void 0;
+	const handleClick = (event) => {
+		event.stopPropagation();
+		const handler = getRemoveButtonProps().onPress;
+		if (typeof handler === "function" && !getIsDisabled()) handler();
+	};
+	const stopRowPress = (event) => {
+		event.stopPropagation();
+	};
+	return (() => {
+		var _el$5 = getNextElement(_tmpl$3);
+		_el$5.$$click = handleClick;
+		_el$5.$$pointerdown = stopRowPress;
+		setAttribute(_el$5, "id", buttonId);
+		setAttribute(_el$5, "aria-label", ariaLabel);
+		setAttribute(_el$5, "aria-labelledby", ariaLabelledBy);
+		insert(_el$5, () => props.children ?? "×");
+		effect((_p$) => {
+			var _v$ = props.class ?? "solidaria-TagRemoveButton", _v$2 = props.style, _v$3 = getIsDisabled(), _v$4 = dataAttr(tagContext?.allowsRemoving ?? false);
+			_v$ !== _p$.e && className(_el$5, _p$.e = _v$);
+			_p$.t = style(_el$5, _v$2, _p$.t);
+			_v$3 !== _p$.a && setProperty(_el$5, "disabled", _p$.a = _v$3);
+			_v$4 !== _p$.o && setAttribute(_el$5, "data-allows-removing", _p$.o = _v$4);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0,
+			o: void 0
+		});
+		runHydrationEvents();
+		return _el$5;
+	})();
+}
+delegateEvents(["pointerdown", "click"]);
+//#endregion
+export { Tag, TagContext, TagGroup, TagGroupContext, TagList, TagListStateContext, TagRemoveButton, useTagGroupContext };
+
+//# sourceMappingURL=TagGroup.js.map

package/dist/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.js","names":["JSX","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTagGroup","createTag","AriaTagGroupProps","createListState","ListState","Key","SelectionMode","SelectionBehavior","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","dataAttr","SharedElementTransition","SelectionIndicatorContext","SelectionIndicatorContextValue","TagGroupRenderProps","isDisabled","isEmpty","TagGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","class","style","TagListRenderProps","isFocused","TagListProps","items","T","item","renderEmptyState","selectionMode","selectionBehavior","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","disabledKeys","getKey","label","onRemove","TagRenderProps","isSelected","isPressed","allowsRemoving","removeButtonProps","Record","TagProps","id","textValue","onAction","key","TagGroupContextValue","state","TagContextValue","TagGroupContext","TagListStateContext","TagContext","useTagGroupContext","TagGroup","props","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","undefined","slot","_$insert","_$runHydrationEvents","TagList","gridRef","setGridRef","String","tagGroupAria","aria-label","aria-labelledby","aria-describedby","setIsFocused","renderValues","length","renderProps","defaultClassName","contextValue","_$createComponent","Provider","value","_el$2","_$use","gridProps","onFocus","setFocused","e","nextTarget","relatedTarget","Node","currentTarget","contains","data-empty","data-focused","when","fallback","each","Tag","rest","groupContext","tagRef","setTagRef","tagAria","role","normalizedRemoveButtonProps","raw","rawHandler","onPress","selectionIndicatorContext","global","_el$3","_tmpl$2","_el$4","firstChild","rowProps","event","rowClick","onClick","EventHandler","MouseEvent","target","closest","data-selected","data-disabled","data-pressed","data-allows-removing","gridCellProps","display","renderChildren","TagRemoveButtonProps","CSSProperties","buttonProps","TagRemoveButton","tagContext","getRemoveButtonProps","getIsDisabled","Boolean","rawId","rawAriaLabel","rawAriaLabelledBy","buttonId","ariaLabel","ariaLabelledBy","handleClick","HTMLButtonElement","stopPropagation","handler","stopRowPress","PointerEvent","_el$5","_tmpl$3","$$click","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$className","t","_$style","a","_$setProperty","o","_$delegateEvents"],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n  type JSX,\n  createContext,\n  createMemo,\n  createSignal,\n  splitProps,\n  useContext,\n  For,\n  Show,\n} from \"solid-js\";\nimport { createTagGroup, createTag, type AriaTagGroupProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  createListState,\n  type ListState,\n  type Key,\n  type SelectionMode,\n  type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n  SelectionIndicatorContext,\n  type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n  /** Whether the tag group is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag list is empty. */\n  isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n  extends\n    Omit<AriaTagGroupProps, \"id\">,\n    SlotProps,\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n  /** The children of the component. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagGroupRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n  /** Whether the tag list is empty. */\n  isEmpty: boolean;\n  /** Whether the tag list is focused. */\n  isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n  extends\n    SlotProps,\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n  /** The items to display in the tag list. */\n  items: T[];\n  /** Function to render each item. */\n  children: (item: T) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagListRenderProps>;\n  /** Content to render when the list is empty. */\n  renderEmptyState?: () => JSX.Element;\n  /** The selection mode for the tag list. */\n  selectionMode?: SelectionMode;\n  /** How selection behaves in the collection. */\n  selectionBehavior?: SelectionBehavior;\n  /** The currently selected keys (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** The default selected keys (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler called when selection changes. */\n  onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n  /** Keys that are disabled. */\n  disabledKeys?: Iterable<Key>;\n  /** Function to get a unique key from an item. */\n  getKey?: (item: T) => Key;\n  /** Accessibility label. */\n  label?: string;\n  /** Custom aria-label. */\n  \"aria-label\"?: string;\n  /** Reference to external label element. */\n  \"aria-labelledby\"?: string;\n  /** Reference to description element. */\n  \"aria-describedby\"?: string;\n  /** Whether the tag list is disabled. */\n  isDisabled?: boolean;\n  /** Handler called when tags are removed. */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n  /** Whether the tag is selected. */\n  isSelected: boolean;\n  /** Whether the tag is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag is focused. */\n  isFocused: boolean;\n  /** Whether the tag is pressed. */\n  isPressed: boolean;\n  /** Whether the tag allows removal. */\n  allowsRemoving: boolean;\n  /** The selection mode. */\n  selectionMode: SelectionMode;\n  /** Props for the remove button when removal is allowed. */\n  removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n  /** A unique key for this tag. */\n  id: Key;\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /** A text value for accessibility. */\n  textValue?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TagRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagRenderProps>;\n  /** Handler called when the tag is activated. */\n  onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n  state: ListState;\n  onRemove?: (keys: Set<Key>) => void;\n  isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n  removeButtonProps: Record<string, unknown>;\n  allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n  return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n *   <TagList items={items}>\n *     {(item) => <Tag id={item.id}>{item.name}</Tag>}\n *   </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n  // We need TagList to provide the state, so TagGroup just provides context\n  return (\n    <div\n      {...domProps}\n      class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n      style={typeof local.style === \"object\" ? local.style : undefined}\n      slot={local.slot}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"items\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"renderEmptyState\",\n    \"children\",\n    \"selectionMode\",\n    \"selectionBehavior\",\n    \"selectedKeys\",\n    \"defaultSelectedKeys\",\n    \"onSelectionChange\",\n    \"disabledKeys\",\n    \"getKey\",\n    \"label\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"isDisabled\",\n    \"onRemove\",\n  ]);\n\n  // Create a ref for the grid\n  const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n  // Default getKey function\n  const getKey = (item: T): Key => {\n    if (local.getKey) return local.getKey(item);\n    if (item.id !== undefined) return item.id;\n    if (item.key !== undefined) return item.key;\n    return String(item);\n  };\n\n  const state = createListState({\n    get items() {\n      return local.items;\n    },\n    getKey,\n    get selectionMode() {\n      return local.selectionMode ?? \"none\";\n    },\n    get selectionBehavior() {\n      return local.selectionBehavior ?? \"toggle\";\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  });\n\n  // Create tag group accessibility props\n  const tagGroupAria = createTagGroup(\n    {\n      get \"aria-label\"() {\n        return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n      },\n      get \"aria-labelledby\"() {\n        return local[\"aria-labelledby\"];\n      },\n      get \"aria-describedby\"() {\n        return local[\"aria-describedby\"];\n      },\n      get isDisabled() {\n        return local.isDisabled;\n      },\n      get onRemove() {\n        return local.onRemove;\n      },\n    },\n    state,\n    gridRef,\n  );\n\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  const renderValues = createMemo<TagListRenderProps>(() => ({\n    isEmpty: local.items.length === 0,\n    isFocused: isFocused(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TagList\",\n    },\n    renderValues,\n  );\n\n  const contextValue: TagGroupContextValue = {\n    state,\n    get onRemove() {\n      return local.onRemove;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n\n  return (\n    <TagGroupContext.Provider value={contextValue}>\n      <TagListStateContext.Provider value={state}>\n        <div\n          ref={setGridRef}\n          {...domProps}\n          {...tagGroupAria.gridProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          onFocus={() => {\n            setIsFocused(true);\n            state.setFocused(true);\n          }}\n          onBlur={(e) => {\n            const nextTarget = e.relatedTarget as Node | null;\n            if (nextTarget && e.currentTarget.contains(nextTarget)) {\n              return;\n            }\n\n            setIsFocused(false);\n            state.setFocused(false);\n          }}\n          data-empty={dataAttr(local.items.length === 0)}\n          data-focused={dataAttr(isFocused())}\n        >\n          <SharedElementTransition>\n            <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n              <For each={local.items}>{(item) => props.children(item)}</For>\n            </Show>\n          </SharedElementTransition>\n        </div>\n      </TagListStateContext.Provider>\n    </TagGroupContext.Provider>\n  );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"id\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"isDisabled\",\n    \"textValue\",\n    \"onAction\",\n  ]);\n\n  const state = useContext(TagListStateContext);\n  const groupContext = useContext(TagGroupContext);\n\n  // Create a ref for the tag\n  const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n  // Create tag accessibility props\n  const tagAria = createTag(\n    {\n      get key() {\n        return local.id;\n      },\n      role: \"row\",\n      get isDisabled() {\n        return local.isDisabled || groupContext?.isDisabled;\n      },\n      get textValue() {\n        return local.textValue;\n      },\n    },\n    state!,\n    tagRef,\n  );\n\n  const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n    const raw = tagAria.removeButtonProps;\n    const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n    return {\n      ...raw,\n      onPress: () => {\n        if (!tagAria.isDisabled && groupContext?.onRemove) {\n          groupContext.onRemove(new Set([local.id]));\n          return;\n        }\n        rawHandler?.();\n      },\n    };\n  });\n\n  const renderValues = createMemo<TagRenderProps>(() => ({\n    isSelected: tagAria.isSelected,\n    isDisabled: tagAria.isDisabled,\n    isFocused: tagAria.isFocused,\n    isPressed: tagAria.isPressed,\n    allowsRemoving: tagAria.allowsRemoving,\n    selectionMode: state?.selectionMode() ?? \"none\",\n    removeButtonProps: normalizedRemoveButtonProps(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Tag\",\n    },\n    renderValues,\n  );\n\n  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n    isSelected: () => tagAria.isSelected,\n  }));\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n      <TagContext.Provider\n        value={{\n          get removeButtonProps() {\n            return normalizedRemoveButtonProps();\n          },\n          get allowsRemoving() {\n            return tagAria.allowsRemoving;\n          },\n        }}\n      >\n        <div\n          ref={setTagRef}\n          {...domProps()}\n          {...tagAria.rowProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          onClick={(event) => {\n            const rowClick = tagAria.rowProps.onClick;\n            if (typeof rowClick === \"function\") {\n              (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n            }\n\n            if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n              local.onAction?.(local.id);\n            }\n          }}\n          data-selected={dataAttr(tagAria.isSelected)}\n          data-disabled={dataAttr(tagAria.isDisabled)}\n          data-focused={dataAttr(tagAria.isFocused)}\n          data-pressed={dataAttr(tagAria.isPressed)}\n          data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n        >\n          <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n            {renderProps.renderChildren()}\n          </div>\n        </div>\n      </TagContext.Provider>\n    </SelectionIndicatorContext.Provider>\n  );\n}\n\nexport interface TagRemoveButtonProps {\n  /** The children of the button (usually an X icon). */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n  /** Explicit button props from Tag render props. */\n  buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n  const tagContext = useContext(TagContext);\n  const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n  const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n  const rawId = getRemoveButtonProps().id;\n  const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n  const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n  const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n  const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n  const ariaLabelledBy: string | undefined =\n    typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    event.stopPropagation();\n    const handler = getRemoveButtonProps().onPress;\n    if (typeof handler === \"function\" && !getIsDisabled()) {\n      (handler as () => void)();\n    }\n  };\n  const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      class={props.class ?? \"solidaria-TagRemoveButton\"}\n      style={props.style}\n      id={buttonId}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={getIsDisabled()}\n      data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n      onPointerDown={stopRowPress}\n      onClick={handleClick}\n    >\n      {props.children ?? \"×\"}\n    </button>\n  );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":";;;;;;;;;;;;;;;;;;AA6JA,MAAasE,kBAAkBrE,cAA2C,IAAI;AAC9E,MAAasE,sBAAsBtE,cAAgC,IAAI;AACvE,MAAauE,aAAavE,cAAsC,IAAI;AAEpE,SAAgBwE,qBAAkD;CAChE,OAAOpE,WAAWiE,eAAe;AACnC;;;;;;;;;;;;;;AAeA,SAAgBI,SAASC,OAAmC;CAC1D,MAAM,CAACC,OAAOC,YAAYzE,WAAWuE,OAAO;EAAC;EAAS;EAAS;EAAQ;CAAU,CAAC;CAGlF,cAAA;EAAA,IAAAG,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MAAAI,WAEQL,UAAQ;GAAA,KAAA,WAAA;IAAA,OACLM,WAAA,OAAOP,MAAMzC,UAAU,QAAQ,CAAA,CAAA,IAAGyC,MAAMzC,QAAQ;GAAoB;GAAA,IAC3EC,QAAK;IAAA,OAAE+C,WAAA,OAAOP,MAAMxC,UAAU,QAAQ,CAAA,CAAA,IAAGwC,MAAMxC,QAAQgD,KAAAA;GAAS;GAAA,IAChEC,OAAI;IAAA,OAAET,MAAMS;GAAI;EAAA,CAAA,GAAA,OAAA,IAAA;EAAAC,OAAAR,YAEfH,MAAM1C,QAAQ;EAAAsD,mBAAA;EAAA,OAAAT;CAAA,EAAA,CAAA;AAGrB;;;;AAKA,SAAgBU,QAA2Cb,OAAqC;CAC9F,MAAM,CAACC,OAAOC,YAAYzE,WAAWuE,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAGD,MAAM,CAACc,SAASC,cAAcvF,aAAoC,IAAI;CAGtE,MAAMkD,UAAUX,SAAiB;EAC/B,IAAIkC,MAAMvB,QAAQ,OAAOuB,MAAMvB,OAAOX,IAAI;EAC1C,IAAIA,KAAKqB,OAAOqB,KAAAA,GAAW,OAAO1C,KAAKqB;EACvC,IAAIrB,KAAKwB,QAAQkB,KAAAA,GAAW,OAAO1C,KAAKwB;EACxC,OAAOyB,OAAOjD,IAAI;CACpB;CAEA,MAAM0B,QAAQzD,gBAAgB;EAC5B,IAAI6B,QAAQ;GACV,OAAOoC,MAAMpC;EACf;EACAa;EACA,IAAIT,gBAAgB;GAClB,OAAOgC,MAAMhC,iBAAiB;EAChC;EACA,IAAIC,oBAAoB;GACtB,OAAO+B,MAAM/B,qBAAqB;EACpC;EACA,IAAIC,eAAe;GACjB,OAAO8B,MAAM9B;EACf;EACA,IAAIE,sBAAsB;GACxB,OAAO4B,MAAM5B;EACf;EACA,IAAIC,oBAAoB;GACtB,OAAO2B,MAAM3B;EACf;EACA,IAAIG,eAAe;GACjB,OAAOwB,MAAMxB;EACf;CACF,CAAC;CAGD,MAAMwC,eAAepF,eACnB;EACE,IAAI,eAAe;GACjB,OAAOoE,MAAM,kBAAkB,CAACA,MAAM,qBAAqBA,MAAMtB,QAAQ8B,KAAAA;EAC3E;EACA,IAAI,oBAAoB;GACtB,OAAOR,MAAM;EACf;EACA,IAAI,qBAAqB;GACvB,OAAOA,MAAM;EACf;EACA,IAAIjD,aAAa;GACf,OAAOiD,MAAMjD;EACf;EACA,IAAI4B,WAAW;GACb,OAAOqB,MAAMrB;EACf;CACF,GACAa,OACAqB,OACF;CAEA,MAAM,CAACnD,WAAW0D,gBAAgB7F,aAAa,KAAK;CAEpD,MAAM8F,eAAe/F,kBAAsC;EACzD0B,SAASgD,MAAMpC,MAAM0D,WAAW;EAChC5D,WAAWA,UAAU;CACvB,EAAE;CAEF,MAAM6D,cAAc/E,eAClB;EACEe,OAAOyC,MAAMzC;EACbC,OAAOwC,MAAMxC;EACbgE,kBAAkB;CACpB,GACAH,YACF;CAEA,MAAMI,eAAqC;EACzCjC;EACA,IAAIb,WAAW;GACb,OAAOqB,MAAMrB;EACf;EACA,IAAI5B,aAAa;GACf,OAAOiD,MAAMjD;EACf;CACF;CAEA,OAAA2E,gBACGhC,gBAAgBiC,UAAQ;EAACC,OAAOH;EAAY,IAAApE,WAAA;GAAA,OAAAqE,gBAC1C/B,oBAAoBgC,UAAQ;IAACC,OAAOpC;IAAK,IAAAnC,WAAA;KAAA,IAAAwE,QAAA1B,eAAAC,MAAA;KAAA0B,IAEjChB,YAAUe,KAAA;KAAAxB,OAAAwB,OAAAvB,WACXL,gBACAe,aAAae,WAAS;MAAA,KAAA,WAAA;OAAA,OACnBR,YAAYhE,MAAM;MAAC;MAAA,IAC1BC,QAAK;OAAA,OAAE+D,YAAY/D,MAAM;MAAC;MAAA,iBACX;OACb4D,aAAa,IAAI;OACjB5B,MAAMyC,WAAW,IAAI;MACvB;MAAC,WACQC,MAAM;OACb,MAAMC,aAAaD,EAAEE;OACrB,IAAID,cAAcD,EAAEI,cAAcC,SAASJ,UAAU,GACnD;OAGFf,aAAa,KAAK;OAClB5B,MAAMyC,WAAW,KAAK;MACxB;MAAC,KAAA,gBAAA;OAAA,OACWvF,SAASsD,MAAMpC,MAAM0D,WAAW,CAAC;MAAC;MAAA,KAAA,kBAAA;OAAA,OAChC5E,SAASgB,UAAU,CAAC;MAAC;KAAA,CAAA,GAAA,OAAA,IAAA;KAAAgD,OAAAmB,OAAAH,gBAElC/E,yBAAuB,EAAA,IAAAU,WAAA;MAAA,OAAAqE,gBACrB/F,MAAI;OAAA,IAAC+G,OAAI;QAAA,OAAE1C,MAAMpC,MAAM0D,SAAS;OAAC;OAAA,IAAEqB,WAAQ;QAAA,OAAE3C,MAAMjC,mBAAmB;OAAC;OAAA,IAAAV,WAAA;QAAA,OAAAqE,gBACrEhG,KAAG;SAAA,IAACkH,OAAI;UAAA,OAAE5C,MAAMpC;SAAK;SAAAP,WAAIS,SAASiC,MAAM1C,SAASS,IAAI;QAAC,CAAA;OAAA;MAAA,CAAA;KAAA,EAAA,CAAA,CAAA;KAAA6C,mBAAA;KAAA,OAAAkB;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAOrE;;;;AAKA,SAAgBgB,IAAI9C,OAA8B;CAChD,MAAM,CAACC,OAAO8C,QAAQtH,WAAWuE,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CAED,MAAMP,QAAQ/D,WAAWkE,mBAAmB;CAC5C,MAAMoD,eAAetH,WAAWiE,eAAe;CAG/C,MAAM,CAACsD,QAAQC,aAAa1H,aAAoC,IAAI;CAGpE,MAAM2H,UAAUrH,UACd;EACE,IAAIyD,MAAM;GACR,OAAOU,MAAMb;EACf;EACAgE,MAAM;EACN,IAAIpG,aAAa;GACf,OAAOiD,MAAMjD,cAAcgG,cAAchG;EAC3C;EACA,IAAIqC,YAAY;GACd,OAAOY,MAAMZ;EACf;CACF,GACAI,OACAwD,MACF;CAEA,MAAMI,8BAA8B9H,iBAA0C;EAC5E,MAAM+H,MAAMH,QAAQlE;EACpB,MAAMsE,aAAa,OAAOD,IAAIE,YAAY,aAAcF,IAAIE,UAAyB/C,KAAAA;EACrF,OAAO;GACL,GAAG6C;GACHE,eAAe;IACb,IAAI,CAACL,QAAQnG,cAAcgG,cAAcpE,UAAU;KACjDoE,aAAapE,SAAS,IAAIJ,IAAI,CAACyB,MAAMb,EAAE,CAAC,CAAC;KACzC;IACF;IACAmE,aAAa;GACf;EACF;CACF,CAAC;CAED,MAAMjC,eAAe/F,kBAAkC;EACrDuD,YAAYqE,QAAQrE;EACpB9B,YAAYmG,QAAQnG;EACpBW,WAAWwF,QAAQxF;EACnBoB,WAAWoE,QAAQpE;EACnBC,gBAAgBmE,QAAQnE;EACxBf,eAAewB,OAAOxB,cAAc,KAAK;EACzCgB,mBAAmBoE,4BAA4B;CACjD,EAAE;CAEF,MAAM7B,cAAc/E,eAClB;EACE,IAAIa,WAAW;GACb,OAAO0C,MAAM1C;EACf;EACAE,OAAOyC,MAAMzC;EACbC,OAAOwC,MAAMxC;EACbgE,kBAAkB;CACpB,GACAH,YACF;CAEA,MAAMmC,4BAA4BlI,kBAAkD,EAClFuD,kBAAkBqE,QAAQrE,WAC5B,EAAE;CAEF,MAAMoB,WAAW3E,iBAAiBmB,eAAeqG,MAAM,EAAEW,QAAQ,KAAK,CAAC,CAAC;CAExE,OAAA/B,gBACG9E,0BAA0B+E,UAAQ;EAAA,IAACC,QAAK;GAAA,OAAE4B,0BAA0B;EAAC;EAAA,IAAAnG,WAAA;GAAA,OAAAqE,gBACnE9B,WAAW+B,UAAQ;IAClBC,OAAO;KACL,IAAI5C,oBAAoB;MACtB,OAAOoE,4BAA4B;KACrC;KACA,IAAIrE,iBAAiB;MACnB,OAAOmE,QAAQnE;KACjB;IACF;IAAC,IAAA1B,WAAA;KAAA,IAAAqG,QAAAvD,eAAAwD,OAAA,GAAAC,QAAAF,MAAAG;KAAA/B,IAGMmB,WAASS,KAAA;KAAArD,OAAAqD,OAAApD,WACVL,gBACAiD,QAAQY,UAAQ;MAAA,KAAA,WAAA;OAAA,OACbvC,YAAYhE,MAAM;MAAC;MAAA,IAC1BC,QAAK;OAAA,OAAE+D,YAAY/D,MAAM;MAAC;MAAA,YAChBuG,UAAU;OAClB,MAAMC,WAAWd,QAAQY,SAASG;OAClC,IAAI,OAAOD,aAAa,YACtB,SAA2DD,KAAK;OAGlE,IAAI,CAACb,QAAQnG,cAAc,CAAEgH,MAAMK,QAA2BC,QAAQ,QAAQ,GAC5ErE,MAAMX,WAAWW,MAAMb,EAAE;MAE7B;MAAC,KAAA,mBAAA;OAAA,OACczC,SAASwG,QAAQrE,UAAU;MAAC;MAAA,KAAA,mBAAA;OAAA,OAC5BnC,SAASwG,QAAQnG,UAAU;MAAC;MAAA,KAAA,kBAAA;OAAA,OAC7BL,SAASwG,QAAQxF,SAAS;MAAC;MAAA,KAAA,kBAAA;OAAA,OAC3BhB,SAASwG,QAAQpE,SAAS;MAAC;MAAA,KAAA,0BAAA;OAAA,OACnBpC,SAASwG,QAAQnE,cAAc;MAAC;KAAA,CAAA,GAAA,OAAA,IAAA;KAAAsB,OAAAuD,OAAAtD,iBAE7C4C,QAAQwB,eAAa,EAAA,SAAS,EAAEC,SAAS,WAAW,EAAC,CAAA,GAAA,OAAA,IAAA;KAAAjE,OAAAkD,aAC3DrC,YAAYqD,eAAe,CAAC;KAAAjE,mBAAA;KAAA,OAAA+C;IAAA;GAAA,CAAA;EAAA;CAAA,CAAA;AAMzC;;;;;AAiBA,SAAgBsB,gBAAgBjF,OAA0C;CACxE,MAAMkF,aAAaxJ,WAAWmE,UAAU;CACxC,MAAMsF,6BAA6BnF,MAAMgF,eAAeE,YAAYjG,qBAAqB,CAAC;CAC1F,MAAMmG,sBAAsBC,QAAQF,qBAAqB,CAAC,CAACnI,UAAU;CACrE,MAAMsI,QAAQH,qBAAqB,CAAC,CAAC/F;CACrC,MAAMmG,eAAeJ,qBAAqB,CAAC,CAAC;CAC5C,MAAMK,oBAAoBL,qBAAqB,CAAC,CAAC;CACjD,MAAMM,WAA+B,OAAOH,UAAU,WAAWA,QAAQ7E,KAAAA;CACzE,MAAMiF,YAAoB,OAAOH,iBAAiB,WAAWA,eAAe;CAC5E,MAAMI,iBACJ,OAAOH,sBAAsB,WAAWA,oBAAoB/E,KAAAA;CAE9D,MAAMmF,eAAgE5B,UAAU;EAC9EA,MAAM8B,gBAAgB;EACtB,MAAMC,UAAUZ,qBAAqB,CAAC,CAAC3B;EACvC,IAAI,OAAOuC,YAAY,cAAc,CAACX,cAAc,GAClD,QAAwB;CAE5B;CACA,MAAMY,gBAAmEhC,UAAU;EACjFA,MAAM8B,gBAAgB;CACxB;CAEA,cAAA;EAAA,IAAAI,QAAA9F,eAAA+F,OAAA;EAAAD,MAAAE,UAWaR;EAAWM,MAAAG,gBADLL;EAAYM,aAAAJ,OAAA,MALvBT,QAAQ;EAAAa,aAAAJ,OAAA,cACAR,SAAS;EAAAY,aAAAJ,OAAA,mBACJP,cAAc;EAAAhF,OAAAuF,aAM9BlG,MAAM1C,YAAY,GAAG;EAAAiJ,QAAAC,QAAA;GAAA,IAAAC,MAVfzG,MAAMxC,SAAS,6BAA2BkJ,OAC1C1G,MAAMvC,OAAKkJ,OAIRvB,cAAc,GAACwB,OACHjK,SAASuI,YAAYlG,kBAAkB,KAAK;GAACyH,QAAAD,IAAArE,KAAA0E,UAAAX,OAAAM,IAAArE,IAAAsE,GAAA;GAAAD,IAAAM,IAAAC,MAAAb,OAAAQ,MAAAF,IAAAM,CAAA;GAAAH,SAAAH,IAAAQ,KAAAC,YAAAf,OAAA,YAAAM,IAAAQ,IAAAL,IAAA;GAAAC,SAAAJ,IAAAU,KAAAZ,aAAAJ,OAAA,wBAAAM,IAAAU,IAAAN,IAAA;GAAA,OAAAJ;EAAA,GAAA;GAAArE,GAAA1B,KAAAA;GAAAqG,GAAArG,KAAAA;GAAAuG,GAAAvG,KAAAA;GAAAyG,GAAAzG,KAAAA;EAAA,CAAA;EAAAG,mBAAA;EAAA,OAAAsF;CAAA,EAAA,CAAA;AAOzE;AAEsDiB,eAAA,CAAA,eAAA,OAAA,CAAA"}