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

package/dist/components/Popover.stories.js

@@ -0,0 +1,183 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from "./Popover";
+var meta = {
+    title: "Components/Popover",
+    component: Popover,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "\nA hover/tap-activated popover for enriching inline content in documentation.\nBuilt on the native [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) for reliable top-layer rendering \u2014 no z-index wars, no overflow clipping.\n\nCommon use cases include glossary term definitions and Wikipedia-style content previews.\n\n## Content modes\n\nThe `Popover` supports three mutually exclusive content modes, checked in this order:\n\n1. **`content`** \u2014 arbitrary `ReactNode`; you control everything\n2. **`glossary`** \u2014 structured `{ term, title, definition }` template\n3. **`preview`** \u2014 structured `{ title, excerpt, imageUrl, href }` template\n\n## When to Use\n\n- Inline term definitions that would interrupt reading flow if expanded in-place\n- Link previews that let users get context without navigating away\n- Any contextual content that benefits from being on-demand rather than always visible\n\n## When Not to Use\n\n- For critical information users must read \u2014 use a `Callout` instead\n- As a primary navigation mechanism\n- For content that needs persistent visibility\n\n## Mobile behavior\n\nOn screens \u2264 640 px the popover renders as a bottom sheet instead of a floating panel.\nHover events don't apply; the popover toggles on tap.\n\n## Accessibility\n\n- Trigger has `tabIndex={0}` and shows the popover on focus (keyboard accessible)\n- Popover panel has `role=\"tooltip\"` and is linked via `aria-describedby`\n- The native Popover API handles Escape-key dismissal automatically\n- Light-dismiss (click outside) is provided by `popover=\"auto\"`\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * The glossary template renders a structured definition popover.
+ * The `definition` field accepts `ReactNode` — pre-render any markdown
+ * using your preferred renderer before passing it in.
+ */
+export var GlossaryDefinition = {
+    args: {
+        glossary: {
+            term: "observability",
+            title: "Observability",
+            definition: (_jsxs(_Fragment, { children: ["The ability to understand the internal state of a system by examining its external outputs \u2014 primarily", " ", _jsx("a", { href: "https://example.com/metrics", children: "metrics" }), ", logs, and traces."] })),
+        },
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  glossary={{\n    term: \"observability\",\n    title: \"Observability\",\n    definition: (\n      <>\n        The ability to understand the internal state of a system by examining\n        its external outputs \u2014 primarily{\" \"}\n        <a href=\"https://example.com/metrics\">metrics</a>, logs, and traces.\n      </>\n    ),\n  }}\n>\n  observability\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["Modern software reliability depends on", " ", _jsx(Popover, __assign({}, args, { children: "observability" })), " to diagnose production issues quickly."] })); },
+};
+/**
+ * The preview template renders a Wikipedia-style content preview with an
+ * optional featured image, excerpt, and "Read more" link.
+ */
+export var ContentPreview = {
+    args: {
+        preview: {
+            title: "New Relic",
+            excerpt: "New Relic is an observability platform that helps engineers plan, build, deploy, and run software. Over 17,000 customers use New Relic to improve uptime, performance, and operational efficiency.",
+            imageUrl: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=640&q=80",
+            href: "https://newrelic.com",
+            linkText: "Read more",
+        },
+        size: "lg",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  size=\"lg\"\n  preview={{\n    title: \"New Relic\",\n    excerpt: \"New Relic is an observability platform that helps engineers plan, build, deploy, and run software.\",\n    imageUrl: \"/images/newrelic.jpg\",\n    href: \"https://newrelic.com\",\n    linkText: \"Read more\",\n  }}\n>\n  New Relic\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["The monitoring data is sent to ", _jsx(Popover, __assign({}, args, { children: "New Relic" })), " ", "where you can build dashboards and alerts."] })); },
+};
+/**
+ * Pass any React element as the `content` prop when the built-in templates
+ * don't fit your use case.
+ */
+export var CustomContent = {
+    args: {
+        content: (_jsxs("div", { style: { padding: "1rem" }, children: [_jsx("strong", { style: { display: "block", marginBottom: "0.5rem" }, children: "API Rate Limits" }), _jsxs("table", { style: { fontSize: "0.8125rem", borderCollapse: "collapse", width: "100%" }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { textAlign: "left", paddingBottom: "0.25rem", borderBottom: "1px solid #e5e7eb" }, children: "Plan" }), _jsx("th", { style: { textAlign: "right", paddingBottom: "0.25rem", borderBottom: "1px solid #e5e7eb" }, children: "Req/min" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "Free" }), _jsx("td", { style: { textAlign: "right" }, children: "60" })] }), _jsxs("tr", { children: [_jsx("td", { children: "Pro" }), _jsx("td", { style: { textAlign: "right" }, children: "1,000" })] }), _jsxs("tr", { children: [_jsx("td", { children: "Enterprise" }), _jsx("td", { style: { textAlign: "right" }, children: "Unlimited" })] })] })] })] })),
+        size: "md",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover\n  content={\n    <div style={{ padding: \"1rem\" }}>\n      <strong>API Rate Limits</strong>\n      {/* custom table or any JSX */}\n    </div>\n  }\n>\n  rate limits\n</Popover>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["Each API key is subject to ", _jsx(Popover, __assign({}, args, { children: "rate limits" })), " based on your subscription plan."] })); },
+};
+/**
+ * Size variants — sm (240px), md (320px), lg (480px).
+ */
+export var Sizes = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover size=\"sm\" glossary={{ term: \"sm\", title: \"Small (240px)\", definition: \"A compact popover for brief definitions.\" }}>\n  small\n</Popover>\n\n<Popover size=\"md\" glossary={{ term: \"md\", title: \"Medium (320px)\", definition: \"The default size, suitable for most glossary and preview use cases.\" }}>\n  medium\n</Popover>\n\n<Popover size=\"lg\" glossary={{ term: \"lg\", title: \"Large (480px)\", definition: \"A wider panel for rich content previews with images or tables.\" }}>\n  large\n</Popover>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { style: {
+            fontFamily: "sans-serif",
+            fontSize: "1rem",
+            display: "flex",
+            gap: "2rem",
+            alignItems: "center",
+            color: "var(--dds-tabs-panel-text)",
+        }, children: [_jsx(Popover, { size: "sm", glossary: {
+                    term: "sm",
+                    title: "Small (240px)",
+                    definition: "A compact popover for brief definitions.",
+                }, children: "small" }), _jsx(Popover, { size: "md", glossary: {
+                    term: "md",
+                    title: "Medium (320px)",
+                    definition: "The default size, suitable for most glossary and preview use cases.",
+                }, children: "medium" }), _jsx(Popover, { size: "lg", glossary: {
+                    term: "lg",
+                    title: "Large (480px)",
+                    definition: "A wider panel for rich content previews with images or tables.",
+                }, children: "large" })] })); },
+};
+/**
+ * Placement variants control which side of the trigger the popover appears on.
+ * "auto" (default) detects available viewport space.
+ */
+export var Placement = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<Popover placement=\"top\" glossary={...}>shows above</Popover>\n<Popover placement=\"bottom\" glossary={...}>shows below</Popover>\n<Popover placement=\"top-start\" glossary={...}>top-start</Popover>\n<Popover placement=\"bottom-end\" glossary={...}>bottom-end</Popover>",
+            },
+        },
+    },
+    render: function () { return (_jsx("div", { style: {
+            fontFamily: "sans-serif",
+            fontSize: "1rem",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "2rem",
+            justifyContent: "center",
+            padding: "6rem 2rem",
+            color: "var(--dds-tabs-panel-text)",
+        }, children: [
+            "top",
+            "top-start",
+            "top-end",
+            "bottom",
+            "bottom-start",
+            "bottom-end",
+        ].map(function (p) { return (_jsx(Popover, { placement: p, glossary: {
+                term: p,
+                title: "placement=\"".concat(p, "\""),
+                definition: "The popover opens ".concat(p.replace("-", " "), " relative to its trigger."),
+            }, children: p }, p)); }) })); },
+};
+/**
+ * Multiple popovers in a paragraph — only one can be open at a time
+ * (native Popover API `popover="auto"` behaviour).
+ */
+export var InlineParagraph = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<p>\n  <Popover glossary={{ term: \"apm\", title: \"APM\", definition: \"Application Performance Monitoring...\" }}>APM</Popover>\n  {\" \"}data flows into{\" \"}\n  <Popover preview={{ title: \"New Relic\", excerpt: \"...\", href: \"https://newrelic.com\" }}>New Relic</Popover>\n  {\" \"}where you can configure{\" \"}\n  <Popover glossary={{ term: \"alert\", title: \"Alert\", definition: \"A notification triggered when a signal crosses a threshold.\" }}>alerts</Popover>.\n</p>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("p", { style: { fontFamily: "sans-serif", fontSize: "1rem", maxWidth: "480px", lineHeight: 1.7, color: "var(--dds-tabs-panel-text)", margin: 0 }, children: [_jsx(Popover, { glossary: {
+                    term: "apm",
+                    title: "APM",
+                    definition: "Application Performance Monitoring — tracks the performance of software applications and their underlying infrastructure.",
+                }, children: "APM" }), " ", "data flows into", " ", _jsx(Popover, { preview: {
+                    title: "New Relic",
+                    excerpt: "New Relic is an observability platform used by over 17,000 customers.",
+                    href: "https://newrelic.com",
+                }, children: "New Relic" }), " ", "where you can configure", " ", _jsx(Popover, { glossary: {
+                    term: "alert",
+                    title: "Alert",
+                    definition: "A notification triggered when a metric or signal crosses a defined threshold.",
+                }, children: "alerts" }), " ", "to notify your on-call team."] })); },
+};

package/dist/components/Tabs.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+interface TabsProps {
+    /** ID of the initially active tab */
+    defaultActiveTab?: string;
+    /** Controlled active tab ID */
+    activeTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (id: string) => void;
+    /** Tab content */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Tabs({ defaultActiveTab, activeTab: controlledActiveTab, onTabChange, children, className, }: TabsProps): import("react/jsx-runtime").JSX.Element;
+interface TabListProps {
+    /** Tab buttons */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TabList({ children, className }: TabListProps): import("react/jsx-runtime").JSX.Element;
+interface TabProps {
+    /** Unique identifier for this tab */
+    id: string;
+    /** Tab label */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Tab({ id, children, className }: TabProps): import("react/jsx-runtime").JSX.Element;
+interface TabPanelProps {
+    /** ID matching the corresponding Tab */
+    id: string;
+    /** Panel content */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TabPanel({ id, children, className }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Tabs.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, createContext, useContext } from "react";
+var TabsContext = createContext(null);
+export function Tabs(_a) {
+    var defaultActiveTab = _a.defaultActiveTab, controlledActiveTab = _a.activeTab, onTabChange = _a.onTabChange, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _c = useState(defaultActiveTab || ""), internalActiveTab = _c[0], setInternalActiveTab = _c[1];
+    var isControlled = controlledActiveTab !== undefined;
+    var activeTab = isControlled ? controlledActiveTab : internalActiveTab;
+    var setActiveTab = function (id) {
+        if (!isControlled) {
+            setInternalActiveTab(id);
+        }
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(id);
+    };
+    return (_jsx(TabsContext.Provider, { value: { activeTab: activeTab, setActiveTab: setActiveTab }, children: _jsx("div", { className: "dds-tabs ".concat(className).trim(), children: children }) }));
+}
+export function TabList(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    return (_jsx("div", { className: "dds-tabs-list ".concat(className).trim(), role: "tablist", children: children }));
+}
+export function Tab(_a) {
+    var id = _a.id, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("Tab must be used within Tabs component");
+    }
+    var activeTab = context.activeTab, setActiveTab = context.setActiveTab;
+    var isActive = activeTab === id;
+    return (_jsx("button", { className: "dds-tab ".concat(isActive ? "dds-tab-active" : "", " ").concat(className).trim(), onClick: function () { return setActiveTab(id); }, role: "tab", "aria-selected": isActive, "aria-controls": "panel-".concat(id), id: "tab-".concat(id), type: "button", children: children }));
+}
+export function TabPanel(_a) {
+    var id = _a.id, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var context = useContext(TabsContext);
+    if (!context) {
+        throw new Error("TabPanel must be used within Tabs component");
+    }
+    var activeTab = context.activeTab;
+    var isActive = activeTab === id;
+    if (!isActive)
+        return null;
+    return (_jsx("div", { className: "dds-tab-panel ".concat(className).trim(), role: "tabpanel", "aria-labelledby": "tab-".concat(id), id: "panel-".concat(id), children: children }));
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+/**
+ * Tabs organize and segment related content, reducing cognitive load by allowing users
+ * to toggle between views without navigating to new pages.
+ */
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+/**
+ * Basic tabs with three sections of content.
+ */
+export declare const Basic: Story;
+/**
+ * Tabs showing code examples in different programming languages.
+ */
+export declare const CodeExamples: Story;
+/**
+ * Tabs with longer content demonstrating scrollable tab list.
+ */
+export declare const ManyTabs: Story;
+/**
+ * Controlled tabs where the active tab is managed by parent component state.
+ */
+export declare const Controlled: Story;

package/dist/components/Tabs.stories.js

@@ -0,0 +1,89 @@
+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";
+import { Tabs, TabList, Tab, TabPanel } from "./Tabs";
+import { CodeBlock } from "./CodeBlock";
+/**
+ * Tabs organize and segment related content, reducing cognitive load by allowing users
+ * to toggle between views without navigating to new pages.
+ */
+var meta = {
+    title: "Components/Tabs",
+    component: Tabs,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "\nTabs are best used to organize, segment, and reduce cognitive load when presenting large amounts of related but distinct content.\n\n## When to Use\n\n- **Segmenting Related Alternatives**: Show different solutions for the same task (e.g., code examples in Python, Java, JavaScript)\n- **Managing Complex/Long Documents**: Break down extensive documentation into smaller, more manageable sections\n- **Context-Switching**: Allow users to switch between different views (e.g., \"Overview,\" \"Usage,\" \"API Reference\") while staying in the same context\n- **Organizing Workflows**: Separate complex workflows, such as student work from instructions, or setup steps from troubleshooting\n- **Reducing Clutter**: Hide non-essential or less frequently used information, showing only relevant details at one time\n\n## When Not to Use\n\n- When content is short and can be easily scrolled\n- When users need to compare all content simultaneously\n- If the information in the tabs is not related\n- For navigation between pages (use Link component instead)\n\n## Best Practices\n\n- **Default View**: Always set a logical default tab (e.g., the most commonly used language or platform)\n- **Clear Labels**: Ensure tab labels are concise, descriptive, and clearly distinguish between options\n- **Limit Number**: Avoid using too many tabs (more than 5-6 can clutter the interface)\n- **Avoid Nested Tabs**: Too many levels of navigation can confuse users\n\n## Tabs vs Collapsers\n\nUse **tabs** for a small number of distinct, parallel content sections where users rarely need to compare them simultaneously. Use **collapsers** (accordions) for long, vertical content, mobile-first layouts, or FAQs to minimize scrolling and allow users to see all options at once.\n\n## Accessibility\n\n- Uses proper ARIA attributes (`role=\"tab\"`, `role=\"tabpanel\"`, `aria-selected`)\n- Tab buttons are keyboard accessible\n- Active tab is clearly indicated visually and to screen readers\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * Basic tabs with three sections of content.
+ */
+export var Basic = {
+    args: {
+        defaultActiveTab: "overview",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tabs defaultActiveTab=\"overview\">\n  <TabList>\n    <Tab id=\"overview\">Overview</Tab>\n    <Tab id=\"usage\">Usage</Tab>\n    <Tab id=\"api\">API Reference</Tab>\n  </TabList>\n  <TabPanel id=\"overview\">\n    <p>\n      This is the overview section. It provides a high-level introduction\n      to the topic.\n    </p>\n  </TabPanel>\n  <TabPanel id=\"usage\">\n    <p>\n      This is the usage section. It contains practical examples and\n      instructions.\n    </p>\n  </TabPanel>\n  <TabPanel id=\"api\">\n    <p>\n      This is the API reference section. It documents the technical\n      interface.\n    </p>\n  </TabPanel>\n</Tabs>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs(Tabs, __assign({}, args, { children: [_jsxs(TabList, { children: [_jsx(Tab, { id: "overview", children: "Overview" }), _jsx(Tab, { id: "usage", children: "Usage" }), _jsx(Tab, { id: "api", children: "API Reference" })] }), _jsx(TabPanel, { id: "overview", children: _jsx("p", { children: "This is the overview section. It provides a high-level introduction to the topic." }) }), _jsx(TabPanel, { id: "usage", children: _jsx("p", { children: "This is the usage section. It contains practical examples and instructions." }) }), _jsx(TabPanel, { id: "api", children: _jsx("p", { children: "This is the API reference section. It documents the technical interface." }) })] }))); },
+};
+/**
+ * Tabs showing code examples in different programming languages.
+ */
+export var CodeExamples = {
+    args: {
+        defaultActiveTab: "javascript",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tabs defaultActiveTab=\"javascript\">\n  <TabList>\n    <Tab id=\"javascript\">JavaScript</Tab>\n    <Tab id=\"python\">Python</Tab>\n    <Tab id=\"java\">Java</Tab>\n  </TabList>\n  <TabPanel id=\"javascript\">\n    <CodeBlock \n      language=\"javascript\" \n      code={`const greeting = \"Hello, world!\";\nconsole.log(greeting);`} \n    />\n  </TabPanel>\n  <TabPanel id=\"python\">\n    <CodeBlock \n      language=\"python\" \n      code={`greeting = \"Hello, world!\"\nprint(greeting)`} \n    />\n  </TabPanel>\n  <TabPanel id=\"java\">\n    <CodeBlock \n      language=\"java\" \n      code={`String greeting = \"Hello, world!\";\nSystem.out.println(greeting);`} \n    />\n  </TabPanel>\n</Tabs>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs(Tabs, __assign({}, args, { children: [_jsxs(TabList, { children: [_jsx(Tab, { id: "javascript", children: "JavaScript" }), _jsx(Tab, { id: "python", children: "Python" }), _jsx(Tab, { id: "java", children: "Java" })] }), _jsx(TabPanel, { id: "javascript", children: _jsx(CodeBlock, { language: "javascript", code: "const greeting = \"Hello, world!\";\nconsole.log(greeting);" }) }), _jsx(TabPanel, { id: "python", children: _jsx(CodeBlock, { language: "python", code: "greeting = \"Hello, world!\"\nprint(greeting)" }) }), _jsx(TabPanel, { id: "java", children: _jsx(CodeBlock, { language: "java", code: "String greeting = \"Hello, world!\";\nSystem.out.println(greeting);" }) })] }))); },
+};
+/**
+ * Tabs with longer content demonstrating scrollable tab list.
+ */
+export var ManyTabs = {
+    args: {
+        defaultActiveTab: "tab1",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Tabs defaultActiveTab=\"tab1\">\n  <TabList>\n    <Tab id=\"tab1\">Introduction</Tab>\n    <Tab id=\"tab2\">Getting Started</Tab>\n    <Tab id=\"tab3\">Configuration</Tab>\n    <Tab id=\"tab4\">Advanced Usage</Tab>\n    <Tab id=\"tab5\">Troubleshooting</Tab>\n    <Tab id=\"tab6\">FAQ</Tab>\n  </TabList>\n  <TabPanel id=\"tab1\">\n    <p>Introduction content goes here.</p>\n  </TabPanel>\n  <TabPanel id=\"tab2\">\n    <p>Getting started content goes here.</p>\n  </TabPanel>\n  <TabPanel id=\"tab3\">\n    <p>Configuration content goes here.</p>\n  </TabPanel>\n  <TabPanel id=\"tab4\">\n    <p>Advanced usage content goes here.</p>\n  </TabPanel>\n  <TabPanel id=\"tab5\">\n    <p>Troubleshooting content goes here.</p>\n  </TabPanel>\n  <TabPanel id=\"tab6\">\n    <p>FAQ content goes here.</p>\n  </TabPanel>\n</Tabs>",
+            },
+        },
+    },
+    render: function (args) { return (_jsxs(Tabs, __assign({}, args, { children: [_jsxs(TabList, { children: [_jsx(Tab, { id: "tab1", children: "Introduction" }), _jsx(Tab, { id: "tab2", children: "Getting Started" }), _jsx(Tab, { id: "tab3", children: "Configuration" }), _jsx(Tab, { id: "tab4", children: "Advanced Usage" }), _jsx(Tab, { id: "tab5", children: "Troubleshooting" }), _jsx(Tab, { id: "tab6", children: "FAQ" })] }), _jsx(TabPanel, { id: "tab1", children: _jsx("p", { children: "Introduction content goes here." }) }), _jsx(TabPanel, { id: "tab2", children: _jsx("p", { children: "Getting started content goes here." }) }), _jsx(TabPanel, { id: "tab3", children: _jsx("p", { children: "Configuration content goes here." }) }), _jsx(TabPanel, { id: "tab4", children: _jsx("p", { children: "Advanced usage content goes here." }) }), _jsx(TabPanel, { id: "tab5", children: _jsx("p", { children: "Troubleshooting content goes here." }) }), _jsx(TabPanel, { id: "tab6", children: _jsx("p", { children: "FAQ content goes here." }) })] }))); },
+};
+/**
+ * Controlled tabs where the active tab is managed by parent component state.
+ */
+export var Controlled = {
+    render: function ControlledExample() {
+        var _a = React.useState("tab1"), activeTab = _a[0], setActiveTab = _a[1];
+        return (_jsxs("div", { children: [_jsxs("p", { style: { marginBottom: "1rem", color: "var(--dds-tabs-panel-text)" }, children: ["Active tab: ", _jsx("strong", { children: activeTab })] }), _jsxs(Tabs, { activeTab: activeTab, onTabChange: setActiveTab, children: [_jsxs(TabList, { children: [_jsx(Tab, { id: "tab1", children: "Tab 1" }), _jsx(Tab, { id: "tab2", children: "Tab 2" }), _jsx(Tab, { id: "tab3", children: "Tab 3" })] }), _jsx(TabPanel, { id: "tab1", children: _jsx("p", { children: "Content for tab 1" }) }), _jsx(TabPanel, { id: "tab2", children: _jsx("p", { children: "Content for tab 2" }) }), _jsx(TabPanel, { id: "tab3", children: _jsx("p", { children: "Content for tab 3" }) })] })] }));
+    },
+};

package/dist/components/Typography.stories.js

@@ -24,6 +24,13 @@ export var H1 = {
         variant: 'h1',
         children: 'Heading 1 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h1\">Heading 1 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H2 heading style.
@@ -33,6 +40,13 @@ export var H2 = {
         variant: 'h2',
         children: 'Heading 2 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h2\">Heading 2 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H3 heading style.
@@ -42,6 +56,13 @@ export var H3 = {
         variant: 'h3',
         children: 'Heading 3 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h3\">Heading 3 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * H4 heading style.
@@ -51,6 +72,13 @@ export var H4 = {
         variant: 'h4',
         children: 'Heading 4 Style',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"h4\">Heading 4 Style</Typography>",
+            },
+        },
+    },
 };
 /**
  * Paragraph style (default).
@@ -60,6 +88,13 @@ export var Paragraph = {
         variant: 'p',
         children: 'This is a paragraph with the default typography style. It provides readable text for body content.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"p\">\n  This is a paragraph with the default typography style. It provides readable text for body content.\n</Typography>",
+            },
+        },
+    },
 };
 /**
  * Caption style for small text.
@@ -69,10 +104,24 @@ export var Caption = {
         variant: 'caption',
         children: 'This is caption text, typically used for figure captions or footnotes.',
     },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Typography variant=\"caption\">\n  This is caption text, typically used for figure captions or footnotes.\n</Typography>",
+            },
+        },
+    },
 };
 /**
  * All typography variants displayed together.
  */
 export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>\n  <Typography variant=\"h1\">Heading 1 Style</Typography>\n  <Typography variant=\"h2\">Heading 2 Style</Typography>\n  <Typography variant=\"h3\">Heading 3 Style</Typography>\n  <Typography variant=\"h4\">Heading 4 Style</Typography>\n  <Typography variant=\"p\">\n    This is paragraph text. It's the default variant and is suitable for\n    body content and general text throughout your documentation.\n  </Typography>\n  <Typography variant=\"caption\">\n    This is caption text, used for smaller annotations or supplementary information.\n  </Typography>\n</div>",
+            },
+        },
+    },
     render: function () { return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Typography, { variant: "h1", children: "Heading 1 Style" }), _jsx(Typography, { variant: "h2", children: "Heading 2 Style" }), _jsx(Typography, { variant: "h3", children: "Heading 3 Style" }), _jsx(Typography, { variant: "h4", children: "Heading 4 Style" }), _jsx(Typography, { variant: "p", children: "This is paragraph text. It's the default variant and is suitable for body content and general text throughout your documentation." }), _jsx(Typography, { variant: "caption", children: "This is caption text, used for smaller annotations or supplementary information." })] })); },
 };

package/dist/index.d.ts

@@ -5,6 +5,8 @@ export * from './components/CardGrid';
 export * from './components/Collapser';
 export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
+export * from './components/Tabs';
+export * from './components/Popover';
 export * from './components/Typography';
 export * from './components/Heading';
 export * from './components/Link';

package/dist/index.js

@@ -6,6 +6,8 @@ export * from './components/CardGrid';
 export * from './components/Collapser';
 export * from './components/CollapserGroup';
 export * from './components/CodeBlock';
+export * from './components/Tabs';
+export * from './components/Popover';
 export * from './components/Typography';
 export * from './components/Heading';
 export * from './components/Link';