@dreamlake/dockit 0.2.19 → 0.2.21

package/dist/components/CodeBlock.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
+import { CodeTabsContext } from "./code-tabs-context.js";
 import { useLineNumbers } from "../lib/use-line-numbers.js";
 const headerBtnStyle = (active) => ({
   display: "inline-flex",
@@ -19,6 +20,7 @@ const headerBtnStyle = (active) => ({
   transition: "color 0.12s ease, border-color 0.12s ease"
 });
 function CodeBlock({ children, filename, lang }) {
+  const embedded = useContext(CodeTabsContext);
   const wrapRef = useRef(null);
   const [copied, setCopied] = useState(false);
   const [showLines, setShowLines] = useLineNumbers();
@@ -39,11 +41,11 @@ function CodeBlock({ children, filename, lang }) {
     {
       ref: wrapRef,
       "data-line-numbers": showLines ? "on" : "off",
-      className: "group relative border border-doc-template-faint bg-doc-template-code",
+      className: embedded ? void 0 : "group relative border border-doc-template-faint bg-doc-template-code",
       style: {
-        margin: "18px 0 22px",
-        borderRadius: "var(--radius-doc-template)",
-        overflow: "hidden"
+        margin: embedded ? 0 : "18px 0 22px",
+        borderRadius: embedded ? 0 : "var(--radius-doc-template)",
+        overflow: embedded ? "visible" : "hidden"
       },
       children: [
         filename && /* @__PURE__ */ jsxs(
@@ -97,8 +99,25 @@ function CodeBlock({ children, filename, lang }) {
           "div",
           {
             className: "absolute top-0 right-0 z-10 flex items-center opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150",
-            style: { gap: 6, padding: "8px 8px" },
+            style: { gap: 6, padding: "8px 8px", isolation: "isolate" },
             children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    inset: 4,
+                    zIndex: -1,
+                    pointerEvents: "none",
+                    borderRadius: 6,
+                    background: "color-mix(in srgb, var(--color-doc-template-code) 88%, transparent)",
+                    boxShadow: "0 0 10px 6px var(--color-doc-template-code)",
+                    backdropFilter: "blur(8px)",
+                    WebkitBackdropFilter: "blur(8px)"
+                  }
+                }
+              ),
               lang && /* @__PURE__ */ jsx(
                 "span",
                 {

package/dist/components/CodeTabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface CodeExampleProps {
+    label: string;
+    children: ReactNode;
+}
+/** Keep ordinary fenced MDX as children so generated Markdown retains each example. */
+export declare function CodeExample({ children }: CodeExampleProps): import("react").JSX.Element;
+export interface CodeTabsProps {
+    children: ReactNode;
+    'aria-label'?: string;
+}
+/** Equivalent fenced examples in one frame; arrow keys activate and focus tabs. */
+export declare function CodeTabs({ children, 'aria-label': label }: CodeTabsProps): import("react").JSX.Element | null;

package/dist/components/CodeTabs.js

@@ -0,0 +1,60 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useState, useId, useRef } from "react";
+import { CodeTabsContext } from "./code-tabs-context.js";
+function CodeExample({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CodeTabs({ children, "aria-label": label = "Code examples" }) {
+  const examples = Children.toArray(children).filter(isValidElement);
+  const [selected, setSelected] = useState(0);
+  const active = Math.min(selected, Math.max(0, examples.length - 1));
+  const id = useId();
+  const buttons = useRef([]);
+  if (!examples.length) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-code-tabs": true, className: "dockit-code-tabs group relative border border-doc-template-faint bg-doc-template-code", children: [
+    /* @__PURE__ */ jsx("div", { className: "dockit-code-tabs-header", children: /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, className: "dockit-code-tabs-list", children: examples.map((example, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        ref: (element) => {
+          buttons.current[index] = element;
+        },
+        id: `${id}-tab-${index}`,
+        "aria-controls": `${id}-panel-${index}`,
+        "aria-selected": active === index,
+        tabIndex: active === index ? 0 : -1,
+        onClick: () => setSelected(index),
+        onKeyDown: (event) => {
+          let next;
+          if (event.key === "ArrowRight") next = (index + 1) % examples.length;
+          else if (event.key === "ArrowLeft") next = (index - 1 + examples.length) % examples.length;
+          else if (event.key === "Home") next = 0;
+          else if (event.key === "End") next = examples.length - 1;
+          else return;
+          event.preventDefault();
+          setSelected(next);
+          buttons.current[next]?.focus();
+        },
+        children: example.props.label
+      },
+      example.key ?? index
+    )) }) }),
+    /* @__PURE__ */ jsx(CodeTabsContext.Provider, { value: true, children: examples.map((example, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${id}-panel-${index}`,
+        "aria-labelledby": `${id}-tab-${index}`,
+        hidden: active !== index,
+        tabIndex: 0,
+        children: example.props.children
+      },
+      example.key ?? index
+    )) })
+  ] });
+}
+export {
+  CodeExample,
+  CodeTabs
+};

package/dist/components/code-tabs-context.d.ts

@@ -0,0 +1,2 @@
+/** Internal: a fenced block shares the surrounding tabs' frame and toolbar. */
+export declare const CodeTabsContext: import('react').Context<boolean>;

package/dist/components/code-tabs-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const CodeTabsContext = createContext(false);
+export {
+  CodeTabsContext
+};

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export { Callout } from './components/Callout';
 export { Chip, type ChipProps, type ChipVariant } from './components/Chip';
 export { ClientOnly } from './components/ClientOnly';
 export { CodeBlock } from './components/CodeBlock';
+export { CodeTabs, CodeExample, type CodeTabsProps, type CodeExampleProps } from './components/CodeTabs';
 export { DocFooter } from './components/DocFooter';
 export { mdxComponents } from './components/mdx-components';
 export { Preview, type PreviewProps } from './components/Preview';

package/dist/index.js

@@ -15,6 +15,7 @@ import { Callout } from "./components/Callout.js";
 import { Chip } from "./components/Chip.js";
 import { ClientOnly } from "./components/ClientOnly.js";
 import { CodeBlock } from "./components/CodeBlock.js";
+import { CodeExample, CodeTabs } from "./components/CodeTabs.js";
 import { DocFooter } from "./components/DocFooter.js";
 import { mdxComponents } from "./components/mdx-components.js";
 import { Preview } from "./components/Preview.js";
@@ -45,6 +46,8 @@ export {
   Chip,
   ClientOnly,
   CodeBlock,
+  CodeExample,
+  CodeTabs,
   DOC_PREFIX,
   DocFooter,
   Layout,

package/dist/styles.css

@@ -378,3 +378,39 @@
 .doc-sidebar::-webkit-scrollbar-thumb { background: var(--color-doc-template-faint-strong); border-radius: 3px; }
 .doc-sidebar .sidebar-section > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .doc-sidebar .sidebar-section > span:last-child { flex-shrink: 0; white-space: nowrap; }
+
+/* One frame and toolbar for ordinary MDX fenced examples. Inactive panels keep
+   their code/control state but are absent from keyboard and accessibility flow. */
+.dockit-code-tabs {
+  margin: 18px 0 22px;
+  border-radius: var(--radius-doc-template);
+  overflow: hidden;
+}
+.dockit-code-tabs-header {
+  border-bottom: 1px solid var(--color-doc-template-faint);
+  background: color-mix(in srgb, var(--color-doc-template-ink) 3%, transparent);
+  min-height: 40px;
+  padding-right: 156px;
+}
+.dockit-code-tabs-list { display: flex; overflow-x: auto; }
+.dockit-code-tabs-list [role='tab'] {
+  flex-shrink: 0;
+  padding: 10px 14px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--color-doc-template-muted);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.dockit-code-tabs-list [role='tab'][aria-selected='true'] {
+  color: var(--color-doc-template-ink);
+  border-bottom-color: var(--color-doc-template-accent);
+}
+.dockit-code-tabs-list [role='tab']:focus-visible,
+.dockit-code-tabs [role='tabpanel']:focus-visible {
+  outline: 2px solid var(--color-doc-template-accent);
+  outline-offset: -3px;
+}
+.dockit-code-tabs [role='tabpanel'][hidden] { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",