@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/TagGroup.jsx

@@ -1,8 +1,21 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/TagGroup.tsx
 import { dataAttr, filterDOMProps, mergeRefs, 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 { For, Show, createContext, createMemo, createSignal, useContext } from "solid-js";
 import { createTag, createTagGroup, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createListState } from "@proyecto-viviana/solid-stately";
 //#region src/TagGroup.tsx
 /**
@@ -101,6 +114,7 @@ function TagList(props) {
 		}
 	});
 	const locale = useLocale();
+	const onRemove = () => local.onRemove;
 	const tagGroupAria = createTagGroup({
 		get "aria-label"() {
 			return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : void 0);
@@ -115,7 +129,7 @@ function TagList(props) {
 			return local.isDisabled;
 		},
 		get onRemove() {
-			return local.onRemove;
+			return onRemove();
 		},
 		get direction() {
 			return locale().direction;
@@ -134,14 +148,14 @@ function TagList(props) {
 	const contextValue = {
 		state,
 		get onRemove() {
-			return local.onRemove;
+			return onRemove();
 		},
 		get isDisabled() {
 			return local.isDisabled;
 		}
 	};
-	return <TagGroupContext.Provider value={contextValue}>
-      <TagListStateContext.Provider value={state}>
+	return <TagGroupContext value={contextValue}>
+      <TagListStateContext value={state}>
         <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={renderProps.style()} onFocusIn={() => {
 		setIsFocused(true);
 	}} onFocusOut={(e) => {
@@ -155,8 +169,8 @@ function TagList(props) {
             </Show>
           </SharedElementTransition>
         </div>
-      </TagListStateContext.Provider>
-    </TagGroupContext.Provider>;
+      </TagListStateContext>
+    </TagGroupContext>;
 }
 /**
 * A Tag is an individual item within a TagList.
@@ -185,6 +199,9 @@ function Tag(props) {
 		},
 		get textValue() {
 			return local.textValue;
+		},
+		get onAction() {
+			return local.onAction ? () => local.onAction?.(local.id) : void 0;
 		}
 	}, state, tagRef);
 	const normalizedRemoveButtonProps = createMemo(() => {
@@ -193,20 +210,18 @@ function Tag(props) {
 		return {
 			...raw,
 			onPress: () => {
-				if (!tagAria.isDisabled && groupContext?.onRemove) {
-					groupContext.onRemove(new Set([local.id]));
-					return;
-				}
 				rawHandler?.();
 			}
 		};
 	});
+	const allowsRemoving = createMemo(() => Boolean(tagAria.allowsRemoving) || Boolean(groupContext?.onRemove));
 	const renderValues = createMemo(() => ({
 		isSelected: tagAria.isSelected,
 		isDisabled: tagAria.isDisabled,
 		isFocused: tagAria.isFocused,
+		isFocusVisible: tagAria.isFocusVisible,
 		isPressed: tagAria.isPressed,
-		allowsRemoving: tagAria.allowsRemoving,
+		allowsRemoving: allowsRemoving(),
 		selectionMode: state?.selectionMode() ?? "none",
 		removeButtonProps: normalizedRemoveButtonProps()
 	}));
@@ -220,26 +235,22 @@ function Tag(props) {
 	}, renderValues);
 	const selectionIndicatorContext = createMemo(() => ({ isSelected: () => tagAria.isSelected }));
 	const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
-	return <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <TagContext.Provider value={{
+	return <SelectionIndicatorContext value={selectionIndicatorContext()}>
+      <TagContext value={{
 		get removeButtonProps() {
 			return normalizedRemoveButtonProps();
 		},
 		get allowsRemoving() {
-			return tagAria.allowsRemoving;
+			return allowsRemoving();
 		}
 	}}>
-        <div ref={mergeRefs(setTagRef, local.ref)} {...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 ref={mergeRefs(setTagRef, local.ref)} {...domProps()} {...tagAria.rowProps} class={renderProps.class()} style={renderProps.style()} data-selected={dataAttr(tagAria.isSelected)} data-disabled={dataAttr(tagAria.isDisabled)} data-focused={dataAttr(tagAria.isFocused)} data-focus-visible={dataAttr(tagAria.isFocusVisible)} data-pressed={dataAttr(tagAria.isPressed)} data-allows-removing={dataAttr(allowsRemoving())}>
           <div {...tagAria.gridCellProps} style={{ display: "contents" }}>
-            {renderProps.renderChildren()}
+            {renderProps.renderChildrenStable()}
           </div>
         </div>
-      </TagContext.Provider>
-    </SelectionIndicatorContext.Provider>;
+      </TagContext>
+    </SelectionIndicatorContext>;
 }
 /**
 * TagRemoveButton is the button used to remove a tag.
@@ -252,9 +263,11 @@ function TagRemoveButton(props) {
 	const rawId = getRemoveButtonProps().id;
 	const rawAriaLabel = getRemoveButtonProps()["aria-label"];
 	const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
+	const rawTabIndex = getRemoveButtonProps().tabIndex;
 	const buttonId = typeof rawId === "string" ? rawId : void 0;
 	const ariaLabel = typeof rawAriaLabel === "string" ? rawAriaLabel : "Remove";
 	const ariaLabelledBy = typeof rawAriaLabelledBy === "string" ? rawAriaLabelledBy : void 0;
+	const tabindex = typeof rawTabIndex === "number" ? rawTabIndex : void 0;
 	const handleClick = (event) => {
 		event.stopPropagation();
 		const handler = getRemoveButtonProps().onPress;
@@ -263,7 +276,7 @@ function TagRemoveButton(props) {
 	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}>
+	return <button type="button" class={props.class ?? "solidaria-TagRemoveButton"} style={props.style} id={buttonId} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} tabindex={tabindex} disabled={getIsDisabled()} data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)} onPointerDown={stopRowPress} onClick={handleClick}>
       {props.children ?? "×"}
     </button>;
 }

package/dist/TagGroup.jsx.map

@@ -1 +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 {\n  createTagGroup,\n  createTag,\n  useLocale,\n  type AriaTagGroupProps,\n} 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  type RefLike,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n  mergeRefs,\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  /** A ref to the tag's DOM element (merged with the internal collection ref). */\n  ref?: RefLike<HTMLDivElement>;\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  // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip\n  // under RTL. Thread the resolved layout direction into the hook (mirrors\n  // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).\n  const locale = useLocale();\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      get direction() {\n        return locale().direction;\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          // Track focus-within via the BUBBLING focusin/focusout pair (not the\n          // non-bubbling focus/blur the hook's trampoline uses) so this render-prop\n          // signal never clobbers `gridProps.onFocus` — the container focus\n          // trampoline that marshals entry onto the first/last row.\n          onFocusIn={() => {\n            setIsFocused(true);\n          }}\n          onFocusOut={(e) => {\n            const nextTarget = e.relatedTarget as Node | null;\n            if (nextTarget && e.currentTarget.contains(nextTarget)) {\n              return;\n            }\n\n            setIsFocused(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    \"ref\",\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={mergeRefs(setTagRef, local.ref)}\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":"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"}
+{"version":3,"file":"TagGroup.jsx","names":[],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/TagGroup.tsx\n\n/**\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 { createContext, createMemo, createSignal, useContext, For, Show } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  createTagGroup,\n  createTag,\n  useLocale,\n  type AriaTagGroupProps,\n} 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  type RefLike,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n  mergeRefs,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\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<\n      JSX.HTMLAttributes<HTMLDivElement>,\n      \"class\" | \"style\" | \"children\" | \"aria-label\" | \"aria-labelledby\" | \"aria-describedby\"\n    > {\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 keyboard focused. */\n  isFocusVisible: 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  /** A ref to the tag's DOM element (merged with the internal collection ref). */\n  ref?: RefLike<HTMLDivElement>;\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  // The tag group navigates on the inline axis, so ArrowLeft/ArrowRight flip\n  // under RTL. Thread the resolved layout direction into the hook (mirrors\n  // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).\n  const locale = useLocale();\n\n  // Callback-valued props must not go through createMemo — a memo that\n  // stores a function is easy to unwrap/call, and the live getter\n  // `onRemove={handler()}` must re-read on each access.\n  const onRemove = () => local.onRemove;\n\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 onRemove();\n      },\n      get direction() {\n        return locale().direction;\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 onRemove();\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n\n  return (\n    <TagGroupContext value={contextValue}>\n      <TagListStateContext value={state}>\n        <div\n          ref={setGridRef}\n          {...domProps}\n          {...tagGroupAria.gridProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          // Track focus-within via the BUBBLING focusin/focusout pair (not the\n          // non-bubbling focus/blur the hook's trampoline uses) so this render-prop\n          // signal never clobbers `gridProps.onFocus` — the container focus\n          // trampoline that marshals entry onto the first/last row.\n          onFocusIn={() => {\n            setIsFocused(true);\n          }}\n          onFocusOut={(e) => {\n            const nextTarget = e.relatedTarget as Node | null;\n            if (nextTarget && e.currentTarget.contains(nextTarget)) {\n              return;\n            }\n\n            setIsFocused(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>\n    </TagGroupContext>\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    \"ref\",\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      get onAction() {\n        return local.onAction ? () => local.onAction?.(local.id) : undefined;\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        rawHandler?.();\n      },\n    };\n  });\n\n  const allowsRemoving = createMemo(\n    () => Boolean(tagAria.allowsRemoving) || Boolean(groupContext?.onRemove),\n  );\n  const renderValues = createMemo<TagRenderProps>(() => ({\n    isSelected: tagAria.isSelected,\n    isDisabled: tagAria.isDisabled,\n    isFocused: tagAria.isFocused,\n    isFocusVisible: tagAria.isFocusVisible,\n    isPressed: tagAria.isPressed,\n    allowsRemoving: 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 value={selectionIndicatorContext()}>\n      <TagContext\n        value={{\n          get removeButtonProps() {\n            return normalizedRemoveButtonProps();\n          },\n          get allowsRemoving() {\n            return allowsRemoving();\n          },\n        }}\n      >\n        <div\n          ref={mergeRefs(setTagRef, local.ref)}\n          {...domProps()}\n          {...tagAria.rowProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          data-selected={dataAttr(tagAria.isSelected)}\n          data-disabled={dataAttr(tagAria.isDisabled)}\n          data-focused={dataAttr(tagAria.isFocused)}\n          data-focus-visible={dataAttr(tagAria.isFocusVisible)}\n          data-pressed={dataAttr(tagAria.isPressed)}\n          data-allows-removing={dataAttr(allowsRemoving())}\n        >\n          <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n            {renderProps.renderChildrenStable()}\n          </div>\n        </div>\n      </TagContext>\n    </SelectionIndicatorContext>\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 rawTabIndex = getRemoveButtonProps().tabIndex;\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  const tabindex: number | undefined = typeof rawTabIndex === \"number\" ? rawTabIndex : 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      tabindex={tabindex}\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":"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"}

package/dist/Text.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type ContextValue, type SlotProps } from "./utils";
 export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
     /** The element type to render as. @default 'span' */
@@ -8,13 +8,13 @@ export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
  * 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
+ * threading it manually. It matches the upstream `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
+ * field. It adapts the pinned `Text` component and 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.
  */

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,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,CAelD"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAmC,MAAM,SAAS,CAAC;AAG7F,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,CAgBlD"}

package/dist/Text.js

@@ -1,19 +1,32 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Text.tsx
 import { filterDOMProps, useContextProps } from "./utils.js";
 import { ElementTag } from "./ElementTag.js";
-import { createComponent, mergeProps } from "solid-js/web";
-import { createContext, splitProps } from "solid-js";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { createContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#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
+* threading it manually. It matches the upstream `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
+* field. It adapts the pinned `Text` component and 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.
 */
@@ -23,12 +36,16 @@ function Text(props) {
 		"elementType",
 		"class",
 		"children",
-		"slot",
 		"ref"
 	]);
-	return createComponent(ElementTag, mergeProps({ get ["class"]() {
+	return createComponent(ElementTag, mergeProps({ get "class"() {
 		return local.class ?? "solidaria-Text";
-	} }, () => filterDOMProps(domProps, { global: true }), {
+	} }, () => {
+		return filterDOMProps(domProps, { global: true });
+	}, {
+		get slot() {
+			return merged.slot;
+		},
 		get tag() {
 			return local.elementType ?? "span";
 		},

package/dist/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["JSX","createContext","splitProps","ElementTag","ContextValue","SlotProps","useContextProps","filterDOMProps","TextProps","HTMLAttributes","HTMLElement","elementType","TextContext","Text","props","Element","merged","undefined","local","domProps","_$createComponent","_$mergeProps","class","global","tag","children"],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\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    <ElementTag\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n      // last, so a stray `tag` in the spread can never redirect the element\n      tag={local.elementType ?? \"span\"}\n    >\n      {local.children}\n    </ElementTag>\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,YAAUkB,WAAA,EAAA,KAAA,WAAA;EAAA,OACFH,MAAMI,SAAS;CAAgB,EAAA,SAClCf,eAAeY,UAAU,EAAEI,QAAQ,KAAK,CAAC,GAAC;EAAA,IAE9CC,MAAG;GAAA,OAAEN,MAAMP,eAAe;EAAM;EAAA,IAAAc,WAAA;GAAA,OAE/BP,MAAMO;EAAQ;CAAA,CAAA,CAAA;AAGrB"}
+{"version":3,"file":"Text.js","names":["<ElementTag\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n      slot={merged.slot}\n      // last, so a stray `tag` in the spread can never redirect the element\n      tag={local.elementType ?? \"span\"}\n    >\n      {local.children}\n    </ElementTag>"],"sources":["../src/Text.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Text.tsx\n\nimport { createContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { ElementTag } from \"./ElementTag\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/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. It matches the upstream `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. It adapts the pinned `Text` component and 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  // RAC `Text.tsx:28-31` spreads remaining props — including `slot` — onto the\n  // element. `ref`/`class`/`children`/`elementType` are rendered explicitly.\n  const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"ref\"]);\n  return (\n    <ElementTag\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n      slot={merged.slot}\n      // last, so a stray `tag` in the spread can never redirect the element\n      tag={local.elementType ?? \"span\"}\n    >\n      {local.children}\n    </ElementTag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,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;CAAK,CAAC;CACxF,OACEA,gBAAAA,YAAAA,WAAAA,EACE,IAAA,UAAA;EAAO,OAAA,MAAM,SAAS;CAAgB,EAO5B,SANV;EAAI,OAAA,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC;CAAC,GAFhD;EAGE,IAAA,OAAA;GAAM,OAAA,OAAO;EAAI;EAEjB,IAAA,MAAA;GAAK,OAAA,MAAM,eAAe;EAAM;EALlC,IAAA,WAAA;GAOG,OAAA,MAAM;EACG;;AAEhB"}

package/dist/Text.jsx

@@ -1,18 +1,31 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Text.tsx
 import { filterDOMProps, useContextProps } from "./utils.jsx";
 import { ElementTag } from "./ElementTag.jsx";
-import { createContext, splitProps } from "solid-js";
+import { createContext } from "solid-js";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 //#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
+* threading it manually. It matches the upstream `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
+* field. It adapts the pinned `Text` component and 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.
 */
@@ -22,10 +35,9 @@ function Text(props) {
 		"elementType",
 		"class",
 		"children",
-		"slot",
 		"ref"
 	]);
-	return <ElementTag class={local.class ?? "solidaria-Text"} {...filterDOMProps(domProps, { global: true })} tag={local.elementType ?? "span"}>
+	return <ElementTag class={local.class ?? "solidaria-Text"} {...filterDOMProps(domProps, { global: true })} slot={merged.slot} tag={local.elementType ?? "span"}>
       {local.children}
     </ElementTag>;
 }

package/dist/Text.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Text.jsx","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["import { type JSX, createContext, splitProps } from \"solid-js\";\nimport { ElementTag } from \"./ElementTag\";\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    <ElementTag\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n      // last, so a stray `tag` in the spread can never redirect the element\n      tag={local.elementType ?? \"span\"}\n    >\n      {local.children}\n    </ElementTag>\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,WACC,OAAO,MAAM,SAAS,sBAClB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,GAE7C,KAAK,MAAM,eAAe,QAC3B;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}
+{"version":3,"file":"Text.jsx","names":[],"sources":["../src/Text.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Text.tsx\n\nimport { createContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { ElementTag } from \"./ElementTag\";\nimport { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from \"./utils\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/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. It matches the upstream `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. It adapts the pinned `Text` component and 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  // RAC `Text.tsx:28-31` spreads remaining props — including `slot` — onto the\n  // element. `ref`/`class`/`children`/`elementType` are rendered explicitly.\n  const [local, domProps] = splitProps(merged, [\"elementType\", \"class\", \"children\", \"ref\"]);\n  return (\n    <ElementTag\n      class={local.class ?? \"solidaria-Text\"}\n      {...filterDOMProps(domProps, { global: true })}\n      slot={merged.slot}\n      // last, so a stray `tag` in the spread can never redirect the element\n      tag={local.elementType ?? \"span\"}\n    >\n      {local.children}\n    </ElementTag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,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;CAAK,CAAC;CACxF,OACE,CAAC,WACC,OAAO,MAAM,SAAS,sBAClB,eAAe,UAAU,EAAE,QAAQ,KAAK,CAAC,GAC7C,MAAM,OAAO,MAEb,KAAK,MAAM,eAAe,QAC3B;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}

package/dist/TextField.d.ts

@@ -1,10 +1,5 @@
-/**
- * TextField component for solidaria-components
- *
- * A pre-wired headless text field that combines state + aria hooks.
- * Port of react-aria-components/src/TextField.tsx
- */
-import { type JSX, type Context } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { type AriaTextFieldProps } from "@proyecto-viviana/solidaria";
 import { type RenderChildren, type ClassNameOrFunction, type StyleOrFunction, type SlotProps } from "./utils";
 export interface TextFieldRenderProps {
@@ -44,18 +39,9 @@ export interface TextFieldContextValue {
     setInputId?: (id: string | undefined) => void;
 }
 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;
-}
-/**
- * A label element that automatically wires up to the parent TextField context.
- * This enables the proper htmlFor/id relationship between label and input.
- */
-export declare function Label(props: LabelProps): JSX.Element;
 export interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "children"> {
 }
 /**
@@ -91,4 +77,5 @@ export declare function TextArea(props: TextAreaProps): JSX.Element;
  * ```
  */
 export declare function TextField(props: TextFieldProps): JSX.Element;
+export { Label, LabelContext, type LabelProps } from "./Label";
 //# sourceMappingURL=TextField.d.ts.map

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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"}