@proyecto-viviana/solidaria-components 0.4.0 → 0.4.1

package/dist/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","names":["JSX","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTagGroup","createTag","AriaTagGroupProps","createListState","ListState","Key","SelectionMode","SelectionBehavior","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","dataAttr","SharedElementTransition","SelectionIndicatorContext","SelectionIndicatorContextValue","TagGroupRenderProps","isDisabled","isEmpty","TagGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","class","style","TagListRenderProps","isFocused","TagListProps","items","T","item","renderEmptyState","selectionMode","selectionBehavior","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","disabledKeys","getKey","label","onRemove","TagRenderProps","isSelected","isPressed","allowsRemoving","removeButtonProps","Record","TagProps","id","textValue","onAction","key","TagGroupContextValue","state","TagContextValue","TagGroupContext","TagListStateContext","TagContext","useTagGroupContext","TagGroup","props","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","undefined","slot","_$insert","_$runHydrationEvents","TagList","gridRef","setGridRef","String","tagGroupAria","aria-label","aria-labelledby","aria-describedby","setIsFocused","renderValues","length","renderProps","defaultClassName","contextValue","_$createComponent","Provider","value","_el$2","_$use","gridProps","onFocus","setFocused","e","nextTarget","relatedTarget","Node","currentTarget","contains","data-empty","data-focused","when","fallback","each","Tag","rest","groupContext","tagRef","setTagRef","tagAria","role","normalizedRemoveButtonProps","raw","rawHandler","onPress","selectionIndicatorContext","global","_el$3","_tmpl$2","_el$4","firstChild","rowProps","event","rowClick","onClick","EventHandler","MouseEvent","target","closest","data-selected","data-disabled","data-pressed","data-allows-removing","gridCellProps","display","renderChildren","TagRemoveButtonProps","CSSProperties","buttonProps","TagRemoveButton","tagContext","getRemoveButtonProps","getIsDisabled","Boolean","rawId","rawAriaLabel","rawAriaLabelledBy","buttonId","ariaLabel","ariaLabelledBy","handleClick","HTMLButtonElement","stopPropagation","handler","stopRowPress","PointerEvent","_el$5","_tmpl$3","$$click","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$className","t","_$style","a","_$setProperty","o","_$delegateEvents"],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n  type JSX,\n  createContext,\n  createMemo,\n  createSignal,\n  splitProps,\n  useContext,\n  For,\n  Show,\n} from \"solid-js\";\nimport { createTagGroup, createTag, type AriaTagGroupProps } from \"@proyecto-viviana/solidaria\";\nimport {\n  createListState,\n  type ListState,\n  type Key,\n  type SelectionMode,\n  type SelectionBehavior,\n} from \"@proyecto-viviana/solid-stately\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  dataAttr,\n} from \"./utils\";\nimport { SharedElementTransition } from \"./SharedElementTransition\";\nimport {\n  SelectionIndicatorContext,\n  type SelectionIndicatorContextValue,\n} from \"./SelectionIndicator\";\n\nexport interface TagGroupRenderProps {\n  /** Whether the tag group is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag list is empty. */\n  isEmpty: boolean;\n}\n\nexport interface TagGroupProps\n  extends\n    Omit<AriaTagGroupProps, \"id\">,\n    SlotProps,\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\"> {\n  /** The children of the component. */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagGroupRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagGroupRenderProps>;\n}\n\nexport interface TagListRenderProps {\n  /** Whether the tag list is empty. */\n  isEmpty: boolean;\n  /** Whether the tag list is focused. */\n  isFocused: boolean;\n}\n\nexport interface TagListProps<T>\n  extends\n    SlotProps,\n    Omit<JSX.HTMLAttributes<HTMLDivElement>, \"class\" | \"style\" | \"children\" | \"onSelectionChange\"> {\n  /** The items to display in the tag list. */\n  items: T[];\n  /** Function to render each item. */\n  children: (item: T) => JSX.Element;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagListRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagListRenderProps>;\n  /** Content to render when the list is empty. */\n  renderEmptyState?: () => JSX.Element;\n  /** The selection mode for the tag list. */\n  selectionMode?: SelectionMode;\n  /** How selection behaves in the collection. */\n  selectionBehavior?: SelectionBehavior;\n  /** The currently selected keys (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** The default selected keys (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Handler called when selection changes. */\n  onSelectionChange?: (keys: \"all\" | Set<Key>) => void;\n  /** Keys that are disabled. */\n  disabledKeys?: Iterable<Key>;\n  /** Function to get a unique key from an item. */\n  getKey?: (item: T) => Key;\n  /** Accessibility label. */\n  label?: string;\n  /** Custom aria-label. */\n  \"aria-label\"?: string;\n  /** Reference to external label element. */\n  \"aria-labelledby\"?: string;\n  /** Reference to description element. */\n  \"aria-describedby\"?: string;\n  /** Whether the tag list is disabled. */\n  isDisabled?: boolean;\n  /** Handler called when tags are removed. */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagRenderProps {\n  /** Whether the tag is selected. */\n  isSelected: boolean;\n  /** Whether the tag is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag is focused. */\n  isFocused: boolean;\n  /** Whether the tag is pressed. */\n  isPressed: boolean;\n  /** Whether the tag allows removal. */\n  allowsRemoving: boolean;\n  /** The selection mode. */\n  selectionMode: SelectionMode;\n  /** Props for the remove button when removal is allowed. */\n  removeButtonProps: Record<string, unknown>;\n}\n\nexport interface TagProps extends SlotProps {\n  /** A unique key for this tag. */\n  id: Key;\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /** A text value for accessibility. */\n  textValue?: string;\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TagRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TagRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TagRenderProps>;\n  /** Handler called when the tag is activated. */\n  onAction?: (key: Key) => void;\n}\n\ninterface TagGroupContextValue {\n  state: ListState;\n  onRemove?: (keys: Set<Key>) => void;\n  isDisabled?: boolean;\n}\n\ninterface TagContextValue {\n  removeButtonProps: Record<string, unknown>;\n  allowsRemoving: boolean;\n}\n\nexport const TagGroupContext = createContext<TagGroupContextValue | null>(null);\nexport const TagListStateContext = createContext<ListState | null>(null);\nexport const TagContext = createContext<TagContextValue | null>(null);\n\nexport function useTagGroupContext(): TagGroupContextValue | null {\n  return useContext(TagGroupContext);\n}\n\n/**\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * @example\n * ```tsx\n * <TagGroup label=\"Categories\" onRemove={(keys) => removeItems(keys)}>\n *   <TagList items={items}>\n *     {(item) => <Tag id={item.id}>{item.name}</Tag>}\n *   </TagList>\n * </TagGroup>\n * ```\n */\nexport function TagGroup(props: TagGroupProps): JSX.Element {\n  const [local, domProps] = splitProps(props, [\"class\", \"style\", \"slot\", \"children\"]);\n\n  // We need TagList to provide the state, so TagGroup just provides context\n  return (\n    <div\n      {...domProps}\n      class={typeof local.class === \"string\" ? local.class : \"solidaria-TagGroup\"}\n      style={typeof local.style === \"object\" ? local.style : undefined}\n      slot={local.slot}\n    >\n      {props.children}\n    </div>\n  );\n}\n\n/**\n * TagList contains the list of tags within a TagGroup.\n */\nexport function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {\n  const [local, domProps] = splitProps(props, [\n    \"items\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"renderEmptyState\",\n    \"children\",\n    \"selectionMode\",\n    \"selectionBehavior\",\n    \"selectedKeys\",\n    \"defaultSelectedKeys\",\n    \"onSelectionChange\",\n    \"disabledKeys\",\n    \"getKey\",\n    \"label\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"isDisabled\",\n    \"onRemove\",\n  ]);\n\n  // Create a ref for the grid\n  const [gridRef, setGridRef] = createSignal<HTMLDivElement | null>(null);\n\n  // Default getKey function\n  const getKey = (item: T): Key => {\n    if (local.getKey) return local.getKey(item);\n    if (item.id !== undefined) return item.id;\n    if (item.key !== undefined) return item.key;\n    return String(item);\n  };\n\n  const state = createListState({\n    get items() {\n      return local.items;\n    },\n    getKey,\n    get selectionMode() {\n      return local.selectionMode ?? \"none\";\n    },\n    get selectionBehavior() {\n      return local.selectionBehavior ?? \"toggle\";\n    },\n    get selectedKeys() {\n      return local.selectedKeys;\n    },\n    get defaultSelectedKeys() {\n      return local.defaultSelectedKeys;\n    },\n    get onSelectionChange() {\n      return local.onSelectionChange;\n    },\n    get disabledKeys() {\n      return local.disabledKeys;\n    },\n  });\n\n  // Create tag group accessibility props\n  const tagGroupAria = createTagGroup(\n    {\n      get \"aria-label\"() {\n        return local[\"aria-label\"] ?? (!local[\"aria-labelledby\"] ? local.label : undefined);\n      },\n      get \"aria-labelledby\"() {\n        return local[\"aria-labelledby\"];\n      },\n      get \"aria-describedby\"() {\n        return local[\"aria-describedby\"];\n      },\n      get isDisabled() {\n        return local.isDisabled;\n      },\n      get onRemove() {\n        return local.onRemove;\n      },\n    },\n    state,\n    gridRef,\n  );\n\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  const renderValues = createMemo<TagListRenderProps>(() => ({\n    isEmpty: local.items.length === 0,\n    isFocused: isFocused(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TagList\",\n    },\n    renderValues,\n  );\n\n  const contextValue: TagGroupContextValue = {\n    state,\n    get onRemove() {\n      return local.onRemove;\n    },\n    get isDisabled() {\n      return local.isDisabled;\n    },\n  };\n\n  return (\n    <TagGroupContext.Provider value={contextValue}>\n      <TagListStateContext.Provider value={state}>\n        <div\n          ref={setGridRef}\n          {...domProps}\n          {...tagGroupAria.gridProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          onFocus={() => {\n            setIsFocused(true);\n            state.setFocused(true);\n          }}\n          onBlur={(e) => {\n            const nextTarget = e.relatedTarget as Node | null;\n            if (nextTarget && e.currentTarget.contains(nextTarget)) {\n              return;\n            }\n\n            setIsFocused(false);\n            state.setFocused(false);\n          }}\n          data-empty={dataAttr(local.items.length === 0)}\n          data-focused={dataAttr(isFocused())}\n        >\n          <SharedElementTransition>\n            <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>\n              <For each={local.items}>{(item) => props.children(item)}</For>\n            </Show>\n          </SharedElementTransition>\n        </div>\n      </TagListStateContext.Provider>\n    </TagGroupContext.Provider>\n  );\n}\n\n/**\n * A Tag is an individual item within a TagList.\n */\nexport function Tag(props: TagProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"id\",\n    \"class\",\n    \"style\",\n    \"slot\",\n    \"isDisabled\",\n    \"textValue\",\n    \"onAction\",\n  ]);\n\n  const state = useContext(TagListStateContext);\n  const groupContext = useContext(TagGroupContext);\n\n  // Create a ref for the tag\n  const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);\n\n  // Create tag accessibility props\n  const tagAria = createTag(\n    {\n      get key() {\n        return local.id;\n      },\n      role: \"row\",\n      get isDisabled() {\n        return local.isDisabled || groupContext?.isDisabled;\n      },\n      get textValue() {\n        return local.textValue;\n      },\n    },\n    state!,\n    tagRef,\n  );\n\n  const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {\n    const raw = tagAria.removeButtonProps;\n    const rawHandler = typeof raw.onPress === \"function\" ? (raw.onPress as () => void) : undefined;\n    return {\n      ...raw,\n      onPress: () => {\n        if (!tagAria.isDisabled && groupContext?.onRemove) {\n          groupContext.onRemove(new Set([local.id]));\n          return;\n        }\n        rawHandler?.();\n      },\n    };\n  });\n\n  const renderValues = createMemo<TagRenderProps>(() => ({\n    isSelected: tagAria.isSelected,\n    isDisabled: tagAria.isDisabled,\n    isFocused: tagAria.isFocused,\n    isPressed: tagAria.isPressed,\n    allowsRemoving: tagAria.allowsRemoving,\n    selectionMode: state?.selectionMode() ?? \"none\",\n    removeButtonProps: normalizedRemoveButtonProps(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return props.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-Tag\",\n    },\n    renderValues,\n  );\n\n  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({\n    isSelected: () => tagAria.isSelected,\n  }));\n\n  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));\n\n  return (\n    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>\n      <TagContext.Provider\n        value={{\n          get removeButtonProps() {\n            return normalizedRemoveButtonProps();\n          },\n          get allowsRemoving() {\n            return tagAria.allowsRemoving;\n          },\n        }}\n      >\n        <div\n          ref={setTagRef}\n          {...domProps()}\n          {...tagAria.rowProps}\n          class={renderProps.class()}\n          style={renderProps.style()}\n          onClick={(event) => {\n            const rowClick = tagAria.rowProps.onClick;\n            if (typeof rowClick === \"function\") {\n              (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);\n            }\n\n            if (!tagAria.isDisabled && !(event.target as Element | null)?.closest(\"button\")) {\n              local.onAction?.(local.id);\n            }\n          }}\n          data-selected={dataAttr(tagAria.isSelected)}\n          data-disabled={dataAttr(tagAria.isDisabled)}\n          data-focused={dataAttr(tagAria.isFocused)}\n          data-pressed={dataAttr(tagAria.isPressed)}\n          data-allows-removing={dataAttr(tagAria.allowsRemoving)}\n        >\n          <div {...tagAria.gridCellProps} style={{ display: \"contents\" }}>\n            {renderProps.renderChildren()}\n          </div>\n        </div>\n      </TagContext.Provider>\n    </SelectionIndicatorContext.Provider>\n  );\n}\n\nexport interface TagRemoveButtonProps {\n  /** The children of the button (usually an X icon). */\n  children?: JSX.Element;\n  /** The CSS className for the element. */\n  class?: string;\n  /** The inline style for the element. */\n  style?: JSX.CSSProperties;\n  /** Explicit button props from Tag render props. */\n  buttonProps?: Record<string, unknown>;\n}\n\n/**\n * TagRemoveButton is the button used to remove a tag.\n * It should be placed inside a Tag component.\n */\nexport function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {\n  const tagContext = useContext(TagContext);\n  const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};\n  const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);\n  const rawId = getRemoveButtonProps().id;\n  const rawAriaLabel = getRemoveButtonProps()[\"aria-label\"];\n  const rawAriaLabelledBy = getRemoveButtonProps()[\"aria-labelledby\"];\n  const buttonId: string | undefined = typeof rawId === \"string\" ? rawId : undefined;\n  const ariaLabel: string = typeof rawAriaLabel === \"string\" ? rawAriaLabel : \"Remove\";\n  const ariaLabelledBy: string | undefined =\n    typeof rawAriaLabelledBy === \"string\" ? rawAriaLabelledBy : undefined;\n\n  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    event.stopPropagation();\n    const handler = getRemoveButtonProps().onPress;\n    if (typeof handler === \"function\" && !getIsDisabled()) {\n      (handler as () => void)();\n    }\n  };\n  const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <button\n      type=\"button\"\n      class={props.class ?? \"solidaria-TagRemoveButton\"}\n      style={props.style}\n      id={buttonId}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={getIsDisabled()}\n      data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}\n      onPointerDown={stopRowPress}\n      onClick={handleClick}\n    >\n      {props.children ?? \"×\"}\n    </button>\n  );\n}\n\nexport type { Key, SelectionMode, SelectionBehavior };\n"],"mappings":"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"}
+{"version":3,"file":"TagGroup.js","names":["JSX","createContext","createMemo","createSignal","splitProps","useContext","For","Show","createTagGroup","createTag","useLocale","AriaTagGroupProps","createListState","ListState","Key","SelectionMode","SelectionBehavior","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","RefLike","useRenderProps","filterDOMProps","dataAttr","mergeRefs","SharedElementTransition","SelectionIndicatorContext","SelectionIndicatorContextValue","TagGroupRenderProps","isDisabled","isEmpty","TagGroupProps","Omit","HTMLAttributes","HTMLDivElement","children","Element","class","style","TagListRenderProps","isFocused","TagListProps","items","T","item","renderEmptyState","selectionMode","selectionBehavior","selectedKeys","Iterable","defaultSelectedKeys","onSelectionChange","keys","Set","disabledKeys","getKey","label","onRemove","TagRenderProps","isSelected","isPressed","allowsRemoving","removeButtonProps","Record","TagProps","id","textValue","ref","onAction","key","TagGroupContextValue","state","TagContextValue","TagGroupContext","TagListStateContext","TagContext","useTagGroupContext","TagGroup","props","local","domProps","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$memo","undefined","slot","_$insert","_$runHydrationEvents","TagList","gridRef","setGridRef","String","locale","tagGroupAria","aria-label","aria-labelledby","aria-describedby","direction","setIsFocused","renderValues","length","renderProps","defaultClassName","contextValue","_$createComponent","Provider","value","_el$2","_$use","gridProps","onFocusIn","e","nextTarget","relatedTarget","Node","currentTarget","contains","data-empty","data-focused","when","fallback","each","Tag","rest","groupContext","tagRef","setTagRef","tagAria","role","normalizedRemoveButtonProps","raw","rawHandler","onPress","selectionIndicatorContext","global","_el$3","_tmpl$2","_el$4","firstChild","_ref$","rowProps","event","rowClick","onClick","EventHandler","MouseEvent","target","closest","data-selected","data-disabled","data-pressed","data-allows-removing","gridCellProps","display","renderChildren","TagRemoveButtonProps","CSSProperties","buttonProps","TagRemoveButton","tagContext","getRemoveButtonProps","getIsDisabled","Boolean","rawId","rawAriaLabel","rawAriaLabelledBy","buttonId","ariaLabel","ariaLabelledBy","handleClick","HTMLButtonElement","stopPropagation","handler","stopRowPress","PointerEvent","_el$5","_tmpl$3","$$click","$$pointerdown","_$setAttribute","_$effect","_p$","_v$","_v$2","_v$3","_v$4","_$className","t","_$style","a","_$setProperty","o","_$delegateEvents"],"sources":["../src/TagGroup.tsx"],"sourcesContent":["/**\n * TagGroup component for solidaria-components\n *\n * Pre-wired headless tag group component that combines aria hooks.\n * Port of react-aria-components/src/TagGroup.tsx\n *\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\n\nimport {\n  type JSX,\n  createContext,\n  createMemo,\n  createSignal,\n  splitProps,\n  useContext,\n  For,\n  Show,\n} from \"solid-js\";\nimport {\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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"}

package/dist/TagGroup.jsx

@@ -1,8 +1,8 @@
-import { dataAttr, filterDOMProps, useRenderProps } from "./utils.jsx";
+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 { createTag, createTagGroup } from "@proyecto-viviana/solidaria";
+import { createTag, createTagGroup, useLocale } from "@proyecto-viviana/solidaria";
 import { createListState } from "@proyecto-viviana/solid-stately";
 //#region src/TagGroup.tsx
 /**
@@ -100,6 +100,7 @@ function TagList(props) {
 			return local.disabledKeys;
 		}
 	});
+	const locale = useLocale();
 	const tagGroupAria = createTagGroup({
 		get "aria-label"() {
 			return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : void 0);
@@ -115,6 +116,9 @@ function TagList(props) {
 		},
 		get onRemove() {
 			return local.onRemove;
+		},
+		get direction() {
+			return locale().direction;
 		}
 	}, state, gridRef);
 	const [isFocused, setIsFocused] = createSignal(false);
@@ -138,14 +142,12 @@ function TagList(props) {
 	};
 	return <TagGroupContext.Provider value={contextValue}>
       <TagListStateContext.Provider value={state}>
-        <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={renderProps.style()} onFocus={() => {
+        <div ref={setGridRef} {...domProps} {...tagGroupAria.gridProps} class={renderProps.class()} style={renderProps.style()} onFocusIn={() => {
 		setIsFocused(true);
-		state.setFocused(true);
-	}} onBlur={(e) => {
+	}} onFocusOut={(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?.()}>
@@ -167,7 +169,8 @@ function Tag(props) {
 		"slot",
 		"isDisabled",
 		"textValue",
-		"onAction"
+		"onAction",
+		"ref"
 	]);
 	const state = useContext(TagListStateContext);
 	const groupContext = useContext(TagGroupContext);
@@ -226,7 +229,7 @@ function Tag(props) {
 			return tagAria.allowsRemoving;
 		}
 	}}>
-        <div ref={setTagRef} {...domProps()} {...tagAria.rowProps} class={renderProps.class()} style={renderProps.style()} onClick={(event) => {
+        <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);

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 { 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":"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"}
+{"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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"}

package/dist/TextField.js

@@ -324,7 +324,10 @@ function TextField(props) {
 		}
 	};
 	const domProps = createMemo(() => {
-		const filtered = filterDOMProps(ariaProps, { global: true });
+		const filtered = filterDOMProps(ariaProps, {
+			global: true,
+			events: false
+		});
 		delete filtered.id;
 		return filtered;
 	});

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["JSX","Context","createContext","useContext","createMemo","createSignal","createEffect","onCleanup","onMount","splitProps","untrack","createTextField","createFocusRing","createHover","mergeProps","AriaTextFieldProps","createTextFieldState","VALID_VALIDITY_STATE","ValidationResult","FormContext","FormProps","FieldErrorContext","FieldErrorContextValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Provider","TextContext","TextFieldRenderProps","isDisabled","isInvalid","isReadOnly","isRequired","isHovered","isFocused","isFocusVisible","TextFieldProps","Omit","children","class","style","render","props","HTMLAttributes","HTMLDivElement","renderProps","Element","TextFieldContextValue","labelProps","LabelHTMLAttributes","HTMLLabelElement","inputProps","InputHTMLAttributes","HTMLInputElement","descriptionProps","HTMLElement","errorMessageProps","slots","Record","inputId","setInputId","id","TextFieldContext","LabelContext","InputContext","TextAreaContext","FieldInputContext","withFormValidationBehavior","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","LabelProps","Label","context","localDOMProps","result","propsRecord","key","mergedProps","localProps","ref","_ref","contextLabelProps","merged","for","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents","InputProps","eventWithCurrentTarget","event","Event","element","T","value","bind","clearDelegatedTextEntryHandlers","delegatedElement","$$input","$$change","Input","inputElement","contextInputProps","inputHandler","handler","onInput","EventHandler","InputEvent","currentTarget","stopPropagation","changeHandler","onChange","addEventListener","removeEventListener","_el$2","_tmpl$2","_$use","TextAreaProps","TextareaHTMLAttributes","HTMLTextAreaElement","TextArea","textAreaElement","type","_type","_el$3","_tmpl$3","TextField","contextProps","contextSlotProps","slot","contextBaseProps","_labelProps","_inputProps","_descriptionProps","_errorMessageProps","_isInvalid","_slots","_setInputId","rest","baseProps","local","ariaProps","state","defaultValue","inputAriaProps","clean","startsWith","textFieldAria","setValue","focusProps","hoverProps","inputIdOverride","setInputIdOverride","renderValues","defaultClassName","childRenderValues","domProps","filtered","global","cleanHoverProps","fieldValidation","errorMessage","validationErrors","validationDetails","customError","valid","fieldErrorContext","validation","contextValue","FieldChildren","textSlots","description","FieldChildrenSlotted","_$createComponent","values","rootProps","customRootProps","_$memo","_el$4","_tmpl$4"],"sources":["../src/TextField.tsx"],"sourcesContent":["/**\n * TextField component for solidaria-components\n *\n * A pre-wired headless text field that combines state + aria hooks.\n * Port of react-aria-components/src/TextField.tsx\n */\n\nimport {\n  type JSX,\n  type Context,\n  createContext,\n  useContext,\n  createMemo,\n  createSignal,\n  createEffect,\n  onCleanup,\n  onMount,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport {\n  createTextField,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaTextFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createTextFieldState,\n  VALID_VALIDITY_STATE,\n  type ValidationResult,\n} from \"@proyecto-viviana/solid-stately\";\nimport { FormContext, type FormProps } from \"./Form\";\nimport { FieldErrorContext, type FieldErrorContextValue } from \"./FieldError\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\n\nexport interface TextFieldRenderProps {\n  /** Whether the text field is disabled. */\n  isDisabled: boolean;\n  /** Whether the value is invalid. */\n  isInvalid: boolean;\n  /** Whether the text field is read only. */\n  isReadOnly: boolean;\n  /** Whether the text field is required. */\n  isRequired: boolean;\n  /** Whether the text field is currently hovered with a mouse. */\n  isHovered: boolean;\n  /** Whether the text field is focused, either via a mouse or keyboard. */\n  isFocused: boolean;\n  /** Whether the text field is keyboard focused. */\n  isFocusVisible: boolean;\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, \"children\">, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TextFieldRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TextFieldRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TextFieldRenderProps>;\n  /** Custom renderer for the outer text field element. */\n  render?: (\n    props: JSX.HTMLAttributes<HTMLDivElement>,\n    renderProps: TextFieldRenderProps,\n  ) => JSX.Element;\n}\n\nexport interface TextFieldContextValue {\n  labelProps?: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;\n  descriptionProps?: JSX.HTMLAttributes<HTMLElement>;\n  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;\n  isInvalid?: boolean;\n  slots?: Record<string, TextFieldProps>;\n  inputId?: string;\n  setInputId?: (id: string | undefined) => void;\n}\n\nexport const TextFieldContext = createContext<TextFieldContextValue | null>(null);\nexport const LabelContext = TextFieldContext;\nexport const InputContext = TextFieldContext;\nexport const TextAreaContext = TextFieldContext;\nexport const FieldInputContext = TextFieldContext;\n\nfunction withFormValidationBehavior(\n  props: TextFieldProps,\n  formContext: FormProps | null,\n): TextFieldProps {\n  if (!formContext?.validationBehavior) {\n    return props;\n  }\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      const localValue = Reflect.get(target, property, receiver);\n      if (property === \"validationBehavior\" && localValue === undefined) {\n        return formContext.validationBehavior;\n      }\n\n      return localValue;\n    },\n    has(target, property) {\n      return (\n        Reflect.has(target, property) ||\n        (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n      );\n    },\n    ownKeys(target) {\n      const keys = new Set(Reflect.ownKeys(target));\n      if (formContext.validationBehavior !== undefined) {\n        keys.add(\"validationBehavior\");\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => formContext.validationBehavior,\n        };\n      }\n\n      return undefined;\n    },\n  });\n}\n\nexport interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {\n  children?: JSX.Element;\n}\n\n/**\n * A label element that automatically wires up to the parent TextField context.\n * This enables the proper htmlFor/id relationship between label and input.\n */\nexport function Label(props: LabelProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n\n  const localDOMProps = () => {\n    const result: Record<string, unknown> = {};\n    const propsRecord = props as Record<string, unknown>;\n\n    for (const key in propsRecord) {\n      if (key !== \"children\") {\n        result[key] = propsRecord[key];\n      }\n    }\n    return result;\n  };\n\n  // Merge context labelProps with local props (local props take precedence)\n  const mergedProps = () => {\n    const localProps = localDOMProps();\n    if (context) {\n      const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<\n        string,\n        unknown\n      >;\n      const merged = {\n        ...contextLabelProps,\n        ...(context.inputId ? { for: context.inputId } : {}),\n        ...localProps,\n      } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-Label\";\n      }\n      return merged;\n    }\n    return localProps.class == null ? { ...localProps, class: \"solidaria-Label\" } : localProps;\n  };\n\n  return <label {...mergedProps()}>{props.children}</label>;\n}\n\nexport interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"children\"> {}\n\nfunction eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {\n  return new Proxy(event, {\n    get(target, property, receiver) {\n      if (property === \"target\" || property === \"currentTarget\") {\n        return element;\n      }\n\n      const value = Reflect.get(target, property, receiver);\n      return typeof value === \"function\" ? value.bind(target) : value;\n    },\n  });\n}\n\nfunction clearDelegatedTextEntryHandlers(element: HTMLElement) {\n  const delegatedElement = element as HTMLElement & {\n    $$input?: unknown;\n    $$change?: unknown;\n  };\n  delete delegatedElement.$$input;\n  delete delegatedElement.$$change;\n}\n\n/**\n * An input element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual input element.\n */\nexport function Input(props: InputProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n  let inputElement: HTMLInputElement | undefined;\n\n  createEffect(() => {\n    context?.setInputId?.(props.id);\n  });\n\n  onCleanup(() => {\n    context?.setInputId?.(undefined);\n  });\n\n  // Merge context inputProps with local props (local props take precedence)\n  const mergedProps = () => {\n    if (context) {\n      // Remove ref from context props to avoid conflicts\n      const { ref: _ref, ...contextInputProps } = (context.inputProps ?? {}) as Record<\n        string,\n        unknown\n      >;\n      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-Input\";\n      }\n      return merged;\n    }\n    return props.class == null ? { ...props, class: \"solidaria-Input\" } : props;\n  };\n\n  onMount(() => {\n    const element = inputElement;\n    if (!element) {\n      return;\n    }\n\n    const inputHandler = (event: Event) => {\n      const handler = mergedProps().onInput as\n        | JSX.EventHandler<HTMLInputElement, InputEvent>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as InputEvent & {\n          currentTarget: HTMLInputElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n    const changeHandler = (event: Event) => {\n      const handler = mergedProps().onChange as\n        | JSX.EventHandler<HTMLInputElement, Event>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as Event & {\n          currentTarget: HTMLInputElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n\n    element.addEventListener(\"input\", inputHandler);\n    element.addEventListener(\"change\", changeHandler);\n    clearDelegatedTextEntryHandlers(element);\n    onCleanup(() => {\n      element.removeEventListener(\"input\", inputHandler);\n      element.removeEventListener(\"change\", changeHandler);\n    });\n  });\n\n  return (\n    <input\n      {...mergedProps()}\n      ref={(element) => {\n        inputElement = element;\n        const ref = props.ref;\n        if (typeof ref === \"function\") {\n          ref(element);\n        }\n      }}\n    />\n  );\n}\n\nexport interface TextAreaProps extends Omit<\n  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"children\"\n> {}\n\n/**\n * A textarea element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual textarea element.\n */\nexport function TextArea(props: TextAreaProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n  let textAreaElement: HTMLTextAreaElement | undefined;\n\n  createEffect(() => {\n    context?.setInputId?.(props.id);\n  });\n\n  onCleanup(() => {\n    context?.setInputId?.(undefined);\n  });\n\n  // Merge context inputProps with local props (local props take precedence)\n  // Note: TextArea uses inputProps from context since it's an input variant\n  const mergedProps = () => {\n    if (context) {\n      const {\n        ref: _ref,\n        type: _type,\n        ...contextInputProps\n      } = (context.inputProps ?? {}) as Record<string, unknown>;\n      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-TextArea\";\n      }\n      return merged;\n    }\n    return props.class == null ? { ...props, class: \"solidaria-TextArea\" } : props;\n  };\n\n  onMount(() => {\n    const element = textAreaElement;\n    if (!element) {\n      return;\n    }\n\n    const inputHandler = (event: Event) => {\n      const handler = mergedProps().onInput as\n        | JSX.EventHandler<HTMLTextAreaElement, InputEvent>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as InputEvent & {\n          currentTarget: HTMLTextAreaElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n    const changeHandler = (event: Event) => {\n      const handler = mergedProps().onChange as\n        | JSX.EventHandler<HTMLTextAreaElement, Event>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as Event & {\n          currentTarget: HTMLTextAreaElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n\n    element.addEventListener(\"input\", inputHandler);\n    element.addEventListener(\"change\", changeHandler);\n    clearDelegatedTextEntryHandlers(element);\n    onCleanup(() => {\n      element.removeEventListener(\"input\", inputHandler);\n      element.removeEventListener(\"change\", changeHandler);\n    });\n  });\n\n  return (\n    <textarea\n      {...mergedProps()}\n      ref={(element) => {\n        textAreaElement = element;\n        const ref = props.ref;\n        if (typeof ref === \"function\") {\n          ref(element);\n        }\n      }}\n    />\n  );\n}\n\n/**\n * A text field allows a user to enter a plain text value with a keyboard.\n *\n * This is a headless component that provides accessibility and state management.\n * Style it using the render props pattern or data attributes.\n *\n * @example\n * ```tsx\n * <TextField>\n *   {({ isInvalid }) => (\n *     <>\n *       <Label>Email</Label>\n *       <Input class={isInvalid ? 'border-red-500' : 'border-gray-300'} />\n *     </>\n *   )}\n * </TextField>\n * ```\n */\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const formContext = useContext(FormContext);\n  const contextProps = useContext(TextFieldContext);\n  const contextSlotProps = contextProps?.slots?.[props.slot ?? \"default\"];\n  const contextBaseProps = createMemo<TextFieldProps>(() => {\n    if (!contextProps) return {};\n    const {\n      labelProps: _labelProps,\n      inputProps: _inputProps,\n      descriptionProps: _descriptionProps,\n      errorMessageProps: _errorMessageProps,\n      isInvalid: _isInvalid,\n      slots: _slots,\n      setInputId: _setInputId,\n      ...rest\n    } = contextProps;\n    return rest as TextFieldProps;\n  });\n  const baseProps = (\n    contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props\n  ) as TextFieldProps;\n  const mergedProps = withFormValidationBehavior(baseProps, formContext);\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"render\",\n    \"slot\",\n  ]);\n\n  // Use getters to ensure props are read lazily inside reactive contexts\n  const state = createTextFieldState({\n    get value() {\n      return ariaProps.value;\n    },\n    get defaultValue() {\n      return ariaProps.defaultValue;\n    },\n    get onChange() {\n      return ariaProps.onChange;\n    },\n  });\n\n  const inputAriaProps = createMemo(() => {\n    const clean: Record<string, unknown> = {};\n    for (const key in ariaProps as Record<string, unknown>) {\n      if (!key.startsWith(\"data-\")) {\n        clean[key] = (ariaProps as Record<string, unknown>)[key];\n      }\n    }\n    return clean as typeof ariaProps;\n  });\n\n  const textFieldAria = createTextField(() => ({\n    ...inputAriaProps(),\n    value: state.value(),\n    onChange: state.setValue,\n  }));\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return ariaProps.isDisabled;\n    },\n  });\n  const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();\n\n  const renderValues = createMemo<TextFieldRenderProps>(() => ({\n    isDisabled: ariaProps.isDisabled || false,\n    isInvalid: textFieldAria.isInvalid,\n    isReadOnly: ariaProps.isReadOnly || false,\n    isRequired: ariaProps.isRequired || false,\n    isHovered: isHovered(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TextField\",\n    },\n    renderValues,\n  );\n  const childRenderValues: TextFieldRenderProps = {\n    get isDisabled() {\n      return ariaProps.isDisabled || false;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n    get isReadOnly() {\n      return ariaProps.isReadOnly || false;\n    },\n    get isRequired() {\n      return ariaProps.isRequired || false;\n    },\n    get isHovered() {\n      return isHovered();\n    },\n    get isFocused() {\n      return isFocused();\n    },\n    get isFocusVisible() {\n      return isFocusVisible();\n    },\n  };\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true });\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanHoverProps = () => {\n    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  // Context value for sub-components.\n  // Use property getters so sub-components always read the latest aria/focus state.\n  const fieldValidation = createMemo<ValidationResult>(() => {\n    const isInvalid = textFieldAria.isInvalid;\n    const errorMessage = ariaProps.errorMessage;\n    const validationErrors = isInvalid && typeof errorMessage === \"string\" ? [errorMessage] : [];\n\n    return {\n      isInvalid,\n      validationErrors,\n      validationDetails: isInvalid\n        ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }\n        : VALID_VALIDITY_STATE,\n    };\n  });\n  const fieldErrorContext: FieldErrorContextValue = {\n    get validation() {\n      return fieldValidation();\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n  };\n  const contextValue: TextFieldContextValue = {\n    get labelProps() {\n      return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;\n    },\n    get inputProps() {\n      return mergeProps(\n        textFieldAria.inputProps as Record<string, unknown>,\n        focusProps as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n    // Deterministic at render (createTextField generates it via createUniqueId),\n    // so the Label's `for` is stable across SSR + hydration. A signal set from an\n    // onMount effect would flip undefined->id post-mount and re-execute the Label\n    // template — crashing hydration if the re-run lands mid-hydration (dev).\n    get inputId() {\n      return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;\n    },\n    setInputId(id: string | undefined) {\n      setInputIdOverride(id);\n    },\n  };\n  // Resolve the render-prop children ONCE (untracked). Re-invoking it on a\n  // reactive update re-clones its templates; if that lands mid-hydration it\n  // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen\n  // the hydration window). The children carry their own fine-grained reactivity\n  // (render-value getters + <Show>s), so they update without being re-created.\n  const FieldChildren = () =>\n    untrack(() => {\n      const children = local.children;\n      return typeof children === \"function\" ? children(childRenderValues) : children;\n    });\n  // Provide the description / errorMessage props as `TextContext` slots (mirrors\n  // react-aria-components' TextField), so a `<Text slot=\"description\">` /\n  // `<Text slot=\"errorMessage\">` child picks up the `id` its `aria-describedby`\n  // references. Additive: existing consumers reading these off `TextFieldContext`\n  // are unaffected.\n  const textSlots = {\n    slots: {\n      get description() {\n        return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n      },\n      get errorMessage() {\n        return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n      },\n    },\n  };\n  const FieldChildrenSlotted = () => (\n    <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n      <FieldChildren />\n    </Provider>\n  );\n  const rootProps = () =>\n    ({\n      ...domProps(),\n      ...cleanHoverProps(),\n      class: renderProps.class(),\n      style: renderProps.style(),\n      slot: local.slot,\n      \"data-disabled\": ariaProps.isDisabled || undefined,\n      \"data-invalid\": textFieldAria.isInvalid || undefined,\n      \"data-readonly\": ariaProps.isReadOnly || undefined,\n      \"data-required\": ariaProps.isRequired || undefined,\n      \"data-hovered\": isHovered() || undefined,\n      \"data-focused\": isFocused() || undefined,\n      \"data-focus-visible\": isFocusVisible() || undefined,\n    }) as JSX.HTMLAttributes<HTMLDivElement>;\n  const customRootProps = () =>\n    ({\n      ...rootProps(),\n      children: <FieldChildrenSlotted />,\n    }) as JSX.HTMLAttributes<HTMLDivElement>;\n\n  return (\n    <FieldErrorContext.Provider value={fieldErrorContext}>\n      <TextFieldContext.Provider value={contextValue}>\n        {local.render ? (\n          local.render(customRootProps(), renderValues())\n        ) : (\n          <div {...rootProps()}>\n            <FieldChildrenSlotted />\n          </div>\n        )}\n      </TextFieldContext.Provider>\n    </FieldErrorContext.Provider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["JSX","Context","createContext","useContext","createMemo","createSignal","createEffect","onCleanup","onMount","splitProps","untrack","createTextField","createFocusRing","createHover","mergeProps","AriaTextFieldProps","createTextFieldState","VALID_VALIDITY_STATE","ValidationResult","FormContext","FormProps","FieldErrorContext","FieldErrorContextValue","RenderChildren","ClassNameOrFunction","StyleOrFunction","SlotProps","useRenderProps","filterDOMProps","Provider","TextContext","TextFieldRenderProps","isDisabled","isInvalid","isReadOnly","isRequired","isHovered","isFocused","isFocusVisible","TextFieldProps","Omit","children","class","style","render","props","HTMLAttributes","HTMLDivElement","renderProps","Element","TextFieldContextValue","labelProps","LabelHTMLAttributes","HTMLLabelElement","inputProps","InputHTMLAttributes","HTMLInputElement","descriptionProps","HTMLElement","errorMessageProps","slots","Record","inputId","setInputId","id","TextFieldContext","LabelContext","InputContext","TextAreaContext","FieldInputContext","withFormValidationBehavior","formContext","validationBehavior","Proxy","get","target","property","receiver","localValue","Reflect","undefined","has","ownKeys","keys","Set","add","Array","from","getOwnPropertyDescriptor","descriptor","enumerable","configurable","LabelProps","Label","context","localDOMProps","result","propsRecord","key","mergedProps","localProps","ref","_ref","contextLabelProps","merged","for","_el$","_$getNextElement","_tmpl$","_$spread","_$mergeProps","_$insert","_$runHydrationEvents","InputProps","eventWithCurrentTarget","event","Event","element","T","value","bind","clearDelegatedTextEntryHandlers","delegatedElement","$$input","$$change","Input","inputElement","contextInputProps","inputHandler","handler","onInput","EventHandler","InputEvent","currentTarget","stopPropagation","changeHandler","onChange","addEventListener","removeEventListener","_el$2","_tmpl$2","_$use","TextAreaProps","TextareaHTMLAttributes","HTMLTextAreaElement","TextArea","textAreaElement","type","_type","_el$3","_tmpl$3","TextField","contextProps","contextSlotProps","slot","contextBaseProps","_labelProps","_inputProps","_descriptionProps","_errorMessageProps","_isInvalid","_slots","_setInputId","rest","baseProps","local","ariaProps","state","defaultValue","inputAriaProps","clean","startsWith","textFieldAria","setValue","focusProps","hoverProps","inputIdOverride","setInputIdOverride","renderValues","defaultClassName","childRenderValues","domProps","filtered","global","events","cleanHoverProps","fieldValidation","errorMessage","validationErrors","validationDetails","customError","valid","fieldErrorContext","validation","contextValue","FieldChildren","textSlots","description","FieldChildrenSlotted","_$createComponent","values","rootProps","customRootProps","_$memo","_el$4","_tmpl$4"],"sources":["../src/TextField.tsx"],"sourcesContent":["/**\n * TextField component for solidaria-components\n *\n * A pre-wired headless text field that combines state + aria hooks.\n * Port of react-aria-components/src/TextField.tsx\n */\n\nimport {\n  type JSX,\n  type Context,\n  createContext,\n  useContext,\n  createMemo,\n  createSignal,\n  createEffect,\n  onCleanup,\n  onMount,\n  splitProps,\n  untrack,\n} from \"solid-js\";\nimport {\n  createTextField,\n  createFocusRing,\n  createHover,\n  mergeProps,\n  type AriaTextFieldProps,\n} from \"@proyecto-viviana/solidaria\";\nimport {\n  createTextFieldState,\n  VALID_VALIDITY_STATE,\n  type ValidationResult,\n} from \"@proyecto-viviana/solid-stately\";\nimport { FormContext, type FormProps } from \"./Form\";\nimport { FieldErrorContext, type FieldErrorContextValue } from \"./FieldError\";\nimport {\n  type RenderChildren,\n  type ClassNameOrFunction,\n  type StyleOrFunction,\n  type SlotProps,\n  useRenderProps,\n  filterDOMProps,\n  Provider,\n} from \"./utils\";\nimport { TextContext } from \"./Text\";\n\nexport interface TextFieldRenderProps {\n  /** Whether the text field is disabled. */\n  isDisabled: boolean;\n  /** Whether the value is invalid. */\n  isInvalid: boolean;\n  /** Whether the text field is read only. */\n  isReadOnly: boolean;\n  /** Whether the text field is required. */\n  isRequired: boolean;\n  /** Whether the text field is currently hovered with a mouse. */\n  isHovered: boolean;\n  /** Whether the text field is focused, either via a mouse or keyboard. */\n  isFocused: boolean;\n  /** Whether the text field is keyboard focused. */\n  isFocusVisible: boolean;\n}\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, \"children\">, SlotProps {\n  /** The children of the component. A function may be provided to receive render props. */\n  children?: RenderChildren<TextFieldRenderProps>;\n  /** The CSS className for the element. */\n  class?: ClassNameOrFunction<TextFieldRenderProps>;\n  /** The inline style for the element. */\n  style?: StyleOrFunction<TextFieldRenderProps>;\n  /** Custom renderer for the outer text field element. */\n  render?: (\n    props: JSX.HTMLAttributes<HTMLDivElement>,\n    renderProps: TextFieldRenderProps,\n  ) => JSX.Element;\n}\n\nexport interface TextFieldContextValue {\n  labelProps?: JSX.LabelHTMLAttributes<HTMLLabelElement>;\n  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;\n  descriptionProps?: JSX.HTMLAttributes<HTMLElement>;\n  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;\n  isInvalid?: boolean;\n  slots?: Record<string, TextFieldProps>;\n  inputId?: string;\n  setInputId?: (id: string | undefined) => void;\n}\n\nexport const TextFieldContext = createContext<TextFieldContextValue | null>(null);\nexport const LabelContext = TextFieldContext;\nexport const InputContext = TextFieldContext;\nexport const TextAreaContext = TextFieldContext;\nexport const FieldInputContext = TextFieldContext;\n\nfunction withFormValidationBehavior(\n  props: TextFieldProps,\n  formContext: FormProps | null,\n): TextFieldProps {\n  if (!formContext?.validationBehavior) {\n    return props;\n  }\n\n  return new Proxy(props, {\n    get(target, property, receiver) {\n      const localValue = Reflect.get(target, property, receiver);\n      if (property === \"validationBehavior\" && localValue === undefined) {\n        return formContext.validationBehavior;\n      }\n\n      return localValue;\n    },\n    has(target, property) {\n      return (\n        Reflect.has(target, property) ||\n        (property === \"validationBehavior\" && formContext.validationBehavior !== undefined)\n      );\n    },\n    ownKeys(target) {\n      const keys = new Set(Reflect.ownKeys(target));\n      if (formContext.validationBehavior !== undefined) {\n        keys.add(\"validationBehavior\");\n      }\n\n      return Array.from(keys);\n    },\n    getOwnPropertyDescriptor(target, property) {\n      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);\n      if (descriptor) {\n        return descriptor;\n      }\n\n      if (property === \"validationBehavior\" && formContext.validationBehavior !== undefined) {\n        return {\n          enumerable: true,\n          configurable: true,\n          get: () => formContext.validationBehavior,\n        };\n      }\n\n      return undefined;\n    },\n  });\n}\n\nexport interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {\n  children?: JSX.Element;\n}\n\n/**\n * A label element that automatically wires up to the parent TextField context.\n * This enables the proper htmlFor/id relationship between label and input.\n */\nexport function Label(props: LabelProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n\n  const localDOMProps = () => {\n    const result: Record<string, unknown> = {};\n    const propsRecord = props as Record<string, unknown>;\n\n    for (const key in propsRecord) {\n      if (key !== \"children\") {\n        result[key] = propsRecord[key];\n      }\n    }\n    return result;\n  };\n\n  // Merge context labelProps with local props (local props take precedence)\n  const mergedProps = () => {\n    const localProps = localDOMProps();\n    if (context) {\n      const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<\n        string,\n        unknown\n      >;\n      const merged = {\n        ...contextLabelProps,\n        ...(context.inputId ? { for: context.inputId } : {}),\n        ...localProps,\n      } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-Label\";\n      }\n      return merged;\n    }\n    return localProps.class == null ? { ...localProps, class: \"solidaria-Label\" } : localProps;\n  };\n\n  return <label {...mergedProps()}>{props.children}</label>;\n}\n\nexport interface InputProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"children\"> {}\n\nfunction eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {\n  return new Proxy(event, {\n    get(target, property, receiver) {\n      if (property === \"target\" || property === \"currentTarget\") {\n        return element;\n      }\n\n      const value = Reflect.get(target, property, receiver);\n      return typeof value === \"function\" ? value.bind(target) : value;\n    },\n  });\n}\n\nfunction clearDelegatedTextEntryHandlers(element: HTMLElement) {\n  const delegatedElement = element as HTMLElement & {\n    $$input?: unknown;\n    $$change?: unknown;\n  };\n  delete delegatedElement.$$input;\n  delete delegatedElement.$$change;\n}\n\n/**\n * An input element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual input element.\n */\nexport function Input(props: InputProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n  let inputElement: HTMLInputElement | undefined;\n\n  createEffect(() => {\n    context?.setInputId?.(props.id);\n  });\n\n  onCleanup(() => {\n    context?.setInputId?.(undefined);\n  });\n\n  // Merge context inputProps with local props (local props take precedence)\n  const mergedProps = () => {\n    if (context) {\n      // Remove ref from context props to avoid conflicts\n      const { ref: _ref, ...contextInputProps } = (context.inputProps ?? {}) as Record<\n        string,\n        unknown\n      >;\n      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-Input\";\n      }\n      return merged;\n    }\n    return props.class == null ? { ...props, class: \"solidaria-Input\" } : props;\n  };\n\n  onMount(() => {\n    const element = inputElement;\n    if (!element) {\n      return;\n    }\n\n    const inputHandler = (event: Event) => {\n      const handler = mergedProps().onInput as\n        | JSX.EventHandler<HTMLInputElement, InputEvent>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as InputEvent & {\n          currentTarget: HTMLInputElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n    const changeHandler = (event: Event) => {\n      const handler = mergedProps().onChange as\n        | JSX.EventHandler<HTMLInputElement, Event>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as Event & {\n          currentTarget: HTMLInputElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n\n    element.addEventListener(\"input\", inputHandler);\n    element.addEventListener(\"change\", changeHandler);\n    clearDelegatedTextEntryHandlers(element);\n    onCleanup(() => {\n      element.removeEventListener(\"input\", inputHandler);\n      element.removeEventListener(\"change\", changeHandler);\n    });\n  });\n\n  return (\n    <input\n      {...mergedProps()}\n      ref={(element) => {\n        inputElement = element;\n        const ref = props.ref;\n        if (typeof ref === \"function\") {\n          ref(element);\n        }\n      }}\n    />\n  );\n}\n\nexport interface TextAreaProps extends Omit<\n  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"children\"\n> {}\n\n/**\n * A textarea element that automatically wires up to the parent TextField context.\n * This enables focus tracking, validation, and accessibility props to flow from\n * the TextField to the actual textarea element.\n */\nexport function TextArea(props: TextAreaProps): JSX.Element {\n  const context = useContext(TextFieldContext);\n  let textAreaElement: HTMLTextAreaElement | undefined;\n\n  createEffect(() => {\n    context?.setInputId?.(props.id);\n  });\n\n  onCleanup(() => {\n    context?.setInputId?.(undefined);\n  });\n\n  // Merge context inputProps with local props (local props take precedence)\n  // Note: TextArea uses inputProps from context since it's an input variant\n  const mergedProps = () => {\n    if (context) {\n      const {\n        ref: _ref,\n        type: _type,\n        ...contextInputProps\n      } = (context.inputProps ?? {}) as Record<string, unknown>;\n      const merged = { ...contextInputProps, ...props } as Record<string, unknown>;\n      if (merged.class == null) {\n        merged.class = \"solidaria-TextArea\";\n      }\n      return merged;\n    }\n    return props.class == null ? { ...props, class: \"solidaria-TextArea\" } : props;\n  };\n\n  onMount(() => {\n    const element = textAreaElement;\n    if (!element) {\n      return;\n    }\n\n    const inputHandler = (event: Event) => {\n      const handler = mergedProps().onInput as\n        | JSX.EventHandler<HTMLTextAreaElement, InputEvent>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as InputEvent & {\n          currentTarget: HTMLTextAreaElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n    const changeHandler = (event: Event) => {\n      const handler = mergedProps().onChange as\n        | JSX.EventHandler<HTMLTextAreaElement, Event>\n        | undefined;\n      handler?.(\n        eventWithCurrentTarget(event, element) as Event & {\n          currentTarget: HTMLTextAreaElement;\n          target: Element;\n        },\n      );\n      clearDelegatedTextEntryHandlers(element);\n      event.stopPropagation();\n    };\n\n    element.addEventListener(\"input\", inputHandler);\n    element.addEventListener(\"change\", changeHandler);\n    clearDelegatedTextEntryHandlers(element);\n    onCleanup(() => {\n      element.removeEventListener(\"input\", inputHandler);\n      element.removeEventListener(\"change\", changeHandler);\n    });\n  });\n\n  return (\n    <textarea\n      {...mergedProps()}\n      ref={(element) => {\n        textAreaElement = element;\n        const ref = props.ref;\n        if (typeof ref === \"function\") {\n          ref(element);\n        }\n      }}\n    />\n  );\n}\n\n/**\n * A text field allows a user to enter a plain text value with a keyboard.\n *\n * This is a headless component that provides accessibility and state management.\n * Style it using the render props pattern or data attributes.\n *\n * @example\n * ```tsx\n * <TextField>\n *   {({ isInvalid }) => (\n *     <>\n *       <Label>Email</Label>\n *       <Input class={isInvalid ? 'border-red-500' : 'border-gray-300'} />\n *     </>\n *   )}\n * </TextField>\n * ```\n */\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const formContext = useContext(FormContext);\n  const contextProps = useContext(TextFieldContext);\n  const contextSlotProps = contextProps?.slots?.[props.slot ?? \"default\"];\n  const contextBaseProps = createMemo<TextFieldProps>(() => {\n    if (!contextProps) return {};\n    const {\n      labelProps: _labelProps,\n      inputProps: _inputProps,\n      descriptionProps: _descriptionProps,\n      errorMessageProps: _errorMessageProps,\n      isInvalid: _isInvalid,\n      slots: _slots,\n      setInputId: _setInputId,\n      ...rest\n    } = contextProps;\n    return rest as TextFieldProps;\n  });\n  const baseProps = (\n    contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props\n  ) as TextFieldProps;\n  const mergedProps = withFormValidationBehavior(baseProps, formContext);\n\n  const [local, ariaProps] = splitProps(mergedProps, [\n    \"children\",\n    \"class\",\n    \"style\",\n    \"render\",\n    \"slot\",\n  ]);\n\n  // Use getters to ensure props are read lazily inside reactive contexts\n  const state = createTextFieldState({\n    get value() {\n      return ariaProps.value;\n    },\n    get defaultValue() {\n      return ariaProps.defaultValue;\n    },\n    get onChange() {\n      return ariaProps.onChange;\n    },\n  });\n\n  const inputAriaProps = createMemo(() => {\n    const clean: Record<string, unknown> = {};\n    for (const key in ariaProps as Record<string, unknown>) {\n      if (!key.startsWith(\"data-\")) {\n        clean[key] = (ariaProps as Record<string, unknown>)[key];\n      }\n    }\n    return clean as typeof ariaProps;\n  });\n\n  const textFieldAria = createTextField(() => ({\n    ...inputAriaProps(),\n    value: state.value(),\n    onChange: state.setValue,\n  }));\n\n  const { isFocused, isFocusVisible, focusProps } = createFocusRing();\n\n  const { isHovered, hoverProps } = createHover({\n    get isDisabled() {\n      return ariaProps.isDisabled;\n    },\n  });\n  const [inputIdOverride, setInputIdOverride] = createSignal<string | undefined>();\n\n  const renderValues = createMemo<TextFieldRenderProps>(() => ({\n    isDisabled: ariaProps.isDisabled || false,\n    isInvalid: textFieldAria.isInvalid,\n    isReadOnly: ariaProps.isReadOnly || false,\n    isRequired: ariaProps.isRequired || false,\n    isHovered: isHovered(),\n    isFocused: isFocused(),\n    isFocusVisible: isFocusVisible(),\n  }));\n\n  const renderProps = useRenderProps(\n    {\n      get children() {\n        return local.children;\n      },\n      class: local.class,\n      style: local.style,\n      defaultClassName: \"solidaria-TextField\",\n    },\n    renderValues,\n  );\n  const childRenderValues: TextFieldRenderProps = {\n    get isDisabled() {\n      return ariaProps.isDisabled || false;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n    get isReadOnly() {\n      return ariaProps.isReadOnly || false;\n    },\n    get isRequired() {\n      return ariaProps.isRequired || false;\n    },\n    get isHovered() {\n      return isHovered();\n    },\n    get isFocused() {\n      return isFocused();\n    },\n    get isFocusVisible() {\n      return isFocusVisible();\n    },\n  };\n\n  const domProps = createMemo(() => {\n    const filtered = filterDOMProps(ariaProps, { global: true, events: false });\n    delete (filtered as Record<string, unknown>).id;\n    return filtered;\n  });\n\n  const cleanHoverProps = () => {\n    const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;\n    return rest;\n  };\n\n  // Context value for sub-components.\n  // Use property getters so sub-components always read the latest aria/focus state.\n  const fieldValidation = createMemo<ValidationResult>(() => {\n    const isInvalid = textFieldAria.isInvalid;\n    const errorMessage = ariaProps.errorMessage;\n    const validationErrors = isInvalid && typeof errorMessage === \"string\" ? [errorMessage] : [];\n\n    return {\n      isInvalid,\n      validationErrors,\n      validationDetails: isInvalid\n        ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }\n        : VALID_VALIDITY_STATE,\n    };\n  });\n  const fieldErrorContext: FieldErrorContextValue = {\n    get validation() {\n      return fieldValidation();\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n  };\n  const contextValue: TextFieldContextValue = {\n    get labelProps() {\n      return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;\n    },\n    get inputProps() {\n      return mergeProps(\n        textFieldAria.inputProps as Record<string, unknown>,\n        focusProps as Record<string, unknown>,\n      ) as JSX.InputHTMLAttributes<HTMLInputElement>;\n    },\n    get descriptionProps() {\n      return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get errorMessageProps() {\n      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n    },\n    get isInvalid() {\n      return textFieldAria.isInvalid;\n    },\n    // Deterministic at render (createTextField generates it via createUniqueId),\n    // so the Label's `for` is stable across SSR + hydration. A signal set from an\n    // onMount effect would flip undefined->id post-mount and re-execute the Label\n    // template — crashing hydration if the re-run lands mid-hydration (dev).\n    get inputId() {\n      return inputIdOverride() ?? (textFieldAria.inputProps as { id?: string }).id;\n    },\n    setInputId(id: string | undefined) {\n      setInputIdOverride(id);\n    },\n  };\n  // Resolve the render-prop children ONCE (untracked). Re-invoking it on a\n  // reactive update re-clones its templates; if that lands mid-hydration it\n  // throws a Hydration Mismatch (worst in dev, where slow unbundled modules widen\n  // the hydration window). The children carry their own fine-grained reactivity\n  // (render-value getters + <Show>s), so they update without being re-created.\n  const FieldChildren = () =>\n    untrack(() => {\n      const children = local.children;\n      return typeof children === \"function\" ? children(childRenderValues) : children;\n    });\n  // Provide the description / errorMessage props as `TextContext` slots (mirrors\n  // react-aria-components' TextField), so a `<Text slot=\"description\">` /\n  // `<Text slot=\"errorMessage\">` child picks up the `id` its `aria-describedby`\n  // references. Additive: existing consumers reading these off `TextFieldContext`\n  // are unaffected.\n  const textSlots = {\n    slots: {\n      get description() {\n        return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;\n      },\n      get errorMessage() {\n        return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;\n      },\n    },\n  };\n  const FieldChildrenSlotted = () => (\n    <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>\n      <FieldChildren />\n    </Provider>\n  );\n  const rootProps = () =>\n    ({\n      ...domProps(),\n      ...cleanHoverProps(),\n      class: renderProps.class(),\n      style: renderProps.style(),\n      slot: local.slot,\n      \"data-disabled\": ariaProps.isDisabled || undefined,\n      \"data-invalid\": textFieldAria.isInvalid || undefined,\n      \"data-readonly\": ariaProps.isReadOnly || undefined,\n      \"data-required\": ariaProps.isRequired || undefined,\n      \"data-hovered\": isHovered() || undefined,\n      \"data-focused\": isFocused() || undefined,\n      \"data-focus-visible\": isFocusVisible() || undefined,\n    }) as JSX.HTMLAttributes<HTMLDivElement>;\n  const customRootProps = () =>\n    ({\n      ...rootProps(),\n      children: <FieldChildrenSlotted />,\n    }) as JSX.HTMLAttributes<HTMLDivElement>;\n\n  return (\n    <FieldErrorContext.Provider value={fieldErrorContext}>\n      <TextFieldContext.Provider value={contextValue}>\n        {local.render ? (\n          local.render(customRootProps(), renderValues())\n        ) : (\n          <div {...rootProps()}>\n            <FieldChildrenSlotted />\n          </div>\n        )}\n      </TextFieldContext.Provider>\n    </FieldErrorContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuFA,MAAaiE,mBAAmB/D,cAA4C,IAAI;AAChF,MAAagE,eAAeD;AAC5B,MAAaE,eAAeF;AAC5B,MAAaG,kBAAkBH;AAC/B,MAAaI,oBAAoBJ;AAEjC,SAASK,2BACPzB,OACA0B,aACgB;CAChB,IAAI,CAACA,aAAaC,oBAChB,OAAO3B;CAGT,OAAO,IAAI4B,MAAM5B,OAAO;EACtB6B,IAAIC,QAAQC,UAAUC,UAAU;GAC9B,MAAMC,aAAaC,QAAQL,IAAIC,QAAQC,UAAUC,QAAQ;GACzD,IAAID,aAAa,wBAAwBE,eAAeE,KAAAA,GACtD,OAAOT,YAAYC;GAGrB,OAAOM;EACT;EACAG,IAAIN,QAAQC,UAAU;GACpB,OACEG,QAAQE,IAAIN,QAAQC,QAAQ,KAC3BA,aAAa,wBAAwBL,YAAYC,uBAAuBQ,KAAAA;EAE7E;EACAE,QAAQP,QAAQ;GACd,MAAMQ,OAAO,IAAIC,IAAIL,QAAQG,QAAQP,MAAM,CAAC;GAC5C,IAAIJ,YAAYC,uBAAuBQ,KAAAA,GACrCG,KAAKE,IAAI,oBAAoB;GAG/B,OAAOC,MAAMC,KAAKJ,IAAI;EACxB;EACAK,yBAAyBb,QAAQC,UAAU;GACzC,MAAMa,aAAaV,QAAQS,yBAAyBb,QAAQC,QAAQ;GACpE,IAAIa,YACF,OAAOA;GAGT,IAAIb,aAAa,wBAAwBL,YAAYC,uBAAuBQ,KAAAA,GAC1E,OAAO;IACLU,YAAY;IACZC,cAAc;IACdjB,WAAWH,YAAYC;GACzB;EAIJ;CACF,CAAC;AACH;;;;;AAUA,SAAgBqB,MAAMhD,OAAgC;CACpD,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAE3C,MAAM8B,sBAAsB;EAC1B,MAAMC,SAAkC,CAAC;EACzC,MAAMC,cAAcpD;EAEpB,KAAK,MAAMqD,OAAOD,aAChB,IAAIC,QAAQ,YACVF,OAAOE,OAAOD,YAAYC;EAG9B,OAAOF;CACT;CAGA,MAAMG,oBAAoB;EACxB,MAAMC,aAAaL,cAAc;EACjC,IAAID,SAAS;GACX,MAAM,EAAEO,KAAKC,MAAM,GAAGC,sBAAuBT,QAAQ3C,cAAc,CAAC;GAIpE,MAAMqD,SAAS;IACb,GAAGD;IACH,GAAIT,QAAQhC,UAAU,EAAE2C,KAAKX,QAAQhC,QAAQ,IAAI,CAAC;IAClD,GAAGsC;GACL;GACA,IAAII,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAOJ,WAAW1D,SAAS,OAAO;GAAE,GAAG0D;GAAY1D,OAAO;EAAkB,IAAI0D;CAClF;CAEA,cAAA;EAAA,IAAAM,OAAAC,eAAAC,MAAA;EAAAC,OAAAH,MAAAI,WAAkBX,WAAW,GAAA,OAAA,IAAA;EAAAY,OAAAL,YAAK7D,MAAMJ,QAAQ;EAAAuE,mBAAA;EAAA,OAAAN;CAAA,EAAA,CAAA;AAClD;AAIA,SAASQ,uBAA8CC,OAAcE,SAAmB;CACtF,OAAO,IAAI5C,MAAM0C,OAAO,EACtBzC,IAAIC,QAAQC,UAAUC,UAAU;EAC9B,IAAID,aAAa,YAAYA,aAAa,iBACxC,OAAOyC;EAGT,MAAME,QAAQxC,QAAQL,IAAIC,QAAQC,UAAUC,QAAQ;EACpD,OAAO,OAAO0C,UAAU,aAAaA,MAAMC,KAAK7C,MAAM,IAAI4C;CAC5D,EACF,CAAC;AACH;AAEA,SAASE,gCAAgCJ,SAAsB;CAC7D,MAAMK,mBAAmBL;CAIzB,OAAOK,iBAAiBC;CACxB,OAAOD,iBAAiBE;AAC1B;;;;;;AAOA,SAAgBC,MAAMhF,OAAgC;CACpD,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAC3C,IAAI6D;CAEJxH,mBAAmB;EACjBwF,SAAS/B,aAAalB,MAAMmB,EAAE;CAChC,CAAC;CAEDzD,gBAAgB;EACduF,SAAS/B,aAAaiB,KAAAA,CAAS;CACjC,CAAC;CAGD,MAAMmB,oBAAoB;EACxB,IAAIL,SAAS;GAEX,MAAM,EAAEO,KAAKC,MAAM,GAAGyB,sBAAuBjC,QAAQxC,cAAc,CAAC;GAIpE,MAAMkD,SAAS;IAAE,GAAGuB;IAAmB,GAAGlF;GAAM;GAChD,IAAI2D,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAO3D,MAAMH,SAAS,OAAO;GAAE,GAAGG;GAAOH,OAAO;EAAkB,IAAIG;CACxE;CAEArC,cAAc;EACZ,MAAM6G,UAAUS;EAChB,IAAI,CAACT,SACH;EAGF,MAAMW,gBAAgBb,UAAiB;GACrC,MAAMc,UAAU9B,YAAY,CAAC,CAAC+B;GAG9BD,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EACA,MAAMC,iBAAiBpB,UAAiB;GACtC,MAAMc,UAAU9B,YAAY,CAAC,CAACqC;GAG9BP,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EAEAjB,QAAQoB,iBAAiB,SAAST,YAAY;EAC9CX,QAAQoB,iBAAiB,UAAUF,aAAa;EAChDd,gCAAgCJ,OAAO;EACvC9G,gBAAgB;GACd8G,QAAQqB,oBAAoB,SAASV,YAAY;GACjDX,QAAQqB,oBAAoB,UAAUH,aAAa;EACrD,CAAC;CACH,CAAC;CAED,cAAA;EAAA,IAAAI,QAAAhC,eAAAiC,OAAA;EAAAC,KAGUxB,YAAY;GAChBS,eAAeT;GACf,MAAMhB,MAAMxD,MAAMwD;GAClB,IAAI,OAAOA,QAAQ,YACjBA,IAAIgB,OAAO;EAEf,GAACsB,KAAA;EAAA9B,OAAA8B,OAAA7B,WAPGX,WAAW,GAAA,OAAA,KAAA;EAAAa,mBAAA;EAAA,OAAA2B;CAAA,EAAA,CAAA;AAUrB;;;;;;AAYA,SAAgBM,SAASpG,OAAmC;CAC1D,MAAMiD,UAAU3F,WAAW8D,gBAAgB;CAC3C,IAAIiF;CAEJ5I,mBAAmB;EACjBwF,SAAS/B,aAAalB,MAAMmB,EAAE;CAChC,CAAC;CAEDzD,gBAAgB;EACduF,SAAS/B,aAAaiB,KAAAA,CAAS;CACjC,CAAC;CAID,MAAMmB,oBAAoB;EACxB,IAAIL,SAAS;GACX,MAAM,EACJO,KAAKC,MACL6C,MAAMC,OACN,GAAGrB,sBACAjC,QAAQxC,cAAc,CAAC;GAC5B,MAAMkD,SAAS;IAAE,GAAGuB;IAAmB,GAAGlF;GAAM;GAChD,IAAI2D,OAAO9D,SAAS,MAClB8D,OAAO9D,QAAQ;GAEjB,OAAO8D;EACT;EACA,OAAO3D,MAAMH,SAAS,OAAO;GAAE,GAAGG;GAAOH,OAAO;EAAqB,IAAIG;CAC3E;CAEArC,cAAc;EACZ,MAAM6G,UAAU6B;EAChB,IAAI,CAAC7B,SACH;EAGF,MAAMW,gBAAgBb,UAAiB;GACrC,MAAMc,UAAU9B,YAAY,CAAC,CAAC+B;GAG9BD,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EACA,MAAMC,iBAAiBpB,UAAiB;GACtC,MAAMc,UAAU9B,YAAY,CAAC,CAACqC;GAG9BP,UACEf,uBAAuBC,OAAOE,OAAO,CAIvC;GACAI,gCAAgCJ,OAAO;GACvCF,MAAMmB,gBAAgB;EACxB;EAEAjB,QAAQoB,iBAAiB,SAAST,YAAY;EAC9CX,QAAQoB,iBAAiB,UAAUF,aAAa;EAChDd,gCAAgCJ,OAAO;EACvC9G,gBAAgB;GACd8G,QAAQqB,oBAAoB,SAASV,YAAY;GACjDX,QAAQqB,oBAAoB,UAAUH,aAAa;EACrD,CAAC;CACH,CAAC;CAED,cAAA;EAAA,IAAAc,QAAA1C,eAAA2C,OAAA;EAAAT,KAGUxB,YAAY;GAChB6B,kBAAkB7B;GAClB,MAAMhB,MAAMxD,MAAMwD;GAClB,IAAI,OAAOA,QAAQ,YACjBA,IAAIgB,OAAO;EAEf,GAACgC,KAAA;EAAAxC,OAAAwC,OAAAvC,WAPGX,WAAW,GAAA,OAAA,KAAA;EAAAa,mBAAA;EAAA,OAAAqC;CAAA,EAAA,CAAA;AAUrB;;;;;;;;;;;;;;;;;;;AAoBA,SAAgBE,UAAU1G,OAAoC;CAC5D,MAAM0B,cAAcpE,WAAWgB,WAAW;CAC1C,MAAMqI,eAAerJ,WAAW8D,gBAAgB;CAChD,MAAMwF,mBAAmBD,cAAc5F,QAAQf,MAAM6G,QAAQ;CAC7D,MAAMC,mBAAmBvJ,iBAAiC;EACxD,IAAI,CAACoJ,cAAc,OAAO,CAAC;EAC3B,MAAM,EACJrG,YAAYyG,aACZtG,YAAYuG,aACZpG,kBAAkBqG,mBAClBnG,mBAAmBoG,oBACnB9H,WAAW+H,YACXpG,OAAOqG,QACPlG,YAAYmG,aACZ,GAAGC,SACDX;EACJ,OAAOW;CACT,CAAC;CAMD,MAAM,CAACE,OAAOC,aAAa7J,WAFP6D,2BAFlBkF,eAAe1I,aAAW6I,iBAAiB,GAAGF,oBAAoB,CAAC,GAAG5G,KAAK,IAAIA,OAEvB0B,WAEpB4B,GAAa;EACjD;EACA;EACA;EACA;EACA;CAAM,CACP;CAGD,MAAMoE,QAAQvJ,qBAAqB;EACjC,IAAIuG,QAAQ;GACV,OAAO+C,UAAU/C;EACnB;EACA,IAAIiD,eAAe;GACjB,OAAOF,UAAUE;EACnB;EACA,IAAIhC,WAAW;GACb,OAAO8B,UAAU9B;EACnB;CACF,CAAC;CAED,MAAMiC,iBAAiBrK,iBAAiB;EACtC,MAAMsK,QAAiC,CAAC;EACxC,KAAK,MAAMxE,OAAOoE,WAChB,IAAI,CAACpE,IAAIyE,WAAW,OAAO,GACzBD,MAAMxE,OAAQoE,UAAsCpE;EAGxD,OAAOwE;CACT,CAAC;CAED,MAAME,gBAAgBjK,uBAAuB;EAC3C,GAAG8J,eAAe;EAClBlD,OAAOgD,MAAMhD,MAAM;EACnBiB,UAAU+B,MAAMM;CAClB,EAAE;CAEF,MAAM,EAAExI,WAAWC,gBAAgBwI,eAAelK,gBAAgB;CAElE,MAAM,EAAEwB,WAAW2I,eAAelK,YAAY,EAC5C,IAAImB,aAAa;EACf,OAAOsI,UAAUtI;CACnB,EACF,CAAC;CACD,MAAM,CAACgJ,iBAAiBC,sBAAsB5K,aAAiC;CAE/E,MAAM6K,eAAe9K,kBAAwC;EAC3D4B,YAAYsI,UAAUtI,cAAc;EACpCC,WAAW2I,cAAc3I;EACzBC,YAAYoI,UAAUpI,cAAc;EACpCC,YAAYmI,UAAUnI,cAAc;EACpCC,WAAWA,UAAU;EACrBC,WAAWA,UAAU;EACrBC,gBAAgBA,eAAe;CACjC,EAAE;CAEF,MAAMU,cAAcrB,eAClB;EACE,IAAIc,WAAW;GACb,OAAO4H,MAAM5H;EACf;EACAC,OAAO2H,MAAM3H;EACbC,OAAO0H,MAAM1H;EACbwI,kBAAkB;CACpB,GACAD,YACF;CACA,MAAME,oBAA0C;EAC9C,IAAIpJ,aAAa;GACf,OAAOsI,UAAUtI,cAAc;EACjC;EACA,IAAIC,YAAY;GACd,OAAO2I,cAAc3I;EACvB;EACA,IAAIC,aAAa;GACf,OAAOoI,UAAUpI,cAAc;EACjC;EACA,IAAIC,aAAa;GACf,OAAOmI,UAAUnI,cAAc;EACjC;EACA,IAAIC,YAAY;GACd,OAAOA,UAAU;EACnB;EACA,IAAIC,YAAY;GACd,OAAOA,UAAU;EACnB;EACA,IAAIC,iBAAiB;GACnB,OAAOA,eAAe;EACxB;CACF;CAEA,MAAM+I,WAAWjL,iBAAiB;EAChC,MAAMkL,WAAW1J,eAAe0I,WAAW;GAAEiB,QAAQ;GAAMC,QAAQ;EAAM,CAAC;EAC1E,OAAQF,SAAqCtH;EAC7C,OAAOsH;CACT,CAAC;CAED,MAAMG,wBAAwB;EAC5B,MAAM,EAAEpF,KAAKC,MAAM,GAAG6D,SAASY;EAC/B,OAAOZ;CACT;CAIA,MAAMuB,kBAAkBtL,iBAAmC;EACzD,MAAM6B,YAAY2I,cAAc3I;EAChC,MAAM0J,eAAerB,UAAUqB;EAG/B,OAAO;GACL1J;GACA2J,kBAJuB3J,aAAa,OAAO0J,iBAAiB,WAAW,CAACA,YAAY,IAAI,CAAA;GAKxFE,mBAAmB5J,YACf;IAAE,GAAGhB;IAAsB6K,aAAa;IAAMC,OAAO;GAAM,IAC3D9K;EACN;CACF,CAAC;CACD,MAAM+K,oBAA4C;EAChD,IAAIC,aAAa;GACf,OAAOP,gBAAgB;EACzB;EACA,IAAI/H,oBAAoB;GACtB,OAAOiH,cAAcjH;EACvB;CACF;CACA,MAAMuI,eAAsC;EAC1C,IAAI/I,aAAa;GACf,OAAOyH,cAAczH;EACvB;EACA,IAAIG,aAAa;GACf,OAAOxC,aACL8J,cAActH,YACdwH,UACF;EACF;EACA,IAAIrH,mBAAmB;GACrB,OAAOmH,cAAcnH;EACvB;EACA,IAAIE,oBAAoB;GACtB,OAAOiH,cAAcjH;EACvB;EACA,IAAI1B,YAAY;GACd,OAAO2I,cAAc3I;EACvB;EAKA,IAAI6B,UAAU;GACZ,OAAOkH,gBAAgB,KAAMJ,cAActH,WAA+BU;EAC5E;EACAD,WAAWC,IAAwB;GACjCiH,mBAAmBjH,EAAE;EACvB;CACF;CAMA,MAAMmI,sBACJzL,cAAc;EACZ,MAAM+B,WAAW4H,MAAM5H;EACvB,OAAO,OAAOA,aAAa,aAAaA,SAAS2I,iBAAiB,IAAI3I;CACxE,CAAC;CAMH,MAAM2J,YAAY,EAChBxI,OAAO;EACL,IAAIyI,cAAc;GAChB,OAAOzB,cAAcnH;EACvB;EACA,IAAIkI,eAAe;GACjB,OAAOf,cAAcjH;EACvB;CACF,EACF;CACA,MAAM2I,6BAAuBC,gBAC1B1K,UAAQ;EAAC2K,QAAQ,CAAC,CAAC1K,aAAasK,SAAS,CAAC;EAAuC,IAAA3J,WAAA;GAAA,OAAA8J,gBAC/EJ,eAAa,CAAA,CAAA;EAAA;CAAA,CAAA;CAGlB,MAAMM,mBACH;EACC,GAAGpB,SAAS;EACZ,GAAGI,gBAAgB;EACnB/I,OAAOM,YAAYN,MAAM;EACzBC,OAAOK,YAAYL,MAAM;EACzB+G,MAAMW,MAAMX;EACZ,iBAAiBY,UAAUtI,cAAcgD,KAAAA;EACzC,gBAAgB4F,cAAc3I,aAAa+C,KAAAA;EAC3C,iBAAiBsF,UAAUpI,cAAc8C,KAAAA;EACzC,iBAAiBsF,UAAUnI,cAAc6C,KAAAA;EACzC,gBAAgB5C,UAAU,KAAK4C,KAAAA;EAC/B,gBAAgB3C,UAAU,KAAK2C,KAAAA;EAC/B,sBAAsB1C,eAAe,KAAK0C,KAAAA;CAC5C;CACF,MAAM0H,yBACH;EACC,GAAGD,UAAU;EACbhK,UAAQ8J,gBAAGD,sBAAoB,CAAA,CAAA;CACjC;CAEF,OAAAC,gBACGlL,kBAAkBQ,UAAQ;EAAC0F,OAAOyE;EAAiB,IAAAvJ,WAAA;GAAA,OAAA8J,gBACjDtI,iBAAiBpC,UAAQ;IAAC0F,OAAO2E;IAAY,IAAAzJ,WAAA;KAAA,OAC3CkK,WAAA,CAAA,CAAAtC,MAAMzH,MAAM,CAAA,CAAA,IACXyH,MAAMzH,OAAO8J,gBAAgB,GAAGxB,aAAa,CAAC,WAAC;MAAA,IAAA0B,QAAAjG,eAAAkG,OAAA;MAAAhG,OAAA+F,OAAA9F,WAEtC2F,SAAS,GAAA,OAAA,IAAA;MAAA1F,OAAA6F,OAAAL,gBACfD,sBAAoB,CAAA,CAAA,CAAA;MAAAtF,mBAAA;MAAA,OAAA4F;KAAA,EAAA,CAAA;IAExB;GAAA,CAAA;EAAA;CAAA,CAAA;AAIT"}

package/dist/TextField.jsx

@@ -304,7 +304,10 @@ function TextField(props) {
 		}
 	};
 	const domProps = createMemo(() => {
-		const filtered = filterDOMProps(ariaProps, { global: true });
+		const filtered = filterDOMProps(ariaProps, {
+			global: true,
+			events: false
+		});
 		delete filtered.id;
 		return filtered;
 	});