@docubook/mdx 1.0.0 → 1.1.0

package/dist/core/index.cjs

@@ -85,7 +85,24 @@ function AccordionGroupProvider({ children }) {
 
 // src/core/components/Accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var accordionDefaultClasses = {
+  rootStandalone: "rounded-lg border shadow-sm",
+  rootInGroup: "border-border border-b last:border-b-0",
+  button: "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",
+  chevron: "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200",
+  chevronOpen: "rotate-90",
+  icon: "text-foreground h-4 w-4 shrink-0",
+  title: "text-foreground m-0! text-base font-medium",
+  contentGrid: "grid transition-[grid-template-rows] duration-200 ease-out",
+  contentGridOpen: "grid-rows-[1fr]",
+  contentGridClosed: "grid-rows-[0fr]",
+  contentOverflow: "overflow-hidden",
+  contentBody: "dark:bg-muted/10 bg-muted/15 px-4 py-3"
+};
 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;
@@ -103,9 +120,11 @@ function Accordion({ title, children, icon }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
+      "data-docubook": "accordion",
       className: cn(
-        !isInGroup && "rounded-lg border shadow-sm",
-        isInGroup && "border-border border-b last:border-b-0"
+        "dbk-accordion",
+        !isInGroup && accordionDefaultClasses.rootStandalone,
+        isInGroup && accordionDefaultClasses.rootInGroup
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -113,19 +132,25 @@ 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",
+            className: cn("dbk-accordion__button", accordionDefaultClasses.button),
+            "aria-expanded": isOpen,
+            "aria-controls": contentId,
+            id: triggerId,
+            "data-docubook": "accordion-button",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_lucide_react.ChevronRight,
                 {
                   className: cn(
-                    "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200",
-                    isOpen && "rotate-90"
-                  )
+                    "dbk-accordion__chevron",
+                    accordionDefaultClasses.chevron,
+                    isOpen && accordionDefaultClasses.chevronOpen
+                  ),
+                  "data-docubook": "accordion-chevron"
                 }
               ),
-              Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "text-foreground h-4 w-4 shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-foreground m-0! text-base font-medium", children: title })
+              Icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: cn("dbk-accordion__icon", accordionDefaultClasses.icon), "data-docubook": "accordion-icon" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: cn("dbk-accordion__title", accordionDefaultClasses.title), "data-docubook": "accordion-title", children: title })
             ]
           }
         ),
@@ -133,10 +158,15 @@ function Accordion({ title, children, icon }) {
           "div",
           {
             className: cn(
-              "grid transition-[grid-template-rows] duration-200 ease-out",
-              isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              "dbk-accordion__content-grid",
+              accordionDefaultClasses.contentGrid,
+              isOpen ? accordionDefaultClasses.contentGridOpen : accordionDefaultClasses.contentGridClosed
             ),
-            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 }) })
+            "data-docubook": "accordion-content-grid",
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId,
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("dbk-accordion__content-overflow", accordionDefaultClasses.contentOverflow), "data-docubook": "accordion-content-overflow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("dbk-accordion__content-body", accordionDefaultClasses.contentBody), "data-docubook": "accordion-content-body", children }) })
           }
         )
       ]
@@ -147,8 +177,18 @@ function Accordion({ title, children, icon }) {
 // src/core/components/AccordionGroup.tsx
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var accordionGroupDefaultClasses = {
+  root: "overflow-hidden rounded-lg border"
+};
 function AccordionGroup({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccordionGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_clsx2.default)("overflow-hidden rounded-lg border", className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccordionGroupProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: (0, import_clsx2.default)("dbk-accordion-group", accordionGroupDefaultClasses.root, className),
+      "data-docubook": "accordion-group",
+      children
+    }
+  ) });
 }
 
 // src/core/components/Button.tsx
@@ -222,6 +262,7 @@ function Card({
     "div",
     {
       className: (0, import_clsx3.default)(
+        "dbk-card",
         "border rounded-lg shadow-sm p-4 transition-all duration-200",
         "bg-card text-card-foreground border-border",
         "hover:bg-accent/5 hover:border-accent/30",
@@ -229,20 +270,21 @@ function Card({
         horizontal ? "flex-row items-start gap-1" : "flex-col space-y-1",
         className
       ),
+      "data-docubook": "card",
       children: [
-        Icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: (0, import_clsx3.default)("w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5") }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-base font-semibold text-foreground leading-6", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-muted-foreground -mt-3", children })
+        Icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: (0, import_clsx3.default)("dbk-card__icon", "w-5 h-5 text-primary shrink-0", horizontal && "mt-0.5"), "data-docubook": "card-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "dbk-card__body flex-1 min-w-0", "data-docubook": "card-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dbk-card__title text-base font-semibold text-foreground leading-6", "data-docubook": "card-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "dbk-card__content text-sm text-muted-foreground -mt-3", "data-docubook": "card-content", children })
         ] })
       ]
     }
   );
   if (!href) return content;
   if (LinkComponent) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LinkComponent, { href, className: "no-underline block", children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LinkComponent, { href, className: "dbk-card__link no-underline block", "data-docubook": "card-link", children: content });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "no-underline block", href, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { className: "dbk-card__link no-underline block", href, "data-docubook": "card-link", children: content });
 }
 
 // src/core/components/CardGroup.tsx
@@ -264,105 +306,144 @@ 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 }) {
+var fileDefaultClasses = {
+  root: "flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md transition-colors duration-150 cursor-default select-none hover:bg-muted/50",
+  rootHover: "bg-accent/10",
+  icon: "h-3.5 w-3.5 shrink-0 transition-colors text-muted-foreground",
+  iconHover: "text-accent",
+  text: "font-mono text-sm text-foreground truncate",
+  extension: "ml-auto text-xs text-muted-foreground/80"
+};
+var folderDefaultClasses = {
+  root: "relative",
+  header: "flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md transition-colors duration-150 select-none",
+  headerHover: "bg-muted/60",
+  headerOpen: "text-foreground",
+  headerClosed: "text-foreground/80",
+  headerPointer: "cursor-pointer",
+  headerDefault: "cursor-default",
+  chevron: "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+  chevronOpen: "rotate-90",
+  chevronHover: "text-foreground/70",
+  chevronDefault: "text-muted-foreground",
+  spacer: "w-3.5",
+  icon: "h-4 w-4 shrink-0 transition-colors",
+  iconOpenHover: "text-accent",
+  iconOpenDefault: "text-muted-foreground",
+  iconClosedHover: "text-accent/80",
+  iconClosedDefault: "text-muted-foreground/80",
+  text: "font-medium transition-colors duration-150",
+  textHover: "text-accent",
+  children: "ml-5 border-l-2 border-muted/50 pl-2"
+};
+var filesDefaultClasses = {
+  root: "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",
+  content: "p-2"
+};
+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(
+        "dbk-file-tree__file",
+        fileDefaultClasses.root,
+        isHovered && fileDefaultClasses.rootHover
+      ),
+      "data-docubook": "file-tree-file",
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       tabIndex: -1,
       children: [
-        /* @__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"}
-        `
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-mono text-sm text-foreground truncate", children: name }),
-        isHovered && fileExtension && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ml-auto text-xs text-muted-foreground/80", children: fileExtension })
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.File, { className: cn("dbk-file-tree__file-icon", fileDefaultClasses.icon, isHovered && fileDefaultClasses.iconHover), "data-docubook": "file-tree-file-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("dbk-file-tree__file-text", fileDefaultClasses.text), "data-docubook": "file-tree-file-text", children: name }),
+        isHovered && fileExtension && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("dbk-file-tree__file-extension", fileDefaultClasses.extension), "data-docubook": "file-tree-file-extension", children: fileExtension })
       ]
     }
   );
 }
-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;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("dbk-file-tree__folder", folderDefaultClasses.root), "data-docubook": "file-tree-folder", children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "div",
+      "button",
       {
-        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"}
-        `,
+        type: "button",
+        className: cn(
+          "dbk-file-tree__folder-button",
+          folderDefaultClasses.header,
+          isHovered && folderDefaultClasses.headerHover,
+          isOpen ? folderDefaultClasses.headerOpen : folderDefaultClasses.headerClosed,
+          hasChildren ? folderDefaultClasses.headerPointer : folderDefaultClasses.headerDefault
+        ),
         onClick: () => hasChildren && setIsOpen(!isOpen),
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
-        tabIndex: -1,
+        "aria-expanded": hasChildren ? isOpen : void 0,
+        "data-docubook": "file-tree-folder-button",
         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(
+                "dbk-file-tree__folder-chevron",
+                folderDefaultClasses.chevron,
+                isOpen && folderDefaultClasses.chevronOpen,
+                isHovered ? folderDefaultClasses.chevronHover : folderDefaultClasses.chevronDefault
+              ),
+              "data-docubook": "file-tree-folder-chevron"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-3.5" }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("dbk-file-tree__folder-spacer", folderDefaultClasses.spacer), "data-docubook": "file-tree-folder-spacer" }),
           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(
+                "dbk-file-tree__folder-icon",
+                folderDefaultClasses.icon,
+                isHovered ? folderDefaultClasses.iconOpenHover : folderDefaultClasses.iconOpenDefault
+              ),
+              "data-docubook": "file-tree-folder-icon"
             }
           ) : /* @__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(
+                "dbk-file-tree__folder-icon",
+                folderDefaultClasses.icon,
+                isHovered ? folderDefaultClasses.iconClosedHover : folderDefaultClasses.iconClosedDefault
+              ),
+              "data-docubook": "file-tree-folder-icon"
             }
           ),
-          /* @__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("dbk-file-tree__folder-text", folderDefaultClasses.text, isHovered && folderDefaultClasses.textHover), "data-docubook": "file-tree-folder-text", children: name })
         ]
       }
     ),
-    isOpen && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "ml-5 border-l-2 border-muted/50 pl-2", children })
+    isOpen && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("dbk-file-tree__folder-children", folderDefaultClasses.children), "data-docubook": "file-tree-folder-children", 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      ",
-      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 });
-        }
-        return null;
-      }) })
+function Files({
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("dbk-file-tree", filesDefaultClasses.root), "data-docubook": "file-tree", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("dbk-file-tree__content", filesDefaultClasses.content), "data-docubook": "file-tree-content", children: import_react4.Children.map(children, (child, index) => {
+    if ((0, import_react4.isValidElement)(child)) {
+      return (0, import_react4.cloneElement)(child, { key: index });
     }
-  );
+    return null;
+  }) }) });
 }
-function Folder({ name, children }) {
+function Folder({
+  name,
+  children
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FolderComponent, { name, children });
 }
 function File({ name }) {
@@ -545,7 +626,8 @@ function Kbd({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "kbd",
     {
-      className: "inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md",
+      className: "dbk-kbd inline-flex items-center justify-center px-2 py-1 mx-0.5 text-xs font-mono font-medium text-foreground bg-secondary/70 border rounded-md",
+      "data-docubook": "kbd",
       ...props,
       children: renderContent()
     }
@@ -599,6 +681,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",
@@ -607,13 +695,24 @@ function Note({
   ...props
 }) {
   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 })
-    ] })
-  ] });
+  const noteRole = type === "danger" ? "alert" : "status";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: cn("dbk-note", noteVariants({ variant: type }), className),
+      "data-docubook": "note",
+      "data-variant": type,
+      role: noteRole,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: cn("dbk-note__icon", noteDefaultClasses.icon), "data-docubook": "note-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("dbk-note__content-wrapper", noteDefaultClasses.contentWrapper), "data-docubook": "note-content-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h5", { className: cn("dbk-note__title", noteDefaultClasses.title), "data-docubook": "note-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("dbk-note__content", noteDefaultClasses.content), "data-docubook": "note-content", children })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/core/components/Copy.tsx
@@ -623,20 +722,28 @@ 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "button",
     {
       type: "button",
-      className: "border cursor-copy inline-flex h-6 w-6 items-center justify-center rounded-md",
+      className: "dbk-copy inline-flex h-6 w-6 items-center justify-center rounded-md border bg-secondary text-secondary-foreground transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-copy",
       onClick: handleCopy,
       "aria-label": isCopied ? "Copied" : "Copy code",
-      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ClipboardCheckIcon, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ClipboardIcon, { className: "w-3 h-3" })
+      "data-docubook": "copy-button",
+      children: [
+        isCopied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ClipboardCheckIcon, { className: "dbk-copy__icon w-3 h-3", "data-docubook": "copy-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.ClipboardIcon, { className: "dbk-copy__icon w-3 h-3", "data-docubook": "copy-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", "aria-live": "polite", children: isCopied ? "Copied" : "Copy" })
+      ]
     }
   );
 }
@@ -711,30 +818,31 @@ var import_react7 = require("react");
 var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function Release({ version, title, date, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "mb-16 group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3 mt-6 mb-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dbk-release mb-16 group", "data-docubook": "release", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dbk-release__header flex items-center gap-3 mt-6 mb-2", "data-docubook": "release-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "div",
         {
           id: version,
-          className: "inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm",
+          className: "dbk-release__version inline-flex items-center rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-sm font-semibold text-primary transition-colors hover:bg-primary/15 scroll-m-20 backdrop-blur-sm",
+          "data-docubook": "release-version",
           children: [
             "v",
             version
           ]
         }
       ),
-      date && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3 text-sm font-medium text-muted-foreground", children: [
+      date && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dbk-release__date-wrapper flex items-center gap-3 text-sm font-medium text-muted-foreground", "data-docubook": "release-date-wrapper", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-1 w-1 rounded-full bg-muted-foreground/30" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("time", { dateTime: date, children: new Date(date).toLocaleDateString("en-US", {
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("time", { className: "dbk-release__date", "data-docubook": "release-date", dateTime: date, children: new Date(date).toLocaleDateString("en-US", {
           year: "numeric",
           month: "long",
           day: "numeric"
         }) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-2xl font-bold text-foreground/90 mb-6 mt-0!", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-8", children })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "dbk-release__title text-2xl font-bold text-foreground/90 mb-6 mt-0!", "data-docubook": "release-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dbk-release__content space-y-8", "data-docubook": "release-content", children })
   ] });
 }
 var typeConfig = {
@@ -766,23 +874,25 @@ var typeConfig = {
 };
 function Changes({ type, children }) {
   const config = typeConfig[type] || typeConfig.added;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-3 mb-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "dbk-release-changes space-y-3 mb-8", "data-docubook": "release-changes", "data-type": type, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "dbk-release-changes__header flex items-center gap-2", "data-docubook": "release-changes-header", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: cn(
+          "dbk-release-changes__badge",
           "px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1.5",
           config.className
         ),
+        "data-docubook": "release-changes-badge",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.icon, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: config.label })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(config.icon, { className: "dbk-release-changes__icon h-3.5 w-3.5", "data-docubook": "release-changes-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "dbk-release-changes__label", "data-docubook": "release-changes-label", children: config.label })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "list-none pl-0 space-y-2 text-foreground/80", children: import_react7.Children.map(children, (child, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "dbk-release-changes__list list-none pl-0 space-y-2 text-foreground/80", "data-docubook": "release-changes-list", children: import_react7.Children.map(children, (child, index) => {
       const processedChild = typeof child === "string" ? child.trim().replace(/^[-*]\s+/, "") : child;
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "leading-relaxed", children: processedChild }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { className: "dbk-release-changes__item leading-relaxed", "data-docubook": "release-changes-item", children: processedChild }, index);
     }) })
   ] });
 }
@@ -791,20 +901,35 @@ 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 }) {
+var stepperDefaultClasses = {
+  root: "flex flex-col",
+  item: "border-l border-muted pl-9 ml-3 relative",
+  itemWithConnector: "pb-5 ",
+  number: "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"
+};
+var stepperItemDefaultClasses = {
+  root: "pt-0.5",
+  title: "mt-0",
+  content: ""
+};
+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.jsx)("ol", { className: cn("dbk-stepper", stepperDefaultClasses.root), "data-docubook": "stepper", children: import_react8.Children.map(children, (child, index) => {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "div",
+      "li",
       {
         className: cn(
-          "border-l border-muted pl-9 ml-3 relative",
+          "dbk-stepper__item",
+          stepperDefaultClasses.item,
           (0, import_clsx5.default)({
-            "pb-5 ": index < length - 1
+            [stepperDefaultClasses.itemWithConnector]: index < length - 1
           })
         ),
+        "data-docubook": "stepper-item",
         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: cn("dbk-stepper__number", stepperDefaultClasses.number), "data-docubook": "stepper-number", "aria-hidden": "true", children: index + 1 }),
           child
         ]
       }
@@ -815,28 +940,49 @@ function StepperItem({
   children,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "pt-0.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "mt-0", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("dbk-stepper-item", stepperItemDefaultClasses.root), "data-docubook": "stepper-item-content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: cn("dbk-stepper-item__title", stepperItemDefaultClasses.title), "data-docubook": "stepper-item-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("dbk-stepper-item__content", stepperItemDefaultClasses.content), "data-docubook": "stepper-item-body", children })
   ] });
 }
 
 // src/core/components/Tooltip.tsx
 var import_react9 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var tooltipDefaultClasses = {
+  root: "relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors",
+  trigger: "border-b border-dashed border-primary/60 pb-0.5",
+  content: "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",
+  arrow: "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"
+};
 var Tooltip = ({ text, tip }) => {
   const [visible, setVisible] = (0, import_react9.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "span",
     {
-      className: "relative inline-flex items-center cursor-help text-primary hover:text-primary/80 transition-colors",
+      className: cn("dbk-tooltip", tooltipDefaultClasses.root),
+      "data-docubook": "tooltip",
       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)(
+          "button",
+          {
+            type: "button",
+            className: cn("dbk-tooltip__trigger", tooltipDefaultClasses.trigger),
+            "data-docubook": "tooltip-trigger",
+            onFocus: () => setVisible(true),
+            onBlur: () => setVisible(false),
+            onKeyDown: (event) => {
+              if (event.key === "Escape") setVisible(false);
+            },
+            "aria-expanded": visible,
+            children: text
+          }
+        ),
+        visible && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: cn("dbk-tooltip__content", tooltipDefaultClasses.content), role: "tooltip", "data-docubook": "tooltip-content", 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" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: cn("dbk-tooltip__arrow", tooltipDefaultClasses.arrow), "data-docubook": "tooltip-arrow" })
         ] })
       ]
     }

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"> & {