{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feedback-01",
  "title": "Feedback",
  "description": "A feedback window with a topic, a subject, a message and a short thank-you after sending.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/button",
    "@cupertinoui/checkbox",
    "@cupertinoui/icon-tile",
    "@cupertinoui/input",
    "@cupertinoui/label",
    "@cupertinoui/select",
    "@cupertinoui/textarea",
    "@cupertinoui/window"
  ],
  "files": [
    {
      "path": "registry/macos/blocks/feedback-01/feedback-01.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/macos/ui/button\"\nimport { Checkbox } from \"@/registry/macos/ui/checkbox\"\nimport { IconTile } from \"@/registry/macos/ui/icon-tile\"\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 { Textarea } from \"@/registry/macos/ui/textarea\"\nimport {\n  Window,\n  WindowContent,\n  WindowControls,\n  WindowMain,\n  WindowTitle,\n  WindowTitlebar,\n} from \"@/registry/macos/ui/window\"\n\nconst topics = {\n  bug: \"Bug\",\n  idea: \"Idea\",\n  question: \"Question\",\n  other: \"Something else\",\n} as const\n\ntype Topic = keyof typeof topics\n\n// A feedback window: topic, subject, message, then a short thank-you.\nexport function Feedback01({\n  className,\n  ...props\n}: React.ComponentProps<typeof Window>) {\n  const subjectId = React.useId()\n  const messageId = React.useId()\n  const [topic, setTopic] = React.useState<Topic>(\"idea\")\n  const [subject, setSubject] = React.useState(\"\")\n  const [message, setMessage] = React.useState(\"\")\n  const [sent, setSent] = React.useState(false)\n\n  return (\n    <Window className={cn(\"h-[440px] w-[400px]\", className)} {...props}>\n      <WindowMain>\n        <WindowTitlebar>\n          <WindowControls />\n          <WindowTitle>Feedback</WindowTitle>\n        </WindowTitlebar>\n        <WindowContent className=\"flex flex-col px-5 py-4\">\n          {sent ? (\n            <div className=\"flex flex-1 flex-col items-center justify-center text-center\">\n              <IconTile color=\"green\" className=\"size-16 rounded-[16px] [&_svg]:size-8\">\n                <CheckIcon strokeWidth={2} />\n              </IconTile>\n              <h2 className=\"mt-4 text-mac-title-1 font-bold\">Thanks for the note</h2>\n              <p className=\"mt-1 max-w-[260px] text-mac-body text-mac-label-secondary\">\n                {`${subject ? `${topics[topic]}: ${subject}` : topics[topic]}. This is a sample, so nothing was sent.`}\n              </p>\n              <Button\n                variant=\"secondary\"\n                className=\"mt-6\"\n                onClick={() => {\n                  setSent(false)\n                  setSubject(\"\")\n                  setMessage(\"\")\n                }}\n              >\n                Send Another\n              </Button>\n            </div>\n          ) : (\n            <form\n              className=\"flex flex-1 flex-col gap-3\"\n              onSubmit={(event) => {\n                event.preventDefault()\n                setSent(true)\n              }}\n            >\n              <div className=\"flex items-center justify-between gap-3\">\n                <Label>Topic</Label>\n                <Select\n                  value={topic}\n                  onValueChange={(value) => value && setTopic(value as Topic)}\n                  items={topics}\n                >\n                  <SelectTrigger aria-label=\"Topic\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    {(Object.keys(topics) as Topic[]).map((value) => (\n                      <SelectItem key={value} value={value}>\n                        {topics[value]}\n                      </SelectItem>\n                    ))}\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <Label htmlFor={subjectId}>Subject</Label>\n                <Input\n                  id={subjectId}\n                  value={subject}\n                  onChange={(event) => setSubject(event.target.value)}\n                  placeholder=\"A short summary\"\n                />\n              </div>\n              <div className=\"flex min-h-0 flex-1 flex-col gap-1\">\n                <Label htmlFor={messageId}>Message</Label>\n                <Textarea\n                  id={messageId}\n                  value={message}\n                  onChange={(event) => setMessage(event.target.value)}\n                  placeholder=\"What happened, or what would help?\"\n                  className=\"min-h-24 flex-1 resize-none\"\n                  required\n                />\n              </div>\n              <Label className=\"gap-[6px]\">\n                <Checkbox />\n                Include a screenshot\n              </Label>\n              <div className=\"flex justify-end\">\n                <Button type=\"submit\" disabled={!message.trim()}>\n                  Send\n                </Button>\n              </div>\n            </form>\n          )}\n        </WindowContent>\n      </WindowMain>\n    </Window>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/feedback-01.tsx"
    }
  ],
  "type": "registry:block"
}