@roadlittledawn/docs-design-system-react 0.2.0 → 0.2.2

package/dist/components/Callout.js

@@ -7,13 +7,12 @@ var defaultTitles = {
 };
 export function Callout(_a) {
     var variant = _a.variant, title = _a.title, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
-    var calloutClasses = [
-        "dds-callout",
-        "dds-callout-".concat(variant),
-        className,
-    ]
+    var calloutClasses = ["dds-callout", "dds-callout-".concat(variant), className]
         .filter(Boolean)
         .join(" ");
-    var titleClasses = ["dds-callout-title", "dds-callout-title-".concat(variant)].join(" ");
-    return (_jsxs("div", { className: calloutClasses, children: [title !== null && (_jsx("h4", { className: titleClasses, children: title || defaultTitles[variant] })), children] }));
+    var titleClasses = [
+        "dds-callout-title",
+        "dds-callout-title-".concat(variant),
+    ].join(" ");
+    return (_jsxs("div", { className: calloutClasses, children: [title !== null && (_jsx("p", { className: titleClasses, children: title || defaultTitles[variant] })), children] }));
 }

package/dist/components/CodeBlock.d.ts

@@ -11,6 +11,8 @@ import "prismjs/components/prism-python";
 import "prismjs/components/prism-java";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-php";
 export interface CodeSnippet {
     /** The code content */
     code: string;
@@ -39,5 +41,18 @@ interface CodeBlockProps {
     /** Additional CSS classes */
     className?: string;
 }
+/**
+ * Register additional Prism languages via dynamic import.
+ * Call this before rendering CodeBlock with unsupported languages.
+ *
+ * @example
+ * ```ts
+ * await registerLanguages(async () => {
+ *   await import('prismjs/components/prism-go');
+ *   await import('prismjs/components/prism-rust');
+ * });
+ * ```
+ */
+export declare function registerLanguages(loader: () => Promise<void>): Promise<void>;
 export declare function CodeBlock({ code, language, filename, highlightLines, snippets, path, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/CodeBlock.js

@@ -52,6 +52,32 @@ import "prismjs/components/prism-python";
 import "prismjs/components/prism-java";
 import "prismjs/components/prism-sql";
 import "prismjs/components/prism-yaml";
+import "prismjs/components/prism-markup-templating";
+import "prismjs/components/prism-php";
+/**
+ * Register additional Prism languages via dynamic import.
+ * Call this before rendering CodeBlock with unsupported languages.
+ *
+ * @example
+ * ```ts
+ * await registerLanguages(async () => {
+ *   await import('prismjs/components/prism-go');
+ *   await import('prismjs/components/prism-rust');
+ * });
+ * ```
+ */
+export function registerLanguages(loader) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, loader()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
 /**
  * Parses a markdown file content to extract code snippets
  */
@@ -103,6 +129,8 @@ function groupSnippetsByLanguage(snippets) {
     }
     return grouped;
 }
+var ClipboardIcon = function () { return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), _jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })] })); };
+var CheckIcon = function () { return (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) })); };
 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;
@@ -232,9 +260,12 @@ export function CodeBlock(_a) {
     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) {
+    var showFilenameLabel = !hasTabs && currentSnippet.filename;
+    return (_jsxs("div", { className: "dds-code-block ".concat(className), children: [_jsxs("div", { className: "dds-code-block-header", children: [_jsxs("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)); }) })), showFilenameLabel && (_jsx("span", { className: "dds-code-block-filename", children: currentSnippet.filename }))] }), _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 &&
+                                }, children: Array.from(snippetsByLanguage.keys()).map(function (lang) { return (_jsx("option", { value: lang, children: lang }, lang)); }) })), !hasLanguageDropdown &&
+                                !showFilenameLabel &&
+                                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": copied ? "Copied" : "Copy code", children: copied ? _jsx(CheckIcon, {}) : _jsx(ClipboardIcon, {}) })] })] }), _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

@@ -43,3 +43,19 @@ export declare const JSONExample: Story;
  * Bash/shell script example.
  */
 export declare const BashExample: Story;
+/**
+ * Multiple TSX files displayed as flat tabs with bottom-border accent.
+ */
+export declare const WithFilenameTabs: Story;
+/**
+ * Single snippet with a filename — displays a flat filename label in the header.
+ */
+export declare const SingleFilename: Story;
+/**
+ * PHP syntax highlighting example.
+ */
+export declare const PHPExample: Story;
+/**
+ * Many tabs to verify horizontal scroll behavior.
+ */
+export declare const ManyTabs: Story;

package/dist/components/CodeBlock.stories.js

@@ -9,7 +9,7 @@ var meta = {
     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        ",
+                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- **Filename Labels**: Single-file snippets display a flat filename label in the header\n- **External Snippets**: Load code snippets from markdown files via path prop\n\n## Supported Languages\n\nThe following languages are bundled by default: JavaScript, TypeScript, JSX, TSX, CSS, Markdown, JSON, Bash, Ruby, Python, Java, SQL, YAML, and PHP.\n\nTo add additional languages, use the `registerLanguages` utility before rendering:\n\n```ts\nimport { registerLanguages, CodeBlock } from '@roadlittledawn/docs-design-system-react';\n\n// Call once at app startup or before rendering CodeBlock with new languages.\n// Prism is already loaded by the package \u2014 dynamic language imports\n// register themselves against it automatically.\nawait registerLanguages(async () => {\n  await import('prismjs/components/prism-go');\n  await import('prismjs/components/prism-rust');\n});\n```\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        ",
             },
         },
     },
@@ -152,3 +152,83 @@ export var BashExample = {
         filename: 'setup.sh',
     },
 };
+/**
+ * Multiple TSX files displayed as flat tabs with bottom-border accent.
+ */
+export var WithFilenameTabs = {
+    args: {
+        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',
+            },
+            {
+                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',
+            },
+        ],
+    },
+};
+/**
+ * Single snippet with a filename — displays a flat filename label in the header.
+ */
+export var SingleFilename = {
+    args: {
+        code: "export default function Home() {\n  return <h1>Welcome</h1>;\n}",
+        language: 'tsx',
+        filename: 'page.tsx',
+    },
+};
+/**
+ * PHP syntax highlighting example.
+ */
+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',
+    },
+};
+/**
+ * Many tabs to verify horizontal scroll behavior.
+ */
+export var ManyTabs = {
+    args: {
+        snippets: [
+            {
+                code: "export const App = () => <div>App</div>;",
+                language: 'tsx',
+                tabTitle: 'App.tsx',
+            },
+            {
+                code: "export const Header = () => <header>Header</header>;",
+                language: 'tsx',
+                tabTitle: 'Header.tsx',
+            },
+            {
+                code: "export const Footer = () => <footer>Footer</footer>;",
+                language: 'tsx',
+                tabTitle: 'Footer.tsx',
+            },
+            {
+                code: "export const Sidebar = () => <aside>Sidebar</aside>;",
+                language: 'tsx',
+                tabTitle: 'Sidebar.tsx',
+            },
+            {
+                code: "export const Nav = () => <nav>Nav</nav>;",
+                language: 'tsx',
+                tabTitle: 'Navigation.tsx',
+            },
+            {
+                code: "export const Content = () => <main>Content</main>;",
+                language: 'tsx',
+                tabTitle: 'ContentArea.tsx',
+            },
+        ],
+    },
+};

package/dist/components/Heading.d.ts

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

package/dist/components/Heading.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import slugify from "../utils/slugify";
 export function Heading(_a) {
-    var level = _a.level, children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b;
+    var _b;
+    var level = _a.level, children = _a.children, id = _a.id, _c = _a.className, className = _c === void 0 ? "" : _c;
     var Tag = "h".concat(level);
     var classNames = "dds-heading dds-heading-".concat(level, " ").concat(className).trim();
-    return _jsx(Tag, { className: classNames, children: children });
+    var generatedId = typeof children === "string" ? (_b = slugify({ value: children })) !== null && _b !== void 0 ? _b : undefined : undefined;
+    var idAttr = id !== null && id !== void 0 ? id : generatedId;
+    return (_jsx(Tag, { id: idAttr, className: classNames, children: children }));
 }

package/dist/styles.css

@@ -108,6 +108,7 @@
   /* Callout Colors and Styles */
   --dds-callout-text: #374151; /* gray-700 */
   --dds-callout-padding: 1.25rem; /* p-5 */
+  --dds-callout-margin: 1rem 0;
   --dds-callout-radius: 0.25rem; /* rounded */
   --dds-callout-title-size: 0.75rem; /* text-xs */
   --dds-callout-title-margin-bottom: 0.5rem; /* mb-2 */
@@ -140,20 +141,22 @@
 
   /* CodeBlock */
   --dds-code-block-border: #e5e7eb; /* gray-200 */
-  --dds-code-block-radius: 8px;
-  --dds-code-block-bg: #ffffff;
+  --dds-code-block-radius: 12px;
+  --dds-code-block-bg: #fafafa;
   --dds-code-block-margin: 1rem 0;
-  --dds-code-block-header-bg: #ffffff;
-  --dds-code-block-header-gap: 0.75rem;
-  --dds-code-block-header-padding: 0.75rem 1rem;
-  --dds-code-block-tab-padding: 0.5rem 1rem;
-  --dds-code-block-tab-bg: #f3f4f6; /* gray-100 */
+  --dds-code-block-header-bg: #f5f5f5;
+  --dds-code-block-header-height: 2.25rem;
+  --dds-code-block-header-gap: 0.5rem;
+  --dds-code-block-header-padding: 0 1rem;
+  --dds-code-block-tab-padding: 0 0.75rem;
+  --dds-code-block-tab-bg: transparent;
   --dds-code-block-tab-text: #6b7280; /* gray-500 */
-  --dds-code-block-tab-radius: 6px;
+  --dds-code-block-tab-radius: 0;
   --dds-code-block-tab-text-hover: #374151; /* gray-700 */
-  --dds-code-block-tab-bg-hover: #e5e7eb; /* gray-200 */
+  --dds-code-block-tab-bg-hover: transparent;
   --dds-code-block-tab-text-active: #111827; /* gray-900 */
-  --dds-code-block-tab-bg-active: #ffffff;
+  --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #3b82f6; /* blue-500 */
   --dds-code-block-select-padding: 0.375rem 0.75rem;
   --dds-code-block-select-border: #d1d5db; /* gray-300 */
   --dds-code-block-select-radius: 4px;
@@ -165,17 +168,17 @@
   --dds-code-block-select-focus-ring: rgba(59, 130, 246, 0.1);
   --dds-code-block-label-size: 0.875rem;
   --dds-code-block-label-text: #6b7280; /* gray-500 */
-  --dds-code-block-copy-padding: 0.375rem 0.75rem;
-  --dds-code-block-copy-bg: #ffffff;
-  --dds-code-block-copy-border: #d1d5db; /* gray-300 */
+  --dds-code-block-copy-padding: 0.375rem;
+  --dds-code-block-copy-bg: transparent;
+  --dds-code-block-copy-border: transparent;
   --dds-code-block-copy-radius: 4px;
-  --dds-code-block-copy-text: #374151; /* gray-700 */
+  --dds-code-block-copy-text: #9ca3af; /* gray-400 */
   --dds-code-block-copy-size: 0.875rem;
-  --dds-code-block-copy-bg-hover: #f9fafb; /* gray-50 */
-  --dds-code-block-copy-border-hover: #9ca3af; /* gray-400 */
-  --dds-code-block-copy-bg-active: #f3f4f6; /* gray-100 */
-  --dds-code-block-content-bg: #f9fafb; /* gray-50 */
-  --dds-code-block-pre-padding: 1rem;
+  --dds-code-block-copy-bg-hover: rgba(0, 0, 0, 0.05);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(0, 0, 0, 0.08);
+  --dds-code-block-content-bg: #fafafa;
+  --dds-code-block-pre-padding: 1.25rem;
   --dds-code-block-text: #111827; /* gray-900 */
   --dds-code-block-highlight-bg: rgba(59, 130, 246, 0.2);
   --dds-code-block-highlight-border: #3b82f6; /* blue-500 */
@@ -183,6 +186,8 @@
   --dds-code-block-loading-text: #6b7280; /* gray-500 */
   --dds-code-block-error-text: #dc2626; /* red-600 */
   --dds-code-block-message-size: 0.875rem;
+  --dds-code-block-filename-text: #6b7280; /* gray-500 */
+  --dds-code-block-filename-size: 0.8125rem;
 
   /* Prism Syntax Highlighting */
   --dds-prism-comment: #6b7280; /* gray-500 */
@@ -197,7 +202,8 @@
   /* Collapser Colors and Styles */
   --dds-collapser-radius: 0.375rem; /* rounded-md */
   --dds-collapser-border: #e5e7eb; /* gray-200 */
-  --dds-collapser-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --dds-collapser-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --dds-collapser-button-padding: 0.75rem; /* p-3 */
   --dds-collapser-button-hover-bg: #f9fafb; /* gray-50 */
   --dds-collapser-icon-color: #6b7280; /* gray-500 */
@@ -292,15 +298,16 @@
   --dds-collapser-text: #e5e7eb; /* gray-200 */
 
   /* CodeBlock */
-  --dds-code-block-bg: transparent;
-  --dds-code-block-border: #4b5563; /* gray-600 */
-  --dds-code-block-header-bg: transparent;
-  --dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
+  --dds-code-block-bg: #0a0a0a;
+  --dds-code-block-border: #2e2e2e; /* hsla(0,0%,18%,1) */
+  --dds-code-block-header-bg: #141414;
+  --dds-code-block-tab-bg: transparent;
   --dds-code-block-tab-text: #9ca3af; /* gray-400 */
   --dds-code-block-tab-text-hover: #e5e7eb; /* gray-200 */
-  --dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
+  --dds-code-block-tab-bg-hover: transparent;
   --dds-code-block-tab-text-active: #f9fafb; /* gray-50 */
   --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #60a5fa; /* blue-400 */
   --dds-code-block-select-border: #4b5563; /* gray-600 */
   --dds-code-block-select-bg: transparent;
   --dds-code-block-select-text: #e5e7eb; /* gray-200 */
@@ -309,17 +316,19 @@
   --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
   --dds-code-block-label-text: #9ca3af; /* gray-400 */
   --dds-code-block-copy-bg: transparent;
-  --dds-code-block-copy-border: #4b5563; /* gray-600 */
-  --dds-code-block-copy-text: #e5e7eb; /* gray-200 */
-  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
-  --dds-code-block-copy-border-hover: #6b7280; /* gray-500 */
-  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
-  --dds-code-block-content-bg: transparent;
+  --dds-code-block-copy-border: transparent;
+  --dds-code-block-copy-text: #6b7280; /* gray-500 */
+  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+  --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
   --dds-code-block-text: #e2e8f0; /* slate-200 */
   --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
   --dds-code-block-highlight-border: #60a5fa; /* blue-400 */
   --dds-code-block-loading-text: #9ca3af; /* gray-400 */
   --dds-code-block-error-text: #f87171; /* red-400 */
+  --dds-code-block-filename-text: #9ca3af; /* gray-400 */
+  --dds-code-block-filename-size: 0.8125rem;
 
   /* Prism Syntax - Dark palette */
   --dds-prism-comment: #9ca3af; /* gray-400 */
@@ -414,15 +423,16 @@
     --dds-collapser-text: #e5e7eb;
 
     /* CodeBlock */
-    --dds-code-block-bg: transparent;
-    --dds-code-block-border: #4b5563;
-    --dds-code-block-header-bg: transparent;
-    --dds-code-block-tab-bg: rgba(255, 255, 255, 0.05);
+    --dds-code-block-bg: #0a0a0a;
+    --dds-code-block-border: #262626;
+    --dds-code-block-header-bg: #141414;
+    --dds-code-block-tab-bg: transparent;
     --dds-code-block-tab-text: #9ca3af;
     --dds-code-block-tab-text-hover: #e5e7eb;
-    --dds-code-block-tab-bg-hover: rgba(255, 255, 255, 0.1);
+    --dds-code-block-tab-bg-hover: transparent;
     --dds-code-block-tab-text-active: #f9fafb;
     --dds-code-block-tab-bg-active: transparent;
+    --dds-code-block-tab-border-active: #60a5fa;
     --dds-code-block-select-border: #4b5563;
     --dds-code-block-select-bg: transparent;
     --dds-code-block-select-text: #e5e7eb;
@@ -431,17 +441,19 @@
     --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
     --dds-code-block-label-text: #9ca3af;
     --dds-code-block-copy-bg: transparent;
-    --dds-code-block-copy-border: #4b5563;
-    --dds-code-block-copy-text: #e5e7eb;
-    --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.05);
-    --dds-code-block-copy-border-hover: #6b7280;
-    --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.1);
-    --dds-code-block-content-bg: transparent;
+    --dds-code-block-copy-border: transparent;
+    --dds-code-block-copy-text: #6b7280;
+    --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+    --dds-code-block-copy-border-hover: transparent;
+    --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+    --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
     --dds-code-block-text: #e2e8f0;
     --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
     --dds-code-block-highlight-border: #60a5fa;
     --dds-code-block-loading-text: #9ca3af;
     --dds-code-block-error-text: #f87171;
+    --dds-code-block-filename-text: #9ca3af;
+    --dds-code-block-filename-size: 0.8125rem;
 
     /* Prism Syntax - Dark palette */
     --dds-prism-comment: #9ca3af;
@@ -454,6 +466,130 @@
     --dds-prism-regex: #fb923c;
   }
 }
+/* Explicit dark mode via data attribute (overrides OS preference) */
+[data-dds-theme="dark"] {
+  /* Heading / Typography */
+  --dds-heading-color: #f9fafb;
+  --dds-typography-caption-color: #9ca3af;
+
+  /* Button - Primary */
+  --dds-button-primary-bg: #3b82f6;
+  --dds-button-primary-bg-hover: #2563eb;
+  --dds-button-primary-text: #ffffff;
+  --dds-button-primary-focus-ring: #60a5fa;
+
+  /* Button - Secondary */
+  --dds-button-secondary-bg: transparent;
+  --dds-button-secondary-bg-hover: rgba(255, 255, 255, 0.1);
+  --dds-button-secondary-text: #e5e7eb;
+  --dds-button-secondary-focus-ring: #9ca3af;
+
+  /* Button - Outline */
+  --dds-button-outline-bg: transparent;
+  --dds-button-outline-bg-hover: rgba(255, 255, 255, 0.05);
+  --dds-button-outline-border: #6b7280;
+  --dds-button-outline-text: #e5e7eb;
+  --dds-button-outline-focus-ring: #9ca3af;
+
+  /* Focus Ring */
+  --dds-focus-ring-bg: transparent;
+
+  /* Card */
+  --dds-card-bg-blue: rgba(59, 130, 246, 0.08);
+  --dds-card-bg-green: rgba(34, 197, 94, 0.08);
+  --dds-card-bg-purple: rgba(168, 85, 247, 0.08);
+  --dds-card-bg-red: rgba(239, 68, 68, 0.08);
+  --dds-card-bg-yellow: rgba(234, 179, 8, 0.08);
+  --dds-card-bg-gray: rgba(156, 163, 175, 0.08);
+  --dds-card-bg-white: transparent;
+  --dds-card-border: #4b5563;
+  --dds-card-border-hover: #9ca3af;
+  --dds-card-shadow-hover: none;
+
+  --dds-card-title-blue: #93c5fd;
+  --dds-card-title-green: #86efac;
+  --dds-card-title-purple: #d8b4fe;
+  --dds-card-title-red: #fca5a5;
+  --dds-card-title-yellow: #fde047;
+  --dds-card-title-gray: #e5e7eb;
+
+  --dds-card-text-blue: #bfdbfe;
+  --dds-card-text-green: #bbf7d0;
+  --dds-card-text-purple: #e9d5ff;
+  --dds-card-text-red: #fecaca;
+  --dds-card-text-yellow: #fef08a;
+  --dds-card-text-gray: #d1d5db;
+
+  /* Link */
+  --dds-link-color: #60a5fa;
+  --dds-link-color-hover: #93c5fd;
+  --dds-link-decoration: #3b82f6;
+  --dds-link-decoration-hover: #60a5fa;
+
+  /* Callout */
+  --dds-callout-text: #e5e7eb;
+
+  --dds-callout-caution-bg: transparent;
+  --dds-callout-caution-title: #fca5a5;
+
+  --dds-callout-important-bg: transparent;
+  --dds-callout-important-title: #fcd34d;
+
+  --dds-callout-tip-bg: transparent;
+  --dds-callout-tip-title: #93c5fd;
+
+  --dds-callout-course-bg: transparent;
+  --dds-callout-course-title: #6ee7b7;
+
+  /* Collapser */
+  --dds-collapser-border: #4b5563;
+  --dds-collapser-button-hover-bg: rgba(255, 255, 255, 0.05);
+  --dds-collapser-icon-color: #9ca3af;
+  --dds-collapser-text: #e5e7eb;
+
+  /* CodeBlock */
+  --dds-code-block-bg: #0a0a0a;
+  --dds-code-block-border: #2e2e2e; /* hsla(0,0%,18%,1) */
+  --dds-code-block-header-bg: #141414;
+  --dds-code-block-tab-bg: transparent;
+  --dds-code-block-tab-text: #9ca3af;
+  --dds-code-block-tab-text-hover: #e5e7eb;
+  --dds-code-block-tab-bg-hover: transparent;
+  --dds-code-block-tab-text-active: #f9fafb;
+  --dds-code-block-tab-bg-active: transparent;
+  --dds-code-block-tab-border-active: #60a5fa;
+  --dds-code-block-select-border: #4b5563;
+  --dds-code-block-select-bg: transparent;
+  --dds-code-block-select-text: #e5e7eb;
+  --dds-code-block-select-border-hover: #6b7280;
+  --dds-code-block-select-border-focus: #60a5fa;
+  --dds-code-block-select-focus-ring: rgba(96, 165, 250, 0.2);
+  --dds-code-block-label-text: #9ca3af;
+  --dds-code-block-copy-bg: transparent;
+  --dds-code-block-copy-border: transparent;
+  --dds-code-block-copy-text: #6b7280;
+  --dds-code-block-copy-bg-hover: rgba(255, 255, 255, 0.08);
+  --dds-code-block-copy-border-hover: transparent;
+  --dds-code-block-copy-bg-active: rgba(255, 255, 255, 0.12);
+  --dds-code-block-content-bg: #0a0a0a; /* hsla(0,0%,4%,1) */
+  --dds-code-block-text: #e2e8f0;
+  --dds-code-block-highlight-bg: rgba(96, 165, 250, 0.15);
+  --dds-code-block-highlight-border: #60a5fa;
+  --dds-code-block-loading-text: #9ca3af;
+  --dds-code-block-error-text: #f87171;
+  --dds-code-block-filename-text: #9ca3af;
+  --dds-code-block-filename-size: 0.8125rem;
+
+  /* Prism Syntax - Dark palette */
+  --dds-prism-comment: #9ca3af;
+  --dds-prism-punctuation: #d1d5db;
+  --dds-prism-property: #f87171;
+  --dds-prism-string: #34d399;
+  --dds-prism-operator: #fbbf24;
+  --dds-prism-keyword: #60a5fa;
+  --dds-prism-function: #a78bfa;
+  --dds-prism-regex: #fb923c;
+}
 /* Import PrismJS theme */
 /**
  * prism.js default theme for JavaScript, CSS and HTML
@@ -658,6 +794,7 @@ pre[class*="language-"] {
 }
 .dds-callout {
   padding: var(--dds-callout-padding);
+  margin: var(--dds-callout-margin);
   border-radius: var(--dds-callout-radius);
   border: 1px solid;
   border-left-width: 6px;
@@ -885,18 +1022,19 @@ a.no-text-decoration {
 .dds-code-block-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  align-items: center;
   padding: 0;
   background-color: var(--dds-code-block-header-bg);
   border-bottom: 1px solid var(--dds-code-block-border);
-  min-height: 2.75rem;
+  height: var(--dds-code-block-header-height);
   overflow: hidden;
 }
 .dds-code-block-header-left {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   flex: 1;
   min-width: 0;
+  height: 100%;
 }
 .dds-code-block-header-right {
   display: flex;
@@ -912,7 +1050,8 @@ a.no-text-decoration {
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
-  align-items: flex-end;
+  align-items: center;
+  height: 100%;
   /* Hide scrollbar but keep functionality */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
@@ -923,18 +1062,18 @@ a.no-text-decoration {
 .dds-code-block-tab {
   padding: var(--dds-code-block-tab-padding);
   background-color: var(--dds-code-block-tab-bg);
-  border: 1px solid var(--dds-code-block-border);
-  border-bottom: none;
-  border-top-left-radius: var(--dds-code-block-tab-radius);
-  border-top-right-radius: var(--dds-code-block-tab-radius);
+  border: none;
+  border-bottom: 2px solid transparent;
   color: var(--dds-code-block-tab-text);
-  font-size: var(--dds-code-block-tab-size, 0.875rem);
+  font-size: 0.8125rem;
   font-weight: var(--dds-font-medium);
   cursor: pointer;
   white-space: nowrap;
   transition: var(--dds-transition-colors);
-  margin-right: 2px;
   position: relative;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 .dds-code-block-tab:hover {
   color: var(--dds-code-block-tab-text-hover);
@@ -943,11 +1082,18 @@ a.no-text-decoration {
 .dds-code-block-tab-active {
   color: var(--dds-code-block-tab-text-active);
   background-color: var(--dds-code-block-tab-bg-active);
-  border-color: var(--dds-code-block-border);
+  border-bottom-color: var(--dds-code-block-tab-border-active);
 }
 .dds-code-block-tab-active:hover {
   background-color: var(--dds-code-block-tab-bg-active);
 }
+.dds-code-block-filename {
+  font-size: var(--dds-code-block-filename-size);
+  color: var(--dds-code-block-filename-text);
+  font-weight: var(--dds-font-medium);
+  padding: var(--dds-code-block-header-padding);
+  white-space: nowrap;
+}
 .dds-code-block-language-select {
   padding: var(--dds-code-block-select-padding);
   border: 1px solid var(--dds-code-block-select-border);
@@ -976,18 +1122,20 @@ a.no-text-decoration {
 .dds-code-block-copy-button {
   padding: var(--dds-code-block-copy-padding);
   background-color: var(--dds-code-block-copy-bg);
-  border: 1px solid var(--dds-code-block-copy-border);
+  border: none;
   border-radius: var(--dds-code-block-copy-radius);
   color: var(--dds-code-block-copy-text);
-  font-size: var(--dds-code-block-copy-size);
-  font-weight: var(--dds-font-medium);
   cursor: pointer;
   transition: var(--dds-transition-colors);
   white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
 }
 .dds-code-block-copy-button:hover {
   background-color: var(--dds-code-block-copy-bg-hover);
-  border-color: var(--dds-code-block-copy-border-hover);
 }
 .dds-code-block-copy-button:active {
   background-color: var(--dds-code-block-copy-bg-active);
@@ -1034,11 +1182,13 @@ a.no-text-decoration {
 }
 .dds-code-block-line-highlights {
   position: absolute;
-  top: 0;
+  top: var(--dds-code-block-pre-padding);
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
+  font-size: var(--dds-code-block-font-size, 0.875rem);
+  line-height: var(--dds-code-block-line-height, 1.5);
 }
 .dds-code-block-line-highlight {
   position: absolute;

package/dist/utils/slugify.d.ts

@@ -0,0 +1,7 @@
+import { Options as SlugOptions } from "slug";
+interface SlugifyProps {
+    value: string;
+    options?: SlugOptions | string;
+}
+export default function slugify({ value, options }: SlugifyProps): string | null;
+export {};

package/dist/utils/slugify.js

@@ -0,0 +1,20 @@
+import slug from "slug";
+slug.extend({
+    "/": "-",
+    "\\": "-",
+    _: "-",
+    "-": "-",
+    "&": "and",
+});
+export default function slugify(_a) {
+    var value = _a.value, options = _a.options;
+    if (!value || value.match(/^\s+$/))
+        return null;
+    var slugified = typeof options === "string" ? slug(value, options) : slug(value, options);
+    // remove repetitive dashes
+    var repetitiveRemoved = slugified.replace(/-{2,}/g, "-");
+    // strip leading and trailing dashes
+    var dashesTrimmed = repetitiveRemoved.replace(/^-+/, "").replace(/-+$/, "");
+    // return null when empty
+    return dashesTrimmed || null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadlittledawn/docs-design-system-react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "description": "React components for documentation design system",
   "repository": {
@@ -25,11 +25,13 @@
   "dependencies": {
     "prismjs": "^1.29.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "slug": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "@types/slug": "^5.0.9",
     "postcss": "^8.4.0",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",