@roadlittledawn/docs-design-system-react 0.3.0 → 0.5.0

package/dist/components/Button.stories.js

@@ -25,6 +25,13 @@ export var Primary = {
         variant: 'primary',
         children: 'Primary Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\">Primary Button</Button>",
+            },
+        },
+    },
 };
 /**
  * The secondary button style is used for alternative or less important actions.
@@ -34,6 +41,13 @@ export var Secondary = {
         variant: 'secondary',
         children: 'Secondary Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"secondary\">Secondary Button</Button>",
+            },
+        },
+    },
 };
 /**
  * The outline button style is used for tertiary actions or when you need a more subtle button.
@@ -43,6 +57,13 @@ export var Outline = {
         variant: 'outline',
         children: 'Outline Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"outline\">Outline Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Small button size for compact interfaces or less prominent actions.
@@ -53,6 +74,13 @@ export var Small = {
         size: 'sm',
         children: 'Small Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"sm\">Small Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Medium is the default button size, suitable for most use cases.
@@ -63,6 +91,13 @@ export var Medium = {
         size: 'md',
         children: 'Medium Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"md\">Medium Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Large button size for prominent calls-to-action.
@@ -73,6 +108,13 @@ export var Large = {
         size: 'lg',
         children: 'Large Button',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" size=\"lg\">Large Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Disabled state for buttons that are temporarily unavailable.
@@ -83,16 +125,37 @@ export var Disabled = {
         children: 'Disabled Button',
         disabled: true,
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Button variant=\"primary\" disabled>Disabled Button</Button>",
+            },
+        },
+    },
 };
 /**
  * Example showing all button variants side by side for comparison.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>\n  <Button variant=\"primary\">Primary</Button>\n  <Button variant=\"secondary\">Secondary</Button>\n  <Button variant=\"outline\">Outline</Button>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", children: "Primary" }), _jsx(Button, { variant: "secondary", children: "Secondary" }), _jsx(Button, { variant: "outline", children: "Outline" })] })); },
 };
 /**
  * Example showing all button sizes side by side for comparison.
  */
 export var AllSizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>\n  <Button size=\"sm\">Small</Button>\n  <Button size=\"md\">Medium</Button>\n  <Button size=\"lg\">Large</Button>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(Button, { size: "sm", children: "Small" }), _jsx(Button, { size: "md", children: "Medium" }), _jsx(Button, { size: "lg", children: "Large" })] })); },
 };

package/dist/components/Callout.stories.js

@@ -24,6 +24,13 @@ export var Caution = {
         variant: 'caution',
         children: 'This operation cannot be undone. Make sure you have a backup before proceeding.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"caution\">\n  This operation cannot be undone. Make sure you have a backup before proceeding.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Important callout for critical information.
@@ -33,6 +40,13 @@ export var Important = {
         variant: 'important',
         children: 'All users must update their passwords by the end of the month to comply with the new security policy.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"important\">\n  All users must update their passwords by the end of the month to comply with the new security policy.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Tip callout for helpful suggestions.
@@ -42,6 +56,13 @@ export var Tip = {
         variant: 'tip',
         children: 'You can use keyboard shortcuts (Cmd+K or Ctrl+K) to quickly search the documentation.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"tip\">\n  You can use keyboard shortcuts (Cmd+K or Ctrl+K) to quickly search the documentation.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Course callout for learning-oriented content.
@@ -51,6 +72,13 @@ export var Course = {
         variant: 'course',
         children: 'In this section, you will learn how to configure your development environment and install the necessary dependencies.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"course\">\n  In this section, you will learn how to configure your development environment and install the necessary dependencies.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Callout with a custom title.
@@ -61,6 +89,13 @@ export var CustomTitle = {
         title: 'Security Notice',
         children: 'Two-factor authentication is now required for all administrator accounts.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"important\" title=\"Security Notice\">\n  Two-factor authentication is now required for all administrator accounts.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * Callout without a title.
@@ -71,10 +106,24 @@ export var NoTitle = {
         title: null,
         children: 'This callout has no title and displays only the content.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Callout variant=\"tip\" title={null}>\n  This callout has no title and displays only the content.\n</Callout>",
+            },
+        },
+    },
 };
 /**
  * All callout variants displayed together for comparison.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Callout variant=\"caution\">\n    Caution: Be careful when modifying system files.\n  </Callout>\n  <Callout variant=\"important\">\n    Important: This feature requires administrator privileges.\n  </Callout>\n  <Callout variant=\"tip\">\n    Tip: Use the search function to find topics quickly.\n  </Callout>\n  <Callout variant=\"course\">\n    Course: This module covers the basics of component design.\n  </Callout>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Callout, { variant: "caution", children: "Caution: Be careful when modifying system files." }), _jsx(Callout, { variant: "important", children: "Important: This feature requires administrator privileges." }), _jsx(Callout, { variant: "tip", children: "Tip: Use the search function to find topics quickly." }), _jsx(Callout, { variant: "course", children: "Course: This module covers the basics of component design." })] })); },
 };

package/dist/components/Card.stories.js

@@ -24,6 +24,13 @@ export var Basic = {
         title: 'Getting Started',
         children: 'Learn the basics of using this documentation system.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"Getting Started\">\n  Learn the basics of using this documentation system.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Clickable card that links to another page.
@@ -34,6 +41,13 @@ export var Clickable = {
         href: '/docs/api',
         children: 'Complete reference for all available components and utilities.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"API Reference\" href=\"/docs/api\">\n  Complete reference for all available components and utilities.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Card with colored background.
@@ -45,6 +59,13 @@ export var ColoredBackground = {
         backgroundColor: 'blue',
         children: 'Check out our latest component additions.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card title=\"New Feature\" titleColor=\"blue\" backgroundColor=\"blue\">\n  Check out our latest component additions.\n</Card>",
+            },
+        },
+    },
 };
 /**
  * Card without a title.
@@ -53,16 +74,37 @@ export var NoTitle = {
     args: {
         children: 'This card displays content without a title.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Card>This card displays content without a title.</Card>",
+            },
+        },
+    },
 };
 /**
  * All title color variants.
  */
 export var TitleColors = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Card title=\"Blue Title\" titleColor=\"blue\">Content with blue title</Card>\n  <Card title=\"Green Title\" titleColor=\"green\">Content with green title</Card>\n  <Card title=\"Purple Title\" titleColor=\"purple\">Content with purple title</Card>\n  <Card title=\"Red Title\" titleColor=\"red\">Content with red title</Card>\n  <Card title=\"Yellow Title\" titleColor=\"yellow\">Content with yellow title</Card>\n  <Card title=\"Gray Title\" titleColor=\"gray\">Content with gray title</Card>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Blue Title", titleColor: "blue", children: "Content with blue title" }), _jsx(Card, { title: "Green Title", titleColor: "green", children: "Content with green title" }), _jsx(Card, { title: "Purple Title", titleColor: "purple", children: "Content with purple title" }), _jsx(Card, { title: "Red Title", titleColor: "red", children: "Content with red title" }), _jsx(Card, { title: "Yellow Title", titleColor: "yellow", children: "Content with yellow title" }), _jsx(Card, { title: "Gray Title", titleColor: "gray", children: "Content with gray title" })] })); },
 };
 /**
  * All background color variants.
  */
 export var BackgroundColors = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Card title=\"Blue\" backgroundColor=\"blue\">Card with blue background</Card>\n  <Card title=\"Green\" backgroundColor=\"green\">Card with green background</Card>\n  <Card title=\"Purple\" backgroundColor=\"purple\">Card with purple background</Card>\n  <Card title=\"Red\" backgroundColor=\"red\">Card with red background</Card>\n  <Card title=\"Yellow\" backgroundColor=\"yellow\">Card with yellow background</Card>\n  <Card title=\"Gray\" backgroundColor=\"gray\">Card with gray background</Card>\n  <Card title=\"White\" backgroundColor=\"white\">Card with white background</Card>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Card, { title: "Blue", backgroundColor: "blue", children: "Card with blue background" }), _jsx(Card, { title: "Green", backgroundColor: "green", children: "Card with green background" }), _jsx(Card, { title: "Purple", backgroundColor: "purple", children: "Card with purple background" }), _jsx(Card, { title: "Red", backgroundColor: "red", children: "Card with red background" }), _jsx(Card, { title: "Yellow", backgroundColor: "yellow", children: "Card with yellow background" }), _jsx(Card, { title: "Gray", backgroundColor: "gray", children: "Card with gray background" }), _jsx(Card, { title: "White", backgroundColor: "white", children: "Card with white background" })] })); },
 };

package/dist/components/CardGrid.stories.js

@@ -25,6 +25,13 @@ export var TwoColumns = {
         columns: 2,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Getting Started", children: "Learn the basics of our documentation system." }), _jsx(Card, { title: "Components", children: "Explore all available UI components." }), _jsx(Card, { title: "Best Practices", children: "Follow guidelines for effective documentation." }), _jsx(Card, { title: "Examples", children: "See real-world usage examples." })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={2}>\n  <Card title=\"Getting Started\">Learn the basics of our documentation system.</Card>\n  <Card title=\"Components\">Explore all available UI components.</Card>\n  <Card title=\"Best Practices\">Follow guidelines for effective documentation.</Card>\n  <Card title=\"Examples\">See real-world usage examples.</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with 3 columns (default, responsive).
@@ -34,6 +41,13 @@ export var ThreeColumns = {
         columns: 3,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Tutorials", children: "Step-by-step learning guides." }), _jsx(Card, { title: "How-To Guides", children: "Task-oriented instructions." }), _jsx(Card, { title: "Reference", children: "Technical reference documentation." }), _jsx(Card, { title: "Explanation", children: "Conceptual background information." }), _jsx(Card, { title: "API", children: "Complete API documentation." }), _jsx(Card, { title: "FAQ", children: "Frequently asked questions." })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3}>\n  <Card title=\"Tutorials\">Step-by-step learning guides.</Card>\n  <Card title=\"How-To Guides\">Task-oriented instructions.</Card>\n  <Card title=\"Reference\">Technical reference documentation.</Card>\n  <Card title=\"Explanation\">Conceptual background information.</Card>\n  <Card title=\"API\">Complete API documentation.</Card>\n  <Card title=\"FAQ\">Frequently asked questions.</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with 4 columns (responsive).
@@ -43,6 +57,13 @@ export var FourColumns = {
         columns: 4,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 1" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 2" }), _jsx(Card, { titleColor: "purple", backgroundColor: "purple", children: "Feature 3" }), _jsx(Card, { titleColor: "red", backgroundColor: "red", children: "Feature 4" }), _jsx(Card, { titleColor: "yellow", backgroundColor: "yellow", children: "Feature 5" }), _jsx(Card, { titleColor: "gray", backgroundColor: "gray", children: "Feature 6" }), _jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 7" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 8" })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={4}>\n  <Card titleColor=\"blue\" backgroundColor=\"blue\">Feature 1</Card>\n  <Card titleColor=\"green\" backgroundColor=\"green\">Feature 2</Card>\n  <Card titleColor=\"purple\" backgroundColor=\"purple\">Feature 3</Card>\n  <Card titleColor=\"red\" backgroundColor=\"red\">Feature 4</Card>\n  <Card titleColor=\"yellow\" backgroundColor=\"yellow\">Feature 5</Card>\n  <Card titleColor=\"gray\" backgroundColor=\"gray\">Feature 6</Card>\n  <Card titleColor=\"blue\" backgroundColor=\"blue\">Feature 7</Card>\n  <Card titleColor=\"green\" backgroundColor=\"green\">Feature 8</Card>\n</CardGrid>",
+            },
+        },
+    },
 };
 /**
  * Grid with clickable cards.
@@ -52,4 +73,11 @@ export var ClickableCards = {
         columns: 3,
         children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Documentation", href: "/docs", children: "Complete documentation guide" }), _jsx(Card, { title: "API Reference", href: "/api", children: "Detailed API reference" }), _jsx(Card, { title: "Examples", href: "/examples", children: "Code examples and patterns" })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3}>\n  <Card title=\"Documentation\" href=\"/docs\">Complete documentation guide</Card>\n  <Card title=\"API Reference\" href=\"/api\">Detailed API reference</Card>\n  <Card title=\"Examples\" href=\"/examples\">Code examples and patterns</Card>\n</CardGrid>",
+            },
+        },
+    },
 };

package/dist/components/CodeBlock.stories.js

@@ -23,6 +23,13 @@ export var Basic = {
         code: "function greet(name: string) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet(\"World\"));",
         language: 'typescript',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"typescript\"\n  code={`function greet(name: string) {\n  return \\`Hello, \\${name}!\\`;\n}\n\nconsole.log(greet(\"World\"));`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Code block with a filename displayed.
@@ -33,6 +40,13 @@ export var WithFilename = {
         language: 'jsx',
         filename: 'Button.jsx',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"jsx\"\n  filename=\"Button.jsx\"\n  code={`export const Button = ({ children, onClick }) => {\n  return (\n    <button onClick={onClick}>\n      {children}\n    </button>\n  );\n};`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Code block with highlighted lines.
@@ -43,6 +57,13 @@ export var WithHighlightedLines = {
         language: 'javascript',
         highlightLines: [2, 3, 4],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"javascript\"\n  highlightLines={[2, 3, 4]}\n  code={`function calculateTotal(items) {\n  let total = 0;\n  for (const item of items) {\n    total += item.price * item.quantity;\n  }\n  return total;\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple code snippets displayed in tabs.
@@ -70,6 +91,13 @@ export var WithTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `export const Button = ({ children }) => {\n  return <button>{children}</button>;\n};`,\n      language: 'jsx',\n      filename: 'Button.jsx',\n      tabTitle: 'Button.jsx',\n    },\n    {\n      code: `.button {\n  padding: 0.5rem 1rem;\n  background-color: blue;\n  color: white;\n}`,\n      language: 'css',\n      filename: 'Button.css',\n      tabTitle: 'Button.css',\n    },\n    {\n      code: `import { Button } from './Button';\n\nexport default {\n  component: Button,\n};`,\n      language: 'typescript',\n      filename: 'Button.stories.ts',\n      tabTitle: 'Button.stories.ts',\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple language versions with language dropdown.
@@ -99,6 +127,13 @@ export var WithLanguageDropdown = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    { code: `function greet(name: string): string {\n  return \\`Hello, \\${name}!\\`;\n}`, language: 'typescript', filename: 'greet.ts' },\n    { code: `function greet(name) {\n  return \\`Hello, \\${name}!\\`;\n}`, language: 'javascript', filename: 'greet.js' },\n    { code: `def greet(name):\n    return f\"Hello, {name}!\"`, language: 'python', filename: 'greet.py' },\n    { code: `def greet(name)\n  \"Hello, #{name}!\"\nend`, language: 'ruby', filename: 'greet.rb' },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Complex example with tabs and highlighted lines.
@@ -122,6 +157,13 @@ export var ComplexExample = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `import React from 'react';\n\nexport function Button({ children, onClick }) {\n  return (\n    <button onClick={onClick} className=\"btn\">\n      {children}\n    </button>\n  );\n}`,\n      language: 'jsx',\n      filename: 'Button.jsx',\n      tabTitle: 'Button.jsx',\n      highlightLines: [3, 4, 5],\n    },\n    {\n      code: `.btn {\n  padding: 0.5rem 1rem;\n  background-color: #3b82f6;\n  color: white;\n  border-radius: 0.375rem;\n}`,\n      language: 'css',\n      filename: 'Button.css',\n      tabTitle: 'Button.css',\n      highlightLines: [2, 3],\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Example using path prop to load from external markdown file.
@@ -131,6 +173,13 @@ export var WithPath = {
     args: {
         path: 'https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock path=\"https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md\" />",
+            },
+        },
+    },
 };
 /**
  * JSON code example.
@@ -141,6 +190,13 @@ export var JSONExample = {
         language: 'json',
         filename: 'package.json',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"json\"\n  filename=\"package.json\"\n  code={`{\n  \"name\": \"docs-design-system\",\n  \"version\": \"0.1.0\",\n  \"dependencies\": {\n    \"react\": \"^18.0.0\"\n  }\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Bash/shell script example.
@@ -151,6 +207,13 @@ export var BashExample = {
         language: 'bash',
         filename: 'setup.sh',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"bash\"\n  filename=\"setup.sh\"\n  code={`#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Multiple TSX files displayed as flat tabs with bottom-border accent.
@@ -172,6 +235,13 @@ export var WithFilenameTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    {\n      code: `import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Example() {\n  return (\n    <CodeBlock\n      code=\"console.log('hello')\"\n      language=\"typescript\"\n    />\n  );\n}`,\n      language: 'tsx',\n      filename: 'Example.tsx',\n      tabTitle: 'Example.tsx',\n    },\n    {\n      code: `import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Advanced() {\n  return (\n    <CodeBlock\n      snippets={[\n        { code: 'const a = 1;', language: 'typescript', tabTitle: 'a.ts' },\n        { code: 'const b = 2;', language: 'typescript', tabTitle: 'b.ts' },\n      ]}\n    />\n  );\n}`,\n      language: 'tsx',\n      filename: 'Advanced.tsx',\n      tabTitle: 'Advanced.tsx',\n    },\n  ]}\n/>",
+            },
+        },
+    },
 };
 /**
  * Single snippet with a filename — displays a flat filename label in the header.
@@ -182,6 +252,13 @@ export var SingleFilename = {
         language: 'tsx',
         filename: 'page.tsx',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"tsx\"\n  filename=\"page.tsx\"\n  code={`export default function Home() {\n  return <h1>Welcome</h1>;\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * PHP syntax highlighting example.
@@ -192,6 +269,13 @@ export var PHPExample = {
         language: 'php',
         filename: 'UserController.php',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  language=\"php\"\n  filename=\"UserController.php\"\n  code={`<?php\n\nnamespace App\\\\Http\\\\Controllers;\n\nuse Illuminate\\\\Http\\\\Request;\n\nclass UserController extends Controller\n{\n    public function index()\n    {\n        $users = User::all();\n        return view('users.index', compact('users'));\n    }\n\n    public function show(int $id)\n    {\n        $user = User::findOrFail($id);\n        return response()->json($user);\n    }\n}`}\n/>",
+            },
+        },
+    },
 };
 /**
  * Many tabs to verify horizontal scroll behavior.
@@ -231,4 +315,11 @@ export var ManyTabs = {
             },
         ],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CodeBlock\n  snippets={[\n    { code: `export const App = () => <div>App</div>;`, language: 'tsx', tabTitle: 'App.tsx' },\n    { code: `export const Header = () => <header>Header</header>;`, language: 'tsx', tabTitle: 'Header.tsx' },\n    { code: `export const Footer = () => <footer>Footer</footer>;`, language: 'tsx', tabTitle: 'Footer.tsx' },\n    { code: `export const Sidebar = () => <aside>Sidebar</aside>;`, language: 'tsx', tabTitle: 'Sidebar.tsx' },\n    { code: `export const Nav = () => <nav>Nav</nav>;`, language: 'tsx', tabTitle: 'Navigation.tsx' },\n    { code: `export const Content = () => <main>Content</main>;`, language: 'tsx', tabTitle: 'ContentArea.tsx' },\n  ]}\n/>",
+            },
+        },
+    },
 };

package/dist/components/Collapser.stories.js

@@ -25,6 +25,13 @@ export var Basic = {
         title: 'Click to expand',
         children: (_jsx("p", { children: "This content is hidden by default and can be revealed by clicking the title. It includes smooth height animations for a better user experience." })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Click to expand\">\n  <p>\n    This content is hidden by default and can be revealed by clicking the title.\n    It includes smooth height animations for a better user experience.\n  </p>\n</Collapser>",
+            },
+        },
+    },
 };
 /**
  * Collapser that starts in the open state.
@@ -35,6 +42,13 @@ export var DefaultOpen = {
         defaultOpen: true,
         children: (_jsx("p", { children: "This collapser is open by default. Users can still click to collapse it." })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"This section starts open\" defaultOpen>\n  <p>This collapser is open by default. Users can still click to collapse it.</p>\n</Collapser>",
+            },
+        },
+    },
 };
 /**
  * Collapser with an ID for the title.
@@ -45,6 +59,13 @@ export var WithID = {
         id: 'faq-question-1',
         children: (_jsx("p", { children: "This collapser has an ID on its title, which is useful for anchor links and accessibility purposes." })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"Section with ID\" id=\"faq-question-1\">\n  <p>\n    This collapser has an ID on its title, which is useful for anchor links\n    and accessibility purposes.\n  </p>\n</Collapser>",
+            },
+        },
+    },
 };
 /**
  * Collapser containing complex content.
@@ -54,10 +75,24 @@ export var ComplexContent = {
         title: 'How do I install the components?',
         children: (_jsxs("div", { children: [_jsx("p", { children: "You can install the components using npm:" }), _jsx("pre", { style: { background: '#f5f5f5', padding: '1rem', borderRadius: '4px' }, children: "npm install @docs-design-system/ui" }), _jsx("p", { children: "Then import them in your React application:" }), _jsx("pre", { style: { background: '#f5f5f5', padding: '1rem', borderRadius: '4px' }, children: "import { Button, Card } from '@docs-design-system/ui';" })] })),
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Collapser title=\"How do I install the components?\">\n  <div>\n    <p>You can install the components using npm:</p>\n    <pre>npm install @docs-design-system/ui</pre>\n    <p>Then import them in your React application:</p>\n    <pre>import {'{ Button, Card }'} from '@docs-design-system/ui';</pre>\n  </div>\n</Collapser>",
+            },
+        },
+    },
 };
 /**
  * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export var FAQExample = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup>\n  <Collapser title=\"What is this documentation system?\">\n    <p>\n      This is a comprehensive documentation design system that provides\n      reusable components and guidelines for creating effective technical\n      documentation.\n    </p>\n  </Collapser>\n  <Collapser title=\"How do I get started?\">\n    <p>\n      Start by installing the component package, then explore the components\n      in Storybook to understand their usage and configuration options.\n    </p>\n  </Collapser>\n  <Collapser title=\"Can I customize the components?\">\n    <p>\n      Yes! All components accept a className prop for custom styling, and you\n      can override the default styles using CSS.\n    </p>\n  </Collapser>\n  <Collapser title=\"Is this accessible?\">\n    <p>\n      Accessibility is a core principle. All components follow WAI-ARIA best\n      practices and are keyboard navigable.\n    </p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
     render: function () { return (_jsxs(CollapserGroup, { children: [_jsx(Collapser, { title: "What is this documentation system?", children: _jsx("p", { children: "This is a comprehensive documentation design system that provides reusable components and guidelines for creating effective technical documentation." }) }), _jsx(Collapser, { title: "How do I get started?", children: _jsx("p", { children: "Start by installing the component package, then explore the components in Storybook to understand their usage and configuration options." }) }), _jsx(Collapser, { title: "Can I customize the components?", children: _jsx("p", { children: "Yes! All components accept a className prop for custom styling, and you can override the default styles using CSS." }) }), _jsx(Collapser, { title: "Is this accessible?", children: _jsx("p", { children: "Accessibility is a core principle. All components follow WAI-ARIA best practices and are keyboard navigable." }) })] })); },
 };