fn_registry/frontend/functions/ui/simple_select.tsx

"use client"

import * as React from "react"
import { cn } from "../core/cn"
import { ChevronDown } from "lucide-react"

export interface SimpleSelectOption {
  value: string
  label: string
  disabled?: boolean
}

export interface SimpleSelectGroup {
  group: string
  items: SimpleSelectOption[]
}

export type SimpleSelectOptions = SimpleSelectOption[] | SimpleSelectGroup[]

interface SimpleSelectProps {
  value: string
  onValueChange: (value: string) => void
  options: SimpleSelectOptions
  placeholder?: string
  disabled?: boolean
  size?: "sm" | "default"
  className?: string
}

function isGrouped(
  options: SimpleSelectOptions,
): options is SimpleSelectGroup[] {
  return options.length > 0 && "group" in options[0]
}

function SimpleSelect({
  value,
  onValueChange,
  options,
  placeholder = "Select...",
  disabled = false,
  size = "default",
  className,
}: SimpleSelectProps) {
  return (
    <div className={cn("relative", className)}>
      <select
        value={value}
        onChange={(e) => onValueChange(e.target.value)}
        disabled={disabled}
        className={cn(
          "flex w-full appearance-none items-center rounded-lg border border-input bg-transparent px-2.5 pr-8 text-sm transition-colors outline-none",
          "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
          size === "sm" ? "h-7 text-xs px-2" : "h-8 py-1",
        )}
      >
        {placeholder && !value && (
          <option value="" disabled>
            {placeholder}
          </option>
        )}
        {isGrouped(options)
          ? options.map((g) => (
              <optgroup key={g.group} label={g.group}>
                {g.items.map((item) => (
                  <option
                    key={item.value}
                    value={item.value}
                    disabled={item.disabled}
                  >
                    {item.label}
                  </option>
                ))}
              </optgroup>
            ))
          : (options as SimpleSelectOption[]).map((item) => (
              <option
                key={item.value}
                value={item.value}
                disabled={item.disabled}
              >
                {item.label}
              </option>
            ))}
      </select>
      <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
    </div>
  )
}

export { SimpleSelect }