{
  "navigationBar": "interface NavigationBarProps {\n  brandName?: string\n  navItems?: Array<{ label: string; icon: React.ReactNode; onClick?: () => void }>\n  avatarUrl?: string\n  avatarFallback?: string\n  onNotificationClick?: () => void\n  onSettingsClick?: () => void\n}\n\nfunction NavigationBar({ \n  brandName = \"BrandName\",\n  navItems = [\n    { label: \"Home\", icon: <House className=\"mr-2\" /> },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" /> },\n    { label: \"Projects\", icon: <Folder className=\"mr-2\" /> }\n  ],\n  avatarUrl = \"https://i.pravatar.cc/150?img=3\",\n  avatarFallback = \"U\",\n  onNotificationClick,\n  onSettingsClick\n}: NavigationBarProps) {\n  return (\n    <div className=\"border-b border-border bg-card p-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-6\">\n          <h3 className=\"text-xl font-bold\">{brandName}</h3>\n          <nav className=\"hidden md:flex items-center gap-1\">\n            {navItems.map((item) => (\n              <Button key={item.label} variant=\"ghost\" size=\"sm\" onClick={item.onClick}>\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n            <Bell />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" onClick={onSettingsClick}>\n            <Gear />\n          </Button>\n          <Avatar className=\"h-8 w-8\">\n            <AvatarImage src={avatarUrl} />\n            <AvatarFallback>{avatarFallback}</AvatarFallback>\n          </Avatar>\n        </div>\n      </div>\n    </div>\n  )\n}",
  "dataTable": "interface Transaction {\n  id: string\n  status: string\n  statusVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  description: string\n  date: string\n  amount: string\n  isNegative?: boolean\n}\n\ninterface DataTableProps {\n  title?: string\n  exportButtonText?: string\n  transactions?: Transaction[]\n  onExport?: () => void\n}\n\nfunction DataTable({ \n  title = \"Recent Transactions\",\n  exportButtonText = \"Export\",\n  transactions = [\n    { id: \"1\", status: \"Completed\", description: \"Payment received\", date: \"Mar 15, 2024\", amount: \"$250.00\" }\n  ],\n  onExport\n}: DataTableProps) {\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"font-semibold text-lg\">{title}</h3>\n          <Button variant=\"outline\" size=\"sm\" onClick={onExport}>\n            {exportButtonText}\n          </Button>\n        </div>\n      </div>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Status</TableHead>\n            <TableHead>Transaction</TableHead>\n            <TableHead>Date</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {transactions.map((transaction) => (\n            <TableRow key={transaction.id}>\n              <TableCell>\n                <Badge variant={transaction.statusVariant}>{transaction.status}</Badge>\n              </TableCell>\n              <TableCell className=\"font-medium\">{transaction.description}</TableCell>\n              <TableCell>{transaction.date}</TableCell>\n              <TableCell className={cn(\n                \"text-right\",\n                transaction.isNegative && \"text-destructive\"\n              )}>{transaction.amount}</TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </Card>\n  )\n}",
  "form": "interface CreateAccountFormProps {\n  title?: string\n  description?: string\n  firstNameLabel?: string\n  lastNameLabel?: string\n  emailLabel?: string\n  firstNamePlaceholder?: string\n  lastNamePlaceholder?: string\n  emailPlaceholder?: string\n  cancelButtonText?: string\n  submitButtonText?: string\n  onCancel?: () => void\n  onSubmit?: (data: { firstName: string; lastName: string; email: string }) => void\n}\n\nfunction CreateAccountForm({ \n  title = \"Create Account\",\n  description = \"Fill in your details to get started\",\n  firstNameLabel = \"First Name\",\n  lastNameLabel = \"Last Name\",\n  emailLabel = \"Email\",\n  firstNamePlaceholder = \"John\",\n  lastNamePlaceholder = \"Doe\",\n  emailPlaceholder = \"john@example.com\",\n  cancelButtonText = \"Cancel\",\n  submitButtonText = \"Create Account\",\n  onCancel,\n  onSubmit\n}: CreateAccountFormProps) {\n  const [firstName, setFirstName] = useState(\"\")\n  const [lastName, setLastName] = useState(\"\")\n  const [email, setEmail] = useState(\"\")\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault()\n    onSubmit?.({ firstName, lastName, email })\n  }\n\n  return (\n    <Card className=\"p-6\">\n      <form className=\"space-y-6\" onSubmit={handleSubmit}>\n        <div>\n          <h3 className=\"text-xl font-semibold mb-4\">{title}</h3>\n          <p className=\"text-sm text-muted-foreground\">\n            {description}\n          </p>\n        </div>\n        <Separator />\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"firstName\">{firstNameLabel}</Label>\n            <Input \n              id=\"firstName\" \n              placeholder={firstNamePlaceholder}\n              value={firstName}\n              onChange={(e) => setFirstName(e.target.value)}\n            />\n          </div>\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"lastName\">{lastNameLabel}</Label>\n            <Input \n              id=\"lastName\" \n              placeholder={lastNamePlaceholder}\n              value={lastName}\n              onChange={(e) => setLastName(e.target.value)}\n            />\n          </div>\n        </div>\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"email\">{emailLabel}</Label>\n          <div className=\"relative\">\n            <Envelope className=\"absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground\" />\n            <Input \n              id=\"email\" \n              type=\"email\" \n              placeholder={emailPlaceholder} \n              className=\"pl-10\"\n              value={email}\n              onChange={(e) => setEmail(e.target.value)}\n            />\n          </div>\n        </div>\n        <Separator />\n        <div className=\"flex items-center justify-between gap-4\">\n          <Button variant=\"outline\" type=\"button\" onClick={onCancel}>\n            {cancelButtonText}\n          </Button>\n          <Button type=\"submit\">\n            {submitButtonText}\n            <ArrowRight className=\"ml-2\" />\n          </Button>\n        </div>\n      </form>\n    </Card>\n  )\n}",
  "taskList": "interface Task {\n  id: string\n  title: string\n  description: string\n  status: string\n  statusColor?: \"accent\" | \"destructive\"\n  badgeText: string\n  badgeVariant?: \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  icon: React.ReactNode\n}\n\ninterface TaskListProps {\n  title?: string\n  addButtonText?: string\n  tasks?: Task[]\n  onAddTask?: () => void\n}\n\nfunction TaskList({ \n  title = \"Project Tasks\",\n  addButtonText = \"Add Task\",\n  tasks = [\n    {\n      id: \"1\",\n      title: \"Design system documentation\",\n      description: \"Complete the component library documentation\",\n      status: \"Completed\",\n      statusColor: \"accent\" as const,\n      badgeText: \"Design\",\n      badgeVariant: \"secondary\" as const,\n      icon: <CheckCircle weight=\"fill\" className=\"h-6 w-6 text-accent mt-0.5\" />\n    }\n  ],\n  onAddTask\n}: TaskListProps) {\n  return (\n    <Card>\n      <div className=\"p-4 border-b border-border\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"font-semibold text-lg\">{title}</h3>\n          <Button size=\"sm\" onClick={onAddTask}>\n            <Plus className=\"mr-2\" />\n            {addButtonText}\n          </Button>\n        </div>\n      </div>\n      <div className=\"divide-y divide-border\">\n        {tasks.map((task) => (\n          <div key={task.id} className=\"p-4 hover:bg-muted/50 transition-colors\">\n            <div className=\"flex items-start gap-4\">\n              {task.icon}\n              <div className=\"flex-1 min-w-0\">\n                <h4 className=\"font-medium\">{task.title}</h4>\n                <p className=\"text-sm text-muted-foreground mt-1\">\n                  {task.description}\n                </p>\n                <div className=\"flex items-center gap-4 mt-3\">\n                  <Badge variant={task.badgeVariant}>{task.badgeText}</Badge>\n                  <span className=\"text-xs text-muted-foreground\">{task.status}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </Card>\n  )\n}",
  "sidebarNavigation": "interface SidebarNavItem {\n  label: string\n  icon: React.ReactNode\n  variant?: \"default\" | \"ghost\"\n  onClick?: () => void\n}\n\ninterface SidebarNavigationProps {\n  title?: string\n  navItems?: SidebarNavItem[]\n  contentText?: string\n}\n\nfunction SidebarNavigation({ \n  title = \"Dashboard\",\n  navItems = [\n    { label: \"Home\", icon: <House className=\"mr-2\" />, variant: \"ghost\" as const },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"default\" as const },\n    { label: \"Projects\", icon: <Folder className=\"mr-2\" />, variant: \"ghost\" as const }\n  ],\n  contentText = \"Main content area\"\n}: SidebarNavigationProps) {\n  return (\n    <div className=\"flex\">\n      <aside className=\"w-64 border-r border-border bg-card/50 p-4\">\n        <div className=\"space-y-6\">\n          <div className=\"flex items-center gap-2 px-2\">\n            <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n            <span className=\"font-bold\">{title}</span>\n          </div>\n          <nav className=\"space-y-1\">\n            {navItems.map((item) => (\n              <Button \n                key={item.label}\n                variant={item.variant || \"ghost\"} \n                className=\"w-full justify-start\"\n                onClick={item.onClick}\n              >\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </div>\n      </aside>\n      <div className=\"flex-1 p-6\">\n        <p className=\"text-sm text-muted-foreground\">\n          {contentText}\n        </p>\n      </div>\n    </div>\n  )\n}"
}