Form Elements Showcase

import type * as React from "react"
import { MailIcon, SearchIcon } from "lucide-react"

import {
  InputGroup as BoldInputGroup,
  InputGroupAddon as BoldInputGroupAddon,
  InputGroupInput as BoldInputGroupInput,
  InputGroupText as BoldInputGroupText,
} from "@/components/ui/form-elements/bold/input-group"
import { Checkbox as BoldCheckbox } from "@/components/ui/form-elements/bold/checkbox"
import { Input as BoldInput } from "@/components/ui/form-elements/bold/input"
import {
  NativeSelect as BoldNativeSelect,
  NativeSelectOption as BoldNativeSelectOption,
} from "@/components/ui/form-elements/bold/native-select"
import {
  RadioGroup as BoldRadioGroup,
  RadioGroupItem as BoldRadioGroupItem,
} from "@/components/ui/form-elements/bold/radio-group"
import {
  Select as BoldSelect,
  SelectContent as BoldSelectContent,
  SelectGroup as BoldSelectGroup,
  SelectItem as BoldSelectItem,
  SelectTrigger as BoldSelectTrigger,
  SelectValue as BoldSelectValue,
} from "@/components/ui/form-elements/bold/select"
import { Textarea as BoldTextarea } from "@/components/ui/form-elements/bold/textarea"
import {
  InputGroup as BoldSkewedInputGroup,
  InputGroupAddon as BoldSkewedInputGroupAddon,
  InputGroupInput as BoldSkewedInputGroupInput,
  InputGroupText as BoldSkewedInputGroupText,
} from "@/components/ui/form-elements/bold-skewed/input-group"
import { Checkbox as BoldSkewedCheckbox } from "@/components/ui/form-elements/bold-skewed/checkbox"
import { Input as BoldSkewedInput } from "@/components/ui/form-elements/bold-skewed/input"
import {
  NativeSelect as BoldSkewedNativeSelect,
  NativeSelectOption as BoldSkewedNativeSelectOption,
} from "@/components/ui/form-elements/bold-skewed/native-select"
import {
  RadioGroup as BoldSkewedRadioGroup,
  RadioGroupItem as BoldSkewedRadioGroupItem,
} from "@/components/ui/form-elements/bold-skewed/radio-group"
import {
  Select as BoldSkewedSelect,
  SelectContent as BoldSkewedSelectContent,
  SelectGroup as BoldSkewedSelectGroup,
  SelectItem as BoldSkewedSelectItem,
  SelectTrigger as BoldSkewedSelectTrigger,
  SelectValue as BoldSkewedSelectValue,
} from "@/components/ui/form-elements/bold-skewed/select"
import { Textarea as BoldSkewedTextarea } from "@/components/ui/form-elements/bold-skewed/textarea"
import {
  InputGroup as DefaultInputGroup,
  InputGroupAddon as DefaultInputGroupAddon,
  InputGroupInput as DefaultInputGroupInput,
  InputGroupText as DefaultInputGroupText,
} from "@/components/ui/form-elements/default/input-group"
import { Checkbox as DefaultCheckbox } from "@/components/ui/form-elements/default/checkbox"
import { Input as DefaultInput } from "@/components/ui/form-elements/default/input"
import {
  NativeSelect as DefaultNativeSelect,
  NativeSelectOption as DefaultNativeSelectOption,
} from "@/components/ui/form-elements/default/native-select"
import {
  RadioGroup as DefaultRadioGroup,
  RadioGroupItem as DefaultRadioGroupItem,
} from "@/components/ui/form-elements/default/radio-group"
import {
  Select as DefaultSelect,
  SelectContent as DefaultSelectContent,
  SelectGroup as DefaultSelectGroup,
  SelectItem as DefaultSelectItem,
  SelectTrigger as DefaultSelectTrigger,
  SelectValue as DefaultSelectValue,
} from "@/components/ui/form-elements/default/select"
import { Textarea as DefaultTextarea } from "@/components/ui/form-elements/default/textarea"
import {
  InputGroup as NeutralInputGroup,
  InputGroupAddon as NeutralInputGroupAddon,
  InputGroupInput as NeutralInputGroupInput,
  InputGroupText as NeutralInputGroupText,
} from "@/components/ui/form-elements/neutral/input-group"
import { Checkbox as NeutralCheckbox } from "@/components/ui/form-elements/neutral/checkbox"
import { Input as NeutralInput } from "@/components/ui/form-elements/neutral/input"
import {
  NativeSelect as NeutralNativeSelect,
  NativeSelectOption as NeutralNativeSelectOption,
} from "@/components/ui/form-elements/neutral/native-select"
import {
  RadioGroup as NeutralRadioGroup,
  RadioGroupItem as NeutralRadioGroupItem,
} from "@/components/ui/form-elements/neutral/radio-group"
import {
  Select as NeutralSelect,
  SelectContent as NeutralSelectContent,
  SelectGroup as NeutralSelectGroup,
  SelectItem as NeutralSelectItem,
  SelectTrigger as NeutralSelectTrigger,
  SelectValue as NeutralSelectValue,
} from "@/components/ui/form-elements/neutral/select"
import { Textarea as NeutralTextarea } from "@/components/ui/form-elements/neutral/textarea"
import {
  InputGroup as OutlineInputGroup,
  InputGroupAddon as OutlineInputGroupAddon,
  InputGroupInput as OutlineInputGroupInput,
  InputGroupText as OutlineInputGroupText,
} from "@/components/ui/form-elements/outline/input-group"
import { Checkbox as OutlineCheckbox } from "@/components/ui/form-elements/outline/checkbox"
import { Input as OutlineInput } from "@/components/ui/form-elements/outline/input"
import {
  NativeSelect as OutlineNativeSelect,
  NativeSelectOption as OutlineNativeSelectOption,
} from "@/components/ui/form-elements/outline/native-select"
import {
  RadioGroup as OutlineRadioGroup,
  RadioGroupItem as OutlineRadioGroupItem,
} from "@/components/ui/form-elements/outline/radio-group"
import {
  Select as OutlineSelect,
  SelectContent as OutlineSelectContent,
  SelectGroup as OutlineSelectGroup,
  SelectItem as OutlineSelectItem,
  SelectTrigger as OutlineSelectTrigger,
  SelectValue as OutlineSelectValue,
} from "@/components/ui/form-elements/outline/select"
import { Textarea as OutlineTextarea } from "@/components/ui/form-elements/outline/textarea"
import {
  InputGroup as ShadowInputGroup,
  InputGroupAddon as ShadowInputGroupAddon,
  InputGroupInput as ShadowInputGroupInput,
  InputGroupText as ShadowInputGroupText,
} from "@/components/ui/form-elements/shadow/input-group"
import { Checkbox as ShadowCheckbox } from "@/components/ui/form-elements/shadow/checkbox"
import { Input as ShadowInput } from "@/components/ui/form-elements/shadow/input"
import {
  NativeSelect as ShadowNativeSelect,
  NativeSelectOption as ShadowNativeSelectOption,
} from "@/components/ui/form-elements/shadow/native-select"
import {
  RadioGroup as ShadowRadioGroup,
  RadioGroupItem as ShadowRadioGroupItem,
} from "@/components/ui/form-elements/shadow/radio-group"
import {
  Select as ShadowSelect,
  SelectContent as ShadowSelectContent,
  SelectGroup as ShadowSelectGroup,
  SelectItem as ShadowSelectItem,
  SelectTrigger as ShadowSelectTrigger,
  SelectValue as ShadowSelectValue,
} from "@/components/ui/form-elements/shadow/select"
import { Textarea as ShadowTextarea } from "@/components/ui/form-elements/shadow/textarea"
import {
  InputGroup as StrongOutlineInputGroup,
  InputGroupAddon as StrongOutlineInputGroupAddon,
  InputGroupInput as StrongOutlineInputGroupInput,
  InputGroupText as StrongOutlineInputGroupText,
} from "@/components/ui/form-elements/strong-outline/input-group"
import { Checkbox as StrongOutlineCheckbox } from "@/components/ui/form-elements/strong-outline/checkbox"
import { Input as StrongOutlineInput } from "@/components/ui/form-elements/strong-outline/input"
import {
  NativeSelect as StrongOutlineNativeSelect,
  NativeSelectOption as StrongOutlineNativeSelectOption,
} from "@/components/ui/form-elements/strong-outline/native-select"
import {
  RadioGroup as StrongOutlineRadioGroup,
  RadioGroupItem as StrongOutlineRadioGroupItem,
} from "@/components/ui/form-elements/strong-outline/radio-group"
import {
  Select as StrongOutlineSelect,
  SelectContent as StrongOutlineSelectContent,
  SelectGroup as StrongOutlineSelectGroup,
  SelectItem as StrongOutlineSelectItem,
  SelectTrigger as StrongOutlineSelectTrigger,
  SelectValue as StrongOutlineSelectValue,
} from "@/components/ui/form-elements/strong-outline/select"
import { Textarea as StrongOutlineTextarea } from "@/components/ui/form-elements/strong-outline/textarea"
import {
  InputGroup as UnderlineInputGroup,
  InputGroupAddon as UnderlineInputGroupAddon,
  InputGroupInput as UnderlineInputGroupInput,
  InputGroupText as UnderlineInputGroupText,
} from "@/components/ui/form-elements/underline/input-group"
import { Checkbox as UnderlineCheckbox } from "@/components/ui/form-elements/underline/checkbox"
import { Input as UnderlineInput } from "@/components/ui/form-elements/underline/input"
import {
  NativeSelect as UnderlineNativeSelect,
  NativeSelectOption as UnderlineNativeSelectOption,
} from "@/components/ui/form-elements/underline/native-select"
import {
  RadioGroup as UnderlineRadioGroup,
  RadioGroupItem as UnderlineRadioGroupItem,
} from "@/components/ui/form-elements/underline/radio-group"
import {
  Select as UnderlineSelect,
  SelectContent as UnderlineSelectContent,
  SelectGroup as UnderlineSelectGroup,
  SelectItem as UnderlineSelectItem,
  SelectTrigger as UnderlineSelectTrigger,
  SelectValue as UnderlineSelectValue,
} from "@/components/ui/form-elements/underline/select"
import { Textarea as UnderlineTextarea } from "@/components/ui/form-elements/underline/textarea"

type FormStyle = {
  label: string
  source: string
  Input: typeof DefaultInput
  Textarea: typeof DefaultTextarea
  Select: typeof DefaultSelect
  SelectContent: typeof DefaultSelectContent
  SelectGroup: typeof DefaultSelectGroup
  SelectItem: typeof DefaultSelectItem
  SelectTrigger: typeof DefaultSelectTrigger
  SelectValue: typeof DefaultSelectValue
  NativeSelect: typeof DefaultNativeSelect
  NativeSelectOption: typeof DefaultNativeSelectOption
  InputGroup: typeof DefaultInputGroup
  InputGroupAddon: typeof DefaultInputGroupAddon
  InputGroupInput: typeof DefaultInputGroupInput
  InputGroupText: typeof DefaultInputGroupText
  Checkbox: typeof DefaultCheckbox
  RadioGroup: typeof DefaultRadioGroup
  RadioGroupItem: typeof DefaultRadioGroupItem
}

const FORM_STYLES = [
  {
    label: "Default",
    source: "form-elements/default",
    Input: DefaultInput,
    Textarea: DefaultTextarea,
    Select: DefaultSelect,
    SelectContent: DefaultSelectContent,
    SelectGroup: DefaultSelectGroup,
    SelectItem: DefaultSelectItem,
    SelectTrigger: DefaultSelectTrigger,
    SelectValue: DefaultSelectValue,
    NativeSelect: DefaultNativeSelect,
    NativeSelectOption: DefaultNativeSelectOption,
    InputGroup: DefaultInputGroup,
    InputGroupAddon: DefaultInputGroupAddon,
    InputGroupInput: DefaultInputGroupInput,
    InputGroupText: DefaultInputGroupText,
    Checkbox: DefaultCheckbox,
    RadioGroup: DefaultRadioGroup,
    RadioGroupItem: DefaultRadioGroupItem,
  },
  {
    label: "Bold",
    source: "form-elements/bold",
    Input: BoldInput,
    Textarea: BoldTextarea,
    Select: BoldSelect,
    SelectContent: BoldSelectContent,
    SelectGroup: BoldSelectGroup,
    SelectItem: BoldSelectItem,
    SelectTrigger: BoldSelectTrigger,
    SelectValue: BoldSelectValue,
    NativeSelect: BoldNativeSelect,
    NativeSelectOption: BoldNativeSelectOption,
    InputGroup: BoldInputGroup,
    InputGroupAddon: BoldInputGroupAddon,
    InputGroupInput: BoldInputGroupInput,
    InputGroupText: BoldInputGroupText,
    Checkbox: BoldCheckbox,
    RadioGroup: BoldRadioGroup,
    RadioGroupItem: BoldRadioGroupItem,
  },
  {
    label: "Outline",
    source: "form-elements/outline",
    Input: OutlineInput,
    Textarea: OutlineTextarea,
    Select: OutlineSelect,
    SelectContent: OutlineSelectContent,
    SelectGroup: OutlineSelectGroup,
    SelectItem: OutlineSelectItem,
    SelectTrigger: OutlineSelectTrigger,
    SelectValue: OutlineSelectValue,
    NativeSelect: OutlineNativeSelect,
    NativeSelectOption: OutlineNativeSelectOption,
    InputGroup: OutlineInputGroup,
    InputGroupAddon: OutlineInputGroupAddon,
    InputGroupInput: OutlineInputGroupInput,
    InputGroupText: OutlineInputGroupText,
    Checkbox: OutlineCheckbox,
    RadioGroup: OutlineRadioGroup,
    RadioGroupItem: OutlineRadioGroupItem,
  },
  {
    label: "Strong Outline",
    source: "form-elements/strong-outline",
    Input: StrongOutlineInput,
    Textarea: StrongOutlineTextarea,
    Select: StrongOutlineSelect,
    SelectContent: StrongOutlineSelectContent,
    SelectGroup: StrongOutlineSelectGroup,
    SelectItem: StrongOutlineSelectItem,
    SelectTrigger: StrongOutlineSelectTrigger,
    SelectValue: StrongOutlineSelectValue,
    NativeSelect: StrongOutlineNativeSelect,
    NativeSelectOption: StrongOutlineNativeSelectOption,
    InputGroup: StrongOutlineInputGroup,
    InputGroupAddon: StrongOutlineInputGroupAddon,
    InputGroupInput: StrongOutlineInputGroupInput,
    InputGroupText: StrongOutlineInputGroupText,
    Checkbox: StrongOutlineCheckbox,
    RadioGroup: StrongOutlineRadioGroup,
    RadioGroupItem: StrongOutlineRadioGroupItem,
  },
  {
    label: "Shadow",
    source: "form-elements/shadow",
    Input: ShadowInput,
    Textarea: ShadowTextarea,
    Select: ShadowSelect,
    SelectContent: ShadowSelectContent,
    SelectGroup: ShadowSelectGroup,
    SelectItem: ShadowSelectItem,
    SelectTrigger: ShadowSelectTrigger,
    SelectValue: ShadowSelectValue,
    NativeSelect: ShadowNativeSelect,
    NativeSelectOption: ShadowNativeSelectOption,
    InputGroup: ShadowInputGroup,
    InputGroupAddon: ShadowInputGroupAddon,
    InputGroupInput: ShadowInputGroupInput,
    InputGroupText: ShadowInputGroupText,
    Checkbox: ShadowCheckbox,
    RadioGroup: ShadowRadioGroup,
    RadioGroupItem: ShadowRadioGroupItem,
  },
  {
    label: "Neutral",
    source: "form-elements/neutral",
    Input: NeutralInput,
    Textarea: NeutralTextarea,
    Select: NeutralSelect,
    SelectContent: NeutralSelectContent,
    SelectGroup: NeutralSelectGroup,
    SelectItem: NeutralSelectItem,
    SelectTrigger: NeutralSelectTrigger,
    SelectValue: NeutralSelectValue,
    NativeSelect: NeutralNativeSelect,
    NativeSelectOption: NeutralNativeSelectOption,
    InputGroup: NeutralInputGroup,
    InputGroupAddon: NeutralInputGroupAddon,
    InputGroupInput: NeutralInputGroupInput,
    InputGroupText: NeutralInputGroupText,
    Checkbox: NeutralCheckbox,
    RadioGroup: NeutralRadioGroup,
    RadioGroupItem: NeutralRadioGroupItem,
  },
  {
    label: "Bold Skewed",
    source: "form-elements/bold-skewed",
    Input: BoldSkewedInput,
    Textarea: BoldSkewedTextarea,
    Select: BoldSkewedSelect,
    SelectContent: BoldSkewedSelectContent,
    SelectGroup: BoldSkewedSelectGroup,
    SelectItem: BoldSkewedSelectItem,
    SelectTrigger: BoldSkewedSelectTrigger,
    SelectValue: BoldSkewedSelectValue,
    NativeSelect: BoldSkewedNativeSelect,
    NativeSelectOption: BoldSkewedNativeSelectOption,
    InputGroup: BoldSkewedInputGroup,
    InputGroupAddon: BoldSkewedInputGroupAddon,
    InputGroupInput: BoldSkewedInputGroupInput,
    InputGroupText: BoldSkewedInputGroupText,
    Checkbox: BoldSkewedCheckbox,
    RadioGroup: BoldSkewedRadioGroup,
    RadioGroupItem: BoldSkewedRadioGroupItem,
  },
  {
    label: "Underline",
    source: "form-elements/underline",
    Input: UnderlineInput,
    Textarea: UnderlineTextarea,
    Select: UnderlineSelect,
    SelectContent: UnderlineSelectContent,
    SelectGroup: UnderlineSelectGroup,
    SelectItem: UnderlineSelectItem,
    SelectTrigger: UnderlineSelectTrigger,
    SelectValue: UnderlineSelectValue,
    NativeSelect: UnderlineNativeSelect,
    NativeSelectOption: UnderlineNativeSelectOption,
    InputGroup: UnderlineInputGroup,
    InputGroupAddon: UnderlineInputGroupAddon,
    InputGroupInput: UnderlineInputGroupInput,
    InputGroupText: UnderlineInputGroupText,
    Checkbox: UnderlineCheckbox,
    RadioGroup: UnderlineRadioGroup,
    RadioGroupItem: UnderlineRadioGroupItem,
  },
] as const satisfies readonly FormStyle[]

function SelectExample({ style, id }: { style: FormStyle; id: string }) {
  const {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
  } = style

  return (
    <Select defaultValue="design">
      <SelectTrigger id={id} className="w-full">
        <SelectValue placeholder="Choose a team" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="design">Design</SelectItem>
          <SelectItem value="engineering">Engineering</SelectItem>
          <SelectItem value="marketing">Marketing</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

function NativeSelectExample({ style, id }: { style: FormStyle; id: string }) {
  const { NativeSelect, NativeSelectOption } = style

  return (
    <NativeSelect id={id} className="w-full" defaultValue="weekly">
      <NativeSelectOption value="daily">Daily</NativeSelectOption>
      <NativeSelectOption value="weekly">Weekly</NativeSelectOption>
      <NativeSelectOption value="monthly">Monthly</NativeSelectOption>
    </NativeSelect>
  )
}

function InputGroupExample({ style }: { style: FormStyle }) {
  const { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } = style

  return (
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <MailIcon />
      </InputGroupAddon>
      <InputGroupInput placeholder="Email address" type="email" />
      <InputGroupAddon align="inline-end">
        <InputGroupText>.com</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  )
}

function CheckboxExample({ style, id }: { style: FormStyle; id: string }) {
  const { Checkbox } = style

  return (
    <div className="flex flex-col gap-2">
      <label
        className="flex items-center gap-2 text-sm font-normal"
        htmlFor={`${id}-checked`}
      >
        <Checkbox id={`${id}-checked`} defaultChecked />
        Checked
      </label>
      <label
        className="flex items-center gap-2 text-sm font-normal"
        htmlFor={`${id}-indeterminate`}
      >
        <Checkbox id={`${id}-indeterminate`} defaultChecked="indeterminate" />
        Indeterminate
      </label>
    </div>
  )
}

function RadioExample({ style, id }: { style: FormStyle; id: string }) {
  const { RadioGroup, RadioGroupItem } = style

  return (
    <RadioGroup defaultValue="email" className="gap-2">
      <label
        className="flex items-center gap-2 text-sm font-normal"
        htmlFor={`${id}-email`}
      >
        <RadioGroupItem id={`${id}-email`} value="email" />
        Email updates
      </label>
      <label
        className="flex items-center gap-2 text-sm font-normal"
        htmlFor={`${id}-product`}
      >
        <RadioGroupItem id={`${id}-product`} value="product" />
        Product news
      </label>
    </RadioGroup>
  )
}

function FieldPreview({
  label,
  children,
}: {
  label: string
  children: React.ReactNode
}) {
  return (
    <div className="flex flex-col gap-2 text-sm font-medium">
      <span className="text-foreground">{label}</span>
      {children}
    </div>
  )
}

export function FormElementsShowcase() {
  return (
    <section
      className="bg-background"
      aria-labelledby="form-elements-showcase-heading"
    >
      <div className="wrapper py-16 sm:py-24">
        <div className="tagline">Inputs</div>
        <h1 id="form-elements-showcase-heading" className="heading-lg mb-3">
          Form element styles
        </h1>
        <p className="paragraph mb-14 max-w-2xl">
          Standalone input, textarea, select, native select, and input group
          files that install over the default form controls.
        </p>

        <div className="flex flex-col gap-10">
          {FORM_STYLES.map((style) => {
            const { Input, Textarea, label, source } = style
            const idBase = source.replace("/", "-")

            return (
              <div
                key={source}
                className="rounded-4xl border bg-card p-6 shadow-sm"
              >
                <div className="mb-6">
                  <h2 className="heading-sm mb-2">{label}</h2>
                  <p className="paragraph-sm font-mono text-xs">{source}</p>
                </div>

                <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                  <FieldPreview label="Input">
                    <Input id={`${idBase}-input`} placeholder="Name" />
                  </FieldPreview>
                  <FieldPreview label="Search group">
                    <style.InputGroup>
                      <style.InputGroupAddon align="inline-start">
                        <SearchIcon />
                      </style.InputGroupAddon>
                      <style.InputGroupInput placeholder="Search docs" />
                    </style.InputGroup>
                  </FieldPreview>
                  <FieldPreview label="Select">
                    <SelectExample style={style} id={`${idBase}-select`} />
                  </FieldPreview>
                  <FieldPreview label="Native select">
                    <NativeSelectExample
                      style={style}
                      id={`${idBase}-native-select`}
                    />
                  </FieldPreview>
                  <FieldPreview label="Input group">
                    <InputGroupExample style={style} />
                  </FieldPreview>
                  <FieldPreview label="Textarea">
                    <Textarea
                      id={`${idBase}-textarea`}
                      placeholder="Write a short message"
                    />
                  </FieldPreview>
                  <FieldPreview label="Checkbox">
                    <CheckboxExample style={style} id={`${idBase}-checkbox`} />
                  </FieldPreview>
                  <FieldPreview label="Radio group">
                    <RadioExample style={style} id={`${idBase}-radio`} />
                  </FieldPreview>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}