@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/TagGroup.tsx

@@ -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,11 +34,12 @@ import {
   useRenderProps,
   filterDOMProps,
   dataAttr,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
+import { SharedElementTransition } from "./SharedElementTransition";
+import {
+  SelectionIndicatorContext,
+  type SelectionIndicatorContextValue,
+} from "./SelectionIndicator";
 
 export interface TagGroupRenderProps {
   /** Whether the tag group is disabled. */
@@ -52,8 +49,10 @@ export interface TagGroupRenderProps {
 }
 
 export interface TagGroupProps
-  extends Omit<AriaTagGroupProps, 'id'>,
-    SlotProps {
+  extends
+    Omit<AriaTagGroupProps, "id">,
+    SlotProps,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -69,7 +68,10 @@ export interface TagListRenderProps {
   isFocused: boolean;
 }
 
-export interface TagListProps<T> extends SlotProps {
+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. */
@@ -89,7 +91,7 @@ export interface TagListProps<T> extends SlotProps {
   /** 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. */
@@ -97,11 +99,11 @@ export interface TagListProps<T> extends SlotProps {
   /** 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. */
@@ -121,6 +123,8 @@ export interface TagRenderProps {
   allowsRemoving: boolean;
   /** The selection mode. */
   selectionMode: SelectionMode;
+  /** Props for the remove button when removal is allowed. */
+  removeButtonProps: Record<string, unknown>;
 }
 
 export interface TagProps extends SlotProps {
@@ -136,28 +140,29 @@ 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;
+  isDisabled?: boolean;
+}
+
+interface TagContextValue {
+  removeButtonProps: Record<string, unknown>;
+  allowsRemoving: boolean;
 }
 
 export const TagGroupContext = createContext<TagGroupContextValue | null>(null);
 export const TagListStateContext = createContext<ListState | null>(null);
+export const TagContext = createContext<TagContextValue | null>(null);
 
 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.
@@ -172,17 +177,14 @@ export function useTagGroupContext(): TagGroupContextValue | null {
  * ```
  */
 export function TagGroup(props: TagGroupProps): JSX.Element {
-  const [local] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-  ]);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   // We need TagList to provide the state, so TagGroup just provides context
   return (
     <div
-      class={typeof local.class === 'string' ? local.class : 'solidaria-TagGroup'}
-      style={typeof local.style === 'object' ? local.style : undefined}
+      {...domProps}
+      class={typeof local.class === "string" ? local.class : "solidaria-TagGroup"}
+      style={typeof local.style === "object" ? local.style : undefined}
       slot={local.slot}
     >
       {props.children}
@@ -190,33 +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] = splitProps(props, [
-    'items',
-    'class',
-    'style',
-    'slot',
-    'renderEmptyState',
-    'selectionMode',
-    'selectionBehavior',
-    'selectedKeys',
-    'defaultSelectedKeys',
-    'onSelectionChange',
-    'disabledKeys',
-    'getKey',
-    'label',
-    'aria-label',
-    'aria-labelledby',
-    'aria-describedby',
-    'isDisabled',
-    'onRemove',
+  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",
   ]);
 
   // Create a ref for the grid
@@ -230,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 label() { return local.label; },
-      get 'aria-label'() { return local['aria-label']; },
-      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 onRemove() {
+      return local.onRemove;
+    },
+    get isDisabled() {
+      return local.isDisabled;
+    },
   };
 
   return (
@@ -286,46 +308,53 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
       <TagListStateContext.Provider value={state}>
         <div
           ref={setGridRef}
+          {...domProps}
           {...tagGroupAria.gridProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
+          onFocus={() => {
+            setIsFocused(true);
+            state.setFocused(true);
+          }}
+          onBlur={(e) => {
+            const nextTarget = e.relatedTarget as Node | null;
+            if (nextTarget && e.currentTarget.contains(nextTarget)) {
+              return;
+            }
+
+            setIsFocused(false);
+            state.setFocused(false);
+          }}
           data-empty={dataAttr(local.items.length === 0)}
           data-focused={dataAttr(isFocused())}
         >
-          <Show
-            when={local.items.length > 0}
-            fallback={local.renderEmptyState?.()}
-          >
-            <For each={local.items}>
-              {(item) => props.children(item)}
-            </For>
-          </Show>
+          <SharedElementTransition>
+            <Show when={local.items.length > 0} fallback={local.renderEmptyState?.()}>
+              <For each={local.items}>{(item) => props.children(item)}</For>
+            </Show>
+          </SharedElementTransition>
         </div>
       </TagListStateContext.Provider>
     </TagGroupContext.Provider>
   );
 }
 
-// ============================================
-// 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);
+  const groupContext = useContext(TagGroupContext);
 
   // Create a ref for the tag
   const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);
@@ -333,62 +362,104 @@ export function Tag(props: TagProps): JSX.Element {
   // Create tag accessibility props
   const tagAria = createTag(
     {
-      get key() { return local.id; },
-      get isDisabled() { return local.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,
   );
 
-  // Render props values
+  const normalizedRemoveButtonProps = createMemo<Record<string, unknown>>(() => {
+    const raw = tagAria.removeButtonProps;
+    const rawHandler = typeof raw.onPress === "function" ? (raw.onPress as () => void) : undefined;
+    return {
+      ...raw,
+      onPress: () => {
+        if (!tagAria.isDisabled && groupContext?.onRemove) {
+          groupContext.onRemove(new Set([local.id]));
+          return;
+        }
+        rawHandler?.();
+      },
+    };
+  });
+
   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,
   );
 
-  // Filter DOM props
+  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
+    isSelected: () => tagAria.isSelected,
+  }));
+
   const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 
   return (
-    <div
-      ref={setTagRef}
-      {...domProps()}
-      {...tagAria.rowProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-selected={dataAttr(tagAria.isSelected)}
-      data-disabled={dataAttr(tagAria.isDisabled)}
-      data-focused={dataAttr(tagAria.isFocused)}
-      data-pressed={dataAttr(tagAria.isPressed)}
-      data-allows-removing={dataAttr(tagAria.allowsRemoving)}
-    >
-      <div {...tagAria.gridCellProps} style={{ display: 'contents' }}>
-        {renderProps.renderChildren()}
-      </div>
-    </div>
+    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <TagContext.Provider
+        value={{
+          get removeButtonProps() {
+            return normalizedRemoveButtonProps();
+          },
+          get allowsRemoving() {
+            return tagAria.allowsRemoving;
+          },
+        }}
+      >
+        <div
+          ref={setTagRef}
+          {...domProps()}
+          {...tagAria.rowProps}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          onClick={(event) => {
+            const rowClick = tagAria.rowProps.onClick;
+            if (typeof rowClick === "function") {
+              (rowClick 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" }}>
+            {renderProps.renderChildren()}
+          </div>
+        </div>
+      </TagContext.Provider>
+    </SelectionIndicatorContext.Provider>
   );
 }
 
-// ============================================
-// TAG REMOVE BUTTON COMPONENT
-// ============================================
-
 export interface TagRemoveButtonProps {
   /** The children of the button (usually an X icon). */
   children?: JSX.Element;
@@ -396,6 +467,8 @@ export interface TagRemoveButtonProps {
   class?: string;
   /** The inline style for the element. */
   style?: JSX.CSSProperties;
+  /** Explicit button props from Tag render props. */
+  buttonProps?: Record<string, unknown>;
 }
 
 /**
@@ -403,19 +476,44 @@ export interface TagRemoveButtonProps {
  * It should be placed inside a Tag component.
  */
 export function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {
-  // This is a simplified version - in a full implementation,
-  // we'd get the remove button props from the Tag context
+  const tagContext = useContext(TagContext);
+  const getRemoveButtonProps = () => props.buttonProps ?? tagContext?.removeButtonProps ?? {};
+  const getIsDisabled = () => Boolean(getRemoveButtonProps().isDisabled);
+  const rawId = getRemoveButtonProps().id;
+  const rawAriaLabel = getRemoveButtonProps()["aria-label"];
+  const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
+  const buttonId: 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()) {
+      (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}
-      aria-label="Remove"
+      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

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