{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "world-clock-bar",
  "title": "World Clock Bar",
  "description": "Multi-timezone display for follow-the-sun teams and operational handoffs.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/world-clock-bar/world-clock-bar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport type { HeadingTag } from \"@vllnt/ui\";\nimport { useLiveDate } from \"@vllnt/ui\";\nimport { cn } from \"@vllnt/ui\";\nimport { Badge } from \"@vllnt/ui\";\n\nexport type WorldClockBarZone = {\n  city: string;\n  locale?: string;\n  timeZone: string;\n};\n\nexport type WorldClockBarProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Heading tag for the title. Defaults to `h2`. */\n  as?: HeadingTag;\n  now?: Date | number | string;\n  showDate?: boolean;\n  title?: string;\n  updateIntervalMs?: number;\n  zones: WorldClockBarZone[];\n};\n\nconst TIME_FORMATTER_CACHE = new Map<string, Intl.DateTimeFormat>();\nfunction getTimeFormatter(\n  locale: string,\n  timeZone: string,\n): Intl.DateTimeFormat {\n  const key = `${locale}|${timeZone}`;\n  let formatter = TIME_FORMATTER_CACHE.get(key);\n  if (!formatter) {\n    formatter = Intl.DateTimeFormat(locale, {\n      hour: \"numeric\",\n      minute: \"2-digit\",\n      timeZone,\n      timeZoneName: \"short\",\n    });\n    TIME_FORMATTER_CACHE.set(key, formatter);\n  }\n  return formatter;\n}\n\nconst DATE_FORMATTER_CACHE = new Map<string, Intl.DateTimeFormat>();\nfunction getDateFormatter(\n  locale: string,\n  timeZone: string,\n): Intl.DateTimeFormat {\n  const key = `${locale}|${timeZone}`;\n  let formatter = DATE_FORMATTER_CACHE.get(key);\n  if (!formatter) {\n    formatter = Intl.DateTimeFormat(locale, {\n      day: \"numeric\",\n      month: \"short\",\n      timeZone,\n      weekday: \"short\",\n    });\n    DATE_FORMATTER_CACHE.set(key, formatter);\n  }\n  return formatter;\n}\n\nfunction formatZoneDateTime(\n  zone: WorldClockBarZone,\n  date: Date,\n  showDate: boolean,\n) {\n  const locale = zone.locale ?? \"en-US\";\n  const timeFormatter = getTimeFormatter(locale, zone.timeZone);\n  const dateFormatter = getDateFormatter(locale, zone.timeZone);\n\n  return {\n    date: showDate ? dateFormatter.format(date) : \"\",\n    time: timeFormatter.format(date),\n  };\n}\n\nfunction WorldClockCard({\n  date,\n  showDate,\n  zone,\n}: {\n  date: Date;\n  showDate: boolean;\n  zone: WorldClockBarZone;\n}) {\n  const formatted = formatZoneDateTime(zone, date, showDate);\n\n  return (\n    <div className=\"min-w-[190px] rounded-lg border bg-card px-4 py-3 shadow-sm\">\n      <div className=\"text-sm font-medium\">{zone.city}</div>\n      <div className=\"mt-1 text-2xl font-semibold tracking-tight\">\n        {formatted.time}\n      </div>\n      {showDate ? (\n        <div className=\"mt-1 text-xs text-muted-foreground\">\n          {formatted.date}\n        </div>\n      ) : null}\n      <div className=\"mt-3 text-[11px] uppercase tracking-[0.16em] text-muted-foreground\">\n        {zone.timeZone}\n      </div>\n    </div>\n  );\n}\n\nexport const WorldClockBar = ({\n  as: Heading = \"h2\",\n  className,\n  now,\n  ref,\n  showDate = true,\n  title = \"World clock\",\n  updateIntervalMs = 60_000,\n  zones,\n  ...props\n}: WorldClockBarProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const liveNow = useLiveDate(now, updateIntervalMs);\n\n  return (\n    <div className={cn(\"space-y-3\", className)} ref={ref} {...props}>\n      <div className=\"flex items-center justify-between gap-3\">\n        <div>\n          <Heading className=\"text-lg font-semibold tracking-tight\">\n            {title}\n          </Heading>\n          <p className=\"text-sm text-muted-foreground\">\n            Synchronized time across distributed teams and regions.\n          </p>\n        </div>\n        <Badge variant=\"outline\">{zones.length} zones</Badge>\n      </div>\n\n      <div className=\"flex gap-3 overflow-x-auto pb-1\">\n        {zones.map((zone) => (\n          <WorldClockCard\n            date={liveNow}\n            key={`${zone.city}-${zone.timeZone}`}\n            showDate={showDate}\n            zone={zone}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nWorldClockBar.displayName = \"WorldClockBar\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}