@roadlittledawn/docs-design-system-react 0.8.0 → 0.10.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/Link.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface LinkProps {
+export interface LinkProps {
     /** URL to link to. External links (starting with http:// or https://) open in new tab */
     href: string;
     /** Link content */
@@ -8,4 +8,3 @@ interface LinkProps {
     className?: string;
 }
 export declare function Link({ href, children, className }: LinkProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/List.d.ts

@@ -11,7 +11,7 @@ export interface ListProps {
     /** Custom bullet icon (React node, e.g., SVG) for unordered lists. Takes precedence over bullet prop */
     bulletIcon?: ReactNode;
 }
-interface ListItemProps {
+export interface ListItemProps {
     /** List item content */
     children: ReactNode;
     /** Additional CSS classes */
@@ -23,4 +23,3 @@ export declare function ListItem({ children, className, bulletIcon }: ListItemPr
 export declare const List: FC<ListProps> & {
     Item: typeof ListItem;
 };
-export {};

package/dist/components/Table.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+type SortDirection = 'asc' | 'desc' | null;
+export interface TableProps {
+    /** Children — typically TableHead and TableBody */
+    children: React.ReactNode;
+    /**
+     * Visual variant of the table.
+     * `"default"` renders all borders; `"borderless"` shows only row top/bottom borders.
+     */
+    variant?: 'default' | 'borderless';
+    /**
+     * When true the thead sticks to the top of the scroll container while scrolling.
+     * Pair with the `style` prop (e.g. `style={{ maxHeight: '400px' }}`) to constrain
+     * the table height so that the header can stick.
+     */
+    stickyHeader?: boolean;
+    /**
+     * Background color applied to the header row.
+     * Accepts any valid CSS color value (e.g. `"#f0f4ff"`, `"var(--my-color)"`).
+     * Overrides the default token value.
+     */
+    headerBg?: string;
+    /**
+     * Callback fired when a sortable column header is clicked.
+     * Useful for server-side sorting. Receives the column key and new direction.
+     */
+    onSort?: (key: string, direction: SortDirection) => void;
+    /** Additional CSS classes applied to the outer wrapper */
+    className?: string;
+    /**
+     * Inline styles applied to the outer wrapper.
+     * Use `maxHeight` here to constrain the table height when `stickyHeader` is true.
+     */
+    style?: React.CSSProperties;
+}
+export declare function Table({ children, variant, stickyHeader, headerBg, onSort, className, style, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export interface TableHeadProps {
+    /** Header rows — typically one TableRow containing TableHeaderCells */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TableHead({ children, className }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
+export interface TableBodyProps {
+    /** Table body rows */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TableBody({ children, className }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+export interface TableRowProps {
+    /** Cells in this row */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TableRow({ children, className }: TableRowProps): import("react/jsx-runtime").JSX.Element;
+export interface TableHeaderCellProps {
+    /** Cell content / column label */
+    children: React.ReactNode;
+    /**
+     * Unique key used to identify this column when sorting.
+     * When provided the column becomes sortable.
+     */
+    sortKey?: string;
+    /** Text alignment of the column */
+    align?: 'left' | 'center' | 'right';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TableHeaderCell({ children, sortKey, align, className, }: TableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+export interface TableCellProps {
+    /** Cell content */
+    children?: React.ReactNode;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function TableCell({ children, align, className }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table.js

@@ -0,0 +1,93 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, createContext, useContext } from 'react';
+var TableContext = createContext(null);
+function useTableContext() {
+    var ctx = useContext(TableContext);
+    if (!ctx) {
+        throw new Error('Table sub-components must be used within a Table component');
+    }
+    return ctx;
+}
+export function Table(_a) {
+    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.stickyHeader, stickyHeader = _c === void 0 ? false : _c, headerBg = _a.headerBg, onSort = _a.onSort, _d = _a.className, className = _d === void 0 ? '' : _d, style = _a.style;
+    var _e = useState(null), sortKey = _e[0], setSortKey = _e[1];
+    var _f = useState(null), sortDirection = _f[0], setSortDirection = _f[1];
+    var handleSort = function (key) {
+        var nextDirection;
+        if (sortKey === key) {
+            nextDirection = sortDirection === 'asc' ? 'desc' : sortDirection === 'desc' ? null : 'asc';
+        }
+        else {
+            nextDirection = 'asc';
+        }
+        setSortKey(nextDirection === null ? null : key);
+        setSortDirection(nextDirection);
+        onSort === null || onSort === void 0 ? void 0 : onSort(key, nextDirection);
+    };
+    var wrapperClasses = [
+        'dds-table-wrapper',
+        stickyHeader ? 'dds-table-scrollable' : '',
+        variant === 'borderless' ? 'dds-table-borderless' : '',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(TableContext.Provider, { value: { sortKey: sortKey, sortDirection: sortDirection, onSort: handleSort, stickyHeader: stickyHeader, variant: variant, headerBg: headerBg }, children: _jsx("div", { className: wrapperClasses, style: style, children: _jsx("table", { className: "dds-table", children: children }) }) }));
+}
+export function TableHead(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var _c = useTableContext(), stickyHeader = _c.stickyHeader, headerBg = _c.headerBg;
+    var classes = ['dds-table-head', stickyHeader ? 'dds-table-head-sticky' : '', className]
+        .filter(Boolean)
+        .join(' ');
+    var style = headerBg ? { backgroundColor: headerBg } : {};
+    return (_jsx("thead", { className: classes, style: style, children: children }));
+}
+export function TableBody(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return _jsx("tbody", { className: ['dds-table-body', className].filter(Boolean).join(' '), children: children });
+}
+export function TableRow(_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    return _jsx("tr", { className: ['dds-table-row', className].filter(Boolean).join(' '), children: children });
+}
+export function TableHeaderCell(_a) {
+    var children = _a.children, sortKey = _a.sortKey, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var _d = useTableContext(), activeSortKey = _d.sortKey, sortDirection = _d.sortDirection, onSort = _d.onSort;
+    var isSortable = Boolean(sortKey);
+    var isActive = isSortable && activeSortKey === sortKey;
+    var classes = [
+        'dds-table-th',
+        isSortable ? 'dds-table-th-sortable' : '',
+        isActive ? 'dds-table-th-active' : '',
+        "dds-table-align-".concat(align),
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    var handleClick = function () {
+        if (sortKey) {
+            onSort(sortKey);
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (isSortable && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClick();
+        }
+    };
+    var ariaSort = isActive
+        ? sortDirection === 'asc'
+            ? 'ascending'
+            : sortDirection === 'desc'
+                ? 'descending'
+                : 'none'
+        : 'none';
+    return (_jsx("th", { className: classes, scope: "col", "aria-sort": isSortable ? ariaSort : undefined, onClick: isSortable ? handleClick : undefined, onKeyDown: isSortable ? handleKeyDown : undefined, tabIndex: isSortable ? 0 : undefined, children: _jsxs("span", { className: "dds-table-th-content", children: [children, isSortable && (_jsx("span", { className: "dds-table-sort-icon", "aria-hidden": "true", children: isActive && sortDirection === 'asc' ? '↑' : isActive && sortDirection === 'desc' ? '↓' : '↕' }))] }) }));
+}
+export function TableCell(_a) {
+    var children = _a.children, _b = _a.align, align = _b === void 0 ? 'left' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var classes = ['dds-table-td', "dds-table-align-".concat(align), className].filter(Boolean).join(' ');
+    return _jsx("td", { className: classes, children: children });
+}