Function bodies 541 total

function BadgeAction({ className, asChild = false, ...props }: BadgeActionProps) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="badge-action"
      type={asChild ? undefined : "button"}
      className={cn(
        // Ghost-button-ish, but sized for badges
        "-my-0.5 -mr-1 inline-flex size-5 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
        className
      )}
      {...props}
    />
  )
}

function ComboBadge({
  icon: Icon,
  prefix,
  children,
  variant = "default",
  onDismiss,
  className,
}: ComboBadgeProps) {
  const tone = comboBadgeTones[variant]

  return (
    <span
      data-slot="combo-badge"
      className={cn(
        "group/combo inline-flex items-stretch gap-px rounded overflow-hidden text-xs font-[520] w-fit shrink-0",
        className,
      )}
    >
      {/* Prefix segment */}
      <span
        data-slot="combo-badge-prefix"
        className={cn(
          "inline-flex items-center gap-1 px-2 py-0.5 rounded-l",
          tone.prefix,
        )}
      >
        {Icon && <Icon aria-hidden="true" className="size-3.5 shrink-0" />}
        {prefix}
      </span>

      {/* Value segment */}
      <span
        data-slot="combo-badge-value"
        className={cn(
          "relative inline-flex items-center px-2 py-0.5 rounded-r",
          tone.value,
        )}
      >
        {children}
        {onDismiss && (
          <button
            type="b

function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
}

function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
        className
      )}
      {...props}
    />
  )
}

function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  )
}

function BreadcrumbLink({
  asChild,
  className,
  ...props
}: React.ComponentProps<"a"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "a"

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
  )
}

function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-[420]", className)}
      {...props}
    />
  )
}

function BreadcrumbSeparator({
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("text-muted-foreground", className)}
      {...props}
    >
      /
    </li>
  )
}

function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-9 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  )
}

function ButtonGroup({
  className,
  orientation,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
  return (
    <div
      role="group"
      data-slot="button-group"
      data-orientation={orientation}
      className={cn(buttonGroupVariants({ orientation }), className)}
      {...props}
    />
  )
}

function ButtonGroupText({
  className,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & {
  asChild?: boolean
}) {
  const Comp = asChild ? Slot.Root : "div"

  return (
    <Comp
      className={cn(
        "bg-muted flex items-center gap-2 rounded-lg border px-4 text-sm font-[520] shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function ButtonGroupSeparator({
  className,
  orientation = "vertical",
  ...props
}: React.ComponentProps<typeof Separator>) {
  return (
    <Separator
      data-slot="button-group-separator"
      orientation={orientation}
      className={cn(
        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
        className
      )}
      {...props}
    />
  )
}

function Button({
  className,
  variant = "primary",
  size = "md",
  iconOnly = false,
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
    iconOnly?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      data-icon-only={iconOnly ? "true" : "false"}
      className={cn(buttonVariants({ variant, size, iconOnly, className }))}
      {...props}
    />
  )
}

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("relative p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row gap-4",
        month: "flex flex-col gap-2",
        month_caption: "flex h-9 items-center justify-center",
        caption_label: "label-md",
        nav: "absolute inset-x-0 top-3 z-10 flex items-center justify-between px-3",
        button_previous: [
          "h-7 w-7 flex items-center justify-center",
          "rounded border border-border bg-background",
          "text-muted-foreground hover:bg-muted hover:text-foreground",
          "transition-colors disabled:opacity-30 disabled:pointer-events-none",
        ].join(" "),
        button_next: [
          "h-7 w-7 flex items-center justify-center",
          "rounded border border-border bg-background",
          "text-muted-foreground hover:bg-muted

function Card({
  className,
  size,
  level = 1,
  tone,
  borderTone,
  ...props
}: CardProps) {
  const computedTone =
    tone ?? (level % 2 === 1 ? "primary" : "secondary")

  const computedBorderTone =
    borderTone ?? (computedTone === "ghost" ? "subtle" : level === 1 ? "primary" : "subtle")

  const computedSize =
    size ?? (level > 2 ? "xs" : level > 1 ? "sm" : "default")

  const hasElevation = computedTone !== "ghost" && level <= 1

  return (
    <div
      data-slot="card"
      data-size={computedSize}
      data-tone={computedTone}
      data-border-tone={computedBorderTone}
      className={cn(
        "group/card flex flex-col rounded-xl border overflow-hidden text-card-foreground",
        hasElevation && "shadow-[var(--elevation-surface)]",
        // Surface tone
        "data-[tone=primary]:bg-card",
        "data-[tone=secondary]:bg-secondary",
        // ghost: no background class
        // Border tone
        "data-[border-tone=primary]:border-[var(--border)

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-5 pt-5 pb-0 has-data-[slot=card-action]:grid-cols-[1fr_auto] group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-4 group-data-[size=xs]/card:px-3 group-data-[size=xs]/card:pt-2 data-[divider=true]:border-b data-[divider=true]:border-[var(--border)] data-[divider=true]:pb-5 group-data-[size=sm]/card:data-[divider=true]:pb-4 group-data-[size=xs]/card:data-[divider=true]:pb-2",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn(
        "label-lg leading-tight group-data-[size=sm]/card:text-sm group-data-[size=sm]/card:font-[525] group-data-[size=xs]/card:text-xs group-data-[size=xs]/card:font-[520]",
        className
      )}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn(
        "p text-muted-foreground group-data-[size=sm]/card:text-xs group-data-[size=sm]/card:font-[425] group-data-[size=xs]/card:text-xs group-data-[size=xs]/card:font-[420]",
        className
      )}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn(
        "px-5 pt-4 pb-4 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pt-3 group-data-[size=sm]/card:pb-3 group-data-[size=xs]/card:px-3 group-data-[size=xs]/card:py-2",
        className
      )}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center px-5 py-4 bg-accent/70 dark:bg-accent/40 text-accent-foreground group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:py-3 group-data-[size=xs]/card:px-3 group-data-[size=xs]/card:py-2 data-[divider=true]:border-t data-[divider=true]:border-[var(--border)]",
        className
      )}
      {...props}
    />
  )
}

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

function ChartContainer({
  id,
  className,
  children,
  config,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof RechartsPrimitive.ResponsiveContainer
  >["children"]
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`

  return (
    <ChartContext.Provider value={{ config }}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
  showPercent = false,
  valueFormatter,
  footer,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
  React.ComponentProps<"div"> & {
    hideLabel?: boolean
    hideIndicator?: boolean
    indicator?: "line" | "dot" | "dashed"
    nameKey?: string
    labelKey?: string
    /**
     * When true, each row renders a percentage-of-total column alongside the
     * value. The total is computed from the filtered payload. Use together with
     * `valueFormatter` to control how the value cell is displayed, and with
     * `footer` (function form) to render a total row.
     */
    showPercent?: boolean
    /**
     * Formats the value cell in showPercent mode. Ignored when showPercent is
     * false — for the default layout, use the `formatter` prop to take over

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: React.ComponentProps<"div"> &
  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
    hideIcon?: boolean
    nameKey?: string
  }) {
  const { config } = useChart()

  if (!payload?.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex flex-wrap items-center justify-start gap-x-4 gap-y-2",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {payload
        .filter((item) => item.type !== "none")
        .map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
              )}
            >
      

function useChartLegendInteractive(
  config: ChartConfig
): ChartLegendInteractiveState {
  const allKeys = React.useMemo(() => Object.keys(config), [config])
  const [hiddenSeries, setHiddenSeries] = React.useState<Set<string>>(
    () => new Set()
  )
  const [contextMenu, setContextMenu] = React.useState<{
    x: number
    y: number
    seriesKey: string
  } | null>(null)
  const lastClickRef = React.useRef<{ key: string; time: number } | null>(null)

  const isHidden = React.useCallback(
    (key: string) => hiddenSeries.has(key),
    [hiddenSeries]
  )

  const handleHide = React.useCallback((key: string) => {
    setHiddenSeries((prev) => {
      const next = new Set(prev)
      next.add(key)
      return next
    })
  }, [])

  const handleIsolate = React.useCallback(
    (key: string) => {
      const next = new Set<string>()
      allKeys.forEach((k) => {
        if (k !== key) next.add(k)
      })
      setHiddenSeries(next)
    },
    [allKeys]
  )

  const handleItemClick

function LegendMenu({
  x,
  y,
  seriesKey,
  onHide,
  onIsolate,
  onClose,
}: {
  x: number
  y: number
  seriesKey: string
  onHide: (key: string) => void
  onIsolate: (key: string) => void
  onClose: () => void
}) {
  const menuRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        onClose()
      }
    }
    document.addEventListener("mousedown", handleClickOutside)
    return () => document.removeEventListener("mousedown", handleClickOutside)
  }, [onClose])

  React.useEffect(() => {
    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") onClose()
    }
    document.addEventListener("keydown", handleEscape)
    return () => document.removeEventListener("keydown", handleEscape)
  }, [onClose])

  return (
    <div
      ref={menuRef}
      role="menu"
      className="absolute z-50 min-w-[160px] ro

    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

    function handleEscape(event: KeyboardEvent) {
      if (event.key === "Escape") onClose()
    }

function ChartLegendInteractive({
  config,
  legend,
  className,
}: {
  config: ChartConfig
  legend: ChartLegendInteractiveState
  className?: string
}) {
  const entries = Object.entries(config).filter(
    ([, itemConfig]) => itemConfig.label
  )

  return (
    <div
      className={cn(
        "flex flex-wrap items-center justify-start gap-x-4 gap-y-2",
        className
      )}
    >
      {entries.map(([key, itemConfig]) => {
        const hidden = legend.isHidden(key)
        const isMenuOpen = legend.contextMenu?.seriesKey === key
        const color =
          ("color" in itemConfig && itemConfig.color) ||
          `var(--color-${key})`

        return (
          <div key={key} className="relative">
            <button
              type="button"
              aria-pressed={!hidden}
              className={cn(
                "flex items-center gap-1.5 text-xs cursor-pointer transition-opacity",
                hidden && "opacity-40"
              )}
              onCl

function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

function Checkbox({
  className,
  ...props
}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        "peer relative size-4 shrink-0 rounded-[4px] border transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50\n\nborder-input bg-card\n\nhover:border-primary/50\n\n data-[state=checked]:bg-primary\n data-[state=checked]:border-primary\n data-[state=checked]:text-primary-foreground\n\n data-[state=checked]:shadow-[inset_0_2px_0_rgba(255,255,255,0.18)]\n\n aria-invalid:border-destructive\n aria-invalid:ring-destructive/20\n dark:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator
        data-slot="checkbox-indicator"
        className="grid place-content-center text-current transition-opacity duration-150"
      >
        <CheckIcon className="size-3.5" />
 

export function ChoiceCard({
  disabled = false,
  htmlFor,
  className,
  control,
  controlPosition = "right",
  icon,
  title,
  description,
}: ChoiceCardProps) {
  return (
    <FieldLabel
      htmlFor={htmlFor}
      className={cn(
        // Base visual container
        "group block w-full rounded-xl border border-input bg-card p-0",
        "transition-[background-color,color,border-color,box-shadow] duration-150 ease-out",

        // Hover
        "hover:bg-accent hover:text-accent-foreground",

        // Selected (detect checked control inside via :has([data-state=checked]))
        "has-[[data-state=checked]]:border-primary",
        "has-[[data-state=checked]]:ring-2",
        "has-[[data-state=checked]]:ring-primary/40",

        // Selected text/icon color (avoid `group-has` so we only rely on `has-*`)
        "has-[[data-state=checked]]:[&_[data-choicecard=icon]]:text-accent-foreground",
        "has-[[data-state=checked]]:[&_[data-choicecard=title]]:text-accent-fore

function CodeBlock({
  children,
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "flex w-full flex-col overflow-clip rounded-lg",
        "bg-brand/40 border border-brand-border",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

function CodeBlockHeader({
  children,
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "flex h-9 items-center justify-between px-3 py-1.5",
        "label-sm text-brand-foreground",
        "border-b border-brand-border",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

function CodeBlockCopy({ value }: { value: string }) {
  const [copied, setCopied] = React.useState(false)

  const copy = React.useCallback(() => {
    navigator.clipboard.writeText(value)
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }, [value])

  return (
    <button
      onClick={copy}
      className={cn(
        "flex items-center justify-center rounded-md p-1",
        "text-brand-foreground/60 hover:text-brand-foreground hover:bg-brand-border/50",
        "transition-colors",
      )}
      aria-label="Copy to clipboard"
    >
      {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
    </button>
  )
}

function CodeBlockContent({
  children,
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "overflow-x-auto",
        "bg-brand/40 p-4",
        "font-mono text-xs leading-relaxed whitespace-pre text-brand-foreground",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}

function CodeSnippet({
  children,
  title,
  className,
}: {
  children: string
  title?: string
  className?: string
}) {
  return (
    <CodeBlock className={className}>
      {title && (
        <CodeBlockHeader>
          <span>{title}</span>
          <CodeBlockCopy value={children} />
        </CodeBlockHeader>
      )}
      <CodeBlockContent>
        {!title && (
          <div className="float-right -mt-1 -mr-1">
            <CodeBlockCopy value={children} />
          </div>
        )}
        {children}
      </CodeBlockContent>
    </CodeBlock>
  )
}

function Collapsible({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
  return (
    <CollapsiblePrimitive.Trigger
      data-slot="collapsible-trigger"
      {...props}
    />
  )
}

function CollapsibleContent({
  ...props
}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {
  return (
    <CollapsiblePrimitive.Content
      data-slot="collapsible-content"
      {...props}
    />
  )
}

function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
}

function ComboboxTrigger({
  className,
  children,
  ...props
}: ComboboxPrimitive.Trigger.Props) {
  return (
    <ComboboxPrimitive.Trigger
      data-slot="combobox-trigger"
      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
      {...props}
    >
      {children}
      <ChevronDownIcon
        data-slot="combobox-trigger-icon"
        className="text-muted-foreground pointer-events-none size-4"
      />
    </ComboboxPrimitive.Trigger>
  )
}

function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
  return (
    <ComboboxPrimitive.Clear
      data-slot="combobox-clear"
      render={<InputGroupButton variant="ghost" size="icon-xs" />}
      className={cn(className)}
      {...props}
    >
      <XIcon className="pointer-events-none" />
    </ComboboxPrimitive.Clear>
  )
}

function ComboboxInput({
  className,
  children,
  disabled = false,
  showTrigger = true,
  showClear = false,
  ...props
}: ComboboxPrimitive.Input.Props & {
  showTrigger?: boolean
  showClear?: boolean
}) {
  return (
    <InputGroup className={cn("w-auto", className)}>
      <ComboboxPrimitive.Input
        render={<InputGroupInput disabled={disabled} />}
        {...props}
      />
      <InputGroupAddon align="inline-end">
        {showTrigger && (
          <InputGroupButton
            size="icon-xs"
            variant="ghost"
            asChild
            data-slot="input-group-button"
            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
            disabled={disabled}
          >
            <ComboboxTrigger />
          </InputGroupButton>
        )}
        {showClear && <ComboboxClear disabled={disabled} />}
      </InputGroupAddon>
      {children}
    </InputGroup>
  )
}

function ComboboxContent({
  className,
  side = "bottom",
  sideOffset = 6,
  align = "start",
  alignOffset = 0,
  anchor,
  ...props
}: ComboboxPrimitive.Popup.Props &
  Pick<
    ComboboxPrimitive.Positioner.Props,
    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
  >) {
  return (
    <ComboboxPrimitive.Portal>
      <ComboboxPrimitive.Positioner
        side={side}
        sideOffset={sideOffset}
        align={align}
        alignOffset={alignOffset}
        anchor={anchor}
        className="isolate z-50"
      >
        <ComboboxPrimitive.Popup
          data-slot="combobox-content"
          data-chips={!!anchor}
          className={cn(
            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bot

function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
  return (
    <ComboboxPrimitive.List
      data-slot="combobox-list"
      className={cn(
        "max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0",
        className
      )}
      {...props}
    />
  )
}

function ComboboxItem({
  className,
  children,
  ...props
}: ComboboxPrimitive.Item.Props) {
  return (
    <ComboboxPrimitive.Item
      data-slot="combobox-item"
      className={cn(
        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {children}
      <ComboboxPrimitive.ItemIndicator
        data-slot="combobox-item-indicator"
        render={
          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
        }
      >
        <CheckIcon className="pointer-events-none size-4 pointer-coarse:size-5" />
      </ComboboxPrimitive.ItemIndicator>
    </ComboboxPrimitive.Item>
  )
}

function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
  return (
    <ComboboxPrimitive.Group
      data-slot="combobox-group"
      className={cn(className)}
      {...props}
    />
  )
}

function ComboboxLabel({
  className,
  ...props
}: ComboboxPrimitive.GroupLabel.Props) {
  return (
    <ComboboxPrimitive.GroupLabel
      data-slot="combobox-label"
      className={cn(
        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
        className
      )}
      {...props}
    />
  )
}