@roadlittledawn/docs-design-system-react 0.4.0 → 0.6.0

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." }) })] })); },
 };

package/dist/components/CollapserGroup.stories.js

@@ -37,6 +37,13 @@ export var Basic = {
         spacing: '0.5rem',
         allowMultiple: true,
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup spacing=\"0.5rem\" allowMultiple>\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</CollapserGroup>",
+            },
+        },
+    },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { 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." }) })] }))); },
 };
 /**
@@ -46,6 +53,13 @@ export var AccordionMode = {
     args: {
         allowMultiple: false,
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup allowMultiple={false}>\n  <Collapser title=\"Installation\">\n    <p>Install the package using npm or yarn:</p>\n    <pre>npm install @roadlittledawn/docs-design-system</pre>\n  </Collapser>\n  <Collapser title=\"Configuration\">\n    <p>Import the CSS and components in your application:</p>\n    <pre>import '@roadlittledawn/docs-design-system/dist/styles.css';</pre>\n  </Collapser>\n  <Collapser title=\"Usage\">\n    <p>Use the components in your React application:</p>\n    <pre>{'<Button variant=\"primary\">Click me</Button>'}</pre>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsxs(Collapser, { title: "Installation", children: [_jsx("p", { children: "Install the package using npm or yarn:" }), _jsx("pre", { children: "npm install @roadlittledawn/docs-design-system" })] }), _jsxs(Collapser, { title: "Configuration", children: [_jsx("p", { children: "Import the CSS and components in your application:" }), _jsx("pre", { children: "import '@roadlittledawn/docs-design-system/dist/styles.css';" })] }), _jsxs(Collapser, { title: "Usage", children: [_jsx("p", { children: "Use the components in your React application:" }), _jsx("pre", { children: '<Button variant="primary">Click me</Button>' })] })] }))); },
 };
 /**
@@ -55,6 +69,13 @@ export var CustomSpacing = {
     args: {
         spacing: '1.5rem',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup spacing=\"1.5rem\">\n  <Collapser title=\"Section 1\">\n    <p>Content with larger spacing between sections.</p>\n  </Collapser>\n  <Collapser title=\"Section 2\">\n    <p>This makes the layout more breathable.</p>\n  </Collapser>\n  <Collapser title=\"Section 3\">\n    <p>Useful for prominent content sections.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Section 1", children: _jsx("p", { children: "Content with larger spacing between sections." }) }), _jsx(Collapser, { title: "Section 2", children: _jsx("p", { children: "This makes the layout more breathable." }) }), _jsx(Collapser, { title: "Section 3", children: _jsx("p", { children: "Useful for prominent content sections." }) })] }))); },
 };
 /**
@@ -64,6 +85,13 @@ export var DefaultOpen = {
     args: {
         defaultOpen: 0,
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup defaultOpen={0}>\n  <Collapser title=\"Getting Started\">\n    <p>This section is open by default.</p>\n  </Collapser>\n  <Collapser title=\"Advanced Topics\">\n    <p>This section starts closed.</p>\n  </Collapser>\n  <Collapser title=\"API Reference\">\n    <p>This section also starts closed.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Getting Started", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Advanced Topics", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "API Reference", children: _jsx("p", { children: "This section also starts closed." }) })] }))); },
 };
 /**
@@ -73,5 +101,12 @@ export var MultipleDefaultOpen = {
     args: {
         defaultOpen: [0, 2],
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CollapserGroup defaultOpen={[0, 2]}>\n  <Collapser title=\"Introduction\">\n    <p>This section is open by default.</p>\n  </Collapser>\n  <Collapser title=\"Installation\">\n    <p>This section starts closed.</p>\n  </Collapser>\n  <Collapser title=\"Quick Start\">\n    <p>This section is also open by default.</p>\n  </Collapser>\n</CollapserGroup>",
+            },
+        },
+    },
     render: function (args) { return (_jsxs(CollapserGroup, __assign({}, args, { children: [_jsx(Collapser, { title: "Introduction", children: _jsx("p", { children: "This section is open by default." }) }), _jsx(Collapser, { title: "Installation", children: _jsx("p", { children: "This section starts closed." }) }), _jsx(Collapser, { title: "Quick Start", children: _jsx("p", { children: "This section is also open by default." }) })] }))); },
 };

package/dist/components/Heading.stories.js

@@ -24,6 +24,13 @@ export var Level1 = {
         level: 1,
         children: 'Page Title (H1)',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Heading level={1}>Page Title (H1)</Heading>",
+            },
+        },
+    },
 };
 /**
  * Level 2 heading (h2) - used for major sections.
@@ -33,6 +40,13 @@ export var Level2 = {
         level: 2,
         children: 'Section Title (H2)',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Heading level={2}>Section Title (H2)</Heading>",
+            },
+        },
+    },
 };
 /**
  * Level 3 heading (h3) - used for subsections.
@@ -42,6 +56,13 @@ export var Level3 = {
         level: 3,
         children: 'Subsection Title (H3)',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Heading level={3}>Subsection Title (H3)</Heading>",
+            },
+        },
+    },
 };
 /**
  * Level 4 heading (h4) - used for sub-subsections.
@@ -51,16 +72,37 @@ export var Level4 = {
         level: 4,
         children: 'Sub-subsection Title (H4)',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Heading level={4}>Sub-subsection Title (H4)</Heading>",
+            },
+        },
+    },
 };
 /**
  * All heading levels displayed together to show the hierarchy.
  */
 export var AllLevels = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div>\n  <Heading level={1}>Level 1 - Main Page Title</Heading>\n  <p>Use h1 for the main page title. There should only be one h1 per page.</p>\n\n  <Heading level={2}>Level 2 - Major Section</Heading>\n  <p>Use h2 for major sections of your page.</p>\n\n  <Heading level={3}>Level 3 - Subsection</Heading>\n  <p>Use h3 for subsections within major sections.</p>\n\n  <Heading level={4}>Level 4 - Sub-subsection</Heading>\n  <p>Use h4 for sub-subsections. If you need deeper levels, reconsider your document structure.</p>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { children: [_jsx(Heading, { level: 1, children: "Level 1 - Main Page Title" }), _jsx("p", { style: { marginBottom: '1rem', color: '#666' }, children: "Use h1 for the main page title. There should only be one h1 per page." }), _jsx(Heading, { level: 2, children: "Level 2 - Major Section" }), _jsx("p", { style: { marginBottom: '1rem', color: '#666' }, children: "Use h2 for major sections of your page." }), _jsx(Heading, { level: 3, children: "Level 3 - Subsection" }), _jsx("p", { style: { marginBottom: '1rem', color: '#666' }, children: "Use h3 for subsections within major sections." }), _jsx(Heading, { level: 4, children: "Level 4 - Sub-subsection" }), _jsx("p", { style: { color: '#666' }, children: "Use h4 for sub-subsections. If you need deeper levels, reconsider your document structure." })] })); },
 };
 /**
  * Example of a properly structured document hierarchy.
  */
 export var DocumentStructure = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div>\n  <Heading level={1}>Getting Started Guide</Heading>\n  <p>Introduction to the documentation system...</p>\n\n  <Heading level={2}>Installation</Heading>\n  <p>How to install the components...</p>\n\n  <Heading level={3}>Prerequisites</Heading>\n  <p>What you need before installing...</p>\n\n  <Heading level={3}>Installation Steps</Heading>\n  <p>Step-by-step installation instructions...</p>\n\n  <Heading level={2}>Configuration</Heading>\n  <p>How to configure the system...</p>\n\n  <Heading level={3}>Basic Configuration</Heading>\n  <p>Essential configuration options...</p>\n\n  <Heading level={4}>Environment Variables</Heading>\n  <p>Required environment variables...</p>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { children: [_jsx(Heading, { level: 1, children: "Getting Started Guide" }), _jsx("p", { children: "Introduction to the documentation system..." }), _jsx(Heading, { level: 2, children: "Installation" }), _jsx("p", { children: "How to install the components..." }), _jsx(Heading, { level: 3, children: "Prerequisites" }), _jsx("p", { children: "What you need before installing..." }), _jsx(Heading, { level: 3, children: "Installation Steps" }), _jsx("p", { children: "Step-by-step installation instructions..." }), _jsx(Heading, { level: 2, children: "Configuration" }), _jsx("p", { children: "How to configure the system..." }), _jsx(Heading, { level: 3, children: "Basic Configuration" }), _jsx("p", { children: "Essential configuration options..." }), _jsx(Heading, { level: 4, children: "Environment Variables" }), _jsx("p", { children: "Required environment variables..." })] })); },
 };

package/dist/components/Link.stories.js

@@ -24,6 +24,13 @@ export var Internal = {
         href: '/docs/components',
         children: 'View Components Documentation',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Link href=\"/docs/components\">View Components Documentation</Link>",
+            },
+        },
+    },
 };
 /**
  * External link (absolute URL) - opens in new tab with icon.
@@ -33,6 +40,13 @@ export var External = {
         href: 'https://github.com/your-repo/docs-design-system',
         children: 'View on GitHub',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Link href=\"https://github.com/your-repo/docs-design-system\">View on GitHub</Link>",
+            },
+        },
+    },
 };
 /**
  * Anchor link to a section on the same page.
@@ -42,22 +56,50 @@ export var AnchorLink = {
         href: '#installation',
         children: 'Jump to Installation',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Link href=\"#installation\">Jump to Installation</Link>",
+            },
+        },
+    },
 };
 /**
  * Link within body text.
  */
 export var InlineLink = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<p>\n  For more information, check out the{' '}\n  <Link href=\"/docs/getting-started\">Getting Started guide</Link>\n  {' '}or visit our{' '}\n  <Link href=\"https://github.com\">GitHub repository</Link>.\n</p>",
+            },
+        },
+    },
     render: function () { return (_jsxs("p", { children: ["For more information, check out the", ' ', _jsx(Link, { href: "/docs/getting-started", children: "Getting Started guide" }), ' ', "or visit our", ' ', _jsx(Link, { href: "https://github.com", children: "GitHub repository" }), "."] })); },
 };
 /**
  * Multiple links in a list.
  */
 export var LinkList = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>\n  <li><Link href=\"/docs/introduction\">Introduction</Link></li>\n  <li><Link href=\"/docs/components\">Components</Link></li>\n  <li><Link href=\"/docs/best-practices\">Best Practices</Link></li>\n  <li><Link href=\"https://github.com\">GitHub</Link></li>\n  <li><Link href=\"https://npmjs.com\">NPM</Link></li>\n</ul>",
+            },
+        },
+    },
     render: function () { return (_jsxs("ul", { style: { listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsx("li", { children: _jsx(Link, { href: "/docs/introduction", children: "Introduction" }) }), _jsx("li", { children: _jsx(Link, { href: "/docs/components", children: "Components" }) }), _jsx("li", { children: _jsx(Link, { href: "/docs/best-practices", children: "Best Practices" }) }), _jsx("li", { children: _jsx(Link, { href: "https://github.com", children: "GitHub" }) }), _jsx("li", { children: _jsx(Link, { href: "https://npmjs.com", children: "NPM" }) })] })); },
 };
 /**
  * Comparison of internal and external links.
  */
 export var InternalVsExternal = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <div>\n    <strong>Internal Link:</strong>\n    <br />\n    <Link href=\"/docs/components\">Components (internal)</Link>\n    <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>\n      Opens in the same tab, no icon\n    </p>\n  </div>\n  <div>\n    <strong>External Link:</strong>\n    <br />\n    <Link href=\"https://example.com\">Example.com (external)</Link>\n    <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>\n      Opens in new tab, includes external link icon\n    </p>\n  </div>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("strong", { children: "Internal Link:" }), _jsx("br", {}), _jsx(Link, { href: "/docs/components", children: "Components (internal)" }), _jsx("p", { style: { fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }, children: "Opens in the same tab, no icon" })] }), _jsxs("div", { children: [_jsx("strong", { children: "External Link:" }), _jsx("br", {}), _jsx(Link, { href: "https://example.com", children: "Example.com (external)" }), _jsx("p", { style: { fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }, children: "Opens in new tab, includes external link icon" })] })] })); },
 };

package/dist/components/List.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, FC } from "react";
+export interface ListProps {
+    /** List items */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Whether the list is ordered (numbered) or unordered (bullets). Default: true */
+    ordered?: boolean;
+    /** Custom bullet character for unordered lists (emoji or text). Only applies when ordered=false */
+    bullet?: string;
+    /** Custom bullet icon (React node, e.g., SVG) for unordered lists. Takes precedence over bullet prop */
+    bulletIcon?: ReactNode;
+}
+interface ListItemProps {
+    /** List item content */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Internal: bullet icon injected by List parent for unordered lists */
+    bulletIcon?: ReactNode;
+}
+export declare function ListItem({ children, className, bulletIcon }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const List: FC<ListProps> & {
+    Item: typeof ListItem;
+};
+export {};

package/dist/components/List.js

@@ -0,0 +1,36 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+function ListImpl(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.ordered, ordered = _c === void 0 ? true : _c, bullet = _a.bullet, bulletIcon = _a.bulletIcon;
+    var listClasses = ["dds-list", className].filter(Boolean).join(" ");
+    var Element = ordered ? "ol" : "ul";
+    return (_jsx(Element, { className: listClasses, "data-ordered": ordered, "data-has-icon": !!bulletIcon && !ordered, style: bullet && !bulletIcon
+            ? { "--dds-list-bullet": JSON.stringify(bullet) }
+            : undefined, children: bulletIcon && !ordered
+            ? React.Children.map(children, function (child) {
+                if (React.isValidElement(child) && child.type === ListItem) {
+                    return React.cloneElement(child, __assign(__assign({}, child.props), { bulletIcon: bulletIcon }));
+                }
+                return child;
+            })
+            : children }));
+}
+export function ListItem(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, bulletIcon = _a.bulletIcon;
+    var itemClasses = ["dds-list-item", className].filter(Boolean).join(" ");
+    return (_jsxs("li", { className: itemClasses, children: [bulletIcon && (_jsx("span", { className: "dds-list-item-icon", "aria-hidden": "true", children: bulletIcon })), children] }));
+}
+export var List = Object.assign(ListImpl, {
+    Item: ListItem,
+});

package/dist/components/List.stories.d.ts

@@ -0,0 +1,28 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("./List").ListProps> & {
+        Item: typeof import("./List").ListItem;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Default list with multi-line content and code examples */
+export declare const OrderedList: Story;
+/** List with nested components like CodeBlock and Callout */
+export declare const OrderedListWithNestedComponents: Story;
+/** Unordered list with default bullet */
+export declare const Unordered: Story;
+/** Unordered list with custom emoji bullet */
+export declare const UnorderedWithEmoji: Story;
+/** Unordered list with custom icon bullet */
+export declare const UnorderedWithIcon: Story;

package/dist/components/List.stories.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { List } from "./List";
+import { CodeBlock } from "./CodeBlock";
+import { Callout } from "./Callout";
+var meta = {
+    title: "Components/List",
+    component: List,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A visually enhanced list component with numbered badges (ordered) or custom bullets (unordered) and connector lines, designed for complex content that deserves more visual prominence.\n\n## When to Use\n- Tutorial or getting started guides with substantial steps\n- Multi-step workflows where each step contains rich content (paragraphs, code blocks, callouts)\n- Marketing or landing pages that need more visual polish\n- Complex instructions where each step is its own section of content\n- Feature lists or benefits that need custom emoji/icon bullets\n- When you want to nest other components (CodeBlock, Callout, etc.) within list items\n\n## When Not to Use\n- Simple, short lists with brief text items (use standard `<ol>` or `<ul>` instead)\n- Very long lists with many items (consider breaking into sections with Tabs or Collapsers)\n- When visual simplicity is preferred over aesthetic enhancement\n\n## Accessibility\n- Uses semantic `<ol>` or `<ul>` elements for proper screen reader support\n- CSS counters and custom bullets provide visual styling without affecting content\n- Maintains proper reading order and list semantics\n        ",
+            },
+        },
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+/** Default list with multi-line content and code examples */
+export var OrderedList = {
+    args: {
+        children: null,
+    },
+    render: function () { return (_jsxs(List, { children: [_jsxs(List.Item, { children: ["Run the following command in your terminal to start the install wizard:", _jsx("code", { style: { display: "block", marginTop: "0.5rem" }, children: "npm create astro@latest" })] }), _jsxs(List.Item, { children: ["Now that your project has been created, you can ", _jsx("code", { children: "cd" }), " into your new project directory to begin using Astro."] }), _jsx(List.Item, { children: "If you skipped the \"Install dependencies?\" step during the CLI wizard, then be sure to install your dependencies before continuing." }), _jsx(List.Item, { children: "You can now start the Astro dev server and see a live preview of your project while you build!" })] })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<List>\n  <List.Item>\n    Run the following command in your terminal to start the install wizard:\n    <code style={{ display: \"block\", marginTop: \"0.5rem\" }}>\n      npm create astro@latest\n    </code>\n  </List.Item>\n  <List.Item>\n    Now that your project has been created, you can <code>cd</code> into\n    your new project directory to begin using Astro.\n  </List.Item>\n  <List.Item>\n    If you skipped the \"Install dependencies?\" step during the CLI wizard,\n    then be sure to install your dependencies before continuing.\n  </List.Item>\n  <List.Item>\n    You can now start the Astro dev server and see a live preview of your\n    project while you build!\n  </List.Item>\n</List>",
+            },
+        },
+    },
+};
+/** List with nested components like CodeBlock and Callout */
+export var OrderedListWithNestedComponents = {
+    args: {
+        children: null,
+    },
+    render: function () { return (_jsxs(List, { children: [_jsxs(List.Item, { children: [_jsx("p", { children: _jsx("b", { children: "Install dependencies" }) }), _jsx("p", { style: { color: "var(--dds-list-text)" }, children: "Run the following command to install all required packages:" }), _jsx(CodeBlock, { language: "bash", code: "npm install" })] }), _jsxs(List.Item, { children: [_jsx("strong", { children: "Configure your project" }), _jsx(Callout, { variant: "tip", title: "Pro Tip", children: "Make sure to review the configuration file before proceeding." })] }), _jsxs(List.Item, { children: [_jsx("p", { children: _jsx("b", { children: "Start development" }) }), _jsx("p", { style: { color: "var(--dds-list-text)" }, children: "Launch the dev server and begin building:" }), _jsx(CodeBlock, { language: "bash", code: "npm run dev" })] })] })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<List>\n  <List.Item>\n    <strong>Install dependencies</strong>\n    <p>Run the following command to install all required packages:</p>\n    <CodeBlock language=\"bash\" code=\"npm install\" />\n  </List.Item>\n  <List.Item>\n    <strong>Configure your project</strong>\n    <Callout variant=\"tip\" title=\"Pro Tip\">\n      Make sure to review the configuration file before proceeding.\n    </Callout>\n  </List.Item>\n  <List.Item>\n    <strong>Start development</strong>\n    <p>Launch the dev server and begin building:</p>\n    <CodeBlock language=\"bash\" code=\"npm run dev\" />\n  </List.Item>\n</List>",
+            },
+        },
+    },
+};
+/** Unordered list with default bullet */
+export var Unordered = {
+    args: {
+        children: null,
+    },
+    render: function () { return (_jsxs(List, { ordered: false, children: [_jsx(List.Item, { children: "Key feature of the product" }), _jsx(List.Item, { children: "Another important capability" }), _jsx(List.Item, { children: "Additional benefit to highlight" })] })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<List ordered={false}>\n  <List.Item>Key feature of the product</List.Item>\n  <List.Item>Another important capability</List.Item>\n  <List.Item>Additional benefit to highlight</List.Item>\n</List>",
+            },
+        },
+    },
+};
+/** Unordered list with custom emoji bullet */
+export var UnorderedWithEmoji = {
+    args: {
+        children: null,
+    },
+    render: function () { return (_jsxs(List, { ordered: false, bullet: "\u2705", children: [_jsx(List.Item, { children: "Beautifully designed components" }), _jsx(List.Item, { children: "Accessible by default" }), _jsx(List.Item, { children: "Fully customizable styling" })] })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<List ordered={false} bullet=\"\u2705\">\n  <List.Item>Beautifully designed components</List.Item>\n  <List.Item>Accessible by default</List.Item>\n  <List.Item>Fully customizable styling</List.Item>\n</List>",
+            },
+        },
+    },
+};
+/** Unordered list with custom icon bullet */
+export var UnorderedWithIcon = {
+    args: {
+        children: null,
+    },
+    render: function () { return (_jsxs(List, { ordered: false, bulletIcon: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M5 12h14M12 5l7 7-7 7" }) }), children: [_jsx(List.Item, { children: "Navigate to the settings page" }), _jsx(List.Item, { children: "Select your preferences" }), _jsx(List.Item, { children: "Save your changes" })] })); },
+    parameters: {
+        docs: {
+            source: {
+                code: "<List\n  ordered={false}\n  bulletIcon={\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n      <path d=\"M5 12h14M12 5l7 7-7 7\" />\n    </svg>\n  }\n>\n  <List.Item>Navigate to the settings page</List.Item>\n  <List.Item>Select your preferences</List.Item>\n  <List.Item>Save your changes</List.Item>\n</List>",
+            },
+        },
+    },
+};

package/dist/components/Popover.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from "react";
+export interface GlossaryData {
+    /** The canonical term (used for semantic markup) */
+    term: string;
+    /** Display title shown in the popover header */
+    title: string;
+    /**
+     * Definition content. Accepts ReactNode so consumers can pre-render
+     * markdown (e.g. via react-markdown) or pass arbitrary JSX.
+     */
+    definition: ReactNode;
+}
+export interface PreviewData {
+    /** Page or article title */
+    title: string;
+    /** Short excerpt or summary */
+    excerpt?: ReactNode;
+    /** Optional featured image URL */
+    imageUrl?: string;
+    /** Optional URL to the full content */
+    href?: string;
+    /** Link text. Default: "Read more" */
+    linkText?: string;
+}
+export type PopoverPlacement = "auto" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end";
+export type PopoverSize = "sm" | "md" | "lg";
+export interface PopoverProps {
+    /**
+     * Arbitrary React content to render inside the popover.
+     * Use when built-in templates don't fit your use case.
+     */
+    content?: ReactNode;
+    /** Render a styled glossary definition popover */
+    glossary?: GlossaryData;
+    /** Render a styled content preview popover (Wikipedia-style) */
+    preview?: PreviewData;
+    /**
+     * Preferred placement relative to the trigger.
+     * "auto" detects available viewport space.
+     * @default "auto"
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Popover width.
+     * sm = 240px, md = 320px, lg = 480px
+     * @default "md"
+     */
+    size?: PopoverSize;
+    /**
+     * Milliseconds to wait before showing the popover on hover.
+     * @default 200
+     */
+    showDelay?: number;
+    /**
+     * Milliseconds to wait before hiding the popover on hover-out.
+     * @default 150
+     */
+    hideDelay?: number;
+    /** The trigger element — the text or content that reveals the popover on hover/tap */
+    children: ReactNode;
+    /** Additional CSS classes on the trigger wrapper */
+    className?: string;
+}
+export declare function Popover({ content, glossary, preview, placement, size, showDelay, hideDelay, children, className, }: PopoverProps): import("react/jsx-runtime").JSX.Element;