raft-ui 0.0.1

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,603 @@
+import { createContext, use, useState, type ComponentPropsWithRef } from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Check, X } from "lucide-react";
+import { tv } from "../../lib/tv.ts";
+import type { StyledProps } from "../../lib/styled-props.ts";
+import { useThemeFamily } from "../../lib/theme/use-theme.ts";
+import { Button } from "../button/index.ts";
+
+const combobox = tv({
+  slots: {
+    trigger: [
+      "inline-flex select-none items-center justify-between gap-2",
+      "outline-none transition-colors",
+      "[&_[data-slot='button-content']]:w-full [&_[data-slot='button-content']]:justify-between",
+      "[&>span[data-slot='combobox-trigger-content']]:min-w-0 [&>span[data-slot='combobox-trigger-content']]:flex-1",
+      "[&_[data-slot='combobox-trigger-content']_svg]:!size-3 [&_[data-slot='combobox-trigger-content']_svg]:shrink-0 [&_[data-slot='combobox-trigger-content']_svg]:!stroke-[1.5] [&_[data-slot='combobox-trigger-content']_svg_*]:!stroke-[1.5]",
+      "[&_[data-slot='combobox-trigger-indicator']]:!stroke-[1.5] [&_[data-slot='combobox-trigger-indicator']_*]:!stroke-[1.5]",
+    ],
+    triggerIndicator: ["ml-auto flex shrink-0 items-center justify-center opacity-60"],
+    control: [
+      "flex min-w-0 items-center gap-2",
+      "outline-none transition-colors",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+      "[&_[data-slot='combobox-input']]:min-w-0 [&_[data-slot='combobox-input']]:flex-1",
+      "[&_[data-slot='combobox-input']]:border-0 [&_[data-slot='combobox-input']]:bg-transparent [&_[data-slot='combobox-input']]:p-0",
+      "[&_[data-slot='combobox-input']]:shadow-none [&_[data-slot='combobox-input']]:outline-none [&_[data-slot='combobox-input']]:ring-0",
+      "[&_[data-slot='combobox-input']]:focus:border-transparent [&_[data-slot='combobox-input']]:focus:ring-0 [&_[data-slot='combobox-input']]:focus-visible:ring-0",
+      "[&_[data-slot='combobox-clear']]:size-5 [&_[data-slot='combobox-clear']]:min-w-5 [&_[data-slot='combobox-clear']]:shrink-0",
+      "[&_[data-slot='combobox-trigger-indicator']]:size-4",
+      "[&_[data-slot='combobox-trigger-indicator']_svg]:!size-3.5 [&_[data-slot='combobox-trigger-indicator']_svg]:shrink-0",
+    ],
+    inputGroup: ["flex items-center gap-2 border-b px-2 py-2"],
+    input: ["w-full outline-none"],
+    positioner: ["isolate z-50 outline-none"],
+    content: [
+      "h-auto max-h-[var(--available-height)] min-w-[220px] overflow-hidden bg-layer-panel",
+      "outline-none",
+    ],
+    header: ["flex items-center justify-between px-3 py-2"],
+    separator: ["h-px shrink-0 border-0"],
+    list: ["max-h-64 overflow-y-auto overscroll-contain scroll-py-1"],
+    item: [
+      "flex w-full shrink-0 cursor-default select-none items-center justify-between gap-2 overflow-hidden px-3 py-1.5",
+      "text-left outline-none transition-colors",
+    ],
+    itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center"],
+    label: ["m-0 font-medium"],
+    clear: [
+      "inline-flex h-5 min-w-8 items-center justify-center",
+      "pointer-events-none opacity-0 outline-none transition-colors",
+      "data-[visible]:pointer-events-auto data-[visible]:opacity-100",
+    ],
+    empty: ["px-3 py-4 text-center text-sm"],
+    groupLabel: ["px-3 py-2"],
+    chips: ["flex min-h-9 flex-wrap items-center gap-1"],
+    chip: ["inline-flex items-center gap-1"],
+    chipRemove: ["inline-flex items-center justify-center outline-none transition-colors"],
+  },
+  variants: {
+    theme: {
+      brutal: {
+        trigger: [
+          "font-sans text-sm font-semibold text-black",
+          "data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+          "data-[popup-open]:hover:translate-x-0 data-[popup-open]:hover:translate-y-0",
+        ],
+        inputGroup: ["border-black bg-white"],
+        input: [
+          "border-2 border-line-strong bg-layer-panel px-2 py-1 font-mono text-xs",
+          "shadow-[var(--shadow)] focus:shadow-[var(--shadow-hover)]",
+        ],
+        content: ["border-2 border-black bg-white shadow-lg"],
+        separator: ["bg-black"],
+        item: [
+          "border-b border-black/10 bg-white font-sans text-sm font-semibold leading-6 text-black last:border-b-0",
+          "hover:bg-brutal-yellow/30 data-[highlighted]:bg-brutal-yellow/30",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-black/30",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-2 [&_svg_*]:stroke-2 [&_svg:not([class*='size-'])]:size-3",
+        ],
+        itemIndicator: ["text-black"],
+        label: ["font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black"],
+        clear: [
+          "font-sans text-[10px] font-bold uppercase tracking-wide text-black hover:text-black",
+          "[&_svg]:![stroke-width:2] [&_svg_*]:![stroke-width:2]",
+        ],
+        triggerIndicator: [
+          "text-black opacity-100",
+          "[&_svg]:![stroke-width:2] [&_svg_*]:![stroke-width:2]",
+        ],
+        control: [
+          "border-2 border-line-strong bg-white px-2 py-1",
+          "font-sans text-sm font-semibold text-black shadow-[var(--shadow)]",
+          "focus-within:shadow-[var(--shadow-hover)]",
+          "data-[popup-open]:translate-x-0 data-[popup-open]:translate-y-0",
+          "[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5] [&_svg_*]:fill-none",
+          "[&_[data-slot='combobox-input']]:font-sans [&_[data-slot='combobox-input']]:text-sm [&_[data-slot='combobox-input']]:font-semibold [&_[data-slot='combobox-input']]:text-black",
+          "[&_[data-slot='combobox-input']::placeholder]:text-black/40",
+        ],
+        empty: ["font-sans text-sm font-semibold text-black/50"],
+        groupLabel: [
+          "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60",
+        ],
+        chips: ["border-2 border-line-strong bg-white px-2 py-1"],
+        chip: ["border border-black bg-brutal-yellow px-1.5 py-0.5 font-sans text-xs font-bold"],
+        chipRemove: ["text-black/50 hover:text-black"],
+      },
+      elegant: {
+        trigger: [
+          "text-sm font-medium tracking-[-0.005em] text-foreground-muted",
+          "[&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5]",
+        ],
+        inputGroup: ["border-line-muted bg-layer-popover px-1.5 pt-1 pb-2"],
+        input: [
+          "rounded-sm border border-line-subtle bg-layer-field px-2 py-1 text-sm",
+          "text-foreground outline-none transition duration-150",
+          "placeholder:text-foreground-placeholder/70",
+          "focus:border-line-strong/25 focus-visible:ring-2 focus-visible:ring-line-strong/8",
+        ],
+        content: ["rounded-md bg-layer-popover", "shadow-lg"],
+        header: ["pl-2 pr-1.5 pt-2.5 pb-0.5"],
+        separator: ["hidden bg-line-muted"],
+        list: ["flex flex-col gap-0.5 px-1.5 py-1"],
+        item: [
+          "rounded-sm bg-transparent px-2 text-sm font-normal tracking-[-0.005em] text-foreground-muted",
+          "transition-[background-color,color] duration-150",
+          "hover:bg-foreground/[0.04] hover:text-foreground-strong",
+          "data-[highlighted]:bg-foreground/[0.04] data-[highlighted]:text-foreground-strong",
+          "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-disabled",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5] [&_svg:not([class*='size-'])]:size-3.5",
+        ],
+        itemIndicator: ["text-foreground-strong"],
+        label: ["text-[11px] leading-none tracking-[-0.005em] text-foreground-strong"],
+        clear: [
+          "text-[11px] font-medium tracking-[-0.005em] text-foreground-muted hover:text-foreground-strong",
+          "[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5]",
+        ],
+        triggerIndicator: [
+          "text-foreground-muted opacity-100",
+          "[&_svg]:![stroke-width:1.5] [&_svg_*]:![stroke-width:1.5]",
+        ],
+        control: [
+          "rounded-md border border-line-subtle bg-layer-field px-2.5 py-1.5",
+          "text-sm font-normal text-foreground shadow-[0_1px_1px_oklch(0.21_0.006_285_/_0.05)]",
+          "focus-within:border-line-strong/25 focus-within:ring-2 focus-within:ring-line-strong/8",
+          "[&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg_*]:stroke-[1.5]",
+          "[&_[data-slot='combobox-input']]:text-sm [&_[data-slot='combobox-input']]:font-normal [&_[data-slot='combobox-input']]:text-foreground",
+          "[&_[data-slot='combobox-input']::placeholder]:text-foreground-placeholder/70",
+        ],
+        empty: ["text-foreground-muted"],
+        groupLabel: ["text-[11px] font-medium leading-none tracking-[-0.005em] text-foreground/45"],
+        chips: [
+          "rounded-md border border-line-subtle bg-layer-field px-2 py-1",
+          "focus-within:border-line-strong/25 focus-within:ring-2 focus-within:ring-line-strong/8",
+        ],
+        chip: ["rounded-sm bg-layer-muted px-1.5 py-0.5 text-xs font-medium text-foreground"],
+        chipRemove: ["text-foreground-muted hover:text-foreground-strong"],
+      },
+    },
+  },
+});
+
+type ComboboxClearContextValue = {
+  visible: boolean;
+};
+
+const ComboboxClearContext = createContext<ComboboxClearContextValue>({ visible: false });
+
+function hasClearableValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  return value != null;
+}
+
+function hasClearableInputValue(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.length > 0;
+  }
+
+  if (typeof value === "string") {
+    return value.length > 0;
+  }
+
+  if (typeof value === "number") {
+    return true;
+  }
+
+  return value != null;
+}
+
+export type ComboboxProps<
+  Value,
+  Multiple extends boolean | undefined = false,
+> = BaseCombobox.Root.Props<Value, Multiple>;
+
+export function Combobox<Value, Multiple extends boolean | undefined = false>({
+  defaultInputValue,
+  defaultValue,
+  inputValue,
+  onInputValueChange,
+  onValueChange,
+  value,
+  ...props
+}: ComboboxProps<Value, Multiple>) {
+  const [uncontrolledInputValue, setUncontrolledInputValue] = useState<unknown>(
+    defaultInputValue ?? "",
+  );
+  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(defaultValue);
+
+  const resolvedInputValue = inputValue === undefined ? uncontrolledInputValue : inputValue;
+  const resolvedValue = value === undefined ? uncontrolledValue : value;
+
+  return (
+    <ComboboxClearContext.Provider
+      value={{
+        visible: hasClearableValue(resolvedValue) || hasClearableInputValue(resolvedInputValue),
+      }}
+    >
+      <BaseCombobox.Root
+        data-slot="combobox"
+        defaultInputValue={defaultInputValue}
+        defaultValue={defaultValue}
+        inputValue={inputValue}
+        value={value}
+        onInputValueChange={(nextInputValue, eventDetails) => {
+          if (inputValue === undefined) {
+            setUncontrolledInputValue(nextInputValue);
+          }
+
+          onInputValueChange?.(nextInputValue, eventDetails);
+        }}
+        onValueChange={(nextValue, eventDetails) => {
+          if (value === undefined) {
+            setUncontrolledValue(nextValue);
+          }
+
+          onValueChange?.(nextValue, eventDetails);
+        }}
+        {...props}
+      />
+    </ComboboxClearContext.Provider>
+  );
+}
+
+export type ComboboxLabelProps = StyledProps<BaseCombobox.Label.Props>;
+
+export function ComboboxLabel({ className, ...props }: ComboboxLabelProps) {
+  const theme = useThemeFamily();
+  const { label } = combobox({ theme });
+  return (
+    <BaseCombobox.Label data-slot="combobox-label" className={label({ className })} {...props} />
+  );
+}
+
+export type ComboboxValueProps = BaseCombobox.Value.Props;
+
+export function ComboboxValue(props: ComboboxValueProps) {
+  return <BaseCombobox.Value data-slot="combobox-value" {...props} />;
+}
+
+export type ComboboxTriggerProps = StyledProps<BaseCombobox.Trigger.Props>;
+
+export function ComboboxTrigger({
+  className,
+  children,
+  render = <Button variant="outline" size="md" />,
+  ...props
+}: ComboboxTriggerProps) {
+  const theme = useThemeFamily();
+  const { trigger } = combobox({ theme });
+  return (
+    <BaseCombobox.Trigger
+      data-slot="combobox-trigger"
+      render={render}
+      className={trigger({ className })}
+      {...props}
+    >
+      <span
+        data-slot="combobox-trigger-content"
+        className="flex min-w-0 flex-1 items-center gap-1.5"
+      >
+        {children}
+      </span>
+    </BaseCombobox.Trigger>
+  );
+}
+
+export type ComboboxTriggerIndicatorProps = StyledProps<ComponentPropsWithRef<"span">>;
+
+export function ComboboxTriggerIndicator({ className, ...props }: ComboboxTriggerIndicatorProps) {
+  const theme = useThemeFamily();
+  const { triggerIndicator } = combobox({ theme });
+  return (
+    <span
+      data-slot="combobox-trigger-indicator"
+      className={triggerIndicator({ className })}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxInputGroupProps = StyledProps<BaseCombobox.InputGroup.Props>;
+
+export function ComboboxInputGroup({ className, ...props }: ComboboxInputGroupProps) {
+  const theme = useThemeFamily();
+  const { inputGroup } = combobox({ theme });
+  return (
+    <BaseCombobox.InputGroup
+      data-slot="combobox-input-group"
+      className={inputGroup({ className })}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxControlProps = StyledProps<BaseCombobox.InputGroup.Props>;
+
+export function ComboboxControl({ className, ...props }: ComboboxControlProps) {
+  const theme = useThemeFamily();
+  const { control } = combobox({ theme });
+  return (
+    <BaseCombobox.InputGroup
+      data-slot="combobox-control"
+      className={control({ className })}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxInputProps = StyledProps<BaseCombobox.Input.Props> & {
+  suppressPasswordManager?: boolean;
+};
+
+export function ComboboxInput({
+  suppressPasswordManager,
+  className,
+  ...props
+}: ComboboxInputProps) {
+  const theme = useThemeFamily();
+  const { input } = combobox({ theme });
+  return (
+    <BaseCombobox.Input
+      data-slot="combobox-input"
+      className={input({ className: [suppressPasswordManager && "keeper-ignore", className] })}
+      data-1p-ignore={suppressPasswordManager ? "true" : undefined}
+      data-bwignore={suppressPasswordManager ? "true" : undefined}
+      data-form-type={suppressPasswordManager ? "other" : undefined}
+      data-lpignore={suppressPasswordManager ? "true" : undefined}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxPortalProps = BaseCombobox.Portal.Props;
+
+export function ComboboxPortal(props: ComboboxPortalProps) {
+  return <BaseCombobox.Portal data-slot="combobox-portal" {...props} />;
+}
+
+export type ComboboxPopupProps = ComponentPropsWithRef<"div">;
+
+export function ComboboxPopup({ className, ...props }: ComboboxPopupProps) {
+  const theme = useThemeFamily();
+  const { content } = combobox({ theme });
+  return <div data-slot="combobox-content" className={content({ className })} {...props} />;
+}
+
+export type ComboboxHeaderProps = ComponentPropsWithRef<"div">;
+
+export function ComboboxHeader({ className, ...props }: ComboboxHeaderProps) {
+  const theme = useThemeFamily();
+  const { header } = combobox({ theme });
+  return <div data-slot="combobox-header" className={header({ className })} {...props} />;
+}
+
+export type ComboboxSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+
+export function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {
+  const theme = useThemeFamily();
+  const { separator } = combobox({ theme });
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      data-slot="combobox-separator"
+      className={separator({ className })}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxContentProps = StyledProps<BaseCombobox.Popup.Props> &
+  Pick<
+    BaseCombobox.Positioner.Props,
+    | "align"
+    | "alignOffset"
+    | "anchor"
+    | "arrowPadding"
+    | "collisionAvoidance"
+    | "collisionBoundary"
+    | "collisionPadding"
+    | "disableAnchorTracking"
+    | "positionMethod"
+    | "side"
+    | "sideOffset"
+    | "sticky"
+  > & {
+    portalProps?: ComboboxPortalProps;
+  };
+
+export function ComboboxContent({
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  arrowPadding,
+  collisionAvoidance,
+  collisionBoundary,
+  collisionPadding,
+  disableAnchorTracking = true,
+  positionMethod = "fixed",
+  side = "bottom",
+  sideOffset = 4,
+  sticky,
+  portalProps,
+  className,
+  initialFocus = false,
+  finalFocus = false,
+  ...props
+}: ComboboxContentProps) {
+  const theme = useThemeFamily();
+  const { positioner, content } = combobox({ theme });
+  return (
+    <BaseCombobox.Portal {...portalProps}>
+      <BaseCombobox.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        arrowPadding={arrowPadding}
+        collisionAvoidance={collisionAvoidance}
+        collisionBoundary={collisionBoundary}
+        collisionPadding={collisionPadding}
+        disableAnchorTracking={disableAnchorTracking}
+        positionMethod={positionMethod}
+        side={side}
+        sideOffset={sideOffset}
+        sticky={sticky}
+        className={positioner()}
+      >
+        <BaseCombobox.Popup
+          data-slot="combobox-content"
+          className={content({ className })}
+          initialFocus={initialFocus}
+          finalFocus={finalFocus}
+          {...props}
+        />
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+}
+
+export type ComboboxListProps = StyledProps<BaseCombobox.List.Props>;
+
+export function ComboboxList({ className, ...props }: ComboboxListProps) {
+  const theme = useThemeFamily();
+  const { list } = combobox({ theme });
+  return <BaseCombobox.List data-slot="combobox-list" className={list({ className })} {...props} />;
+}
+
+export type ComboboxItemProps = StyledProps<BaseCombobox.Item.Props>;
+
+export function ComboboxItem({ className, ...props }: ComboboxItemProps) {
+  const theme = useThemeFamily();
+  const { item } = combobox({ theme });
+  return <BaseCombobox.Item data-slot="combobox-item" className={item({ className })} {...props} />;
+}
+
+export type ComboboxItemIndicatorProps = StyledProps<BaseCombobox.ItemIndicator.Props>;
+
+export function ComboboxItemIndicator({
+  className,
+  children,
+  ...props
+}: ComboboxItemIndicatorProps) {
+  const theme = useThemeFamily();
+  const { itemIndicator } = combobox({ theme });
+  return (
+    <BaseCombobox.ItemIndicator
+      data-slot="combobox-item-indicator"
+      className={itemIndicator({ className })}
+      {...props}
+    >
+      {children ?? <Check aria-hidden className="size-3.5 shrink-0 stroke-[1.5]" />}
+    </BaseCombobox.ItemIndicator>
+  );
+}
+
+export type ComboboxClearProps = StyledProps<BaseCombobox.Clear.Props>;
+
+export function ComboboxClear({
+  className,
+  children,
+  keepMounted = true,
+  ...props
+}: ComboboxClearProps) {
+  const theme = useThemeFamily();
+  const { visible } = use(ComboboxClearContext);
+  const { clear } = combobox({ theme });
+  return (
+    <BaseCombobox.Clear
+      data-slot="combobox-clear"
+      data-visible={visible ? "" : undefined}
+      aria-hidden={visible ? props["aria-hidden"] : true}
+      keepMounted={keepMounted}
+      className={clear({ className })}
+      {...props}
+    >
+      {children ?? <X aria-hidden className="size-3.5 shrink-0" />}
+    </BaseCombobox.Clear>
+  );
+}
+
+export type ComboboxEmptyProps = StyledProps<BaseCombobox.Empty.Props>;
+
+export function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps) {
+  const theme = useThemeFamily();
+  const { empty } = combobox({ theme });
+  return (
+    <BaseCombobox.Empty data-slot="combobox-empty" {...props}>
+      {children == null ? null : (
+        <div data-slot="combobox-empty-content" className={empty({ className })}>
+          {children}
+        </div>
+      )}
+    </BaseCombobox.Empty>
+  );
+}
+
+export type ComboboxGroupProps = StyledProps<BaseCombobox.Group.Props>;
+
+export function ComboboxGroup({ className, ...props }: ComboboxGroupProps) {
+  return <BaseCombobox.Group data-slot="combobox-group" className={className} {...props} />;
+}
+
+export type ComboboxGroupLabelProps = StyledProps<BaseCombobox.GroupLabel.Props>;
+
+export function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps) {
+  const theme = useThemeFamily();
+  const { groupLabel } = combobox({ theme });
+  return (
+    <BaseCombobox.GroupLabel
+      data-slot="combobox-group-label"
+      className={groupLabel({ className })}
+      {...props}
+    />
+  );
+}
+
+export type ComboboxRowProps = StyledProps<BaseCombobox.Row.Props>;
+
+export function ComboboxRow({ className, ...props }: ComboboxRowProps) {
+  return <BaseCombobox.Row data-slot="combobox-row" className={className} {...props} />;
+}
+
+export type ComboboxCollectionProps = BaseCombobox.Collection.Props;
+
+export function ComboboxCollection(props: ComboboxCollectionProps) {
+  return <BaseCombobox.Collection data-slot="combobox-collection" {...props} />;
+}
+
+export type ComboboxChipsProps = StyledProps<BaseCombobox.Chips.Props>;
+
+export function ComboboxChips({ className, ...props }: ComboboxChipsProps) {
+  const theme = useThemeFamily();
+  const { chips } = combobox({ theme });
+  return (
+    <BaseCombobox.Chips data-slot="combobox-chips" className={chips({ className })} {...props} />
+  );
+}
+
+export type ComboboxChipProps = StyledProps<BaseCombobox.Chip.Props>;
+
+export function ComboboxChip({ className, ...props }: ComboboxChipProps) {
+  const theme = useThemeFamily();
+  const { chip } = combobox({ theme });
+  return <BaseCombobox.Chip data-slot="combobox-chip" className={chip({ className })} {...props} />;
+}
+
+export type ComboboxChipRemoveProps = StyledProps<BaseCombobox.ChipRemove.Props>;
+
+export function ComboboxChipRemove({ className, children, ...props }: ComboboxChipRemoveProps) {
+  const theme = useThemeFamily();
+  const { chipRemove } = combobox({ theme });
+  return (
+    <BaseCombobox.ChipRemove
+      data-slot="combobox-chip-remove"
+      className={chipRemove({ className })}
+      {...props}
+    >
+      {children ?? <X aria-hidden className="size-3 shrink-0" />}
+    </BaseCombobox.ChipRemove>
+  );
+}

package/src/components/combobox/index.ts

@@ -0,0 +1,52 @@
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxChips,
+  ComboboxClear,
+  ComboboxCollection,
+  ComboboxControl,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxHeader,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxPortal,
+  ComboboxPopup,
+  ComboboxRow,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxTriggerIndicator,
+  ComboboxValue,
+  type ComboboxChipProps,
+  type ComboboxChipRemoveProps,
+  type ComboboxChipsProps,
+  type ComboboxClearProps,
+  type ComboboxCollectionProps,
+  type ComboboxControlProps,
+  type ComboboxContentProps,
+  type ComboboxEmptyProps,
+  type ComboboxGroupLabelProps,
+  type ComboboxGroupProps,
+  type ComboboxHeaderProps,
+  type ComboboxInputGroupProps,
+  type ComboboxInputProps,
+  type ComboboxItemIndicatorProps,
+  type ComboboxItemProps,
+  type ComboboxLabelProps,
+  type ComboboxListProps,
+  type ComboboxPopupProps,
+  type ComboboxPortalProps,
+  type ComboboxProps,
+  type ComboboxRowProps,
+  type ComboboxSeparatorProps,
+  type ComboboxTriggerIndicatorProps,
+  type ComboboxTriggerProps,
+  type ComboboxValueProps,
+} from "./combobox.tsx";