{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radius-story",
  "title": "Radius Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Design system documentation and examples for border radius tokens",
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/tokens/radius-story/radius-base.stories.tsx",
      "content": "import {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\ntype Radius = {\n  name: string;\n  value: string;\n};\n\nconst RadiusTile = ({ value }: Pick<Radius, \"value\">) => {\n  const style = window.getComputedStyle(document.body);\n  const radius = style.getPropertyValue(value);\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\">\n      <div\n        className=\"bg-card size-20 border-2\"\n        style={{ borderRadius: radius }}\n      />\n      <p className=\"text-center text-xs opacity-70\">{value}</p>\n      <p className=\"text-center text-xs\">{radius}</p>\n    </div>\n  );\n};\n\n/**\n * Radius tokens for the design system\n */\nconst meta: Meta<{\n  radius: Radius[];\n}> = {\n  title: \"design/base/Radius\",\n  argTypes: {},\n  render: (args) => (\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Name</TableHead>\n          <TableHead>\n            <span className=\"sr-only\">Preview</span>\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {args.radius.map(({ name, value }) => (\n          <TableRow key={name}>\n            <TableCell>{name}</TableCell>\n            <TableCell>\n              <RadiusTile value={value} />\n            </TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Border radius tokens used for UI elements like buttons, cards, and modals.\n */\nexport const Core: Story = {\n  args: {\n    radius: [\n      { name: \"xs\", value: \"--radius-xs\" },\n      { name: \"sm\", value: \"--radius-sm\" },\n      { name: \"md\", value: \"--radius-md\" },\n      { name: \"lg\", value: \"--radius-lg\" },\n    ],\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "design",
    "tokens",
    "storybook",
    "radius"
  ],
  "type": "registry:component"
}