{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "save-panel-01",
  "title": "Save",
  "description": "A save dialog with a file name, a folder pop-up, optional tags, and Cancel and Save.",
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/button",
    "@cupertinoui/input",
    "@cupertinoui/label",
    "@cupertinoui/select",
    "@cupertinoui/window"
  ],
  "files": [
    {
      "path": "registry/macos/blocks/save-panel-01/save-panel-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/macos/ui/button\"\nimport { Input } from \"@/registry/macos/ui/input\"\nimport { Label } from \"@/registry/macos/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/macos/ui/select\"\nimport {\n  Window,\n  WindowContent,\n  WindowControls,\n  WindowMain,\n  WindowTitle,\n  WindowTitlebar,\n} from \"@/registry/macos/ui/window\"\n\nconst folders = {\n  documents: \"Documents\",\n  desktop: \"Desktop\",\n  downloads: \"Downloads\",\n  icloud: \"iCloud Drive\",\n} as const\n\ntype Folder = keyof typeof folders\n\n// A save dialog: file name, destination, tags, then Cancel and Save.\nexport function SavePanel01({\n  className,\n  ...props\n}: React.ComponentProps<typeof Window>) {\n  const nameId = React.useId()\n  const tagsId = React.useId()\n  const [name, setName] = React.useState(\"Untitled.tsx\")\n  const [folder, setFolder] = React.useState<Folder>(\"documents\")\n  const [tags, setTags] = React.useState(\"\")\n  const [saved, setSaved] = React.useState(false)\n\n  return (\n    <Window className={cn(\"h-[220px] w-[440px]\", className)} {...props}>\n      <WindowMain>\n        <WindowTitlebar>\n          <WindowControls />\n          <WindowTitle>Save</WindowTitle>\n        </WindowTitlebar>\n        <WindowContent className=\"flex flex-col px-5 py-4\">\n          {saved ? (\n            <div className=\"flex flex-1 flex-col\">\n              <div className=\"flex flex-1 flex-col items-center justify-center text-center\">\n                <p className=\"text-mac-body font-semibold\">Saved</p>\n                <p className=\"mt-1 text-mac-subheadline text-mac-label-secondary\">\n                  {name} in {folders[folder]}\n                  {tags ? `, tagged ${tags}` : \"\"}\n                </p>\n              </div>\n              <div className=\"flex justify-end\">\n                <Button onClick={() => setSaved(false)}>Done</Button>\n              </div>\n            </div>\n          ) : (\n            <form\n              className=\"flex flex-1 flex-col\"\n              onSubmit={(event) => {\n                event.preventDefault()\n                setSaved(true)\n              }}\n            >\n              <div className=\"grid grid-cols-[72px_1fr] items-center gap-x-3 gap-y-3\">\n                <Label htmlFor={nameId} className=\"justify-end text-mac-label-secondary\">\n                  Save As:\n                </Label>\n                <Input\n                  id={nameId}\n                  value={name}\n                  onChange={(event) => setName(event.target.value)}\n                  required\n                />\n                <span className=\"justify-self-end text-mac-body text-mac-label-secondary\">Where:</span>\n                <Select\n                  value={folder}\n                  onValueChange={(value) => value && setFolder(value as Folder)}\n                  items={folders}\n                >\n                  <SelectTrigger className=\"w-full\" aria-label=\"Where\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {(Object.keys(folders) as Folder[]).map((value) => (\n                      <SelectItem key={value} value={value}>\n                        {folders[value]}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n                <Label htmlFor={tagsId} className=\"justify-end text-mac-label-secondary\">\n                  Tags:\n                </Label>\n                <Input\n                  id={tagsId}\n                  value={tags}\n                  onChange={(event) => setTags(event.target.value)}\n                  placeholder=\"Optional\"\n                />\n              </div>\n              <div className=\"mt-auto flex justify-end gap-2\">\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  onClick={() => {\n                    setName(\"Untitled.tsx\")\n                    setTags(\"\")\n                    setFolder(\"documents\")\n                  }}\n                >\n                  Cancel\n                </Button>\n                <Button type=\"submit\">Save</Button>\n              </div>\n            </form>\n          )}\n        </WindowContent>\n      </WindowMain>\n    </Window>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/save-panel-01.tsx"
    }
  ],
  "type": "registry:block"
}