Select

import { Field, FieldLabel } from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const regions = [
  { label: "Wybierz region", value: null },
  { label: "Frankfurt (eu-central-1)", value: "fra1" },
  { label: "Londyn (eu-west-2)", value: "lhr1" },
  { label: "Waszyngton (us-east-1)", value: "iad1" },
  { label: "San Francisco (us-west-1)", value: "sfo1" },
  { label: "Tokio (ap-northeast-1)", value: "hnd1" },
]

export default function SelectDemo() {
  return (
    <Field className="w-72">
      <FieldLabel htmlFor="region">Region wdrożenia</FieldLabel>
      <Select items={regions} defaultValue="fra1">
        <SelectTrigger id="region" className="w-full">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {regions.slice(1).map((region) => (
              <SelectItem key={region.value} value={region.value}>
                {region.label}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
  )
}

import * as React from "react"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const timezones = [
  {
    region: "Ameryka",
    zones: [
      { label: "Nowy Jork (GMT−5)", value: "america/new_york" },
      { label: "Chicago (GMT−6)", value: "america/chicago" },
      { label: "Los Angeles (GMT−8)", value: "america/los_angeles" },
      { label: "São Paulo (GMT−3)", value: "america/sao_paulo" },
    ],
  },
  {
    region: "Europa",
    zones: [
      { label: "Londyn (GMT+0)", value: "europe/london" },
      { label: "Berlin (GMT+1)", value: "europe/berlin" },
      { label: "Warszawa (GMT+1)", value: "europe/warsaw" },
    ],
  },
  {
    region: "Azja i Pacyfik",
    zones: [
      { label: "Singapur (GMT+8)", value: "asia/singapore" },
      { label: "Tokio (GMT+9)", value: "asia/tokyo" },
      { label: "Sydney (GMT+11)", value: "australia/sydney" },
    ],
  },
]

const items = [
  { label: "Wybierz strefę czasową", value: null },
  ...timezones.flatMap((group) => group.zones),
]

export default function SelectGroups() {
  return (
    <Select items={items}>
      <SelectTrigger className="w-64" aria-label="Strefa czasowa">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        {timezones.map((group, index) => (
          <React.Fragment key={group.region}>
            {index > 0 && <SelectSeparator />}
            <SelectGroup>
              <SelectLabel>{group.region}</SelectLabel>
              {group.zones.map((zone) => (
                <SelectItem key={zone.value} value={zone.value}>
                  {zone.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </React.Fragment>
        ))}
      </SelectContent>
    </Select>
  )
}

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const periods = [
  { label: "Ostatnie 7 dni", value: "7d" },
  { label: "Ostatnie 30 dni", value: "30d" },
  { label: "Ostatnie 90 dni", value: "90d" },
]

const sizes = ["sm", "default", "lg"] as const

export default function SelectSizes() {
  return (
    <div className="flex flex-col items-center gap-4">
      {sizes.map((size) => (
        <div key={size} className="flex items-center gap-2">
          <Select items={periods} defaultValue="30d">
            <SelectTrigger size={size} className="w-40" aria-label="Okres">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {periods.map((period) => (
                  <SelectItem key={period.value} value={period.value}>
                    {period.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
          <Input size={size} placeholder="Filtruj zdarzenia" className="w-40" />
          <Button size={size} variant="outline">
            Eksportuj
          </Button>
        </div>
      ))}
    </div>
  )
}

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const fonts = [
  { label: "Inter", value: "inter" },
  { label: "Geist Mono", value: "geist-mono" },
  { label: "System UI", value: "system" },
  { label: "Georgia", value: "georgia" },
]

function FontSelect({ popper }: { popper?: boolean }) {
  return (
    <Select items={fonts} defaultValue="geist-mono">
      <SelectTrigger
        id={popper ? "font-popper" : "font-aligned"}
        className="w-full"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent alignItemWithTrigger={!popper}>
        <SelectGroup>
          {fonts.map((font) => (
            <SelectItem key={font.value} value={font.value}>
              {font.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

export default function SelectPositioning() {
  return (
    <div className="grid w-full max-w-lg gap-8 sm:grid-cols-2">
      <Field>
        <FieldLabel htmlFor="font-aligned">Wyrównanie do opcji</FieldLabel>
        <FontSelect />
        <FieldDescription>
          Zaznaczona opcja nakrywa wyzwalacz — jak w natywnym menu.
        </FieldDescription>
      </Field>
      <Field>
        <FieldLabel htmlFor="font-popper">Popper</FieldLabel>
        <FontSelect popper />
        <FieldDescription>
          Lista rozwija się pod wyzwalaczem i nigdy go nie zasłania.
        </FieldDescription>
      </Field>
    </div>
  )
}

"use client"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const channels = [
  { label: "E-mail", value: "email" },
  { label: "Powiadomienia push", value: "push" },
  { label: "SMS", value: "sms" },
  { label: "Slack", value: "slack" },
  { label: "Microsoft Teams", value: "teams" },
]

export default function SelectMultiple() {
  return (
    <Select items={channels} multiple defaultValue={["email", "slack"]}>
      <SelectTrigger className="w-64" aria-label="Kanały powiadomień">
        <SelectValue>
          {(value: string[]) => {
            if (value.length === 0) return "Wybierz kanały"
            if (value.length === 1) {
              return channels.find((channel) => channel.value === value[0])
                ?.label
            }
            return `Kanały: ${value.length}`
          }}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {channels.map((channel) => (
            <SelectItem key={channel.value} value={channel.value}>
              {channel.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

"use client"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const plans = [
  {
    name: "Hobby",
    price: "0 $",
    description: "Do projektów osobistych i eksperymentów.",
  },
  {
    name: "Pro",
    price: "20 $",
    description: "Dla profesjonalistów wdrażających na produkcję.",
  },
  {
    name: "Team",
    price: "60 $",
    description: "Wspólne przestrzenie robocze, role i dzienniki audytu.",
  },
]

type Plan = (typeof plans)[number]

function PlanOption({ plan }: { plan: Plan }) {
  return (
    <span className="flex w-full flex-col items-start gap-0.5 text-left">
      <span className="flex w-full items-baseline justify-between gap-4 text-sm font-medium text-foreground">
        {plan.name}
        <span className="font-normal text-muted-foreground tabular-nums">
          {plan.price}/mies.
        </span>
      </span>
      <span className="text-xs whitespace-normal text-muted-foreground">
        {plan.description}
      </span>
    </span>
  )
}

export default function SelectRichItems() {
  return (
    <Select
      defaultValue={plans[1]}
      itemToStringValue={(plan: Plan) => plan.name}
    >
      <SelectTrigger
        className="h-auto w-full max-w-80 py-2.5"
        aria-label="Plan"
      >
        <SelectValue>{(plan: Plan) => <PlanOption plan={plan} />}</SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {plans.map((plan) => (
            <SelectItem key={plan.name} value={plan} className="py-2">
              <PlanOption plan={plan} />
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

"use client"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { cn } from "@/lib/utils"

const statuses = [
  {
    label: "Backlog",
    value: "backlog",
    dot: "border border-gray-9 bg-transparent",
  },
  { label: "Do zrobienia", value: "todo", dot: "bg-gray-9" },
  { label: "W toku", value: "in-progress", dot: "bg-warning-9" },
  { label: "W przeglądzie", value: "in-review", dot: "bg-brand-9" },
  { label: "Gotowe", value: "done", dot: "bg-success-9" },
  { label: "Anulowane", value: "canceled", dot: "bg-danger-9", disabled: true },
]

function StatusDot({ className }: { className?: string }) {
  return (
    <span
      aria-hidden="true"
      className={cn("size-2 shrink-0 rounded-full", className)}
    />
  )
}

export default function SelectStatus() {
  return (
    <Select items={statuses} defaultValue="in-progress">
      <SelectTrigger className="w-48" aria-label="Status">
        <SelectValue>
          {(value: string) => {
            const status = statuses.find((item) => item.value === value)
            return (
              <>
                <StatusDot className={status?.dot} />
                {status?.label}
              </>
            )
          }}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          {statuses.map((status) => (
            <SelectItem
              key={status.value}
              value={status.value}
              disabled={status.disabled}
            >
              <StatusDot className={status.dot} />
              {status.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const roles = [
  { label: "Wybierz rolę", value: null },
  { label: "Przeglądający", value: "viewer" },
  { label: "Edytujący", value: "editor" },
  { label: "Administrator", value: "admin" },
  { label: "Właściciel", value: "owner" },
]

const languages = [
  { label: "English", value: "en" },
  { label: "Polski", value: "pl" },
  { label: "Deutsch", value: "de" },
]

export default function SelectForm() {
  return (
    <FieldGroup className="w-full max-w-sm">
      <Field>
        <FieldLabel htmlFor="language">Język</FieldLabel>
        <Select items={languages} name="language" defaultValue="en">
          <SelectTrigger id="language" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {languages.map((language) => (
                <SelectItem key={language.value} value={language.value}>
                  {language.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
        <FieldDescription>Używany w e-mailach i w panelu.</FieldDescription>
      </Field>
      <Field data-invalid>
        <FieldLabel htmlFor="role">Rola</FieldLabel>
        <Select items={roles} name="role" required>
          <SelectTrigger id="role" className="w-full" aria-invalid>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {roles.slice(1).map((role) => (
                <SelectItem key={role.value} value={role.value}>
                  {role.label}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
        <FieldError>Wybierz rolę przed wysłaniem zaproszenia.</FieldError>
      </Field>
      <Field data-disabled>
        <FieldLabel htmlFor="workspace">Przestrzeń robocza</FieldLabel>
        <Select
          items={[{ label: "Acme Inc.", value: "acme" }]}
          defaultValue="acme"
          disabled
        >
          <SelectTrigger id="workspace" className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="acme">Acme Inc.</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </Field>
    </FieldGroup>
  )
}