@proyecto-viviana/solidaria-components 0.2.2 → 0.2.4

package/src/Link.tsx

@@ -0,0 +1,201 @@
+/**
+ * Link component for solidaria-components
+ *
+ * Pre-wired headless link component that combines aria hooks.
+ * Port of react-aria-components/src/Link.tsx
+ */
+
+import {
+  type JSX,
+  type ParentProps,
+  createContext,
+  createMemo,
+  splitProps,
+} from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import {
+  createLink,
+  createFocusRing,
+  createHover,
+  type AriaLinkProps,
+  type HoverEvents,
+} from '@proyecto-viviana/solidaria';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface LinkRenderProps {
+  /** Whether the link is the current item within a list. */
+  isCurrent: boolean;
+  /** Whether the link is currently hovered with a mouse. */
+  isHovered: boolean;
+  /** Whether the link is currently in a pressed state. */
+  isPressed: boolean;
+  /** Whether the link is focused, either via a mouse or keyboard. */
+  isFocused: boolean;
+  /** Whether the link is keyboard focused. */
+  isFocusVisible: boolean;
+  /** Whether the link is disabled. */
+  isDisabled: boolean;
+}
+
+export interface LinkProps
+  extends Omit<AriaLinkProps, 'elementType'>,
+    HoverEvents,
+    SlotProps {
+  /** The children of the component. A function may be provided to receive render props. */
+  children?: RenderChildren<LinkRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<LinkRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<LinkRenderProps>;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+export const LinkContext = createContext<LinkProps | null>(null);
+
+// ============================================
+// LINK COMPONENT
+// ============================================
+
+/**
+ * A link allows a user to navigate to another page or resource within a web page
+ * or application.
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com">Visit Example</Link>
+ *
+ * // With render props
+ * <Link href="/about">
+ *   {({ isHovered, isFocusVisible }) => (
+ *     <span class={isHovered ? 'underline' : ''}>
+ *       About Us
+ *     </span>
+ *   )}
+ * </Link>
+ * ```
+ */
+export function Link(props: ParentProps<LinkProps>): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'children',
+    'class',
+    'style',
+    'slot',
+    'onHoverStart',
+    'onHoverEnd',
+    'onHoverChange',
+  ]);
+
+  // Determine element type - use 'a' if href is provided and not disabled
+  const elementType = () => {
+    if (ariaProps.href && !ariaProps.isDisabled) {
+      return 'a';
+    }
+    return 'span';
+  };
+
+  // Create link aria props
+  const linkAria = createLink({
+    get elementType() { return elementType(); },
+    get isDisabled() { return ariaProps.isDisabled; },
+    get href() { return ariaProps.href; },
+    get target() { return ariaProps.target; },
+    get rel() { return ariaProps.rel; },
+    get onPress() { return ariaProps.onPress; },
+    get onPressStart() { return ariaProps.onPressStart; },
+    get onPressEnd() { return ariaProps.onPressEnd; },
+    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-current'() { return ariaProps['aria-current']; },
+    get 'aria-label'() { return ariaProps['aria-label']; },
+    get 'aria-labelledby'() { return ariaProps['aria-labelledby']; },
+    get 'aria-describedby'() { return ariaProps['aria-describedby']; },
+  });
+
+  // Create focus ring
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Create hover
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() { return ariaProps.isDisabled ?? false; },
+    get onHoverStart() { return local.onHoverStart; },
+    get onHoverEnd() { return local.onHoverEnd; },
+    get onHoverChange() { return local.onHoverChange; },
+  });
+
+  // Render props values
+  const renderValues = createMemo<LinkRenderProps>(() => ({
+    isCurrent: !!ariaProps['aria-current'],
+    isHovered: isHovered(),
+    isPressed: linkAria.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: ariaProps.isDisabled ?? false,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Link',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+
+  // Remove ref from spread props to avoid type conflicts
+  const cleanLinkProps = () => {
+    const { ref: _ref1, ...rest } = linkAria.linkProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref3, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <Dynamic
+      component={elementType()}
+      {...domProps()}
+      {...cleanLinkProps()}
+      {...cleanHoverProps()}
+      {...cleanFocusProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-hovered={isHovered() || undefined}
+      data-pressed={linkAria.isPressed() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-current={!!ariaProps['aria-current'] || undefined}
+      data-disabled={ariaProps.isDisabled || undefined}
+    >
+      {renderProps.renderChildren()}
+    </Dynamic>
+  );
+}

package/src/ListBox.tsx

@@ -0,0 +1,346 @@
+/**
+ * ListBox component for solidaria-components
+ *
+ * A pre-wired headless listbox that combines state + aria hooks.
+ * Port of react-aria-components/src/ListBox.tsx
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  For,
+} from 'solid-js';
+import {
+  createListBox,
+  createOption,
+  createFocusRing,
+  createHover,
+  type AriaListBoxProps,
+  type AriaOptionProps,
+} from '@proyecto-viviana/solidaria';
+import {
+  createListState,
+  type ListState,
+  type Key,
+} from '@proyecto-viviana/solid-stately';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ListBoxRenderProps {
+  /** Whether the listbox has focus. */
+  isFocused: boolean;
+  /** Whether the listbox has keyboard focus. */
+  isFocusVisible: boolean;
+  /** Whether the listbox is disabled. */
+  isDisabled: boolean;
+  /** Whether the listbox is empty. */
+  isEmpty: boolean;
+}
+
+export interface ListBoxProps<T>
+  extends Omit<AriaListBoxProps, 'children'>,
+    SlotProps {
+  /** The items to render in the listbox. */
+  items: T[];
+  /** Function to get the key from an item. */
+  getKey?: (item: T) => Key;
+  /** Function to get the text value from an item. */
+  getTextValue?: (item: T) => string;
+  /** Function to check if an item is disabled. */
+  getDisabled?: (item: T) => boolean;
+  /** The selection mode. */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /** Keys of disabled items. */
+  disabledKeys?: Iterable<Key>;
+  /** Currently selected keys (controlled). */
+  selectedKeys?: 'all' | Iterable<Key>;
+  /** Default selected keys (uncontrolled). */
+  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  /** Handler called when selection changes. */
+  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  /** The children of the component. A function may be provided to render each item. */
+  children: (item: T) => JSX.Element;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<ListBoxRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<ListBoxRenderProps>;
+  /** A function to render when the listbox is empty. */
+  renderEmptyState?: () => JSX.Element;
+}
+
+export interface ListBoxOptionRenderProps {
+  /** Whether the option is selected. */
+  isSelected: boolean;
+  /** Whether the option is focused. */
+  isFocused: boolean;
+  /** Whether the option has keyboard focus. */
+  isFocusVisible: boolean;
+  /** Whether the option is pressed. */
+  isPressed: boolean;
+  /** Whether the option is hovered. */
+  isHovered: boolean;
+  /** Whether the option is disabled. */
+  isDisabled: boolean;
+}
+
+export interface ListBoxOptionProps<T>
+  extends Omit<AriaOptionProps, 'children' | 'key'>,
+    SlotProps {
+  /** The unique key for the option. */
+  id: Key;
+  /** The item value. */
+  item?: T;
+  /** The children of the option. A function may be provided to receive render props. */
+  children?: RenderChildren<ListBoxOptionRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<ListBoxOptionRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<ListBoxOptionRenderProps>;
+  /** The text value of the option (for typeahead). */
+  textValue?: string;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface ListBoxContextValue<T> {
+  state: ListState<T>;
+}
+
+export const ListBoxContext = createContext<ListBoxContextValue<unknown> | null>(null);
+export const ListBoxStateContext = createContext<ListState<unknown> | null>(null);
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * A listbox displays a list of options and allows a user to select one or more of them.
+ */
+export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
+  const [local, stateProps, ariaProps] = splitProps(
+    props,
+    ['children', 'class', 'style', 'slot', 'renderEmptyState'],
+    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectionMode', 'selectedKeys', 'defaultSelectedKeys', 'onSelectionChange']
+  );
+
+  // Create list state
+  const state = createListState<T>({
+    get items() {
+      return stateProps.items;
+    },
+    get getKey() {
+      return stateProps.getKey;
+    },
+    get getTextValue() {
+      return stateProps.getTextValue;
+    },
+    get getDisabled() {
+      return stateProps.getDisabled;
+    },
+    get disabledKeys() {
+      return stateProps.disabledKeys;
+    },
+    get selectionMode() {
+      return stateProps.selectionMode;
+    },
+    get selectedKeys() {
+      return stateProps.selectedKeys;
+    },
+    get defaultSelectedKeys() {
+      return stateProps.defaultSelectedKeys;
+    },
+    get onSelectionChange() {
+      return stateProps.onSelectionChange;
+    },
+  });
+
+  // Helper to resolve isDisabled
+  const resolveDisabled = (): boolean => {
+    const disabled = ariaProps.isDisabled;
+    if (typeof disabled === 'function') {
+      return (disabled as () => boolean)();
+    }
+    return !!disabled;
+  };
+
+  // Create listbox aria props
+  const { listBoxProps } = createListBox(
+    {
+      ...ariaProps,
+      get isDisabled() {
+        return resolveDisabled();
+      },
+    },
+    state
+  );
+
+  // Create focus ring
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+
+  // Render props values
+  const renderValues = createMemo<ListBoxRenderProps>(() => ({
+    isFocused: state.isFocused() || isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: resolveDisabled(),
+    isEmpty: state.collection().size === 0,
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ListBox',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps as Record<string, unknown>, { global: true });
+    return filtered;
+  });
+
+  // Remove ref from spread props
+  const cleanListBoxProps = () => {
+    const { ref: _ref1, ...rest } = listBoxProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const { ref: _ref2, ...rest } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+
+  const isEmpty = () => stateProps.items.length === 0;
+
+  return (
+    <ListBoxContext.Provider value={{ state }}>
+      <ListBoxStateContext.Provider value={state}>
+        <ul
+          {...domProps()}
+          {...cleanListBoxProps()}
+          {...cleanFocusProps()}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-focused={state.isFocused() || undefined}
+          data-focus-visible={isFocusVisible() || undefined}
+          data-disabled={resolveDisabled() || undefined}
+          data-empty={isEmpty() || undefined}
+        >
+          {isEmpty() && local.renderEmptyState
+            ? local.renderEmptyState()
+            : <For each={stateProps.items}>{(item) => props.children(item)}</For>
+          }
+        </ul>
+      </ListBoxStateContext.Provider>
+    </ListBoxContext.Provider>
+  );
+}
+
+/**
+ * An option in a listbox.
+ */
+export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'class',
+    'style',
+    'slot',
+    'id',
+    'item',
+    'textValue',
+  ]);
+
+  // Get state from context
+  const context = useContext(ListBoxStateContext);
+  if (!context) {
+    throw new Error('ListBoxOption must be used within a ListBox');
+  }
+  const state = context as ListState<T>;
+
+  // Create option aria props
+  const optionAria = createOption<T>(
+    {
+      key: local.id,
+      get isDisabled() {
+        return ariaProps.isDisabled;
+      },
+      get 'aria-label'() {
+        return ariaProps['aria-label'];
+      },
+    },
+    state
+  );
+
+  // Create hover
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return optionAria.isDisabled();
+    },
+  });
+
+  // Render props values
+  const renderValues = createMemo<ListBoxOptionRenderProps>(() => ({
+    isSelected: optionAria.isSelected(),
+    isFocused: optionAria.isFocused(),
+    isFocusVisible: optionAria.isFocusVisible(),
+    isPressed: optionAria.isPressed(),
+    isHovered: isHovered(),
+    isDisabled: optionAria.isDisabled(),
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-ListBox-option',
+    },
+    renderValues
+  );
+
+  // Remove ref from spread props
+  const cleanOptionProps = () => {
+    const { ref: _ref1, ...rest } = optionAria.optionProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+
+  return (
+    <li
+      {...cleanOptionProps()}
+      {...cleanHoverProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-selected={optionAria.isSelected() || undefined}
+      data-focused={optionAria.isFocused() || undefined}
+      data-focus-visible={optionAria.isFocusVisible() || undefined}
+      data-pressed={optionAria.isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-disabled={optionAria.isDisabled() || undefined}
+    >
+      {renderProps.renderChildren()}
+    </li>
+  );
+}
+
+// Attach Option as a static property
+ListBox.Option = ListBoxOption;