{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-time-picker-11","type":"registry:block","title":"Localized labels","description":"English, German, Chinese and Arabic labels, clocks and digits, with Arabic right to left.","dependencies":[],"registryDependencies":["card","tabs","@reui/time-picker"],"files":[{"path":"c-time-picker-11.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\nimport {\n  TimePicker,\n  TimePickerPanel,\n  type TimePickerHourCycle,\n  type TimePickerI18nOverrides,\n  type TimePickerPeriodPosition,\n} from \"@/components/reui/time-picker\"\n\nimport { Card } from \"@/components/ui/card\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\ntype PickerLocale = {\n  lang: string\n  name: string\n  dir: \"ltr\" | \"rtl\"\n  hourCycle: TimePickerHourCycle\n  periodPosition?: TimePickerPeriodPosition\n  i18n?: TimePickerI18nOverrides\n}\n\nconst ARABIC_DIGITS = \"٠١٢٣٤٥٦٧٨٩\"\n\n/* Module scope keeps each `i18n` object stable, so the picker merges it\n   with the English defaults once, not on every render. English is the\n   default config, so it passes none. */\nconst LOCALES: PickerLocale[] = [\n  { lang: \"en\", name: \"English\", dir: \"ltr\", hourCycle: 12 },\n  {\n    lang: \"de\",\n    name: \"Deutsch\",\n    dir: \"ltr\",\n    /* A 24-hour clock has no period column, so `period`, `am` and `pm` are\n       left out. */\n    hourCycle: 24,\n    i18n: {\n      labels: {\n        placeholder: \"Uhrzeit wählen\",\n        hour: \"Stunde\",\n        minute: \"Minute\",\n        second: \"Sekunde\",\n        now: \"Jetzt\",\n        clear: \"Löschen\",\n        confirm: \"OK\",\n        panelLabel: \"Uhrzeit wählen\",\n        openPicker: \"Zeitauswahl öffnen\",\n      },\n    },\n  },\n  {\n    lang: \"zh\",\n    name: \"中文\",\n    dir: \"ltr\",\n    hourCycle: 12,\n    /* 上午 and 下午 come before the time, so the period column leads. */\n    periodPosition: \"start\",\n    i18n: {\n      labels: {\n        placeholder: \"选择时间\",\n        hour: \"时\",\n        minute: \"分\",\n        second: \"秒\",\n        period: \"上午/下午\",\n        am: \"上午\",\n        pm: \"下午\",\n        now: \"现在\",\n        clear: \"清除\",\n        confirm: \"确定\",\n        panelLabel: \"选择时间\",\n        openPicker: \"打开时间选择器\",\n      },\n    },\n  },\n  {\n    lang: \"ar\",\n    name: \"العربية\",\n    dir: \"rtl\",\n    hourCycle: 12,\n    i18n: {\n      labels: {\n        placeholder: \"اختر الوقت\",\n        hour: \"الساعة\",\n        minute: \"الدقيقة\",\n        second: \"الثانية\",\n        period: \"ص/م\",\n        am: \"ص\",\n        pm: \"م\",\n        now: \"الآن\",\n        clear: \"مسح\",\n        confirm: \"تم\",\n        panelLabel: \"اختر الوقت\",\n        openPicker: \"فتح منتقي الوقت\",\n      },\n      functions: {\n        /* A string map rather than Intl, so the server and the browser print\n           the same digits. Column typeahead accepts both digit sets. */\n        formatSegment: (value) =>\n          String(value)\n            .padStart(2, \"0\")\n            .replace(/\\d/g, (digit) => ARABIC_DIGITS[Number(digit)]),\n      },\n    },\n  },\n]\n\nexport function Pattern() {\n  /* One value for every tab: the language changes the labels and the\n     clock, never the stored `HH:mm`. */\n  const [value, setValue] = useState<string | null>(\"14:30\")\n\n  return (\n    <div className=\"mx-auto flex w-full max-w-sm flex-col gap-3\">\n      <Tabs defaultValue=\"en\">\n        <TabsList>\n          {/* Each tab names its language in that language; `lang` lets a\n              screen reader pronounce it. */}\n          {LOCALES.map((locale) => (\n            <TabsTrigger\n              key={locale.lang}\n              value={locale.lang}\n              lang={locale.lang}\n            >\n              {locale.name}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n        {LOCALES.map((locale) => (\n          <TabsContent key={locale.lang} value={locale.lang}>\n            {/* Arabic mirrors the header and footer; the columns keep hour first. */}\n            <div dir={locale.dir} lang={locale.lang}>\n              <Card className=\"w-fit py-0\">\n                <TimePicker\n                  value={value}\n                  onValueChange={setValue}\n                  hourCycle={locale.hourCycle}\n                  periodPosition={locale.periodPosition}\n                  i18n={locale.i18n}\n                >\n                  <TimePickerPanel />\n                </TimePicker>\n              </Card>\n            </div>\n          </TabsContent>\n        ))}\n      </Tabs>\n      <p role=\"status\" className=\"text-muted-foreground text-sm\">\n        {value ? `Stored as ${value} in every language` : \"No time stored\"}\n      </p>\n    </div>\n  )\n}","target":"components/examples/c-time-picker-11.tsx"}],"meta":{"order":11,"label":"Localized"}}