@viax.io/uxm 4.36.0

package/dist/ui/sidebar-nav-item/sidebar-nav-item.js.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":"AA8EQ,SAGI,KAHJ;AA9ER,SAAS,UAAU;AAEnB,SAAS,aAAa;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,WAAW,GAAG,wBAAwB,UAAU,gCAAgC,SAAS;AAAA,MACxF,GAAG;AAAA,MAEH;AAAA,gBACC,qBAAC,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,oBAAC,UAAK,WAAU,+BAA+B,UAAS;AAAA,QAGpE,SAAS,QAAQ,oBAAC,UAAK,WAAU,+BAA+B,iBAAM;AAAA,QACtE,YAAY,oBAAC,UAAK,WAAU,kCAAkC,oBAAS;AAAA;AAAA;AAAA,EAC1E;AAEJ;","names":[]}

package/dist/ui/sidebar-nav-trigger/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_trigger_exports = {};
+module.exports = __toCommonJS(sidebar_nav_trigger_exports);
+__reExport(sidebar_nav_trigger_exports, require("./sidebar-nav-trigger.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./sidebar-nav-trigger.cjs")
+});
+//# sourceMappingURL=index.cjs.map

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,104 @@
+"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_trigger_preview_exports = {};
+__export(sidebar_nav_trigger_preview_exports, {
+  SidebarNavTriggerPreview: () => SidebarNavTriggerPreview
+});
+module.exports = __toCommonJS(sidebar_nav_trigger_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_sidebar_nav_trigger = require("./sidebar-nav-trigger.cjs");
+function buildVars(styles) {
+  return {
+    "--uxm-sidebar-nav-trigger-padding-x": `${styles.paddingX}px`,
+    "--uxm-sidebar-nav-trigger-padding-y": `${styles.paddingY}px`,
+    "--uxm-sidebar-nav-trigger-gap": `${styles.gap}px`,
+    "--uxm-sidebar-nav-trigger-border-radius": `${styles.borderRadius}px`,
+    "--uxm-sidebar-nav-trigger-bg": styles.bg,
+    "--uxm-sidebar-nav-trigger-hover-bg": styles.hoverBg,
+    "--uxm-sidebar-nav-trigger-outlined-bg": styles.outlinedBg,
+    "--uxm-sidebar-nav-trigger-outlined-border": styles.outlinedBorder,
+    "--uxm-sidebar-nav-trigger-focus-ring": styles.focusRing,
+    "--uxm-sidebar-nav-trigger-font-size": `${styles.fontSize}px`,
+    "--uxm-sidebar-nav-trigger-font-weight": styles.fontWeight,
+    "--uxm-sidebar-nav-trigger-value-color": styles.valueColor,
+    "--uxm-sidebar-nav-trigger-caption-font-size": `${styles.captionFontSize}px`,
+    "--uxm-sidebar-nav-trigger-caption-font-weight": styles.captionFontWeight,
+    "--uxm-sidebar-nav-trigger-caption-letter-spacing": `${styles.captionLetterSpacing}em`,
+    "--uxm-sidebar-nav-trigger-caption-text-transform": styles.captionTextTransform,
+    "--uxm-sidebar-nav-trigger-caption-color": styles.captionColor,
+    "--uxm-sidebar-nav-trigger-caption-gap": `${styles.captionGap}px`,
+    "--uxm-sidebar-nav-trigger-collapsed-size": `${styles.collapsedSize}px`,
+    "--uxm-sidebar-nav-trigger-icon-size": `${styles.iconSize}px`,
+    "--uxm-sidebar-nav-trigger-icon-color": styles.iconColor,
+    "--uxm-sidebar-nav-trigger-trailing-color": styles.trailingColor
+  };
+}
+function SidebarNavTriggerPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const variant = variants.variant ?? "outlined";
+  const mark = variants.mark ?? "icon";
+  const withCaption = (variants.withCaption ?? "yes") === "yes";
+  const captionPlacement = variants.captionPlacement ?? "above";
+  const withTrailing = (variants.withTrailing ?? "yes") === "yes";
+  const collapsed = (variants.collapsed ?? "no") === "yes";
+  const isAccount = mark === "avatar";
+  const markNode = isAccount ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Avatar, { initials: "DR", size: collapsed ? "small" : "medium" }) : mark === "icon" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "product", size: 18 }) : void 0;
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+      state,
+      " state \xB7 ",
+      variant,
+      collapsed ? " \xB7 collapsed" : ""
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: collapsed ? 64 : 260 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_sidebar_nav_trigger.SidebarNavTrigger,
+      {
+        variant,
+        collapsed,
+        title: collapsed ? isAccount ? "dan@acme.com" : "order-processing" : void 0,
+        "aria-expanded": state === "open" ? true : void 0,
+        disabled: state === "disabled" || void 0,
+        className: (0, import_helpers.cn)(
+          state === "hover" && "uxm-sidebar-nav-trigger--state-hover",
+          state === "focus" && "uxm-sidebar-nav-trigger--state-focus"
+        ),
+        icon: markNode,
+        caption: withCaption ? isAccount ? "Tenant owner" : "Workspace" : void 0,
+        captionPlacement,
+        trailing: withTrailing ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "chevron-down", size: 16 }) : void 0,
+        children: isAccount ? "dan@acme.com" : "order-processing"
+      }
+    ) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarNavTriggerPreview
+});
+//# sourceMappingURL=sidebar-nav-trigger-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-trigger/sidebar-nav-trigger-preview.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Avatar, Icon } from '@/ui';\n\nimport { SidebarNavTrigger, type SidebarNavTriggerVariant } from './sidebar-nav-trigger';\n\nimport type { CSSProperties } from 'react';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-sidebar-nav-trigger-{kebab(key)}`, which is exactly what generate-css's\n * kebab fallback produces — so no PER_COMPONENT_MAPPING entry is needed.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-sidebar-nav-trigger-padding-x': `${styles.paddingX}px`,\n    '--uxm-sidebar-nav-trigger-padding-y': `${styles.paddingY}px`,\n    '--uxm-sidebar-nav-trigger-gap': `${styles.gap}px`,\n    '--uxm-sidebar-nav-trigger-border-radius': `${styles.borderRadius}px`,\n\n    '--uxm-sidebar-nav-trigger-bg': styles.bg as string,\n    '--uxm-sidebar-nav-trigger-hover-bg': styles.hoverBg as string,\n    '--uxm-sidebar-nav-trigger-outlined-bg': styles.outlinedBg as string,\n    '--uxm-sidebar-nav-trigger-outlined-border': styles.outlinedBorder as string,\n    '--uxm-sidebar-nav-trigger-focus-ring': styles.focusRing as string,\n\n    '--uxm-sidebar-nav-trigger-font-size': `${styles.fontSize}px`,\n    '--uxm-sidebar-nav-trigger-font-weight': styles.fontWeight as string,\n    '--uxm-sidebar-nav-trigger-value-color': styles.valueColor as string,\n\n    '--uxm-sidebar-nav-trigger-caption-font-size': `${styles.captionFontSize}px`,\n    '--uxm-sidebar-nav-trigger-caption-font-weight': styles.captionFontWeight as string,\n    '--uxm-sidebar-nav-trigger-caption-letter-spacing': `${styles.captionLetterSpacing}em`,\n    '--uxm-sidebar-nav-trigger-caption-text-transform': styles.captionTextTransform as string,\n    '--uxm-sidebar-nav-trigger-caption-color': styles.captionColor as string,\n    '--uxm-sidebar-nav-trigger-caption-gap': `${styles.captionGap}px`,\n\n    '--uxm-sidebar-nav-trigger-collapsed-size': `${styles.collapsedSize}px`,\n\n    '--uxm-sidebar-nav-trigger-icon-size': `${styles.iconSize}px`,\n    '--uxm-sidebar-nav-trigger-icon-color': styles.iconColor as string,\n    '--uxm-sidebar-nav-trigger-trailing-color': styles.trailingColor as string,\n  } as CSSProperties;\n}\n\n/**\n * ONE specimen, driven entirely by the pickers.\n *\n * It used to be two rows — a switcher above an account row — to show that one\n * component serves both ends of the rail. But only the first row followed\n * `variant` and `state`, while the slot toggles moved both, so nothing told you\n * which picker reached which row. A showcase that is half-driven is worse than\n * one that shows less: the reader cannot trust what they are looking at.\n *\n * The account case is not lost, it moved into a picker. `mark` chooses `Icon`,\n * `Avatar` or nothing — and `Avatar` is the case worth keeping, since it proves\n * the slot paints no tile and does not squeeze a child that brings its own\n * size. The caption and value follow the mark, because an avatar beside a\n * workspace name would misrepresent what the atom is for.\n *\n * `open` and `disabled` are applied as the real `aria-expanded=\"true\"` and\n * `disabled` attributes rather than classes — those ARE the atom's selectors for\n * those states, so the picker exercises the production mechanism instead of\n * imitating it. Only hover and focus need the atom's `--state-hover` /\n * `--state-focus` classes, since neither a pointer nor the tab ring can be\n * parked where the picker wants them; those share a declaration block with the\n * real pseudo-selectors, so a forced state cannot drift from the real one.\n */\nexport function SidebarNavTriggerPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = (variants.state as string) ?? 'default';\n  const variant = ((variants.variant as string) ?? 'outlined') as SidebarNavTriggerVariant;\n  const mark = (variants.mark as string) ?? 'icon';\n  const withCaption = (variants.withCaption ?? 'yes') === 'yes';\n  const captionPlacement = ((variants.captionPlacement as string) ?? 'above') as 'above' | 'below';\n  const withTrailing = (variants.withTrailing ?? 'yes') === 'yes';\n  const collapsed = (variants.collapsed ?? 'no') === 'yes';\n\n  const isAccount = mark === 'avatar';\n  const markNode = isAccount\n    // `small` (32px) in the collapsed rail, inside the 46px tile — the tile is\n    // a surface AROUND the mark, not a frame hugging it. Sizing the mark is the\n    // consumer's call; the atom will not shrink one for them.\n    ? <Avatar initials=\"DR\" size={collapsed ? 'small' : 'medium'} />\n    : mark === 'icon'\n      ? <Icon glyph=\"product\" size={18} />\n      : undefined;\n\n  const cssVars = buildVars(styles);\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>\n          {state} state · {variant}{collapsed ? ' · collapsed' : ''}\n        </div>\n        {/* A rail-width column: these rows are always full-bleed inside a\n            sidebar, and reviewing one at page width would hide every\n            truncation decision the atom makes. Collapsed drops to the 64px\n            rail `app-sidebar` actually uses — reviewing that mode at 260px\n            would hide the only thing it changes. */}\n        <div style={{ width: collapsed ? 64 : 260 }}>\n          <SidebarNavTrigger\n            variant={variant}\n            collapsed={collapsed}\n            title={collapsed ? (isAccount ? 'dan@acme.com' : 'order-processing') : undefined}\n            aria-expanded={state === 'open' ? true : undefined}\n            disabled={state === 'disabled' || undefined}\n            className={cn(\n              state === 'hover' && 'uxm-sidebar-nav-trigger--state-hover',\n              state === 'focus' && 'uxm-sidebar-nav-trigger--state-focus',\n            )}\n            icon={markNode}\n            caption={withCaption ? (isAccount ? 'Tenant owner' : 'Workspace') : undefined}\n            captionPlacement={captionPlacement}\n            trailing={withTrailing ? <Icon glyph=\"chevron-down\" size={16} /> : undefined}\n          >\n            {isAccount ? 'dan@acme.com' : 'order-processing'}\n          </SidebarNavTrigger>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoFM;AApFN,qBAAmB;AAEnB,gBAA6B;AAE7B,iCAAiE;AAWjE,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,iCAAiC,GAAG,OAAO,GAAG;AAAA,IAC9C,2CAA2C,GAAG,OAAO,YAAY;AAAA,IAEjE,gCAAgC,OAAO;AAAA,IACvC,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAChD,6CAA6C,OAAO;AAAA,IACpD,wCAAwC,OAAO;AAAA,IAE/C,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,yCAAyC,OAAO;AAAA,IAChD,yCAAyC,OAAO;AAAA,IAEhD,+CAA+C,GAAG,OAAO,eAAe;AAAA,IACxE,iDAAiD,OAAO;AAAA,IACxD,oDAAoD,GAAG,OAAO,oBAAoB;AAAA,IAClF,oDAAoD,OAAO;AAAA,IAC3D,2CAA2C,OAAO;AAAA,IAClD,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAE7D,4CAA4C,GAAG,OAAO,aAAa;AAAA,IAEnE,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,wCAAwC,OAAO;AAAA,IAC/C,4CAA4C,OAAO;AAAA,EACrD;AACF;AAyBO,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAA2C;AACrG,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAY,SAAS,WAAsB;AACjD,QAAM,OAAQ,SAAS,QAAmB;AAC1C,QAAM,eAAe,SAAS,eAAe,WAAW;AACxD,QAAM,mBAAqB,SAAS,oBAA+B;AACnE,QAAM,gBAAgB,SAAS,gBAAgB,WAAW;AAC1D,QAAM,aAAa,SAAS,aAAa,UAAU;AAEnD,QAAM,YAAY,SAAS;AAC3B,QAAM,WAAW,YAIb,4CAAC,oBAAO,UAAS,MAAK,MAAM,YAAY,UAAU,UAAU,IAC5D,SAAS,SACP,4CAAC,kBAAK,OAAM,WAAU,MAAM,IAAI,IAChC;AAEN,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAA8B;AAAA,IAClC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E,uDAAC,SACC;AAAA,iDAAC,SAAI,OAAO,cACT;AAAA;AAAA,MAAM;AAAA,MAAU;AAAA,MAAS,YAAY,oBAAiB;AAAA,OACzD;AAAA,IAMA,4CAAC,SAAI,OAAO,EAAE,OAAO,YAAY,KAAK,IAAI,GACxC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,YAAa,YAAY,iBAAiB,qBAAsB;AAAA,QACvE,iBAAe,UAAU,SAAS,OAAO;AAAA,QACzC,UAAU,UAAU,cAAc;AAAA,QAClC,eAAW;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,UAAU,WAAW;AAAA,QACvB;AAAA,QACA,MAAM;AAAA,QACN,SAAS,cAAe,YAAY,iBAAiB,cAAe;AAAA,QACpE;AAAA,QACA,UAAU,eAAe,4CAAC,kBAAK,OAAM,gBAAe,MAAM,IAAI,IAAK;AAAA,QAElE,sBAAY,iBAAiB;AAAA;AAAA,IAChC,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,28 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * ONE specimen, driven entirely by the pickers.
+ *
+ * It used to be two rows — a switcher above an account row — to show that one
+ * component serves both ends of the rail. But only the first row followed
+ * `variant` and `state`, while the slot toggles moved both, so nothing told you
+ * which picker reached which row. A showcase that is half-driven is worse than
+ * one that shows less: the reader cannot trust what they are looking at.
+ *
+ * The account case is not lost, it moved into a picker. `mark` chooses `Icon`,
+ * `Avatar` or nothing — and `Avatar` is the case worth keeping, since it proves
+ * the slot paints no tile and does not squeeze a child that brings its own
+ * size. The caption and value follow the mark, because an avatar beside a
+ * workspace name would misrepresent what the atom is for.
+ *
+ * `open` and `disabled` are applied as the real `aria-expanded="true"` and
+ * `disabled` attributes rather than classes — those ARE the atom's selectors for
+ * those states, so the picker exercises the production mechanism instead of
+ * imitating it. Only hover and focus need the atom's `--state-hover` /
+ * `--state-focus` classes, since neither a pointer nor the tab ring can be
+ * parked where the picker wants them; those share a declaration block with the
+ * real pseudo-selectors, so a forced state cannot drift from the real one.
+ */
+export declare function SidebarNavTriggerPreview({ styles, variants }: PreviewProps & {
+    componentId: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=sidebar-nav-trigger-preview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-nav-trigger-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/sidebar-nav-trigger/sidebar-nav-trigger-preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA8CrD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,2CA8DpG"}

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

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Avatar, Icon } from "../../ui/index.js";
+import { SidebarNavTrigger } from "./sidebar-nav-trigger.js";
+function buildVars(styles) {
+  return {
+    "--uxm-sidebar-nav-trigger-padding-x": `${styles.paddingX}px`,
+    "--uxm-sidebar-nav-trigger-padding-y": `${styles.paddingY}px`,
+    "--uxm-sidebar-nav-trigger-gap": `${styles.gap}px`,
+    "--uxm-sidebar-nav-trigger-border-radius": `${styles.borderRadius}px`,
+    "--uxm-sidebar-nav-trigger-bg": styles.bg,
+    "--uxm-sidebar-nav-trigger-hover-bg": styles.hoverBg,
+    "--uxm-sidebar-nav-trigger-outlined-bg": styles.outlinedBg,
+    "--uxm-sidebar-nav-trigger-outlined-border": styles.outlinedBorder,
+    "--uxm-sidebar-nav-trigger-focus-ring": styles.focusRing,
+    "--uxm-sidebar-nav-trigger-font-size": `${styles.fontSize}px`,
+    "--uxm-sidebar-nav-trigger-font-weight": styles.fontWeight,
+    "--uxm-sidebar-nav-trigger-value-color": styles.valueColor,
+    "--uxm-sidebar-nav-trigger-caption-font-size": `${styles.captionFontSize}px`,
+    "--uxm-sidebar-nav-trigger-caption-font-weight": styles.captionFontWeight,
+    "--uxm-sidebar-nav-trigger-caption-letter-spacing": `${styles.captionLetterSpacing}em`,
+    "--uxm-sidebar-nav-trigger-caption-text-transform": styles.captionTextTransform,
+    "--uxm-sidebar-nav-trigger-caption-color": styles.captionColor,
+    "--uxm-sidebar-nav-trigger-caption-gap": `${styles.captionGap}px`,
+    "--uxm-sidebar-nav-trigger-collapsed-size": `${styles.collapsedSize}px`,
+    "--uxm-sidebar-nav-trigger-icon-size": `${styles.iconSize}px`,
+    "--uxm-sidebar-nav-trigger-icon-color": styles.iconColor,
+    "--uxm-sidebar-nav-trigger-trailing-color": styles.trailingColor
+  };
+}
+function SidebarNavTriggerPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const variant = variants.variant ?? "outlined";
+  const mark = variants.mark ?? "icon";
+  const withCaption = (variants.withCaption ?? "yes") === "yes";
+  const captionPlacement = variants.captionPlacement ?? "above";
+  const withTrailing = (variants.withTrailing ?? "yes") === "yes";
+  const collapsed = (variants.collapsed ?? "no") === "yes";
+  const isAccount = mark === "avatar";
+  const markNode = isAccount ? /* @__PURE__ */ jsx(Avatar, { initials: "DR", size: collapsed ? "small" : "medium" }) : mark === "icon" ? /* @__PURE__ */ jsx(Icon, { glyph: "product", size: 18 }) : void 0;
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+      state,
+      " state \xB7 ",
+      variant,
+      collapsed ? " \xB7 collapsed" : ""
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { width: collapsed ? 64 : 260 }, children: /* @__PURE__ */ jsx(
+      SidebarNavTrigger,
+      {
+        variant,
+        collapsed,
+        title: collapsed ? isAccount ? "dan@acme.com" : "order-processing" : void 0,
+        "aria-expanded": state === "open" ? true : void 0,
+        disabled: state === "disabled" || void 0,
+        className: cn(
+          state === "hover" && "uxm-sidebar-nav-trigger--state-hover",
+          state === "focus" && "uxm-sidebar-nav-trigger--state-focus"
+        ),
+        icon: markNode,
+        caption: withCaption ? isAccount ? "Tenant owner" : "Workspace" : void 0,
+        captionPlacement,
+        trailing: withTrailing ? /* @__PURE__ */ jsx(Icon, { glyph: "chevron-down", size: 16 }) : void 0,
+        children: isAccount ? "dan@acme.com" : "order-processing"
+      }
+    ) })
+  ] }) });
+}
+export {
+  SidebarNavTriggerPreview
+};
+//# sourceMappingURL=sidebar-nav-trigger-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-trigger/sidebar-nav-trigger-preview.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Avatar, Icon } from '@/ui';\n\nimport { SidebarNavTrigger, type SidebarNavTriggerVariant } from './sidebar-nav-trigger';\n\nimport type { CSSProperties } from 'react';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto its CSS custom property. Names follow\n * `--uxm-sidebar-nav-trigger-{kebab(key)}`, which is exactly what generate-css's\n * kebab fallback produces — so no PER_COMPONENT_MAPPING entry is needed.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-sidebar-nav-trigger-padding-x': `${styles.paddingX}px`,\n    '--uxm-sidebar-nav-trigger-padding-y': `${styles.paddingY}px`,\n    '--uxm-sidebar-nav-trigger-gap': `${styles.gap}px`,\n    '--uxm-sidebar-nav-trigger-border-radius': `${styles.borderRadius}px`,\n\n    '--uxm-sidebar-nav-trigger-bg': styles.bg as string,\n    '--uxm-sidebar-nav-trigger-hover-bg': styles.hoverBg as string,\n    '--uxm-sidebar-nav-trigger-outlined-bg': styles.outlinedBg as string,\n    '--uxm-sidebar-nav-trigger-outlined-border': styles.outlinedBorder as string,\n    '--uxm-sidebar-nav-trigger-focus-ring': styles.focusRing as string,\n\n    '--uxm-sidebar-nav-trigger-font-size': `${styles.fontSize}px`,\n    '--uxm-sidebar-nav-trigger-font-weight': styles.fontWeight as string,\n    '--uxm-sidebar-nav-trigger-value-color': styles.valueColor as string,\n\n    '--uxm-sidebar-nav-trigger-caption-font-size': `${styles.captionFontSize}px`,\n    '--uxm-sidebar-nav-trigger-caption-font-weight': styles.captionFontWeight as string,\n    '--uxm-sidebar-nav-trigger-caption-letter-spacing': `${styles.captionLetterSpacing}em`,\n    '--uxm-sidebar-nav-trigger-caption-text-transform': styles.captionTextTransform as string,\n    '--uxm-sidebar-nav-trigger-caption-color': styles.captionColor as string,\n    '--uxm-sidebar-nav-trigger-caption-gap': `${styles.captionGap}px`,\n\n    '--uxm-sidebar-nav-trigger-collapsed-size': `${styles.collapsedSize}px`,\n\n    '--uxm-sidebar-nav-trigger-icon-size': `${styles.iconSize}px`,\n    '--uxm-sidebar-nav-trigger-icon-color': styles.iconColor as string,\n    '--uxm-sidebar-nav-trigger-trailing-color': styles.trailingColor as string,\n  } as CSSProperties;\n}\n\n/**\n * ONE specimen, driven entirely by the pickers.\n *\n * It used to be two rows — a switcher above an account row — to show that one\n * component serves both ends of the rail. But only the first row followed\n * `variant` and `state`, while the slot toggles moved both, so nothing told you\n * which picker reached which row. A showcase that is half-driven is worse than\n * one that shows less: the reader cannot trust what they are looking at.\n *\n * The account case is not lost, it moved into a picker. `mark` chooses `Icon`,\n * `Avatar` or nothing — and `Avatar` is the case worth keeping, since it proves\n * the slot paints no tile and does not squeeze a child that brings its own\n * size. The caption and value follow the mark, because an avatar beside a\n * workspace name would misrepresent what the atom is for.\n *\n * `open` and `disabled` are applied as the real `aria-expanded=\"true\"` and\n * `disabled` attributes rather than classes — those ARE the atom's selectors for\n * those states, so the picker exercises the production mechanism instead of\n * imitating it. Only hover and focus need the atom's `--state-hover` /\n * `--state-focus` classes, since neither a pointer nor the tab ring can be\n * parked where the picker wants them; those share a declaration block with the\n * real pseudo-selectors, so a forced state cannot drift from the real one.\n */\nexport function SidebarNavTriggerPreview({ styles, variants }: PreviewProps & { componentId: string }) {\n  const state = (variants.state as string) ?? 'default';\n  const variant = ((variants.variant as string) ?? 'outlined') as SidebarNavTriggerVariant;\n  const mark = (variants.mark as string) ?? 'icon';\n  const withCaption = (variants.withCaption ?? 'yes') === 'yes';\n  const captionPlacement = ((variants.captionPlacement as string) ?? 'above') as 'above' | 'below';\n  const withTrailing = (variants.withTrailing ?? 'yes') === 'yes';\n  const collapsed = (variants.collapsed ?? 'no') === 'yes';\n\n  const isAccount = mark === 'avatar';\n  const markNode = isAccount\n    // `small` (32px) in the collapsed rail, inside the 46px tile — the tile is\n    // a surface AROUND the mark, not a frame hugging it. Sizing the mark is the\n    // consumer's call; the atom will not shrink one for them.\n    ? <Avatar initials=\"DR\" size={collapsed ? 'small' : 'medium'} />\n    : mark === 'icon'\n      ? <Icon glyph=\"product\" size={18} />\n      : undefined;\n\n  const cssVars = buildVars(styles);\n\n  const sectionLabel: CSSProperties = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase',\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>\n          {state} state · {variant}{collapsed ? ' · collapsed' : ''}\n        </div>\n        {/* A rail-width column: these rows are always full-bleed inside a\n            sidebar, and reviewing one at page width would hide every\n            truncation decision the atom makes. Collapsed drops to the 64px\n            rail `app-sidebar` actually uses — reviewing that mode at 260px\n            would hide the only thing it changes. */}\n        <div style={{ width: collapsed ? 64 : 260 }}>\n          <SidebarNavTrigger\n            variant={variant}\n            collapsed={collapsed}\n            title={collapsed ? (isAccount ? 'dan@acme.com' : 'order-processing') : undefined}\n            aria-expanded={state === 'open' ? true : undefined}\n            disabled={state === 'disabled' || undefined}\n            className={cn(\n              state === 'hover' && 'uxm-sidebar-nav-trigger--state-hover',\n              state === 'focus' && 'uxm-sidebar-nav-trigger--state-focus',\n            )}\n            icon={markNode}\n            caption={withCaption ? (isAccount ? 'Tenant owner' : 'Workspace') : undefined}\n            captionPlacement={captionPlacement}\n            trailing={withTrailing ? <Icon glyph=\"chevron-down\" size={16} /> : undefined}\n          >\n            {isAccount ? 'dan@acme.com' : 'order-processing'}\n          </SidebarNavTrigger>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAoFM,cAkBE,YAlBF;AApFN,SAAS,UAAU;AAEnB,SAAS,QAAQ,YAAY;AAE7B,SAAS,yBAAwD;AAWjE,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,iCAAiC,GAAG,OAAO,GAAG;AAAA,IAC9C,2CAA2C,GAAG,OAAO,YAAY;AAAA,IAEjE,gCAAgC,OAAO;AAAA,IACvC,sCAAsC,OAAO;AAAA,IAC7C,yCAAyC,OAAO;AAAA,IAChD,6CAA6C,OAAO;AAAA,IACpD,wCAAwC,OAAO;AAAA,IAE/C,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,yCAAyC,OAAO;AAAA,IAChD,yCAAyC,OAAO;AAAA,IAEhD,+CAA+C,GAAG,OAAO,eAAe;AAAA,IACxE,iDAAiD,OAAO;AAAA,IACxD,oDAAoD,GAAG,OAAO,oBAAoB;AAAA,IAClF,oDAAoD,OAAO;AAAA,IAC3D,2CAA2C,OAAO;AAAA,IAClD,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAE7D,4CAA4C,GAAG,OAAO,aAAa;AAAA,IAEnE,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,wCAAwC,OAAO;AAAA,IAC/C,4CAA4C,OAAO;AAAA,EACrD;AACF;AAyBO,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAA2C;AACrG,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAY,SAAS,WAAsB;AACjD,QAAM,OAAQ,SAAS,QAAmB;AAC1C,QAAM,eAAe,SAAS,eAAe,WAAW;AACxD,QAAM,mBAAqB,SAAS,oBAA+B;AACnE,QAAM,gBAAgB,SAAS,gBAAgB,WAAW;AAC1D,QAAM,aAAa,SAAS,aAAa,UAAU;AAEnD,QAAM,YAAY,SAAS;AAC3B,QAAM,WAAW,YAIb,oBAAC,UAAO,UAAS,MAAK,MAAM,YAAY,UAAU,UAAU,IAC5D,SAAS,SACP,oBAAC,QAAK,OAAM,WAAU,MAAM,IAAI,IAChC;AAEN,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAA8B;AAAA,IAClC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E,+BAAC,SACC;AAAA,yBAAC,SAAI,OAAO,cACT;AAAA;AAAA,MAAM;AAAA,MAAU;AAAA,MAAS,YAAY,oBAAiB;AAAA,OACzD;AAAA,IAMA,oBAAC,SAAI,OAAO,EAAE,OAAO,YAAY,KAAK,IAAI,GACxC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,YAAa,YAAY,iBAAiB,qBAAsB;AAAA,QACvE,iBAAe,UAAU,SAAS,OAAO;AAAA,QACzC,UAAU,UAAU,cAAc;AAAA,QAClC,WAAW;AAAA,UACT,UAAU,WAAW;AAAA,UACrB,UAAU,WAAW;AAAA,QACvB;AAAA,QACA,MAAM;AAAA,QACN,SAAS,cAAe,YAAY,iBAAiB,cAAe;AAAA,QACpE;AAAA,QACA,UAAU,eAAe,oBAAC,QAAK,OAAM,gBAAe,MAAM,IAAI,IAAK;AAAA,QAElE,sBAAY,iBAAiB;AAAA;AAAA,IAChC,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,74 @@
+"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_trigger_exports = {};
+__export(sidebar_nav_trigger_exports, {
+  SidebarNavTrigger: () => SidebarNavTrigger
+});
+module.exports = __toCommonJS(sidebar_nav_trigger_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function SidebarNavTrigger({
+  icon,
+  caption,
+  captionPlacement = "above",
+  children,
+  trailing,
+  variant = "plain",
+  collapsed = false,
+  className,
+  type = "button",
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type,
+      className: (0, import_helpers.cn)(
+        "uxm-sidebar-nav-trigger",
+        `uxm-sidebar-nav-trigger--${variant}`,
+        collapsed && "uxm-sidebar-nav-trigger--collapsed",
+        className
+      ),
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-trigger__icon", children: icon }),
+        (caption != null || children != null) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "span",
+          {
+            className: (0, import_helpers.cn)(
+              "uxm-sidebar-nav-trigger__text",
+              collapsed && "uxm-sidebar-nav-trigger__text--collapsed"
+            ),
+            children: [
+              caption != null && captionPlacement === "above" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-trigger__caption", children: caption }),
+              children != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-trigger__value", children }),
+              caption != null && captionPlacement === "below" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-trigger__caption", children: caption })
+            ]
+          }
+        ),
+        trailing && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-sidebar-nav-trigger__trailing", children: trailing })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarNavTrigger
+});
+//# sourceMappingURL=sidebar-nav-trigger.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/sidebar-nav-trigger/sidebar-nav-trigger.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport type SidebarNavTriggerVariant = 'plain' | 'outlined';\n\nexport type SidebarNavTriggerCaptionPlacement = 'above' | 'below';\n\nexport interface SidebarNavTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The mark on the left — a bare `Icon` in a workspace switcher, an `Avatar`\n   * in an account row. The atom draws NO tile behind it: no surface, no\n   * rounding, no background. It reserves the slot, sizes it, aligns it, and\n   * paints nothing. (`SidebarNavItem` does paint a tile — that difference is\n   * deliberate, a trigger is chrome for what it opens, not a destination.)\n   */\n  icon?: ReactNode;\n  /**\n   * The small line beside the value — \"WORKSPACE\" over a workspace name,\n   * \"Tenant owner\" under a signed-in address. Above the value it labels the\n   * level this control changes; below it, it qualifies the value. See\n   * `captionPlacement`.\n   *\n   * It lives inside the button, so it joins the accessible name\n   * (\"Workspace order-processing\"), which usually reads well. Pass an explicit\n   * `aria-label` if a particular pairing does not.\n   */\n  caption?: ReactNode;\n  /**\n   * Which side of the value the caption sits on. `above` (default) labels the\n   * level — a switcher's \"WORKSPACE\". `below` qualifies the value instead — an\n   * account row's \"Tenant owner\" under the address.\n   *\n   * Implemented by swapping the two in the MARKUP, not with\n   * `flex-direction: column-reverse`. Reversing visually while leaving the DOM\n   * alone would split reading order from visual order (WCAG 1.3.2) and would\n   * keep announcing \"Tenant owner dan@acme.com\" for a row that reads the other\n   * way round. Every caption knob keeps working either way — this changes\n   * order only.\n   */\n  captionPlacement?: SidebarNavTriggerCaptionPlacement;\n  /** The value — the workspace name, the signed-in address. */\n  children?: ReactNode;\n  /**\n   * The chevron. Visible at rest, with no reveal-on-hover behaviour: a control\n   * that opens something has to advertise it before you point at it.\n   * (`SidebarNavItem` hides its trailing slot until hover — that slot holds\n   * optional affordances like a × , not the affordance itself.)\n   */\n  trailing?: ReactNode;\n  /**\n   * `plain` — nothing at rest; the account row at the foot of the rail.\n   * `outlined` — a hairline plus the card surface; the switcher, which stands\n   * in a box because it names the level everything below it belongs to.\n   */\n  variant?: SidebarNavTriggerVariant;\n  /**\n   * Render for a COLLAPSED rail — the 64px icon column. The row becomes a 46px\n   * tile, `trailing` is dropped (a chevron does not fit), and `caption` +\n   * `children` stay in the DOM but are visually hidden — so the button keeps\n   * the SAME accessible name it had expanded. Dropping the text outright is the\n   * trap here: a row whose mark is a decorative `Icon` would become a nameless\n   * button.\n   *\n   * 46px is deliberately NOT the 32px `AppSidebar` gives its collapsed nav\n   * items. A trigger is not a nav row — it opens something — and at rail width\n   * it has lost both its chevron and its text, so footprint is the only signal\n   * of that difference left.\n   *\n   * It is a composition choice too: the tile is a surface AROUND the mark, not\n   * a frame hugging it. A 32px mark (`Avatar size=\"small\"`) leaves ~7px on every\n   * side — the same relationship `SidebarNavItem` has between its 32px tile and\n   * the smaller icon inside. Size the mark for the tile, not the tile for the\n   * mark; `--uxm-sidebar-nav-trigger-collapsed-size` is there if you want the\n   * switcher flush with the nav tiles instead.\n   *\n   * The tile is a MINIMUM, not a clamp — the row never squeezes or clips a mark\n   * that brings its own size, the same guarantee the `icon` slot makes. A\n   * larger mark grows the row rather than being cut off.\n   *\n   * A prop, and not an ancestor selector on `.uxm-app-sidebar--collapsed`: a\n   * trigger is placed by the CONSUMER in a slot, so the shell never owns its\n   * node — and no atom in this kit reaches into another's internals from its\n   * own stylesheet. (`SidebarNavItem` has no collapsed mode for the opposite\n   * reason: `AppSidebar` composes it directly and can drive it with props.)\n   *\n   * The affordance cost is real and CSS cannot pay it: with the chevron gone,\n   * only position and the mark still say this row opens something. Pass\n   * `title` — it lands on the button through `...rest` — so hover carries the\n   * value, the way `AppSidebar` does for its own collapsed items.\n   */\n  collapsed?: boolean;\n}\n\n/**\n * A rail row that OPENS something rather than navigating to it — a workspace\n * switcher, an account menu, an environment picker.\n *\n * It is a `<button type=\"button\">` extending `ButtonHTMLAttributes`, so the\n * `triggerProps` a `Menu` or `Listbox` hands to `renderTrigger` spread straight\n * onto it, ref and ARIA included:\n *\n * ```tsx\n * <Menu items={workspaces} matchAnchorWidth=\"min\" placement=\"bottom-start\"\n *   renderTrigger={({ triggerProps }) => (\n *     <SidebarNavTrigger {...triggerProps} variant=\"outlined\" caption=\"Workspace\"\n *       icon={<Icon glyph=\"product\" size={18} />} trailing={<Icon glyph=\"chevron-down\" size={16} />}>\n *       {current}\n *     </SidebarNavTrigger>\n *   )}\n * />\n * ```\n *\n * It reserves nothing it was not given: no `icon` and the text starts at the\n * padding edge, no `caption` and the value centres on one line, no `trailing`\n * and there is no gap where a chevron would have been. Every slot is rendered\n * only when passed — none are empty placeholders.\n *\n * The open state has no prop. It is read from `[aria-expanded=\"true\"]`, which\n * `Menu` and `Listbox` already set through `triggerProps` — a second source of\n * truth for the same fact is a bug waiting to disagree with itself.\n *\n * Its own atom rather than knobs on `SidebarNavItem`: that one renders an `<a>`\n * (it navigates), hides `trailing` until hover, paints an icon tile, and has a\n * single-line label. Four disagreements, none of them cosmetic. The kit already\n * has this precedent — `ExplorerListItem` sits beside `SidebarNavItem` for the\n * same kind of reason.\n */\nexport function SidebarNavTrigger({\n  icon,\n  caption,\n  captionPlacement = 'above',\n  children,\n  trailing,\n  variant = 'plain',\n  collapsed = false,\n  className,\n  type = 'button',\n  ...rest\n}: SidebarNavTriggerProps) {\n  return (\n    <button\n      type={type}\n      className={cn(\n        'uxm-sidebar-nav-trigger',\n        `uxm-sidebar-nav-trigger--${variant}`,\n        collapsed && 'uxm-sidebar-nav-trigger--collapsed',\n        className,\n      )}\n      {...rest}\n    >\n      {icon && <span className=\"uxm-sidebar-nav-trigger__icon\">{icon}</span>}\n      {(caption != null || children != null) && (\n        <span\n          className={cn(\n            'uxm-sidebar-nav-trigger__text',\n            collapsed && 'uxm-sidebar-nav-trigger__text--collapsed',\n          )}\n        >\n          {caption != null && captionPlacement === 'above' && (\n            <span className=\"uxm-sidebar-nav-trigger__caption\">{caption}</span>\n          )}\n          {children != null && (\n            <span className=\"uxm-sidebar-nav-trigger__value\">{children}</span>\n          )}\n          {caption != null && captionPlacement === 'below' && (\n            <span className=\"uxm-sidebar-nav-trigger__caption\">{caption}</span>\n          )}\n        </span>\n      )}\n      {/* Dropped, not hidden: the 32x32 collapsed row has no room for a\n          chevron, and leaving the node in place would only reserve a gap the\n          atom's own rule (\"reserves nothing it was not given\") says it must\n          not. */}\n      {trailing && !collapsed && (\n        <span className=\"uxm-sidebar-nav-trigger__trailing\">{trailing}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuJe;AAvJf,qBAAmB;AAgIZ,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA,4BAA4B,OAAO;AAAA,QACnC,aAAa;AAAA,QACb;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBAAQ,4CAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA,SAC7D,WAAW,QAAQ,YAAY,SAC/B;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,aAAa;AAAA,YACf;AAAA,YAEC;AAAA,yBAAW,QAAQ,qBAAqB,WACvC,4CAAC,UAAK,WAAU,oCAAoC,mBAAQ;AAAA,cAE7D,YAAY,QACX,4CAAC,UAAK,WAAU,kCAAkC,UAAS;AAAA,cAE5D,WAAW,QAAQ,qBAAqB,WACvC,4CAAC,UAAK,WAAU,oCAAoC,mBAAQ;AAAA;AAAA;AAAA,QAEhE;AAAA,QAMD,YAAY,CAAC,aACZ,4CAAC,UAAK,WAAU,qCAAqC,oBAAS;AAAA;AAAA;AAAA,EAElE;AAEJ;","names":[]}

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

@@ -0,0 +1,202 @@
+@charset "UTF-8";
+/* ── sidebar-nav-trigger ──────────────────────────────────────────────────────
+   A rail row that OPENS something rather than navigating to it. Sibling of
+   `sidebar-nav-item`, deliberately not a variant of it: that one is an `<a>`
+   with a painted icon tile and a hover-revealed trailing slot.
+
+   The open state is read from `[aria-expanded="true"]` — the attribute `Menu`
+   and `Listbox` already set on the trigger — so there is no `--open` class and
+   no prop to keep in sync with it.
+   ──────────────────────────────────────────────────────────────────────────── */
+.uxm-sidebar-nav-trigger {
+  /* width: 100% + own padding → border-box, or the row overflows its rail in a
+     reset-less host (ui.css ships no reset). */
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--uxm-sidebar-nav-trigger-gap, 10px);
+  padding: var(--uxm-sidebar-nav-trigger-padding-y, 8px) var(--uxm-sidebar-nav-trigger-padding-x, 12px);
+  text-align: left;
+  background-color: var(--uxm-sidebar-nav-trigger-bg, transparent);
+  border: 1px solid transparent;
+  /* 8px, matching `sidebar-nav-item` — the two sit in the same rail, and a
+     trigger rounded differently from the rows under it reads as a different
+     family rather than a different job. */
+  border-radius: var(--uxm-sidebar-nav-trigger-border-radius, 8px);
+  color: var(--uxm-sidebar-nav-trigger-value-color, var(--color-text));
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+  /* `outlined` keeps its neutral border through every state — only the surface
+     moves. A border that changed on hover would read as a second signal for a
+     fact the surface already carries. */
+}
+.uxm-sidebar-nav-trigger--outlined {
+  background-color: var(--uxm-sidebar-nav-trigger-outlined-bg, var(--color-card));
+  border-color: var(--uxm-sidebar-nav-trigger-outlined-border, var(--color-border));
+}
+.uxm-sidebar-nav-trigger {
+  /* Hover and open paint the SAME surface, in both variants: they mean the same
+     thing to the eye — this row is what you are dealing with. Open is the
+     attribute, not a class, so the two selectors sit together here.
+
+     `--state-hover` / `--state-focus` are the forced-state classes the
+     workbench showcase needs (the pointer cannot be in two places, so the State
+     picker has to win). They are named per the kit's existing `--state-*`
+     convention (color-input, date-input, currency-input) and listed WITH the
+     real selectors rather than duplicated, so a forced state cannot drift from
+     the real one.
+
+     ORDER MATTERS: these sit AFTER `--outlined` on purpose. `:hover` and
+     `[aria-expanded]` out-specify a lone modifier class anyway, but
+     `--state-hover` does not — it ties with `--outlined`, so put it earlier and
+     the forced hover silently stops painting on the outlined variant. */
+}
+.uxm-sidebar-nav-trigger:hover:not(:disabled):not([aria-disabled=true]), .uxm-sidebar-nav-trigger[aria-expanded=true]:not(:disabled):not([aria-disabled=true]), .uxm-sidebar-nav-trigger--state-hover {
+  background-color: var(--uxm-sidebar-nav-trigger-hover-bg, var(--color-surface));
+}
+.uxm-sidebar-nav-trigger:focus-visible, .uxm-sidebar-nav-trigger--state-focus {
+  outline: 2px solid var(--uxm-sidebar-nav-trigger-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-sidebar-nav-trigger {
+  /* Dimmed rather than recoloured, so the row keeps its shape and a disabled
+     `outlined` trigger still reads as the same box. Both spellings are covered:
+     the native attribute, which blocks the click itself, and `aria-disabled`,
+     for when the row must stay focusable and announced — there the CONSUMER
+     still owns ignoring the activation, which is the whole difference between
+     the two.
+
+     Deliberately no `pointer-events: none` (which `sidebar-nav-item` needs,
+     being an `<a>` that cannot carry a native `disabled`): it would suppress
+     `cursor: not-allowed` too, throwing away the one affordance that tells
+     the user why nothing happens. The `:hover` rule above opts out instead. */
+}
+.uxm-sidebar-nav-trigger:disabled, .uxm-sidebar-nav-trigger[aria-disabled=true] {
+  opacity: var(--uxm-sidebar-nav-trigger-disabled-opacity, 0.45);
+  cursor: not-allowed;
+}
+.uxm-sidebar-nav-trigger {
+  /* The collapsed rail — the 64px icon column.
+
+     46px, which is DELIBERATELY not the 32px `app-sidebar` gives its collapsed
+     nav items (`__item--collapsed`). A trigger is not a nav row: it opens
+     something, and at rail width it has lost both its chevron and its text, so
+     footprint is the only signal of that difference left.
+
+     The size is also a composition choice, not just a bigger number. The tile
+     is a surface AROUND the mark rather than a frame hugging it: a 32px mark
+     (`Avatar size="small"`) leaves ~7px on every side, the same relationship
+     `sidebar-nav-item` has between its 32px tile and the smaller icon inside
+     it. A tile sized to hug its mark reads as a border on the avatar instead of
+     a control containing one. It leaves 9px each side in a 64px rail.
+
+     `min-*` and NOT fixed `width`/`height`, for the same reason `__icon` is:
+     the row must never squeeze or clip a mark that brings its own size. A mark
+     larger than the tile grows the row rather than being cut off.
+
+     `padding: 0` — the tile IS the padding box, and the row centres its one
+     remaining in-flow child. `--outlined` deliberately keeps its border and
+     surface: at this size the box is the ONLY thing still telling a switcher
+     apart from a plain account row.
+
+     `position: relative` anchors the visually-hidden text (see `__text`) inside
+     this button rather than at the initial containing block.
+
+     Nothing here is placed by an ancestor selector on `.uxm-app-sidebar--collapsed`:
+     a trigger sits in a consumer-owned slot, and no atom in this kit styles
+     another atom's internals from its own sheet. */
+}
+.uxm-sidebar-nav-trigger--collapsed {
+  position: relative;
+  min-width: var(--uxm-sidebar-nav-trigger-collapsed-size, 46px);
+  min-height: var(--uxm-sidebar-nav-trigger-collapsed-size, 46px);
+  width: auto;
+  margin: 0 auto;
+  padding: 0;
+  justify-content: center;
+}
+.uxm-sidebar-nav-trigger {
+  /* The mark. No tile: the slot is sized and centred, and paints nothing.
+     `min-*` rather than fixed width/height so the box reserves and aligns
+     without clipping a child that is larger than the reservation — an `Avatar`
+     brings its own size and must not be squeezed into the icon box. */
+}
+.uxm-sidebar-nav-trigger__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--uxm-sidebar-nav-trigger-icon-size, 28px);
+  min-height: var(--uxm-sidebar-nav-trigger-icon-size, 28px);
+  color: var(--uxm-sidebar-nav-trigger-icon-color, var(--color-text-strong));
+}
+.uxm-sidebar-nav-trigger {
+  /* Caption over value. The column owns the row growth so the trailing chevron
+     right-aligns; with no caption it holds a single line and `align-items:
+     center` on the row centres it — no separate one-line rule needed. */
+}
+.uxm-sidebar-nav-trigger__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--uxm-sidebar-nav-trigger-caption-gap, 2px);
+  /* Collapsed: visually hidden, NOT removed. `display: none` and
+     `visibility: hidden` would both take the caption and value out of the
+     accessible tree — and that name is the one thing the collapsed row cannot
+     lose, since its mark may be a decorative `Icon` or an `Avatar` carrying no
+     alt, which would leave a nameless button. Clipping keeps the text in the
+     tree, so the row announces IDENTICALLY collapsed and expanded.
+
+     `position: absolute` also lifts the column out of flow, so its `flex: 1`
+     stops stretching the 32px box from the inside. */
+}
+.uxm-sidebar-nav-trigger__text--collapsed {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.uxm-sidebar-nav-trigger {
+  /* `--color-text-muted` measures 2.54:1 on `--color-card` in the light theme,
+     under the 4.5:1 AA floor — but a caption is not information: it names the
+     control ("WORKSPACE"), and the value beneath it is the content. `-strong`
+     is the safe swap if a consumer ever gives the slot real meaning. */
+}
+.uxm-sidebar-nav-trigger__caption {
+  overflow: hidden;
+  font-size: calc(var(--uxm-sidebar-nav-trigger-caption-font-size, 10px) * var(--type-scale, 1));
+  font-weight: var(--uxm-sidebar-nav-trigger-caption-font-weight, 500);
+  letter-spacing: var(--uxm-sidebar-nav-trigger-caption-letter-spacing, 0.06em);
+  /* Uppercase by DEFAULT, not by definition — a caption is an eyebrow in most
+     rails, but a sentence-case one ("Tenant owner" under an address) is a
+     legitimate reading of the same slot, and the brand font may not carry
+     caps well. Note the pairing: the 0.06em tracking exists to open up caps,
+     so a designer switching this to `none` usually wants to drop that too. */
+  text-transform: var(--uxm-sidebar-nav-trigger-caption-text-transform, uppercase);
+  color: var(--uxm-sidebar-nav-trigger-caption-color, var(--color-text-muted));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uxm-sidebar-nav-trigger__value {
+  overflow: hidden;
+  font-size: calc(var(--uxm-sidebar-nav-trigger-font-size, 14px) * var(--type-scale, 1));
+  font-weight: var(--uxm-sidebar-nav-trigger-font-weight, 500);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uxm-sidebar-nav-trigger {
+  /* Visible at rest — unlike `sidebar-nav-item`, whose trailing slot fades in
+     on hover. There the slot holds an optional extra; here it IS the
+     affordance that says this row opens something. */
+}
+.uxm-sidebar-nav-trigger__trailing {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  color: var(--uxm-sidebar-nav-trigger-trailing-color, var(--color-text-muted));
+}