@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/ActionGroup.tsx

@@ -18,33 +18,29 @@ import {
   splitProps,
   useContext,
   For,
-} from 'solid-js';
+} from "solid-js";
 import {
   createActionGroup,
   createActionGroupItem,
   type AriaActionGroupProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createListState,
   type ListState,
   type Key,
   type SelectionMode,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
 
 export interface ActionGroupRenderProps {
   /** The orientation of the action group. */
-  orientation: 'horizontal' | 'vertical';
+  orientation: "horizontal" | "vertical";
   /** Whether the entire group is disabled. */
   isDisabled: boolean;
   /** The selection mode. */
@@ -67,26 +63,25 @@ export interface ActionGroupItem {
   [key: string]: unknown;
 }
 
-export interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem>
-  extends SlotProps {
+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';
+  orientation?: "horizontal" | "vertical";
   /** Whether the entire group is disabled. */
   isDisabled?: boolean;
   /** Accessible label. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Labelled-by id. */
-  'aria-labelledby'?: string;
+  "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;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** Handler called when an item action is triggered. */
   onAction?: (key: Key) => void;
   /** Keys of disabled items. */
@@ -99,10 +94,6 @@ export interface ActionGroupProps<T extends ActionGroupItem = ActionGroupItem>
   style?: StyleOrFunction<ActionGroupRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroupItem> {
   state: ListState<T>;
 }
@@ -110,31 +101,27 @@ export interface ActionGroupContextValue<T extends ActionGroupItem = ActionGroup
 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>
+  props: ActionGroupProps<T>,
 ): JSX.Element {
   const [local, ariaGroupProps, domProps] = splitProps(
     props,
     [
-      'items',
-      'selectionMode',
-      'orientation',
-      'isDisabled',
-      'selectedKeys',
-      'defaultSelectedKeys',
-      'onSelectionChange',
-      'onAction',
-      'disabledKeys',
-      'children',
-      'class',
-      'style',
-      'slot',
+      "items",
+      "selectionMode",
+      "orientation",
+      "isDisabled",
+      "selectedKeys",
+      "defaultSelectedKeys",
+      "onSelectionChange",
+      "onAction",
+      "disabledKeys",
+      "children",
+      "class",
+      "style",
+      "slot",
     ],
-    ['aria-label', 'aria-labelledby']
+    ["aria-label", "aria-labelledby"],
   );
 
   const state = createListState<T>({
@@ -142,7 +129,7 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
       return local.items;
     },
     get selectionMode() {
-      return local.selectionMode ?? 'none';
+      return local.selectionMode ?? "none";
     },
     get selectedKeys() {
       return local.selectedKeys;
@@ -171,11 +158,11 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
     get orientation() {
       return local.orientation;
     },
-    get 'aria-label'() {
-      return ariaGroupProps['aria-label'];
+    get "aria-label"() {
+      return ariaGroupProps["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return ariaGroupProps['aria-labelledby'];
+    get "aria-labelledby"() {
+      return ariaGroupProps["aria-labelledby"];
     },
     get onAction() {
       return local.onAction;
@@ -184,23 +171,25 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
 
   const { actionGroupProps } = createActionGroup(groupAriaProps, state as ListState<T>);
 
-  const orientation = () => local.orientation ?? 'horizontal';
+  const orientation = () => local.orientation ?? "horizontal";
 
   const renderProps = useRenderProps(
     {
       children: undefined,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ActionGroup',
+      defaultClassName: "solidaria-ActionGroup",
     },
     () => ({
       orientation: orientation(),
       isDisabled: !!local.isDisabled,
-      selectionMode: (local.selectionMode ?? 'none') as SelectionMode,
-    })
+      selectionMode: (local.selectionMode ?? "none") as SelectionMode,
+    }),
   );
 
-  const filteredDOMProps = createMemo(() => filterDOMProps(domProps as Record<string, unknown>, { global: true }));
+  const filteredDOMProps = createMemo(() =>
+    filterDOMProps(domProps as Record<string, unknown>, { global: true }),
+  );
 
   return (
     <ActionGroupContext.Provider value={{ state: state as ListState<ActionGroupItem> }}>
@@ -223,7 +212,12 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
               <ActionGroupItemWrapper
                 item={item}
                 state={state as ListState<ActionGroupItem>}
-                renderChild={local.children as (item: ActionGroupItem, rp: ActionGroupItemRenderProps) => JSX.Element}
+                renderChild={
+                  local.children as (
+                    item: ActionGroupItem,
+                    rp: ActionGroupItemRenderProps,
+                  ) => JSX.Element
+                }
               />
             )}
           </For>
@@ -233,10 +227,6 @@ export function ActionGroup<T extends ActionGroupItem = ActionGroupItem>(
   );
 }
 
-// ============================================
-// INTERNAL ITEM WRAPPER
-// ============================================
-
 interface ActionGroupItemWrapperProps {
   item: ActionGroupItem;
   state: ListState<ActionGroupItem>;
@@ -245,14 +235,18 @@ interface ActionGroupItemWrapperProps {
 
 function ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element {
   const { buttonProps } = createActionGroupItem(
-    { get key() { return props.item.id; } },
-    props.state
+    {
+      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));
+    return keys === "all" || (keys instanceof Set && keys.has(props.item.id));
   };
   const isDisabled = () => props.state.isDisabled(props.item.id);
 
@@ -262,7 +256,9 @@ function ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element
     isFocused: isFocused(),
   }));
 
-  const { ref: _ref, ...restButtonProps } = buttonProps as Record<string, unknown> & { ref?: unknown };
+  const { ref: _ref, ...restButtonProps } = buttonProps as Record<string, unknown> & {
+    ref?: unknown;
+  };
 
   return (
     <button
@@ -276,10 +272,6 @@ function ActionGroupItemWrapper(props: ActionGroupItemWrapperProps): JSX.Element
   );
 }
 
-// ============================================
-// HOOKS
-// ============================================
-
 export function useActionGroupContext(): ActionGroupContextValue | null {
   return useContext(ActionGroupContext);
 }

package/src/Alert.tsx

@@ -6,27 +6,17 @@
  * for styling/composition only.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  splitProps,
-  useContext,
-} from 'solid-js';
+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
-// ============================================
+} from "./utils";
+import { Button, type ButtonProps } from "./Button";
 
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+export type AlertVariant = "info" | "success" | "warning" | "error";
 
 export interface AlertRenderProps {
   /** The variant of the alert. */
@@ -52,10 +42,6 @@ export interface AlertProps extends SlotProps {
   id?: string;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export interface AlertContextValue {
   variant: () => AlertVariant;
   isDismissible: () => boolean;
@@ -64,10 +50,6 @@ export interface AlertContextValue {
 
 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.
@@ -84,19 +66,18 @@ export const AlertContext = createContext<AlertContextValue | null>(null);
  */
 export function Alert(props: AlertProps): JSX.Element {
   const [local, rest] = splitProps(props, [
-    'children',
-    'class',
-    'style',
-    'slot',
-    'variant',
-    'isDismissible',
-    'onDismiss',
+    "children",
+    "class",
+    "style",
+    "slot",
+    "variant",
+    "isDismissible",
+    "onDismiss",
   ]);
 
-  const variant = () => local.variant ?? 'info';
+  const variant = () => local.variant ?? "info";
   const isDismissible = () => !!local.isDismissible;
 
-  // Render props values
   const renderValues = createMemo<AlertRenderProps>(() => ({
     variant: variant(),
     isDismissible: isDismissible(),
@@ -108,18 +89,16 @@ export function Alert(props: AlertProps): JSX.Element {
   // is in scope, breaking context for sub-components.
   const computedClass = createMemo(() => {
     const cls = local.class;
-    return typeof cls === 'function' ? cls(renderValues()) : cls ?? 'solidaria-Alert';
+    return typeof cls === "function" ? cls(renderValues()) : (cls ?? "solidaria-Alert");
   });
 
   const computedStyle = createMemo(() => {
     const s = local.style;
-    return typeof s === 'function' ? s(renderValues()) : s;
+    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,
@@ -138,7 +117,7 @@ export function Alert(props: AlertProps): JSX.Element {
         data-variant={variant()}
         data-dismissible={isDismissible() || undefined}
       >
-        {typeof local.children === 'function'
+        {typeof local.children === "function"
           ? (local.children as (props: AlertRenderProps) => JSX.Element)(renderValues())
           : local.children}
       </div>
@@ -146,11 +125,7 @@ export function Alert(props: AlertProps): JSX.Element {
   );
 }
 
-// ============================================
-// ALERT DISMISS BUTTON
-// ============================================
-
-export interface AlertDismissButtonProps extends Omit<ButtonProps, 'onPress'> {}
+export interface AlertDismissButtonProps extends Omit<ButtonProps, "onPress"> {}
 
 /**
  * A dismiss button for use inside an Alert.
@@ -170,7 +145,7 @@ export function AlertDismissButton(props: AlertDismissButtonProps): JSX.Element
   return (
     <Button
       {...props}
-      aria-label={props['aria-label'] ?? 'Dismiss'}
+      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', 'collectionId', 'collectionAriaLabel']
-  )
-
-  // 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>
-  )
+  );
 }