@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.15

package/src/components/auto-complete/auto-complete.tsx

@@ -1,82 +1,434 @@
-import { ComponentProps } from "react";
-import { ClassName } from "@/models";
-import {
-  AutoCompleteEmpty,
-  AutoCompleteInput,
-  AutoCompleteItem,
-  AutoCompleteList,
-  AutoCompleteRoot,
-  AutoCompleteShortcut,
-} from "../../components";
-
-interface AutoCompleteItem {
-  value: string;
-  label: string;
-  shortcut?: string;
+"use client";
+
+import { Autocomplete as AutocompletePrimitive } from "@base-ui/react/autocomplete";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import type React from "react";
+import { cn } from "../../lib";
+import { inputBaseClasses } from "../input";
+import { ScrollArea } from "../scroll-area";
+
+export const AutocompleteRoot = AutocompletePrimitive.Root;
+
+export function AutocompleteInput({
+  className,
+  adornment,
+  startAddon,
+  triggerProps,
+  clearProps,
+  ...props
+}: AutocompletePrimitive.Input.Props & {
+  adornment?: "trigger" | "clear";
+  startAddon?: React.ReactNode;
+  ref?: React.Ref<HTMLInputElement>;
+  triggerProps?: AutocompletePrimitive.Trigger.Props;
+  clearProps?: AutocompletePrimitive.Clear.Props;
+}): React.ReactElement {
+  return (
+    <AutocompletePrimitive.InputGroup
+      className="relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64"
+      data-slot="autocomplete-input-group"
+    >
+      {startAddon && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 [&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5"
+          data-slot="autocomplete-start-addon"
+        >
+          {startAddon}
+        </div>
+      )}
+      <AutocompletePrimitive.Input
+        className={cn(
+          inputBaseClasses,
+          "focus-visible:border-ring",
+          "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          startAddon && "ps-9",
+          adornment && "pe-9",
+          className,
+        )}
+        data-slot="autocomplete-input"
+        render={<input autoComplete="off" data-slot="input" />}
+        {...props}
+      />
+      {adornment === "clear" ? (
+        <AutocompleteClear {...clearProps} />
+      ) : adornment === "trigger" ? (
+        <AutocompleteTrigger {...triggerProps} />
+      ) : null}
+    </AutocompletePrimitive.InputGroup>
+  );
+}
+
+export function AutocompletePopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  alignOffset,
+  align = "start",
+  anchor,
+  portalProps,
+  ...props
+}: AutocompletePrimitive.Popup.Props & {
+  align?: AutocompletePrimitive.Positioner.Props["align"];
+  sideOffset?: AutocompletePrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: AutocompletePrimitive.Positioner.Props["alignOffset"];
+  side?: AutocompletePrimitive.Positioner.Props["side"];
+  anchor?: AutocompletePrimitive.Positioner.Props["anchor"];
+  portalProps?: AutocompletePrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Portal {...portalProps}>
+      <AutocompletePrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 select-none"
+        data-slot="autocomplete-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <span
+          className={cn(
+            "relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover shadow-lg/5 transition-[scale,opacity]",
+            className,
+          )}
+        >
+          <AutocompletePrimitive.Popup
+            className="flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground"
+            data-slot="autocomplete-popup"
+            {...props}
+          >
+            {children}
+          </AutocompletePrimitive.Popup>
+        </span>
+      </AutocompletePrimitive.Positioner>
+    </AutocompletePrimitive.Portal>
+  );
+}
+
+export function AutocompleteList({
+  className,
+  ...props
+}: AutocompletePrimitive.List.Props): React.ReactElement {
+  return (
+    <ScrollArea scrollbarGutter scrollFade>
+      <AutocompletePrimitive.List
+        className={cn(
+          "not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3",
+          className,
+        )}
+        data-slot="autocomplete-list"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+export function AutocompleteItem({
+  className,
+  children,
+  ...props
+}: AutocompletePrimitive.Item.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Item
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm",
+        className,
+      )}
+      data-slot="autocomplete-item"
+      {...props}
+    >
+      {children}
+    </AutocompletePrimitive.Item>
+  );
+}
+
+export function AutocompleteSeparator({
+  className,
+  ...props
+}: AutocompletePrimitive.Separator.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border last:hidden", className)}
+      data-slot="autocomplete-separator"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteGroup({
+  className,
+  ...props
+}: AutocompletePrimitive.Group.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Group
+      className={cn("[[role=group]+&]:mt-1.5", className)}
+      data-slot="autocomplete-group"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteGroupLabel({
+  className,
+  ...props
+}: AutocompletePrimitive.GroupLabel.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs",
+        className,
+      )}
+      data-slot="autocomplete-group-label"
+      {...props}
+    />
+  );
 }
 
-interface ExtendedProps {
-  containerClassName: ClassName;
-  inputClassName: ClassName;
-  listClassName: ClassName;
-  itemClassName: ClassName;
-  emptyClassName: ClassName;
-  containerProps: ComponentProps<typeof AutoCompleteRoot>;
-  inputProps: ComponentProps<typeof AutoCompleteInput>;
-  listProps: ComponentProps<typeof AutoCompleteList>;
-  itemProps: ComponentProps<typeof AutoCompleteItem>;
-  emptyProps: ComponentProps<typeof AutoCompleteEmpty>;
+export function AutocompleteEmpty({
+  className,
+  ...props
+}: AutocompletePrimitive.Empty.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Empty
+      className={cn(
+        "p-2 text-center text-base text-muted-foreground sm:text-sm empty:hidden",
+        className,
+      )}
+      data-slot="autocomplete-empty"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteTrigger({
+  className,
+  children,
+  ...props
+}: AutocompletePrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Trigger
+      className={cn(
+        "absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="autocomplete-trigger"
+      {...props}
+    >
+      {children ?? (
+        <AutocompletePrimitive.Icon data-slot="autocomplete-icon">
+          <ChevronsUpDownIcon />
+        </AutocompletePrimitive.Icon>
+      )}
+    </AutocompletePrimitive.Trigger>
+  );
+}
+
+export function AutocompleteClear({
+  className,
+  children,
+  ...props
+}: AutocompletePrimitive.Clear.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Clear
+      className={cn(
+        "absolute end-0.5 top-1/2 inline-flex size-8 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="autocomplete-clear"
+      {...props}
+    >
+      {children ?? <XIcon />}
+    </AutocompletePrimitive.Clear>
+  );
+}
+
+/**
+ * Groups items into a horizontal row within the list.
+ * Use to create multi-column grid layouts (color swatches, icon grids, emoji pickers).
+ * Each `AutocompleteItem` inside the row remains fully keyboard-navigable.
+ *
+ * ```tsx
+ * <AutocompleteList>
+ *   {(row) => (
+ *     <AutocompleteRow key={row.id}>
+ *       {row.items.map((item) => (
+ *         <AutocompleteItem key={item.value} value={item}>
+ *           {item.label}
+ *         </AutocompleteItem>
+ *       ))}
+ *     </AutocompleteRow>
+ *   )}
+ * </AutocompleteList>
+ * ```
+ */
+export function AutocompleteRow({
+  className,
+  ...props
+}: AutocompletePrimitive.Row.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Row
+      className={className}
+      data-slot="autocomplete-row"
+      {...props}
+    />
+  );
+}
+
+/**
+ * Renders the selected value's label outside the input element.
+ * Useful when building custom trigger-style layouts where the selected item
+ * must be displayed independently — e.g., inside a badge, a button, or a custom
+ * trigger that replaces the input entirely.
+ * Renders nothing when no item is selected.
+ */
+export function AutocompleteValue({
+  ...props
+}: AutocompletePrimitive.Value.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Value data-slot="autocomplete-value" {...props} />
+  );
+}
+
+export function AutocompleteStatus({
+  className,
+  ...props
+}: AutocompletePrimitive.Status.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Status
+      className={cn(
+        "px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",
+        className,
+      )}
+      data-slot="autocomplete-status"
+      {...props}
+    />
+  );
+}
+
+export function AutocompleteCollection({
+  ...props
+}: AutocompletePrimitive.Collection.Props): React.ReactElement {
+  return (
+    <AutocompletePrimitive.Collection
+      data-slot="autocomplete-collection"
+      {...props}
+    />
+  );
 }
 
-interface Props extends ExtendedProps {
-  items: AutoCompleteItem[];
+export const useAutocompleteFilter: typeof AutocompletePrimitive.useFilter =
+  AutocompletePrimitive.useFilter;
+
+// ─── Composite ───────────────────────────────────────────────────────────────
+export interface AutocompleteOption {
+  value: string;
+  label: string;
+}
+
+interface AutocompleteProps<
+  TOption extends AutocompleteOption = AutocompleteOption,
+> {
+  items: TOption[];
+  value?: TOption | null;
+  defaultValue?: TOption | null;
+  onValueChange?: (value: TOption | null) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  isLoading?: boolean;
+  filter?: AutocompletePrimitive.Root.Props<TOption>["filter"];
+  autoHighlight?: boolean | "always";
   placeholder?: string;
   emptyMessage?: string;
-  onSelect?: (value: AutoCompleteItem["value"], item: AutoCompleteItem) => any;
+  loadingMessage?: string;
+  renderOption?: (option: TOption) => React.ReactNode;
+  adornment?: "trigger" | "clear";
+  startAddon?: React.ReactNode;
+  /** Styles the input field. */
+  className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Dropdown popup container. */
+    popup?: string;
+    /** Scrollable list inside the popup. */
+    list?: string;
+    /** Each option item. */
+    item?: string;
+    /** Empty state message. */
+    empty?: string;
+    /** Status row (e.g. loading message). */
+    status?: string;
+  };
 }
 
-export const AutoComplete = ({
+export function Autocomplete<
+  TOption extends AutocompleteOption = AutocompleteOption,
+>({
   items,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  readOnly,
+  isLoading = false,
+  filter,
+  autoHighlight,
   placeholder = "Buscar...",
-  emptyMessage = "No se encontraron resultados",
-  onSelect,
-  containerClassName,
-  containerProps,
-  inputClassName,
-  inputProps,
-  listClassName,
-  listProps,
-  itemClassName,
-  itemProps,
-  emptyClassName,
-  emptyProps,
-}: Props) => {
+  emptyMessage = "Sin resultados",
+  loadingMessage = "Cargando...",
+  renderOption,
+  adornment,
+  startAddon,
+  className,
+  classNames,
+}: AutocompleteProps<TOption>): React.ReactElement {
   return (
-    <AutoCompleteRoot className={containerClassName} {...containerProps}>
-      <AutoCompleteInput
+    <AutocompleteRoot
+      items={items}
+      value={value?.label}
+      defaultValue={defaultValue?.label}
+      onValueChange={(opt) =>
+        onValueChange?.((opt as unknown as TOption | undefined) ?? null)
+      }
+      disabled={disabled}
+      readOnly={readOnly}
+      filter={filter}
+      autoHighlight={autoHighlight}
+      itemToStringValue={(opt) => (opt as TOption).label}
+    >
+      <AutocompleteInput
+        adornment={adornment}
+        startAddon={startAddon}
         placeholder={placeholder}
-        className={inputClassName}
-        {...inputProps}
+        className={className}
       />
-      <AutoCompleteList className={listClassName} {...listProps}>
-        {(items as AutoCompleteItem[]).map((item) => (
-          <AutoCompleteItem
-            className={itemClassName}
-            key={item.value}
-            onSelect={() => onSelect?.(item.value, item)}
-            {...itemProps}
-          >
-            {item.label}
-            {item.shortcut && (
-              <AutoCompleteShortcut>{item.shortcut}</AutoCompleteShortcut>
-            )}
-          </AutoCompleteItem>
-        ))}
-      </AutoCompleteList>
-
-      <AutoCompleteEmpty className={emptyClassName} {...emptyProps}>
-        {emptyMessage}
-      </AutoCompleteEmpty>
-    </AutoCompleteRoot>
+      <AutocompletePopup className={classNames?.popup}>
+        <AutocompleteStatus className={classNames?.status}>
+          {isLoading ? loadingMessage : undefined}
+        </AutocompleteStatus>
+        <AutocompleteList className={classNames?.list}>
+          {(option) => (
+            <AutocompleteItem
+              key={(option as TOption).value}
+              value={option}
+              className={classNames?.item}
+            >
+              {renderOption
+                ? renderOption(option as TOption)
+                : (option as TOption).label}
+            </AutocompleteItem>
+          )}
+        </AutocompleteList>
+        {!isLoading && (
+          <AutocompleteEmpty className={classNames?.empty}>
+            {emptyMessage}
+          </AutocompleteEmpty>
+        )}
+      </AutocompletePopup>
+    </AutocompleteRoot>
   );
-};
+}
+
+export { AutocompletePrimitive };

package/src/components/auto-complete/index.ts

@@ -1,2 +1 @@
 export * from "./auto-complete";
-export * from "./auto-complete-primitives";