@roadlittledawn/docs-design-system-react 0.6.1 → 0.7.0

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.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.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-interface CollapserProps {
+export interface CollapserProps {
     /** Title text or element displayed in the collapsible header */
     title: string | ReactNode;
     /** Optional ID for the title element */
@@ -21,6 +21,23 @@ interface CollapserProps {
     children: ReactNode;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * Alignment of the title within the header.
+     * Use 'right' for right-aligned titles, typically paired with an icon on the left.
+     * @default 'left'
+     */
+    align?: 'left' | 'right';
+    /**
+     * Optional icon or React element rendered on the left side of the header,
+     * before the title text. Useful for visual identification of each section.
+     */
+    icon?: ReactNode;
+    /**
+     * Numeric step label shown on the far left of the header.
+     * Automatically injected by `CollapserGroup` when `numbered` is true;
+     * can also be set manually on individual collapsers.
+     * Use `--dds-collapser-step-number-color` to customise its colour.
+     */
+    stepNumber?: number;
 }
-export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Collapser({ title, id, defaultOpen, open: controlledOpen, onToggle, children, className, align, icon, stepNumber, }: CollapserProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Collapser.js

@@ -1,13 +1,13 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useKeyPress } from "../hooks/useKeyPress";
 export function Collapser(_a) {
-    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
-    var _d = useState(defaultOpen), uncontrolledOpen = _d[0], setUncontrolledOpen = _d[1];
+    var title = _a.title, id = _a.id, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, controlledOpen = _a.open, onToggle = _a.onToggle, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.align, align = _d === void 0 ? 'left' : _d, icon = _a.icon, stepNumber = _a.stepNumber;
+    var _e = useState(defaultOpen), uncontrolledOpen = _e[0], setUncontrolledOpen = _e[1];
     var isControlled = controlledOpen !== undefined;
     var isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-    var _e = useState(undefined), height = _e[0], setHeight = _e[1];
+    var _f = useState(undefined), height = _f[0], setHeight = _f[1];
     var contentRef = useRef(null);
     // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
     useKeyPress(['s', 'f', 'h'], function (e) {
@@ -28,10 +28,14 @@ export function Collapser(_a) {
             setUncontrolledOpen(!uncontrolledOpen);
         }
     };
-    var collapserClasses = ["dds-collapser", className]
+    var collapserClasses = [
+        "dds-collapser",
+        align === 'right' ? "dds-collapser--align-right" : "",
+        className,
+    ]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [_jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper", style: {
+    return (_jsxs("div", { className: collapserClasses, children: [_jsxs("button", { onClick: toggleOpen, type: "button", className: "dds-collapser-button", "aria-expanded": isOpen, children: [stepNumber !== undefined && (_jsxs("span", { className: "dds-collapser-step-number", children: [stepNumber, "."] })), icon && (_jsx("span", { className: "dds-collapser-header-icon", "aria-hidden": "true", children: icon })), _jsx("h5", { id: id, className: "dds-collapser-title", children: title }), _jsx("svg", { className: "dds-collapser-icon ".concat(isOpen ? "dds-collapser-icon-open" : ""), width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6 9 12 15 18 9" }) })] }), _jsx("div", { className: "dds-collapser-content-wrapper", style: {
                     height: isOpen ? height : 0,
                 }, children: _jsx("div", { ref: contentRef, className: "dds-collapser-content", children: children }) })] }));
 }

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

@@ -18,11 +18,44 @@ export declare const DefaultOpen: Story;
  * Collapser with an ID for the title.
  */
 export declare const WithID: Story;
+/**
+ * Collapser with an icon rendered on the left side of the header.
+ * The icon prop accepts any React element — use your own icon component or SVG.
+ */
+export declare const WithIcon: Story;
+/**
+ * Collapser with the title right-aligned within the header.
+ * Use this for design layouts where the title should appear on the right
+ * and content (such as a step number or icon) anchors the left.
+ */
+export declare const RightAligned: Story;
+/**
+ * Collapser with both an icon and right-aligned title — matching the
+ * reference screenshot layout where an icon anchors the left and the
+ * title text flows to the right before the chevron.
+ */
+export declare const WithIconRightAligned: Story;
 /**
  * Collapser containing complex content.
  */
 export declare const ComplexContent: Story;
+/**
+ * Shows all four header layout variants side-by-side for visual comparison:
+ * default left-aligned, left-aligned with icon, right-aligned, and right-aligned with icon.
+ */
+export declare const AllVariants: Story;
 /**
  * Multiple collapsers in a FAQ-style layout using CollapserGroup.
  */
 export declare const FAQExample: Story;
+/**
+ * Example matching the reference screenshot: collapsers in a group where each
+ * has a distinct icon on the left and right-aligned title text.
+ */
+export declare const IconGroupExample: Story;
+/**
+ * CollapserGroup with `numbered` auto-numbers each entry.
+ * Matches the reference screenshot pattern: step number + icon on the left,
+ * title right-aligned, chevron on the far right.
+ */
+export declare const NumberedGroup: Story;