@roadlittledawn/docs-design-system-react 0.9.1 → 0.11.0

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+export interface BreadcrumbItem {
+    /** Display text for the breadcrumb segment */
+    label: string;
+    /** Optional URL for the segment; omit for the current (last) page */
+    href?: string;
+}
+export interface BreadcrumbProps {
+    /** Ordered list of path segments, root first */
+    items: BreadcrumbItem[];
+    /**
+     * Separator between segments. Accepts a string or any ReactNode (e.g. an SVG chevron icon).
+     * @default "/"
+     */
+    delimiter?: ReactNode;
+    /**
+     * Size variant controlling font size.
+     * @default "md"
+     */
+    size?: "sm" | "md";
+    /**
+     * On narrow viewports, collapse middle segments behind an expandable ellipsis (…).
+     * The first and last segments are always visible. Click/tap the ellipsis to reveal all.
+     * @default false
+     */
+    collapseOnMobile?: boolean;
+    /**
+     * On narrow viewports, let the full breadcrumb trail scroll horizontally instead of
+     * wrapping to multiple lines. Can be combined with `collapseOnMobile`.
+     * @default false
+     */
+    scrollOnMobile?: boolean;
+    /** Additional CSS classes for consumer extensibility */
+    className?: string;
+}
+/**
+ * Breadcrumb navigation component. Renders a `<nav aria-label="Breadcrumb">` with an ordered
+ * list of segments. The last (current) item receives `aria-current="page"`. Delimiter characters
+ * are marked `aria-hidden` so screen readers skip them.
+ */
+export declare function Breadcrumb({ items, delimiter, size, collapseOnMobile, scrollOnMobile, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Breadcrumb.js

@@ -0,0 +1,49 @@
+'use client';
+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 { useState } from "react";
+/**
+ * Breadcrumb navigation component. Renders a `<nav aria-label="Breadcrumb">` with an ordered
+ * list of segments. The last (current) item receives `aria-current="page"`. Delimiter characters
+ * are marked `aria-hidden` so screen readers skip them.
+ */
+export function Breadcrumb(_a) {
+    var items = _a.items, _b = _a.delimiter, delimiter = _b === void 0 ? "/" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.collapseOnMobile, collapseOnMobile = _d === void 0 ? false : _d, _e = _a.scrollOnMobile, scrollOnMobile = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var _g = useState(false), isExpanded = _g[0], setIsExpanded = _g[1];
+    if (items.length === 0)
+        return null;
+    var isCollapsible = collapseOnMobile && items.length > 2;
+    var navClasses = [
+        "dds-breadcrumb",
+        "dds-breadcrumb--".concat(size),
+        isCollapsible ? "dds-breadcrumb--collapsible" : "",
+        scrollOnMobile ? "dds-breadcrumb--scroll" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    var firstItem = items[0];
+    var lastItem = items[items.length - 1];
+    var middleItems = items.length > 1 ? items.slice(1, -1) : [];
+    var hasMiddle = middleItems.length > 0;
+    return (_jsx("nav", __assign({ className: navClasses, "aria-label": "Breadcrumb" }, (isCollapsible ? { "data-expanded": String(isExpanded) } : {}), { children: _jsxs("ol", { className: "dds-breadcrumb-list", children: [_jsxs("li", { className: "dds-breadcrumb-item", children: [items.length === 1 ? (_jsx("span", { className: "dds-breadcrumb-current", "aria-current": "page", children: firstItem.label })) : firstItem.href ? (_jsx("a", { href: firstItem.href, className: "dds-breadcrumb-link", children: firstItem.label })) : (_jsx("span", { className: "dds-breadcrumb-link", children: firstItem.label })), items.length > 1 && (_jsx("span", { className: "dds-breadcrumb-delimiter", "aria-hidden": "true", children: delimiter }))] }), isCollapsible && hasMiddle && (_jsxs("li", { className: "dds-breadcrumb-item dds-breadcrumb-item--ellipsis", children: [_jsx("button", { type: "button", className: "dds-breadcrumb-ellipsis", "aria-label": "Show all breadcrumb items", onClick: function () { return setIsExpanded(true); }, children: "\u2026" }), _jsx("span", { className: "dds-breadcrumb-delimiter", "aria-hidden": "true", children: delimiter })] })), hasMiddle &&
+                    middleItems.map(function (item, relIndex) {
+                        var _a;
+                        return (_jsxs("li", { className: [
+                                "dds-breadcrumb-item",
+                                isCollapsible ? "dds-breadcrumb-item--middle" : "",
+                            ]
+                                .filter(Boolean)
+                                .join(" "), children: [item.href ? (_jsx("a", { href: item.href, className: "dds-breadcrumb-link", children: item.label })) : (_jsx("span", { className: "dds-breadcrumb-link", children: item.label })), _jsx("span", { className: "dds-breadcrumb-delimiter", "aria-hidden": "true", children: delimiter })] }, "".concat((_a = item.href) !== null && _a !== void 0 ? _a : '', "-").concat(item.label, "-").concat(relIndex)));
+                    }), items.length > 1 && (_jsx("li", { className: "dds-breadcrumb-item", children: lastItem.href ? (_jsx("a", { href: lastItem.href, className: "dds-breadcrumb-link dds-breadcrumb-current", "aria-current": "page", children: lastItem.label })) : (_jsx("span", { className: "dds-breadcrumb-current", "aria-current": "page", children: lastItem.label })) }))] }) })));
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Breadcrumb } from "./Breadcrumb";
+declare const meta: Meta<typeof Breadcrumb>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumb>;
+/**
+ * The default breadcrumb with a three-segment path and the "/" delimiter.
+ */
+export declare const Default: Story;
+/**
+ * A single-item breadcrumb — just the current page with no parent links.
+ */
+export declare const SingleItem: Story;
+/**
+ * Custom string delimiter using "›" instead of "/".
+ */
+export declare const CustomStringDelimiter: Story;
+/**
+ * Custom SVG chevron as the delimiter — demonstrates ReactNode delimiter support.
+ */
+export declare const SvgChevronDelimiter: Story;
+/**
+ * Small size variant — useful in compact page headers.
+ */
+export declare const SmallSize: Story;
+/**
+ * `collapseOnMobile` — middle segments collapse to an ellipsis on narrow viewports.
+ * Resize the browser window or use a mobile emulator to see this in action.
+ * Click the "…" to expand all items.
+ */
+export declare const CollapseOnMobile: Story;
+/**
+ * `scrollOnMobile` — the breadcrumb trail scrolls horizontally on narrow viewports
+ * rather than wrapping onto multiple lines.
+ */
+export declare const ScrollOnMobile: Story;
+/**
+ * All size and delimiter variants displayed together for visual comparison.
+ */
+export declare const AllVariants: Story;

package/dist/components/Breadcrumb.stories.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Breadcrumb } from "./Breadcrumb";
+var meta = {
+    title: "Components/Breadcrumb",
+    component: Breadcrumb,
+    tags: ["autodocs"],
+    argTypes: {
+        items: {
+            description: "Ordered array of path segments (root first). Each item requires a `label`; `href` is optional and omitted for the current page.",
+        },
+        delimiter: {
+            control: "text",
+            description: "Separator between segments. Accepts a string or any ReactNode (e.g. an SVG icon). Rendered `aria-hidden`.",
+            table: { defaultValue: { summary: '"/"' } },
+        },
+        size: {
+            control: { type: "select" },
+            options: ["sm", "md"],
+            description: "Font-size variant.",
+            table: { defaultValue: { summary: '"md"' } },
+        },
+        collapseOnMobile: {
+            control: "boolean",
+            description: "Collapse middle segments behind an ellipsis on narrow viewports. Click the ellipsis to expand.",
+            table: { defaultValue: { summary: "false" } },
+        },
+        scrollOnMobile: {
+            control: "boolean",
+            description: "Let the full breadcrumb scroll horizontally on narrow viewports instead of wrapping. Can be combined with `collapseOnMobile`.",
+            table: { defaultValue: { summary: "false" } },
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes.",
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                component: "\nThe Breadcrumb component renders a hierarchical navigation trail for documentation pages.\n\n## When to Use\n\n- To show the user's current location within a multi-level documentation hierarchy\n- To provide quick navigation back to parent sections\n- On pages nested 2 or more levels deep\n\n## When Not to Use\n\n- On top-level landing pages where hierarchy is obvious\n- For purely sequential step indicators (use a stepper/progress component instead)\n\n## Accessibility\n\n- Renders as `<nav aria-label=\"Breadcrumb\">` with an `<ol>` list so screen readers announce it correctly\n- The current (last) page item receives `aria-current=\"page\"`\n- Delimiter characters are marked `aria-hidden` and are not read aloud\n- The ellipsis expand button has an accessible `aria-label`\n        ",
+            },
+        },
+    },
+};
+export default meta;
+var docsItems = [
+    { label: "Docs", href: "/docs" },
+    { label: "Components", href: "/docs/components" },
+    { label: "Breadcrumb" },
+];
+/**
+ * The default breadcrumb with a three-segment path and the "/" delimiter.
+ */
+export var Default = {
+    args: {
+        items: docsItems,
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Components', href: '/docs/components' },\n    { label: 'Breadcrumb' },\n  ]}\n/>",
+            },
+        },
+    },
+};
+/**
+ * A single-item breadcrumb — just the current page with no parent links.
+ */
+export var SingleItem = {
+    args: {
+        items: [{ label: "Getting Started" }],
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb items={[{ label: 'Getting Started' }]} />",
+            },
+        },
+    },
+};
+/**
+ * Custom string delimiter using "›" instead of "/".
+ */
+export var CustomStringDelimiter = {
+    args: {
+        items: docsItems,
+        delimiter: "›",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Components', href: '/docs/components' },\n    { label: 'Breadcrumb' },\n  ]}\n  delimiter=\"\u203A\"\n/>",
+            },
+        },
+    },
+};
+/**
+ * Custom SVG chevron as the delimiter — demonstrates ReactNode delimiter support.
+ */
+export var SvgChevronDelimiter = {
+    args: {
+        items: docsItems,
+        delimiter: (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", style: { flexShrink: 0 }, children: _jsx("polyline", { points: "9 18 15 12 9 6" }) })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "const ChevronRight = (\n  <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\"\n    stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"\n    strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <polyline points=\"9 18 15 12 9 6\" />\n  </svg>\n);\n\n<Breadcrumb\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Components', href: '/docs/components' },\n    { label: 'Breadcrumb' },\n  ]}\n  delimiter={ChevronRight}\n/>",
+            },
+        },
+    },
+};
+/**
+ * Small size variant — useful in compact page headers.
+ */
+export var SmallSize = {
+    args: {
+        items: docsItems,
+        size: "sm",
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb\n  size=\"sm\"\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Components', href: '/docs/components' },\n    { label: 'Breadcrumb' },\n  ]}\n/>",
+            },
+        },
+    },
+};
+/**
+ * `collapseOnMobile` — middle segments collapse to an ellipsis on narrow viewports.
+ * Resize the browser window or use a mobile emulator to see this in action.
+ * Click the "…" to expand all items.
+ */
+export var CollapseOnMobile = {
+    args: {
+        collapseOnMobile: true,
+        items: [
+            { label: "Docs", href: "/docs" },
+            { label: "Guides", href: "/docs/guides" },
+            { label: "Components", href: "/docs/guides/components" },
+            { label: "Navigation", href: "/docs/guides/components/navigation" },
+            { label: "Breadcrumb" },
+        ],
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb\n  collapseOnMobile\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Guides', href: '/docs/guides' },\n    { label: 'Components', href: '/docs/guides/components' },\n    { label: 'Navigation', href: '/docs/guides/components/navigation' },\n    { label: 'Breadcrumb' },\n  ]}\n/>",
+            },
+        },
+    },
+};
+/**
+ * `scrollOnMobile` — the breadcrumb trail scrolls horizontally on narrow viewports
+ * rather than wrapping onto multiple lines.
+ */
+export var ScrollOnMobile = {
+    args: {
+        scrollOnMobile: true,
+        items: [
+            { label: "Docs", href: "/docs" },
+            { label: "Guides", href: "/docs/guides" },
+            { label: "Components", href: "/docs/guides/components" },
+            { label: "Navigation", href: "/docs/guides/components/navigation" },
+            { label: "Breadcrumb" },
+        ],
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<Breadcrumb\n  scrollOnMobile\n  items={[\n    { label: 'Docs', href: '/docs' },\n    { label: 'Guides', href: '/docs/guides' },\n    { label: 'Components', href: '/docs/guides/components' },\n    { label: 'Navigation', href: '/docs/guides/components/navigation' },\n    { label: 'Breadcrumb' },\n  ]}\n/>",
+            },
+        },
+    },
+};
+/**
+ * All size and delimiter variants displayed together for visual comparison.
+ */
+export var AllVariants = {
+    parameters: {
+        docs: {
+            source: {
+                code: "<div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>\n  <Breadcrumb\n    items={[\n      { label: 'Docs', href: '/docs' },\n      { label: 'Components', href: '/docs/components' },\n      { label: 'Breadcrumb' },\n    ]}\n  />\n  <Breadcrumb\n    size=\"sm\"\n    items={[\n      { label: 'Docs', href: '/docs' },\n      { label: 'Components', href: '/docs/components' },\n      { label: 'Breadcrumb' },\n    ]}\n  />\n  <Breadcrumb\n    delimiter=\"\u203A\"\n    items={[\n      { label: 'Docs', href: '/docs' },\n      { label: 'Components', href: '/docs/components' },\n      { label: 'Breadcrumb' },\n    ]}\n  />\n</div>",
+            },
+        },
+    },
+    render: function () { return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" }, children: [_jsxs("div", { children: [_jsx("p", { style: {
+                            color: "var(--dds-breadcrumb-current-color)",
+                            fontFamily: "sans-serif",
+                            fontSize: "0.75rem",
+                            marginBottom: "0.25rem",
+                        }, children: "Default (md)" }), _jsx(Breadcrumb, { items: [
+                            { label: "Docs", href: "/docs" },
+                            { label: "Components", href: "/docs/components" },
+                            { label: "Breadcrumb" },
+                        ] })] }), _jsxs("div", { children: [_jsx("p", { style: {
+                            color: "var(--dds-breadcrumb-current-color)",
+                            fontFamily: "sans-serif",
+                            fontSize: "0.75rem",
+                            marginBottom: "0.25rem",
+                        }, children: "Small (sm)" }), _jsx(Breadcrumb, { size: "sm", items: [
+                            { label: "Docs", href: "/docs" },
+                            { label: "Components", href: "/docs/components" },
+                            { label: "Breadcrumb" },
+                        ] })] }), _jsxs("div", { children: [_jsx("p", { style: {
+                            color: "var(--dds-breadcrumb-current-color)",
+                            fontFamily: "sans-serif",
+                            fontSize: "0.75rem",
+                            marginBottom: "0.25rem",
+                        }, children: "Custom delimiter \"\u203A\"" }), _jsx(Breadcrumb, { delimiter: "\u203A", items: [
+                            { label: "Docs", href: "/docs" },
+                            { label: "Components", href: "/docs/components" },
+                            { label: "Breadcrumb" },
+                        ] })] })] })); },
+};

package/dist/components/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Visual style variant of the button
      * @default 'primary'
@@ -14,4 +14,3 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
 }
 export declare const Button: React.FC<ButtonProps>;
-export {};

package/dist/components/Callout.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 export type CalloutVariant = "caution" | "important" | "tip" | "course";
-interface CalloutProps {
+export interface CalloutProps {
     /** Visual style variant of the callout (caution, important, tip, or course) */
     variant: CalloutVariant;
     /**
@@ -14,4 +14,3 @@ interface CalloutProps {
     className?: string;
 }
 export declare function Callout({ variant, title, children, className, }: CalloutProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Card.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-interface CardProps {
+export interface CardProps {
     /** Optional title displayed at the top of the card */
     title?: string;
     /**
@@ -20,4 +20,3 @@ interface CardProps {
     className?: string;
 }
 export declare function Card({ title, titleColor, backgroundColor, href, children, className, }: CardProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/CardGrid.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface CardGridProps {
+export interface CardGridProps {
     /**
      * Number of columns in the grid
      * @default 3
@@ -17,4 +17,3 @@ interface CardGridProps {
     className?: string;
 }
 export declare function CardGrid({ columns, equalHeight, children, className }: CardGridProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/CodeBlock.d.ts

@@ -25,7 +25,7 @@ export interface CodeSnippet {
     /** Optional line numbers to highlight (1-indexed) */
     highlightLines?: number[];
 }
-interface CodeBlockProps {
+export interface CodeBlockProps {
     /** Single code snippet (for simple usage) */
     code?: string;
     /** Language for syntax highlighting */
@@ -55,4 +55,3 @@ interface CodeBlockProps {
  */
 export declare function registerLanguages(loader: () => Promise<void>): Promise<void>;
 export declare function CodeBlock({ code, language, filename, highlightLines, snippets, path, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/components/CollapserGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface CollapserGroupProps {
+    /** Collapser components to render inside the group */
     children: React.ReactNode;
     /** Spacing between collapsers (CSS gap value) */
     spacing?: string;

package/dist/components/Heading.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface HeadingProps {
+export interface HeadingProps {
     /** Optionally override auto-generation of `id` attribute */
     id?: string;
     /** Heading level (h1, h2, h3, or h4) */
@@ -10,4 +10,3 @@ interface HeadingProps {
     className?: string;
 }
 export declare function Heading({ level, children, id, className }: HeadingProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Icon.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface IconProps {
+    /**
+     * SVG to render. Accepts a React SVG component (e.g. imported with SVGR or
+     * defined inline) or a raw SVG string.
+     *
+     * **Accessibility note:** when passing a React SVG component, do not include
+     * `aria-hidden`, `role`, or `aria-label` attributes in the component itself.
+     * The `Icon` component applies the correct accessibility attributes based on
+     * whether an `aria-label` prop is provided.
+     *
+     * **Security note:** when passing a raw SVG string, ensure the content is
+     * from a trusted source. The string is injected via `dangerouslySetInnerHTML`
+     * without sanitization.
+     */
+    svg: React.ComponentType<React.SVGProps<SVGSVGElement>> | string;
+    /**
+     * Width and height in pixels.
+     * @default 16
+     */
+    size?: number;
+    /** Additional CSS class names to apply to the icon element. */
+    className?: string;
+    /**
+     * Accessible label for the icon. When provided the icon is announced by
+     * screen readers with `role="img"`. When omitted the icon is treated as
+     * decorative and hidden from assistive technology (`aria-hidden="true"`).
+     */
+    'aria-label'?: string;
+}
+/**
+ * Renders an SVG icon. Accepts either a React SVG component (e.g. imported
+ * with SVGR) or a raw SVG string, making it easy to use your own icon library
+ * without being tied to a specific icon set.
+ *
+ * @example
+ * // React SVG component
+ * import { ReactComponent as ChevronIcon } from './chevron.svg';
+ * <Icon svg={ChevronIcon} size={20} aria-label="Expand" />
+ *
+ * @example
+ * // Inline SVG function
+ * const StarIcon = (props: React.SVGProps<SVGSVGElement>) => (
+ *   <svg viewBox="0 0 24 24" {...props}>...</svg>
+ * );
+ * <Icon svg={StarIcon} size={16} />
+ *
+ * @example
+ * // Raw SVG string
+ * <Icon svg='<svg viewBox="0 0 24 24">...</svg>' size={24} />
+ */
+export declare function Icon({ svg, size, className, 'aria-label': ariaLabel, }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon.js

@@ -0,0 +1,49 @@
+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 } from "react/jsx-runtime";
+/**
+ * Renders an SVG icon. Accepts either a React SVG component (e.g. imported
+ * with SVGR) or a raw SVG string, making it easy to use your own icon library
+ * without being tied to a specific icon set.
+ *
+ * @example
+ * // React SVG component
+ * import { ReactComponent as ChevronIcon } from './chevron.svg';
+ * <Icon svg={ChevronIcon} size={20} aria-label="Expand" />
+ *
+ * @example
+ * // Inline SVG function
+ * const StarIcon = (props: React.SVGProps<SVGSVGElement>) => (
+ *   <svg viewBox="0 0 24 24" {...props}>...</svg>
+ * );
+ * <Icon svg={StarIcon} size={16} />
+ *
+ * @example
+ * // Raw SVG string
+ * <Icon svg='<svg viewBox="0 0 24 24">...</svg>' size={24} />
+ */
+export function Icon(_a) {
+    var svg = _a.svg, _b = _a.size, size = _b === void 0 ? 16 : _b, _c = _a.className, className = _c === void 0 ? '' : _c, ariaLabel = _a["aria-label"];
+    var isDecorative = !ariaLabel;
+    var classNames = ['dds-icon', className].filter(Boolean).join(' ');
+    if (typeof svg === 'string') {
+        return (_jsx("span", __assign({ className: classNames, style: { width: size, height: size }, 
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML: { __html: svg } }, (isDecorative
+            ? { 'aria-hidden': true }
+            : { role: 'img', 'aria-label': ariaLabel }))));
+    }
+    var SvgComponent = svg;
+    return (_jsx(SvgComponent, __assign({ className: classNames, width: size, height: size }, (isDecorative
+        ? { 'aria-hidden': true }
+        : { role: 'img', 'aria-label': ariaLabel }))));
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+/**
+ * Pass any React SVG component to the `svg` prop. The component is rendered
+ * directly with the provided `size` applied as `width` and `height`.
+ */
+export declare const WithReactComponent: Story;
+/**
+ * Pass a raw SVG string to the `svg` prop. The string is injected using
+ * `dangerouslySetInnerHTML` — ensure the content is from a trusted source.
+ */
+export declare const WithSvgString: Story;
+/**
+ * When an `aria-label` is provided the icon receives `role="img"` and is
+ * announced by screen readers with the given label. Use this when the icon
+ * conveys meaning without surrounding text.
+ */
+export declare const WithAriaLabel: Story;
+/**
+ * Sizes from small (12 px) to large (48 px). The `size` prop sets both
+ * `width` and `height` so the icon is always square.
+ */
+export declare const Sizes: Story;
+/**
+ * Icons inherit `currentColor` for their stroke/fill, so they automatically
+ * adapt to the surrounding text color.
+ */
+export declare const InheritedColor: Story;