{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item-story",
  "title": "Item Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating item component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "dropdown-menu",
    "item"
  ],
  "files": [
    {
      "path": "registry/ui/item-story/item-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport {\n  BadgeCheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  Plus,\n  PlusIcon,\n  ShieldAlertIcon,\n} from \"lucide-react\";\nimport Image from \"next/image\";\nimport * as React from \"react\";\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/components/ui/item\";\n\n/**\n * A versatile component that you can use to display any content.\n */\nconst meta: Meta<typeof Item> = {\n  title: \"ui/base/Item\",\n  component: Item,\n  tags: [\"autodocs\"],\n  argTypes: {\n    variant: {\n      control: \"select\",\n      options: [\"default\", \"outline\", \"muted\"],\n    },\n    size: {\n      control: \"select\",\n      options: [\"default\", \"sm\"],\n    },\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  args: {\n    variant: \"default\",\n    size: \"default\",\n  },\n} satisfies Meta<typeof Item>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Basic item with title, description, and actions.\n */\nexport const Default: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item {...args} variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>\n            A simple item with title and description.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n        <ItemMedia>\n          <BadgeCheckIcon className=\"size-5\" />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Your profile has been verified.</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <ChevronRightIcon className=\"size-4\" />\n        </ItemActions>\n      </Item>\n    </div>\n  ),\n};\n\n/**\n * Use the `outline` variant to add a visible border to the item.\n */\nexport const Outline: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item {...args} variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/shadcn.png\" />\n            <AvatarFallback>CN</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Software Update Available</ItemTitle>\n          <ItemDescription>\n            Version 2.0 is now available for download.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Update\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  ),\n};\n\n/**\n * Use the `muted` variant to add a subtle background to the item.\n */\nexport const Muted: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item {...args} variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <BadgeCheckIcon />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Account Verified</ItemTitle>\n          <ItemDescription>\n            Your account has been successfully verified.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"ghost\">\n            Dismiss\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  ),\n};\n\n/**\n * Use the `sm` size for a more compact item layout.\n */\nexport const Small: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <ItemGroup>\n        <Item {...args} variant=\"outline\" size=\"sm\">\n          <ItemMedia>\n            <Avatar className=\"size-8\">\n              <AvatarImage src=\"https://github.com/shadcn.png\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>New message from shadcn</ItemTitle>\n            <ItemDescription>Hey, how are you doing?</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\" size=\"sm\">\n          <ItemMedia>\n            <Avatar className=\"size-8\">\n              <AvatarImage src=\"https://github.com/maxleiter.png\" />\n              <AvatarFallback>ML</AvatarFallback>\n            </Avatar>\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>New message from maxleiter</ItemTitle>\n            <ItemDescription>Check out this new feature!</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </div>\n  ),\n};\n\n/**\n * Item with icon media element.\n */\nexport const WithIcon: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item {...args} variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <ShieldAlertIcon />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Security Alert</ItemTitle>\n          <ItemDescription>\n            New login detected from unknown device.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Review\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  ),\n};\n\n/**\n * Items with avatar media elements.\n */\nexport const WithAvatar: Story = {\n  render: (args) => (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item {...args} variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/evilrabbit.png\" />\n            <AvatarFallback>ER</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Evil Rabbit</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            className=\"rounded-full\"\n            aria-label=\"Invite\"\n          >\n            <Plus />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>\n            Invite your team to collaborate on this project.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  ),\n};\n\n/**\n * Items with image media elements for music playlist.\n */\nexport const WithImage: Story = {\n  render: (args) => {\n    const music = [\n      {\n        title: \"Midnight City Lights\",\n        artist: \"Neon Dreams\",\n        album: \"Electric Nights\",\n        duration: \"3:45\",\n      },\n      {\n        title: \"Coffee Shop Conversations\",\n        artist: \"The Morning Brew\",\n        album: \"Urban Stories\",\n        duration: \"4:05\",\n      },\n      {\n        title: \"Digital Rain\",\n        artist: \"Cyber Symphony\",\n        album: \"Binary Beats\",\n        duration: \"3:30\",\n      },\n    ];\n\n    return (\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <ItemGroup className=\"gap-4\">\n          {music.map((song) => (\n            <Item\n              key={song.title}\n              {...args}\n              variant=\"outline\"\n              render={<a href=\"#\" />}\n              role=\"listitem\"\n            >\n              <ItemMedia variant=\"image\">\n                <Image\n                  src={`https://avatar.vercel.sh/${song.title}`}\n                  alt={song.title}\n                  width={32}\n                  height={32}\n                  className=\"object-cover grayscale\"\n                />\n              </ItemMedia>\n              <ItemContent>\n                <ItemTitle className=\"line-clamp-1\">\n                  {song.title} -{\" \"}\n                  <span className=\"text-muted-foreground\">{song.album}</span>\n                </ItemTitle>\n                <ItemDescription>{song.artist}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"flex-none text-center\">\n                <ItemDescription>{song.duration}</ItemDescription>\n              </ItemContent>\n            </Item>\n          ))}\n        </ItemGroup>\n      </div>\n    );\n  },\n};\n\n/**\n * Grouped items with separators.\n */\nexport const WithGroup: Story = {\n  render: (args) => {\n    const people = [\n      {\n        username: \"shadcn\",\n        avatar: \"https://github.com/shadcn.png\",\n        email: \"shadcn@vercel.com\",\n      },\n      {\n        username: \"maxleiter\",\n        avatar: \"https://github.com/maxleiter.png\",\n        email: \"maxleiter@vercel.com\",\n      },\n      {\n        username: \"evilrabbit\",\n        avatar: \"https://github.com/evilrabbit.png\",\n        email: \"evilrabbit@vercel.com\",\n      },\n    ];\n\n    return (\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <ItemGroup>\n          {people.map((person, index) => (\n            <React.Fragment key={person.username}>\n              <Item {...args}>\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage src={person.avatar} className=\"grayscale\" />\n                    <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-1\">\n                  <ItemTitle>{person.username}</ItemTitle>\n                  <ItemDescription>{person.email}</ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                    <PlusIcon />\n                  </Button>\n                </ItemActions>\n              </Item>\n              {index !== people.length - 1 && <ItemSeparator />}\n            </React.Fragment>\n          ))}\n        </ItemGroup>\n      </div>\n    );\n  },\n};\n\n/**\n * Items with header sections for model cards.\n */\nexport const WithHeader: Story = {\n  render: (args) => {\n    const models = [\n      {\n        name: \"v0-1.5-sm\",\n        description: \"Everyday tasks and UI generation.\",\n        image:\n          \"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\",\n        credit: \"Valeria Reverdo on Unsplash\",\n      },\n      {\n        name: \"v0-1.5-lg\",\n        description: \"Advanced thinking or reasoning.\",\n        image:\n          \"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\",\n        credit: \"Michael Oeser on Unsplash\",\n      },\n      {\n        name: \"v0-2.0-mini\",\n        description: \"Open Source model for everyone.\",\n        image:\n          \"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\",\n        credit: \"Cherry Laithang on Unsplash\",\n      },\n    ];\n\n    return (\n      <div className=\"flex w-full max-w-xl flex-col gap-6\">\n        <ItemGroup className=\"grid grid-cols-3 gap-4\">\n          {models.map((model) => (\n            <Item key={model.name} {...args} variant=\"outline\">\n              <ItemHeader>\n                <Image\n                  src={model.image}\n                  alt={model.name}\n                  width={128}\n                  height={128}\n                  unoptimized\n                  className=\"aspect-square w-full rounded-sm object-cover\"\n                />\n              </ItemHeader>\n              <ItemContent>\n                <ItemTitle>{model.name}</ItemTitle>\n                <ItemDescription>{model.description}</ItemDescription>\n              </ItemContent>\n            </Item>\n          ))}\n        </ItemGroup>\n      </div>\n    );\n  },\n};\n\n/**\n * Items in a dropdown menu.\n */\nexport const WithDropdown: Story = {\n  render: (args) => {\n    const people = [\n      {\n        username: \"shadcn\",\n        avatar: \"https://github.com/shadcn.png\",\n        email: \"shadcn@vercel.com\",\n      },\n      {\n        username: \"maxleiter\",\n        avatar: \"https://github.com/maxleiter.png\",\n        email: \"maxleiter@vercel.com\",\n      },\n      {\n        username: \"evilrabbit\",\n        avatar: \"https://github.com/evilrabbit.png\",\n        email: \"evilrabbit@vercel.com\",\n      },\n    ];\n\n    return (\n      <div className=\"flex min-h-64 w-full max-w-md flex-col items-center gap-6\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"sm\" className=\"w-fit\" />}\n          >\n            Select <ChevronDownIcon />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-72 [--radius:0.65rem]\" align=\"end\">\n            {people.map((person) => (\n              <DropdownMenuItem key={person.username} className=\"p-0\">\n                <Item {...args} size=\"sm\" className=\"w-full p-2\">\n                  <ItemMedia>\n                    <Avatar className=\"size-8\">\n                      <AvatarImage src={person.avatar} className=\"grayscale\" />\n                      <AvatarFallback>\n                        {person.username.charAt(0)}\n                      </AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0.5\">\n                    <ItemTitle>{person.username}</ItemTitle>\n                    <ItemDescription>{person.email}</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    );\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "item",
    "list"
  ],
  "type": "registry:component"
}