@roadlittledawn/docs-design-system-react 0.1.0

package/dist/components/CardGrid.stories.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardGrid } from './CardGrid';
+import { Card } from './Card';
+/**
+ * The CardGrid component arranges Card components in a responsive grid layout.
+ */
+var meta = {
+    title: 'Components/CardGrid',
+    component: CardGrid,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: "\nThe CardGrid component provides a responsive grid layout for displaying multiple cards.\n\n## When to Use\n\n- To display multiple related cards in an organized layout\n- To create feature grids or product showcases\n- To organize navigation options or menu items\n- When you need a responsive multi-column layout\n\n## When Not to Use\n\n- For single cards (just use the Card component)\n- For lists without card-style containers (use regular list elements)\n- When you need a more complex custom layout\n\n## Accessibility\n\n- Uses CSS Grid for proper layout semantics\n- Responsive design ensures content is accessible at all screen sizes\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * Grid with 2 columns (responsive).
+ */
+export var TwoColumns = {
+    args: {
+        columns: 2,
+        children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Getting Started", children: "Learn the basics of our documentation system." }), _jsx(Card, { title: "Components", children: "Explore all available UI components." }), _jsx(Card, { title: "Best Practices", children: "Follow guidelines for effective documentation." }), _jsx(Card, { title: "Examples", children: "See real-world usage examples." })] })),
+    },
+};
+/**
+ * Grid with 3 columns (default, responsive).
+ */
+export var ThreeColumns = {
+    args: {
+        columns: 3,
+        children: (_jsxs(_Fragment, { children: [_jsx(Card, { title: "Tutorials", children: "Step-by-step learning guides." }), _jsx(Card, { title: "How-To Guides", children: "Task-oriented instructions." }), _jsx(Card, { title: "Reference", children: "Technical reference documentation." }), _jsx(Card, { title: "Explanation", children: "Conceptual background information." }), _jsx(Card, { title: "API", children: "Complete API documentation." }), _jsx(Card, { title: "FAQ", children: "Frequently asked questions." })] })),
+    },
+};
+/**
+ * Grid with 4 columns (responsive).
+ */
+export var FourColumns = {
+    args: {
+        columns: 4,
+        children: (_jsxs(_Fragment, { children: [_jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 1" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 2" }), _jsx(Card, { titleColor: "purple", backgroundColor: "purple", children: "Feature 3" }), _jsx(Card, { titleColor: "red", backgroundColor: "red", children: "Feature 4" }), _jsx(Card, { titleColor: "yellow", backgroundColor: "yellow", children: "Feature 5" }), _jsx(Card, { titleColor: "gray", backgroundColor: "gray", children: "Feature 6" }), _jsx(Card, { titleColor: "blue", backgroundColor: "blue", children: "Feature 7" }), _jsx(Card, { titleColor: "green", backgroundColor: "green", children: "Feature 8" })] })),
+    },
+};
+/**
+ * Grid with clickable cards.
+ */
+export var ClickableCards = {
+    args: {
+        columns: 3,
+        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" }), _jsx(Card, { title: "Examples", href: "/examples", children: "Code examples and patterns" })] })),
+    },
+};

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,43 @@
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-yaml";
+export interface CodeSnippet {
+    /** The code content */
+    code: string;
+    /** Language for syntax highlighting */
+    language?: string;
+    /** Optional filename to display */
+    filename?: string;
+    /** Optional tab title (defaults to filename if not provided) */
+    tabTitle?: string;
+    /** Optional line numbers to highlight (1-indexed) */
+    highlightLines?: number[];
+}
+interface CodeBlockProps {
+    /** Single code snippet (for simple usage) */
+    code?: string;
+    /** Language for syntax highlighting */
+    language?: string;
+    /** Optional filename to display */
+    filename?: string;
+    /** Optional line numbers to highlight (1-indexed) */
+    highlightLines?: number[];
+    /** Multiple code snippets (for tabs) */
+    snippets?: CodeSnippet[];
+    /** Path to markdown file containing snippets */
+    path?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function CodeBlock({ code, language, filename, highlightLines, snippets, path, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/CodeBlock.js

@@ -0,0 +1,240 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+// @ts-ignore - prismjs doesn't have perfect TypeScript support
+import Prism from "prismjs";
+// Import common languages
+import "prismjs/components/prism-javascript";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-css";
+import "prismjs/components/prism-markdown";
+import "prismjs/components/prism-json";
+import "prismjs/components/prism-bash";
+import "prismjs/components/prism-ruby";
+import "prismjs/components/prism-python";
+import "prismjs/components/prism-java";
+import "prismjs/components/prism-sql";
+import "prismjs/components/prism-yaml";
+/**
+ * Parses a markdown file content to extract code snippets
+ */
+function parseMarkdownSnippets(content) {
+    var snippets = [];
+    var codeBlockRegex = /```(\w+)?\s*([^\n]*)\n([\s\S]*?)```/g;
+    var match;
+    while ((match = codeBlockRegex.exec(content)) !== null) {
+        var language = match[1] || undefined;
+        var attributes = match[2].trim();
+        var code = match[3].trim();
+        // Parse attributes (filename="...", language="...", tabTitle="...", highlightLines="1,2,3")
+        var attrs = {};
+        var attrRegex = /(\w+)="([^"]+)"/g;
+        var attrMatch = void 0;
+        while ((attrMatch = attrRegex.exec(attributes)) !== null) {
+            attrs[attrMatch[1]] = attrMatch[2];
+        }
+        // Parse highlightLines if present
+        var highlightLines = void 0;
+        if (attrs.highlightLines) {
+            highlightLines = attrs.highlightLines
+                .split(",")
+                .map(function (s) { return parseInt(s.trim(), 10); })
+                .filter(function (n) { return !isNaN(n); });
+        }
+        snippets.push({
+            code: code,
+            language: attrs.language || language,
+            filename: attrs.filename,
+            tabTitle: attrs.tabTitle || attrs.filename,
+            highlightLines: highlightLines,
+        });
+    }
+    return snippets;
+}
+/**
+ * Groups snippets by language for language dropdown
+ */
+function groupSnippetsByLanguage(snippets) {
+    var grouped = new Map();
+    for (var _i = 0, snippets_1 = snippets; _i < snippets_1.length; _i++) {
+        var snippet = snippets_1[_i];
+        var lang = snippet.language || "text";
+        if (!grouped.has(lang)) {
+            grouped.set(lang, []);
+        }
+        grouped.get(lang).push(snippet);
+    }
+    return grouped;
+}
+export function CodeBlock(_a) {
+    var _this = this;
+    var code = _a.code, language = _a.language, filename = _a.filename, highlightLines = _a.highlightLines, snippets = _a.snippets, path = _a.path, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _c = useState([]), loadedSnippets = _c[0], setLoadedSnippets = _c[1];
+    var _d = useState(false), loading = _d[0], setLoading = _d[1];
+    var _e = useState(null), error = _e[0], setError = _e[1];
+    var _f = useState(0), activeTabIndex = _f[0], setActiveTabIndex = _f[1];
+    var _g = useState(null), activeLanguage = _g[0], setActiveLanguage = _g[1];
+    var _h = useState(false), copied = _h[0], setCopied = _h[1];
+    // Load snippets from path if provided
+    useEffect(function () {
+        if (!path)
+            return;
+        setLoading(true);
+        setError(null);
+        fetch(path)
+            .then(function (res) {
+            if (!res.ok) {
+                throw new Error("Failed to load: ".concat(res.statusText));
+            }
+            return res.text();
+        })
+            .then(function (content) {
+            var parsed = parseMarkdownSnippets(content);
+            setLoadedSnippets(parsed);
+            setLoading(false);
+        })
+            .catch(function (err) {
+            setError(err.message);
+            setLoading(false);
+        });
+    }, [path]);
+    // Determine which snippets to use
+    var finalSnippets = useMemo(function () {
+        if (snippets) {
+            return snippets;
+        }
+        if (loadedSnippets.length > 0) {
+            return loadedSnippets;
+        }
+        if (code) {
+            return [
+                {
+                    code: code,
+                    language: language,
+                    filename: filename,
+                    tabTitle: filename,
+                    highlightLines: highlightLines,
+                },
+            ];
+        }
+        return [];
+    }, [snippets, loadedSnippets, code, language, filename, highlightLines]);
+    // Group snippets by language if we have multiple languages
+    var snippetsByLanguage = useMemo(function () {
+        if (finalSnippets.length === 0)
+            return new Map();
+        // Check if we have multiple languages
+        var languages = new Set(finalSnippets.map(function (s) { return s.language || "text"; }));
+        if (languages.size <= 1)
+            return new Map();
+        return groupSnippetsByLanguage(finalSnippets);
+    }, [finalSnippets]);
+    // Determine active snippets (filtered by language if language dropdown is active)
+    var activeSnippets = useMemo(function () {
+        if (activeLanguage && snippetsByLanguage.size > 0) {
+            return snippetsByLanguage.get(activeLanguage) || [];
+        }
+        return finalSnippets;
+    }, [finalSnippets, activeLanguage, snippetsByLanguage]);
+    // Get current snippet to display
+    var currentSnippet = activeSnippets[activeTabIndex] || activeSnippets[0];
+    // Highlight code with Prism
+    var highlightedCode = useMemo(function () {
+        if (!currentSnippet)
+            return "";
+        var lang = currentSnippet.language || "text";
+        try {
+            return Prism.highlight(currentSnippet.code, Prism.languages[lang] || Prism.languages.text, lang);
+        }
+        catch (e) {
+            return Prism.highlight(currentSnippet.code, Prism.languages.text, "text");
+        }
+    }, [currentSnippet]);
+    // Copy to clipboard
+    var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!currentSnippet)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(currentSnippet.code)];
+                case 2:
+                    _a.sent();
+                    setCopied(true);
+                    setTimeout(function () { return setCopied(false); }, 2000);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error("Failed to copy:", err_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // Initialize active language
+    useEffect(function () {
+        if (snippetsByLanguage.size > 0 && !activeLanguage) {
+            var firstLang = Array.from(snippetsByLanguage.keys())[0];
+            setActiveLanguage(firstLang);
+            setActiveTabIndex(0);
+        }
+    }, [snippetsByLanguage, activeLanguage]);
+    if (loading) {
+        return (_jsx("div", { className: "dds-code-block dds-code-block-loading ".concat(className), children: _jsx("div", { className: "dds-code-block-loading-text", children: "Loading code snippets..." }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "dds-code-block dds-code-block-error ".concat(className), children: _jsxs("div", { className: "dds-code-block-error-text", children: ["Error: ", error] }) }));
+    }
+    if (!currentSnippet) {
+        return null;
+    }
+    var hasTabs = activeSnippets.length > 1;
+    var hasLanguageDropdown = snippetsByLanguage.size > 1;
+    var displayLanguage = currentSnippet.language || "text";
+    return (_jsxs("div", { className: "dds-code-block ".concat(className), children: [_jsxs("div", { className: "dds-code-block-header", children: [_jsx("div", { className: "dds-code-block-header-left", children: hasTabs && (_jsx("div", { className: "dds-code-block-tabs", children: activeSnippets.map(function (snippet, index) { return (_jsx("button", { className: "dds-code-block-tab ".concat(index === activeTabIndex ? "dds-code-block-tab-active" : ""), onClick: function () { return setActiveTabIndex(index); }, type: "button", children: snippet.tabTitle || snippet.filename || "Tab ".concat(index + 1) }, index)); }) })) }), _jsxs("div", { className: "dds-code-block-header-right", children: [hasLanguageDropdown && (_jsx("select", { className: "dds-code-block-language-select", value: activeLanguage || "", onChange: function (e) {
+                                    setActiveLanguage(e.target.value);
+                                    setActiveTabIndex(0);
+                                }, children: Array.from(snippetsByLanguage.keys()).map(function (lang) { return (_jsx("option", { value: lang, children: lang }, lang)); }) })), !hasLanguageDropdown && displayLanguage !== "text" && (_jsx("span", { className: "dds-code-block-language-label", children: displayLanguage })), _jsx("button", { className: "dds-code-block-copy-button", onClick: handleCopy, type: "button", "aria-label": "Copy code", children: copied ? "Copied!" : "Copy" })] })] }), _jsxs("div", { className: "dds-code-block-content", children: [_jsx("pre", { className: "language-".concat(displayLanguage), children: _jsx("code", { className: "language-".concat(displayLanguage), dangerouslySetInnerHTML: { __html: highlightedCode } }) }), currentSnippet.highlightLines &&
+                        currentSnippet.highlightLines.length > 0 && (_jsx("div", { className: "dds-code-block-line-highlights", children: currentSnippet.highlightLines.map(function (lineNum) { return (_jsx("div", { className: "dds-code-block-line-highlight", style: { top: "".concat((lineNum - 1) * 1.5, "em") } }, lineNum)); }) }))] })] }));
+}

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

@@ -0,0 +1,45 @@
+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.
+ */
+declare const meta: Meta<typeof CodeBlock>;
+export default meta;
+type Story = StoryObj<typeof CodeBlock>;
+/**
+ * Basic code block with a simple code snippet.
+ */
+export declare const Basic: Story;
+/**
+ * Code block with a filename displayed.
+ */
+export declare const WithFilename: Story;
+/**
+ * Code block with highlighted lines.
+ */
+export declare const WithHighlightedLines: Story;
+/**
+ * Multiple code snippets displayed in tabs.
+ */
+export declare const WithTabs: Story;
+/**
+ * Multiple language versions with language dropdown.
+ */
+export declare const WithLanguageDropdown: Story;
+/**
+ * Complex example with tabs and highlighted lines.
+ */
+export declare const ComplexExample: Story;
+/**
+ * Example using path prop to load from external markdown file.
+ * Note: This will only work if the path is accessible.
+ */
+export declare const WithPath: Story;
+/**
+ * JSON code example.
+ */
+export declare const JSONExample: Story;
+/**
+ * Bash/shell script example.
+ */
+export declare const BashExample: Story;

package/dist/components/CodeBlock.stories.js

@@ -0,0 +1,154 @@
+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',
+    component: CodeBlock,
+    tags: ['autodocs'],
+    parameters: {
+        docs: {
+            description: {
+                component: "\nThe CodeBlock component provides a comprehensive solution for displaying code snippets in documentation.\n\n## Features\n\n- **Syntax Highlighting**: Uses PrismJS for syntax highlighting across many languages\n- **Copy to Clipboard**: One-click copy button for easy code sharing\n- **Line Highlighting**: Highlight specific lines to draw attention\n- **Tabs**: Display multiple code snippets in tabs (typically for different files)\n- **Language Switching**: Dropdown to switch between different language versions\n- **External Snippets**: Load code snippets from markdown files via path prop\n\n## When to Use\n\n- For code examples in documentation\n- When displaying multiple related code snippets\n- For showing code in different languages (TypeScript, JavaScript, etc.)\n- When you need users to easily copy code\n\n## When Not to Use\n\n- For inline code (use `<code>` tags)\n- For code that doesn't need syntax highlighting\n- For executable code editors (use a code editor component)\n\n## Accessibility\n\n- Copy button includes proper ARIA labels\n- Keyboard navigation for tabs and dropdowns\n- High contrast syntax highlighting colors\n        ",
+            },
+        },
+    },
+};
+export default meta;
+/**
+ * Basic code block with a simple code snippet.
+ */
+export var Basic = {
+    args: {
+        code: "function greet(name: string) {\n  return `Hello, ${name}!`;\n}\n\nconsole.log(greet(\"World\"));",
+        language: 'typescript',
+    },
+};
+/**
+ * Code block with a filename displayed.
+ */
+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',
+    },
+};
+/**
+ * Code block with highlighted lines.
+ */
+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',
+        highlightLines: [2, 3, 4],
+    },
+};
+/**
+ * Multiple code snippets displayed in tabs.
+ */
+export var WithTabs = {
+    args: {
+        snippets: [
+            {
+                code: "export const Button = ({ children }) => {\n  return <button>{children}</button>;\n};",
+                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',
+            },
+            {
+                code: "import { Button } from './Button';\n\nexport default {\n  component: Button,\n};",
+                language: 'typescript',
+                filename: 'Button.stories.ts',
+                tabTitle: 'Button.stories.ts',
+            },
+        ],
+    },
+};
+/**
+ * Multiple language versions with language dropdown.
+ */
+export var WithLanguageDropdown = {
+    args: {
+        snippets: [
+            {
+                code: "function greet(name: string): string {\n  return `Hello, ${name}!`;\n}",
+                language: 'typescript',
+                filename: 'greet.ts',
+            },
+            {
+                code: "function greet(name) {\n  return `Hello, ${name}!`;\n}",
+                language: 'javascript',
+                filename: 'greet.js',
+            },
+            {
+                code: "def greet(name):\n    return f\"Hello, {name}!\"",
+                language: 'python',
+                filename: 'greet.py',
+            },
+            {
+                code: "def greet(name)\n  \"Hello, #{name}!\"\nend",
+                language: 'ruby',
+                filename: 'greet.rb',
+            },
+        ],
+    },
+};
+/**
+ * Complex example with tabs and highlighted lines.
+ */
+export var ComplexExample = {
+    args: {
+        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',
+                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',
+                highlightLines: [2, 3],
+            },
+        ],
+    },
+};
+/**
+ * Example using path prop to load from external markdown file.
+ * Note: This will only work if the path is accessible.
+ */
+export var WithPath = {
+    args: {
+        path: 'https://raw.githubusercontent.com/storybookjs/storybook/47e331ffbaa61a476ddb873bdb12bf46a93a5131/docs/_snippets/before-each-in-meta-mock-date.md',
+    },
+};
+/**
+ * JSON code example.
+ */
+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',
+    },
+};
+/**
+ * Bash/shell script example.
+ */
+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',
+    },
+};

package/dist/components/Collapser.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+interface CollapserProps {
+    /** Title text or element displayed in the collapsible header */
+    title: string | ReactNode;
+    /** Optional ID for the title element */
+    id?: string;
+    /**
+     * Whether the collapser should be open by default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Content to show/hide when toggling */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function Collapser({ title, id, defaultOpen, children, className, }: CollapserProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Collapser.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, children = _a.children, _c = _a.className, className = _c === void 0 ? "" : _c;
+    var _d = useState(defaultOpen), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useState(undefined), height = _e[0], setHeight = _e[1];
+    var contentRef = useRef(null);
+    // Keyboard shortcuts: 's' or 'f' to show, 'h' to hide
+    useKeyPress(['s', 'f', 'h'], function (e) { return setIsOpen(e.key !== 'h'); });
+    useEffect(function () {
+        if (contentRef.current) {
+            setHeight(contentRef.current.scrollHeight);
+        }
+    }, [children]);
+    var toggleOpen = function () {
+        setIsOpen(!isOpen);
+    };
+    var collapserClasses = ["dds-collapser", 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: {
+                    height: isOpen ? height : 0,
+                }, children: _jsx("div", { ref: contentRef, className: "dds-collapser-content", children: children }) })] }));
+}

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Collapser } from './Collapser';
+/**
+ * The Collapser component creates expandable/collapsible content sections with smooth animations.
+ */
+declare const meta: Meta<typeof Collapser>;
+export default meta;
+type Story = StoryObj<typeof Collapser>;
+/**
+ * Basic collapser that starts collapsed.
+ */
+export declare const Basic: Story;
+/**
+ * Collapser that starts in the open state.
+ */
+export declare const DefaultOpen: Story;
+/**
+ * Collapser with an ID for the title.
+ */
+export declare const WithID: Story;
+/**
+ * Collapser containing complex content.
+ */
+export declare const ComplexContent: Story;
+/**
+ * Multiple collapsers in a FAQ-style layout.
+ */
+export declare const FAQExample: Story;