{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-30",
  "title": "Time zone select",
  "description": "Every time zone of the browser, sorted by its offset from GMT.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/select.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/select/select-30.tsx",
      "content": "import { Field, FieldLabel } from '@/registry/ndeko/ui/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/ndeko/ui/select';\n\ntype TimezoneOption = {\n  value: string;\n  label: string;\n  offsetHours: number;\n};\n\nfunction offsetNameOf(timezone: string, now: Date) {\n  const formatter = new Intl.DateTimeFormat('en', {\n    timeZone: timezone,\n    timeZoneName: 'shortOffset',\n  });\n  const parts = formatter.formatToParts(now);\n  const namePart = parts.find((part) => part.type === 'timeZoneName');\n  const offsetName = namePart?.value ?? 'GMT';\n  if (offsetName === 'GMT') {\n    return 'GMT+0';\n  }\n  return offsetName;\n}\n\nfunction offsetHoursOf(offsetName: string) {\n  const signedOffset = offsetName.replace('GMT', '');\n  return Number.parseInt(signedOffset, 10);\n}\n\nfunction timezoneOptionOf(timezone: string, now: Date): TimezoneOption {\n  const offsetName = offsetNameOf(timezone, now);\n  const placeName = timezone.replaceAll('_', ' ');\n  const offsetHours = offsetHoursOf(offsetName);\n  return {\n    value: timezone,\n    label: `(${offsetName}) ${placeName}`,\n    offsetHours,\n  };\n}\n\nfunction byOffset(first: TimezoneOption, second: TimezoneOption) {\n  return first.offsetHours - second.offsetHours;\n}\n\nfunction timezoneOptionsOf(now: Date) {\n  const timezones = Intl.supportedValuesOf('timeZone');\n  const options = timezones.map((timezone) => timezoneOptionOf(timezone, now));\n  return options.sort(byOffset);\n}\n\nconst TIMEZONES = timezoneOptionsOf(new Date());\n\nexport default function Select30() {\n  return (\n    <Field className='w-full max-w-xs'>\n      <FieldLabel>Time zone</FieldLabel>\n      <Select items={TIMEZONES} defaultValue='Europe/London'>\n        <SelectTrigger>\n          <SelectValue placeholder='Pick a time zone' />\n        </SelectTrigger>\n        <SelectContent className='max-h-80'>\n          {TIMEZONES.map((timezone) => (\n            <SelectItem key={timezone.value} value={timezone.value}>\n              {timezone.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "select"
  ],
  "type": "registry:component"
}