{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aspect-ratio-story",
  "title": "Aspect Ratio Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating aspect ratio component usage and variants",
  "registryDependencies": [
    "aspect-ratio"
  ],
  "files": [
    {
      "path": "registry/ui/aspect-ratio-story/aspect-ratio-base.stories.tsx",
      "content": "import Image from \"next/image\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\n/**\n * Displays content within a desired ratio.\n */\nconst meta: Meta<typeof AspectRatio> = {\n  title: \"ui/base/AspectRatio\",\n  component: AspectRatio,\n  tags: [\"autodocs\"],\n  argTypes: {},\n  render: (args) => (\n    <AspectRatio {...args} className=\"bg-slate-50 dark:bg-slate-800\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1576075796033-848c2a5f3696?w=800&dpr=2&q=80\"\n        alt=\"Photo by Alvaro Pinot\"\n        fill\n        unoptimized\n        className=\"rounded-md object-cover\"\n      />\n    </AspectRatio>\n  ),\n  decorators: [\n    (Story) => (\n      <div className=\"w-1/2\">\n        <Story />\n      </div>\n    ),\n  ],\n} satisfies Meta<typeof AspectRatio>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default form of the aspect ratio.\n */\nexport const Default: Story = {\n  args: {\n    ratio: 16 / 9,\n  },\n};\n\n/**\n * Use the `1:1` aspect ratio to display a square image.\n */\nexport const Square: Story = {\n  args: {\n    ratio: 1,\n  },\n};\n\n/**\n * Use the `4:3` aspect ratio to display a landscape image.\n */\nexport const Landscape: Story = {\n  args: {\n    ratio: 4 / 3,\n  },\n};\n\n/**\n * Use the `2.35:1` aspect ratio to display a cinemascope image.\n */\nexport const Cinemascope: Story = {\n  args: {\n    ratio: 2.35 / 1,\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "layout",
    "responsive"
  ],
  "type": "registry:component"
}