{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "reminders-01",
  "title": "Reminder List",
  "description": "A short reminder list you can search, check off and add to.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/button",
    "@cupertinoui/checkbox",
    "@cupertinoui/input",
    "@cupertinoui/search-field",
    "@cupertinoui/window"
  ],
  "files": [
    {
      "path": "registry/macos/blocks/reminders-01/reminders-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PlusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/macos/ui/button\"\nimport { Checkbox } from \"@/registry/macos/ui/checkbox\"\nimport { Input } from \"@/registry/macos/ui/input\"\nimport { SearchField } from \"@/registry/macos/ui/search-field\"\nimport {\n  Window,\n  WindowContent,\n  WindowControls,\n  WindowMain,\n  WindowTitle,\n  WindowTitlebar,\n} from \"@/registry/macos/ui/window\"\n\ntype Reminder = { id: number; title: string; done: boolean }\n\nconst initialReminders: Reminder[] = [\n  { id: 1, title: \"Ship the free blocks\", done: false },\n  { id: 2, title: \"Reply to Maya\", done: false },\n  { id: 3, title: \"Renew the domain\", done: true },\n  { id: 4, title: \"Book a dentist appointment\", done: false },\n  { id: 5, title: \"Export the October invoices\", done: false },\n]\n\n// A short reminder list: search, check off, and add a new one.\nexport function Reminders01({\n  className,\n  ...props\n}: React.ComponentProps<typeof Window>) {\n  const [reminders, setReminders] = React.useState(initialReminders)\n  const [query, setQuery] = React.useState(\"\")\n  const [draft, setDraft] = React.useState(\"\")\n  const nextId = React.useRef(initialReminders.length + 1)\n\n  const needle = query.trim().toLowerCase()\n  const visible = reminders.filter((item) => item.title.toLowerCase().includes(needle))\n\n  function toggle(id: number, done: boolean) {\n    setReminders((current) =>\n      current.map((item) => (item.id === id ? { ...item, done } : item))\n    )\n  }\n\n  return (\n    <Window className={cn(\"h-[480px] w-[340px]\", className)} {...props}>\n      <WindowMain>\n        <WindowTitlebar>\n          <WindowControls />\n          <WindowTitle>Reminders</WindowTitle>\n        </WindowTitlebar>\n        <WindowContent className=\"flex flex-col overflow-hidden\">\n          <div className=\"px-3 pt-3 pb-2\">\n            <SearchField\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder=\"Search\"\n              aria-label=\"Search reminders\"\n              className=\"w-full\"\n            />\n          </div>\n          <div className=\"min-h-0 flex-1 overflow-auto px-1.5 pb-1\">\n            {visible.length === 0 ? (\n              <p className=\"px-3 py-8 text-center text-mac-body text-mac-label-secondary\">\n                {reminders.length === 0 ? \"No reminders yet\" : \"No matching reminders\"}\n              </p>\n            ) : (\n              <ul>\n                {visible.map((item) => (\n                  <li key={item.id}>\n                    <label className=\"flex cursor-default items-center gap-2.5 rounded-[6px] px-2.5 py-[7px] hover:bg-mac-fill-quaternary\">\n                      <Checkbox\n                        checked={item.done}\n                        onCheckedChange={(checked) => toggle(item.id, checked === true)}\n                        aria-label={item.title}\n                      />\n                      <span\n                        className={cn(\n                          \"min-w-0 truncate text-mac-body\",\n                          item.done && \"text-mac-label-tertiary line-through\"\n                        )}\n                      >\n                        {item.title}\n                      </span>\n                    </label>\n                  </li>\n                ))}\n              </ul>\n            )}\n          </div>\n          <form\n            className=\"flex items-center gap-2 border-t border-mac-separator px-3 py-2.5\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              const title = draft.trim()\n              if (!title) return\n              const id = nextId.current++\n              setReminders((current) => [...current, { id, title, done: false }])\n              setDraft(\"\")\n              setQuery(\"\")\n            }}\n          >\n            <Input\n              value={draft}\n              onChange={(event) => setDraft(event.target.value)}\n              placeholder=\"New Reminder\"\n              aria-label=\"New reminder\"\n            />\n            <Button\n              type=\"submit\"\n              size=\"icon\"\n              variant=\"secondary\"\n              disabled={!draft.trim()}\n              aria-label=\"Add reminder\"\n            >\n              <PlusIcon />\n            </Button>\n          </form>\n        </WindowContent>\n      </WindowMain>\n    </Window>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/reminders-01.tsx"
    }
  ],
  "type": "registry:block"
}