@themodcraft/addon-docs 1.1.0

package/README.md

@@ -0,0 +1,31 @@
+# `@themodcraft/addon-docs`
+
+Professional docs UI components for product docs, component registries, and internal handbooks.
+
+Install:
+```bash
+npm install @themodcraft/addon-docs
+```
+
+The first component is `DocsSidebar`, the same sidebar pattern used by the TMC Nexus docs.
+
+```tsx
+import { DocsSidebar } from "@themodcraft/addon-docs";
+
+<DocsSidebar
+  currentPath="/components/button"
+  groups={[
+    {
+      label: "Components",
+      items: [
+        { href: "/components/button", label: "Button" },
+        { href: "/components/input", label: "Input" },
+      ],
+    },
+  ]}
+  title="Acme UI"
+  version="v1.0.0"
+/>
+```
+
+This package publishes compiled output only.

package/dist/docs-sidebar/DocsSidebar.d.ts

@@ -0,0 +1,2 @@
+import type { DocsSidebarProps } from "./DocsSidebar.types";
+export declare function DocsSidebar({ className, currentPath, footer, groups, normalizeHref, title, version, ...props }: DocsSidebarProps): import("react").JSX.Element;

package/dist/docs-sidebar/DocsSidebar.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LicenseGate } from "@themodcraft/license-client";
+import styles from "./DocsSidebar.module.css";
+function defaultNormalizeHref(href) {
+    return href.split("#")[0] || "/";
+}
+export function DocsSidebar({ className, currentPath, footer, groups, normalizeHref = defaultNormalizeHref, title, version, ...props }) {
+    return (_jsx(LicenseGate, { required: "addon-docs", children: _jsx("aside", { className: [styles.sidebar, className].filter(Boolean).join(" "), ...props, children: _jsxs("div", { className: styles.inner, children: [title || version ? (_jsxs("div", { className: styles.brand, children: [title ? _jsx("p", { className: styles.title, children: title }) : null, version ? _jsx("p", { className: styles.version, children: version }) : null] })) : null, _jsx("nav", { className: styles.nav, children: groups.map((group, groupIndex) => (_jsxs("section", { className: styles.group, children: [_jsx("p", { className: styles.groupLabel, children: group.label }), _jsx("div", { className: styles.groupItems, children: group.items.map((item) => {
+                                        const active = Boolean(currentPath && !item.href.includes("#") && normalizeHref(item.href) === currentPath);
+                                        return (_jsxs("a", { "aria-current": active ? "page" : undefined, className: [styles.link, active ? styles.linkActive : ""].filter(Boolean).join(" "), href: item.href, children: [_jsx("span", { className: styles.label, children: item.label }), item.badge ? _jsx("span", { className: styles.badge, children: item.badge }) : null] }, item.href));
+                                    }) })] }, `${String(group.label)}-${groupIndex}`))) }), footer ? _jsx("div", { className: styles.footer, children: footer }) : null] }) }) }));
+}

package/dist/docs-sidebar/DocsSidebar.module.css

@@ -0,0 +1,113 @@
+.sidebar {
+  --tmc-docs-sidebar-background: var(--tmc-color-surface-raised, #ffffff);
+  --tmc-docs-sidebar-border: var(--tmc-color-border, #d7dde5);
+  --tmc-docs-sidebar-card-background: var(--tmc-color-surface-raised, #ffffff);
+  --tmc-docs-sidebar-heading: var(--tmc-color-text, #151821);
+  --tmc-docs-sidebar-muted: var(--tmc-color-text-muted, #5f6b7a);
+  --tmc-docs-sidebar-link: var(--tmc-color-text-muted, #4a5565);
+  --tmc-docs-sidebar-link-active-background: var(--tmc-color-text, #151821);
+  --tmc-docs-sidebar-link-active-text: var(--tmc-color-surface, #ffffff);
+  --tmc-docs-sidebar-link-hover: var(--tmc-color-hover, color-mix(in srgb, var(--tmc-color-accent, #2454d6) 10%, transparent));
+  color: var(--tmc-docs-sidebar-heading);
+  display: block;
+  width: 100%;
+}
+
+.inner {
+  max-height: calc(100vh - 96px);
+  overflow-y: auto;
+  padding-right: 1rem;
+  position: sticky;
+  top: 82px;
+}
+
+.brand {
+  background: var(--tmc-docs-sidebar-card-background);
+  border: 1px solid var(--tmc-docs-sidebar-border);
+  border-radius: 8px;
+  box-shadow: 0 10px 26px rgb(20 24 33 / 0.06);
+  margin-bottom: 1.25rem;
+  padding: 0.75rem;
+}
+
+.title {
+  color: var(--tmc-docs-sidebar-heading);
+  font-size: 0.92rem;
+  font-weight: 750;
+  margin: 0;
+}
+
+.version {
+  color: var(--tmc-docs-sidebar-muted);
+  font-size: 0.78rem;
+  margin: 0.25rem 0 0;
+}
+
+.nav {
+  display: grid;
+  font-size: 0.9rem;
+  gap: 1.5rem;
+}
+
+.group {
+  margin: 0;
+}
+
+.groupLabel {
+  color: var(--tmc-docs-sidebar-muted);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  margin: 0 0 0.5rem;
+  padding: 0 0.5rem;
+  text-transform: uppercase;
+}
+
+.groupItems {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.link {
+  align-items: center;
+  border-radius: 7px;
+  color: var(--tmc-docs-sidebar-link);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+  min-height: 2rem;
+  padding: 0.4rem 0.5rem;
+  text-decoration: none;
+}
+
+.link:hover {
+  background: var(--tmc-docs-sidebar-link-hover);
+  color: var(--tmc-docs-sidebar-heading);
+}
+
+.linkActive {
+  background: var(--tmc-docs-sidebar-link-active-background);
+  color: var(--tmc-docs-sidebar-link-active-text);
+}
+
+.linkActive:hover {
+  background: var(--tmc-docs-sidebar-link-active-background);
+  color: var(--tmc-docs-sidebar-link-active-text);
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  color: inherit;
+  flex: 0 0 auto;
+  font-size: 0.74rem;
+  opacity: 0.72;
+}
+
+.footer {
+  margin-top: 1.5rem;
+}

package/dist/docs-sidebar/DocsSidebar.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface DocsSidebarItem {
+    badge?: ReactNode;
+    href: string;
+    label: ReactNode;
+}
+export interface DocsSidebarGroup {
+    items: DocsSidebarItem[];
+    label: ReactNode;
+}
+export interface DocsSidebarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    currentPath?: string;
+    footer?: ReactNode;
+    groups: DocsSidebarGroup[];
+    normalizeHref?: (href: string) => string;
+    title?: ReactNode;
+    version?: ReactNode;
+}

package/dist/docs-sidebar/DocsSidebar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/docs-sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { DocsSidebar } from "./DocsSidebar";
+export type { DocsSidebarGroup, DocsSidebarItem, DocsSidebarProps } from "./DocsSidebar.types";

package/dist/docs-sidebar/index.js

@@ -0,0 +1 @@
+export { DocsSidebar } from "./DocsSidebar";

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from "./docs-sidebar";

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./docs-sidebar";

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@themodcraft/addon-docs",
+  "version": "1.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "files": ["dist"],
+  "sideEffects": ["./dist/**/*.css"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./docs-sidebar": {
+      "types": "./dist/docs-sidebar/index.d.ts",
+      "default": "./dist/docs-sidebar/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node ../../tools/build-package.mjs",
+    "prepack": "npm run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@themodcraft/license-client": "1.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}