Aurora MultiSelect

1"use client"
2 
3import * as React from "react"
4import { Check, ChevronDown, X } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Button } from "./button"
7 
8// ─── Types ────────────────────────────────────────────────────────────────────
9 
10export interface MultiSelectOption {
11  value: string
12  label: React.ReactNode
13  disabled?: boolean
14}
15 
16export interface MultiSelectProps
17  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
18  options: MultiSelectOption[]
19  value?: string[]
20  defaultValue?: string[]
21  onValueChange?: (value: string[]) => void
22  open?: boolean
23  defaultOpen?: boolean
24  onOpenChange?: (open: boolean) => void
25  placeholder?: string
26  disabled?: boolean
27}
28 
29// ─── Chip (selected value) ──────────────────────────────────────────────────
30 
31interface MultiSelectChipProps {
32  label: React.ReactNode
33  onRemove?: () => void
34  disabled?: boolean
35}
36 
37const MultiSelectChip = ({ ref, label, onRemove, disabled }: MultiSelectChipProps & { ref?: React.Ref<HTMLSpanElement> }) => (
38    <span
39      ref={ref}
40      className={cn(
41        "inline-flex items-center gap-1.5",
42        "rounded-[10px] py-1 pl-2.5 pr-1.5",
43        "border border-[color-mix(in_srgb,var(--aurora-accent-primary)_45%,transparent)]",
44        "bg-[color-mix(in_srgb,var(--aurora-accent-primary)_12%,transparent)]",
45        "text-[var(--aurora-text-primary)]"
46      )}
47      style={{
48        fontFamily: "var(--aurora-font-sans)",
49        fontSize: "var(--aurora-type-control)",
50        fontWeight: "var(--aurora-weight-ui)",
51        letterSpacing: "var(--aurora-letter-ui)",
52        lineHeight: "var(--aurora-line-dense)",
53      }}
54    >
55      <span className="truncate">{label}</span>
56      {onRemove ? (
57        <Button
58          type="button"
59          variant="plain"
60          size="unstyled"
61          disabled={disabled}
62          aria-label="Remove"
63          onClick={(event) => {
64            event.stopPropagation()
65            onRemove()
66          }}
67          onKeyDown={(event) => event.stopPropagation()}
68          className={cn(
69            "flex h-4 w-4 shrink-0 items-center justify-center rounded-[6px]",
70            "text-[var(--aurora-text-muted)] transition-colors duration-100",
71// … truncated