@proyecto-viviana/solidaria-components 0.2.1 → 0.2.3

package/package.json

@@ -1,30 +1,32 @@
 {
   "name": "@proyecto-viviana/solidaria-components",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Pre-wired headless components for SolidJS - port of react-aria-components",
   "type": "module",
-  "main": "./dist/index.ssr.js",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "solid": "./dist/index.jsx",
+      "solid": "./src/index.ts",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "deno task build",
+    "build": "tsup && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
     "dev": "tsup --watch",
-    "prepublishOnly": "deno task build"
+    "prepublishOnly": "echo 'Use deno task release from root'"
   },
   "dependencies": {
-    "@proyecto-viviana/solid-stately": "^0.2.1",
-    "@proyecto-viviana/solidaria": "^0.2.1"
+    "@proyecto-viviana/solidaria": "workspace:*",
+    "@proyecto-viviana/solid-stately": "workspace:*"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/Autocomplete.tsx

@@ -0,0 +1,174 @@
+/**
+ * Autocomplete component for solidaria-components
+ *
+ * Provides autocomplete functionality by wrapping a text input
+ * with a filterable collection (ListBox/Menu).
+ *
+ * Port of react-aria-components/src/Autocomplete.tsx
+ */
+
+import {
+  type JSX,
+  type ParentProps,
+  createContext,
+  useContext,
+  createMemo,
+  splitProps,
+  createSignal,
+} from 'solid-js'
+import {
+  createAutocomplete,
+  type AriaAutocompleteOptions,
+  type AutocompleteInputProps,
+  type CollectionOptions,
+} from '@proyecto-viviana/solidaria'
+import {
+  createAutocompleteState,
+  type AutocompleteState,
+  type AutocompleteStateOptions,
+} from '@proyecto-viviana/solid-stately'
+import { type SlotProps } from './utils'
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface AutocompleteProps<T = unknown>
+  extends Omit<AutocompleteStateOptions, 'children'>,
+    Omit<AriaAutocompleteOptions<T>, 'inputRef' | 'collectionRef'>,
+    ParentProps,
+    SlotProps {}
+
+// ============================================
+// CONTEXTS
+// ============================================
+
+export interface AutocompleteContextValue {
+  inputProps: AutocompleteInputProps
+  inputRef: (el: HTMLInputElement) => void
+}
+
+export interface AutocompleteCollectionContextValue {
+  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)
+
+/**
+ * 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)
+}
+
+/**
+ * Hook to consume autocomplete state context.
+ */
+export function useAutocompleteState() {
+  return useContext(AutocompleteStateContext)
+}
+
+/**
+ * Hook to consume autocomplete collection context.
+ * Use this in your collection component (ListBox/Menu) to get the autocomplete props.
+ */
+export function useAutocompleteCollection() {
+  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),
+ * providing keyboard navigation and filtering capabilities.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with SearchField and ListBox
+ * <Autocomplete
+ *   filter={(textValue, inputValue) =>
+ *     textValue.toLowerCase().includes(inputValue.toLowerCase())
+ *   }
+ * >
+ *   <SearchField aria-label="Search">
+ *     <Input />
+ *   </SearchField>
+ *   <ListBox aria-label="Suggestions">
+ *     <ListBoxItem>Option 1</ListBoxItem>
+ *     <ListBoxItem>Option 2</ListBoxItem>
+ *     <ListBoxItem>Option 3</ListBoxItem>
+ *   </ListBox>
+ * </Autocomplete>
+ *
+ * // Controlled input value
+ * const [value, setValue] = createSignal('');
+ * <Autocomplete
+ *   inputValue={value()}
+ *   onInputChange={setValue}
+ *   filter={(textValue, inputValue) =>
+ *     textValue.toLowerCase().includes(inputValue.toLowerCase())
+ *   }
+ * >
+ *   {/* ... *\/}
+ * </Autocomplete>
+ * ```
+ */
+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)
+
+  // Create refs
+  let inputRef: HTMLInputElement | undefined
+  let collectionRef: HTMLElement | undefined
+
+  // Create autocomplete aria
+  const autocomplete = createAutocomplete<T>(
+    {
+      ...ariaProps,
+      inputRef: () => inputRef,
+      collectionRef: () => collectionRef,
+    },
+    state
+  )
+
+  // Input context value
+  const inputContextValue = createMemo<AutocompleteContextValue>(() => ({
+    inputProps: autocomplete.inputProps,
+    inputRef: (el: HTMLInputElement) => {
+      inputRef = el
+    },
+  }))
+
+  // Collection context value
+  const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({
+    collectionProps: autocomplete.collectionProps,
+    collectionRef: (el: HTMLElement) => {
+      collectionRef = el
+    },
+    filter: autocomplete.filter,
+  }))
+
+  return (
+    <AutocompleteStateContext.Provider value={state}>
+      <AutocompleteContext.Provider value={inputContextValue()}>
+        <AutocompleteCollectionContext.Provider value={collectionContextValue()}>
+          {props.children}
+        </AutocompleteCollectionContext.Provider>
+      </AutocompleteContext.Provider>
+    </AutocompleteStateContext.Provider>
+  )
+}

package/src/Breadcrumbs.tsx

@@ -0,0 +1,264 @@
+/**
+ * Breadcrumbs component for solidaria-components
+ *
+ * A pre-wired headless breadcrumbs component that combines aria hooks.
+ * Port of react-aria-components Breadcrumbs.
+ */
+
+import {
+  type JSX,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+  For,
+} from 'solid-js';
+import {
+  createBreadcrumbs,
+  createBreadcrumbItem,
+  type AriaBreadcrumbsProps,
+  type AriaBreadcrumbItemProps,
+} from '@proyecto-viviana/solidaria';
+import {
+  type RenderChildren,
+  type ClassNameOrFunction,
+  type StyleOrFunction,
+  type SlotProps,
+  useRenderProps,
+  filterDOMProps,
+} from './utils';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface BreadcrumbsRenderProps {
+  /** Whether the breadcrumbs are disabled. */
+  isDisabled: boolean;
+}
+
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps, 'isDisabled'>, SlotProps {
+  /** The items to render in the breadcrumbs. */
+  items?: T[];
+  /** Function to get the key from an item. */
+  getKey?: (item: T) => string | number;
+  /** Whether the breadcrumbs are disabled. */
+  isDisabled?: boolean;
+  /** The children of the component - render function for each item. */
+  children: (item: T) => JSX.Element;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<BreadcrumbsRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<BreadcrumbsRenderProps>;
+}
+
+export interface BreadcrumbItemRenderProps {
+  /** Whether this is the current/last item. */
+  isCurrent: boolean;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+  /** Whether the item is pressed. */
+  isPressed: boolean;
+  /** Whether the item is focused. */
+  isFocused: boolean;
+  /** Whether the item has visible focus ring. */
+  isFocusVisible: boolean;
+  /** Whether the item is hovered. */
+  isHovered: boolean;
+}
+
+export interface BreadcrumbItemProps extends Omit<AriaBreadcrumbItemProps, 'isDisabled'>, SlotProps {
+  /** The children of the breadcrumb item. */
+  children?: RenderChildren<BreadcrumbItemRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<BreadcrumbItemRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<BreadcrumbItemRenderProps>;
+  /** Whether this item is disabled. */
+  isDisabled?: boolean;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+interface BreadcrumbsContextValue {
+  isDisabled: boolean;
+}
+
+export const BreadcrumbsContext = createContext<BreadcrumbsContextValue | null>(null);
+
+// ============================================
+// COMPONENTS
+// ============================================
+
+/**
+ * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
+ */
+export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
+  const [local, ariaProps, rest] = splitProps(
+    props,
+    ['children', 'class', 'style', 'slot', 'items', 'getKey', 'isDisabled'],
+    ['aria-label', 'aria-labelledby', 'aria-describedby']
+  );
+
+  const isDisabled = () => local.isDisabled ?? false;
+  const items = () => local.items ?? [];
+
+  // Create breadcrumbs aria props
+  const { navProps } = createBreadcrumbs({
+    get 'aria-label'() {
+      return ariaProps['aria-label'];
+    },
+    get 'aria-labelledby'() {
+      return ariaProps['aria-labelledby'];
+    },
+    get 'aria-describedby'() {
+      return ariaProps['aria-describedby'];
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+  });
+
+  // Render props values
+  const renderValues = createMemo<BreadcrumbsRenderProps>(() => ({
+    isDisabled: isDisabled(),
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-Breadcrumbs',
+    },
+    renderValues
+  );
+
+  // Filter DOM props
+  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+
+  return (
+    <BreadcrumbsContext.Provider value={{ isDisabled: isDisabled() }}>
+      <nav
+        {...navProps}
+        {...domProps()}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-disabled={isDisabled() || undefined}
+      >
+        <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>
+            )}
+          </For>
+        </ol>
+      </nav>
+    </BreadcrumbsContext.Provider>
+  );
+}
+
+/**
+ * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
+ */
+export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
+  const [local, ariaProps] = splitProps(props, [
+    'class',
+    'style',
+    'slot',
+    'isDisabled',
+  ]);
+
+  // Get context
+  const context = useContext(BreadcrumbsContext);
+  const isDisabled = () => local.isDisabled ?? context?.isDisabled ?? false;
+  const isCurrent = () => ariaProps.isCurrent ?? false;
+
+  // Create breadcrumb item aria props
+  const { itemProps, isPressed } = createBreadcrumbItem({
+    get isCurrent() {
+      return isCurrent();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get href() {
+      return ariaProps.href;
+    },
+    get target() {
+      return ariaProps.target;
+    },
+    get rel() {
+      return ariaProps.rel;
+    },
+    get elementType() {
+      return ariaProps.elementType;
+    },
+    get onPress() {
+      return ariaProps.onPress;
+    },
+    get onPressStart() {
+      return ariaProps.onPressStart;
+    },
+    get onPressEnd() {
+      return ariaProps.onPressEnd;
+    },
+    get onClick() {
+      return ariaProps.onClick;
+    },
+    get 'aria-label'() {
+      return ariaProps['aria-label'];
+    },
+    get 'aria-current'() {
+      return ariaProps['aria-current'];
+    },
+  });
+
+  // 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
+  }));
+
+  // Resolve render props
+  const renderProps = useRenderProps(
+    {
+      children: props.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: 'solidaria-BreadcrumbItem',
+    },
+    renderValues
+  );
+
+  // Merge inline flex styles with user styles
+  const mergedStyle = () => {
+    const userStyle = renderProps.style();
+    const baseStyle = { display: 'inline-flex', 'align-items': 'center' };
+    return userStyle ? { ...baseStyle, ...userStyle } : baseStyle;
+  };
+
+  return (
+    <a
+      {...(itemProps as Record<string, unknown>)}
+      class={renderProps.class()}
+      style={mergedStyle()}
+      data-current={isCurrent() || undefined}
+      data-disabled={isDisabled() || undefined}
+      data-pressed={isPressed() || undefined}
+    >
+      {renderProps.renderChildren()}
+    </a>
+  );
+}
+
+// Attach sub-components
+Breadcrumbs.Item = BreadcrumbItem;