{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "reminders-card", "type": "registry:ui", "title": "Reminders Card", "description": "A widget-style checklist with an accent header, live clock, animated checkboxes and inline add.", "files": [ { "path": "src/registry/ui/reminders-card.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { useId, useRef, useState, useSyncExternalStore } from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Reminder = { id: string; label: string; done: boolean };\n\nexport type RemindersCardProps = Omit<\n React.ComponentProps<\"section\">,\n \"title\"\n> & {\n title?: React.ReactNode;\n listTitle?: React.ReactNode;\n /** Reminders (controlled). */\n reminders?: Reminder[];\n defaultReminders?: Reminder[];\n onRemindersChange?: (reminders: Reminder[]) => void;\n /** IANA time zone for the header clock. Defaults to the visitor's own. */\n timeZone?: string;\n /** Hide the header clock. */\n showClock?: boolean;\n /** Called by \"Done\" when no reminder is being added. */\n onDone?: () => void;\n doneLabel?: React.ReactNode;\n placeholder?: string;\n /** Any CSS color. Tints the header gradient and the card. */\n accent?: string;\n};\n\nconst EASE_OUT = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\n\n// Soft light spots over the accent, like a lit glass widget.\nconst HEADER_GLOW = [\n \"radial-gradient(120% 140% at 20% -10%, color-mix(in oklab, var(--reminders-accent) 35%, white), transparent 55%)\",\n \"radial-gradient(90% 120% at 105% 110%, color-mix(in oklab, var(--reminders-accent) 45%, white), transparent 50%)\",\n \"var(--reminders-accent)\",\n].join(\", \");\n\nlet nextId = 0;\nconst createId = () => `reminder-${Date.now().toString(36)}-${nextId++}`;\n\nexport function RemindersCard({\n title = \"Reminders\",\n listTitle = \"Tasks for Today\",\n reminders,\n defaultReminders = [],\n onRemindersChange,\n timeZone,\n showClock = true,\n onDone,\n doneLabel = \"Done\",\n placeholder = \"New reminder\",\n accent = \"#0A6EFF\",\n className,\n style,\n ...props\n}: RemindersCardProps) {\n const listTitleId = useId();\n const inputId = useId();\n const inputRef = useRef(null);\n const time = useClock(showClock ? (timeZone ?? \"local\") : undefined);\n\n const [uncontrolled, setUncontrolled] = useState(defaultReminders);\n const items = reminders ?? uncontrolled;\n const update = (next: Reminder[]) => {\n if (reminders === undefined) setUncontrolled(next);\n onRemindersChange?.(next);\n };\n\n const [adding, setAdding] = useState(false);\n const [draft, setDraft] = useState(\"\");\n\n const toggle = (id: string) =>\n update(\n items.map((item) =>\n item.id === id ? { ...item, done: !item.done } : item,\n ),\n );\n\n // Adds the draft and keeps the field open for the next one, like Reminders on iOS.\n const commit = () => {\n const label = draft.trim();\n if (label) update([...items, { id: createId(), label, done: false }]);\n setDraft(\"\");\n };\n // Done and × both keep what was typed, so closing never loses a reminder.\n const finishAdding = () => {\n commit();\n setAdding(false);\n };\n\n const openAdding = () => {\n setAdding(true);\n // The input mounts on this render; focus it right after.\n requestAnimationFrame(() => inputRef.current?.focus());\n };\n\n return (\n \n \n
\n

{title}

\n {showClock && (\n

\n Current time \n {/* Empty until mounted: the server can't know the visitor's clock. */}\n {time ?? \" \"}\n

\n )}\n
\n \n {doneLabel}\n \n \n\n
\n

\n {listTitle}\n

\n\n
    \n {items.map((item) => (\n \n toggle(item.id)} />\n \n ))}\n\n {adding && (\n \n \n \n setDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\") {\n event.preventDefault();\n commit();\n } else if (event.key === \"Escape\") {\n // Escape cancels: drop the draft.\n setDraft(\"\");\n setAdding(false);\n }\n }}\n placeholder={placeholder}\n enterKeyHint=\"done\"\n autoComplete=\"off\"\n className=\"min-w-0 flex-1 bg-transparent text-lg outline-none placeholder:text-current placeholder:opacity-40\"\n />\n \n )}\n
\n\n \n {/* + turns into × while adding. */}\n \n \n
\n \n );\n}\n\nfunction ReminderCheckbox({\n item,\n onToggle,\n}: {\n item: Reminder;\n onToggle: () => void;\n}) {\n return (\n \n );\n}\n\n// \"14:17\" in a time zone (\"local\" for the visitor's), updating on each minute boundary.\nfunction useClock(timeZone: string | undefined) {\n return useSyncExternalStore(\n subscribeToMinutes,\n () => (timeZone ? formatClock(timeZone) : null),\n () => null,\n );\n}\n\nfunction subscribeToMinutes(onTick: () => void) {\n let interval: ReturnType | undefined;\n const timeout = setTimeout(\n () => {\n onTick();\n interval = setInterval(onTick, 60_000);\n },\n 60_000 - (Date.now() % 60_000),\n );\n return () => {\n clearTimeout(timeout);\n clearInterval(interval);\n };\n}\n\nconst clockFormatters = new Map();\n\nfunction formatClock(timeZone: string) {\n let formatter = clockFormatters.get(timeZone);\n if (!formatter) {\n formatter = new Intl.DateTimeFormat(\"en-GB\", {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hourCycle: \"h23\",\n timeZone: timeZone === \"local\" ? undefined : timeZone,\n });\n clockFormatters.set(timeZone, formatter);\n }\n return formatter.format(new Date());\n}\n" } ], "dependencies": [ "lucide-react" ] }