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

package/README.md

@@ -35,6 +35,10 @@ Full component documentation with live examples, usage guidelines, and API docum
 
 **[View Component Documentation →](https://docs-design-system-storybook.netlify.app/?path=/docs/components-button--docs)**
 
+## Next.js / React Server Components
+
+Interactive components (`Collapser`, `CollapserGroup`, `CodeBlock`, `Tabs`, `Popover`) are pre-marked with `'use client'`, so they work in Next.js App Router without any extra setup. Stateless components (`Button`, `Callout`, `Card`, `CardGrid`, `Heading`, `Link`, `List`, `Typography`) have no directive and are fully usable as Server Components.
+
 ## Dark Mode
 
 The package includes built-in dark mode support. All components use transparent backgrounds (unless background color specified via props) in dark mode so they don't clash with your site's own dark theme.

package/dist/components/Button.stories.js

@@ -8,6 +8,34 @@ var meta = {
     title: 'Components/Button',
     component: Button,
     tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'outline'],
+            description: 'Visual style variant of the button.',
+            table: { defaultValue: { summary: "'primary'" } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Size of the button.',
+            table: { defaultValue: { summary: "'md'" } },
+        },
+        children: {
+            control: 'text',
+            description: 'Button content.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the button is disabled.',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Callout.stories.js

@@ -7,6 +7,27 @@ var meta = {
     title: 'Components/Callout',
     component: Callout,
     tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['caution', 'important', 'tip', 'course'],
+            description: 'Visual style variant that sets the color and icon.',
+        },
+        title: {
+            control: 'text',
+            description: 'Optional title. Defaults to the variant name. Pass `null` to hide entirely.',
+            table: { defaultValue: { summary: 'Variant name ("Caution", "Tip", etc.)' } },
+        },
+        children: {
+            control: 'text',
+            description: 'Callout content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Card.stories.js

@@ -7,6 +7,37 @@ var meta = {
     title: 'Components/Card',
     component: Card,
     tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Optional title displayed at the top of the card.',
+        },
+        titleColor: {
+            control: { type: 'select' },
+            options: ['blue', 'green', 'purple', 'red', 'yellow', 'gray'],
+            description: 'Color of the title text.',
+            table: { defaultValue: { summary: "'gray'" } },
+        },
+        backgroundColor: {
+            control: { type: 'select' },
+            options: ['blue', 'green', 'purple', 'red', 'yellow', 'gray', 'white'],
+            description: 'Background color of the card.',
+            table: { defaultValue: { summary: "'white'" } },
+        },
+        href: {
+            control: 'text',
+            description: 'Optional link URL. When provided, the entire card becomes clickable.',
+        },
+        children: {
+            control: 'text',
+            description: 'Card content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/CardGrid.d.ts

@@ -5,10 +5,16 @@ interface CardGridProps {
      * @default 3
      */
     columns?: 2 | 3 | 4;
+    /**
+     * When true, all cards in each row expand to the height of the tallest card.
+     * Useful when cards have varying content lengths.
+     * @default true
+     */
+    equalHeight?: boolean;
     /** Grid content (typically Card components) */
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
 }
-export declare function CardGrid({ columns, children, className }: CardGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardGrid({ columns, equalHeight, children, className }: CardGridProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CardGrid.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export function CardGrid(_a) {
-    var _b = _a.columns, columns = _b === void 0 ? 3 : _b, children = _a.children, _c = _a.className, className = _c === void 0 ? '' : _c;
-    var classNames = "dds-card-grid dds-card-grid-".concat(columns, " ").concat(className).trim();
+    var _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.equalHeight, equalHeight = _c === void 0 ? true : _c, children = _a.children, _d = _a.className, className = _d === void 0 ? '' : _d;
+    var classNames = [
+        'dds-card-grid',
+        "dds-card-grid-".concat(columns),
+        equalHeight ? 'dds-card-grid-equal-height' : '',
+        className,
+    ].filter(Boolean).join(' ');
     return (_jsx("div", { className: classNames, children: children }));
 }

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

@@ -18,7 +18,18 @@ export declare const ThreeColumns: Story;
  * Grid with 4 columns (responsive).
  */
 export declare const FourColumns: Story;
+/**
+ * Cards with varying content lengths stretched to the same height per row.
+ * Use `equalHeight` when cards sit side-by-side and uneven content would
+ * make the grid look ragged.
+ */
+export declare const EqualHeight: Story;
 /**
  * Grid with clickable cards.
  */
 export declare const ClickableCards: Story;
+/**
+ * Clickable cards with varying content lengths stretched to the same height.
+ * The equal height behaviour applies even when cards are wrapped in anchor tags.
+ */
+export declare const EqualHeightClickableCards: Story;

package/dist/components/CardGrid.stories.js

@@ -8,6 +8,28 @@ var meta = {
     title: 'Components/CardGrid',
     component: CardGrid,
     tags: ['autodocs'],
+    argTypes: {
+        columns: {
+            control: { type: 'select' },
+            options: [2, 3, 4],
+            description: 'Number of columns in the grid.',
+            table: { defaultValue: { summary: '3' } },
+        },
+        equalHeight: {
+            control: 'boolean',
+            description: 'When true, all cards in each row expand to the height of the tallest card. Useful when cards have varying content lengths.',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes to apply to the grid container.',
+            table: { defaultValue: { summary: '""' } },
+        },
+        children: {
+            control: false,
+            description: 'Grid content — typically Card components.',
+        },
+    },
     parameters: {
         docs: {
             description: {
@@ -65,6 +87,25 @@ export var FourColumns = {
         },
     },
 };
+/**
+ * Cards with varying content lengths stretched to the same height per row.
+ * Use `equalHeight` when cards sit side-by-side and uneven content would
+ * make the grid look ragged.
+ */
+export var EqualHeight = {
+    args: {
+        columns: 3,
+        equalHeight: true,
+        children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Short", children: "Brief content." }), _jsx(Card, { title: "Medium", children: "This card has a bit more content than the first one, so it would normally be taller." }), _jsx(Card, { title: "Long", children: "This card has significantly more content than the others. It goes into much more detail and spans several sentences to demonstrate how equal height keeps the grid looking even and professional." })] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3} equalHeight>\n  <Card title=\"Short\">Brief content.</Card>\n  <Card title=\"Medium\">This card has a bit more content than the first one.</Card>\n  <Card title=\"Long\">This card has significantly more content than the others...</Card>\n</CardGrid>",
+            },
+        },
+    },
+};
 /**
  * Grid with clickable cards.
  */
@@ -81,3 +122,21 @@ export var ClickableCards = {
         },
     },
 };
+/**
+ * Clickable cards with varying content lengths stretched to the same height.
+ * The equal height behaviour applies even when cards are wrapped in anchor tags.
+ */
+export var EqualHeightClickableCards = {
+    args: {
+        columns: 3,
+        equalHeight: true,
+        children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Documentation", href: "/docs", children: "Complete documentation guide." }), _jsx(Card, { title: "API Reference", href: "/api", children: "Detailed API reference with all available endpoints, parameters, and response schemas." }), _jsx(Card, { title: "Examples", href: "/examples", children: "Practical code examples and patterns showing real-world usage across a variety of common documentation scenarios." })] })),
+    },
+    parameters: {
+        docs: {
+            source: {
+                code: "<CardGrid columns={3} equalHeight>\n  <Card title=\"Documentation\" href=\"/docs\">Complete documentation guide.</Card>\n  <Card title=\"API Reference\" href=\"/api\">Detailed API reference with all available endpoints, parameters, and response schemas.</Card>\n  <Card title=\"Examples\" href=\"/examples\">Practical code examples and patterns showing real-world usage.</Card>\n</CardGrid>",
+            },
+        },
+    },
+};

package/dist/components/CodeBlock.js

@@ -1,3 +1,4 @@
+'use client';
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

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

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { CodeBlock } from './CodeBlock';
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBlock } from "./CodeBlock";
 /**
  * The CodeBlock component displays code snippets with syntax highlighting, copy functionality, and support for multiple tabs and languages.
  */

package/dist/components/CodeBlock.stories.js

@@ -1,11 +1,42 @@
-import { CodeBlock } from './CodeBlock';
+import { CodeBlock } from "./CodeBlock";
 /**
  * The CodeBlock component displays code snippets with syntax highlighting, copy functionality, and support for multiple tabs and languages.
  */
 var meta = {
-    title: 'Components/CodeBlock',
+    title: "Components/CodeBlock",
     component: CodeBlock,
-    tags: ['autodocs'],
+    tags: ["autodocs"],
+    argTypes: {
+        code: {
+            control: "text",
+            description: "Single code snippet string. Use `snippets` for multi-tab or multi-language layouts.",
+        },
+        language: {
+            control: "text",
+            description: 'Language identifier for syntax highlighting (e.g. `"typescript"`, `"bash"`, `"python"`).',
+        },
+        filename: {
+            control: "text",
+            description: "Optional filename label shown in the header when there is only one snippet.",
+        },
+        highlightLines: {
+            control: "object",
+            description: "Array of 1-indexed line numbers to highlight (e.g. `[2, 3, 4]`).",
+        },
+        snippets: {
+            control: false,
+            description: "Array of code snippets for multi-tab or multi-language display. Takes precedence over `code`.",
+        },
+        path: {
+            control: "text",
+            description: "URL or path to a markdown file containing fenced code blocks to load as snippets.",
+        },
+        className: {
+            control: "text",
+            description: "Additional CSS classes applied to the outer container.",
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {
@@ -21,7 +52,7 @@ export default meta;
 export var Basic = {
     args: {
         code: "function greet(name: string) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet(\"World\"));",
-        language: 'typescript',
+        language: "typescript",
     },
     parameters: {
         docs: {
@@ -37,8 +68,8 @@ export var Basic = {
 export var WithFilename = {
     args: {
         code: "export const Button = ({ children, onClick }) => {\n  return (\n    <button onClick={onClick}>\n      {children}\n    </button>\n  );\n};",
-        language: 'jsx',
-        filename: 'Button.jsx',
+        language: "jsx",
+        filename: "Button.jsx",
     },
     parameters: {
         docs: {
@@ -54,7 +85,7 @@ export var WithFilename = {
 export var WithHighlightedLines = {
     args: {
         code: "function calculateTotal(items) {\n  let total = 0;\n  for (const item of items) {\n    total += item.price * item.quantity;\n  }\n  return total;\n}",
-        language: 'javascript',
+        language: "javascript",
         highlightLines: [2, 3, 4],
     },
     parameters: {
@@ -73,21 +104,21 @@ export var WithTabs = {
         snippets: [
             {
                 code: "export const Button = ({ children }) => {\n  return <button>{children}</button>;\n};",
-                language: 'jsx',
-                filename: 'Button.jsx',
-                tabTitle: 'Button.jsx',
+                language: "jsx",
+                filename: "Button.jsx",
+                tabTitle: "Button.jsx",
             },
             {
                 code: ".button {\n  padding: 0.5rem 1rem;\n  background-color: blue;\n  color: white;\n}",
-                language: 'css',
-                filename: 'Button.css',
-                tabTitle: 'Button.css',
+                language: "css",
+                filename: "Button.css",
+                tabTitle: "Button.css",
             },
             {
                 code: "import { Button } from './Button';\n\nexport default {\n  component: Button,\n};",
-                language: 'typescript',
-                filename: 'Button.stories.ts',
-                tabTitle: 'Button.stories.ts',
+                language: "typescript",
+                filename: "Button.stories.ts",
+                tabTitle: "Button.stories.ts",
             },
         ],
     },
@@ -107,23 +138,23 @@ export var WithLanguageDropdown = {
         snippets: [
             {
                 code: "function greet(name: string): string {\n  return `Hello, ${name}!`;\n}",
-                language: 'typescript',
-                filename: 'greet.ts',
+                language: "typescript",
+                filename: "greet.ts",
             },
             {
                 code: "function greet(name) {\n  return `Hello, ${name}!`;\n}",
-                language: 'javascript',
-                filename: 'greet.js',
+                language: "javascript",
+                filename: "greet.js",
             },
             {
                 code: "def greet(name):\n    return f\"Hello, {name}!\"",
-                language: 'python',
-                filename: 'greet.py',
+                language: "python",
+                filename: "greet.py",
             },
             {
                 code: "def greet(name)\n  \"Hello, #{name}!\"\nend",
-                language: 'ruby',
-                filename: 'greet.rb',
+                language: "ruby",
+                filename: "greet.rb",
             },
         ],
     },
@@ -143,16 +174,16 @@ export var ComplexExample = {
         snippets: [
             {
                 code: "import React from 'react';\n\nexport function Button({ children, onClick }) {\n  return (\n    <button onClick={onClick} className=\"btn\">\n      {children}\n    </button>\n  );\n}",
-                language: 'jsx',
-                filename: 'Button.jsx',
-                tabTitle: 'Button.jsx',
+                language: "jsx",
+                filename: "Button.jsx",
+                tabTitle: "Button.jsx",
                 highlightLines: [3, 4, 5],
             },
             {
                 code: ".btn {\n  padding: 0.5rem 1rem;\n  background-color: #3b82f6;\n  color: white;\n  border-radius: 0.375rem;\n}",
-                language: 'css',
-                filename: 'Button.css',
-                tabTitle: 'Button.css',
+                language: "css",
+                filename: "Button.css",
+                tabTitle: "Button.css",
                 highlightLines: [2, 3],
             },
         ],
@@ -171,7 +202,7 @@ export var ComplexExample = {
  */
 export var WithPath = {
     args: {
-        path: 'https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md',
+        path: "https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md",
     },
     parameters: {
         docs: {
@@ -187,8 +218,8 @@ export var WithPath = {
 export var JSONExample = {
     args: {
         code: "{\n  \"name\": \"docs-design-system\",\n  \"version\": \"0.1.0\",\n  \"dependencies\": {\n    \"react\": \"^18.0.0\"\n  }\n}",
-        language: 'json',
-        filename: 'package.json',
+        language: "json",
+        filename: "package.json",
     },
     parameters: {
         docs: {
@@ -204,8 +235,8 @@ export var JSONExample = {
 export var BashExample = {
     args: {
         code: "#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test",
-        language: 'bash',
-        filename: 'setup.sh',
+        language: "bash",
+        filename: "setup.sh",
     },
     parameters: {
         docs: {
@@ -223,15 +254,15 @@ export var WithFilenameTabs = {
         snippets: [
             {
                 code: "import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Example() {\n  return (\n    <CodeBlock\n      code=\"console.log('hello')\"\n      language=\"typescript\"\n    />\n  );\n}",
-                language: 'tsx',
-                filename: 'Example.tsx',
-                tabTitle: 'Example.tsx',
+                language: "tsx",
+                filename: "Example.tsx",
+                tabTitle: "Example.tsx",
             },
             {
                 code: "import { CodeBlock } from '@docs-design-system/ui';\n\nexport function Advanced() {\n  return (\n    <CodeBlock\n      snippets={[\n        { code: 'const a = 1;', language: 'typescript', tabTitle: 'a.ts' },\n        { code: 'const b = 2;', language: 'typescript', tabTitle: 'b.ts' },\n      ]}\n    />\n  );\n}",
-                language: 'tsx',
-                filename: 'Advanced.tsx',
-                tabTitle: 'Advanced.tsx',
+                language: "tsx",
+                filename: "Advanced.tsx",
+                tabTitle: "Advanced.tsx",
             },
         ],
     },
@@ -249,8 +280,8 @@ export var WithFilenameTabs = {
 export var SingleFilename = {
     args: {
         code: "export default function Home() {\n  return <h1>Welcome</h1>;\n}",
-        language: 'tsx',
-        filename: 'page.tsx',
+        language: "tsx",
+        filename: "page.tsx",
     },
     parameters: {
         docs: {
@@ -266,8 +297,8 @@ export var SingleFilename = {
 export var PHPExample = {
     args: {
         code: "<?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nclass UserController extends Controller\n{\n    public function index()\n    {\n        $users = User::all();\n        return view('users.index', compact('users'));\n    }\n\n    public function show(int $id)\n    {\n        $user = User::findOrFail($id);\n        return response()->json($user);\n    }\n}",
-        language: 'php',
-        filename: 'UserController.php',
+        language: "php",
+        filename: "UserController.php",
     },
     parameters: {
         docs: {
@@ -285,33 +316,33 @@ export var ManyTabs = {
         snippets: [
             {
                 code: "export const App = () => <div>App</div>;",
-                language: 'tsx',
-                tabTitle: 'App.tsx',
+                language: "tsx",
+                tabTitle: "App.tsx",
             },
             {
                 code: "export const Header = () => <header>Header</header>;",
-                language: 'tsx',
-                tabTitle: 'Header.tsx',
+                language: "tsx",
+                tabTitle: "Header.tsx",
             },
             {
                 code: "export const Footer = () => <footer>Footer</footer>;",
-                language: 'tsx',
-                tabTitle: 'Footer.tsx',
+                language: "tsx",
+                tabTitle: "Footer.tsx",
             },
             {
                 code: "export const Sidebar = () => <aside>Sidebar</aside>;",
-                language: 'tsx',
-                tabTitle: 'Sidebar.tsx',
+                language: "tsx",
+                tabTitle: "Sidebar.tsx",
             },
             {
                 code: "export const Nav = () => <nav>Nav</nav>;",
-                language: 'tsx',
-                tabTitle: 'Navigation.tsx',
+                language: "tsx",
+                tabTitle: "Navigation.tsx",
             },
             {
                 code: "export const Content = () => <main>Content</main>;",
-                language: 'tsx',
-                tabTitle: 'ContentArea.tsx',
+                language: "tsx",
+                tabTitle: "ContentArea.tsx",
             },
         ],
     },

package/dist/components/Collapser.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";

package/dist/components/Collapser.stories.js

@@ -8,6 +8,30 @@ var meta = {
     title: 'Components/Collapser',
     component: Collapser,
     tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title text displayed in the collapsible header.',
+        },
+        id: {
+            control: 'text',
+            description: 'Optional ID for the title element, useful for anchor links.',
+        },
+        defaultOpen: {
+            control: 'boolean',
+            description: 'Whether the collapser should be open by default (uncontrolled mode).',
+            table: { defaultValue: { summary: 'false' } },
+        },
+        children: {
+            control: false,
+            description: 'Content to show/hide when toggling.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/CollapserGroup.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/components/CollapserGroup.stories.js

@@ -20,6 +20,35 @@ var meta = {
     title: 'Components/CollapserGroup',
     component: CollapserGroup,
     tags: ['autodocs'],
+    argTypes: {
+        spacing: {
+            control: 'text',
+            description: 'CSS gap value between collapser items.',
+            table: { defaultValue: { summary: "'0.5rem'" } },
+        },
+        allowMultiple: {
+            control: 'boolean',
+            description: 'When true, multiple collapsers can be open simultaneously. When false, opening one closes the others (accordion mode).',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        defaultOpen: {
+            control: 'text',
+            description: 'Index or array of indexes of collapsers that should be open by default. E.g. `0` or `[0, 2]`.',
+        },
+        onChange: {
+            control: false,
+            description: 'Callback fired when the open state changes. Receives an array of currently open indexes.',
+        },
+        children: {
+            control: false,
+            description: 'Collapser components to render inside the group.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Heading.stories.js

@@ -7,6 +7,26 @@ var meta = {
     title: 'Components/Heading',
     component: Heading,
     tags: ['autodocs'],
+    argTypes: {
+        level: {
+            control: { type: 'select' },
+            options: [1, 2, 3, 4],
+            description: 'Heading level — renders as `<h1>` through `<h4>`.',
+        },
+        id: {
+            control: 'text',
+            description: 'Override the auto-generated `id` attribute. By default the `id` is derived from the heading text.',
+        },
+        children: {
+            control: 'text',
+            description: 'Heading content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Link.stories.js

@@ -7,6 +7,21 @@ var meta = {
     title: 'Components/Link',
     component: Link,
     tags: ['autodocs'],
+    argTypes: {
+        href: {
+            control: 'text',
+            description: 'Link destination. URLs starting with `http://` or `https://` are treated as external and open in a new tab.',
+        },
+        children: {
+            control: 'text',
+            description: 'Link content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

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

@@ -4,6 +4,38 @@ declare const meta: {
     component: import("react").FC<import("./List").ListProps> & {
         Item: typeof import("./List").ListItem;
     };
+    argTypes: {
+        ordered: {
+            control: "boolean";
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        bullet: {
+            control: "text";
+            description: string;
+        };
+        bulletIcon: {
+            control: false;
+            description: string;
+        };
+        children: {
+            control: false;
+            description: string;
+        };
+        className: {
+            control: "text";
+            description: string;
+            table: {
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+    };
     parameters: {
         layout: string;
         docs: {

package/dist/components/List.stories.js

@@ -5,6 +5,30 @@ import { Callout } from "./Callout";
 var meta = {
     title: "Components/List",
     component: List,
+    argTypes: {
+        ordered: {
+            control: 'boolean',
+            description: 'When true renders an ordered (numbered) list. When false renders an unordered (bullet) list.',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        bullet: {
+            control: 'text',
+            description: 'Custom bullet character for unordered lists (e.g. an emoji like `"✅"`). Only applies when `ordered` is false. Ignored when `bulletIcon` is provided.',
+        },
+        bulletIcon: {
+            control: false,
+            description: 'Custom bullet icon as a React node (e.g. an SVG). Takes precedence over `bullet`. Only applies when `ordered` is false.',
+        },
+        children: {
+            control: false,
+            description: '`List.Item` components to render.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         layout: "padded",
         docs: {

package/dist/components/Popover.js

@@ -1,3 +1,4 @@
+'use client';
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {

package/dist/components/Popover.stories.js

@@ -15,6 +15,51 @@ var meta = {
     title: "Components/Popover",
     component: Popover,
     tags: ["autodocs"],
+    argTypes: {
+        content: {
+            control: false,
+            description: 'Arbitrary React content rendered inside the popover. Use when the built-in `glossary` or `preview` templates do not fit your use case.',
+        },
+        glossary: {
+            control: false,
+            description: 'Renders a styled glossary definition popover. Accepts `{ term, title, definition }` where `definition` is a `ReactNode`.',
+        },
+        preview: {
+            control: false,
+            description: 'Renders a Wikipedia-style content preview. Accepts `{ title, excerpt?, imageUrl?, href?, linkText? }`.',
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
+            description: 'Preferred placement relative to the trigger. `"auto"` detects available viewport space.',
+            table: { defaultValue: { summary: "'auto'" } },
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['sm', 'md', 'lg'],
+            description: 'Popover width. `sm` = 240px, `md` = 320px, `lg` = 480px.',
+            table: { defaultValue: { summary: "'md'" } },
+        },
+        showDelay: {
+            control: 'number',
+            description: 'Milliseconds to wait before showing the popover on hover.',
+            table: { defaultValue: { summary: '200' } },
+        },
+        hideDelay: {
+            control: 'number',
+            description: 'Milliseconds to wait before hiding the popover on hover-out.',
+            table: { defaultValue: { summary: '150' } },
+        },
+        children: {
+            control: 'text',
+            description: 'The trigger element — the text or content that reveals the popover on hover or tap.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes on the trigger wrapper.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         layout: "centered",
         docs: {

package/dist/components/Tabs.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, createContext, useContext } from "react";
 var TabsContext = createContext(null);

package/dist/components/Tabs.stories.js

@@ -21,6 +21,29 @@ var meta = {
     title: "Components/Tabs",
     component: Tabs,
     tags: ["autodocs"],
+    argTypes: {
+        defaultActiveTab: {
+            control: 'text',
+            description: 'ID of the tab that is active by default (uncontrolled mode).',
+        },
+        activeTab: {
+            control: 'text',
+            description: 'Controlled active tab ID. Use together with `onTabChange` to manage state externally.',
+        },
+        onTabChange: {
+            control: false,
+            description: 'Callback fired when the active tab changes. Receives the new tab ID.',
+        },
+        children: {
+            control: false,
+            description: 'Tab content — typically `TabList` and `TabPanel` components.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes applied to the outer container.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/components/Typography.stories.js

@@ -7,6 +7,23 @@ var meta = {
     title: 'Components/Typography',
     component: Typography,
     tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: { type: 'select' },
+            options: ['h1', 'h2', 'h3', 'h4', 'p', 'caption'],
+            description: 'Typography style variant. `h1`–`h4` render as heading elements; `p` and `caption` render as `<p>`.',
+            table: { defaultValue: { summary: "'p'" } },
+        },
+        children: {
+            control: 'text',
+            description: 'Text content.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+            table: { defaultValue: { summary: '""' } },
+        },
+    },
     parameters: {
         docs: {
             description: {

package/dist/hooks/useKeyPress.js

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useRef, useMemo } from 'react';
 var normalizeKeyCombination = function (keys) {
     var parts = keys.split(/\s*\+\s*/);

package/dist/styles.css

@@ -1080,6 +1080,14 @@ a.no-text-decoration {
     grid-template-columns: repeat(4, 1fr);
   }
 }
+/* Equal height: stretch all cards to the tallest in each row */
+.dds-card-grid-equal-height > * {
+  height: 100%;
+}
+.dds-card-grid-equal-height .dds-card {
+  height: 100%;
+  box-sizing: border-box;
+}
 .dds-collapser {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {
@@ -37,9 +37,10 @@
     "postcss-import": "^16.0.0",
     "typescript": "^5.0.0"
   },
+  "sideEffects": false,
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "exports": {
     ".": {