@viax.io/uxm 4.36.0

package/dist/ui/config-component-row/config-component-row.css

@@ -0,0 +1,97 @@
+@charset "UTF-8";
+/* ── config-component-row ── */
+.uxm-config-component-row {
+  /* width: 100% + own border/padding only add up under border-box; ui.css
+     ships no reset (same fix as the input family got in 4.17.1). */
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--uxm-config-component-row-radius, 4px);
+  color: var(--color-text);
+  display: flex;
+  gap: 12px;
+  padding: var(--uxm-config-component-row-padding, 16px);
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+  width: 100%;
+}
+.uxm-config-component-row:hover {
+  border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+.uxm-config-component-row--active, .uxm-config-component-row--active:hover {
+  border-color: var(--color-accent);
+}
+.uxm-config-component-row {
+  /* Selectable area — the click target for "select for edit". Transparent and
+     unpadded (the card owns padding); the icon tile's size/radius bridge to
+     IconTile via the row's CSS variables in the .tsx. */
+}
+.uxm-config-component-row__select {
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  font: inherit;
+  gap: 16px;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  text-align: left;
+}
+.uxm-config-component-row__select:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: var(--uxm-config-component-row-radius, 4px);
+}
+.uxm-config-component-row__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.uxm-config-component-row__name {
+  color: var(--color-text);
+  font-size: calc(var(--uxm-config-component-row-name-size, 14px) * var(--type-scale, 1));
+  font-weight: 500;
+}
+.uxm-config-component-row__type {
+  color: var(--color-text-muted);
+  font-size: calc(var(--uxm-config-component-row-type-size, 12px) * var(--type-scale, 1));
+}
+.uxm-config-component-row__trailing {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.uxm-config-component-row {
+  /* Trailing action controls. Collapsed to zero width when idle (so they don't
+     reserve a permanent gap) and revealed on row hover / keyboard focus. On
+     touch (no hover) they stay visible, since there is no hover to trigger. */
+}
+.uxm-config-component-row__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 4px;
+  max-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition: max-width 0.15s ease, opacity 0.15s ease;
+}
+.uxm-config-component-row:hover .uxm-config-component-row__actions, .uxm-config-component-row:focus-within .uxm-config-component-row__actions {
+  max-width: 12rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  .uxm-config-component-row__actions {
+    max-width: 12rem;
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

package/dist/ui/config-component-row/config-component-row.d.ts

@@ -0,0 +1,36 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ConfigComponentRowProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'name'> {
+    /** Icon shown in the leading tile — typically <Icon glyph="..." />. */
+    icon?: ReactNode;
+    /** Component display name (primary text). */
+    name: ReactNode;
+    /**
+     * Type label shown beneath the name (e.g. "TEXT", "BOOLEAN", "OPTIONS"). The
+     * registry of value types is owned by the consumer; this just renders
+     * whatever is passed.
+     */
+    type?: ReactNode;
+    /**
+     * Trailing slot — caller-supplied. Typical content is a `<Tag type="accent">Required</Tag>`
+     * or similar tag. Kept generic so the consumer decides which flags of a
+     * configuration component surface here (required, deprecated, etc.).
+     */
+    trailing?: ReactNode;
+    /**
+     * Trailing action controls (typically `IconButton`s), revealed on row hover
+     * or keyboard focus. Kept OUTSIDE the select `<button>` so the action buttons
+     * aren't nested in a button and clicking one doesn't also select the row.
+     */
+    actions?: ReactNode;
+    /** Render the active (selected) state. Adds an accent border. */
+    active?: boolean;
+}
+/**
+ * Middle-pane row in a Configuration model's components list. Each row is a
+ * clickable card describing one component (a field) within the currently
+ * selected segment. Selecting it swaps the right-pane editor.
+ *
+ * Renders as a `<button>` because click is "select for edit", not navigate.
+ */
+export declare function ConfigComponentRow({ icon, name, type, trailing, actions, active, className, style, ...rest }: ConfigComponentRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=config-component-row.d.ts.map

package/dist/ui/config-component-row/config-component-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-component-row.d.ts","sourceRoot":"","sources":["../../../src/ui/config-component-row/config-component-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB5E,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtE,uEAAuE;IACvE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,uBAAuB,2CA2BzB"}

package/dist/ui/config-component-row/config-component-row.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { IconTile } from "../../ui/icon-tile/index.js";
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-size"]: "var(--uxm-config-component-row-icon-tile-size, 28px)",
+  ["--uxm-icon-tile-radius"]: "var(--uxm-config-component-row-icon-tile-radius, 6px)"
+};
+function ConfigComponentRow({
+  icon,
+  name,
+  type,
+  trailing,
+  actions,
+  active,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "uxm-config-component-row",
+        active && "uxm-config-component-row--active",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": active, className: "uxm-config-component-row__select", ...rest, children: [
+          icon && /* @__PURE__ */ jsx(IconTile, { style: ICON_TILE_STYLE, children: icon }),
+          /* @__PURE__ */ jsxs("span", { className: "uxm-config-component-row__body", children: [
+            /* @__PURE__ */ jsx("span", { className: "uxm-config-component-row__name", children: name }),
+            type && /* @__PURE__ */ jsx("span", { className: "uxm-config-component-row__type", children: type })
+          ] }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "uxm-config-component-row__trailing", children: trailing })
+        ] }),
+        actions && /* @__PURE__ */ jsx("span", { className: "uxm-config-component-row__actions", children: actions })
+      ]
+    }
+  );
+}
+export {
+  ConfigComponentRow
+};
+//# sourceMappingURL=config-component-row.js.map

package/dist/ui/config-component-row/config-component-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-component-row/config-component-row.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { IconTile } from '@/ui/icon-tile';\n\nimport type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';\n\n// ConfigComponentRow's icon registry knobs (`iconTileSize` / `iconTileRadius`)\n// project onto IconTile's own CSS-variable surface. No bg/color knobs in\n// the registry, so default IconTile colors apply (surface-alt + text-muted).\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-config-component-row-icon-tile-size, 28px)',\n  ['--uxm-icon-tile-radius' as string]: 'var(--uxm-config-component-row-icon-tile-radius, 6px)',\n};\n\n// Drop two native button attributes from the props surface:\n//   - `type`: we always render `<button type=\"button\">`; the visual-type\n//     prop below (the field's value type — TEXT/EMAIL/etc.) is what consumers\n//     mean when they say \"type\" here.\n//   - `name`: HTML form-control name; consumers mean the field's display\n//     name (ReactNode) when they say \"name\".\nexport interface ConfigComponentRowProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'name'> {\n  /** Icon shown in the leading tile — typically <Icon glyph=\"...\" />. */\n  icon?: ReactNode;\n  /** Component display name (primary text). */\n  name: ReactNode;\n  /**\n   * Type label shown beneath the name (e.g. \"TEXT\", \"BOOLEAN\", \"OPTIONS\"). The\n   * registry of value types is owned by the consumer; this just renders\n   * whatever is passed.\n   */\n  type?: ReactNode;\n  /**\n   * Trailing slot — caller-supplied. Typical content is a `<Tag type=\"accent\">Required</Tag>`\n   * or similar tag. Kept generic so the consumer decides which flags of a\n   * configuration component surface here (required, deprecated, etc.).\n   */\n  trailing?: ReactNode;\n  /**\n   * Trailing action controls (typically `IconButton`s), revealed on row hover\n   * or keyboard focus. Kept OUTSIDE the select `<button>` so the action buttons\n   * aren't nested in a button and clicking one doesn't also select the row.\n   */\n  actions?: ReactNode;\n  /** Render the active (selected) state. Adds an accent border. */\n  active?: boolean;\n}\n\n/**\n * Middle-pane row in a Configuration model's components list. Each row is a\n * clickable card describing one component (a field) within the currently\n * selected segment. Selecting it swaps the right-pane editor.\n *\n * Renders as a `<button>` because click is \"select for edit\", not navigate.\n */\nexport function ConfigComponentRow({\n  icon,\n  name,\n  type,\n  trailing,\n  actions,\n  active,\n  className,\n  style,\n  ...rest\n}: ConfigComponentRowProps) {\n  return (\n    <div\n      className={cn(\n        'uxm-config-component-row',\n        active && 'uxm-config-component-row--active',\n        className,\n      )}\n      // `style` (and the `--uxm-config-component-row-*` overrides it carries)\n      // stays on the ROOT — the root reads the padding/radius vars, and custom\n      // props cascade down to the inner name/type reads. Behaviour props\n      // (onClick, etc.) go to the select button via `...rest`.\n      style={style}\n    >\n      {/* The select button owns the whole row's click (\"select for edit\");\n          actions are a sibling so nested buttons / click-through can't happen. */}\n      <button type=\"button\" aria-pressed={active} className=\"uxm-config-component-row__select\" {...rest}>\n        {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n        <span className=\"uxm-config-component-row__body\">\n          <span className=\"uxm-config-component-row__name\">{name}</span>\n          {type && <span className=\"uxm-config-component-row__type\">{type}</span>}\n        </span>\n        {trailing && <span className=\"uxm-config-component-row__trailing\">{trailing}</span>}\n      </button>\n      {actions && <span className=\"uxm-config-component-row__actions\">{actions}</span>}\n    </div>\n  );\n}\n"],"mappings":"AAiFiB,cACT,YADS;AAjFjB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAOzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AA2CO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MAKA;AAAA,MAIA;AAAA,6BAAC,YAAO,MAAK,UAAS,gBAAc,QAAQ,WAAU,oCAAoC,GAAG,MAC1F;AAAA,kBAAQ,oBAAC,YAAS,OAAO,iBAAkB,gBAAK;AAAA,UACjD,qBAAC,UAAK,WAAU,kCACd;AAAA,gCAAC,UAAK,WAAU,kCAAkC,gBAAK;AAAA,YACtD,QAAQ,oBAAC,UAAK,WAAU,kCAAkC,gBAAK;AAAA,aAClE;AAAA,UACC,YAAY,oBAAC,UAAK,WAAU,sCAAsC,oBAAS;AAAA,WAC9E;AAAA,QACC,WAAW,oBAAC,UAAK,WAAU,qCAAqC,mBAAQ;AAAA;AAAA;AAAA,EAC3E;AAEJ;","names":[]}

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

package/dist/ui/config-component-row/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-component-row/index.ts"],"sourcesContent":["export * from './config-component-row';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yCAAc,mCAAd;","names":[]}

package/dist/ui/config-component-row/index.d.ts

@@ -0,0 +1,2 @@
+export * from './config-component-row.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/config-component-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/config-component-row/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}

package/dist/ui/config-component-row/index.js

@@ -0,0 +1,2 @@
+export * from "./config-component-row.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/config-component-row/index.js.map

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

package/dist/ui/config-segment-item/config-segment-item-preview.cjs

@@ -0,0 +1,54 @@
+"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 config_segment_item_preview_exports = {};
+__export(config_segment_item_preview_exports, {
+  ConfigSegmentItemPreview: () => ConfigSegmentItemPreview
+});
+module.exports = __toCommonJS(config_segment_item_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const segments = [
+  { name: "Account Profile", meta: "4 components", active: true },
+  { name: "Plan & Billing", meta: "4 components" },
+  { name: "Add-ons", meta: "3 components" }
+];
+function ConfigSegmentItemPreview({ styles }) {
+  const cssVars = {
+    "--uxm-config-segment-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-config-segment-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-config-segment-item-radius": `${styles.borderRadius}px`,
+    "--uxm-config-segment-item-name-size": `${styles.nameSize}px`,
+    "--uxm-config-segment-item-meta-size": `${styles.metaSize}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 240 }, children: segments.map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.ConfigSegmentItem,
+    {
+      style: cssVars,
+      name: s.name,
+      meta: s.meta,
+      active: s.active
+    },
+    s.name
+  )) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfigSegmentItemPreview
+});
+//# sourceMappingURL=config-segment-item-preview.cjs.map

package/dist/ui/config-segment-item/config-segment-item-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-segment-item/config-segment-item-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ConfigSegmentItem } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst segments: { name: string; meta: string; active?: boolean }[] = [\n  { name: 'Account Profile', meta: '4 components', active: true },\n  { name: 'Plan & Billing', meta: '4 components' },\n  { name: 'Add-ons', meta: '3 components' },\n];\n\nexport function ConfigSegmentItemPreview({ styles }: PreviewProps) {\n  // Project the editor's style knobs onto the CSS custom properties the\n  // component reads. Both forms have sensible fallbacks in styles.css.\n  const cssVars = {\n    '--uxm-config-segment-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-config-segment-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-config-segment-item-radius': `${styles.borderRadius}px`,\n    '--uxm-config-segment-item-name-size': `${styles.nameSize}px`,\n    '--uxm-config-segment-item-meta-size': `${styles.metaSize}px`,\n  } as CSSProperties;\n\n  // Apply cssVars per-item (inline on each ConfigSegmentItem). A\n  // wrapper-level projection would lose to saved overrides on\n  // `.uxm-config-segment-item` — inline-on-element wins over class-on-\n  // element for custom properties, so live slider drags flash through\n  // even with published overrides in place.\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 240 }}>\n      {segments.map((s) => (\n        <ConfigSegmentItem\n          key={s.name}\n          style={cssVars}\n          name={s.name}\n          meta={s.meta}\n          active={s.active}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BQ;AA7BR,gBAAkC;AAIlC,MAAM,WAA+D;AAAA,EACnE,EAAE,MAAM,mBAAmB,MAAM,gBAAgB,QAAQ,KAAK;AAAA,EAC9D,EAAE,MAAM,kBAAkB,MAAM,eAAe;AAAA,EAC/C,EAAE,MAAM,WAAW,MAAM,eAAe;AAC1C;AAEO,SAAS,yBAAyB,EAAE,OAAO,GAAiB;AAGjE,QAAM,UAAU;AAAA,IACd,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,EAC3D;AAOA,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,UAAU,IAAI,GAC3E,mBAAS,IAAI,CAAC,MACb;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,MACP,MAAM,EAAE;AAAA,MACR,MAAM,EAAE;AAAA,MACR,QAAQ,EAAE;AAAA;AAAA,IAJL,EAAE;AAAA,EAKT,CACD,GACH;AAEJ;","names":[]}

package/dist/ui/config-segment-item/config-segment-item-preview.d.ts

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

package/dist/ui/config-segment-item/config-segment-item-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-segment-item-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/config-segment-item/config-segment-item-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWrD,wBAAgB,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CA6BhE"}

package/dist/ui/config-segment-item/config-segment-item-preview.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { ConfigSegmentItem } from "../../ui/index.js";
+const segments = [
+  { name: "Account Profile", meta: "4 components", active: true },
+  { name: "Plan & Billing", meta: "4 components" },
+  { name: "Add-ons", meta: "3 components" }
+];
+function ConfigSegmentItemPreview({ styles }) {
+  const cssVars = {
+    "--uxm-config-segment-item-padding-x": `${styles.paddingX}px`,
+    "--uxm-config-segment-item-padding-y": `${styles.paddingY}px`,
+    "--uxm-config-segment-item-radius": `${styles.borderRadius}px`,
+    "--uxm-config-segment-item-name-size": `${styles.nameSize}px`,
+    "--uxm-config-segment-item-meta-size": `${styles.metaSize}px`
+  };
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4, minWidth: 240 }, children: segments.map((s) => /* @__PURE__ */ jsx(
+    ConfigSegmentItem,
+    {
+      style: cssVars,
+      name: s.name,
+      meta: s.meta,
+      active: s.active
+    },
+    s.name
+  )) });
+}
+export {
+  ConfigSegmentItemPreview
+};
+//# sourceMappingURL=config-segment-item-preview.js.map

package/dist/ui/config-segment-item/config-segment-item-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-segment-item/config-segment-item-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ConfigSegmentItem } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst segments: { name: string; meta: string; active?: boolean }[] = [\n  { name: 'Account Profile', meta: '4 components', active: true },\n  { name: 'Plan & Billing', meta: '4 components' },\n  { name: 'Add-ons', meta: '3 components' },\n];\n\nexport function ConfigSegmentItemPreview({ styles }: PreviewProps) {\n  // Project the editor's style knobs onto the CSS custom properties the\n  // component reads. Both forms have sensible fallbacks in styles.css.\n  const cssVars = {\n    '--uxm-config-segment-item-padding-x': `${styles.paddingX}px`,\n    '--uxm-config-segment-item-padding-y': `${styles.paddingY}px`,\n    '--uxm-config-segment-item-radius': `${styles.borderRadius}px`,\n    '--uxm-config-segment-item-name-size': `${styles.nameSize}px`,\n    '--uxm-config-segment-item-meta-size': `${styles.metaSize}px`,\n  } as CSSProperties;\n\n  // Apply cssVars per-item (inline on each ConfigSegmentItem). A\n  // wrapper-level projection would lose to saved overrides on\n  // `.uxm-config-segment-item` — inline-on-element wins over class-on-\n  // element for custom properties, so live slider drags flash through\n  // even with published overrides in place.\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 240 }}>\n      {segments.map((s) => (\n        <ConfigSegmentItem\n          key={s.name}\n          style={cssVars}\n          name={s.name}\n          meta={s.meta}\n          active={s.active}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AA8BQ;AA7BR,SAAS,yBAAyB;AAIlC,MAAM,WAA+D;AAAA,EACnE,EAAE,MAAM,mBAAmB,MAAM,gBAAgB,QAAQ,KAAK;AAAA,EAC9D,EAAE,MAAM,kBAAkB,MAAM,eAAe;AAAA,EAC/C,EAAE,MAAM,WAAW,MAAM,eAAe;AAC1C;AAEO,SAAS,yBAAyB,EAAE,OAAO,GAAiB;AAGjE,QAAM,UAAU;AAAA,IACd,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,EAC3D;AAOA,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,GAAG,UAAU,IAAI,GAC3E,mBAAS,IAAI,CAAC,MACb;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,MACP,MAAM,EAAE;AAAA,MACR,MAAM,EAAE;AAAA,MACR,QAAQ,EAAE;AAAA;AAAA,IAJL,EAAE;AAAA,EAKT,CACD,GACH;AAEJ;","names":[]}

package/dist/ui/config-segment-item/config-segment-item.cjs

@@ -0,0 +1,55 @@
+"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 config_segment_item_exports = {};
+__export(config_segment_item_exports, {
+  ConfigSegmentItem: () => ConfigSegmentItem
+});
+module.exports = __toCommonJS(config_segment_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function ConfigSegmentItem({
+  name,
+  meta,
+  active,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": active,
+      className: (0, import_helpers.cn)(
+        "uxm-config-segment-item",
+        active && "uxm-config-segment-item--active",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-config-segment-item__name", children: name }),
+        meta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-config-segment-item__meta", children: meta })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ConfigSegmentItem
+});
+//# sourceMappingURL=config-segment-item.cjs.map

package/dist/ui/config-segment-item/config-segment-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-segment-item/config-segment-item.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\n// Drop two native button attributes from the props surface, mirroring\n// ConfigComponentRow's sibling row atom:\n//   - `type`: we always render `<button type=\"button\">` so this row can\n//     never accidentally submit a parent form — the native attribute isn't\n//     a knob consumers should be able to override here.\n//   - `name`: HTML form-control name; consumers mean the segment's display\n//     name (ReactNode) when they say \"name\".\nexport interface ConfigSegmentItemProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'name'> {\n  /** Segment name (primary text). */\n  name: ReactNode;\n  /**\n   * Optional small line below the name. Typical use: \"{n} components\" so the\n   * segment row carries a quick gauge of how full this segment is.\n   */\n  meta?: ReactNode;\n  /** Render the active (selected) state. */\n  active?: boolean;\n}\n\n/**\n * Left-pane row in a Configuration model's segment list. A segment groups a\n * set of components (Account Profile → Account Name, Account Type, …); the\n * user selects one segment at a time and edits its components in the middle\n * pane. Active state is \"selected\" (not navigated-to), so this renders as a\n * `<button>` rather than a link.\n */\nexport function ConfigSegmentItem({\n  name,\n  meta,\n  active,\n  className,\n  ...rest\n}: ConfigSegmentItemProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      className={cn(\n        'uxm-config-segment-item',\n        active && 'uxm-config-segment-item--active',\n        className,\n      )}\n      {...rest}\n    >\n      <span className=\"uxm-config-segment-item__name\">{name}</span>\n      {meta && <span className=\"uxm-config-segment-item__meta\">{meta}</span>}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCI;AAvCJ,qBAAmB;AA+BZ,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,eAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,oDAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA,QACrD,QAAQ,4CAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA;AAAA;AAAA,EACjE;AAEJ;","names":[]}

package/dist/ui/config-segment-item/config-segment-item.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+/* ── config-segment-item ── */
+.uxm-config-segment-item {
+  align-items: stretch;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--uxm-config-segment-item-radius, 6px);
+  color: var(--color-text);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  font: inherit;
+  gap: 2px;
+  padding: var(--uxm-config-segment-item-padding-y, 8px) var(--uxm-config-segment-item-padding-x, 12px);
+  text-align: left;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  width: 100%;
+}
+.uxm-config-segment-item:hover {
+  background-color: var(--color-surface-alt);
+}
+.uxm-config-segment-item:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.uxm-config-segment-item--active, .uxm-config-segment-item--active:hover {
+  background-color: var(--color-accent-subtle);
+  color: var(--color-text);
+}
+.uxm-config-segment-item__name {
+  font-size: calc(var(--uxm-config-segment-item-name-size, 14px) * var(--type-scale, 1));
+  font-weight: 500;
+}
+.uxm-config-segment-item__meta {
+  color: var(--color-text-muted);
+  font-size: calc(var(--uxm-config-segment-item-meta-size, 12px) * var(--type-scale, 1));
+}

package/dist/ui/config-segment-item/config-segment-item.d.ts

@@ -0,0 +1,21 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ConfigSegmentItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'name'> {
+    /** Segment name (primary text). */
+    name: ReactNode;
+    /**
+     * Optional small line below the name. Typical use: "{n} components" so the
+     * segment row carries a quick gauge of how full this segment is.
+     */
+    meta?: ReactNode;
+    /** Render the active (selected) state. */
+    active?: boolean;
+}
+/**
+ * Left-pane row in a Configuration model's segment list. A segment groups a
+ * set of components (Account Profile → Account Name, Account Type, …); the
+ * user selects one segment at a time and edits its components in the middle
+ * pane. Active state is "selected" (not navigated-to), so this renders as a
+ * `<button>` rather than a link.
+ */
+export declare function ConfigSegmentItem({ name, meta, active, className, ...rest }: ConfigSegmentItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=config-segment-item.d.ts.map

package/dist/ui/config-segment-item/config-segment-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-segment-item.d.ts","sourceRoot":"","sources":["../../../src/ui/config-segment-item/config-segment-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAS7D,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtE,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,2CAgBxB"}

package/dist/ui/config-segment-item/config-segment-item.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function ConfigSegmentItem({
+  name,
+  meta,
+  active,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": active,
+      className: cn(
+        "uxm-config-segment-item",
+        active && "uxm-config-segment-item--active",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uxm-config-segment-item__name", children: name }),
+        meta && /* @__PURE__ */ jsx("span", { className: "uxm-config-segment-item__meta", children: meta })
+      ]
+    }
+  );
+}
+export {
+  ConfigSegmentItem
+};
+//# sourceMappingURL=config-segment-item.js.map

package/dist/ui/config-segment-item/config-segment-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/config-segment-item/config-segment-item.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\n// Drop two native button attributes from the props surface, mirroring\n// ConfigComponentRow's sibling row atom:\n//   - `type`: we always render `<button type=\"button\">` so this row can\n//     never accidentally submit a parent form — the native attribute isn't\n//     a knob consumers should be able to override here.\n//   - `name`: HTML form-control name; consumers mean the segment's display\n//     name (ReactNode) when they say \"name\".\nexport interface ConfigSegmentItemProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'name'> {\n  /** Segment name (primary text). */\n  name: ReactNode;\n  /**\n   * Optional small line below the name. Typical use: \"{n} components\" so the\n   * segment row carries a quick gauge of how full this segment is.\n   */\n  meta?: ReactNode;\n  /** Render the active (selected) state. */\n  active?: boolean;\n}\n\n/**\n * Left-pane row in a Configuration model's segment list. A segment groups a\n * set of components (Account Profile → Account Name, Account Type, …); the\n * user selects one segment at a time and edits its components in the middle\n * pane. Active state is \"selected\" (not navigated-to), so this renders as a\n * `<button>` rather than a link.\n */\nexport function ConfigSegmentItem({\n  name,\n  meta,\n  active,\n  className,\n  ...rest\n}: ConfigSegmentItemProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={active}\n      className={cn(\n        'uxm-config-segment-item',\n        active && 'uxm-config-segment-item--active',\n        className,\n      )}\n      {...rest}\n    >\n      <span className=\"uxm-config-segment-item__name\">{name}</span>\n      {meta && <span className=\"uxm-config-segment-item__meta\">{meta}</span>}\n    </button>\n  );\n}\n"],"mappings":"AAuCI,SAUE,KAVF;AAvCJ,SAAS,UAAU;AA+BZ,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA,QACrD,QAAQ,oBAAC,UAAK,WAAU,iCAAiC,gBAAK;AAAA;AAAA;AAAA,EACjE;AAEJ;","names":[]}

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

package/dist/ui/config-segment-item/index.cjs.map

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

package/dist/ui/config-segment-item/index.d.ts

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

package/dist/ui/config-segment-item/index.d.ts.map

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

package/dist/ui/config-segment-item/index.js

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

package/dist/ui/config-segment-item/index.js.map

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