@viax.io/uxm 4.36.0

package/dist/ui/section-header/section-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-header.d.ts","sourceRoot":"","sources":["../../../src/ui/section-header/section-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,oDAAoD;IACpD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAS,EACT,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAepB"}

package/dist/ui/section-header/section-header.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function SectionHeader({
+  children,
+  trailing,
+  subtitle,
+  level = 4,
+  className,
+  ...rest
+}) {
+  const Heading = `h${level}`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-section-header", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uxm-section-header__row", children: [
+      /* @__PURE__ */ jsx(Heading, { className: "uxm-section-header__title", children }),
+      trailing && /* @__PURE__ */ jsx("span", { className: "uxm-section-header__trailing", children: trailing })
+    ] }),
+    subtitle && /* @__PURE__ */ jsx("div", { className: "uxm-section-header__subtitle", children: subtitle })
+  ] });
+}
+export {
+  SectionHeader
+};
+//# sourceMappingURL=section-header.js.map

package/dist/ui/section-header/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/section-header/section-header.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface SectionHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /** Heading text — rendered uppercase by default. */\n  children: ReactNode;\n  /**\n   * Optional trailing slot — typically an `<InlineAction>` like\n   * \"Reset section\" or a small status indicator. Right-aligned.\n   */\n  trailing?: ReactNode;\n  /**\n   * Optional subtitle line below the heading — for context like\n   * \"Per Mode · Active value: 600.\" Shown only when provided.\n   */\n  subtitle?: ReactNode;\n  /**\n   * Heading level, 2–6. Defaults to `4` — unchanged from before this prop\n   * existed. Only the consumer knows how deep this header sits, and an\n   * `<h4>` under an `<h2>` skips a level, which leaves screen-reader users\n   * navigating by heading unable to tell how the sections nest. Set it to\n   * whatever follows the nearest heading above this one.\n   *\n   * Styling is identical at every level — the class does the visual work, so\n   * changing this only moves the header in the document outline.\n   */\n  level?: 2 | 3 | 4 | 5 | 6;\n}\n\n/**\n * Small uppercase section header used in dense settings / properties /\n * forms panels — the \"VARIANT\" / \"COLORS\" / \"STYLE\" labels above\n * grouped fields. Distinct from `PageHeader` (page-level, larger,\n * larger heading + meta) and `DetailSection` (bordered card with\n * an icon and accent rail).\n *\n * The heading renders as `<h4>` by default and contributes to the document\n * outline — pass `level` when that is the wrong depth for the page. An\n * optional trailing slot is inline with the heading; an optional\n * subtitle drops below.\n */\nexport function SectionHeader({\n  children,\n  trailing,\n  subtitle,\n  level = 4,\n  className,\n  ...rest\n}: SectionHeaderProps) {\n  const Heading = `h${level}` as const;\n  return (\n    <div className={cn('uxm-section-header', className)} {...rest}>\n      <div className=\"uxm-section-header__row\">\n        <Heading className=\"uxm-section-header__title\">{children}</Heading>\n        {trailing && (\n          <span className=\"uxm-section-header__trailing\">{trailing}</span>\n        )}\n      </div>\n      {subtitle && (\n        <div className=\"uxm-section-header__subtitle\">{subtitle}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAqDM,SACE,KADF;AArDN,SAAS,UAAU;AA0CZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,UAAU,IAAI,KAAK;AACzB,SACE,qBAAC,SAAI,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,MACvD;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,WAAQ,WAAU,6BAA6B,UAAS;AAAA,MACxD,YACC,oBAAC,UAAK,WAAU,gCAAgC,oBAAS;AAAA,OAE7D;AAAA,IACC,YACC,oBAAC,SAAI,WAAU,gCAAgC,oBAAS;AAAA,KAE5D;AAEJ;","names":[]}

package/dist/ui/segment-card/index.cjs

@@ -0,0 +1,29 @@
+"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 segment_card_exports = {};
+__export(segment_card_exports, {
+  SegmentCard: () => import_segment_card.SegmentCard
+});
+module.exports = __toCommonJS(segment_card_exports);
+var import_segment_card = require("./segment-card.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentCard
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/segment-card/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/index.ts"],"sourcesContent":["export { SegmentCard } from './segment-card';\nexport type { SegmentCardProps } from './segment-card';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4B;","names":[]}

package/dist/ui/segment-card/index.d.ts

@@ -0,0 +1,3 @@
+export { SegmentCard } from './segment-card.js';
+export type { SegmentCardProps } from './segment-card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/segment-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/ui/segment-card/index.js

@@ -0,0 +1,5 @@
+import { SegmentCard } from "./segment-card.js";
+export {
+  SegmentCard
+};
+//# sourceMappingURL=index.js.map

package/dist/ui/segment-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/index.ts"],"sourcesContent":["export { SegmentCard } from './segment-card';\nexport type { SegmentCardProps } from './segment-card';\n"],"mappings":"AAAA,SAAS,mBAAmB;","names":[]}

package/dist/ui/segment-card/segment-card-preview.cjs

@@ -0,0 +1,115 @@
+"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 segment_card_preview_exports = {};
+__export(segment_card_preview_exports, {
+  SegmentCardPreview: () => SegmentCardPreview
+});
+module.exports = __toCommonJS(segment_card_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_demo_row_actions = require("../../previews/demo-row-actions.cjs");
+var import_ui = require("../../ui/index.cjs");
+const OPTIONS = [{ label: "General Dentistry" }, { label: "Orthodontics" }, { label: "Oral Surgery" }];
+function Segment({
+  name,
+  count,
+  vars,
+  children
+}) {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.SegmentCard,
+    {
+      style: vars,
+      header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.SegmentRow, { name, count, dragHandle: true, open, onOpenChange: setOpen, actions: import_demo_row_actions.DemoRowActions }),
+      children: open ? children : null
+    }
+  );
+}
+function SegmentCardPreview({ styles }) {
+  const vars = {
+    "--uxm-segment-card-background": styles.backgroundColor,
+    "--uxm-segment-card-border-color": styles.borderColor,
+    "--uxm-segment-card-border-width": `${styles.borderWidth}px`,
+    "--uxm-segment-card-border-radius": `${styles.borderRadius}px`,
+    "--uxm-segment-card-padding-x": `${styles.paddingX}px`,
+    "--uxm-segment-card-padding-y": `${styles.paddingY}px`,
+    "--uxm-segment-card-children-inset-x": `${styles.childrenInsetX}px`,
+    "--uxm-segment-card-children-inset-y": `${styles.childrenInsetY}px`,
+    "--uxm-segment-card-children-gap": `${styles.childrenGap}px`,
+    "--uxm-segment-card-divider-color": styles.dividerColor,
+    "--uxm-segment-card-divider-width": `${styles.dividerWidth}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 520 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { name: "Practice Information", count: 4, vars, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.ComponentRow,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "square", size: 14 }),
+        name: "Practice Name",
+        type: "Text",
+        iconBg: "color-mix(in srgb, var(--color-accent-light) 24%, transparent)",
+        iconColor: "var(--color-accent-bold)",
+        dragHandle: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.ComponentRow,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "list", size: 14 }),
+        name: "Practice Type",
+        type: "Predefined Options",
+        chevron: true,
+        open: true,
+        iconBg: "color-mix(in srgb, var(--color-highlight-cool) 20%, transparent)",
+        iconColor: "var(--color-on-highlight-cool)",
+        dragHandle: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.OptionList, { options: OPTIONS }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Segment, { name: "Location Details", count: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.ComponentRow,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "square", size: 14 }),
+          name: "Address",
+          type: "Address",
+          iconBg: "color-mix(in srgb, var(--color-highlight-warm) 28%, transparent)",
+          iconColor: "var(--color-on-highlight-warm)",
+          dragHandle: true
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.ComponentRow,
+        {
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "grid", size: 14 }),
+          name: "Operating Hours",
+          type: "Range",
+          iconBg: "color-mix(in srgb, var(--color-accent-light) 24%, transparent)",
+          iconColor: "var(--color-accent-bold)",
+          dragHandle: true
+        }
+      )
+    ] })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentCardPreview
+});
+//# sourceMappingURL=segment-card-preview.cjs.map

package/dist/ui/segment-card/segment-card-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/segment-card-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { DemoRowActions } from '@/previews/demo-row-actions';\nimport type { PreviewProps } from '@/previews/types';\nimport { ComponentRow, Icon, OptionList, SegmentCard, SegmentRow } from '@/ui';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * SegmentCard is the segment-tree container: it wraps a SegmentRow header\n * over an inset body built from the sibling\n * building blocks — ComponentRow, OptionList, and nested SegmentCards. This\n * preview projects the SegmentCard knobs onto the outer card (they cascade to\n * the nested card) and composes a real, collapsible segment tree.\n */\nconst OPTIONS = [{ label: 'General Dentistry' }, { label: 'Orthodontics' }, { label: 'Oral Surgery' }];\n\n/** A collapsible segment: SegmentRow header wired to hide/show the body. */\nfunction Segment({\n  name,\n  count,\n  vars,\n  children,\n}: {\n  name: string;\n  count: number;\n  vars?: CSSProperties;\n  children: ReactNode;\n}) {\n  const [open, setOpen] = useState(true);\n  return (\n    <SegmentCard\n      style={vars}\n      header={<SegmentRow name={name} count={count} dragHandle open={open} onOpenChange={setOpen} actions={DemoRowActions} />}\n    >\n      {open ? children : null}\n    </SegmentCard>\n  );\n}\n\nexport function SegmentCardPreview({ styles }: PreviewProps) {\n  const vars = {\n    '--uxm-segment-card-background': styles.backgroundColor,\n    '--uxm-segment-card-border-color': styles.borderColor,\n    '--uxm-segment-card-border-width': `${styles.borderWidth}px`,\n    '--uxm-segment-card-border-radius': `${styles.borderRadius}px`,\n    '--uxm-segment-card-padding-x': `${styles.paddingX}px`,\n    '--uxm-segment-card-padding-y': `${styles.paddingY}px`,\n    '--uxm-segment-card-children-inset-x': `${styles.childrenInsetX}px`,\n    '--uxm-segment-card-children-inset-y': `${styles.childrenInsetY}px`,\n    '--uxm-segment-card-children-gap': `${styles.childrenGap}px`,\n    '--uxm-segment-card-divider-color': styles.dividerColor,\n    '--uxm-segment-card-divider-width': `${styles.dividerWidth}px`,\n  } as CSSProperties;\n\n  return (\n    <div style={{ width: 520 }}>\n      <Segment name=\"Practice Information\" count={4} vars={vars}>\n        <ComponentRow\n          icon={<Icon glyph=\"square\" size={14} />}\n          name=\"Practice Name\"\n          type=\"Text\"\n          iconBg=\"color-mix(in srgb, var(--color-accent-light) 24%, transparent)\"\n          iconColor=\"var(--color-accent-bold)\"\n          dragHandle\n        />\n        <ComponentRow\n          icon={<Icon glyph=\"list\" size={14} />}\n          name=\"Practice Type\"\n          type=\"Predefined Options\"\n          chevron\n          open\n          iconBg=\"color-mix(in srgb, var(--color-highlight-cool) 20%, transparent)\"\n          iconColor=\"var(--color-on-highlight-cool)\"\n          dragHandle\n        />\n        <OptionList options={OPTIONS} />\n\n        {/* A nested segment reuses the same SegmentCard container. */}\n        <Segment name=\"Location Details\" count={2}>\n          <ComponentRow\n            icon={<Icon glyph=\"square\" size={14} />}\n            name=\"Address\"\n            type=\"Address\"\n            iconBg=\"color-mix(in srgb, var(--color-highlight-warm) 28%, transparent)\"\n            iconColor=\"var(--color-on-highlight-warm)\"\n            dragHandle\n          />\n          <ComponentRow\n            icon={<Icon glyph=\"grid\" size={14} />}\n            name=\"Operating Hours\"\n            type=\"Range\"\n            iconBg=\"color-mix(in srgb, var(--color-accent-light) 24%, transparent)\"\n            iconColor=\"var(--color-accent-bold)\"\n            dragHandle\n          />\n        </Segment>\n      </Segment>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCc;AAjCd,mBAAyB;AAEzB,8BAA+B;AAE/B,gBAAwE;AAWxE,MAAM,UAAU,CAAC,EAAE,OAAO,oBAAoB,GAAG,EAAE,OAAO,eAAe,GAAG,EAAE,OAAO,eAAe,CAAC;AAGrG,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,IAAI;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ,4CAAC,wBAAW,MAAY,OAAc,YAAU,MAAC,MAAY,cAAc,SAAS,SAAS,wCAAgB;AAAA,MAEpH,iBAAO,WAAW;AAAA;AAAA,EACrB;AAEJ;AAEO,SAAS,mBAAmB,EAAE,OAAO,GAAiB;AAC3D,QAAM,OAAO;AAAA,IACX,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,uCAAuC,GAAG,OAAO,cAAc;AAAA,IAC/D,uCAAuC,GAAG,OAAO,cAAc;AAAA,IAC/D,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,GAAG,OAAO,YAAY;AAAA,EAC5D;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB,uDAAC,WAAQ,MAAK,wBAAuB,OAAO,GAAG,MAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,4CAAC,kBAAK,OAAM,UAAS,MAAM,IAAI;AAAA,QACrC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,WAAU;AAAA,QACV,YAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,4CAAC,kBAAK,OAAM,QAAO,MAAM,IAAI;AAAA,QACnC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAO;AAAA,QACP,MAAI;AAAA,QACJ,QAAO;AAAA,QACP,WAAU;AAAA,QACV,YAAU;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,wBAAW,SAAS,SAAS;AAAA,IAG9B,6CAAC,WAAQ,MAAK,oBAAmB,OAAO,GACtC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,4CAAC,kBAAK,OAAM,UAAS,MAAM,IAAI;AAAA,UACrC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,YAAU;AAAA;AAAA,MACZ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,4CAAC,kBAAK,OAAM,QAAO,MAAM,IAAI;AAAA,UACnC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,YAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/ui/segment-card/segment-card-preview.d.ts

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

package/dist/ui/segment-card/segment-card-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-card-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-card/segment-card-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAqCrD,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CA4D1D"}

package/dist/ui/segment-card/segment-card-preview.js

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DemoRowActions } from "../../previews/demo-row-actions.js";
+import { ComponentRow, Icon, OptionList, SegmentCard, SegmentRow } from "../../ui/index.js";
+const OPTIONS = [{ label: "General Dentistry" }, { label: "Orthodontics" }, { label: "Oral Surgery" }];
+function Segment({
+  name,
+  count,
+  vars,
+  children
+}) {
+  const [open, setOpen] = useState(true);
+  return /* @__PURE__ */ jsx(
+    SegmentCard,
+    {
+      style: vars,
+      header: /* @__PURE__ */ jsx(SegmentRow, { name, count, dragHandle: true, open, onOpenChange: setOpen, actions: DemoRowActions }),
+      children: open ? children : null
+    }
+  );
+}
+function SegmentCardPreview({ styles }) {
+  const vars = {
+    "--uxm-segment-card-background": styles.backgroundColor,
+    "--uxm-segment-card-border-color": styles.borderColor,
+    "--uxm-segment-card-border-width": `${styles.borderWidth}px`,
+    "--uxm-segment-card-border-radius": `${styles.borderRadius}px`,
+    "--uxm-segment-card-padding-x": `${styles.paddingX}px`,
+    "--uxm-segment-card-padding-y": `${styles.paddingY}px`,
+    "--uxm-segment-card-children-inset-x": `${styles.childrenInsetX}px`,
+    "--uxm-segment-card-children-inset-y": `${styles.childrenInsetY}px`,
+    "--uxm-segment-card-children-gap": `${styles.childrenGap}px`,
+    "--uxm-segment-card-divider-color": styles.dividerColor,
+    "--uxm-segment-card-divider-width": `${styles.dividerWidth}px`
+  };
+  return /* @__PURE__ */ jsx("div", { style: { width: 520 }, children: /* @__PURE__ */ jsxs(Segment, { name: "Practice Information", count: 4, vars, children: [
+    /* @__PURE__ */ jsx(
+      ComponentRow,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "square", size: 14 }),
+        name: "Practice Name",
+        type: "Text",
+        iconBg: "color-mix(in srgb, var(--color-accent-light) 24%, transparent)",
+        iconColor: "var(--color-accent-bold)",
+        dragHandle: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ComponentRow,
+      {
+        icon: /* @__PURE__ */ jsx(Icon, { glyph: "list", size: 14 }),
+        name: "Practice Type",
+        type: "Predefined Options",
+        chevron: true,
+        open: true,
+        iconBg: "color-mix(in srgb, var(--color-highlight-cool) 20%, transparent)",
+        iconColor: "var(--color-on-highlight-cool)",
+        dragHandle: true
+      }
+    ),
+    /* @__PURE__ */ jsx(OptionList, { options: OPTIONS }),
+    /* @__PURE__ */ jsxs(Segment, { name: "Location Details", count: 2, children: [
+      /* @__PURE__ */ jsx(
+        ComponentRow,
+        {
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "square", size: 14 }),
+          name: "Address",
+          type: "Address",
+          iconBg: "color-mix(in srgb, var(--color-highlight-warm) 28%, transparent)",
+          iconColor: "var(--color-on-highlight-warm)",
+          dragHandle: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComponentRow,
+        {
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "grid", size: 14 }),
+          name: "Operating Hours",
+          type: "Range",
+          iconBg: "color-mix(in srgb, var(--color-accent-light) 24%, transparent)",
+          iconColor: "var(--color-accent-bold)",
+          dragHandle: true
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  SegmentCardPreview
+};
+//# sourceMappingURL=segment-card-preview.js.map

package/dist/ui/segment-card/segment-card-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/segment-card-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { DemoRowActions } from '@/previews/demo-row-actions';\nimport type { PreviewProps } from '@/previews/types';\nimport { ComponentRow, Icon, OptionList, SegmentCard, SegmentRow } from '@/ui';\n\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * SegmentCard is the segment-tree container: it wraps a SegmentRow header\n * over an inset body built from the sibling\n * building blocks — ComponentRow, OptionList, and nested SegmentCards. This\n * preview projects the SegmentCard knobs onto the outer card (they cascade to\n * the nested card) and composes a real, collapsible segment tree.\n */\nconst OPTIONS = [{ label: 'General Dentistry' }, { label: 'Orthodontics' }, { label: 'Oral Surgery' }];\n\n/** A collapsible segment: SegmentRow header wired to hide/show the body. */\nfunction Segment({\n  name,\n  count,\n  vars,\n  children,\n}: {\n  name: string;\n  count: number;\n  vars?: CSSProperties;\n  children: ReactNode;\n}) {\n  const [open, setOpen] = useState(true);\n  return (\n    <SegmentCard\n      style={vars}\n      header={<SegmentRow name={name} count={count} dragHandle open={open} onOpenChange={setOpen} actions={DemoRowActions} />}\n    >\n      {open ? children : null}\n    </SegmentCard>\n  );\n}\n\nexport function SegmentCardPreview({ styles }: PreviewProps) {\n  const vars = {\n    '--uxm-segment-card-background': styles.backgroundColor,\n    '--uxm-segment-card-border-color': styles.borderColor,\n    '--uxm-segment-card-border-width': `${styles.borderWidth}px`,\n    '--uxm-segment-card-border-radius': `${styles.borderRadius}px`,\n    '--uxm-segment-card-padding-x': `${styles.paddingX}px`,\n    '--uxm-segment-card-padding-y': `${styles.paddingY}px`,\n    '--uxm-segment-card-children-inset-x': `${styles.childrenInsetX}px`,\n    '--uxm-segment-card-children-inset-y': `${styles.childrenInsetY}px`,\n    '--uxm-segment-card-children-gap': `${styles.childrenGap}px`,\n    '--uxm-segment-card-divider-color': styles.dividerColor,\n    '--uxm-segment-card-divider-width': `${styles.dividerWidth}px`,\n  } as CSSProperties;\n\n  return (\n    <div style={{ width: 520 }}>\n      <Segment name=\"Practice Information\" count={4} vars={vars}>\n        <ComponentRow\n          icon={<Icon glyph=\"square\" size={14} />}\n          name=\"Practice Name\"\n          type=\"Text\"\n          iconBg=\"color-mix(in srgb, var(--color-accent-light) 24%, transparent)\"\n          iconColor=\"var(--color-accent-bold)\"\n          dragHandle\n        />\n        <ComponentRow\n          icon={<Icon glyph=\"list\" size={14} />}\n          name=\"Practice Type\"\n          type=\"Predefined Options\"\n          chevron\n          open\n          iconBg=\"color-mix(in srgb, var(--color-highlight-cool) 20%, transparent)\"\n          iconColor=\"var(--color-on-highlight-cool)\"\n          dragHandle\n        />\n        <OptionList options={OPTIONS} />\n\n        {/* A nested segment reuses the same SegmentCard container. */}\n        <Segment name=\"Location Details\" count={2}>\n          <ComponentRow\n            icon={<Icon glyph=\"square\" size={14} />}\n            name=\"Address\"\n            type=\"Address\"\n            iconBg=\"color-mix(in srgb, var(--color-highlight-warm) 28%, transparent)\"\n            iconColor=\"var(--color-on-highlight-warm)\"\n            dragHandle\n          />\n          <ComponentRow\n            icon={<Icon glyph=\"grid\" size={14} />}\n            name=\"Operating Hours\"\n            type=\"Range\"\n            iconBg=\"color-mix(in srgb, var(--color-accent-light) 24%, transparent)\"\n            iconColor=\"var(--color-accent-bold)\"\n            dragHandle\n          />\n        </Segment>\n      </Segment>\n    </div>\n  );\n}\n"],"mappings":"AAiCc,cA8CN,YA9CM;AAjCd,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAE/B,SAAS,cAAc,MAAM,YAAY,aAAa,kBAAkB;AAWxE,MAAM,UAAU,CAAC,EAAE,OAAO,oBAAoB,GAAG,EAAE,OAAO,eAAe,GAAG,EAAE,OAAO,eAAe,CAAC;AAGrG,SAAS,QAAQ;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ,oBAAC,cAAW,MAAY,OAAc,YAAU,MAAC,MAAY,cAAc,SAAS,SAAS,gBAAgB;AAAA,MAEpH,iBAAO,WAAW;AAAA;AAAA,EACrB;AAEJ;AAEO,SAAS,mBAAmB,EAAE,OAAO,GAAiB;AAC3D,QAAM,OAAO;AAAA,IACX,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,gCAAgC,GAAG,OAAO,QAAQ;AAAA,IAClD,uCAAuC,GAAG,OAAO,cAAc;AAAA,IAC/D,uCAAuC,GAAG,OAAO,cAAc;AAAA,IAC/D,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,GAAG,OAAO,YAAY;AAAA,EAC5D;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB,+BAAC,WAAQ,MAAK,wBAAuB,OAAO,GAAG,MAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,IAAI;AAAA,QACrC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO;AAAA,QACP,WAAU;AAAA,QACV,YAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,oBAAC,QAAK,OAAM,QAAO,MAAM,IAAI;AAAA,QACnC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAO;AAAA,QACP,MAAI;AAAA,QACJ,QAAO;AAAA,QACP,WAAU;AAAA,QACV,YAAU;AAAA;AAAA,IACZ;AAAA,IACA,oBAAC,cAAW,SAAS,SAAS;AAAA,IAG9B,qBAAC,WAAQ,MAAK,oBAAmB,OAAO,GACtC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,IAAI;AAAA,UACrC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,YAAU;AAAA;AAAA,MACZ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,oBAAC,QAAK,OAAM,QAAO,MAAM,IAAI;AAAA,UACnC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,QAAO;AAAA,UACP,WAAU;AAAA,UACV,YAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/ui/segment-card/segment-card.cjs

@@ -0,0 +1,39 @@
+"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 segment_card_exports = {};
+__export(segment_card_exports, {
+  SegmentCard: () => SegmentCard
+});
+module.exports = __toCommonJS(segment_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+function SegmentCard({ header, divider = true, bodyId, children, className, ...rest }) {
+  const hasBody = import_react.Children.count(children) > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-segment-card", className), ...rest, children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-segment-card__header", children: header }),
+    header && hasBody && divider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-segment-card__divider", "aria-hidden": "true" }),
+    hasBody && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: bodyId, className: "uxm-segment-card__body", children })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentCard
+});
+//# sourceMappingURL=segment-card.cjs.map

package/dist/ui/segment-card/segment-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/segment-card.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface SegmentCardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The segment's header row — typically a `<SegmentRow>` or any\n   * title/drag/count node. Rendered flush at the top of the card.\n   */\n  header?: ReactNode;\n  /**\n   * Show a hairline divider between the header and the inset body. Only drawn\n   * when there is both a header and body content. Default `true`.\n   */\n  divider?: boolean;\n  /**\n   * `id` applied to the inset body element. Pass the same value to the header\n   * `SegmentRow`'s `bodyId` so its toggle button's `aria-controls` points here,\n   * wiring the disclosure→region relationship for screen readers.\n   */\n  bodyId?: string;\n  /** Inset child rows — the nested segment's component rows. */\n  children?: ReactNode;\n}\n\n/**\n * Bordered card that wraps a nested configuration segment (depth ≥ 1): a\n * header slot, an optional divider, and an inset body holding the segment's\n * child rows. Top-level segments render their rows without this wrapper.\n *\n * Every colour/dimension reads a `--uxm-segment-card-*` custom property (with\n * a token fallback) so the UXM studio knobs re-theme it.\n */\nexport function SegmentCard({ header, divider = true, bodyId, children, className, ...rest }: SegmentCardProps) {\n  const hasBody = Children.count(children) > 0;\n\n  return (\n    <div className={cn('uxm-segment-card', className)} {...rest}>\n      {header && <div className=\"uxm-segment-card__header\">{header}</div>}\n      {header && hasBody && divider && (\n        <div className=\"uxm-segment-card__divider\" aria-hidden=\"true\" />\n      )}\n      {hasBody && <div id={bodyId} className=\"uxm-segment-card__body\">{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCI;AAvCJ,mBAAyB;AAEzB,qBAAmB;AAiCZ,SAAS,YAAY,EAAE,QAAQ,UAAU,MAAM,QAAQ,UAAU,WAAW,GAAG,KAAK,GAAqB;AAC9G,QAAM,UAAU,sBAAS,MAAM,QAAQ,IAAI;AAE3C,SACE,6CAAC,SAAI,eAAW,mBAAG,oBAAoB,SAAS,GAAI,GAAG,MACpD;AAAA,cAAU,4CAAC,SAAI,WAAU,4BAA4B,kBAAO;AAAA,IAC5D,UAAU,WAAW,WACpB,4CAAC,SAAI,WAAU,6BAA4B,eAAY,QAAO;AAAA,IAE/D,WAAW,4CAAC,SAAI,IAAI,QAAQ,WAAU,0BAA0B,UAAS;AAAA,KAC5E;AAEJ;","names":[]}

package/dist/ui/segment-card/segment-card.css

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+/* ── segment-card ── */
+.uxm-segment-card {
+  background-color: var(--uxm-segment-card-background, var(--color-card));
+  border: var(--uxm-segment-card-border-width, 1px) solid var(--uxm-segment-card-border-color, var(--color-border));
+  border-radius: var(--uxm-segment-card-border-radius, 12px);
+  padding: var(--uxm-segment-card-padding-y, 0) var(--uxm-segment-card-padding-x, 0);
+}
+.uxm-segment-card__divider {
+  background-color: var(--uxm-segment-card-divider-color, var(--color-border));
+  height: var(--uxm-segment-card-divider-width, 1px);
+}
+.uxm-segment-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uxm-segment-card-children-gap, 4px);
+  padding: var(--uxm-segment-card-children-inset-y, 16px) var(--uxm-segment-card-children-inset-x, 16px);
+}

package/dist/ui/segment-card/segment-card.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SegmentCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The segment's header row — typically a `<SegmentRow>` or any
+     * title/drag/count node. Rendered flush at the top of the card.
+     */
+    header?: ReactNode;
+    /**
+     * Show a hairline divider between the header and the inset body. Only drawn
+     * when there is both a header and body content. Default `true`.
+     */
+    divider?: boolean;
+    /**
+     * `id` applied to the inset body element. Pass the same value to the header
+     * `SegmentRow`'s `bodyId` so its toggle button's `aria-controls` points here,
+     * wiring the disclosure→region relationship for screen readers.
+     */
+    bodyId?: string;
+    /** Inset child rows — the nested segment's component rows. */
+    children?: ReactNode;
+}
+/**
+ * Bordered card that wraps a nested configuration segment (depth ≥ 1): a
+ * header slot, an optional divider, and an inset body holding the segment's
+ * child rows. Top-level segments render their rows without this wrapper.
+ *
+ * Every colour/dimension reads a `--uxm-segment-card-*` custom property (with
+ * a token fallback) so the UXM studio knobs re-theme it.
+ */
+export declare function SegmentCard({ header, divider, bodyId, children, className, ...rest }: SegmentCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=segment-card.d.ts.map

package/dist/ui/segment-card/segment-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-card.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-card/segment-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAY7G"}

package/dist/ui/segment-card/segment-card.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { cn } from "../../helpers/index.js";
+function SegmentCard({ header, divider = true, bodyId, children, className, ...rest }) {
+  const hasBody = Children.count(children) > 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-segment-card", className), ...rest, children: [
+    header && /* @__PURE__ */ jsx("div", { className: "uxm-segment-card__header", children: header }),
+    header && hasBody && divider && /* @__PURE__ */ jsx("div", { className: "uxm-segment-card__divider", "aria-hidden": "true" }),
+    hasBody && /* @__PURE__ */ jsx("div", { id: bodyId, className: "uxm-segment-card__body", children })
+  ] });
+}
+export {
+  SegmentCard
+};
+//# sourceMappingURL=segment-card.js.map

package/dist/ui/segment-card/segment-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-card/segment-card.tsx"],"sourcesContent":["import { Children } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface SegmentCardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The segment's header row — typically a `<SegmentRow>` or any\n   * title/drag/count node. Rendered flush at the top of the card.\n   */\n  header?: ReactNode;\n  /**\n   * Show a hairline divider between the header and the inset body. Only drawn\n   * when there is both a header and body content. Default `true`.\n   */\n  divider?: boolean;\n  /**\n   * `id` applied to the inset body element. Pass the same value to the header\n   * `SegmentRow`'s `bodyId` so its toggle button's `aria-controls` points here,\n   * wiring the disclosure→region relationship for screen readers.\n   */\n  bodyId?: string;\n  /** Inset child rows — the nested segment's component rows. */\n  children?: ReactNode;\n}\n\n/**\n * Bordered card that wraps a nested configuration segment (depth ≥ 1): a\n * header slot, an optional divider, and an inset body holding the segment's\n * child rows. Top-level segments render their rows without this wrapper.\n *\n * Every colour/dimension reads a `--uxm-segment-card-*` custom property (with\n * a token fallback) so the UXM studio knobs re-theme it.\n */\nexport function SegmentCard({ header, divider = true, bodyId, children, className, ...rest }: SegmentCardProps) {\n  const hasBody = Children.count(children) > 0;\n\n  return (\n    <div className={cn('uxm-segment-card', className)} {...rest}>\n      {header && <div className=\"uxm-segment-card__header\">{header}</div>}\n      {header && hasBody && divider && (\n        <div className=\"uxm-segment-card__divider\" aria-hidden=\"true\" />\n      )}\n      {hasBody && <div id={bodyId} className=\"uxm-segment-card__body\">{children}</div>}\n    </div>\n  );\n}\n"],"mappings":"AAuCI,SACa,KADb;AAvCJ,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AAiCZ,SAAS,YAAY,EAAE,QAAQ,UAAU,MAAM,QAAQ,UAAU,WAAW,GAAG,KAAK,GAAqB;AAC9G,QAAM,UAAU,SAAS,MAAM,QAAQ,IAAI;AAE3C,SACE,qBAAC,SAAI,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,MACpD;AAAA,cAAU,oBAAC,SAAI,WAAU,4BAA4B,kBAAO;AAAA,IAC5D,UAAU,WAAW,WACpB,oBAAC,SAAI,WAAU,6BAA4B,eAAY,QAAO;AAAA,IAE/D,WAAW,oBAAC,SAAI,IAAI,QAAQ,WAAU,0BAA0B,UAAS;AAAA,KAC5E;AAEJ;","names":[]}

package/dist/ui/segment-row/index.cjs

@@ -0,0 +1,29 @@
+"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 segment_row_exports = {};
+__export(segment_row_exports, {
+  SegmentRow: () => import_segment_row.SegmentRow
+});
+module.exports = __toCommonJS(segment_row_exports);
+var import_segment_row = require("./segment-row.cjs");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentRow
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/segment-row/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/index.ts"],"sourcesContent":["export { SegmentRow } from './segment-row';\nexport type { SegmentRowProps } from './segment-row';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA2B;","names":[]}

package/dist/ui/segment-row/index.d.ts

@@ -0,0 +1,3 @@
+export { SegmentRow } from './segment-row.js';
+export type { SegmentRowProps } from './segment-row.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/segment-row/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/ui/segment-row/index.js

@@ -0,0 +1,5 @@
+import { SegmentRow } from "./segment-row.js";
+export {
+  SegmentRow
+};
+//# sourceMappingURL=index.js.map

package/dist/ui/segment-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/index.ts"],"sourcesContent":["export { SegmentRow } from './segment-row';\nexport type { SegmentRowProps } from './segment-row';\n"],"mappings":"AAAA,SAAS,kBAAkB;","names":[]}

package/dist/ui/segment-row/segment-row-preview.cjs

@@ -0,0 +1,78 @@
+"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 segment_row_preview_exports = {};
+__export(segment_row_preview_exports, {
+  SegmentRowPreview: () => SegmentRowPreview
+});
+module.exports = __toCommonJS(segment_row_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_demo_row_actions = require("../../previews/demo-row-actions.cjs");
+var import_ui = require("../../ui/index.cjs");
+function SegmentRowPreview({ styles, variants }) {
+  const expanded = variants.state !== "collapsed";
+  const vars = {
+    "--uxm-segment-row-padding-x": `${styles.paddingX}px`,
+    "--uxm-segment-row-padding-y": `${styles.paddingY}px`,
+    "--uxm-segment-row-gap": `${styles.gap}px`,
+    "--uxm-segment-row-drag-color": styles.dragColor,
+    "--uxm-segment-row-drag-hover-color": styles.dragHoverColor,
+    "--uxm-segment-row-chevron-color": styles.chevronColor,
+    "--uxm-segment-row-chevron-size": `${styles.chevronSize}px`,
+    "--uxm-segment-row-accent-color": styles.accentColor,
+    "--uxm-segment-row-accent-width": `${styles.accentWidth}px`,
+    "--uxm-segment-row-accent-radius": `${styles.accentRadius}px`,
+    "--uxm-segment-row-title-color": styles.titleColor,
+    "--uxm-segment-row-title-size": `${styles.titleSize}px`,
+    // Left UNSET while the knob sits at its registry default (600), so the
+    // atom's own `var(--uxm-…, var(--brand-heading-weight, 600))` chain can
+    // reach the brand token — projecting the default would pin the first
+    // fallback slot and make the brand heading weight look inert here while
+    // every other heading surface responds. An explicit override is projected
+    // and wins, exactly as the published CSS behaves (the properties panel
+    // drops an override the moment it equals the default, so "value ===
+    // default" is a sound "untouched" signal).
+    // `Number(...)` so a persisted string "600" counts as untouched too.
+    "--uxm-segment-row-title-weight": Number(styles.titleWeight) === 600 ? void 0 : styles.titleWeight,
+    "--uxm-segment-row-count-bg": styles.countBg,
+    "--uxm-segment-row-count-color": styles.countColor,
+    "--uxm-segment-row-count-size": `${styles.countSize}px`,
+    "--uxm-segment-row-count-padding-x": `${styles.countPaddingX}px`,
+    "--uxm-segment-row-count-padding-y": `${styles.countPaddingY}px`,
+    "--uxm-segment-row-count-radius": `${styles.countRadius}px`,
+    "--uxm-segment-row-row-hover-bg": styles.rowHoverBg,
+    "--uxm-segment-row-row-hover-radius": `${styles.rowHoverRadius}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 480 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.SegmentRow,
+    {
+      name: "Practice Information",
+      count: 6,
+      dragHandle: true,
+      defaultOpen: expanded,
+      actions: import_demo_row_actions.DemoRowActions,
+      style: vars
+    },
+    expanded ? "expanded" : "collapsed"
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SegmentRowPreview
+});
+//# sourceMappingURL=segment-row-preview.cjs.map

package/dist/ui/segment-row/segment-row-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/segment-row/segment-row-preview.tsx"],"sourcesContent":["import { DemoRowActions } from '@/previews/demo-row-actions';\nimport type { PreviewProps } from '@/previews/types';\nimport { SegmentRow } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Preview renders the real shipped `<SegmentRow>` atom, projecting each\n * registry knob onto its `--uxm-segment-row-*` custom property so the studio\n * controls drive the component directly.\n */\nexport function SegmentRowPreview({ styles, variants }: PreviewProps) {\n  const expanded = (variants.state as string) !== 'collapsed';\n\n  const vars = {\n    '--uxm-segment-row-padding-x': `${styles.paddingX}px`,\n    '--uxm-segment-row-padding-y': `${styles.paddingY}px`,\n    '--uxm-segment-row-gap': `${styles.gap}px`,\n    '--uxm-segment-row-drag-color': styles.dragColor,\n    '--uxm-segment-row-drag-hover-color': styles.dragHoverColor,\n    '--uxm-segment-row-chevron-color': styles.chevronColor,\n    '--uxm-segment-row-chevron-size': `${styles.chevronSize}px`,\n    '--uxm-segment-row-accent-color': styles.accentColor,\n    '--uxm-segment-row-accent-width': `${styles.accentWidth}px`,\n    '--uxm-segment-row-accent-radius': `${styles.accentRadius}px`,\n    '--uxm-segment-row-title-color': styles.titleColor,\n    '--uxm-segment-row-title-size': `${styles.titleSize}px`,\n    // Left UNSET while the knob sits at its registry default (600), so the\n    // atom's own `var(--uxm-…, var(--brand-heading-weight, 600))` chain can\n    // reach the brand token — projecting the default would pin the first\n    // fallback slot and make the brand heading weight look inert here while\n    // every other heading surface responds. An explicit override is projected\n    // and wins, exactly as the published CSS behaves (the properties panel\n    // drops an override the moment it equals the default, so \"value ===\n    // default\" is a sound \"untouched\" signal).\n    // `Number(...)` so a persisted string \"600\" counts as untouched too.\n    '--uxm-segment-row-title-weight':\n      Number(styles.titleWeight) === 600 ? undefined : styles.titleWeight,\n    '--uxm-segment-row-count-bg': styles.countBg,\n    '--uxm-segment-row-count-color': styles.countColor,\n    '--uxm-segment-row-count-size': `${styles.countSize}px`,\n    '--uxm-segment-row-count-padding-x': `${styles.countPaddingX}px`,\n    '--uxm-segment-row-count-padding-y': `${styles.countPaddingY}px`,\n    '--uxm-segment-row-count-radius': `${styles.countRadius}px`,\n    '--uxm-segment-row-row-hover-bg': styles.rowHoverBg,\n    '--uxm-segment-row-row-hover-radius': `${styles.rowHoverRadius}px`,\n  } as CSSProperties;\n\n  return (\n    <div style={{ width: 480 }}>\n      <SegmentRow\n        key={expanded ? 'expanded' : 'collapsed'}\n        name=\"Practice Information\"\n        count={6}\n        dragHandle\n        defaultOpen={expanded}\n        actions={DemoRowActions}\n        style={vars}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDM;AAlDN,8BAA+B;AAE/B,gBAA2B;AASpB,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,WAAY,SAAS,UAAqB;AAEhD,QAAM,OAAO;AAAA,IACX,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,sCAAsC,OAAO;AAAA,IAC7C,mCAAmC,OAAO;AAAA,IAC1C,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,GAAG,OAAO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUnD,kCACE,OAAO,OAAO,WAAW,MAAM,MAAM,SAAY,OAAO;AAAA,IAC1D,8BAA8B,OAAO;AAAA,IACrC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,qCAAqC,GAAG,OAAO,aAAa;AAAA,IAC5D,qCAAqC,GAAG,OAAO,aAAa;AAAA,IAC5D,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,GAAG,OAAO,cAAc;AAAA,EAChE;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MAEC,MAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAU;AAAA,MACV,aAAa;AAAA,MACb,SAAS;AAAA,MACT,OAAO;AAAA;AAAA,IANF,WAAW,aAAa;AAAA,EAO/B,GACF;AAEJ;","names":[]}

package/dist/ui/segment-row/segment-row-preview.d.ts

@@ -0,0 +1,8 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Preview renders the real shipped `<SegmentRow>` atom, projecting each
+ * registry knob onto its `--uxm-segment-row-*` custom property so the studio
+ * controls drive the component directly.
+ */
+export declare function SegmentRowPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=segment-row-preview.d.ts.map

package/dist/ui/segment-row/segment-row-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-row-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/segment-row/segment-row-preview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAKrD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAkDnE"}