@boxcustodia/library 2.0.0-alpha.3 → 2.0.0-alpha.31

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,1033 @@
+"use client";
+
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox";
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../hooks/internal";
+import { cn } from "../../lib";
+import { useIsInsideFieldRoot } from "../field";
+import { Input, inputBaseClasses } from "../input";
+import { ScrollArea } from "../scroll-area";
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+export const ComboboxContext: React.Context<{
+  chipsRef: React.RefObject<Element | null> | null;
+  multiple: boolean;
+}> = React.createContext<{
+  chipsRef: React.RefObject<Element | null> | null;
+  multiple: boolean;
+}>({
+  chipsRef: null,
+  multiple: false,
+});
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+export function ComboboxRoot<
+  Value,
+  Multiple extends boolean | undefined = false,
+>({
+  ...props
+}: ComboboxPrimitive.Root.Props<Value, Multiple>): React.ReactElement {
+  const chipsRef = React.useRef<Element | null>(null);
+  return (
+    <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>
+      <ComboboxPrimitive.Root {...props} />
+    </ComboboxContext.Provider>
+  );
+}
+
+export function ComboboxChipsInput({
+  className,
+  ...props
+}: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Input
+      className={cn(
+        "min-w-12 flex-1 text-base outline-none placeholder:text-muted-foreground sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5",
+        className,
+      )}
+      data-slot="combobox-chips-input"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxInput({
+  className,
+  showTrigger = true,
+  showClear = false,
+  startAddon,
+  triggerProps,
+  clearProps,
+  ...props
+}: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  ref?: React.Ref<HTMLInputElement>;
+  triggerProps?: ComboboxPrimitive.Trigger.Props;
+  clearProps?: ComboboxPrimitive.Clear.Props;
+}): React.ReactElement {
+  return (
+    <ComboboxPrimitive.InputGroup
+      className="relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64"
+      data-slot="combobox-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.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5"
+          data-slot="combobox-start-addon"
+        >
+          {startAddon}
+        </div>
+      )}
+      <ComboboxPrimitive.Input
+        className={cn(
+          startAddon &&
+            "*:data-[slot=combobox-input]:ps-[calc(--spacing(8.5)-1px)] sm:*:data-[slot=combobox-input]:ps-[calc(--spacing(8)-1px)]",
+          "pr-6",
+          className,
+        )}
+        data-slot="combobox-input"
+        render={(props) => (
+          <Input className="has-disabled:opacity-100" nativeInput {...props} />
+        )}
+        {...props}
+      />
+      <ComboboxEndAdornment
+        showTrigger={showTrigger}
+        showClear={showClear}
+        triggerProps={triggerProps}
+        clearProps={clearProps}
+      />
+    </ComboboxPrimitive.InputGroup>
+  );
+}
+
+export function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Trigger
+      className={className}
+      data-slot="combobox-trigger"
+      {...props}
+    >
+      {children}
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+export function ComboboxSelectTrigger({
+  className,
+  placeholder,
+  children,
+  showClear,
+  clearProps,
+  ...props
+}: ComboboxPrimitive.Trigger.Props & {
+  placeholder?: React.ReactNode;
+  showClear?: boolean;
+  clearProps?: ComboboxPrimitive.Clear.Props;
+}): React.ReactElement {
+  const trigger = (
+    <ComboboxPrimitive.Trigger
+      className={cn(
+        "relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow",
+        "focus-visible:border-ring",
+        "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "data-placeholder:text-muted-foreground",
+        className,
+      )}
+      data-slot="combobox-select-trigger"
+      {...props}
+    >
+      {children ?? <ComboboxPrimitive.Value placeholder={placeholder} />}
+    </ComboboxPrimitive.Trigger>
+  );
+
+  if (!showClear) {
+    return (
+      <ComboboxPrimitive.Trigger
+        className={cn(
+          "relative flex w-full items-center rounded-md border border-input bg-background px-3 py-2 pe-9 text-sm outline-none transition-shadow",
+          "focus-visible:border-ring",
+          "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
+          "data-disabled:cursor-not-allowed data-disabled:opacity-50",
+          "data-placeholder:text-muted-foreground",
+          className,
+        )}
+        data-slot="combobox-select-trigger"
+        {...props}
+      >
+        {children ?? (
+          <>
+            <ComboboxPrimitive.Value placeholder={placeholder} />
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute end-0.5 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center text-muted-foreground opacity-80 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4"
+            >
+              <ChevronsUpDownIcon />
+            </div>
+          </>
+        )}
+      </ComboboxPrimitive.Trigger>
+    );
+  }
+
+  return (
+    <div
+      className="relative w-full text-foreground has-disabled:opacity-64"
+      data-slot="combobox-select-trigger-group"
+    >
+      {trigger}
+      <ComboboxEndAdornment showTrigger showClear clearProps={clearProps} />
+    </div>
+  );
+}
+
+export function ComboboxSearchInput({
+  className,
+  ...props
+}: Omit<ComboboxPrimitive.Input.Props, "size"> & {
+  ref?: React.Ref<HTMLInputElement>;
+}): React.ReactElement {
+  return (
+    <div className="border-b p-2" data-slot="combobox-search-input-wrapper">
+      <ComboboxPrimitive.Input
+        className={cn(
+          "flex h-9 w-full rounded-md bg-transparent text-base placeholder:text-muted-foreground outline-none disabled:cursor-not-allowed disabled:opacity-64 sm:h-8 sm:text-sm",
+          className,
+        )}
+        autoComplete="off"
+        data-slot="combobox-search-input"
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function ComboboxPopup({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  alignOffset,
+  align = "start",
+  anchor: anchorProp,
+  portalProps,
+  ...props
+}: ComboboxPrimitive.Popup.Props & {
+  align?: ComboboxPrimitive.Positioner.Props["align"];
+  sideOffset?: ComboboxPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: ComboboxPrimitive.Positioner.Props["alignOffset"];
+  side?: ComboboxPrimitive.Positioner.Props["side"];
+  anchor?: ComboboxPrimitive.Positioner.Props["anchor"];
+  portalProps?: ComboboxPrimitive.Portal.Props;
+}): React.ReactElement {
+  const { chipsRef } = React.useContext(ComboboxContext);
+  const anchor = anchorProp ?? chipsRef;
+
+  return (
+    <ComboboxPrimitive.Portal {...portalProps}>
+      <ComboboxPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50 select-none"
+        data-slot="combobox-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ComboboxPrimitive.Popup
+          className={cn(
+            "relative flex max-h-[min(var(--available-height),23rem)] min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) flex-1 flex-col rounded-lg border bg-popover not-dark:bg-clip-padding text-foreground shadow-lg/5",
+            "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+            className,
+          )}
+          data-slot="combobox-popup"
+          {...props}
+        >
+          {children}
+        </ComboboxPrimitive.Popup>
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+export function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Item
+      className={cn(
+        "flex justify-between min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 px-2 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 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="combobox-item"
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator className="col-end-1">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+export function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border last:hidden", className)}
+      data-slot="combobox-separator"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxGroup({
+  className,
+  ...props
+}: ComboboxPrimitive.Group.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Group
+      className={cn("[[role=group]+&]:mt-1.5", className)}
+      data-slot="combobox-group"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxGroupLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs",
+        className,
+      )}
+      data-slot="combobox-group-label"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxEmpty({
+  className,
+  ...props
+}: ComboboxPrimitive.Empty.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Empty
+      className={cn(
+        "not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm",
+        className,
+      )}
+      data-slot="combobox-empty"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxRow({
+  className,
+  ...props
+}: ComboboxPrimitive.Row.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Row
+      className={className}
+      data-slot="combobox-row"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxValue({
+  ...props
+}: ComboboxPrimitive.Value.Props): React.ReactElement {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+export function ComboboxList({
+  className,
+  ...props
+}: ComboboxPrimitive.List.Props): React.ReactElement {
+  return (
+    <ScrollArea scrollbarGutter scrollFade>
+      <ComboboxPrimitive.List
+        className={cn(
+          "not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3",
+          className,
+        )}
+        data-slot="combobox-list"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+export function ComboboxClear({
+  className,
+  ...props
+}: ComboboxPrimitive.Clear.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Clear
+      className={className}
+      data-slot="combobox-clear"
+      {...props}
+    />
+  );
+}
+
+const endBtnClass =
+  "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-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.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+function ComboboxEndAdornment({
+  showTrigger = true,
+  showClear = false,
+  triggerProps,
+  clearProps,
+}: {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  triggerProps?: ComboboxPrimitive.Trigger.Props;
+  clearProps?: ComboboxPrimitive.Clear.Props;
+}): React.ReactElement | null {
+  if (!showTrigger && !showClear) return null;
+  return (
+    <div className="text-muted-foreground hover:text-foreground transition-colors">
+      {showTrigger && (
+        <ComboboxTrigger
+          className={cn(
+            endBtnClass,
+            "text-muted-foreground has-[+[data-slot=combobox-clear]]:hidden",
+          )}
+          {...triggerProps}
+        >
+          <ComboboxPrimitive.Icon data-slot="combobox-icon">
+            <ChevronsUpDownIcon />
+          </ComboboxPrimitive.Icon>
+        </ComboboxTrigger>
+      )}
+      {showClear && (
+        <ComboboxClear className={endBtnClass} {...clearProps}>
+          <XIcon />
+        </ComboboxClear>
+      )}
+    </div>
+  );
+}
+
+export function ComboboxStatus({
+  className,
+  ...props
+}: ComboboxPrimitive.Status.Props): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Status
+      className={cn(
+        "px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0",
+        className,
+      )}
+      data-slot="combobox-status"
+      {...props}
+    />
+  );
+}
+
+export function ComboboxCollection(
+  props: ComboboxPrimitive.Collection.Props,
+): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  );
+}
+
+export function ComboboxChips({
+  className,
+  children,
+  startAddon,
+  ...props
+}: ComboboxPrimitive.Chips.Props & {
+  startAddon?: React.ReactNode;
+}): React.ReactElement {
+  const { chipsRef } = React.useContext(ComboboxContext);
+  const insideField = useIsInsideFieldRoot();
+
+  const renderChips = (ariaInvalid: true | undefined) => (
+    <ComboboxPrimitive.Chips
+      aria-invalid={ariaInvalid}
+      className={cn(
+        inputBaseClasses,
+        "relative inline-flex pr-6 w-full flex-wrap gap-1",
+        "placeholder:text-muted-foreground",
+        "focus-within:border-ring",
+        "aria-invalid:border-error focus-within:aria-invalid:ring-error/20",
+        "has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        className,
+      )}
+      data-slot="combobox-chips"
+      ref={chipsRef as React.Ref<HTMLDivElement> | null}
+      {...props}
+    >
+      {startAddon && (
+        <div
+          aria-hidden="true"
+          className="flex shrink-0 items-center ps-2 opacity-80 has-[+[data-slot=combobox-chip]]:pe-2 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-ms-0.5 [&_svg]:-me-1.5"
+          data-slot="combobox-start-addon"
+        >
+          {startAddon}
+        </div>
+      )}
+      {children}
+    </ComboboxPrimitive.Chips>
+  );
+
+  if (!insideField) return renderChips(undefined);
+
+  return (
+    <FieldPrimitive.Validity>
+      {({ validity }) =>
+        renderChips(validity.valid === false ? true : undefined)
+      }
+    </FieldPrimitive.Validity>
+  );
+}
+
+export function ComboboxChip({
+  children,
+  removeProps,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  removeProps?: ComboboxPrimitive.ChipRemove.Props;
+}): React.ReactElement {
+  return (
+    <ComboboxPrimitive.Chip
+      className="flex my-auto items-center pl-1 rounded-[calc(var(--radius-md)-1px)] bg-accent font-medium text-accent-foreground text-sm outline-none sm:text-xs/(--text-xs--line-height) [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 h-6"
+      data-slot="combobox-chip"
+      {...props}
+    >
+      {children}
+      <ComboboxChipRemove {...removeProps} />
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+export function ComboboxChipRemove(
+  props: ComboboxPrimitive.ChipRemove.Props,
+): React.ReactElement {
+  return (
+    <ComboboxPrimitive.ChipRemove
+      aria-label="Quitar"
+      className="h-full shrink-0 cursor-pointer px-1 opacity-80 hover:opacity-100 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5"
+      data-slot="combobox-chip-remove"
+      {...props}
+    >
+      <XIcon />
+    </ComboboxPrimitive.ChipRemove>
+  );
+}
+
+// ─── Chip Overflow ────────────────────────────────────────────────────────────
+
+const CHIP_GAP = 4; // gap-1
+const CHIPS_PADDING_X = 24; // px-3 × 2
+const END_ADORNMENT = 36; // clear button + end-0.5 offset
+const OVERFLOW_WIDTH = 68; // max "+99 más" at text-sm + px-1
+
+function calculateChipVisible(
+  containerWidth: number,
+  chipWidths: number[],
+): number {
+  const available = containerWidth - CHIPS_PADDING_X - END_ADORNMENT;
+  let usedWidth = 0;
+  let count = 0;
+
+  for (let i = 0; i < chipWidths.length; i++) {
+    const chipWidth = chipWidths[i];
+    const willHaveOverflow = i < chipWidths.length - 1;
+
+    const projected =
+      usedWidth +
+      (i > 0 ? CHIP_GAP : 0) +
+      chipWidth +
+      (willHaveOverflow ? CHIP_GAP + OVERFLOW_WIDTH : 0);
+
+    if (projected > available) break;
+
+    usedWidth += (i > 0 ? CHIP_GAP : 0) + chipWidth;
+    count++;
+  }
+
+  return count;
+}
+
+function useChipOverflow(
+  itemCount: number,
+  containerRef: React.RefObject<Element | null> | null,
+): { visibleCount: number; isMeasuring: boolean } {
+  const [stableCount, setStableCount] = React.useState<{
+    items: number;
+    visible: number;
+  } | null>(null);
+  const chipWidthsRef = React.useRef<number[]>([]);
+
+  const isMeasuring = stableCount === null || stableCount.items !== itemCount;
+
+  useIsomorphicLayoutEffect(() => {
+    if (!isMeasuring) return;
+
+    const container = containerRef?.current as HTMLElement | null;
+    if (!container) return;
+
+    const chipEls = container.querySelectorAll('[data-slot="combobox-chip"]');
+    chipWidthsRef.current = Array.from(chipEls).map(
+      (el) => (el as HTMLElement).offsetWidth,
+    );
+
+    const visible = calculateChipVisible(
+      container.clientWidth,
+      chipWidthsRef.current,
+    );
+    setStableCount({ items: itemCount, visible });
+  }, [isMeasuring, itemCount, containerRef]);
+
+  // Fallback: fires after browser paint. Handles two failure modes of the layout effect:
+  // 1. container null on first commit (Base UI CompositeList chip registration races our effect)
+  // 2. chips measured with offsetWidth=0 before the browser has done a layout pass
+  React.useEffect(() => {
+    const hasBadMeasurement =
+      chipWidthsRef.current.length > 0 &&
+      chipWidthsRef.current.every((w) => w === 0);
+
+    if (!isMeasuring && !hasBadMeasurement) return;
+
+    const container = containerRef?.current as HTMLElement | null;
+    if (!container) return;
+
+    const chipEls = container.querySelectorAll('[data-slot="combobox-chip"]');
+    if (!chipEls.length) return;
+
+    const widths = Array.from(chipEls).map(
+      (el) => (el as HTMLElement).offsetWidth,
+    );
+    if (widths.every((w) => w === 0)) return;
+
+    chipWidthsRef.current = widths;
+    const visible = calculateChipVisible(container.clientWidth, widths);
+    setStableCount((prev) =>
+      prev ? { ...prev, visible } : { items: itemCount, visible },
+    );
+  }, [isMeasuring, itemCount, containerRef]);
+
+  React.useEffect(() => {
+    const container = containerRef?.current as HTMLElement | null;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      if (!chipWidthsRef.current.length) return;
+      const visible = calculateChipVisible(
+        container.clientWidth,
+        chipWidthsRef.current,
+      );
+      setStableCount((prev) => (prev ? { ...prev, visible } : null));
+    });
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [containerRef]);
+
+  return { visibleCount: stableCount?.visible ?? itemCount, isMeasuring };
+}
+
+function ComboboxMultipleChipsContent({
+  value,
+  getLabel,
+  getId,
+}: {
+  value: unknown[];
+  getLabel: (item: unknown) => string;
+  getId: (item: unknown) => string;
+}): React.ReactElement {
+  const { chipsRef } = React.useContext(ComboboxContext);
+  const { visibleCount, isMeasuring } = useChipOverflow(value.length, chipsRef);
+
+  const visibleItems = isMeasuring ? value : value.slice(0, visibleCount);
+  const hiddenCount = isMeasuring ? 0 : value.length - visibleCount;
+
+  return (
+    <>
+      {visibleItems.map((item) => (
+        <ComboboxChip key={getId(item)} aria-label={getLabel(item)}>
+          {getLabel(item)}
+        </ComboboxChip>
+      ))}
+      {hiddenCount > 0 && (
+        <span className="flex items-center whitespace-nowrap px-1 text-sm text-muted-foreground">
+          +{hiddenCount} más
+        </span>
+      )}
+    </>
+  );
+}
+
+// ─── Composite ────────────────────────────────────────────────────────────────
+
+function defaultGetLabel(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("label" in record) return String(record.label);
+    if ("name" in record) return String(record.name);
+    if ("title" in record) return String(record.title);
+  }
+  return String(item);
+}
+
+function defaultGetId(item: unknown): string {
+  if (item == null) return "";
+  if (typeof item === "string" || typeof item === "number") return String(item);
+  if (typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    if ("id" in record) return String(record.id);
+    if ("value" in record) return String(record.value);
+  }
+  return String(item);
+}
+
+function ComboboxSingleTrigger({
+  placeholder,
+  showClear,
+  startAddon,
+  className,
+}: {
+  placeholder?: string;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  className?: string;
+}): React.ReactElement {
+  return (
+    <ComboboxInput
+      className={className}
+      placeholder={placeholder}
+      showClear={showClear}
+      startAddon={startAddon}
+    />
+  );
+}
+
+function ComboboxMultipleTrigger({
+  getLabel,
+  getId,
+  showClear,
+  startAddon,
+  className,
+}: {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getLabel: (item: any) => string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getId: (item: any) => string;
+  showClear?: boolean;
+  startAddon?: React.ReactNode;
+  className?: string;
+}): React.ReactElement {
+  return (
+    <ComboboxChips className={className} startAddon={startAddon}>
+      <ComboboxValue>
+        {(value: unknown[]) => (
+          <ComboboxMultipleChipsContent
+            value={value}
+            getLabel={getLabel}
+            getId={getId}
+          />
+        )}
+      </ComboboxValue>
+      <ComboboxEndAdornment showTrigger={!showClear} showClear={showClear} />
+    </ComboboxChips>
+  );
+}
+
+type ComboboxId = string | number;
+
+/**
+ * Infers the id type from the shape of an item, mirroring `defaultGetId`'s
+ * lookup order (`id` before `value`, then the primitive itself). Lets the
+ * common case — `{ id, name }`, `{ label, value }`, or plain primitives — drive
+ * `value` / `onValueChange` typing with no explicit `getId`. Falls back to
+ * `string` for shapes `defaultGetId` can't address.
+ */
+type InferId<TItem> = TItem extends { id: infer I extends ComboboxId }
+  ? I
+  : TItem extends { value: infer V extends ComboboxId }
+    ? V
+    : TItem extends ComboboxId
+      ? TItem
+      : string;
+
+type ComboboxBaseProps<
+  TItem = unknown,
+  TId extends ComboboxId = InferId<TItem>,
+> = Omit<
+  ComboboxPrimitive.Root.Props<TItem, boolean>,
+  | "items"
+  | "itemToStringLabel"
+  | "itemToStringValue"
+  | "children"
+  | "multiple"
+  | "onValueChange"
+  | "value"
+  | "defaultValue"
+  | "isItemEqualToValue"
+> & {
+  items: readonly TItem[];
+  /** Returns the display text for an item. Used for filter matching, ARIA, and the trigger input. Defaults to `item.label`, `item.name`, `item.title`, or the stringified primitive. */
+  getLabel?: (item: TItem) => string;
+  /** Returns a stable id for an item. Used as the controlled `value`, React key, and hidden form value. Defaults to `item.id`, `item.value`, or the stringified primitive. */
+  getId?: (item: TItem) => TId;
+  renderItem?: (item: TItem) => React.ReactNode;
+  placeholder?: string;
+  emptyText?: string;
+  /** Icon or element displayed before the input text (single mode) or chips (multiple mode). */
+  startAddon?: React.ReactNode;
+  showClear?: boolean;
+  /** When false, hides the search input inside the popup in multiple-select mode. Default true. */
+  searchable?: boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Text input field in single-select mode. */
+    input?: string;
+    /** Chips container in multiple-select mode. */
+    chips?: string;
+    /** Search input inside the popup in multiple-select mode. */
+    chipsInput?: string;
+    /** Popup panel containing the item list. */
+    popup?: string;
+    /** Scrollable item list inside the popup. */
+    list?: string;
+    /** Individual item row. */
+    item?: string;
+    /** Rendered when no items match the search. */
+    empty?: string;
+  };
+};
+
+export type ComboboxProps<
+  TItem = unknown,
+  TId extends ComboboxId = InferId<TItem>,
+> =
+  | (ComboboxBaseProps<TItem, TId> & {
+      multiple?: false;
+      /** Controlled selection id. Pass the value returned by `getId` (string or number), not the item object. */
+      value?: TId | null;
+      /** Initial selection id for uncontrolled usage. */
+      defaultValue?: TId | null;
+      /** Called with the selected id and the full item when selection changes. Both are `null` when cleared. */
+      onValueChange?: (id: TId | null, item: TItem | null) => void;
+    })
+  | (ComboboxBaseProps<TItem, TId> & {
+      multiple: true;
+      /** Controlled selection ids for multiple mode. Pass the array of values returned by `getId`. */
+      value?: ReadonlyArray<TId>;
+      /** Initial selection ids for uncontrolled multiple mode. */
+      defaultValue?: ReadonlyArray<TId>;
+      /** Called with the array of selected ids and the array of full items when selection changes. */
+      onValueChange?: (ids: TId[], items: TItem[]) => void;
+    });
+
+/**
+ * Composite combobox for single and multiple selection.
+ *
+ * Items shaped as `{ id, name }`, `{ label, value }`, or plain strings/numbers
+ * work with no extra props. For other shapes, provide `getLabel` and/or `getId`.
+ *
+ * In multiple mode, chips are fit dynamically based on the container width —
+ * overflowing items show as "+N más". The popup anchors to the chips container automatically.
+ *
+ * `renderItem` customizes the content **inside** each `ComboboxItem` (the
+ * checkmark indicator is always rendered by the item wrapper).
+ *
+ * Use `ComboboxRoot` + primitives directly when you need full structural
+ * control beyond what escape-hatch props offer.
+ */
+export function Combobox<
+  TItem = unknown,
+  TId extends ComboboxId = InferId<TItem>,
+>(allProps: ComboboxProps<TItem, TId>): React.ReactElement {
+  // Cast internally — ComboboxProps discriminated union enforces correctness for consumers.
+  // The union can't be spread directly into ComboboxRoot because TypeScript can't resolve
+  // which branch is active at the call site.
+  const {
+    items,
+    getLabel: getLabelProp,
+    getId: getIdProp,
+    renderItem,
+    placeholder,
+    emptyText = "Sin resultados.",
+    multiple,
+    onValueChange,
+    value,
+    defaultValue,
+    startAddon,
+    classNames,
+    showClear = true,
+    searchable = true,
+    ...rest
+  } = allProps as ComboboxBaseProps<TItem, TId> & {
+    multiple?: boolean;
+    onValueChange?: (v: any, e?: any) => void;
+    value?: any;
+    defaultValue?: any;
+  };
+
+  const getLabel: (item: TItem) => string = getLabelProp ?? defaultGetLabel;
+  const getId = (getIdProp ?? defaultGetId) as (item: TItem) => TId;
+
+  // Base UI matches the selected value against item values by `Object.is`, so
+  // the composite keys every option by a normalized string. `value` arrives as
+  // the id (string or number); `String(...)` normalizes both to that same key,
+  // so matching stays stable across string/number ids.
+  const itemKey = (item: TItem): string => String(getId(item));
+  const findByKey = (key: string): TItem | null =>
+    items.find((i) => itemKey(i) === key) ?? null;
+
+  // Warn (dev only, once) when two items resolve to the same id — e.g. objects
+  // with only a `title` and no `id`/`value`, which collapse to "[object Object]".
+  const warnedRef = React.useRef(false);
+  if (process.env.NODE_ENV !== "production" && !warnedRef.current) {
+    const seen = new Set<string>();
+    const dupes = new Set<string>();
+    for (const item of items) {
+      const key = itemKey(item);
+      if (seen.has(key)) dupes.add(key);
+      seen.add(key);
+    }
+    if (dupes.size > 0) {
+      warnedRef.current = true;
+      console.warn(
+        `[Combobox] Multiple items resolve to the same id (${[...dupes].join(", ")}). ` +
+          "Provide a `getId` that returns a unique value per item.",
+      );
+    }
+  }
+
+  const objectValue = multiple
+    ? ((value as ReadonlyArray<TId> | undefined)
+        ?.map((v) => findByKey(String(v)))
+        .filter(Boolean) as TItem[] | undefined)
+    : value == null
+      ? (value as null | undefined)
+      : findByKey(String(value as TId));
+
+  const objectDefaultValue = multiple
+    ? ((defaultValue as ReadonlyArray<TId> | undefined)
+        ?.map((v) => findByKey(String(v)))
+        .filter(Boolean) as TItem[] | undefined)
+    : defaultValue == null
+      ? undefined
+      : findByKey(String(defaultValue as TId));
+
+  const handleChange = (v: TItem | TItem[] | null) => {
+    if (multiple) {
+      const items_ = (v as TItem[]) ?? [];
+      onValueChange?.(items_.map(getId), items_);
+    } else {
+      const item = (v as TItem | null) ?? null;
+      onValueChange?.(item ? getId(item) : null, item);
+    }
+  };
+
+  return (
+    <ComboboxRoot
+      items={items}
+      itemToStringLabel={getLabel}
+      itemToStringValue={getId as (item: TItem) => string}
+      multiple={multiple as boolean}
+      onValueChange={handleChange as any}
+      value={objectValue as any}
+      defaultValue={objectDefaultValue as any}
+      isItemEqualToValue={(a, b) => itemKey(a) === itemKey(b)}
+      autoHighlight
+      loopFocus
+      {...rest}
+    >
+      {multiple ? (
+        <ComboboxMultipleTrigger
+          getLabel={getLabel}
+          getId={getId as (item: any) => string}
+          showClear={showClear}
+          startAddon={startAddon}
+          className={classNames?.chips}
+        />
+      ) : (
+        <ComboboxSingleTrigger
+          placeholder={placeholder}
+          showClear={showClear}
+          startAddon={startAddon}
+          className={classNames?.input}
+        />
+      )}
+      <ComboboxPopup className={classNames?.popup}>
+        {multiple && searchable && (
+          <div
+            className="border-b p-2"
+            data-slot="combobox-chips-input-wrapper"
+          >
+            <ComboboxChipsInput
+              className={classNames?.chipsInput}
+              placeholder={placeholder}
+            />
+          </div>
+        )}
+        <ComboboxEmpty className={classNames?.empty}>{emptyText}</ComboboxEmpty>
+        <ComboboxList className={classNames?.list}>
+          {(item: TItem) => (
+            <ComboboxItem
+              key={getId(item)}
+              value={item}
+              className={classNames?.item}
+            >
+              {renderItem ? renderItem(item) : getLabel(item)}
+            </ComboboxItem>
+          )}
+        </ComboboxList>
+      </ComboboxPopup>
+    </ComboboxRoot>
+  );
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export const useComboboxFilter: typeof ComboboxPrimitive.useFilter =
+  ComboboxPrimitive.useFilter;
+
+export { ComboboxPrimitive };