@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/TagGroup.jsx

@@ -0,0 +1,270 @@
+import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+import { SharedElementTransition } from "./SharedElementTransition.jsx";
+import { SelectionIndicatorContext } from "./SelectionIndicator.jsx";
+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.
+*/
+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 <div {...domProps} class={typeof local.class === "string" ? local.class : "solidaria-TagGroup"} style={typeof local.style === "object" ? local.style : void 0} slot={local.slot}>
+      {props.children}
+    </div>;
+}
+/**
+* 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 <TagGroupContext.Provider value={contextValue}>
+      <TagListStateContext.Provider value={state}>
+        <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={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);
+	}} data-empty={dataAttr(local.items.length === 0)} data-focused={dataAttr(isFocused())}>
+          <SharedElementTransition>
+            <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>
+              <For each={local.items}>{(item) => props.children(item)}</For>
+            </Show>
+          </SharedElementTransition>
+        </div>
+      </TagListStateContext.Provider>
+    </TagGroupContext.Provider>;
+}
+/**
+* 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 <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <TagContext.Provider value={{
+		get removeButtonProps() {
+			return normalizedRemoveButtonProps();
+		},
+		get allowsRemoving() {
+			return tagAria.allowsRemoving;
+		}
+	}}>
+        <div ref={setTagRef} {...domProps()} {...tagAria.rowProps} class={renderProps.class()} style={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);
+	}} data-selected={dataAttr(tagAria.isSelected)} data-disabled={dataAttr(tagAria.isDisabled)} data-focused={dataAttr(tagAria.isFocused)} data-pressed={dataAttr(tagAria.isPressed)} data-allows-removing={dataAttr(tagAria.allowsRemoving)}>
+          <div {...tagAria.gridCellProps} style={{ display: "contents" }}>
+            {renderProps.renderChildren()}
+          </div>
+        </div>
+      </TagContext.Provider>
+    </SelectionIndicatorContext.Provider>;
+}
+/**
+* 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 <button type="button" class={props.class ?? "solidaria-TagRemoveButton"} style={props.style} id={buttonId} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} disabled={getIsDisabled()} data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)} onPointerDown={stopRowPress} onClick={handleClick}>
+      {props.children ?? "×"}
+    </button>;
+}
+//#endregion
+export { Tag, TagContext, TagGroup, TagGroupContext, TagList, TagListStateContext, TagRemoveButton, useTagGroupContext };
+
+//# sourceMappingURL=TagGroup.jsx.map

package/dist/TagGroup.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.jsx","names":[],"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,MAAa,kBAAkB,cAA2C,IAAI;AAC9E,MAAa,sBAAsB,cAAgC,IAAI;AACvE,MAAa,aAAa,cAAsC,IAAI;AAEpE,SAAgB,qBAAkD;CAChE,OAAO,WAAW,eAAe;AACnC;;;;;;;;;;;;;;AAeA,SAAgB,SAAS,OAAmC;CAC1D,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAAC;EAAS;EAAS;EAAQ;CAAU,CAAC;CAGlF,OACE,CAAC,QACK,UACJ,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,sBACvD,OAAO,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,KAAA,GACvD,MAAM,MAAM,MACb;OACE,MAAM,SAAS;IAClB,EAAE;AAEN;;;;AAKA,SAAgB,QAA2C,OAAqC;CAC9F,MAAM,CAAC,OAAO,YAAY,WAAW,OAAO;EAC1C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,CAAC,SAAS,cAAc,aAAoC,IAAI;CAGtE,MAAM,UAAU,SAAiB;EAC/B,IAAI,MAAM,QAAQ,OAAO,MAAM,OAAO,IAAI;EAC1C,IAAI,KAAK,OAAO,KAAA,GAAW,OAAO,KAAK;EACvC,IAAI,KAAK,QAAQ,KAAA,GAAW,OAAO,KAAK;EACxC,OAAO,OAAO,IAAI;CACpB;CAEA,MAAM,QAAQ,gBAAgB;EAC5B,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA;EACA,IAAI,gBAAgB;GAClB,OAAO,MAAM,iBAAiB;EAChC;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM,qBAAqB;EACpC;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,sBAAsB;GACxB,OAAO,MAAM;EACf;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;CACF,CAAC;CAGD,MAAM,eAAe,eACnB;EACE,IAAI,eAAe;GACjB,OAAO,MAAM,kBAAkB,CAAC,MAAM,qBAAqB,MAAM,QAAQ,KAAA;EAC3E;EACA,IAAI,oBAAoB;GACtB,OAAO,MAAM;EACf;EACA,IAAI,qBAAqB;GACvB,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;CACF,GACA,OACA,OACF;CAEA,MAAM,CAAC,WAAW,gBAAgB,aAAa,KAAK;CAEpD,MAAM,eAAe,kBAAsC;EACzD,SAAS,MAAM,MAAM,WAAW;EAChC,WAAW,UAAU;CACvB,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,eAAqC;EACzC;EACA,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,IAAI,aAAa;GACf,OAAO,MAAM;EACf;CACF;CAEA,OACE,CAAC,gBAAgB,SAAS,OAAO,cAAc;MAC7C,CAAC,oBAAoB,SAAS,OAAO,OAAO;QAC1C,CAAC,IACC,KAAK,gBACD,cACA,aAAa,WACjB,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,eAAe;EACb,aAAa,IAAI;EACjB,MAAM,WAAW,IAAI;CACvB,GACA,SAAS,MAAM;EACb,MAAM,aAAa,EAAE;EACrB,IAAI,cAAc,EAAE,cAAc,SAAS,UAAU,GACnD;EAGF,aAAa,KAAK;EAClB,MAAM,WAAW,KAAK;CACxB,GACA,YAAY,SAAS,MAAM,MAAM,WAAW,CAAC,GAC7C,cAAc,SAAS,UAAU,CAAC,GACnC;UACC,CAAC,wBAAwB;YACvB,CAAC,KAAK,MAAM,MAAM,MAAM,SAAS,GAAG,UAAU,MAAM,mBAAmB,GAAG;cACxE,CAAC,IAAI,MAAM,MAAM,SAAS,SAAS,MAAM,SAAS,IAAI,EAAE,EAAE,IAAI;YAChE,EAAE,KAAK;UACT,EAAE,wBAAwB;QAC5B,EAAE,IAAI;MACR,EAAE,oBAAoB,SAAS;IACjC,EAAE,gBAAgB;AAEtB;;;;AAKA,SAAgB,IAAI,OAA8B;CAChD,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQ,WAAW,mBAAmB;CAC5C,MAAM,eAAe,WAAW,eAAe;CAG/C,MAAM,CAAC,QAAQ,aAAa,aAAoC,IAAI;CAGpE,MAAM,UAAU,UACd;EACE,IAAI,MAAM;GACR,OAAO,MAAM;EACf;EACA,MAAM;EACN,IAAI,aAAa;GACf,OAAO,MAAM,cAAc,cAAc;EAC3C;EACA,IAAI,YAAY;GACd,OAAO,MAAM;EACf;CACF,GACA,OACA,MACF;CAEA,MAAM,8BAA8B,iBAA0C;EAC5E,MAAM,MAAM,QAAQ;EACpB,MAAM,aAAa,OAAO,IAAI,YAAY,aAAc,IAAI,UAAyB,KAAA;EACrF,OAAO;GACL,GAAG;GACH,eAAe;IACb,IAAI,CAAC,QAAQ,cAAc,cAAc,UAAU;KACjD,aAAa,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;KACzC;IACF;IACA,aAAa;GACf;EACF;CACF,CAAC;CAED,MAAM,eAAe,kBAAkC;EACrD,YAAY,QAAQ;EACpB,YAAY,QAAQ;EACpB,WAAW,QAAQ;EACnB,WAAW,QAAQ;EACnB,gBAAgB,QAAQ;EACxB,eAAe,OAAO,cAAc,KAAK;EACzC,mBAAmB,4BAA4B;CACjD,EAAE;CAEF,MAAM,cAAc,eAClB;EACE,IAAI,WAAW;GACb,OAAO,MAAM;EACf;EACA,OAAO,MAAM;EACb,OAAO,MAAM;EACb,kBAAkB;CACpB,GACA,YACF;CAEA,MAAM,4BAA4B,kBAAkD,EAClF,kBAAkB,QAAQ,WAC5B,EAAE;CAEF,MAAM,WAAW,iBAAiB,eAAe,MAAM,EAAE,QAAQ,KAAK,CAAC,CAAC;CAExE,OACE,CAAC,0BAA0B,SAAS,OAAO,0BAA0B,GAAG;MACtE,CAAC,WAAW,SACV,OAAO;EACL,IAAI,oBAAoB;GACtB,OAAO,4BAA4B;EACrC;EACA,IAAI,iBAAiB;GACnB,OAAO,QAAQ;EACjB;CACF,GACD;QACC,CAAC,IACC,KAAK,eACD,SAAS,OACT,QAAQ,UACZ,OAAO,YAAY,MAAM,GACzB,OAAO,YAAY,MAAM,GACzB,UAAU,UAAU;EAClB,MAAM,WAAW,QAAQ,SAAS;EAClC,IAAI,OAAO,aAAa,YACtB,SAA2D,KAAK;EAGlE,IAAI,CAAC,QAAQ,cAAc,CAAE,MAAM,QAA2B,QAAQ,QAAQ,GAC5E,MAAM,WAAW,MAAM,EAAE;CAE7B,GACA,eAAe,SAAS,QAAQ,UAAU,GAC1C,eAAe,SAAS,QAAQ,UAAU,GAC1C,cAAc,SAAS,QAAQ,SAAS,GACxC,cAAc,SAAS,QAAQ,SAAS,GACxC,sBAAsB,SAAS,QAAQ,cAAc,GACtD;UACC,CAAC,QAAQ,QAAQ,eAAe,OAAO,EAAE,SAAS,WAAW,GAAG;aAC7D,YAAY,eAAe,EAAE;UAChC,EAAE,IAAI;QACR,EAAE,IAAI;MACR,EAAE,WAAW,SAAS;IACxB,EAAE,0BAA0B;AAEhC;;;;;AAiBA,SAAgB,gBAAgB,OAA0C;CACxE,MAAM,aAAa,WAAW,UAAU;CACxC,MAAM,6BAA6B,MAAM,eAAe,YAAY,qBAAqB,CAAC;CAC1F,MAAM,sBAAsB,QAAQ,qBAAqB,CAAC,CAAC,UAAU;CACrE,MAAM,QAAQ,qBAAqB,CAAC,CAAC;CACrC,MAAM,eAAe,qBAAqB,CAAC,CAAC;CAC5C,MAAM,oBAAoB,qBAAqB,CAAC,CAAC;CACjD,MAAM,WAA+B,OAAO,UAAU,WAAW,QAAQ,KAAA;CACzE,MAAM,YAAoB,OAAO,iBAAiB,WAAW,eAAe;CAC5E,MAAM,iBACJ,OAAO,sBAAsB,WAAW,oBAAoB,KAAA;CAE9D,MAAM,eAAgE,UAAU;EAC9E,MAAM,gBAAgB;EACtB,MAAM,UAAU,qBAAqB,CAAC,CAAC;EACvC,IAAI,OAAO,YAAY,cAAc,CAAC,cAAc,GAClD,QAAwB;CAE5B;CACA,MAAM,gBAAmE,UAAU;EACjF,MAAM,gBAAgB;CACxB;CAEA,OACE,CAAC,OACC,cACA,OAAO,MAAM,SAAS,6BACtB,OAAO,MAAM,OACb,IAAI,UACJ,YAAY,WACZ,iBAAiB,gBACjB,UAAU,cAAc,GACxB,sBAAsB,SAAS,YAAY,kBAAkB,KAAK,GAClE,eAAe,cACf,SAAS,aACV;OACE,MAAM,YAAY,IAAI;IACzB,EAAE;AAEN"}

package/dist/Text.d.ts

@@ -1,10 +1,22 @@
 import { type JSX } from "solid-js";
-import type { SlotProps } from "./utils";
-export interface TextProps extends SlotProps {
-    children?: JSX.Element;
-    class?: string;
-    style?: JSX.CSSProperties;
+import { type ContextValue, type SlotProps } from "./utils";
+export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
+    /** The element type to render as. @default 'span' */
+    elementType?: string;
 }
-export declare const TextContext: import("solid-js").Context<null>;
+/**
+ * Slotted context for `Text`. A field provides description / errorMessage props
+ * (each carrying the `id` its `aria-describedby` references) under named slots,
+ * so a `<Text slot="description">` child picks up the right `id` without the field
+ * threading it manually. Mirrors react-aria-components' `TextContext` (default
+ * `{}` so an unprovided `Text` merges against an empty context and renders as-is).
+ */
+export declare const TextContext: import("solid-js").Context<ContextValue<TextProps, HTMLElement>>;
+/**
+ * A piece of text, typically a label, description, or error message inside a
+ * field. Port of react-aria-components' `Text`: it consumes its slot from
+ * `TextContext` (via `useContextProps`) so a field can supply the `id` and other
+ * props for the matching slot, then renders them onto the element.
+ */
 export declare function Text(props: TextProps): JSX.Element;
 //# sourceMappingURL=Text.d.ts.map

package/dist/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAiB,MAAM,UAAU,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,kCAA4B,CAAC;AAErD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAMlD"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAA6B,MAAM,UAAU,CAAC;AAE/D,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmC,MAAM,SAAS,CAAC;AAE7F,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,SAAS;IAC3E,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,kEAA0D,CAAC;AAEnF;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAclD"}

package/dist/Text.js

@@ -0,0 +1,42 @@
+import { filterDOMProps, useContextProps } from "./utils.js";
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { createContext, splitProps } from "solid-js";
+//#region src/Text.tsx
+/**
+* Slotted context for `Text`. A field provides description / errorMessage props
+* (each carrying the `id` its `aria-describedby` references) under named slots,
+* so a `<Text slot="description">` child picks up the right `id` without the field
+* threading it manually. Mirrors react-aria-components' `TextContext` (default
+* `{}` so an unprovided `Text` merges against an empty context and renders as-is).
+*/
+const TextContext = createContext({});
+/**
+* A piece of text, typically a label, description, or error message inside a
+* field. Port of react-aria-components' `Text`: it consumes its slot from
+* `TextContext` (via `useContextProps`) so a field can supply the `id` and other
+* props for the matching slot, then renders them onto the element.
+*/
+function Text(props) {
+	const [merged] = useContextProps(props, void 0, TextContext);
+	const [local, domProps] = splitProps(merged, [
+		"elementType",
+		"class",
+		"children",
+		"slot",
+		"ref"
+	]);
+	return createComponent(Dynamic, mergeProps({
+		get component() {
+			return local.elementType ?? "span";
+		},
+		get ["class"]() {
+			return local.class ?? "solidaria-Text";
+		}
+	}, () => filterDOMProps(domProps, { global: true }), { get children() {
+		return local.children;
+	} }));
+}
+//#endregion
+export { Text, TextContext };
+
+//# sourceMappingURL=Text.js.map

package/dist/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["JSX","createContext","splitProps","Dynamic","ContextValue","SlotProps","useContextProps","filterDOMProps","TextProps","HTMLAttributes","HTMLElement","elementType","TextContext","Text","props","Element","merged","undefined","local","domProps","_$createComponent","_$mergeProps","component","class","global","children"],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n  /** The element type to render as. @default 'span' */\n  elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n  const [merged] = useContextProps(props, undefined, TextContext);\n  // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n  // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n  const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n  return (\n    <Dynamic\n      component={local.elementType ?? \"span\"}\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAaY,cAAcX,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgBY,KAAKC,OAA+B;CAClD,MAAM,CAACE,UAAUV,gBAAgBQ,OAAOG,KAAAA,GAAWL,WAAW;CAG9D,MAAM,CAACM,OAAOC,YAAYjB,WAAWc,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OAAAI,gBACGjB,SAAOkB,WAAA;EAAA,IACNC,YAAS;GAAA,OAAEJ,MAAMP,eAAe;EAAM;EAAA,KAAA,WAAA;GAAA,OAC/BO,MAAMK,SAAS;EAAgB;CAAA,SAClChB,eAAeY,UAAU,EAAEK,QAAQ,KAAK,CAAC,GAAC,EAAA,IAAAC,WAAA;EAAA,OAE7CP,MAAMO;CAAQ,EAAA,CAAA,CAAA;AAGrB"}

package/dist/Text.jsx

@@ -0,0 +1,35 @@
+import { filterDOMProps, useContextProps } from "./utils.jsx";
+import { createContext, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+//#region src/Text.tsx
+/**
+* Slotted context for `Text`. A field provides description / errorMessage props
+* (each carrying the `id` its `aria-describedby` references) under named slots,
+* so a `<Text slot="description">` child picks up the right `id` without the field
+* threading it manually. Mirrors react-aria-components' `TextContext` (default
+* `{}` so an unprovided `Text` merges against an empty context and renders as-is).
+*/
+const TextContext = createContext({});
+/**
+* A piece of text, typically a label, description, or error message inside a
+* field. Port of react-aria-components' `Text`: it consumes its slot from
+* `TextContext` (via `useContextProps`) so a field can supply the `id` and other
+* props for the matching slot, then renders them onto the element.
+*/
+function Text(props) {
+	const [merged] = useContextProps(props, void 0, TextContext);
+	const [local, domProps] = splitProps(merged, [
+		"elementType",
+		"class",
+		"children",
+		"slot",
+		"ref"
+	]);
+	return <Dynamic component={local.elementType ?? "span"} class={local.class ?? "solidaria-Text"} {...filterDOMProps(domProps, { global: true })}>
+      {local.children}
+    </Dynamic>;
+}
+//#endregion
+export { Text, TextContext };
+
+//# sourceMappingURL=Text.jsx.map

package/dist/Text.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.jsx","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\n\nexport interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {\n  /** The element type to render as. @default 'span' */\n  elementType?: string;\n}\n\n/**\n * Slotted context for `Text`. A field provides description / errorMessage props\n * (each carrying the `id` its `aria-describedby` references) under named slots,\n * so a `<Text slot=\"description\">` child picks up the right `id` without the field\n * threading it manually. Mirrors react-aria-components' `TextContext` (default\n * `{}` so an unprovided `Text` merges against an empty context and renders as-is).\n */\nexport const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});\n\n/**\n * A piece of text, typically a label, description, or error message inside a\n * field. Port of react-aria-components' `Text`: it consumes its slot from\n * `TextContext` (via `useContextProps`) so a field can supply the `id` and other\n * props for the matching slot, then renders them onto the element.\n */\nexport function Text(props: TextProps): JSX.Element {\n  const [merged] = useContextProps(props, undefined, TextContext);\n  // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`\n  // are rendered explicitly; everything else (notably the slotted `id`) is spread.\n  const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"slot\", \"ref\"]);\n  return (\n    <Dynamic\n      component={local.elementType ?? \"span\"}\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,cAAc,cAAoD,CAAC,CAAC;;;;;;;AAQjF,SAAgB,KAAK,OAA+B;CAClD,MAAM,CAAC,UAAU,gBAAgB,OAAO,KAAA,GAAW,WAAW;CAG9D,MAAM,CAAC,OAAO,YAAY,WAAW,QAAQ;EAAC;EAAe;EAAS;EAAY;EAAQ;CAAK,CAAC;CAChG,OACE,CAAC,QACC,WAAW,MAAM,eAAe,QAChC,OAAO,MAAM,SAAS,sBAClB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,GAC9C;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}

package/dist/TextField.d.ts

@@ -4,7 +4,7 @@
  * A pre-wired headless text field that combines state + aria hooks.
  * Port of react-aria-components/src/TextField.tsx
  */
-import { type JSX } from "solid-js";
+import { type JSX, type Context } from "solid-js";
 import { type AriaTextFieldProps } from "@proyecto-viviana/solidaria";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";
 export interface TextFieldRenderProps {
@@ -43,11 +43,11 @@ export interface TextFieldContextValue {
     inputId?: string;
     setInputId?: (id: string | undefined) => void;
 }
-export declare const TextFieldContext: import("solid-js").Context<TextFieldContextValue | null>;
-export declare const LabelContext: import("solid-js").Context<TextFieldContextValue | null>;
-export declare const InputContext: import("solid-js").Context<TextFieldContextValue | null>;
-export declare const TextAreaContext: import("solid-js").Context<TextFieldContextValue | null>;
-export declare const FieldInputContext: import("solid-js").Context<TextFieldContextValue | null>;
+export declare const TextFieldContext: Context<TextFieldContextValue | null>;
+export declare const LabelContext: Context<TextFieldContextValue | null>;
+export declare const InputContext: Context<TextFieldContextValue | null>;
+export declare const TextAreaContext: Context<TextFieldContextValue | null>;
+export declare const FieldInputContext: Context<TextFieldContextValue | null>;
 export interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
     children?: JSX.Element;
 }

package/dist/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"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"}