@proyecto-viviana/solidaria-components 0.2.5 → 0.2.9

package/src/ActionGroup.tsx

@@ -0,0 +1,285 @@
+/**
+ * ActionGroup component for solidaria-components
+ *
+ * Pre-wired headless action group component that combines
+ * createListState + createActionGroup/createActionGroupItem.
+ * Provides proper dynamic roles (toolbar/radiogroup), keyboard
+ * navigation, and ARIA attributes.
+ *
+ * No RAC equivalent exists — this bridges solidaria ARIA hooks
+ * directly to a headless component.
+ */
+
+import {
+  type JSX,
+  type ParentProps,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  For,
+} from 'solid-js';
+import {
+  createActionGroup,
+  createActionGroupItem,
+  type AriaActionGroupProps,
+} from '@proyecto-viviana/solidaria';
+import {
+  createListState,
+  type ListState,
+  type Key,
+  type SelectionMode,
+} from '@proyecto-viviana/solid-stately';
+import {
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ActionGroupRenderProps {
+  /** The orientation of the action group. */
+  orientation: 'horizontal' | 'vertical';
+  /** Whether the entire group is disabled. */
+  isDisabled: boolean;
+  /** The selection mode. */
+  selectionMode: SelectionMode;
+}
+
+export interface ActionGroupItemRenderProps {
+  /** Whether the item is selected. */
+  isSelected: boolean;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+  /** Whether the item is focused. */
+  isFocused: boolean;
+}
+
+export interface ActionGroupItem {
+  id: string;
+  label: string;
+  isDisabled?: boolean;
+  [key: string]: unknown;
+}
+
+export interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem>
+  extends SlotProps {
+  /** The items in the action group. */
+  items: T[];
+  /** The selection mode. @default 'none' */
+  selectionMode?: SelectionMode;
+  /** Orientation of the group. @default 'horizontal' */
+  orientation?: 'horizontal' | 'vertical';
+  /** Whether the entire group is disabled. */
+  isDisabled?: boolean;
+  /** Accessible label. */
+  'aria-label'?: string;
+  /** Labelled-by id. */
+  'aria-labelledby'?: string;
+  /** Currently selected keys (controlled). */
+  selectedKeys?: Iterable<Key>;
+  /** Default selected keys (uncontrolled). */
+  defaultSelectedKeys?: Iterable<Key>;
+  /** Handler called when selection changes. */
+  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  /** Handler called when an item action is triggered. */
+  onAction?: (key: Key) => void;
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** Render function for each item. */
+  children: (item: T, renderProps: ActionGroupItemRenderProps) => JSX.Element;
+  /** CSS class for the container. */
+  class?: ClassNameOrFunction<ActionGroupRenderProps>;
+  /** Inline style for the container. */
+  style?: StyleOrFunction<ActionGroupRenderProps>;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {
+  state: ListState<T>;
+}
+
+export const ActionGroupContext = createContext<ActionGroupContextValue | null>(null);
+export const ActionGroupStateContext = createContext<ListState<ActionGroupItem> | null>(null);
+
+// ============================================
+// ACTIONGROUP COMPONENT
+// ============================================
+
+export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
+  props: ActionGroupProps<T>
+): JSX.Element {
+  const [local, ariaGroupProps, domProps] = splitProps(
+    props,
+    [
+      'items',
+      'selectionMode',
+      'orientation',
+      'isDisabled',
+      'selectedKeys',
+      'defaultSelectedKeys',
+      'onSelectionChange',
+      'onAction',
+      'disabledKeys',
+      'children',
+      'class',
+      'style',
+      'slot',
+    ],
+    ['aria-label', 'aria-labelledby']
+  );
+
+  const state = createListState<T>({
+    get items() {
+      return local.items;
+    },
+    get selectionMode() {
+      return local.selectionMode ?? 'none';
+    },
+    get selectedKeys() {
+      return local.selectedKeys;
+    },
+    get defaultSelectedKeys() {
+      return local.defaultSelectedKeys;
+    },
+    get onSelectionChange() {
+      return local.onSelectionChange;
+    },
+    get disabledKeys() {
+      return local.disabledKeys;
+    },
+    getKey: (item) => item.id,
+    getTextValue: (item) => item.label,
+    getDisabled: (item) => !!item.isDisabled,
+  });
+
+  const groupAriaProps: AriaActionGroupProps<T> = {
+    get items() {
+      return local.items;
+    },
+    get isDisabled() {
+      return local.isDisabled;
+    },
+    get orientation() {
+      return local.orientation;
+    },
+    get 'aria-label'() {
+      return ariaGroupProps['aria-label'];
+    },
+    get 'aria-labelledby'() {
+      return ariaGroupProps['aria-labelledby'];
+    },
+    get onAction() {
+      return local.onAction;
+    },
+  };
+
+  const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);
+
+  const orientation = () => local.orientation ?? 'horizontal';
+
+  const renderProps = useRenderProps(
+    {
+      children: undefined,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ActionGroup',
+    },
+    () => ({
+      orientation: orientation(),
+      isDisabled: !!local.isDisabled,
+      selectionMode: (local.selectionMode ?? 'none') as SelectionMode,
+    })
+  );
+
+  const filteredDOMProps = createMemo(() => filterDOMProps(domProps as Record<string, unknown>, { global: true }));
+
+  return (
+    <ActionGroupContext.Provider value={{ state: state as ListState<ActionGroupItem> }}>
+      <ActionGroupStateContext.Provider value={state as ListState<ActionGroupItem>}>
+        <div
+          {...filteredDOMProps()}
+          {...actionGroupProps}
+          ref={(el: HTMLDivElement) => {
+            const refFn = (actionGroupProps as { ref?: (el: HTMLElement) => void }).ref;
+            refFn?.(el);
+          }}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          slot={local.slot}
+          data-orientation={orientation()}
+          data-disabled={local.isDisabled || undefined}
+        >
+          <For each={local.items}>
+            {(item) => (
+              <ActionGroupItemWrapper
+                item={item}
+                state={state as ListState<ActionGroupItem>}
+                renderChild={local.children as (item: ActionGroupItem, rp: ActionGroupItemRenderProps) => JSX.Element}
+              />
+            )}
+          </For>
+        </div>
+      </ActionGroupStateContext.Provider>
+    </ActionGroupContext.Provider>
+  );
+}
+
+// ============================================
+// INTERNAL ITEM WRAPPER
+// ============================================
+
+interface ActionGroupItemWrapperProps {
+  item: ActionGroupItem;
+  state: ListState<ActionGroupItem>;
+  renderChild: (item: ActionGroupItem, renderProps: ActionGroupItemRenderProps) => JSX.Element;
+}
+
+function ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {
+  const { buttonProps } = createActionGroupItem(
+    { get key() { return props.item.id; } },
+    props.state
+  );
+
+  const isFocused = () => props.state.focusedKey() === props.item.id;
+  const isSelected = () => {
+    const keys = props.state.selectedKeys();
+    return keys === 'all' || (keys instanceof Set && keys.has(props.item.id));
+  };
+  const isDisabled = () => props.state.isDisabled(props.item.id);
+
+  const renderProps = createMemo<ActionGroupItemRenderProps>(() => ({
+    isSelected: isSelected(),
+    isDisabled: isDisabled(),
+    isFocused: isFocused(),
+  }));
+
+  const { ref: _ref, ...restButtonProps } = buttonProps as Record<string, unknown> & { ref?: unknown };
+
+  return (
+    <button
+      {...restButtonProps}
+      data-selected={isSelected() || undefined}
+      data-disabled={isDisabled() || undefined}
+      data-focused={isFocused() || undefined}
+    >
+      {props.renderChild(props.item, renderProps())}
+    </button>
+  );
+}
+
+// ============================================
+// HOOKS
+// ============================================
+
+export function useActionGroupContext(): ActionGroupContextValue | null {
+  return useContext(ActionGroupContext);
+}

package/src/Alert.tsx

@@ -0,0 +1,177 @@
+/**
+ * Alert component for solidaria-components
+ *
+ * Minimal headless Alert that owns ARIA semantics (role="alert")
+ * and provides render props for styling. The UI layer consumes this
+ * for styling/composition only.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from 'solid-js';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  filterDOMProps,
+} from './utils';
+import { Button, type ButtonProps } from './Button';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertRenderProps {
+  /** The variant of the alert. */
+  variant: AlertVariant;
+  /** Whether the alert can be dismissed. */
+  isDismissible: boolean;
+}
+
+export interface AlertProps extends SlotProps {
+  /** The variant of the alert. */
+  variant?: AlertVariant;
+  /** Whether the alert can be dismissed. */
+  isDismissible?: boolean;
+  /** Handler called when the alert is dismissed. */
+  onDismiss?: () => void;
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<AlertRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<AlertRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<AlertRenderProps>;
+  /** The id of the element. */
+  id?: string;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export interface AlertContextValue {
+  variant: () => AlertVariant;
+  isDismissible: () => boolean;
+  onDismiss?: () => void;
+}
+
+export const AlertContext = createContext<AlertContextValue | null>(null);
+
+// ============================================
+// ALERT COMPONENT
+// ============================================
+
+/**
+ * An alert displays a brief, important message in a way that
+ * attracts the user's attention without interrupting their task.
+ *
+ * This is a headless component that provides the ARIA `role="alert"`
+ * semantics and render props for styling.
+ *
+ * @example
+ * ```tsx
+ * <Alert variant="error" isDismissible onDismiss={() => setVisible(false)}>
+ *   {({ variant }) => <span>Something went wrong ({variant})</span>}
+ * </Alert>
+ * ```
+ */
+export function Alert(props: AlertProps): JSX.Element {
+  const [local, rest] = splitProps(props, [
+    'children',
+    'class',
+    'style',
+    'slot',
+    'variant',
+    'isDismissible',
+    'onDismiss',
+  ]);
+
+  const variant = () => local.variant ?? 'info';
+  const isDismissible = () => !!local.isDismissible;
+
+  // Render props values
+  const renderValues = createMemo<AlertRenderProps>(() => ({
+    variant: variant(),
+    isDismissible: isDismissible(),
+  }));
+
+  // Resolve class and style manually. We intentionally avoid useRenderProps()
+  // because it destructures children eagerly, which would create child
+  // components (e.g. AlertDismissButton) BEFORE the AlertContext.Provider
+  // is in scope, breaking context for sub-components.
+  const computedClass = createMemo(() => {
+    const cls = local.class;
+    return typeof cls === 'function' ? cls(renderValues()) : cls ?? 'solidaria-Alert';
+  });
+
+  const computedStyle = createMemo(() => {
+    const s = local.style;
+    return typeof s === 'function' ? s(renderValues()) : s;
+  });
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+
+  // Context value for sub-components
+  const contextValue: AlertContextValue = {
+    variant,
+    isDismissible,
+    onDismiss: local.onDismiss,
+  };
+
+  // Children are accessed lazily inside the Provider scope (via local.children
+  // in JSX) so sub-components like AlertDismissButton can read AlertContext.
+  return (
+    <AlertContext.Provider value={contextValue}>
+      <div
+        {...domProps()}
+        role="alert"
+        class={computedClass()}
+        style={computedStyle()}
+        data-variant={variant()}
+        data-dismissible={isDismissible() || undefined}
+      >
+        {typeof local.children === 'function'
+          ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())
+          : local.children}
+      </div>
+    </AlertContext.Provider>
+  );
+}
+
+// ============================================
+// ALERT DISMISS BUTTON
+// ============================================
+
+export interface AlertDismissButtonProps extends Omit<ButtonProps, 'onPress'> {}
+
+/**
+ * A dismiss button for use inside an Alert.
+ * Uses the headless Button for full keyboard/a11y support.
+ *
+ * @example
+ * ```tsx
+ * <Alert isDismissible onDismiss={handleDismiss}>
+ *   <span>Alert content</span>
+ *   <AlertDismissButton aria-label="Dismiss">X</AlertDismissButton>
+ * </Alert>
+ * ```
+ */
+export function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element {
+  const context = useContext(AlertContext);
+
+  return (
+    <Button
+      {...props}
+      aria-label={props['aria-label'] ?? 'Dismiss'}
+      onPress={() => context?.onDismiss?.()}
+    />
+  );
+}

package/src/Autocomplete.tsx

@@ -125,7 +125,7 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
   const [stateProps, ariaProps, local] = splitProps(
     props,
     ['inputValue', 'defaultInputValue', 'onInputChange'],
-    ['filter', 'disableAutoFocusFirst', 'disableVirtualFocus']
+    ['filter', 'disableAutoFocusFirst', 'disableVirtualFocus', 'collectionId', 'collectionAriaLabel']
   )
 
   // Create state

package/src/Breadcrumbs.tsx

@@ -6,6 +6,7 @@
  */
 
 import {
+  type Accessor,
   type JSX,
   createContext,
   createMemo,
@@ -13,11 +14,16 @@ import {
   useContext,
   For,
 } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
 import {
   createBreadcrumbs,
   createBreadcrumbItem,
+  createFocusRing,
+  createHover,
+  mergeProps,
   type AriaBreadcrumbsProps,
   type AriaBreadcrumbItemProps,
+  type PressEvent,
 } from '@proyecto-viviana/solidaria';
 import {
   type RenderChildren,
@@ -44,6 +50,8 @@ export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, 'isDisab
   getKey?: (item: T) => string | number;
   /** Whether the breadcrumbs are disabled. */
   isDisabled?: boolean;
+  /** Handler called when a breadcrumb item is activated. */
+  onAction?: (key: string | number) => void;
   /** The children of the component - render function for each item. */
   children: (item: T) => JSX.Element;
   /** The CSS className for the element. */
@@ -83,11 +91,24 @@ export interface BreadcrumbItemProps extends Omit<AriaBreadcrumbItemProps, 'isDi
 // ============================================
 
 interface BreadcrumbsContextValue {
-  isDisabled: boolean;
+  isDisabled: Accessor<boolean>;
+  onAction?: (key: string | number) => void;
 }
 
 export const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(null);
 
+interface BreadcrumbItemContextValue {
+  itemKey: string | number | null;
+  isLast: Accessor<boolean>;
+}
+
+export const BreadcrumbItemContext = createContext<BreadcrumbItemContextValue | null>(null);
+
+function defaultItemKey(item: unknown, index: number): string | number {
+  const maybeItem = item as { key?: string | number; id?: string | number };
+  return maybeItem.key ?? maybeItem.id ?? index;
+}
+
 // ============================================
 // COMPONENTS
 // ============================================
@@ -98,12 +119,14 @@ export const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(
 export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
   const [local, ariaProps, rest] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot', 'items', 'getKey', 'isDisabled'],
+    ['children', 'class', 'style', 'slot', 'items', 'getKey', 'isDisabled', 'onAction'],
     ['aria-label', 'aria-labelledby', 'aria-describedby']
   );
 
   const isDisabled = () => local.isDisabled ?? false;
   const items = () => local.items ?? [];
+  const getItemKey = (item: T, index: number): string | number =>
+    local.getKey?.(item) ?? defaultItemKey(item, index);
 
   // Create breadcrumbs aria props
   const { navProps } = createBreadcrumbs({
@@ -140,7 +163,7 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
   const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
 
   return (
-    <BreadcrumbsContext.Provider value={{ isDisabled: isDisabled() }}>
+    <BreadcrumbsContext.Provider value={{ isDisabled, onAction: local.onAction }}>
       <nav
         {...navProps}
         {...domProps()}
@@ -150,11 +173,18 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
       >
         <ol style={{ display: 'flex', 'align-items': 'center', 'list-style': 'none', margin: 0, padding: 0 }}>
           <For each={items()}>
-            {(item) => (
-              <li style={{ display: 'flex', 'align-items': 'center' }}>
-                {props.children(item)}
-              </li>
-            )}
+            {(item, index) => {
+              const itemKey = getItemKey(item, index());
+              const isLast = () => index() === items().length - 1;
+
+              return (
+                <li style={{ display: 'flex', 'align-items': 'center' }}>
+                  <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
+                    {props.children(item)}
+                  </BreadcrumbItemContext.Provider>
+                </li>
+              );
+            }}
           </For>
         </ol>
       </nav>
@@ -175,11 +205,24 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
 
   // Get context
   const context = useContext(BreadcrumbsContext);
-  const isDisabled = () => local.isDisabled ?? context?.isDisabled ?? false;
-  const isCurrent = () => ariaProps.isCurrent ?? false;
+  const itemContext = useContext(BreadcrumbItemContext);
+  const isDisabled = () => local.isDisabled ?? context?.isDisabled() ?? false;
+  const isCurrent = () => ariaProps.isCurrent ?? itemContext?.isLast() ?? false;
+  const itemKey = () => itemContext?.itemKey ?? null;
+
+  const handlePress = (e: PressEvent) => {
+    ariaProps.onPress?.(e);
+    const key = itemKey();
+    if (key !== null && !isCurrent() && !isDisabled()) {
+      context?.onAction?.(key);
+    }
+  };
 
   // Create breadcrumb item aria props
   const { itemProps, isPressed } = createBreadcrumbItem({
+    get id() {
+      return ariaProps.id;
+    },
     get isCurrent() {
       return isCurrent();
     },
@@ -199,7 +242,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       return ariaProps.elementType;
     },
     get onPress() {
-      return ariaProps.onPress;
+      return handlePress;
     },
     get onPressStart() {
       return ariaProps.onPressStart;
@@ -210,22 +253,61 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     get onClick() {
       return ariaProps.onClick;
     },
+    get onFocus() {
+      return ariaProps.onFocus;
+    },
+    get onBlur() {
+      return ariaProps.onBlur;
+    },
+    get onFocusChange() {
+      return ariaProps.onFocusChange;
+    },
+    get onKeyDown() {
+      return ariaProps.onKeyDown;
+    },
+    get onKeyUp() {
+      return ariaProps.onKeyUp;
+    },
+    get autoFocus() {
+      return ariaProps.autoFocus;
+    },
     get 'aria-label'() {
       return ariaProps['aria-label'];
     },
+    get 'aria-labelledby'() {
+      return ariaProps['aria-labelledby'];
+    },
+    get 'aria-describedby'() {
+      return ariaProps['aria-describedby'];
+    },
     get 'aria-current'() {
       return ariaProps['aria-current'];
     },
   });
 
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+  });
+  const mergedItemProps = createMemo(() =>
+    mergeProps(
+      itemProps as Record<string, unknown>,
+      focusProps as Record<string, unknown>,
+      hoverProps as Record<string, unknown>
+    )
+  );
+  const elementType = () => ariaProps.elementType ?? 'a';
+
   // Render props values
   const renderValues = createMemo<BreadcrumbItemRenderProps>(() => ({
     isCurrent: isCurrent(),
     isDisabled: isDisabled(),
     isPressed: isPressed(),
-    isFocused: false, // Would need focus tracking
-    isFocusVisible: false, // Would need focus visible tracking
-    isHovered: false, // Would need hover tracking
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isHovered: isHovered(),
   }));
 
   // Resolve render props
@@ -247,16 +329,20 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
   };
 
   return (
-    <a
-      {...(itemProps as Record<string, unknown>)}
+    <Dynamic
+      component={elementType()}
+      {...mergedItemProps()}
       class={renderProps.class()}
       style={mergedStyle()}
       data-current={isCurrent() || undefined}
       data-disabled={isDisabled() || undefined}
       data-pressed={isPressed() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-hovered={isHovered() || undefined}
     >
       {renderProps.renderChildren()}
-    </a>
+    </Dynamic>
   );
 }