@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/Tabs.tsx

@@ -6,6 +6,7 @@
  */
 
 import {
+  type Accessor,
   type JSX,
   createContext,
   createMemo,
@@ -39,6 +40,19 @@ import {
   useRenderProps,
   filterDOMProps,
 } from './utils';
+import {
+  SelectionIndicator,
+  SelectionIndicatorContext,
+  type SelectionIndicatorContextValue,
+} from './SelectionIndicator';
+import { SharedElementTransition } from './SharedElementTransition';
+
+export {
+  SelectionIndicator,
+  SelectionIndicatorContext,
+  type SelectionIndicatorProps,
+  type SelectionIndicatorRenderProps,
+} from './SelectionIndicator';
 
 // ============================================
 // TYPES
@@ -154,7 +168,7 @@ export interface TabPanelProps extends AriaTabPanelProps, SlotProps {
 
 interface TabsContextValue<T> {
   state: TabListState<T>;
-  items: T[];
+  items: Accessor<T[]>;
 }
 
 export const TabsContext = createContext<TabsContextValue<unknown> | null>(null);
@@ -232,7 +246,7 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
   const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
 
   return (
-    <TabsContext.Provider value={{ state, items: stateProps.items ?? [] }}>
+    <TabsContext.Provider value={{ state, items: () => stateProps.items ?? [] }}>
       <TabsStateContext.Provider value={state}>
         <div
           {...domProps()}
@@ -286,7 +300,7 @@ function TabListInner<T>(props: {
   children?: (item: T) => JSX.Element;
 }): JSX.Element {
   const state = props.context.state as TabListState<T>;
-  const items = props.context.items as T[];
+  const items = props.context.items as Accessor<T[]>;
 
   // Create tab list aria props
   const { tabListProps } = createTabList<T>(props.ariaProps as AriaTabListProps, state);
@@ -314,14 +328,20 @@ function TabListInner<T>(props: {
 
   // Helper to safely call event handlers that may be bound tuples
   const callHandler = <E extends Event>(
-    handler: ((e: E) => void) | [object, (e: E) => void] | undefined,
+    handler: JSX.EventHandlerUnion<HTMLElement, E> | undefined,
     event: E
   ) => {
     if (!handler) return;
     if (Array.isArray(handler)) {
       handler[1].call(handler[0], event);
-    } else {
-      handler(event);
+      return;
+    }
+    if (typeof handler === 'function') {
+      (handler as (evt: E) => void)(event);
+      return;
+    }
+    if (typeof handler === 'object' && 'handleEvent' in handler && typeof handler.handleEvent === 'function') {
+      (handler.handleEvent as (evt: E) => void)(event);
     }
   };
 
@@ -332,12 +352,12 @@ function TabListInner<T>(props: {
 
   const handleFocus = (e: FocusEvent) => {
     tabListProps.onFocus(e);
-    callHandler(focusProps.onFocus as any, e);
+    callHandler(focusProps.onFocus, e);
   };
 
   const handleBlur = (e: FocusEvent) => {
     tabListProps.onBlur(e);
-    callHandler(focusProps.onBlur as any, e);
+    callHandler(focusProps.onBlur, e);
   };
 
   return (
@@ -357,7 +377,9 @@ function TabListInner<T>(props: {
       data-orientation={state.orientation()}
       data-disabled={state.isDisabled() || undefined}
     >
-      <For each={items}>{(item) => props.children?.(item)}</For>
+      <SharedElementTransition>
+        <For each={items()}>{(item) => props.children?.(item)}</For>
+      </SharedElementTransition>
     </div>
   );
 }
@@ -400,6 +422,8 @@ function TabInner(props: {
   ariaProps: Omit<TabProps, 'children' | 'class' | 'style' | 'slot' | 'id'>;
   children?: RenderChildren<TabRenderProps>;
 }): JSX.Element {
+  let tabRef: HTMLDivElement | undefined;
+
   // Create tab aria props
   const tabAria = createTab<unknown>(
     {
@@ -411,7 +435,8 @@ function TabInner(props: {
         return props.ariaProps['aria-label'];
       },
     },
-    props.state
+    props.state,
+    () => tabRef ?? null
   );
 
   // Create hover
@@ -442,32 +467,39 @@ function TabInner(props: {
     renderValues
   );
 
+  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
+    isSelected: tabAria.isSelected,
+  }));
+
   return (
-    <div
-      id={tabAria.tabProps.id}
-      role={tabAria.tabProps.role}
-      aria-selected={tabAria.isSelected()}
-      aria-disabled={tabAria.isDisabled() || undefined}
-      aria-controls={tabAria.isSelected() ? tabAria.tabProps['aria-controls'] : undefined}
-      aria-label={tabAria.tabProps['aria-label']}
-      tabIndex={tabAria.isSelected() && !tabAria.isDisabled() ? 0 : -1}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      onKeyDown={tabAria.tabProps.onKeyDown}
-      onMouseDown={tabAria.tabProps.onMouseDown}
-      onPointerDown={tabAria.tabProps.onPointerDown}
-      onClick={tabAria.tabProps.onClick}
-      onFocus={tabAria.tabProps.onFocus}
-      {...hoverProps}
-      data-selected={tabAria.isSelected() || undefined}
-      data-focused={tabAria.isFocused() || undefined}
-      data-focus-visible={tabAria.isFocusVisible() || undefined}
-      data-pressed={tabAria.isPressed() || undefined}
-      data-hovered={isHovered() || undefined}
-      data-disabled={tabAria.isDisabled() || undefined}
-    >
-      {renderProps.renderChildren()}
-    </div>
+    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+      <div
+        ref={tabRef}
+        id={tabAria.tabProps.id}
+        role={tabAria.tabProps.role}
+        aria-selected={tabAria.isSelected()}
+        aria-disabled={tabAria.isDisabled() || undefined}
+        aria-controls={tabAria.isSelected() ? tabAria.tabProps['aria-controls'] : undefined}
+        aria-label={tabAria.tabProps['aria-label']}
+        tabIndex={tabAria.isSelected() && !tabAria.isDisabled() ? 0 : -1}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        onKeyDown={tabAria.tabProps.onKeyDown}
+        onMouseDown={tabAria.tabProps.onMouseDown}
+        onPointerDown={tabAria.tabProps.onPointerDown}
+        onClick={tabAria.tabProps.onClick}
+        onFocus={tabAria.tabProps.onFocus}
+        {...hoverProps}
+        data-selected={tabAria.isSelected() || undefined}
+        data-focused={tabAria.isFocused() || undefined}
+        data-focus-visible={tabAria.isFocusVisible() || undefined}
+        data-pressed={tabAria.isPressed() || undefined}
+        data-hovered={isHovered() || undefined}
+        data-disabled={tabAria.isDisabled() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </div>
+    </SelectionIndicatorContext.Provider>
   );
 }
 
@@ -550,3 +582,4 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
 Tabs.List = TabList;
 Tabs.Tab = Tab;
 Tabs.Panel = TabPanel;
+Tabs.SelectionIndicator = SelectionIndicator;

package/src/TagGroup.tsx

@@ -39,6 +39,11 @@ import {
   filterDOMProps,
   dataAttr,
 } from './utils';
+import { SharedElementTransition } from './SharedElementTransition';
+import {
+  SelectionIndicatorContext,
+  type SelectionIndicatorContextValue,
+} from './SelectionIndicator';
 
 // ============================================
 // TYPES
@@ -53,7 +58,8 @@ export interface TagGroupRenderProps {
 
 export interface TagGroupProps
   extends Omit<AriaTagGroupProps, 'id'>,
-    SlotProps {
+    SlotProps,
+    Omit<JSX.HTMLAttributes<HTMLDivElement>, 'class' | 'style' | 'children'> {
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -69,7 +75,7 @@ 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. */
@@ -121,6 +127,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 {
@@ -145,10 +153,17 @@ export interface TagProps extends SlotProps {
 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);
@@ -172,15 +187,17 @@ export function useTagGroupContext(): TagGroupContextValue | null {
  * ```
  */
 export function TagGroup(props: TagGroupProps): JSX.Element {
-  const [local] = splitProps(props, [
+  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}
       slot={local.slot}
@@ -198,12 +215,13 @@ export function TagGroup(props: TagGroupProps): JSX.Element {
  * 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, [
+  const [local, domProps] = splitProps(props, [
     'items',
     'class',
     'style',
     'slot',
     'renderEmptyState',
+    'children',
     'selectionMode',
     'selectionBehavior',
     'selectedKeys',
@@ -245,8 +263,7 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   // Create tag group accessibility props
   const tagGroupAria = createTagGroup(
     {
-      get label() { return local.label; },
-      get 'aria-label'() { return local['aria-label']; },
+      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; },
@@ -279,6 +296,7 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   const contextValue: TagGroupContextValue = {
     state,
     get onRemove() { return local.onRemove; },
+    get isDisabled() { return local.isDisabled; },
   };
 
   return (
@@ -286,22 +304,36 @@ 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>
@@ -326,6 +358,7 @@ export function Tag(props: TagProps): JSX.Element {
   ]);
 
   const state = useContext(TagListStateContext);
+  const groupContext = useContext(TagGroupContext);
 
   // Create a ref for the tag
   const [tagRef, setTagRef] = createSignal<HTMLDivElement | null>(null);
@@ -334,13 +367,28 @@ export function Tag(props: TagProps): JSX.Element {
   const tagAria = createTag(
     {
       get key() { return local.id; },
-      get isDisabled() { return local.isDisabled; },
+      get isDisabled() { return local.isDisabled || groupContext?.isDisabled; },
       get textValue() { return local.textValue; },
     },
     state!,
     tagRef
   );
 
+  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?.();
+      },
+    };
+  });
+
   // Render props values
   const renderValues = createMemo<TagRenderProps>(() => ({
     isSelected: tagAria.isSelected,
@@ -349,6 +397,7 @@ export function Tag(props: TagProps): JSX.Element {
     isPressed: tagAria.isPressed,
     allowsRemoving: tagAria.allowsRemoving,
     selectionMode: state?.selectionMode() ?? 'none',
+    removeButtonProps: normalizedRemoveButtonProps(),
   }));
 
   // Resolve render props
@@ -362,26 +411,39 @@ export function Tag(props: TagProps): JSX.Element {
     renderValues
   );
 
+  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
+    isSelected: () => tagAria.isSelected,
+  }));
+
   // Filter DOM props
   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()}
+          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>
   );
 }
 
@@ -396,6 +458,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,14 +467,35 @@ 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)();
+    }
+  };
+
   return (
     <button
       type="button"
       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)}
+      onClick={handleClick}
     >
       {props.children ?? '×'}
     </button>

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>
+  );
+}

package/src/TextField.tsx

@@ -16,6 +16,7 @@ import {
   createTextField,
   createFocusRing,
   createHover,
+  mergeProps,
   type AriaTextFieldProps,
 } from '@proyecto-viviana/solidaria';
 import { createTextFieldState } from '@proyecto-viviana/solid-stately';
@@ -73,6 +74,10 @@ export interface TextFieldContextValue {
 }
 
 export const TextFieldContext = createContext<TextFieldContextValue | null>(null);
+export const LabelContext = TextFieldContext;
+export const InputContext = TextFieldContext;
+export const TextAreaContext = TextFieldContext;
+export const FieldInputContext = TextFieldContext;
 
 // ============================================
 // SUB-COMPONENTS
@@ -238,15 +243,27 @@ export function TextField(props: TextFieldProps): JSX.Element {
     return rest;
   };
 
-  // Context value for sub-components
-  // Note: We create the value object directly (not in a memo) so it's available
-  // immediately when children access the context
+  // Context value for sub-components.
+  // Use property getters so sub-components always read the latest aria/focus state.
   const contextValue: TextFieldContextValue = {
-    labelProps: textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>,
-    inputProps: { ...textFieldAria.inputProps, ...focusProps } as JSX.InputHTMLAttributes<HTMLInputElement>,
-    descriptionProps: textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>,
-    errorMessageProps: textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>,
-    isInvalid: textFieldAria.isInvalid,
+    get labelProps() {
+      return textFieldAria.labelProps as JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    },
+    get inputProps() {
+      return mergeProps(
+        textFieldAria.inputProps as Record<string, unknown>,
+        focusProps as Record<string, unknown>
+      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
+    },
+    get descriptionProps() {
+      return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get errorMessageProps() {
+      return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get isInvalid() {
+      return textFieldAria.isInvalid;
+    },
   };
 
   return (