@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/ActionGroup.tsx

@@ -0,0 +1,277 @@
+/**
+ * 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";
+
+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>;
+}
+
+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);
+
+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>
+  );
+}
+
+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>
+  );
+}
+
+export function useActionGroupContext(): ActionGroupContextValue | null {
+  return useContext(ActionGroupContext);
+}

package/src/Alert.tsx

@@ -0,0 +1,152 @@
+/**
+ * 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";
+
+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;
+}
+
+export interface AlertContextValue {
+  variant: () => AlertVariant;
+  isDismissible: () => boolean;
+  onDismiss?: () => void;
+}
+
+export const AlertContext = createContext<AlertContextValue | null>(null);
+
+/**
+ * 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;
+
+  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;
+  });
+
+  const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
+
+  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>
+  );
+}
+
+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

@@ -15,62 +15,56 @@ import {
   createMemo,
   splitProps,
   createSignal,
-} from 'solid-js'
+} from "solid-js";
 import {
   createAutocomplete,
   type AriaAutocompleteOptions,
   type AutocompleteInputProps,
   type CollectionOptions,
-} from '@proyecto-viviana/solidaria'
+} from "@proyecto-viviana/solidaria";
 import {
   createAutocompleteState,
   type AutocompleteState,
   type AutocompleteStateOptions,
-} from '@proyecto-viviana/solid-stately'
-import { type SlotProps } from './utils'
-
-// ============================================
-// TYPES
-// ============================================
+} from "@proyecto-viviana/solid-stately";
+import { type SlotProps } from "./utils";
 
 export interface AutocompleteProps<T = unknown>
-  extends Omit<AutocompleteStateOptions, 'children'>,
-    Omit<AriaAutocompleteOptions<T>, 'inputRef' | 'collectionRef'>,
+  extends
+    Omit<AutocompleteStateOptions, "children">,
+    Omit<AriaAutocompleteOptions<T>, "inputRef" | "collectionRef">,
     ParentProps,
     SlotProps {}
 
-// ============================================
-// CONTEXTS
-// ============================================
-
 export interface AutocompleteContextValue {
-  inputProps: AutocompleteInputProps
-  inputRef: (el: HTMLInputElement) => void
+  inputProps: AutocompleteInputProps;
+  inputRef: (el: HTMLInputElement) => void;
 }
 
 export interface AutocompleteCollectionContextValue {
-  collectionProps: CollectionOptions
-  collectionRef: (el: HTMLElement) => void
-  filter?: (textValue: string) => boolean
+  collectionProps: CollectionOptions;
+  collectionRef: (el: HTMLElement) => void;
+  filter?: (textValue: string) => boolean;
 }
 
-export const AutocompleteContext = createContext<AutocompleteContextValue | null>(null)
-export const AutocompleteStateContext = createContext<AutocompleteState | null>(null)
-export const AutocompleteCollectionContext = createContext<AutocompleteCollectionContextValue | null>(null)
+export const AutocompleteContext = createContext<AutocompleteContextValue | null>(null);
+export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
+export const AutocompleteCollectionContext =
+  createContext<AutocompleteCollectionContextValue | null>(null);
 
 /**
  * Hook to consume autocomplete input context.
  * Use this in your input component (TextField/SearchField) to get the autocomplete props.
  */
 export function useAutocompleteInput() {
-  return useContext(AutocompleteContext)
+  return useContext(AutocompleteContext);
 }
 
 /**
  * Hook to consume autocomplete state context.
  */
 export function useAutocompleteState() {
-  return useContext(AutocompleteStateContext)
+  return useContext(AutocompleteStateContext);
 }
 
 /**
@@ -78,13 +72,9 @@ export function useAutocompleteState() {
  * Use this in your collection component (ListBox/Menu) to get the autocomplete props.
  */
 export function useAutocompleteCollection() {
-  return useContext(AutocompleteCollectionContext)
+  return useContext(AutocompleteCollectionContext);
 }
 
-// ============================================
-// AUTOCOMPLETE COMPONENT
-// ============================================
-
 /**
  * An autocomplete allows users to search or filter a list of suggestions.
  * It wraps a text input and a collection component (ListBox or Menu),
@@ -124,16 +114,21 @@ export function useAutocompleteCollection() {
 export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Element {
   const [stateProps, ariaProps, local] = splitProps(
     props,
-    ['inputValue', 'defaultInputValue', 'onInputChange'],
-    ['filter', 'disableAutoFocusFirst', 'disableVirtualFocus']
-  )
-
-  // Create state
-  const state = createAutocompleteState(stateProps)
+    ["inputValue", "defaultInputValue", "onInputChange"],
+    [
+      "filter",
+      "disableAutoFocusFirst",
+      "disableVirtualFocus",
+      "collectionId",
+      "collectionAriaLabel",
+    ],
+  );
+
+  const state = createAutocompleteState(stateProps);
 
   // Create refs
-  let inputRef: HTMLInputElement | undefined
-  let collectionRef: HTMLElement | undefined
+  let inputRef: HTMLInputElement | undefined;
+  let collectionRef: HTMLElement | undefined;
 
   // Create autocomplete aria
   const autocomplete = createAutocomplete<T>(
@@ -142,25 +137,25 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
       inputRef: () => inputRef,
       collectionRef: () => collectionRef,
     },
-    state
-  )
+    state,
+  );
 
   // Input context value
   const inputContextValue = createMemo<AutocompleteContextValue>(() => ({
     inputProps: autocomplete.inputProps,
     inputRef: (el: HTMLInputElement) => {
-      inputRef = el
+      inputRef = el;
     },
-  }))
+  }));
 
   // Collection context value
   const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({
     collectionProps: autocomplete.collectionProps,
     collectionRef: (el: HTMLElement) => {
-      collectionRef = el
+      collectionRef = el;
     },
     filter: autocomplete.filter,
-  }))
+  }));
 
   return (
     <AutocompleteStateContext.Provider value={state}>
@@ -170,5 +165,5 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
         </AutocompleteCollectionContext.Provider>
       </AutocompleteContext.Provider>
     </AutocompleteStateContext.Provider>
-  )
+  );
 }