@docubook/mdx 1.0.0 → 1.2.0

package/README.md

@@ -2,6 +2,32 @@
 
 Framework-agnostic MDX components for React with adapter entrypoints.
 
+## Install
+
+Install from npm registry:
+
+```bash
+npm install @docubook/mdx
+```
+
+```bash
+pnpm add @docubook/mdx
+```
+
+```bash
+yarn add @docubook/mdx
+```
+
+```bash
+bun add @docubook/mdx
+```
+
+If you are using a pnpm workspace/monorepo and want to add it to a specific app package, run the command from that app directory, or use filter:
+
+```bash
+pnpm --filter <your-app-package-name> add @docubook/mdx
+```
+
 ## Entrypoints
 
 - `@docubook/mdx`: server-safe convenience export (alias to subset `core/server`).

package/dist/{Stepper-B7xt0Dyr.d.cts → Stepper-I9nywkZb.d.cts}

@@ -45,7 +45,7 @@ interface ChangesProps extends PropsWithChildren {
 }
 declare function Changes({ type, children }: ChangesProps): react_jsx_runtime.JSX.Element;
 
-declare function Stepper({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;
+declare function Stepper({ children, }: PropsWithChildren): react_jsx_runtime.JSX.Element;
 declare function StepperItem({ children, title, }: PropsWithChildren & {
     title?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/{Stepper-B7xt0Dyr.d.ts → Stepper-I9nywkZb.d.ts}

@@ -45,7 +45,7 @@ interface ChangesProps extends PropsWithChildren {
 }
 declare function Changes({ type, children }: ChangesProps): react_jsx_runtime.JSX.Element;
 
-declare function Stepper({ children }: PropsWithChildren): react_jsx_runtime.JSX.Element;
+declare function Stepper({ children, }: PropsWithChildren): react_jsx_runtime.JSX.Element;
 declare function StepperItem({ children, title, }: PropsWithChildren & {
     title?: string;
 }): react_jsx_runtime.JSX.Element;

package/dist/core/index.cjs

@@ -86,6 +86,9 @@ function AccordionGroupProvider({ children }) {
 // src/core/components/Accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Accordion({ title, children, icon }) {
+  const baseId = (0, import_react2.useId)();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
   const groupContext = (0, import_react2.useContext)(AccordionGroupContext);
   const isInGroup = groupContext?.inGroup === true;
   const groupOpen = groupContext?.openTitle === title;
@@ -114,6 +117,9 @@ function Accordion({ title, children, icon }) {
             type: "button",
             onClick: handleToggle,
             className: "bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start transition-colors",
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            id: triggerId,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_lucide_react.ChevronRight,
@@ -136,6 +142,9 @@ function Accordion({ title, children, icon }) {
               "grid transition-[grid-template-rows] duration-200 ease-out",
               isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
             children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "dark:bg-muted/10 bg-muted/15 px-4 py-3", children }) })
           }
         )
@@ -264,17 +273,18 @@ function CardGroup({ children, cols = 2, className }) {
 var import_react4 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function FileComponent({ name }) {
+function FileComponent({
+  name
+}) {
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
   const fileExtension = name.split(".").pop()?.toUpperCase();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
-      className: `
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
-        transition-colors duration-150 cursor-default select-none
-        ${isHovered ? "bg-accent/10" : "hover:bg-muted/50"}
-      `,
+      className: cn(
+        "flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md transition-colors duration-150 cursor-default select-none",
+        isHovered ? "bg-accent/10" : "hover:bg-muted/50"
+      ),
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       tabIndex: -1,
@@ -282,10 +292,10 @@ function FileComponent({ name }) {
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           import_lucide_react2.File,
           {
-            className: `
-          h-3.5 w-3.5 shrink-0 transition-colors
-          ${isHovered ? "text-accent" : "text-muted-foreground"}
-        `
+            className: cn(
+              "h-3.5 w-3.5 shrink-0 transition-colors",
+              isHovered ? "text-accent" : "text-muted-foreground"
+            )
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-mono text-sm text-foreground truncate", children: name }),
@@ -294,7 +304,10 @@ function FileComponent({ name }) {
     }
   );
 }
-function FolderComponent({ name, children }) {
+function FolderComponent({
+  name,
+  children
+}) {
   const [isOpen, setIsOpen] = (0, import_react4.useState)(true);
   const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
   const hasChildren = import_react4.Children.count(children) > 0;
@@ -302,57 +315,61 @@ function FolderComponent({ name, children }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
-        className: `
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
-          transition-colors duration-150 select-none
-          ${isHovered ? "bg-muted/60" : ""}
-          ${isOpen ? "text-foreground" : "text-foreground/80"}
-          ${hasChildren ? "cursor-pointer" : "cursor-default"}
-        `,
+        className: cn(
+          "flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md transition-colors duration-150 select-none",
+          isHovered ? "bg-muted/60" : "",
+          isOpen ? "text-foreground" : "text-foreground/80",
+          hasChildren ? "cursor-pointer" : "cursor-default"
+        ),
         onClick: () => hasChildren && setIsOpen(!isOpen),
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         tabIndex: -1,
+        onKeyDown: (event) => event.preventDefault(),
+        "aria-expanded": hasChildren ? isOpen : void 0,
         children: [
           hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_lucide_react2.ChevronRight,
             {
-              className: `
-              h-3.5 w-3.5 shrink-0 transition-transform duration-200
-              ${isOpen ? "rotate-90" : ""}
-              ${isHovered ? "text-foreground/70" : "text-muted-foreground"}
-            `
+              className: cn(
+                "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                isOpen ? "rotate-90" : "",
+                isHovered ? "text-foreground/70" : "text-muted-foreground"
+              )
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-3.5" }),
           isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_lucide_react2.FolderOpen,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent" : "text-muted-foreground"}
-            `
+              className: cn(
+                "h-4 w-4 shrink-0 transition-colors",
+                isHovered ? "text-accent" : "text-muted-foreground"
+              )
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_lucide_react2.Folder,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent/80" : "text-muted-foreground/80"}
-            `
+              className: cn(
+                "h-4 w-4 shrink-0 transition-colors",
+                isHovered ? "text-accent/80" : "text-muted-foreground/80"
+              )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `font-medium transition-colors duration-150 ${isHovered ? "text-accent" : ""}`, children: name })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("font-medium transition-colors duration-150", isHovered ? "text-accent" : ""), children: name })
         ]
       }
     ),
     isOpen && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-5 border-l-2 border-muted/50 pl-2", children })
   ] });
 }
-function Files({ children }) {
+function Files({
+  children
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
-      className: "\n        rounded-xl border border-muted/20\n        bg-card/20 backdrop-blur-sm\n        shadow-sm overflow-hidden\n        transition-all duration-200\n        hover:shadow-md hover:border-muted/60\n      ",
+      className: "rounded-xl border border-muted/20 bg-card/20 backdrop-blur-sm shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md hover:border-muted/60",
+      onKeyDown: (event) => event.preventDefault(),
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-2", children: import_react4.Children.map(children, (child, index) => {
         if ((0, import_react4.isValidElement)(child)) {
           return (0, import_react4.cloneElement)(child, { key: index });
@@ -362,7 +379,10 @@ function Files({ children }) {
     }
   );
 }
-function Folder({ name, children }) {
+function Folder({
+  name,
+  children
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FolderComponent, { name, children });
 }
 function File({ name }) {
@@ -599,6 +619,12 @@ var iconMap = {
   warning: import_lucide_react4.AlertTriangle,
   success: import_lucide_react4.CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -608,10 +634,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || import_lucide_react4.Info;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "pl-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -623,11 +649,15 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 function Copy({ content }) {
   const [isCopied, setIsCopied] = (0, import_react6.useState)(false);
   async function handleCopy() {
-    await navigator.clipboard.writeText(content);
-    setIsCopied(true);
-    setTimeout(() => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    } catch {
       setIsCopied(false);
-    }, 2e3);
+    }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "button",
@@ -791,7 +821,9 @@ function Changes({ type, children }) {
 var import_clsx5 = __toESM(require("clsx"), 1);
 var import_react8 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = import_react8.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-col", children: import_react8.Children.map(children, (child, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
@@ -804,7 +836,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }
@@ -833,8 +865,14 @@ var Tooltip = ({ text, tip }) => {
       onMouseEnter: () => setVisible(true),
       onMouseLeave: () => setVisible(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "border-b border-dashed border-primary/60 pb-0.5", children: text }),
-        visible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            className: "border-b border-dashed border-primary/60 pb-0.5",
+            children: text
+          }
+        ),
+        visible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50", role: "tooltip", children: [
           tip,
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" })
         ] })

package/dist/core/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC, ReactNode, ComponentProps } from 'react';
-import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-B7xt0Dyr.cjs';
-export { c as Youtube } from '../Stepper-B7xt0Dyr.cjs';
+import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-I9nywkZb.cjs';
+export { c as Youtube } from '../Stepper-I9nywkZb.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as Icons from 'lucide-react';
 import { B as Button, C as Card } from '../Card-L5O7G4xG.cjs';
@@ -33,10 +33,10 @@ interface FileProps {
     name: string;
     children?: ReactNode;
 }
-declare function Files({ children }: {
+declare function Files({ children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function Folder({ name, children }: FileProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ name, children, }: FileProps): react_jsx_runtime.JSX.Element;
 declare function File({ name }: FileProps): react_jsx_runtime.JSX.Element;
 
 type PreProps = ComponentProps<"pre"> & {

package/dist/core/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FC, ReactNode, ComponentProps } from 'react';
-import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-B7xt0Dyr.js';
-export { c as Youtube } from '../Stepper-B7xt0Dyr.js';
+import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-I9nywkZb.js';
+export { c as Youtube } from '../Stepper-I9nywkZb.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as Icons from 'lucide-react';
 import { B as Button, C as Card } from '../Card-L5O7G4xG.js';
@@ -33,10 +33,10 @@ interface FileProps {
     name: string;
     children?: ReactNode;
 }
-declare function Files({ children }: {
+declare function Files({ children, }: {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function Folder({ name, children }: FileProps): react_jsx_runtime.JSX.Element;
+declare function Folder({ name, children, }: FileProps): react_jsx_runtime.JSX.Element;
 declare function File({ name }: FileProps): react_jsx_runtime.JSX.Element;
 
 type PreProps = ComponentProps<"pre"> & {

package/dist/core/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/core/components/Accordion.tsx
-import { useContext, useState as useState2 } from "react";
+import { useContext, useId as useId2, useState as useState2 } from "react";
 import { ChevronRight } from "lucide-react";
 import * as Icons from "lucide-react";
 
@@ -31,6 +31,9 @@ function AccordionGroupProvider({ children }) {
 // src/core/components/Accordion.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Accordion({ title, children, icon }) {
+  const baseId = useId2();
+  const triggerId = `${baseId}-trigger`;
+  const contentId = `${baseId}-content`;
   const groupContext = useContext(AccordionGroupContext);
   const isInGroup = groupContext?.inGroup === true;
   const groupOpen = groupContext?.openTitle === title;
@@ -59,6 +62,9 @@ function Accordion({ title, children, icon }) {
             type: "button",
             onClick: handleToggle,
             className: "bg-muted/40 dark:bg-muted/20 hover:bg-muted/70 dark:hover:bg-muted/70 flex w-full cursor-pointer items-center gap-2 px-4 py-3 text-start transition-colors",
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            id: triggerId,
             children: [
               /* @__PURE__ */ jsx2(
                 ChevronRight,
@@ -81,6 +87,9 @@ function Accordion({ title, children, icon }) {
               "grid transition-[grid-template-rows] duration-200 ease-out",
               isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
             ),
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
             children: /* @__PURE__ */ jsx2("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx2("div", { className: "dark:bg-muted/10 bg-muted/15 px-4 py-3", children }) })
           }
         )
@@ -219,17 +228,18 @@ import {
   FolderOpen
 } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-function FileComponent({ name }) {
+function FileComponent({
+  name
+}) {
   const [isHovered, setIsHovered] = useState3(false);
   const fileExtension = name.split(".").pop()?.toUpperCase();
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `
-        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
-        transition-colors duration-150 cursor-default select-none
-        ${isHovered ? "bg-accent/10" : "hover:bg-muted/50"}
-      `,
+      className: cn(
+        "flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md transition-colors duration-150 cursor-default select-none",
+        isHovered ? "bg-accent/10" : "hover:bg-muted/50"
+      ),
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       tabIndex: -1,
@@ -237,10 +247,10 @@ function FileComponent({ name }) {
         /* @__PURE__ */ jsx7(
           FileIcon,
           {
-            className: `
-          h-3.5 w-3.5 shrink-0 transition-colors
-          ${isHovered ? "text-accent" : "text-muted-foreground"}
-        `
+            className: cn(
+              "h-3.5 w-3.5 shrink-0 transition-colors",
+              isHovered ? "text-accent" : "text-muted-foreground"
+            )
           }
         ),
         /* @__PURE__ */ jsx7("span", { className: "font-mono text-sm text-foreground truncate", children: name }),
@@ -249,7 +259,10 @@ function FileComponent({ name }) {
     }
   );
 }
-function FolderComponent({ name, children }) {
+function FolderComponent({
+  name,
+  children
+}) {
   const [isOpen, setIsOpen] = useState3(true);
   const [isHovered, setIsHovered] = useState3(false);
   const hasChildren = Children.count(children) > 0;
@@ -257,57 +270,61 @@ function FolderComponent({ name, children }) {
     /* @__PURE__ */ jsxs4(
       "div",
       {
-        className: `
-          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md
-          transition-colors duration-150 select-none
-          ${isHovered ? "bg-muted/60" : ""}
-          ${isOpen ? "text-foreground" : "text-foreground/80"}
-          ${hasChildren ? "cursor-pointer" : "cursor-default"}
-        `,
+        className: cn(
+          "flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md transition-colors duration-150 select-none",
+          isHovered ? "bg-muted/60" : "",
+          isOpen ? "text-foreground" : "text-foreground/80",
+          hasChildren ? "cursor-pointer" : "cursor-default"
+        ),
         onClick: () => hasChildren && setIsOpen(!isOpen),
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         tabIndex: -1,
+        onKeyDown: (event) => event.preventDefault(),
+        "aria-expanded": hasChildren ? isOpen : void 0,
         children: [
           hasChildren ? /* @__PURE__ */ jsx7(
             ChevronRight2,
             {
-              className: `
-              h-3.5 w-3.5 shrink-0 transition-transform duration-200
-              ${isOpen ? "rotate-90" : ""}
-              ${isHovered ? "text-foreground/70" : "text-muted-foreground"}
-            `
+              className: cn(
+                "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                isOpen ? "rotate-90" : "",
+                isHovered ? "text-foreground/70" : "text-muted-foreground"
+              )
             }
           ) : /* @__PURE__ */ jsx7("div", { className: "w-3.5" }),
           isOpen ? /* @__PURE__ */ jsx7(
             FolderOpen,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent" : "text-muted-foreground"}
-            `
+              className: cn(
+                "h-4 w-4 shrink-0 transition-colors",
+                isHovered ? "text-accent" : "text-muted-foreground"
+              )
             }
           ) : /* @__PURE__ */ jsx7(
             FolderIcon,
             {
-              className: `
-              h-4 w-4 shrink-0 transition-colors
-              ${isHovered ? "text-accent/80" : "text-muted-foreground/80"}
-            `
+              className: cn(
+                "h-4 w-4 shrink-0 transition-colors",
+                isHovered ? "text-accent/80" : "text-muted-foreground/80"
+              )
             }
           ),
-          /* @__PURE__ */ jsx7("span", { className: `font-medium transition-colors duration-150 ${isHovered ? "text-accent" : ""}`, children: name })
+          /* @__PURE__ */ jsx7("span", { className: cn("font-medium transition-colors duration-150", isHovered ? "text-accent" : ""), children: name })
         ]
       }
     ),
     isOpen && hasChildren && /* @__PURE__ */ jsx7("div", { className: "ml-5 border-l-2 border-muted/50 pl-2", children })
   ] });
 }
-function Files({ children }) {
+function Files({
+  children
+}) {
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: "\n        rounded-xl border border-muted/20\n        bg-card/20 backdrop-blur-sm\n        shadow-sm overflow-hidden\n        transition-all duration-200\n        hover:shadow-md hover:border-muted/60\n      ",
+      className: "rounded-xl border border-muted/20 bg-card/20 backdrop-blur-sm shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md hover:border-muted/60",
+      onKeyDown: (event) => event.preventDefault(),
       children: /* @__PURE__ */ jsx7("div", { className: "p-2", children: Children.map(children, (child, index) => {
         if (isValidElement(child)) {
           return cloneElement(child, { key: index });
@@ -317,7 +334,10 @@ function Files({ children }) {
     }
   );
 }
-function Folder({ name, children }) {
+function Folder({
+  name,
+  children
+}) {
   return /* @__PURE__ */ jsx7(FolderComponent, { name, children });
 }
 function File({ name }) {
@@ -559,6 +579,12 @@ var iconMap = {
   warning: AlertTriangle,
   success: CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -568,10 +594,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || Info;
   return /* @__PURE__ */ jsxs6("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ jsx11(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ jsxs6("div", { className: "pl-8", children: [
-      /* @__PURE__ */ jsx11("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ jsx11("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ jsx11(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ jsxs6("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ jsx11("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ jsx11("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -583,11 +609,15 @@ import { jsx as jsx12 } from "react/jsx-runtime";
 function Copy({ content }) {
   const [isCopied, setIsCopied] = useState5(false);
   async function handleCopy() {
-    await navigator.clipboard.writeText(content);
-    setIsCopied(true);
-    setTimeout(() => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 2e3);
+    } catch {
       setIsCopied(false);
-    }, 2e3);
+    }
   }
   return /* @__PURE__ */ jsx12(
     "button",
@@ -779,7 +809,9 @@ function Changes({ type, children }) {
 import clsx5 from "clsx";
 import { Children as Children3 } from "react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = Children3.count(children);
   return /* @__PURE__ */ jsx15("div", { className: "flex flex-col", children: Children3.map(children, (child, index) => {
     return /* @__PURE__ */ jsxs9(
@@ -792,7 +824,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ jsx15("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ jsx15("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }
@@ -821,8 +853,14 @@ var Tooltip = ({ text, tip }) => {
       onMouseEnter: () => setVisible(true),
       onMouseLeave: () => setVisible(false),
       children: [
-        /* @__PURE__ */ jsx16("span", { className: "border-b border-dashed border-primary/60 pb-0.5", children: text }),
-        visible && /* @__PURE__ */ jsxs10("span", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50", children: [
+        /* @__PURE__ */ jsx16(
+          "span",
+          {
+            className: "border-b border-dashed border-primary/60 pb-0.5",
+            children: text
+          }
+        ),
+        visible && /* @__PURE__ */ jsxs10("span", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-64 bg-popover text-popover-foreground text-sm p-3 rounded-md shadow-lg border border-border/50 wrap-break-word text-left z-50", role: "tooltip", children: [
           tip,
           /* @__PURE__ */ jsx16("span", { className: "absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-popover rotate-45 border-b border-r border-border/50 -z-10" })
         ] })

package/dist/core/server.cjs

@@ -284,6 +284,12 @@ var iconMap = {
   warning: import_lucide_react.AlertTriangle,
   success: import_lucide_react.CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -293,10 +299,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || import_lucide_react.Info;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pl-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -386,7 +392,9 @@ function Changes({ type, children }) {
 var import_clsx4 = __toESM(require("clsx"), 1);
 var import_react3 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = import_react3.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col", children: import_react3.Children.map(children, (child, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -399,7 +407,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }

package/dist/core/server.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-B7xt0Dyr.cjs';
-export { c as Youtube } from '../Stepper-B7xt0Dyr.cjs';
+import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-I9nywkZb.cjs';
+export { c as Youtube } from '../Stepper-I9nywkZb.cjs';
 import { B as Button, C as Card } from '../Card-L5O7G4xG.cjs';
 export { L as LinkLikeProps, a as LinkRenderer } from '../Card-L5O7G4xG.cjs';
 import 'react/jsx-runtime';

package/dist/core/server.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-B7xt0Dyr.js';
-export { c as Youtube } from '../Stepper-B7xt0Dyr.js';
+import { C as CardGroup, K as Kbd, N as Note, S as Stepper, a as StepperItem, Y as YoutubeProps, R as Release, b as Changes, L as Link } from '../Stepper-I9nywkZb.js';
+export { c as Youtube } from '../Stepper-I9nywkZb.js';
 import { B as Button, C as Card } from '../Card-L5O7G4xG.js';
 export { L as LinkLikeProps, a as LinkRenderer } from '../Card-L5O7G4xG.js';
 import 'react/jsx-runtime';

package/dist/core/server.js

@@ -242,6 +242,12 @@ var iconMap = {
   warning: AlertTriangle,
   success: CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -251,10 +257,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || Info;
   return /* @__PURE__ */ jsxs3("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ jsx6(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ jsxs3("div", { className: "pl-8", children: [
-      /* @__PURE__ */ jsx6("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ jsx6("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ jsx6(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ jsxs3("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ jsx6("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ jsx6("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -350,7 +356,9 @@ function Changes({ type, children }) {
 import clsx4 from "clsx";
 import { Children as Children2 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = Children2.count(children);
   return /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: Children2.map(children, (child, index) => {
     return /* @__PURE__ */ jsxs5(
@@ -363,7 +371,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ jsx8("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ jsx8("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }

package/dist/index.cjs

@@ -284,6 +284,12 @@ var iconMap = {
   warning: import_lucide_react.AlertTriangle,
   success: import_lucide_react.CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -293,10 +299,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || import_lucide_react.Info;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "pl-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -386,7 +392,9 @@ function Changes({ type, children }) {
 var import_clsx4 = __toESM(require("clsx"), 1);
 var import_react3 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = import_react3.Children.count(children);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex flex-col", children: import_react3.Children.map(children, (child, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -399,7 +407,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { createCoreServerMdxComponents } from './core/server.cjs';
 export { B as Button, C as Card, L as LinkLikeProps, a as LinkRenderer } from './Card-L5O7G4xG.cjs';
-export { C as CardGroup, b as Changes, K as Kbd, L as Link, N as Note, R as Release, S as Stepper, a as StepperItem, c as Youtube } from './Stepper-B7xt0Dyr.cjs';
+export { C as CardGroup, b as Changes, K as Kbd, L as Link, N as Note, R as Release, S as Stepper, a as StepperItem, c as Youtube } from './Stepper-I9nywkZb.cjs';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { createCoreServerMdxComponents } from './core/server.js';
 export { B as Button, C as Card, L as LinkLikeProps, a as LinkRenderer } from './Card-L5O7G4xG.js';
-export { C as CardGroup, b as Changes, K as Kbd, L as Link, N as Note, R as Release, S as Stepper, a as StepperItem, c as Youtube } from './Stepper-B7xt0Dyr.js';
+export { C as CardGroup, b as Changes, K as Kbd, L as Link, N as Note, R as Release, S as Stepper, a as StepperItem, c as Youtube } from './Stepper-I9nywkZb.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'class-variance-authority/types';

package/dist/index.js

@@ -242,6 +242,12 @@ var iconMap = {
   warning: AlertTriangle,
   success: CheckCircle2
 };
+var noteDefaultClasses = {
+  icon: "h-5 w-5",
+  contentWrapper: "pl-8",
+  title: "mb-1 font-medium leading-none tracking-tight",
+  content: "text-sm [&_p]:leading-relaxed opacity-90"
+};
 function Note({
   className,
   title = "Note",
@@ -251,10 +257,10 @@ function Note({
 }) {
   const Icon = iconMap[type] || Info;
   return /* @__PURE__ */ jsxs3("div", { className: cn(noteVariants({ variant: type }), className), ...props, children: [
-    /* @__PURE__ */ jsx6(Icon, { className: "h-5 w-5" }),
-    /* @__PURE__ */ jsxs3("div", { className: "pl-8", children: [
-      /* @__PURE__ */ jsx6("h5", { className: "mb-1 font-medium leading-none tracking-tight", children: title }),
-      /* @__PURE__ */ jsx6("div", { className: "text-sm [&_p]:leading-relaxed opacity-90", children })
+    /* @__PURE__ */ jsx6(Icon, { className: noteDefaultClasses.icon }),
+    /* @__PURE__ */ jsxs3("div", { className: noteDefaultClasses.contentWrapper, children: [
+      /* @__PURE__ */ jsx6("h5", { className: noteDefaultClasses.title, children: title }),
+      /* @__PURE__ */ jsx6("div", { className: noteDefaultClasses.content, children })
     ] })
   ] });
 }
@@ -350,7 +356,9 @@ function Changes({ type, children }) {
 import clsx4 from "clsx";
 import { Children as Children2 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function Stepper({ children }) {
+function Stepper({
+  children
+}) {
   const length = Children2.count(children);
   return /* @__PURE__ */ jsx8("div", { className: "flex flex-col", children: Children2.map(children, (child, index) => {
     return /* @__PURE__ */ jsxs5(
@@ -363,7 +371,7 @@ function Stepper({ children }) {
           })
         ),
         children: [
-          /* @__PURE__ */ jsx8("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", children: index + 1 }),
+          /* @__PURE__ */ jsx8("div", { className: "bg-muted text-muted-foreground w-8 h-8 text-xs font-medium rounded-md border border-border/50 flex items-center justify-center absolute -left-4 font-code", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@docubook/mdx",
-    "version": "1.0.0",
+    "version": "1.2.0",
     "description": "Framework-agnostic MDX components for React with adapters.",
     "type": "module",
     "main": "./dist/index.cjs",