{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "typography-story",
  "title": "Typography Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Design system documentation and examples for typography tokens",
  "registryDependencies": [
    "table"
  ],
  "files": [
    {
      "path": "registry/tokens/typography-story/typography-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\";\nimport type { CSSProperties, ReactNode } from \"react\";\n\ntype Typography = {\n  name: string;\n  value: string;\n};\n\nconst TypographyRow = ({\n  value,\n  name,\n  styleKey,\n  children,\n}: {\n  value: string;\n  name: string;\n  styleKey: keyof CSSProperties;\n  children?: ReactNode;\n}) => {\n  const style = window.getComputedStyle(document.body);\n  const styleValue = style.getPropertyValue(value);\n  return (\n    <TableRow>\n      <TableCell>{name}</TableCell>\n      <TableCell>\n        {styleValue.split(\",\").map((v, idx) => (\n          <p key={`prop-${idx}`}>{v}</p>\n        ))}\n      </TableCell>\n      <TableCell>\n        <div style={{ [styleKey]: styleValue }} className=\"line-clamp-1\">\n          {children}\n        </div>\n      </TableCell>\n    </TableRow>\n  );\n};\n\n/**\n * Typography tokens for the design system.\n */\nconst meta: Meta<{\n  children: string;\n  key: keyof CSSProperties;\n  property: Typography[];\n}> = {\n  title: \"design/base/Typography\",\n  argTypes: {},\n  args: {\n    children: \"Typeface\",\n  },\n  render: (args) => (\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Name</TableHead>\n          <TableHead>Property</TableHead>\n          <TableHead>\n            <span className=\"sr-only\">Preview</span>\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {args.property.map(({ name, value }) => (\n          <TypographyRow\n            key={name}\n            name={name}\n            value={value}\n            styleKey={args.key}\n          >\n            {args.children}\n          </TypographyRow>\n        ))}\n      </TableBody>\n    </Table>\n  ),\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * Font family tokens for the design system.\n */\nexport const FontFamily: Story = {\n  args: {\n    key: \"fontFamily\",\n    property: [\n      { name: \"sans\", value: \"--font-sans\" },\n      { name: \"serif\", value: \"--font-serif\" },\n      { name: \"mono\", value: \"--font-mono\" },\n    ],\n  },\n};\n\n/**\n * Font size tokens for the design system.\n */\nexport const FontSize: Story = {\n  args: {\n    key: \"fontSize\",\n    property: [\n      { name: \"xs\", value: \"--text-xs\" },\n      { name: \"sm\", value: \"--text-sm\" },\n      { name: \"base\", value: \"--text-base\" },\n      { name: \"lg\", value: \"--text-lg\" },\n      { name: \"xl\", value: \"--text-xl\" },\n      { name: \"2xl\", value: \"--text-2xl\" },\n      { name: \"3xl\", value: \"--text-3xl\" },\n      { name: \"4xl\", value: \"--text-4xl\" },\n      { name: \"5xl\", value: \"--text-5xl\" },\n      { name: \"6xl\", value: \"--text-6xl\" },\n    ],\n  },\n};\n\n/**\n * Font weight tokens for the design system.\n */\nexport const FontWeight: Story = {\n  args: {\n    key: \"fontWeight\",\n    property: [\n      { name: \"thin\", value: \"--font-weight-thin\" },\n      { name: \"extralight\", value: \"--font-weight-extralight\" },\n      { name: \"light\", value: \"--font-weight-light\" },\n      { name: \"normal\", value: \"--font-weight-normal\" },\n      { name: \"medium\", value: \"--font-weight-medium\" },\n      { name: \"semibold\", value: \"--font-weight-semibold\" },\n      { name: \"bold\", value: \"--font-weight-bold\" },\n      { name: \"extrabold\", value: \"--font-weight-extrabold\" },\n      { name: \"black\", value: \"--font-weight-black\" },\n    ],\n  },\n};\n\n/**\n * Letter Spacing tokens for the design system.\n */\nexport const LetterSpacing: Story = {\n  args: {\n    key: \"letterSpacing\",\n    property: [\n      { name: \"tighter\", value: \"--tracking-tighter\" },\n      { name: \"tight\", value: \"--tracking-tight\" },\n      { name: \"normal\", value: \"--tracking-normal\" },\n      { name: \"wide\", value: \"--tracking-wide\" },\n      { name: \"wider\", value: \"--tracking-wider\" },\n      { name: \"widest\", value: \"--tracking-widest\" },\n    ],\n  },\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "design",
    "tokens",
    "storybook",
    "typography"
  ],
  "type": "registry:component"
}