@dreamlake/dockit 0.2.4 → 0.2.6

package/dist/components/Chip.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+export type ChipVariant = 'muted' | 'accent' | 'warn';
+export interface ChipProps extends ComponentPropsWithoutRef<'button'> {
+    /** Color pair: `muted` (default), `accent`, or `warn`. */
+    variant?: ChipVariant;
+}
+/**
+ * The canonical chip idiom of the shell — this component IS the design
+ * guide's badge spec, not an approximation of it: mono
+ * (`--font-doc-template-mono`), 10px / 600, `0.08em` tracking, uppercase,
+ * `2px 7px` padding, 4px radius, and a hairline `currentColor` border at
+ * 45% opacity. The topbar's DEV badge renders through it, and the
+ * segments of [`VersionBadge`](./VersionBadge.tsx) and the data-driven
+ * [`TestStatus`](./StatusTable.tsx) badge follow the same idiom.
+ *
+ * Renders a `<span>` by default, or a `<button type="button">` (with a
+ * pointer cursor) when `onClick` is given. All other props — `title`,
+ * `aria-*`, `className`, `style` — pass straight through; `style` wins
+ * over the base + variant styles, so one-off recolors are just inline
+ * overrides.
+ */
+export declare function Chip({ variant, onClick, className, style, children, ...rest }: ChipProps): import("react").JSX.Element;

package/dist/components/Chip.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+const VARIANT_COLORS = {
+  muted: {
+    color: "var(--color-doc-template-muted)",
+    background: "var(--color-doc-template-chip)"
+  },
+  accent: {
+    color: "var(--color-doc-template-accent)",
+    background: "var(--color-doc-template-accent-soft)"
+  },
+  warn: {
+    color: "var(--color-doc-template-warn)",
+    background: "var(--color-doc-template-warn-soft)"
+  }
+};
+const BASE_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  fontFamily: "var(--font-doc-template-mono)",
+  fontSize: 10,
+  fontWeight: 600,
+  letterSpacing: "0.08em",
+  lineHeight: 1.4,
+  textTransform: "uppercase",
+  padding: "2px 7px",
+  borderRadius: 4,
+  border: "1px solid color-mix(in srgb, currentColor 45%, transparent)"
+};
+function Chip({ variant = "muted", onClick, className, style, children, ...rest }) {
+  const mergedStyle = {
+    ...BASE_STYLE,
+    ...VARIANT_COLORS[variant],
+    ...onClick ? { cursor: "pointer" } : {},
+    ...style
+  };
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, className, style: mergedStyle, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx("span", { className, style: mergedStyle, ...rest, children });
+}
+export {
+  Chip
+};

package/dist/components/StatusTable.d.ts

@@ -12,6 +12,9 @@ export declare function StatusTable({ kind }: {
 /**
  * Inline single-suite status badge for embedding in API docs. Example:
  *   <TestStatus suite="lakeshore-controlplane" />
+ *
+ * The badge itself is the data-driven face of the canonical chip idiom —
+ * see [`Chip`](./Chip.tsx) and the `StatusBadge` notes above.
  */
 export declare function TestStatus({ suite, example }: {
     suite?: string;

package/dist/components/StatusTable.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
+import { Chip } from "./Chip.js";
 const STATUS_COLOR = {
   pass: "oklch(62% .15 145)",
   fail: "oklch(58% .19 25)",
@@ -27,21 +28,16 @@ function StatusDot({ status }) {
 function StatusBadge({ status }) {
   const color = STATUS_COLOR[status] ?? "var(--color-doc-template-muted)";
   return /* @__PURE__ */ jsxs(
-    "span",
+    Chip,
     {
       style: {
-        display: "inline-flex",
-        alignItems: "center",
         gap: 6,
         padding: "2px 8px",
-        borderRadius: 4,
+        border: "none",
         background: `color-mix(in srgb, ${color} 12%, transparent)`,
         color,
-        fontFamily: "var(--font-doc-template-mono)",
         fontSize: 11,
-        fontWeight: 600,
-        textTransform: "uppercase",
-        letterSpacing: "0.08em"
+        lineHeight: "inherit"
       },
       children: [
         /* @__PURE__ */ jsx(StatusDot, { status }),

package/dist/components/Topbar.js

@@ -5,6 +5,7 @@ import { findPage } from "../lib/navigation.js";
 import { siteConfig } from "../site-config.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+import { Chip } from "./Chip.js";
 import { ThemeToggle } from "./ThemeToggle.js";
 import { VersionBadge } from "./VersionBadge.js";
 import { useMerge } from "../renderer/Layout.js";
@@ -13,27 +14,12 @@ function HiddenRevealChip() {
   const [show, setShow] = useHiddenToggle();
   if (!show) return null;
   return /* @__PURE__ */ jsx(
-    "button",
+    Chip,
     {
-      type: "button",
+      variant: "warn",
       onClick: () => setShow(false),
       "aria-label": "Dev mode on — hidden pages are visible. Click to hide again.",
       title: "Dev mode on — hidden pages are visible (Cmd+Shift+D to toggle)",
-      className: "text-doc-template-warn",
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        padding: "2px 7px",
-        border: "1px solid color-mix(in srgb, var(--color-doc-template-warn) 45%, transparent)",
-        borderRadius: 4,
-        background: "var(--color-doc-template-warn-soft)",
-        fontFamily: "var(--font-doc-template-mono)",
-        fontSize: 10,
-        fontWeight: 600,
-        letterSpacing: "0.08em",
-        lineHeight: 1.4,
-        cursor: "pointer"
-      },
       children: "DEV"
     }
   );

package/dist/components/VersionBadge.d.ts

@@ -27,5 +27,10 @@ export interface VersionBadgeProps {
  *
  * Rendered by the Topbar for each `siteConfig.versionChips` entry, and
  * exported from the library index for standalone placement.
+ *
+ * Visually, each segment follows the canonical chip idiom encapsulated by
+ * [`Chip`](./Chip.tsx) — mono 10px/600, 0.08em tracking, uppercase, 4px
+ * radius, hairline border. The two-segment (label | version) layout is
+ * bespoke, so this component does not compose `Chip` internally.
  */
 export declare function VersionBadge({ label, version, collapsed, dropdown, }: VersionBadgeProps): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { Callout } from './Callout';
+import { Chip } from './Chip';
 import { Preview } from './Preview';
 import { StatusTable, TestStatus } from './StatusTable';
 /**
@@ -23,6 +24,7 @@ export declare const mdxComponents: {
     code: import('react').FC<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">>;
     pre: typeof PreWrapper;
     Callout: typeof Callout;
+    Chip: typeof Chip;
     Preview: typeof Preview;
     StatusTable: typeof StatusTable;
     TestStatus: typeof TestStatus;

package/dist/components/mdx-components.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useContext, createContext, useState } from "react";
 import { CodeBlock } from "./CodeBlock.js";
 import { Callout } from "./Callout.js";
+import { Chip } from "./Chip.js";
 import { Preview } from "./Preview.js";
 import { TestStatus, StatusTable } from "./StatusTable.js";
 const InsidePreContext = createContext(false);
@@ -337,6 +338,7 @@ const mdxComponents = {
   code: Code,
   pre: PreWrapper,
   Callout,
+  Chip,
   Preview,
   StatusTable,
   TestStatus

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export { useLineNumbers } from './lib/use-line-numbers';
 export { useLocalStorage, DOC_PREFIX, docKey } from './lib/use-local-storage';
 export { useMediaQuery } from './lib/use-media-query';
 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 { DocFooter } from './components/DocFooter';

package/dist/index.js

@@ -12,6 +12,7 @@ import { useLineNumbers } from "./lib/use-line-numbers.js";
 import { DOC_PREFIX, docKey, useLocalStorage } from "./lib/use-local-storage.js";
 import { useMediaQuery } from "./lib/use-media-query.js";
 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 { DocFooter } from "./components/DocFooter.js";
@@ -36,6 +37,7 @@ function initDocs(opts) {
 }
 export {
   Callout,
+  Chip,
   ClientOnly,
   CodeBlock,
   DOC_PREFIX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",
@@ -39,11 +39,12 @@
   },
   "peerDependencies": {
     "@mdx-js/react": ">=3.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
     "vike": "^0.4.210",
     "vike-react": "^0.5.0",
-    "vite": ">=6.0.0"
+    "vite": ">=6.0.0",
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "vite": {
@@ -59,21 +60,21 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
     "remark-mdx-frontmatter": "^5.2.0",
-    "shiki": "^1.24.0",
-    "tailwindcss": "^4.0.0"
+    "shiki": "^1.24.0"
   },
   "devDependencies": {
     "@mdx-js/react": "^3.1.0",
     "@types/node": "^22.20.1",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "react": "latest",
+    "react-dom": "latest",
     "typescript": "^5.7.0",
     "vike": "^0.4.210",
     "vike-react": "^0.5.0",
     "vite": "^7.0.0",
-    "vite-plugin-dts": "^4.3.0"
+    "vite-plugin-dts": "^4.3.0",
+    "tailwindcss": "^4.0.0"
   },
   "scripts": {
     "build": "vite build",