@viax.io/uxm 4.36.0

package/dist/ui/sidebar-nav-item/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sidebar_nav_item_exports = {};
+module.exports = __toCommonJS(sidebar_nav_item_exports);
+__reExport(sidebar_nav_item_exports, require("./sidebar-nav-item.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./sidebar-nav-item.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/sidebar-nav-item/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-item/index.ts"],"sourcesContent":["export * from './sidebar-nav-item';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,qCAAc,+BAAd;","names":[]}

package/dist/ui/sidebar-nav-item/index.d.ts

@@ -0,0 +1,2 @@
+export * from './sidebar-nav-item.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/sidebar-nav-item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebar-nav-item/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/ui/sidebar-nav-item/index.js

@@ -0,0 +1,2 @@
+export * from "./sidebar-nav-item.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/sidebar-nav-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-item/index.ts"],"sourcesContent":["export * from './sidebar-nav-item';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.cjs

@@ -0,0 +1,137 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sidebar_nav_item_preview_exports = {};
+__export(sidebar_nav_item_preview_exports, {
+  SidebarNavItemPreview: () => SidebarNavItemPreview
+});
+module.exports = __toCommonJS(sidebar_nav_item_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+const INTERACTIVE_ITEMS = [
+  { key: "dashboard", label: "Dashboard", glyph: "grid" },
+  { key: "motions", label: "Revenue Motions", glyph: "sparkle" },
+  { key: "history", label: "Business Interactions", glyph: "history" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-sidebar-nav-item-inactive-bg": styles.inactiveBg,
+    "--uxm-sidebar-nav-item-inactive-text": styles.inactiveText,
+    "--uxm-sidebar-nav-item-hover-bg": styles.hoverBg,
+    "--uxm-sidebar-nav-item-hover-text": styles.hoverText,
+    "--uxm-sidebar-nav-item-focus-text": styles.focusText,
+    "--uxm-sidebar-nav-item-focus-ring": styles.focusRing,
+    "--uxm-sidebar-nav-item-active-bg": styles.activeBg,
+    "--uxm-sidebar-nav-item-active-text": styles.activeText,
+    "--uxm-sidebar-nav-item-disabled-bg": styles.disabledBg,
+    "--uxm-sidebar-nav-item-disabled-text": styles.disabledText,
+    "--uxm-sidebar-nav-item-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-sidebar-nav-item-border-radius": `${styles.borderRadius}px`,
+    "--uxm-sidebar-nav-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-sidebar-nav-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-sidebar-nav-item-gap": `${styles.gap}px`,
+    "--uxm-sidebar-nav-item-font-size": `${styles.fontSize}px`,
+    "--uxm-sidebar-nav-item-font-weight": styles.fontWeight,
+    "--uxm-sidebar-nav-item-icon-bg": styles.iconBg,
+    "--uxm-sidebar-nav-item-icon-color": styles.iconColor,
+    "--uxm-sidebar-nav-item-icon-box-size": `${styles.iconBoxSize}px`,
+    "--uxm-sidebar-nav-item-icon-radius": `${styles.iconRadius}px`,
+    "--uxm-sidebar-nav-item-icon-size": `${styles.iconSize}px`
+  };
+}
+function StaticShowcase({ state }) {
+  const isActive = state === "active";
+  const isDisabled = state === "disabled";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "a",
+    {
+      href: "#preview",
+      onClick: (e) => e.preventDefault(),
+      tabIndex: -1,
+      "aria-current": isActive ? "page" : void 0,
+      ...isDisabled ? { "aria-disabled": true } : {},
+      className: (0, import_helpers.cn)(
+        "uxm-sidebar-nav-item",
+        isActive && "uxm-sidebar-nav-item--active",
+        state === "hover" && "uxm-sidebar-nav-item--state-hover",
+        state === "focus" && "uxm-sidebar-nav-item--state-focus"
+      ),
+      style: { pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-item__icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "grid" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-item__label", children: "Dashboard" })
+      ]
+    }
+  );
+}
+function SidebarNavItemPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const badgeVariant = variants.badge ?? "off";
+  const [activeKey, setActiveKey] = (0, import_react.useState)(INTERACTIVE_ITEMS[0].key);
+  const cssVars = buildVars(styles);
+  const badgeFor = (i) => {
+    if (badgeVariant === "check") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "check", size: 14 });
+    if (badgeVariant === "count") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 11, fontVariantNumeric: "tabular-nums" }, children: [3, 1, 8][i] ?? 0 });
+    }
+    return void 0;
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 260, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: INTERACTIVE_ITEMS.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui2.SidebarNavItem,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            setActiveKey(it.key);
+          },
+          active: it.key === activeKey,
+          disabled: state === "disabled" && i === 1,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: it.glyph }),
+          badge: badgeFor(i),
+          children: it.label
+        },
+        it.key
+      )) })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarNavItemPreview
+});
+//# sourceMappingURL=sidebar-nav-item-preview.cjs.map

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-item/sidebar-nav-item-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { SidebarNavItem } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst INTERACTIVE_ITEMS = [\n  { key: 'dashboard', label: 'Dashboard', glyph: 'grid' },\n  { key: 'motions', label: 'Revenue Motions', glyph: 'sparkle' },\n  { key: 'history', label: 'Business Interactions', glyph: 'history' },\n];\n\n/**\n * Project every registry knob as a `--uxm-sidebar-nav-item-*` custom\n * property on the wrapper. Both the static showcase and the interactive\n * list below read from the same vars; the showcase is inert so the\n * forced state isn't overridden by real input, and the interactive\n * list exercises `:hover` / `:focus-visible` / `:disabled` / `--active`\n * on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-sidebar-nav-item-inactive-bg': styles.inactiveBg as string,\n    '--uxm-sidebar-nav-item-inactive-text': styles.inactiveText as string,\n    '--uxm-sidebar-nav-item-hover-bg': styles.hoverBg as string,\n    '--uxm-sidebar-nav-item-hover-text': styles.hoverText as string,\n    '--uxm-sidebar-nav-item-focus-text': styles.focusText as string,\n    '--uxm-sidebar-nav-item-focus-ring': styles.focusRing as string,\n    '--uxm-sidebar-nav-item-active-bg': styles.activeBg as string,\n    '--uxm-sidebar-nav-item-active-text': styles.activeText as string,\n    '--uxm-sidebar-nav-item-disabled-bg': styles.disabledBg as string,\n    '--uxm-sidebar-nav-item-disabled-text': styles.disabledText as string,\n    '--uxm-sidebar-nav-item-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-sidebar-nav-item-border-radius': `${styles.borderRadius}px`,\n    '--uxm-sidebar-nav-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-sidebar-nav-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-sidebar-nav-item-gap': `${styles.gap}px`,\n    '--uxm-sidebar-nav-item-font-size': `${styles.fontSize}px`,\n    '--uxm-sidebar-nav-item-font-weight': styles.fontWeight as string,\n    '--uxm-sidebar-nav-item-icon-bg': styles.iconBg as string,\n    '--uxm-sidebar-nav-item-icon-color': styles.iconColor as string,\n    '--uxm-sidebar-nav-item-icon-box-size': `${styles.iconBoxSize}px`,\n    '--uxm-sidebar-nav-item-icon-radius': `${styles.iconRadius}px`,\n    '--uxm-sidebar-nav-item-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE nav item rendered with the forced-state class\n * matching the State dropdown. Inert: `pointer-events: none` blocks\n * `:hover` from firing on mouse-over and `tabIndex={-1}` keeps the\n * anchor out of the focus order so `:focus-visible` can't fire from\n * real keyboard input. Hand-rendered (not the real `<SidebarNavItem>`\n * atom) because the atom doesn't expose a way to set the showcase-only\n * `--state-*` modifier class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  const isActive = state === 'active';\n  const isDisabled = state === 'disabled';\n  return (\n    <a\n      href=\"#preview\"\n      onClick={(e) => e.preventDefault()}\n      tabIndex={-1}\n      aria-current={isActive ? 'page' : undefined}\n      {...(isDisabled ? { 'aria-disabled': true } : {})}\n      className={cn(\n        'uxm-sidebar-nav-item',\n        isActive && 'uxm-sidebar-nav-item--active',\n        state === 'hover' && 'uxm-sidebar-nav-item--state-hover',\n        state === 'focus' && 'uxm-sidebar-nav-item--state-focus',\n      )}\n      style={{ pointerEvents: 'none' }}\n    >\n      <span className=\"uxm-sidebar-nav-item__icon\">\n        <Icon glyph=\"grid\" />\n      </span>\n      <span className=\"uxm-sidebar-nav-item__label\">Dashboard</span>\n    </a>\n  );\n}\n\nexport function SidebarNavItemPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const badgeVariant = (variants.badge as string) ?? 'off';\n  const [activeKey, setActiveKey] = useState(INTERACTIVE_ITEMS[0].key);\n  const cssVars = buildVars(styles);\n\n  // Sample content for the persistent `badge` slot, driven by the Badge knob.\n  // A checkmark (status marker) or a small count pill — both render inline via\n  // `currentColor`, so the `--uxm-sidebar-nav-item-badge-color` default shows.\n  const badgeFor = (i: number) => {\n    if (badgeVariant === 'check') return <Icon glyph=\"check\" size={14} />;\n    if (badgeVariant === 'count') {\n      return (\n        <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums' }}>{[3, 1, 8][i] ?? 0}</span>\n      );\n    }\n    return undefined;\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 260, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — three real <SidebarNavItem> atoms in a\n          vertical list. Real `:hover` / `:focus-visible` and the\n          aria-current=\"page\" active styling exercise the production\n          CSS via the projected vars above. Clicking a row makes it the\n          active item. The State dropdown only carries through to\n          `disabled` here (applied to the second item so the disabled\n          styling reads alongside enabled rows); the rest are exercised\n          by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n          {INTERACTIVE_ITEMS.map((it, i) => (\n            <SidebarNavItem\n              key={it.key}\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                setActiveKey(it.key);\n              }}\n              active={it.key === activeKey}\n              disabled={state === 'disabled' && i === 1}\n              icon={<Icon glyph={it.glyph} />}\n              badge={badgeFor(i)}\n            >\n              {it.label}\n            </SidebarNavItem>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function SidebarNavItemPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-nav-item-preview.d.ts.map

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav-item-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebar-nav-item/sidebar-nav-item-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAmFrD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAiEvE"}

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/index.js";
+import { SidebarNavItem } from "../../ui/index.js";
+const INTERACTIVE_ITEMS = [
+  { key: "dashboard", label: "Dashboard", glyph: "grid" },
+  { key: "motions", label: "Revenue Motions", glyph: "sparkle" },
+  { key: "history", label: "Business Interactions", glyph: "history" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-sidebar-nav-item-inactive-bg": styles.inactiveBg,
+    "--uxm-sidebar-nav-item-inactive-text": styles.inactiveText,
+    "--uxm-sidebar-nav-item-hover-bg": styles.hoverBg,
+    "--uxm-sidebar-nav-item-hover-text": styles.hoverText,
+    "--uxm-sidebar-nav-item-focus-text": styles.focusText,
+    "--uxm-sidebar-nav-item-focus-ring": styles.focusRing,
+    "--uxm-sidebar-nav-item-active-bg": styles.activeBg,
+    "--uxm-sidebar-nav-item-active-text": styles.activeText,
+    "--uxm-sidebar-nav-item-disabled-bg": styles.disabledBg,
+    "--uxm-sidebar-nav-item-disabled-text": styles.disabledText,
+    "--uxm-sidebar-nav-item-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-sidebar-nav-item-border-radius": `${styles.borderRadius}px`,
+    "--uxm-sidebar-nav-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-sidebar-nav-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-sidebar-nav-item-gap": `${styles.gap}px`,
+    "--uxm-sidebar-nav-item-font-size": `${styles.fontSize}px`,
+    "--uxm-sidebar-nav-item-font-weight": styles.fontWeight,
+    "--uxm-sidebar-nav-item-icon-bg": styles.iconBg,
+    "--uxm-sidebar-nav-item-icon-color": styles.iconColor,
+    "--uxm-sidebar-nav-item-icon-box-size": `${styles.iconBoxSize}px`,
+    "--uxm-sidebar-nav-item-icon-radius": `${styles.iconRadius}px`,
+    "--uxm-sidebar-nav-item-icon-size": `${styles.iconSize}px`
+  };
+}
+function StaticShowcase({ state }) {
+  const isActive = state === "active";
+  const isDisabled = state === "disabled";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: "#preview",
+      onClick: (e) => e.preventDefault(),
+      tabIndex: -1,
+      "aria-current": isActive ? "page" : void 0,
+      ...isDisabled ? { "aria-disabled": true } : {},
+      className: cn(
+        "uxm-sidebar-nav-item",
+        isActive && "uxm-sidebar-nav-item--active",
+        state === "hover" && "uxm-sidebar-nav-item--state-hover",
+        state === "focus" && "uxm-sidebar-nav-item--state-focus"
+      ),
+      style: { pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uxm-sidebar-nav-item__icon", children: /* @__PURE__ */ jsx(Icon, { glyph: "grid" }) }),
+        /* @__PURE__ */ jsx("span", { className: "uxm-sidebar-nav-item__label", children: "Dashboard" })
+      ]
+    }
+  );
+}
+function SidebarNavItemPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const badgeVariant = variants.badge ?? "off";
+  const [activeKey, setActiveKey] = useState(INTERACTIVE_ITEMS[0].key);
+  const cssVars = buildVars(styles);
+  const badgeFor = (i) => {
+    if (badgeVariant === "check") return /* @__PURE__ */ jsx(Icon, { glyph: "check", size: 14 });
+    if (badgeVariant === "count") {
+      return /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontVariantNumeric: "tabular-nums" }, children: [3, 1, 8][i] ?? 0 });
+    }
+    return void 0;
+  };
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, minWidth: 260, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: INTERACTIVE_ITEMS.map((it, i) => /* @__PURE__ */ jsx(
+        SidebarNavItem,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            setActiveKey(it.key);
+          },
+          active: it.key === activeKey,
+          disabled: state === "disabled" && i === 1,
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: it.glyph }),
+          badge: badgeFor(i),
+          children: it.label
+        },
+        it.key
+      )) })
+    ] })
+  ] });
+}
+export {
+  SidebarNavItemPreview
+};
+//# sourceMappingURL=sidebar-nav-item-preview.js.map

package/dist/ui/sidebar-nav-item/sidebar-nav-item-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-item/sidebar-nav-item-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { SidebarNavItem } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst INTERACTIVE_ITEMS = [\n  { key: 'dashboard', label: 'Dashboard', glyph: 'grid' },\n  { key: 'motions', label: 'Revenue Motions', glyph: 'sparkle' },\n  { key: 'history', label: 'Business Interactions', glyph: 'history' },\n];\n\n/**\n * Project every registry knob as a `--uxm-sidebar-nav-item-*` custom\n * property on the wrapper. Both the static showcase and the interactive\n * list below read from the same vars; the showcase is inert so the\n * forced state isn't overridden by real input, and the interactive\n * list exercises `:hover` / `:focus-visible` / `:disabled` / `--active`\n * on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-sidebar-nav-item-inactive-bg': styles.inactiveBg as string,\n    '--uxm-sidebar-nav-item-inactive-text': styles.inactiveText as string,\n    '--uxm-sidebar-nav-item-hover-bg': styles.hoverBg as string,\n    '--uxm-sidebar-nav-item-hover-text': styles.hoverText as string,\n    '--uxm-sidebar-nav-item-focus-text': styles.focusText as string,\n    '--uxm-sidebar-nav-item-focus-ring': styles.focusRing as string,\n    '--uxm-sidebar-nav-item-active-bg': styles.activeBg as string,\n    '--uxm-sidebar-nav-item-active-text': styles.activeText as string,\n    '--uxm-sidebar-nav-item-disabled-bg': styles.disabledBg as string,\n    '--uxm-sidebar-nav-item-disabled-text': styles.disabledText as string,\n    '--uxm-sidebar-nav-item-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-sidebar-nav-item-border-radius': `${styles.borderRadius}px`,\n    '--uxm-sidebar-nav-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-sidebar-nav-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-sidebar-nav-item-gap': `${styles.gap}px`,\n    '--uxm-sidebar-nav-item-font-size': `${styles.fontSize}px`,\n    '--uxm-sidebar-nav-item-font-weight': styles.fontWeight as string,\n    '--uxm-sidebar-nav-item-icon-bg': styles.iconBg as string,\n    '--uxm-sidebar-nav-item-icon-color': styles.iconColor as string,\n    '--uxm-sidebar-nav-item-icon-box-size': `${styles.iconBoxSize}px`,\n    '--uxm-sidebar-nav-item-icon-radius': `${styles.iconRadius}px`,\n    '--uxm-sidebar-nav-item-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE nav item rendered with the forced-state class\n * matching the State dropdown. Inert: `pointer-events: none` blocks\n * `:hover` from firing on mouse-over and `tabIndex={-1}` keeps the\n * anchor out of the focus order so `:focus-visible` can't fire from\n * real keyboard input. Hand-rendered (not the real `<SidebarNavItem>`\n * atom) because the atom doesn't expose a way to set the showcase-only\n * `--state-*` modifier class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  const isActive = state === 'active';\n  const isDisabled = state === 'disabled';\n  return (\n    <a\n      href=\"#preview\"\n      onClick={(e) => e.preventDefault()}\n      tabIndex={-1}\n      aria-current={isActive ? 'page' : undefined}\n      {...(isDisabled ? { 'aria-disabled': true } : {})}\n      className={cn(\n        'uxm-sidebar-nav-item',\n        isActive && 'uxm-sidebar-nav-item--active',\n        state === 'hover' && 'uxm-sidebar-nav-item--state-hover',\n        state === 'focus' && 'uxm-sidebar-nav-item--state-focus',\n      )}\n      style={{ pointerEvents: 'none' }}\n    >\n      <span className=\"uxm-sidebar-nav-item__icon\">\n        <Icon glyph=\"grid\" />\n      </span>\n      <span className=\"uxm-sidebar-nav-item__label\">Dashboard</span>\n    </a>\n  );\n}\n\nexport function SidebarNavItemPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const badgeVariant = (variants.badge as string) ?? 'off';\n  const [activeKey, setActiveKey] = useState(INTERACTIVE_ITEMS[0].key);\n  const cssVars = buildVars(styles);\n\n  // Sample content for the persistent `badge` slot, driven by the Badge knob.\n  // A checkmark (status marker) or a small count pill — both render inline via\n  // `currentColor`, so the `--uxm-sidebar-nav-item-badge-color` default shows.\n  const badgeFor = (i: number) => {\n    if (badgeVariant === 'check') return <Icon glyph=\"check\" size={14} />;\n    if (badgeVariant === 'count') {\n      return (\n        <span style={{ fontSize: 11, fontVariantNumeric: 'tabular-nums' }}>{[3, 1, 8][i] ?? 0}</span>\n      );\n    }\n    return undefined;\n  };\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, minWidth: 260, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — three real <SidebarNavItem> atoms in a\n          vertical list. Real `:hover` / `:focus-visible` and the\n          aria-current=\"page\" active styling exercise the production\n          CSS via the projected vars above. Clicking a row makes it the\n          active item. The State dropdown only carries through to\n          `disabled` here (applied to the second item so the disabled\n          styling reads alongside enabled rows); the rest are exercised\n          by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n          {INTERACTIVE_ITEMS.map((it, i) => (\n            <SidebarNavItem\n              key={it.key}\n              href=\"#\"\n              onClick={(e) => {\n                e.preventDefault();\n                setActiveKey(it.key);\n              }}\n              active={it.key === activeKey}\n              disabled={state === 'disabled' && i === 1}\n              icon={<Icon glyph={it.glyph} />}\n              badge={badgeFor(i)}\n            >\n              {it.label}\n            </SidebarNavItem>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAgEI,SAeI,KAfJ;AAhEJ,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAI/B,MAAM,oBAAoB;AAAA,EACxB,EAAE,KAAK,aAAa,OAAO,aAAa,OAAO,OAAO;AAAA,EACtD,EAAE,KAAK,WAAW,OAAO,mBAAmB,OAAO,UAAU;AAAA,EAC7D,EAAE,KAAK,WAAW,OAAO,yBAAyB,OAAO,UAAU;AACrE;AAUA,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,sCAAsC,OAAO;AAAA,IAC7C,wCAAwC,OAAO;AAAA,IAC/C,mCAAmC,OAAO;AAAA,IAC1C,qCAAqC,OAAO;AAAA,IAC5C,qCAAqC,OAAO;AAAA,IAC5C,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCAAsC,OAAO;AAAA,IAC7C,sCAAsC,OAAO;AAAA,IAC7C,wCAAwC,OAAO;AAAA,IAC/C,2CACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,wCAAwC,GAAG,OAAO,YAAY;AAAA,IAC9D,oCAAoC,GAAG,OAAO,QAAQ;AAAA,IACtD,oCAAoC,GAAG,OAAO,QAAQ;AAAA,IACtD,8BAA8B,GAAG,OAAO,GAAG;AAAA,IAC3C,oCAAoC,GAAG,OAAO,QAAQ;AAAA,IACtD,sCAAsC,OAAO;AAAA,IAC7C,kCAAkC,OAAO;AAAA,IACzC,qCAAqC,OAAO;AAAA,IAC5C,wCAAwC,GAAG,OAAO,WAAW;AAAA,IAC7D,sCAAsC,GAAG,OAAO,UAAU;AAAA,IAC1D,oCAAoC,GAAG,OAAO,QAAQ;AAAA,EACxD;AACF;AAWA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,QAAM,WAAW,UAAU;AAC3B,QAAM,aAAa,UAAU;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,CAAC,MAAM,EAAE,eAAe;AAAA,MACjC,UAAU;AAAA,MACV,gBAAc,WAAW,SAAS;AAAA,MACjC,GAAI,aAAa,EAAE,iBAAiB,KAAK,IAAI,CAAC;AAAA,MAC/C,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,OAAO,EAAE,eAAe,OAAO;AAAA,MAE/B;AAAA,4BAAC,UAAK,WAAU,8BACd,8BAAC,QAAK,OAAM,QAAO,GACrB;AAAA,QACA,oBAAC,UAAK,WAAU,+BAA8B,uBAAS;AAAA;AAAA;AAAA,EACzD;AAEJ;AAEO,SAAS,sBAAsB,EAAE,QAAQ,SAAS,GAAiB;AACxE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,eAAgB,SAAS,SAAoB;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,kBAAkB,CAAC,EAAE,GAAG;AACnE,QAAM,UAAU,UAAU,MAAM;AAKhC,QAAM,WAAW,CAAC,MAAc;AAC9B,QAAI,iBAAiB,QAAS,QAAO,oBAAC,QAAK,OAAM,SAAQ,MAAM,IAAI;AACnE,QAAI,iBAAiB,SAAS;AAC5B,aACE,oBAAC,UAAK,OAAO,EAAE,UAAU,IAAI,oBAAoB,eAAe,GAAI,WAAC,GAAG,GAAG,CAAC,EAAE,CAAC,KAAK,GAAE;AAAA,IAE1F;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,UAAU,KAAK,GAAG,QAAQ,GACzF;AAAA,yBAAC,SACC;AAAA,2BAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,oBAAC,kBAAe,OAAc;AAAA,OAChC;AAAA,IAUA,qBAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,0BAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,EAAE,GAC5D,4BAAkB,IAAI,CAAC,IAAI,MAC1B;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,yBAAa,GAAG,GAAG;AAAA,UACrB;AAAA,UACA,QAAQ,GAAG,QAAQ;AAAA,UACnB,UAAU,UAAU,cAAc,MAAM;AAAA,UACxC,MAAM,oBAAC,QAAK,OAAO,GAAG,OAAO;AAAA,UAC7B,OAAO,SAAS,CAAC;AAAA,UAEhB,aAAG;AAAA;AAAA,QAXC,GAAG;AAAA,MAYV,CACD,GACH;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/sidebar-nav-item/sidebar-nav-item.cjs

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var sidebar_nav_item_exports = {};
+__export(sidebar_nav_item_exports, {
+  SidebarNavItem: () => SidebarNavItem
+});
+module.exports = __toCommonJS(sidebar_nav_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_badge = require("../badge/index.cjs");
+function SidebarNavItem({
+  as: Component = "a",
+  icon,
+  active,
+  disabled = false,
+  iconBg,
+  iconColor,
+  badge,
+  statusDot = false,
+  trailing,
+  children,
+  className,
+  ...rest
+}) {
+  const tileStyle = iconBg || iconColor ? { backgroundColor: iconBg, color: iconColor } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Component,
+    {
+      "aria-current": active ? "page" : void 0,
+      ...disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      className: (0, import_helpers.cn)("uxm-sidebar-nav-item", active && "uxm-sidebar-nav-item--active", className),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-sidebar-nav-item__icon", style: tileStyle, children: [
+          icon,
+          statusDot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_badge.Badge,
+            {
+              mode: "dot",
+              type: "accent",
+              "aria-hidden": true,
+              className: "uxm-sidebar-nav-item__icon-dot"
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-item__label", children }),
+        badge != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-item__badge", children: badge }),
+        trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-item__trailing", children: trailing })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarNavItem
+});
+//# sourceMappingURL=sidebar-nav-item.cjs.map

package/dist/ui/sidebar-nav-item/sidebar-nav-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-item/sidebar-nav-item.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Badge } from '../badge';\n\nimport type { AnchorHTMLAttributes, CSSProperties, ElementType, ReactNode } from 'react';\n\nexport interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  /** Icon node — typically <Icon glyph=\"...\" /> from @modo/uxm/ui. */\n  icon?: ReactNode;\n  active?: boolean;\n  /** Disabled items render `aria-disabled` so the CSS disabled rule\n   *  paints and `pointer-events: none` blocks interaction. */\n  disabled?: boolean;\n  /** Override the icon-tile background color for this item (e.g. model-type accent). */\n  iconBg?: string;\n  /** Override the icon (foreground) color for this item. */\n  iconColor?: string;\n  /**\n   * Persistent content after the label — for a status marker (a \"configured ✓\",\n   * a count, a small pill). Unlike `trailing` it does not fade on hover: it\n   * shows at rest, always. Renders before `trailing`, so a row can carry both a\n   * persistent badge and a hover-reveal × without them colliding. (This atom has\n   * no collapsed mode of its own; `AppSidebar` drops the inline badge in its\n   * collapsed rail and shows `statusDot` instead, since an inline marker\n   * wouldn't fit the icon tile.)\n   */\n  badge?: ReactNode;\n  /**\n   * Show a small status dot overlaid on the icon-tile corner (a `Badge` in\n   * `dot` mode). This is the compact stand-in for `badge` when there's no room\n   * for inline content — `AppSidebar` turns it on in its collapsed icon rail,\n   * where the full `badge` is dropped. Requires `icon` (it anchors to the tile).\n   */\n  statusDot?: boolean;\n  /**\n   * Optional trailing content rendered after the label — used for hover-reveal\n   * affordances like a × button on user-generated nav items. Hidden by default,\n   * fades in on row hover via CSS.\n   */\n  trailing?: ReactNode;\n  /**\n   * Element type used for the outer link. Defaults to `'a'`. Pass a router\n   * Link component (e.g. `next/link`'s `Link`) so clicks navigate without\n   * a full page reload — full reloads tear down providers and visibly\n   * re-hydrate sidebar state.\n   *\n   * Kept as a knob (rather than a hardcoded next/link import) so the UXM\n   * library stays framework-neutral. The consumer wires the routing primitive.\n   */\n  as?: ElementType;\n  children: ReactNode;\n}\n\nexport function SidebarNavItem({\n  as: Component = 'a',\n  icon,\n  active,\n  disabled = false,\n  iconBg,\n  iconColor,\n  badge,\n  statusDot = false,\n  trailing,\n  children,\n  className,\n  ...rest\n}: SidebarNavItemProps) {\n  const tileStyle: CSSProperties | undefined = (iconBg || iconColor)\n    ? { backgroundColor: iconBg, color: iconColor }\n    : undefined;\n  return (\n    <Component\n      aria-current={active ? 'page' : undefined}\n      {...(disabled ? { 'aria-disabled': true as const, tabIndex: -1 } : {})}\n      className={cn('uxm-sidebar-nav-item', active && 'uxm-sidebar-nav-item--active', className)}\n      {...rest}\n    >\n      {icon && (\n        <span className=\"uxm-sidebar-nav-item__icon\" style={tileStyle}>\n          {icon}\n          {statusDot && (\n            <Badge\n              mode=\"dot\"\n              type=\"accent\"\n              aria-hidden\n              className=\"uxm-sidebar-nav-item__icon-dot\"\n            />\n          )}\n        </span>\n      )}\n      {children && <span className=\"uxm-sidebar-nav-item__label\">{children}</span>}\n      {/* `!= null` (not a truthy guard): badge may be a numeric count, and a\n          truthy `&&` would render a bare \"0\" for count 0 instead of nothing. */}\n      {badge != null && <span className=\"uxm-sidebar-nav-item__badge\">{badge}</span>}\n      {trailing && <span className=\"uxm-sidebar-nav-item__trailing\">{trailing}</span>}\n    </Component>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EQ;AA9ER,qBAAmB;AAEnB,mBAAsB;AAmDf,SAAS,eAAe;AAAA,EAC7B,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAwC,UAAU,YACpD,EAAE,iBAAiB,QAAQ,OAAO,UAAU,IAC5C;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,SAAS,SAAS;AAAA,MAC/B,GAAI,WAAW,EAAE,iBAAiB,MAAe,UAAU,GAAG,IAAI,CAAC;AAAA,MACpE,eAAW,mBAAG,wBAAwB,UAAU,gCAAgC,SAAS;AAAA,MACxF,GAAG;AAAA,MAEH;AAAA,gBACC,6CAAC,UAAK,WAAU,8BAA6B,OAAO,WACjD;AAAA;AAAA,UACA,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,WAEJ;AAAA,QAED,YAAY,4CAAC,UAAK,WAAU,+BAA+B,UAAS;AAAA,QAGpE,SAAS,QAAQ,4CAAC,UAAK,WAAU,+BAA+B,iBAAM;AAAA,QACtE,YAAY,4CAAC,UAAK,WAAU,kCAAkC,oBAAS;AAAA;AAAA;AAAA,EAC1E;AAEJ;","names":[]}

package/dist/ui/sidebar-nav-item/sidebar-nav-item.css

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+/* ── sidebar-nav-item ── */
+.uxm-sidebar-nav-item {
+  align-items: center;
+  background-color: var(--uxm-sidebar-nav-item-inactive-bg, transparent);
+  border-radius: var(--uxm-sidebar-nav-item-border-radius, 8px);
+  color: var(--uxm-sidebar-nav-item-inactive-text, var(--color-text-strong));
+  cursor: pointer;
+  display: flex;
+  font-size: calc(var(--uxm-sidebar-nav-item-font-size, 13px) * var(--type-scale, 1));
+  font-weight: var(--uxm-sidebar-nav-item-font-weight, 500);
+  gap: var(--uxm-sidebar-nav-item-gap, 10px);
+  padding: var(--uxm-sidebar-nav-item-padding-y, 10px) var(--uxm-sidebar-nav-item-padding-x, 12px);
+  text-decoration: none;
+  transition: background-color 0.15s, color 0.15s;
+}
+.uxm-sidebar-nav-item:hover {
+  background-color: var(--uxm-sidebar-nav-item-hover-bg, color-mix(in srgb, var(--color-surface) 60%, transparent));
+  color: var(--uxm-sidebar-nav-item-hover-text, var(--color-text));
+}
+.uxm-sidebar-nav-item:focus-visible {
+  color: var(--uxm-sidebar-nav-item-focus-text, var(--color-text));
+  outline: 2px solid var(--uxm-sidebar-nav-item-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-sidebar-nav-item:disabled, .uxm-sidebar-nav-item[aria-disabled=true] {
+  background-color: var(--uxm-sidebar-nav-item-disabled-bg, transparent);
+  color: var(--uxm-sidebar-nav-item-disabled-text, var(--color-text-muted));
+  opacity: var(--uxm-sidebar-nav-item-disabled-opacity, 0.5);
+  pointer-events: none;
+}
+.uxm-sidebar-nav-item--active {
+  background-color: var(--uxm-sidebar-nav-item-active-bg, var(--color-surface));
+  color: var(--uxm-sidebar-nav-item-active-text, var(--color-text));
+}
+.uxm-sidebar-nav-item__icon {
+  align-items: center;
+  background-color: var(--uxm-sidebar-nav-item-icon-bg, color-mix(in srgb, var(--color-text) 6%, transparent));
+  border-radius: var(--uxm-sidebar-nav-item-icon-radius, 6px);
+  color: var(--uxm-sidebar-nav-item-icon-color, var(--color-text));
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-sidebar-nav-item-icon-box-size, 24px);
+  justify-content: center;
+  padding: 4px;
+  /* Anchor for the corner status dot below. */
+  position: relative;
+  width: var(--uxm-sidebar-nav-item-icon-box-size, 24px);
+}
+.uxm-sidebar-nav-item__icon > svg {
+  height: var(--uxm-sidebar-nav-item-icon-size, 14px);
+  width: var(--uxm-sidebar-nav-item-icon-size, 14px);
+}
+.uxm-sidebar-nav-item {
+  /* Status dot (a `Badge` in dot mode) overlaid on the icon-tile corner — the
+     compact stand-in for `badge` in the collapsed rail. Nudged past the tile
+     edge so it reads as an overlay, not tile content. Size via the Badge atom's
+     own `--uxm-badge-dot-size`. */
+}
+.uxm-sidebar-nav-item__icon-dot {
+  position: absolute;
+  right: -2px;
+  top: -2px;
+  --uxm-badge-dot-size: 8px;
+}
+.uxm-sidebar-nav-item__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uxm-sidebar-nav-item {
+  /* Persistent status marker after the label. Unlike `__trailing` it has NO
+     opacity gate — always visible, including in the collapsed rail. Colour is
+     token-first so a consumer can retint it (or pass already-coloured content);
+     defaults to the muted text token. */
+}
+.uxm-sidebar-nav-item__badge {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--uxm-sidebar-nav-item-badge-color, var(--color-text-muted));
+}
+.uxm-sidebar-nav-item__trailing {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.uxm-sidebar-nav-item:hover .uxm-sidebar-nav-item__trailing, .uxm-sidebar-nav-item:focus-within .uxm-sidebar-nav-item__trailing {
+  opacity: 1;
+}

package/dist/ui/sidebar-nav-item/sidebar-nav-item.d.ts

@@ -0,0 +1,49 @@
+import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+export interface SidebarNavItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Icon node — typically <Icon glyph="..." /> from @modo/uxm/ui. */
+    icon?: ReactNode;
+    active?: boolean;
+    /** Disabled items render `aria-disabled` so the CSS disabled rule
+     *  paints and `pointer-events: none` blocks interaction. */
+    disabled?: boolean;
+    /** Override the icon-tile background color for this item (e.g. model-type accent). */
+    iconBg?: string;
+    /** Override the icon (foreground) color for this item. */
+    iconColor?: string;
+    /**
+     * Persistent content after the label — for a status marker (a "configured ✓",
+     * a count, a small pill). Unlike `trailing` it does not fade on hover: it
+     * shows at rest, always. Renders before `trailing`, so a row can carry both a
+     * persistent badge and a hover-reveal × without them colliding. (This atom has
+     * no collapsed mode of its own; `AppSidebar` drops the inline badge in its
+     * collapsed rail and shows `statusDot` instead, since an inline marker
+     * wouldn't fit the icon tile.)
+     */
+    badge?: ReactNode;
+    /**
+     * Show a small status dot overlaid on the icon-tile corner (a `Badge` in
+     * `dot` mode). This is the compact stand-in for `badge` when there's no room
+     * for inline content — `AppSidebar` turns it on in its collapsed icon rail,
+     * where the full `badge` is dropped. Requires `icon` (it anchors to the tile).
+     */
+    statusDot?: boolean;
+    /**
+     * Optional trailing content rendered after the label — used for hover-reveal
+     * affordances like a × button on user-generated nav items. Hidden by default,
+     * fades in on row hover via CSS.
+     */
+    trailing?: ReactNode;
+    /**
+     * Element type used for the outer link. Defaults to `'a'`. Pass a router
+     * Link component (e.g. `next/link`'s `Link`) so clicks navigate without
+     * a full page reload — full reloads tear down providers and visibly
+     * re-hydrate sidebar state.
+     *
+     * Kept as a knob (rather than a hardcoded next/link import) so the UXM
+     * library stays framework-neutral. The consumer wires the routing primitive.
+     */
+    as?: ElementType;
+    children: ReactNode;
+}
+export declare function SidebarNavItem({ as: Component, icon, active, disabled, iconBg, iconColor, badge, statusDot, trailing, children, className, ...rest }: SidebarNavItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-nav-item.d.ts.map

package/dist/ui/sidebar-nav-item/sidebar-nav-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav-item.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebar-nav-item/sidebar-nav-item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzF,MAAM,WAAW,mBAAoB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;gEAC4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAC7B,EAAE,EAAE,SAAe,EACnB,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,mBAAmB,2CA+BrB"}

package/dist/ui/sidebar-nav-item/sidebar-nav-item.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Badge } from "../badge/index.js";
+function SidebarNavItem({
+  as: Component = "a",
+  icon,
+  active,
+  disabled = false,
+  iconBg,
+  iconColor,
+  badge,
+  statusDot = false,
+  trailing,
+  children,
+  className,
+  ...rest
+}) {
+  const tileStyle = iconBg || iconColor ? { backgroundColor: iconBg, color: iconColor } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      "aria-current": active ? "page" : void 0,
+      ...disabled ? { "aria-disabled": true, tabIndex: -1 } : {},
+      className: cn("uxm-sidebar-nav-item", active && "uxm-sidebar-nav-item--active", className),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsxs("span", { className: "uxm-sidebar-nav-item__icon", style: tileStyle, children: [
+          icon,
+          statusDot && /* @__PURE__ */ jsx(
+            Badge,
+            {
+              mode: "dot",
+              type: "accent",
+              "aria-hidden": true,
+              className: "uxm-sidebar-nav-item__icon-dot"
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx("span", { className: "uxm-sidebar-nav-item__label", children }),
+        badge != null && /* @__PURE__ */ jsx("span", { className: "uxm-sidebar-nav-item__badge", children: badge }),
+        trailing && /* @__PURE__ */ jsx("span", { className: "uxm-sidebar-nav-item__trailing", children: trailing })
+      ]
+    }
+  );
+}
+export {
+  SidebarNavItem
+};
+//# sourceMappingURL=sidebar-nav-item.js.map