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

package/dist/components/Popover.js

@@ -0,0 +1,202 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useId, useCallback, useEffect, useState, } from "react";
+function GlossaryTemplate(_a) {
+    var data = _a.data;
+    return (_jsxs("div", { className: "dds-popover-glossary", children: [_jsx("span", { className: "dds-popover-eyebrow", children: "Glossary" }), _jsx("p", { className: "dds-popover-title", children: _jsx("dfn", { title: data.term, children: data.title }) }), _jsx("div", { className: "dds-popover-body", children: data.definition })] }));
+}
+function PreviewTemplate(_a) {
+    var _b;
+    var data = _a.data;
+    var _c = useState(false), imageError = _c[0], setImageError = _c[1];
+    return (_jsxs("div", { className: "dds-popover-preview", children: [data.imageUrl && !imageError && (_jsx("div", { className: "dds-popover-preview-image-wrap", children: _jsx("img", { className: "dds-popover-preview-image", src: data.imageUrl, alt: "", "aria-hidden": "true", onError: function () { return setImageError(true); } }) })), _jsxs("div", { className: "dds-popover-preview-body", children: [_jsx("p", { className: "dds-popover-title", children: data.title }), data.excerpt && (_jsx("div", { className: "dds-popover-body", children: data.excerpt })), data.href && (_jsxs("a", { className: "dds-popover-preview-link", href: data.href, target: "_blank", rel: "noopener noreferrer", children: [(_b = data.linkText) !== null && _b !== void 0 ? _b : "Read more", " \u2192"] }))] })] }));
+}
+/** Resolve the actual placement given preferred placement and available space */
+function resolvePlacement(triggerRect, preferred) {
+    if (preferred !== "auto")
+        return preferred;
+    var spaceAbove = triggerRect.top;
+    var spaceBelow = window.innerHeight - triggerRect.bottom;
+    // Prefer top if there's more space above (and at least 180px)
+    if (spaceAbove > spaceBelow && spaceAbove >= 180)
+        return "top";
+    return "bottom";
+}
+/** Compute pixel coordinates for the popover given trigger rect and placement */
+function computePosition(triggerRect, popoverEl, placement) {
+    var popoverWidth = popoverEl.offsetWidth;
+    var popoverHeight = popoverEl.offsetHeight;
+    var gap = 8; // px gap between trigger and popover
+    var viewportPad = 8; // min distance from viewport edges
+    var top = 0;
+    var left = 0;
+    var triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    // Vertical
+    var isTop = placement.startsWith("top");
+    if (isTop) {
+        top = triggerRect.top - popoverHeight - gap;
+    }
+    else {
+        top = triggerRect.bottom + gap;
+    }
+    // Horizontal
+    if (placement.endsWith("-start")) {
+        left = triggerRect.left;
+    }
+    else if (placement.endsWith("-end")) {
+        left = triggerRect.right - popoverWidth;
+    }
+    else {
+        // center-aligned
+        left = triggerCenterX - popoverWidth / 2;
+    }
+    // Clamp to viewport horizontally
+    left = Math.max(viewportPad, Math.min(left, window.innerWidth - popoverWidth - viewportPad));
+    // Flip vertically if overflowing
+    if (isTop && top < viewportPad) {
+        top = triggerRect.bottom + gap;
+    }
+    else if (!isTop && top + popoverHeight > window.innerHeight - viewportPad) {
+        top = triggerRect.top - popoverHeight - gap;
+    }
+    return { top: top, left: left };
+}
+export function Popover(_a) {
+    var content = _a.content, glossary = _a.glossary, preview = _a.preview, _b = _a.placement, placement = _b === void 0 ? "auto" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.showDelay, showDelay = _d === void 0 ? 200 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 150 : _e, children = _a.children, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var id = useId();
+    var popoverId = "dds-popover-".concat(id.replace(/:/g, ""));
+    var triggerRef = useRef(null);
+    var popoverRef = useRef(null);
+    var showTimerRef = useRef(null);
+    var hideTimerRef = useRef(null);
+    var clearTimers = useCallback(function () {
+        if (showTimerRef.current)
+            clearTimeout(showTimerRef.current);
+        if (hideTimerRef.current)
+            clearTimeout(hideTimerRef.current);
+    }, []);
+    var positionPopover = useCallback(function () {
+        var trigger = triggerRef.current;
+        var popover = popoverRef.current;
+        if (!trigger || !popover)
+            return;
+        // The Popover API renders in the top layer, outside the normal DOM tree,
+        // so it doesn't inherit class-based dark mode from ancestor elements.
+        // Mirror the theme onto the popover element itself.
+        var isDark = document.documentElement.classList.contains("dds-dark") ||
+            document.documentElement.dataset.ddsTheme === "dark" ||
+            document.body.classList.contains("dds-dark") ||
+            document.body.dataset.ddsTheme === "dark" ||
+            !!trigger.closest(".dds-dark, [data-dds-theme='dark']");
+        if (isDark) {
+            popover.setAttribute("data-dds-theme", "dark");
+        }
+        else {
+            popover.removeAttribute("data-dds-theme");
+        }
+        var triggerRect = trigger.getBoundingClientRect();
+        var resolved = resolvePlacement(triggerRect, placement);
+        var _a = computePosition(triggerRect, popover, resolved), top = _a.top, left = _a.left;
+        popover.style.top = "".concat(top, "px");
+        popover.style.left = "".concat(left, "px");
+        // Set placement data attribute for CSS arrow/animation direction
+        var baseDir = resolved.startsWith("top") ? "top" : "bottom";
+        popover.setAttribute("data-placement", baseDir);
+    }, [placement]);
+    var showPopover = useCallback(function () {
+        clearTimers();
+        showTimerRef.current = setTimeout(function () {
+            var popover = popoverRef.current;
+            if (!popover)
+                return;
+            // Position before showing so it doesn't flash in the wrong spot
+            popover.style.visibility = "hidden";
+            try {
+                popover.showPopover();
+            }
+            catch (_a) {
+                // Popover API not supported — fall back to display toggle
+                popover.style.display = "block";
+            }
+            positionPopover();
+            popover.style.visibility = "";
+        }, showDelay);
+    }, [clearTimers, showDelay, positionPopover]);
+    var hidePopover = useCallback(function () {
+        clearTimers();
+        hideTimerRef.current = setTimeout(function () {
+            var popover = popoverRef.current;
+            if (!popover)
+                return;
+            try {
+                popover.hidePopover();
+            }
+            catch (_a) {
+                popover.style.display = "none";
+            }
+        }, hideDelay);
+    }, [clearTimers, hideDelay]);
+    // Reposition on scroll/resize while open
+    useEffect(function () {
+        var handleReposition = function () {
+            var popover = popoverRef.current;
+            if (!popover)
+                return;
+            // Only reposition if visible (Popover API or display fallback)
+            if (popover.matches(":popover-open") ||
+                popover.style.display === "block") {
+                positionPopover();
+            }
+        };
+        window.addEventListener("scroll", handleReposition, { passive: true });
+        window.addEventListener("resize", handleReposition, { passive: true });
+        return function () {
+            window.removeEventListener("scroll", handleReposition);
+            window.removeEventListener("resize", handleReposition);
+        };
+    }, [positionPopover]);
+    // Cleanup timers on unmount
+    useEffect(function () { return function () { return clearTimers(); }; }, [clearTimers]);
+    var triggerClasses = ["dds-popover-trigger", className]
+        .filter(Boolean)
+        .join(" ");
+    var popoverClasses = [
+        "dds-popover",
+        "dds-popover-".concat(size),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    // Resolve which content to render
+    var popoverContent = content !== null && content !== void 0 ? content : (glossary ? (_jsx(GlossaryTemplate, { data: glossary })) : preview ? (_jsx(PreviewTemplate, { data: preview })) : null);
+    if (!popoverContent)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: triggerRef, className: triggerClasses, onMouseEnter: showPopover, onMouseLeave: hidePopover, onFocus: showPopover, onBlur: hidePopover, 
+                // Touch: toggle on tap (clear any pending hover timers first)
+                onClick: function () {
+                    clearTimers();
+                    var popover = popoverRef.current;
+                    if (!popover)
+                        return;
+                    try {
+                        popover.togglePopover();
+                        if (popover.matches(":popover-open"))
+                            positionPopover();
+                    }
+                    catch (_a) {
+                        var isVisible = popover.style.display === "block";
+                        popover.style.display = isVisible ? "none" : "block";
+                        if (!isVisible)
+                            positionPopover();
+                    }
+                }, "aria-describedby": popoverId, tabIndex: 0, children: children }), _jsx("div", __assign({ ref: popoverRef, id: popoverId }, { popover: "auto" }, { className: popoverClasses, onMouseEnter: clearTimers, onMouseLeave: hidePopover, children: popoverContent }))] }));
+}

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popover } from "./Popover";
+declare const meta: Meta<typeof Popover>;
+export default meta;
+type Story = StoryObj<typeof Popover>;
+/**
+ * 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 declare const GlossaryDefinition: Story;
+/**
+ * The preview template renders a Wikipedia-style content preview with an
+ * optional featured image, excerpt, and "Read more" link.
+ */
+export declare const ContentPreview: Story;
+/**
+ * Pass any React element as the `content` prop when the built-in templates
+ * don't fit your use case.
+ */
+export declare const CustomContent: Story;
+/**
+ * Size variants — sm (240px), md (320px), lg (480px).
+ */
+export declare const Sizes: Story;
+/**
+ * Placement variants control which side of the trigger the popover appears on.
+ * "auto" (default) detects available viewport space.
+ */
+export declare const Placement: Story;
+/**
+ * Multiple popovers in a paragraph — only one can be open at a time
+ * (native Popover API `popover="auto"` behaviour).
+ */
+export declare const InlineParagraph: Story;

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/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

@@ -6,7 +6,9 @@ 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';
+export * from './components/List';
 export * from './hooks/useKeyPress';

package/dist/index.js

@@ -7,8 +7,10 @@ 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';
+export * from './components/List';
 // Export hooks
 export * from './hooks/useKeyPress';