{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-story",
  "title": "Card Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating card component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "registry/ui/card-story/card-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { BellRing } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n];\n\n/**\n * Displays a card with header, content, and footer.\n */\nconst meta = {\n  title: \"ui/base/Card\",\n  component: Card,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  args: {\n    className: \"w-96\",\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n} satisfies Meta<typeof Card>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the card.\n */\nexport const Default: Story = {\n  render: (args) => (\n    <Card {...args}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        {notifications.map((notification, index) => (\n          <div key={index} className=\"flex items-center gap-4\">\n            <BellRing className=\"size-6\" />\n            <div>\n              <p>{notification.title}</p>\n              <p className=\"text-foreground/60\">{notification.description}</p>\n            </div>\n          </div>\n        ))}\n      </CardContent>\n      <CardFooter>\n        <Button variant=\"link\">Close</Button>\n      </CardFooter>\n    </Card>\n  ),\n};\n\n/**\n * Use the `CardAction` component to add interactive elements in the header.\n */\nexport const WithCardAction: Story = {\n  render: (args) => (\n    <Card {...args}>\n      <CardHeader>\n        <CardTitle>Team Settings</CardTitle>\n        <CardDescription>Manage your team preferences</CardDescription>\n        <CardAction>\n          <Button size=\"sm\" variant=\"outline\">\n            Edit\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <p>Configure team members, permissions, and notifications.</p>\n      </CardContent>\n      <CardFooter>\n        <Button variant=\"ghost\">Cancel</Button>\n        <Button className=\"ml-auto\">Save Changes</Button>\n      </CardFooter>\n    </Card>\n  ),\n};\n\n/**\n * A minimal card with only content, no header or footer.\n */\nexport const MinimalCard: Story = {\n  render: (args) => (\n    <Card {...args}>\n      <CardContent>\n        <p className=\"text-sm\">\n          This is a minimal card with only content. Perfect for displaying\n          simple information without the need for a header or footer.\n        </p>\n      </CardContent>\n    </Card>\n  ),\n};\n\n/**\n * A card with only a header section, no content or footer.\n */\nexport const HeaderOnly: Story = {\n  render: (args) => (\n    <Card {...args}>\n      <CardHeader>\n        <CardTitle>Quick Stats</CardTitle>\n        <CardDescription>\n          Your account summary at a glance. Click for details.\n        </CardDescription>\n      </CardHeader>\n    </Card>\n  ),\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "card",
    "container"
  ],
  "type": "registry:component"
}