npm - @proyecto-viviana/solidaria-components - Versions diffs - 0.2.9 → 0.3.0 - Mend

@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/README.md +39 -272
package/dist/ActionBar.d.ts +21 -13
package/dist/ActionBar.d.ts.map +1 -1
package/dist/ActionGroup.d.ts +8 -8
package/dist/ActionGroup.d.ts.map +1 -1
package/dist/Alert.d.ts +5 -5
package/dist/Alert.d.ts.map +1 -1
package/dist/Autocomplete.d.ts +5 -5
package/dist/Autocomplete.d.ts.map +1 -1
package/dist/Breadcrumbs.d.ts +18 -7
package/dist/Breadcrumbs.d.ts.map +1 -1
package/dist/Button.d.ts +24 -5
package/dist/Button.d.ts.map +1 -1
package/dist/Calendar.d.ts +38 -7
package/dist/Calendar.d.ts.map +1 -1
package/dist/Checkbox.d.ts +32 -7
package/dist/Checkbox.d.ts.map +1 -1
package/dist/Collection.d.ts +19 -14
package/dist/Collection.d.ts.map +1 -1
package/dist/Color.d.ts +103 -14
package/dist/Color.d.ts.map +1 -1
package/dist/ColorEditor.d.ts +6 -6
package/dist/ColorEditor.d.ts.map +1 -1
package/dist/ComboBox.d.ts +85 -19
package/dist/ComboBox.d.ts.map +1 -1
package/dist/ContextualHelpTrigger.d.ts +2 -2
package/dist/ContextualHelpTrigger.d.ts.map +1 -1
package/dist/DateField.d.ts +8 -6
package/dist/DateField.d.ts.map +1 -1
package/dist/DatePicker.d.ts +53 -22
package/dist/DatePicker.d.ts.map +1 -1
package/dist/DateRangePickerContext.d.ts +30 -0
package/dist/DateRangePickerContext.d.ts.map +1 -0
package/dist/Dialog.d.ts +5 -5
package/dist/Dialog.d.ts.map +1 -1
package/dist/Disclosure.d.ts +23 -5
package/dist/Disclosure.d.ts.map +1 -1
package/dist/DragAndDrop.d.ts +6 -6
package/dist/DragAndDrop.d.ts.map +1 -1
package/dist/DragPreview.d.ts +2 -2
package/dist/DragPreview.d.ts.map +1 -1
package/dist/DropZone.d.ts +4 -4
package/dist/DropZone.d.ts.map +1 -1
package/dist/FieldError.d.ts +9 -5
package/dist/FieldError.d.ts.map +1 -1
package/dist/FileTrigger.d.ts +3 -3
package/dist/FileTrigger.d.ts.map +1 -1
package/dist/Focusable.d.ts +2 -2
package/dist/Focusable.d.ts.map +1 -1
package/dist/Form.d.ts +18 -4
package/dist/Form.d.ts.map +1 -1
package/dist/GridList.d.ts +32 -12
package/dist/GridList.d.ts.map +1 -1
package/dist/HiddenDateInput.d.ts +26 -0
package/dist/HiddenDateInput.d.ts.map +1 -0
package/dist/HiddenTimeInput.d.ts +25 -0
package/dist/HiddenTimeInput.d.ts.map +1 -0
package/dist/Icon.d.ts +5 -5
package/dist/Icon.d.ts.map +1 -1
package/dist/Keyboard.d.ts +1 -1
package/dist/Landmark.d.ts +3 -3
package/dist/Landmark.d.ts.map +1 -1
package/dist/Link.d.ts +10 -4
package/dist/Link.d.ts.map +1 -1
package/dist/ListBox.d.ts +32 -12
package/dist/ListBox.d.ts.map +1 -1
package/dist/ListDropTargetDelegate.d.ts +6 -6
package/dist/ListDropTargetDelegate.d.ts.map +1 -1
package/dist/Menu.d.ts +65 -14
package/dist/Menu.d.ts.map +1 -1
package/dist/Meter.d.ts +3 -3
package/dist/Meter.d.ts.map +1 -1
package/dist/Modal.d.ts +5 -5
package/dist/Modal.d.ts.map +1 -1
package/dist/NumberField.d.ts +8 -12
package/dist/NumberField.d.ts.map +1 -1
package/dist/Popover.d.ts +28 -5
package/dist/Popover.d.ts.map +1 -1
package/dist/Pressable.d.ts +2 -2
package/dist/Pressable.d.ts.map +1 -1
package/dist/ProgressBar.d.ts +5 -3
package/dist/ProgressBar.d.ts.map +1 -1
package/dist/RadioGroup.d.ts +43 -9
package/dist/RadioGroup.d.ts.map +1 -1
package/dist/RangeCalendar.d.ts +34 -7
package/dist/RangeCalendar.d.ts.map +1 -1
package/dist/RouterProvider.d.ts +2 -2
package/dist/RouterProvider.d.ts.map +1 -1
package/dist/SearchField.d.ts +23 -20
package/dist/SearchField.d.ts.map +1 -1
package/dist/Select.d.ts +41 -11
package/dist/Select.d.ts.map +1 -1
package/dist/SelectionIndicator.d.ts +3 -3
package/dist/SelectionIndicator.d.ts.map +1 -1
package/dist/Separator.d.ts +9 -3
package/dist/Separator.d.ts.map +1 -1
package/dist/SharedElementTransition.d.ts +6 -4
package/dist/SharedElementTransition.d.ts.map +1 -1
package/dist/Slider.d.ts +12 -8
package/dist/Slider.d.ts.map +1 -1
package/dist/StepList.d.ts +90 -0
package/dist/StepList.d.ts.map +1 -0
package/dist/Switch.d.ts +11 -5
package/dist/Switch.d.ts.map +1 -1
package/dist/Table.d.ts +187 -23
package/dist/Table.d.ts.map +1 -1
package/dist/Tabs.d.ts +45 -9
package/dist/Tabs.d.ts.map +1 -1
package/dist/TagGroup.d.ts +12 -10
package/dist/TagGroup.d.ts.map +1 -1
package/dist/Text.d.ts +2 -2
package/dist/TextField.d.ts +15 -11
package/dist/TextField.d.ts.map +1 -1
package/dist/TimeField.d.ts +6 -6
package/dist/TimeField.d.ts.map +1 -1
package/dist/Toast.d.ts +29 -14
package/dist/Toast.d.ts.map +1 -1
package/dist/ToggleButton.d.ts +11 -5
package/dist/ToggleButton.d.ts.map +1 -1
package/dist/ToggleButtonGroup.d.ts +7 -7
package/dist/ToggleButtonGroup.d.ts.map +1 -1
package/dist/Toolbar.d.ts +7 -3
package/dist/Toolbar.d.ts.map +1 -1
package/dist/Tooltip.d.ts +50 -8
package/dist/Tooltip.d.ts.map +1 -1
package/dist/Tree.d.ts +66 -17
package/dist/Tree.d.ts.map +1 -1
package/dist/Virtualizer.d.ts +12 -12
package/dist/Virtualizer.d.ts.map +1 -1
package/dist/VirtualizerLayouts.d.ts +2 -2
package/dist/VirtualizerLayouts.d.ts.map +1 -1
package/dist/VisuallyHidden.d.ts +1 -1
package/dist/VisuallyHidden.d.ts.map +1 -1
package/dist/contexts.d.ts +5 -1
package/dist/contexts.d.ts.map +1 -1
package/dist/index.d.ts +73 -71
package/dist/index.d.ts.map +1 -1
package/dist/index.js +23247 -18564
package/dist/index.js.map +1 -1
package/dist/index.jsx +18110 -0
package/dist/index.jsx.map +1 -0
package/dist/useDragAndDrop.d.ts +13 -13
package/dist/useDragAndDrop.d.ts.map +1 -1
package/dist/utils.d.ts +2 -2
package/dist/utils.d.ts.map +1 -1
package/dist/virtualizer/Layout.d.ts +1 -1
package/dist/virtualizer/Layout.d.ts.map +1 -1
package/package.json +31 -32
package/src/ActionBar.tsx +75 -72
package/src/ActionGroup.tsx +53 -61
package/src/Alert.tsx +17 -42
package/src/Autocomplete.tsx +39 -44
package/src/Breadcrumbs.tsx +149 -80
package/src/Button.tsx +267 -70
package/src/Calendar.tsx +218 -138
package/src/Checkbox.tsx +413 -121
package/src/Collection.tsx +67 -58
package/src/Color.tsx +803 -380
package/src/ColorEditor.tsx +131 -149
package/src/ComboBox.tsx +414 -249
package/src/ContextualHelpTrigger.tsx +86 -74
package/src/DateField.tsx +185 -91
package/src/DatePicker.tsx +524 -213
package/src/DateRangePickerContext.tsx +44 -0
package/src/Dialog.tsx +156 -118
package/src/Disclosure.tsx +127 -80
package/src/DragAndDrop.tsx +60 -54
package/src/DragPreview.tsx +13 -11
package/src/DropZone.tsx +42 -22
package/src/FieldError.tsx +45 -23
package/src/FileTrigger.tsx +19 -19
package/src/Focusable.tsx +21 -24
package/src/Form.tsx +71 -16
package/src/GridList.tsx +273 -197
package/src/HiddenDateInput.tsx +153 -0
package/src/HiddenTimeInput.tsx +133 -0
package/src/Icon.tsx +22 -43
package/src/Keyboard.tsx +3 -3
package/src/Landmark.tsx +37 -63
package/src/Link.tsx +125 -75
package/src/ListBox.tsx +332 -233
package/src/ListDropTargetDelegate.ts +81 -80
package/src/Menu.tsx +1023 -274
package/src/Meter.tsx +38 -56
package/src/Modal.tsx +243 -175
package/src/NumberField.tsx +139 -143
package/src/Popover.tsx +386 -233
package/src/Pressable.tsx +21 -21
package/src/ProgressBar.tsx +48 -57
package/src/RadioGroup.tsx +524 -122
package/src/RangeCalendar.tsx +157 -90
package/src/RouterProvider.tsx +30 -47
package/src/SearchField.tsx +362 -143
package/src/Select.tsx +656 -233
package/src/SelectionIndicator.tsx +18 -15
package/src/Separator.tsx +47 -49
package/src/SharedElementTransition.tsx +103 -97
package/src/Slider.tsx +138 -98
package/src/StepList.tsx +272 -0
package/src/Switch.tsx +93 -46
package/src/Table.tsx +1308 -342
package/src/Tabs.tsx +324 -103
package/src/TagGroup.tsx +139 -126
package/src/Text.tsx +3 -3
package/src/TextField.tsx +389 -79
package/src/TimeField.tsx +136 -76
package/src/Toast.tsx +209 -157
package/src/ToggleButton.tsx +47 -37
package/src/ToggleButtonGroup.tsx +39 -34
package/src/Toolbar.tsx +54 -69
package/src/Tooltip.tsx +387 -119
package/src/Tree.tsx +651 -368
package/src/Virtualizer.tsx +208 -180
package/src/VirtualizerLayouts.ts +45 -30
package/src/VisuallyHidden.tsx +19 -19
package/src/contexts.ts +29 -37
package/src/index.ts +110 -195
package/src/useDragAndDrop.ts +87 -71
package/src/utils.tsx +40 -55
package/src/virtualizer/Layout.ts +14 -22
package/dist/index.ssr.js +0 -16996
package/dist/index.ssr.js.map +0 -1

package/src/TagGroup.tsx CHANGED Viewed

@@ -17,19 +17,15 @@ import {
   useContext,
   For,
   Show,
-} from 'solid-js';
-import {
-  createTagGroup,
-  createTag,
-  type AriaTagGroupProps,
-} from '@proyecto-viviana/solidaria';
+} from "solid-js";
+import { createTagGroup, createTag, type AriaTagGroupProps } from "@proyecto-viviana/solidaria";
 import {
   createListState,
   type ListState,
   type Key,
   type SelectionMode,
   type SelectionBehavior,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -38,16 +34,12 @@ import {
   useRenderProps,
   filterDOMProps,
   dataAttr,
-} from './utils';
-import { SharedElementTransition } from './SharedElementTransition';
+} from "./utils";
+import { SharedElementTransition } from "./SharedElementTransition";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
-} from './SelectionIndicator';
-// ============================================
-// TYPES
-// ============================================
+} from "./SelectionIndicator";
 export interface TagGroupRenderProps {
   /** Whether the tag group is disabled. */
@@ -57,9 +49,10 @@ export interface TagGroupRenderProps {
 }
 export interface TagGroupProps
-  extends Omit<AriaTagGroupProps, 'id'>,
+  extends
+    Omit<AriaTagGroupProps, "id">,
     SlotProps,
-    Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -75,7 +68,10 @@ export interface TagListRenderProps {
   isFocused: boolean;
 }
-export interface TagListProps<T> extends SlotProps, Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children' | 'onSelectionChange'> {
+export interface TagListProps<T>
+  extends
+    SlotProps,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children" | "onSelectionChange"> {
   /** The items to display in the tag list. */
   items: T[];
   /** Function to render each item. */
@@ -95,7 +91,7 @@ export interface TagListProps<T> extends SlotProps, Omit<JSX.HTMLAttributes<HTML
   /** The default selected keys (uncontrolled). */
   defaultSelectedKeys?: Iterable<Key>;
   /** Handler called when selection changes. */
-  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** Keys that are disabled. */
   disabledKeys?: Iterable<Key>;
   /** Function to get a unique key from an item. */
@@ -103,11 +99,11 @@ export interface TagListProps<T> extends SlotProps, Omit<JSX.HTMLAttributes<HTML
   /** Accessibility label. */
   label?: string;
   /** Custom aria-label. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Reference to external label element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Reference to description element. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the tag list is disabled. */
   isDisabled?: boolean;
   /** Handler called when tags are removed. */
@@ -144,12 +140,10 @@ export interface TagProps extends SlotProps {
   class?: ClassNameOrFunction<TagRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<TagRenderProps>;
+  /** Handler called when the tag is activated. */
+  onAction?: (key: Key) => void;
 }
-// ============================================
-// CONTEXT
-// ============================================
 interface TagGroupContextValue {
   state: ListState;
   onRemove?: (keys: Set<Key>) => void;
@@ -169,10 +163,6 @@ export function useTagGroupContext(): TagGroupContextValue | null {
   return useContext(TagGroupContext);
 }
-// ============================================
-// TAG GROUP COMPONENT
-// ============================================
 /**
  * A tag group is a focusable list of labels, categories, keywords, filters, or other items,
  * with support for keyboard navigation, selection, and removal.
@@ -187,19 +177,14 @@ export function useTagGroupContext(): TagGroupContextValue | null {
  * ```
  */
 export function TagGroup(props: TagGroupProps): JSX.Element {
-  const [local, domProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'children',
-  ]);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
   // We need TagList to provide the state, so TagGroup just provides context
   return (
     <div
       {...domProps}
-      class={typeof local.class === 'string' ? local.class : 'solidaria-TagGroup'}
-      style={typeof local.style === 'object' ? local.style : undefined}
+      class={typeof local.class === "string" ? local.class : "solidaria-TagGroup"}
+      style={typeof local.style === "object" ? local.style : undefined}
       slot={local.slot}
     >
       {props.children}
@@ -207,34 +192,30 @@ export function TagGroup(props: TagGroupProps): JSX.Element {
   );
 }
-// ============================================
-// TAG LIST COMPONENT
-// ============================================
 /**
  * TagList contains the list of tags within a TagGroup.
  */
 export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T>): JSX.Element {
   const [local, domProps] = splitProps(props, [
-    'items',
-    'class',
-    'style',
-    'slot',
-    'renderEmptyState',
-    'children',
-    'selectionMode',
-    'selectionBehavior',
-    'selectedKeys',
-    'defaultSelectedKeys',
-    'onSelectionChange',
-    'disabledKeys',
-    'getKey',
-    'label',
-    'aria-label',
-    'aria-labelledby',
-    'aria-describedby',
-    'isDisabled',
-    'onRemove',
+    "items",
+    "class",
+    "style",
+    "slot",
+    "renderEmptyState",
+    "children",
+    "selectionMode",
+    "selectionBehavior",
+    "selectedKeys",
+    "defaultSelectedKeys",
+    "onSelectionChange",
+    "disabledKeys",
+    "getKey",
+    "label",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "isDisabled",
+    "onRemove",
   ]);
   // Create a ref for the grid
@@ -248,55 +229,78 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
     return String(item);
   };
-  // Create list state
   const state = createListState({
-    get items() { return local.items; },
+    get items() {
+      return local.items;
+    },
     getKey,
-    get selectionMode() { return local.selectionMode ?? 'none'; },
-    get selectionBehavior() { return local.selectionBehavior ?? 'toggle'; },
-    get selectedKeys() { return local.selectedKeys; },
-    get defaultSelectedKeys() { return local.defaultSelectedKeys; },
-    get onSelectionChange() { return local.onSelectionChange; },
-    get disabledKeys() { return local.disabledKeys; },
+    get selectionMode() {
+      return local.selectionMode ?? "none";
+    },
+    get selectionBehavior() {
+      return local.selectionBehavior ?? "toggle";
+    },
+    get selectedKeys() {
+      return local.selectedKeys;
+    },
+    get defaultSelectedKeys() {
+      return local.defaultSelectedKeys;
+    },
+    get onSelectionChange() {
+      return local.onSelectionChange;
+    },
+    get disabledKeys() {
+      return local.disabledKeys;
+    },
   });
   // Create tag group accessibility props
   const tagGroupAria = createTagGroup(
     {
-      get 'aria-label'() { return local['aria-label'] ?? (!local['aria-labelledby'] ? local.label : undefined); },
-      get 'aria-labelledby'() { return local['aria-labelledby']; },
-      get 'aria-describedby'() { return local['aria-describedby']; },
-      get isDisabled() { return local.isDisabled; },
-      get onRemove() { return local.onRemove; },
+      get "aria-label"() {
+        return local["aria-label"] ?? (!local["aria-labelledby"] ? local.label : undefined);
+      },
+      get "aria-labelledby"() {
+        return local["aria-labelledby"];
+      },
+      get "aria-describedby"() {
+        return local["aria-describedby"];
+      },
+      get isDisabled() {
+        return local.isDisabled;
+      },
+      get onRemove() {
+        return local.onRemove;
+      },
     },
     state,
-    gridRef
+    gridRef,
   );
-  // Track focus
   const [isFocused, setIsFocused] = createSignal(false);
-  // Render props values
   const renderValues = createMemo<TagListRenderProps>(() => ({
     isEmpty: local.items.length === 0,
     isFocused: isFocused(),
   }));
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-TagList',
+      defaultClassName: "solidaria-TagList",
     },
-    renderValues
+    renderValues,
   );
-  // Context value
   const contextValue: TagGroupContextValue = {
     state,
-    get onRemove() { return local.onRemove; },
-    get isDisabled() { return local.isDisabled; },
+    get onRemove() {
+      return local.onRemove;
+    },
+    get isDisabled() {
+      return local.isDisabled;
+    },
   };
   return (
@@ -325,13 +329,8 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
           data-focused={dataAttr(isFocused())}
         >
           <SharedElementTransition>
-            <Show
-              when={local.items.length > 0}
-              fallback={local.renderEmptyState?.()}
-            >
-              <For each={local.items}>
-                {(item) => props.children(item)}
-              </For>
+            <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>
+              <For each={local.items}>{(item) => props.children(item)}</For>
             </Show>
           </SharedElementTransition>
         </div>
@@ -340,21 +339,18 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   );
 }
-// ============================================
-// TAG COMPONENT
-// ============================================
 /**
  * A Tag is an individual item within a TagList.
  */
 export function Tag(props: TagProps): JSX.Element {
   const [local, rest] = splitProps(props, [
-    'id',
-    'class',
-    'style',
-    'slot',
-    'isDisabled',
-    'textValue',
+    "id",
+    "class",
+    "style",
+    "slot",
+    "isDisabled",
+    "textValue",
+    "onAction",
   ]);
   const state = useContext(TagListStateContext);
@@ -366,17 +362,23 @@ export function Tag(props: TagProps): JSX.Element {
   // Create tag accessibility props
   const tagAria = createTag(
     {
-      get key() { return local.id; },
-      get isDisabled() { return local.isDisabled || groupContext?.isDisabled; },
-      get textValue() { return local.textValue; },
+      get key() {
+        return local.id;
+      },
+      get isDisabled() {
+        return local.isDisabled || groupContext?.isDisabled;
+      },
+      get textValue() {
+        return local.textValue;
+      },
     },
     state!,
-    tagRef
+    tagRef,
   );
   const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {
     const raw = tagAria.removeButtonProps;
-    const rawHandler = typeof raw.onPress === 'function' ? (raw.onPress as () => void) : undefined;
+    const rawHandler = typeof raw.onPress === "function" ? (raw.onPress as () => void) : undefined;
     return {
       ...raw,
       onPress: () => {
@@ -389,41 +391,42 @@ export function Tag(props: TagProps): JSX.Element {
     };
   });
-  // Render props values
   const renderValues = createMemo<TagRenderProps>(() => ({
     isSelected: tagAria.isSelected,
     isDisabled: tagAria.isDisabled,
     isFocused: tagAria.isFocused,
     isPressed: tagAria.isPressed,
     allowsRemoving: tagAria.allowsRemoving,
-    selectionMode: state?.selectionMode() ?? 'none',
+    selectionMode: state?.selectionMode() ?? "none",
     removeButtonProps: normalizedRemoveButtonProps(),
   }));
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Tag',
+      defaultClassName: "solidaria-Tag",
     },
-    renderValues
+    renderValues,
   );
   const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
     isSelected: () => tagAria.isSelected,
   }));
-  // Filter DOM props
   const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <TagContext.Provider
         value={{
-          get removeButtonProps() { return normalizedRemoveButtonProps(); },
-          get allowsRemoving() { return tagAria.allowsRemoving; },
+          get removeButtonProps() {
+            return normalizedRemoveButtonProps();
+          },
+          get allowsRemoving() {
+            return tagAria.allowsRemoving;
+          },
         }}
       >
         <div
@@ -432,13 +435,23 @@ export function Tag(props: TagProps): JSX.Element {
           {...tagAria.rowProps}
           class={renderProps.class()}
           style={renderProps.style()}
+          onClick={(event) => {
+            const rowClick = tagAria.rowProps.onClick;
+            if (typeof rowClick === "function") {
+              (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);
+            }
+            if (!tagAria.isDisabled && !(event.target as Element | null)?.closest("button")) {
+              local.onAction?.(local.id);
+            }
+          }}
           data-selected={dataAttr(tagAria.isSelected)}
           data-disabled={dataAttr(tagAria.isDisabled)}
           data-focused={dataAttr(tagAria.isFocused)}
           data-pressed={dataAttr(tagAria.isPressed)}
           data-allows-removing={dataAttr(tagAria.allowsRemoving)}
         >
-          <div {...tagAria.gridCellProps} style={{ display: 'contents' }}>
+          <div {...tagAria.gridCellProps} style={{ display: "contents" }}>
             {renderProps.renderChildren()}
           </div>
         </div>
@@ -447,10 +460,6 @@ export function Tag(props: TagProps): JSX.Element {
   );
 }
-// ============================================
-// TAG REMOVE BUTTON COMPONENT
-// ============================================
 export interface TagRemoveButtonProps {
   /** The children of the button (usually an X icon). */
   children?: JSX.Element;
@@ -471,36 +480,40 @@ export function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {
   const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};
   const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);
   const rawId = getRemoveButtonProps().id;
-  const rawAriaLabel = getRemoveButtonProps()['aria-label'];
-  const rawAriaLabelledBy = getRemoveButtonProps()['aria-labelledby'];
-  const buttonId: string | undefined = typeof rawId === 'string' ? rawId : undefined;
-  const ariaLabel: string = typeof rawAriaLabel === 'string' ? rawAriaLabel : 'Remove';
-  const ariaLabelledBy: string | undefined = typeof rawAriaLabelledBy === 'string' ? rawAriaLabelledBy : undefined;
+  const rawAriaLabel = getRemoveButtonProps()["aria-label"];
+  const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
+  const buttonId: string | undefined = typeof rawId === "string" ? rawId : undefined;
+  const ariaLabel: string = typeof rawAriaLabel === "string" ? rawAriaLabel : "Remove";
+  const ariaLabelledBy: string | undefined =
+    typeof rawAriaLabelledBy === "string" ? rawAriaLabelledBy : undefined;
   const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
     event.stopPropagation();
     const handler = getRemoveButtonProps().onPress;
-    if (typeof handler === 'function' && !getIsDisabled()) {
+    if (typeof handler === "function" && !getIsDisabled()) {
       (handler as () => void)();
     }
   };
+  const stopRowPress: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {
+    event.stopPropagation();
+  };
   return (
     <button
       type="button"
-      class={props.class ?? 'solidaria-TagRemoveButton'}
+      class={props.class ?? "solidaria-TagRemoveButton"}
       style={props.style}
       id={buttonId}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       disabled={getIsDisabled()}
       data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}
+      onPointerDown={stopRowPress}
       onClick={handleClick}
     >
-      {props.children ?? '×'}
+      {props.children ?? "×"}
     </button>
   );
 }
-// Re-export types
 export type { Key, SelectionMode, SelectionBehavior };

package/src/Text.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
-import { type JSX, createContext } from 'solid-js';
-import type { SlotProps } from './utils';
+import { type JSX, createContext } from "solid-js";
+import type { SlotProps } from "./utils";
 export interface TextProps extends SlotProps {
   children?: JSX.Element;
@@ -11,7 +11,7 @@ export const TextContext = createContext<null>(null);
 export function Text(props: TextProps): JSX.Element {
   return (
-    <span class={props.class ?? 'solidaria-Text'} style={props.style}>
+    <span class={props.class ?? "solidaria-Text"} style={props.style}>
       {props.children}
     </span>
   );