@dreamlake/dockit 0.2.15 → 0.2.16

package/dist/components/StatusTable.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Chip } from "./Chip.js";
+import { Table } from "./Table.js";
 const STATUS_COLOR = {
   pass: "oklch(62% .15 145)",
   fail: "oklch(58% .19 25)",
@@ -153,13 +154,13 @@ function StatusTable({ kind = "suites" }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Status" }),
-        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Suite" : "Example" }),
-        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Command" : "Description" }),
-        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Tests" }),
-        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Time" })
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, borderBottom: 0, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Status" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, borderBottom: 0, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Suite" : "Example" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, borderBottom: 0, textAlign: "left", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: kind === "suites" ? "Command" : "Description" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, borderBottom: 0, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Tests" }),
+        /* @__PURE__ */ jsx("th", { style: { ...cellStyle, ...monoStyle, borderBottom: 0, textAlign: "right", textTransform: "uppercase", letterSpacing: "0.12em", fontSize: 10 }, children: "Time" })
       ] }) }),
       /* @__PURE__ */ jsx("tbody", { children: kind === "suites" ? items.map((s) => /* @__PURE__ */ jsxs("tr", { children: [
         /* @__PURE__ */ jsx("td", { style: cellStyle, children: /* @__PURE__ */ jsx(StatusBadge, { status: s.status }) }),

package/dist/components/Table.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** Shared table chrome for Markdown and data-driven tables. */
+export declare function Table({ children, className, style, id, ...rest }: ComponentPropsWithoutRef<"table">): import("react").JSX.Element;

package/dist/components/Table.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useId } from "react";
+function Table({
+  children,
+  className,
+  style,
+  id,
+  ...rest
+}) {
+  const [wrap, setWrap] = useState(true);
+  const generatedId = useId();
+  const tableId = id ?? generatedId;
+  return /* @__PURE__ */ jsxs("div", { className: "doc-table", "data-wrap": wrap ? "on" : "off", children: [
+    /* @__PURE__ */ jsx("div", { className: "doc-table-toolbar", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "doc-table-wrap",
+        "aria-label": "Wrap table text",
+        "aria-pressed": wrap,
+        "aria-controls": tableId,
+        title: wrap ? "Turn off text wrapping" : "Wrap table text",
+        onClick: () => setWrap((value) => !value),
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h14a3 3 0 0 1 0 6h-4m3-3-3 3 3 3M3 18h4" })
+            }
+          ),
+          "Wrap"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "doc-table-scroll",
+        role: "region",
+        "aria-label": "Scrollable table",
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsx("table", { ...rest, id: tableId, className, style, children })
+      }
+    )
+  ] });
+}
+export {
+  Table
+};

package/dist/components/mdx-components.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { Table } from './Table';
 import { Callout } from './Callout';
 import { Chip } from './Chip';
 import { Preview } from './Preview';
@@ -18,7 +19,7 @@ export declare const mdxComponents: {
     li: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref">>;
     a: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">>;
     blockquote: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref">>;
-    table: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">>;
+    table: typeof Table;
     th: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref">>;
     td: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">>;
     code: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">>;

package/dist/components/mdx-components.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useContext, createContext, useState } from "react";
 import { CodeBlock } from "./CodeBlock.js";
+import { Table } from "./Table.js";
 import { Callout } from "./Callout.js";
 import { Chip } from "./Chip.js";
 import { Preview } from "./Preview.js";
@@ -270,19 +271,17 @@ const A = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
     children
   }
 );
-const Table = ({ children, style, ...rest }) => /* @__PURE__ */ jsx("table", { ...rest, style: { width: "100%", borderCollapse: "collapse", fontSize: 13, margin: "0 0 14px", ...style }, children });
 const Th = ({ children, style, ...rest }) => /* @__PURE__ */ jsx(
   "th",
   {
     ...rest,
-    className: "text-doc-template-muted uppercase border-b border-doc-template-faint",
+    className: "text-doc-template-muted uppercase",
     style: {
       fontFamily: "var(--font-doc-template-mono)",
       fontSize: 10,
       letterSpacing: "0.12em",
       textAlign: "left",
       fontWeight: 600,
-      background: "color-mix(in srgb, var(--color-doc-template-ink) 2%, transparent)",
       padding: "9px 10px",
       ...style
     },

package/dist/styles.css

@@ -109,6 +109,44 @@
   overflow-x: auto;
 }
 
+.doc-table { min-width: 0; max-width: 100%; margin: 0 0 14px; }
+.doc-table-toolbar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
+.doc-table-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 24px;
+  padding: 2px 8px;
+  border: 1px solid var(--color-doc-template-faint);
+  border-radius: var(--radius-doc-template-sm);
+  background: transparent;
+  color: var(--color-doc-template-muted);
+  font-family: var(--font-doc-template-mono);
+  font-size: 10px;
+  cursor: pointer;
+}
+.doc-table-wrap[aria-pressed='true'] {
+  color: var(--color-doc-template-accent);
+  background: var(--color-doc-template-accent-soft);
+}
+.doc-table-wrap:hover { border-color: var(--color-doc-template-muted); }
+.doc-table-wrap:focus-visible, .doc-table-scroll:focus-visible {
+  outline: 2px solid var(--color-doc-template-accent);
+  outline-offset: 2px;
+}
+.doc-table-scroll { overflow-x: auto; border-radius: var(--radius-doc-template-sm); }
+.doc-table-scroll > table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
+.doc-table-scroll > table > thead > tr > th {
+  border-bottom: 0;
+  background: var(--color-doc-template-chip);
+}
+.doc-table-scroll > table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--radius-doc-template-sm); }
+.doc-table-scroll > table > thead > tr:first-child > th:last-child { border-top-right-radius: var(--radius-doc-template-sm); }
+.doc-table-scroll > table > thead > tr:last-child > th:first-child { border-bottom-left-radius: var(--radius-doc-template-sm); }
+.doc-table-scroll > table > thead > tr:last-child > th:last-child { border-bottom-right-radius: var(--radius-doc-template-sm); }
+.doc-table[data-wrap='on'] > .doc-table-scroll > table { white-space: normal; overflow-wrap: anywhere; }
+.doc-table[data-wrap='off'] > .doc-table-scroll > table { white-space: nowrap; overflow-wrap: normal; }
+
 /* Pagefind excerpt highlights — matches the inline highlight style
    used by the SearchPalette's custom `highlight()` function. */
 .pagefind-excerpt mark {

package/package.json

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