@viax.io/uxm 4.36.0

package/dist/ui/type-overview-card/type-overview-card.cjs

@@ -0,0 +1,67 @@
+"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 type_overview_card_exports = {};
+__export(type_overview_card_exports, {
+  TypeOverviewCard: () => TypeOverviewCard
+});
+module.exports = __toCommonJS(type_overview_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+var import_icon_tile = require("../../ui/icon-tile/index.cjs");
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-typeoverview-icon-bg, var(--color-accent-subtle))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-typeoverview-icon-color, var(--color-accent-bold))",
+  ["--uxm-icon-tile-size"]: "var(--uxm-typeoverview-icon-tile-size, 32px)",
+  ["--uxm-icon-tile-radius"]: "var(--uxm-typeoverview-icon-tile-radius, 8px)"
+};
+function TypeOverviewCard({
+  label,
+  value,
+  icon,
+  iconBg,
+  iconColor,
+  accent,
+  trailing,
+  className,
+  style,
+  ...rest
+}) {
+  const cssVars = {
+    ...style,
+    ...iconBg && { ["--uxm-typeoverview-icon-bg"]: iconBg },
+    ...iconColor && { ["--uxm-typeoverview-icon-color"]: iconColor },
+    ...accent && { ["--uxm-typeoverview-accent-color"]: accent }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-type-overview-card", className), style: cssVars, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "uxm-type-overview-card__accent" }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_tile.IconTile, { style: ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-type-overview-card__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-type-overview-card__value", children: value }),
+    trailing !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-type-overview-card__trailing", children: trailing ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      "View all",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "arrow-right", size: 12, strokeWidth: 2, "aria-hidden": "true" })
+    ] }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TypeOverviewCard
+});
+//# sourceMappingURL=type-overview-card.cjs.map

package/dist/ui/type-overview-card/type-overview-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/type-overview-card/type-overview-card.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\nimport { IconTile } from '@/ui/icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface TypeOverviewCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Required label, e.g. \"Revenue Motions\". */\n  label: ReactNode;\n  /** Required value, typically a count. */\n  value: ReactNode;\n  /** Icon node — `<Icon glyph=\"...\" />` is the typical fit. */\n  icon?: ReactNode;\n  /** Override the icon tile background color. */\n  iconBg?: string;\n  /** Override the icon foreground color. */\n  iconColor?: string;\n  /** Override the accent stripe color. */\n  accent?: string;\n  /** Trailing affordance shown on hover. Defaults to \"View all\" + arrow when omitted. */\n  trailing?: ReactNode;\n}\n\n// IconTile's CSS variables are bridged to TypeOverviewCard's own\n// (`--uxm-typeoverview-icon-*`) so the editor's per-instance icon knobs and\n// the `iconBg` / `iconColor` props on this component continue to work unchanged.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-typeoverview-icon-bg, var(--color-accent-subtle))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-typeoverview-icon-color, var(--color-accent-bold))',\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-typeoverview-icon-tile-size, 32px)',\n  ['--uxm-icon-tile-radius' as string]: 'var(--uxm-typeoverview-icon-tile-radius, 8px)',\n};\n\nexport function TypeOverviewCard({\n  label,\n  value,\n  icon,\n  iconBg,\n  iconColor,\n  accent,\n  trailing,\n  className,\n  style,\n  ...rest\n}: TypeOverviewCardProps) {\n  const cssVars: CSSProperties = {\n    ...style,\n    ...(iconBg && { ['--uxm-typeoverview-icon-bg' as string]: iconBg }),\n    ...(iconColor && { ['--uxm-typeoverview-icon-color' as string]: iconColor }),\n    ...(accent && { ['--uxm-typeoverview-accent-color' as string]: accent }),\n  };\n  return (\n    <div className={cn('uxm-type-overview-card', className)} style={cssVars} {...rest}>\n      <span aria-hidden=\"true\" className=\"uxm-type-overview-card__accent\" />\n      {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n      <p className=\"uxm-type-overview-card__label\">{label}</p>\n      <p className=\"uxm-type-overview-card__value\">{value}</p>\n      {trailing !== null && (\n        <span className=\"uxm-type-overview-card__trailing\">\n          {trailing ?? (\n            <>\n              View all\n              <Icon glyph=\"arrow-right\" size={12} strokeWidth={2} aria-hidden=\"true\" />\n            </>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDM;AArDN,qBAAmB;AACnB,kBAAqB;AACrB,uBAAyB;AAwBzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,UAAyB;AAAA,IAC7B,GAAG;AAAA,IACH,GAAI,UAAU,EAAE,CAAC,4BAAsC,GAAG,OAAO;AAAA,IACjE,GAAI,aAAa,EAAE,CAAC,+BAAyC,GAAG,UAAU;AAAA,IAC1E,GAAI,UAAU,EAAE,CAAC,iCAA2C,GAAG,OAAO;AAAA,EACxE;AACA,SACE,6CAAC,SAAI,eAAW,mBAAG,0BAA0B,SAAS,GAAG,OAAO,SAAU,GAAG,MAC3E;AAAA,gDAAC,UAAK,eAAY,QAAO,WAAU,kCAAiC;AAAA,IACnE,QAAQ,4CAAC,6BAAS,OAAO,iBAAkB,gBAAK;AAAA,IACjD,4CAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IACpD,4CAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IACnD,aAAa,QACZ,4CAAC,UAAK,WAAU,oCACb,sBACC,4EAAE;AAAA;AAAA,MAEA,4CAAC,oBAAK,OAAM,eAAc,MAAM,IAAI,aAAa,GAAG,eAAY,QAAO;AAAA,OACzE,GAEJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/type-overview-card/type-overview-card.css

@@ -0,0 +1,64 @@
+@charset "UTF-8";
+/* ── type-overview-card ── */
+/* TypeOverviewCard — registry knobs (bg, border, radius, padding,
+   accent*, icon*, label*, value*) all wired via `--uxm-typeoverview-*`
+   variables. The icon-side variables existed already; bg/border/radius/
+   padding and label/value text styling were the missing surface. */
+.uxm-type-overview-card {
+  background-color: var(--uxm-typeoverview-bg, var(--color-card));
+  border: 1px solid var(--uxm-typeoverview-border-color, var(--color-border));
+  border-radius: var(--uxm-typeoverview-radius, 4px);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  overflow: hidden;
+  padding: var(--uxm-typeoverview-padding, 20px);
+  position: relative;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  /* Icon tile is now <IconTile>; TypeOverviewCard's `--uxm-typeoverview-icon-*`
+     bridge to IconTile's own CSS-variable surface in the .tsx. */
+}
+.uxm-type-overview-card:hover {
+  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
+  box-shadow: var(--shadow-xs);
+}
+.uxm-type-overview-card__accent {
+  background-color: var(--uxm-typeoverview-accent-color, var(--color-accent));
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transition: width 0.15s ease;
+  width: var(--uxm-typeoverview-accent-width, 4px);
+}
+.uxm-type-overview-card:hover .uxm-type-overview-card__accent {
+  width: calc(var(--uxm-typeoverview-accent-width, 4px) + 2px);
+}
+.uxm-type-overview-card__label {
+  color: var(--uxm-typeoverview-label-color, var(--color-text-strong));
+  font-size: calc(var(--uxm-typeoverview-label-size, 14px) * var(--type-scale, 1));
+  font-weight: 500;
+  margin: 0;
+}
+.uxm-type-overview-card__value {
+  color: var(--uxm-typeoverview-value-color, var(--color-text));
+  font-size: calc(var(--uxm-typeoverview-value-size, 30px) * var(--type-scale, 1));
+  font-weight: 600;
+  line-height: 1.1;
+  margin: 0;
+}
+.uxm-type-overview-card__trailing {
+  align-items: center;
+  color: var(--color-accent-bold);
+  display: inline-flex;
+  font-size: calc(12px * var(--type-scale, 1));
+  font-weight: 500;
+  gap: 4px;
+  margin-top: auto;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.uxm-type-overview-card:hover .uxm-type-overview-card__trailing {
+  opacity: 1;
+}

package/dist/ui/type-overview-card/type-overview-card.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface TypeOverviewCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Required label, e.g. "Revenue Motions". */
+    label: ReactNode;
+    /** Required value, typically a count. */
+    value: ReactNode;
+    /** Icon node — `<Icon glyph="..." />` is the typical fit. */
+    icon?: ReactNode;
+    /** Override the icon tile background color. */
+    iconBg?: string;
+    /** Override the icon foreground color. */
+    iconColor?: string;
+    /** Override the accent stripe color. */
+    accent?: string;
+    /** Trailing affordance shown on hover. Defaults to "View all" + arrow when omitted. */
+    trailing?: ReactNode;
+}
+export declare function TypeOverviewCard({ label, value, icon, iconBg, iconColor, accent, trailing, className, style, ...rest }: TypeOverviewCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=type-overview-card.d.ts.map

package/dist/ui/type-overview-card/type-overview-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type-overview-card.d.ts","sourceRoot":"","sources":["../../../src/ui/type-overview-card/type-overview-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAyBvB"}

package/dist/ui/type-overview-card/type-overview-card.js

@@ -0,0 +1,43 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/icon/index.js";
+import { IconTile } from "../../ui/icon-tile/index.js";
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-typeoverview-icon-bg, var(--color-accent-subtle))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-typeoverview-icon-color, var(--color-accent-bold))",
+  ["--uxm-icon-tile-size"]: "var(--uxm-typeoverview-icon-tile-size, 32px)",
+  ["--uxm-icon-tile-radius"]: "var(--uxm-typeoverview-icon-tile-radius, 8px)"
+};
+function TypeOverviewCard({
+  label,
+  value,
+  icon,
+  iconBg,
+  iconColor,
+  accent,
+  trailing,
+  className,
+  style,
+  ...rest
+}) {
+  const cssVars = {
+    ...style,
+    ...iconBg && { ["--uxm-typeoverview-icon-bg"]: iconBg },
+    ...iconColor && { ["--uxm-typeoverview-icon-color"]: iconColor },
+    ...accent && { ["--uxm-typeoverview-accent-color"]: accent }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-type-overview-card", className), style: cssVars, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "uxm-type-overview-card__accent" }),
+    icon && /* @__PURE__ */ jsx(IconTile, { style: ICON_TILE_STYLE, children: icon }),
+    /* @__PURE__ */ jsx("p", { className: "uxm-type-overview-card__label", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "uxm-type-overview-card__value", children: value }),
+    trailing !== null && /* @__PURE__ */ jsx("span", { className: "uxm-type-overview-card__trailing", children: trailing ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "View all",
+      /* @__PURE__ */ jsx(Icon, { glyph: "arrow-right", size: 12, strokeWidth: 2, "aria-hidden": "true" })
+    ] }) })
+  ] });
+}
+export {
+  TypeOverviewCard
+};
+//# sourceMappingURL=type-overview-card.js.map

package/dist/ui/type-overview-card/type-overview-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/type-overview-card/type-overview-card.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\nimport { IconTile } from '@/ui/icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface TypeOverviewCardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Required label, e.g. \"Revenue Motions\". */\n  label: ReactNode;\n  /** Required value, typically a count. */\n  value: ReactNode;\n  /** Icon node — `<Icon glyph=\"...\" />` is the typical fit. */\n  icon?: ReactNode;\n  /** Override the icon tile background color. */\n  iconBg?: string;\n  /** Override the icon foreground color. */\n  iconColor?: string;\n  /** Override the accent stripe color. */\n  accent?: string;\n  /** Trailing affordance shown on hover. Defaults to \"View all\" + arrow when omitted. */\n  trailing?: ReactNode;\n}\n\n// IconTile's CSS variables are bridged to TypeOverviewCard's own\n// (`--uxm-typeoverview-icon-*`) so the editor's per-instance icon knobs and\n// the `iconBg` / `iconColor` props on this component continue to work unchanged.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-typeoverview-icon-bg, var(--color-accent-subtle))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-typeoverview-icon-color, var(--color-accent-bold))',\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-typeoverview-icon-tile-size, 32px)',\n  ['--uxm-icon-tile-radius' as string]: 'var(--uxm-typeoverview-icon-tile-radius, 8px)',\n};\n\nexport function TypeOverviewCard({\n  label,\n  value,\n  icon,\n  iconBg,\n  iconColor,\n  accent,\n  trailing,\n  className,\n  style,\n  ...rest\n}: TypeOverviewCardProps) {\n  const cssVars: CSSProperties = {\n    ...style,\n    ...(iconBg && { ['--uxm-typeoverview-icon-bg' as string]: iconBg }),\n    ...(iconColor && { ['--uxm-typeoverview-icon-color' as string]: iconColor }),\n    ...(accent && { ['--uxm-typeoverview-accent-color' as string]: accent }),\n  };\n  return (\n    <div className={cn('uxm-type-overview-card', className)} style={cssVars} {...rest}>\n      <span aria-hidden=\"true\" className=\"uxm-type-overview-card__accent\" />\n      {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n      <p className=\"uxm-type-overview-card__label\">{label}</p>\n      <p className=\"uxm-type-overview-card__value\">{value}</p>\n      {trailing !== null && (\n        <span className=\"uxm-type-overview-card__trailing\">\n          {trailing ?? (\n            <>\n              View all\n              <Icon glyph=\"arrow-right\" size={12} strokeWidth={2} aria-hidden=\"true\" />\n            </>\n          )}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAqDM,SAOM,UAPN,KAOM,YAPN;AArDN,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAwBzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,UAAyB;AAAA,IAC7B,GAAG;AAAA,IACH,GAAI,UAAU,EAAE,CAAC,4BAAsC,GAAG,OAAO;AAAA,IACjE,GAAI,aAAa,EAAE,CAAC,+BAAyC,GAAG,UAAU;AAAA,IAC1E,GAAI,UAAU,EAAE,CAAC,iCAA2C,GAAG,OAAO;AAAA,EACxE;AACA,SACE,qBAAC,SAAI,WAAW,GAAG,0BAA0B,SAAS,GAAG,OAAO,SAAU,GAAG,MAC3E;AAAA,wBAAC,UAAK,eAAY,QAAO,WAAU,kCAAiC;AAAA,IACnE,QAAQ,oBAAC,YAAS,OAAO,iBAAkB,gBAAK;AAAA,IACjD,oBAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IACpD,oBAAC,OAAE,WAAU,iCAAiC,iBAAM;AAAA,IACnD,aAAa,QACZ,oBAAC,UAAK,WAAU,oCACb,sBACC,iCAAE;AAAA;AAAA,MAEA,oBAAC,QAAK,OAAM,eAAc,MAAM,IAAI,aAAa,GAAG,eAAY,QAAO;AAAA,OACzE,GAEJ;AAAA,KAEJ;AAEJ;","names":[]}

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

package/dist/ui/view-switcher/index.cjs.map

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

package/dist/ui/view-switcher/index.d.ts

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

package/dist/ui/view-switcher/index.d.ts.map

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

package/dist/ui/view-switcher/index.js

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

package/dist/ui/view-switcher/index.js.map

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

package/dist/ui/view-switcher/view-switcher-preview.cjs

@@ -0,0 +1,122 @@
+"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 view_switcher_preview_exports = {};
+__export(view_switcher_preview_exports, {
+  ViewSwitcherPreview: () => ViewSwitcherPreview
+});
+module.exports = __toCommonJS(view_switcher_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+const VIEW_GLYPH = {
+  grid: "grid",
+  list: "list-lines"
+};
+function buildVars(styles) {
+  return {
+    "--uxm-view-switcher-track-bg": styles.trackBg,
+    "--uxm-view-switcher-track-border": styles.trackBorder,
+    "--uxm-view-switcher-track-radius": `${styles.trackRadius}px`,
+    "--uxm-view-switcher-track-padding": `${styles.trackPadding}px`,
+    "--uxm-view-switcher-gap": `${styles.gap}px`,
+    "--uxm-view-switcher-inactive-icon": styles.inactiveIcon,
+    "--uxm-view-switcher-hover-bg": styles.hoverBg,
+    "--uxm-view-switcher-hover-icon": styles.hoverIcon,
+    "--uxm-view-switcher-focus-icon": styles.focusIcon,
+    "--uxm-view-switcher-focus-ring": styles.focusRing,
+    "--uxm-view-switcher-active-bg": styles.activeBg,
+    "--uxm-view-switcher-active-icon": styles.activeIcon,
+    "--uxm-view-switcher-disabled-icon": styles.disabledIcon,
+    "--uxm-view-switcher-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-view-switcher-button-size": `${styles.buttonSize}px`,
+    "--uxm-view-switcher-button-radius": `${styles.buttonRadius}px`,
+    "--uxm-view-switcher-icon-size": `${styles.iconSize}px`
+  };
+}
+function StaticShowcase({ state }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-view-switcher", role: "group", style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": state === "active",
+      "aria-label": "Grid view",
+      tabIndex: -1,
+      className: (0, import_helpers.cn)(
+        "uxm-view-switcher__button",
+        state === "active" && "uxm-view-switcher__button--active",
+        state === "hover" && "uxm-view-switcher__button--state-hover",
+        state === "focus" && "uxm-view-switcher__button--state-focus"
+      ),
+      disabled: state === "disabled",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: VIEW_GLYPH.grid })
+    }
+  ) });
+}
+function ViewSwitcherPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const [view, setView] = (0, import_react.useState)("grid");
+  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.jsxs)("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"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui2.ViewSwitcher,
+        {
+          value: view,
+          onChange: (v) => setView(v),
+          options: [
+            {
+              value: "grid",
+              label: "Grid view",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: VIEW_GLYPH.grid }),
+              disabled: state === "disabled"
+            },
+            {
+              value: "list",
+              label: "List view",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: VIEW_GLYPH.list }),
+              disabled: state === "disabled"
+            }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ViewSwitcherPreview
+});
+//# sourceMappingURL=view-switcher-preview.cjs.map

package/dist/ui/view-switcher/view-switcher-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/view-switcher/view-switcher-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { ViewSwitcher } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\ntype View = 'grid' | 'list';\n\n// `list-lines` (4 horizontal lines) is the right glyph here — registry's\n// `list` has bullets, which is a different visual.\nconst VIEW_GLYPH: Record<View, string> = {\n  grid: 'grid',\n  list: 'list-lines',\n};\n\n/**\n * Project every registry knob as a `--uxm-view-switcher-*` custom\n * property on the wrapper. Both the static showcase and the interactive\n * instance below read from the same vars; the showcase is inert so the\n * forced state isn't overridden by real input, while the interactive\n * instance exercises the production `:hover` / `:focus-visible` /\n * `:disabled` rules on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-view-switcher-track-bg': styles.trackBg as string,\n    '--uxm-view-switcher-track-border': styles.trackBorder as string,\n    '--uxm-view-switcher-track-radius': `${styles.trackRadius}px`,\n    '--uxm-view-switcher-track-padding': `${styles.trackPadding}px`,\n    '--uxm-view-switcher-gap': `${styles.gap}px`,\n    '--uxm-view-switcher-inactive-icon': styles.inactiveIcon as string,\n    '--uxm-view-switcher-hover-bg': styles.hoverBg as string,\n    '--uxm-view-switcher-hover-icon': styles.hoverIcon as string,\n    '--uxm-view-switcher-focus-icon': styles.focusIcon as string,\n    '--uxm-view-switcher-focus-ring': styles.focusRing as string,\n    '--uxm-view-switcher-active-bg': styles.activeBg as string,\n    '--uxm-view-switcher-active-icon': styles.activeIcon as string,\n    '--uxm-view-switcher-disabled-icon': styles.disabledIcon as string,\n    '--uxm-view-switcher-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-view-switcher-button-size': `${styles.buttonSize}px`,\n    '--uxm-view-switcher-button-radius': `${styles.buttonRadius}px`,\n    '--uxm-view-switcher-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE icon button wrapped in the track surface so the\n * full styling context reads (track bg/border + button interior). Inert:\n * `pointer-events: none` blocks the production `:hover` from firing on\n * mouse-over, and `tabIndex={-1}` keeps the button out of the focus\n * order so `:focus-visible` can't fire from a real Tab press.\n *\n * Hand-rendered (not the real `<ViewSwitcher>` atom) because the atom\n * doesn't expose per-option `className` for the forced-state class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  return (\n    <div className=\"uxm-view-switcher\" role=\"group\" style={{ pointerEvents: 'none' }}>\n      <button\n        type=\"button\"\n        aria-pressed={state === 'active'}\n        aria-label=\"Grid view\"\n        tabIndex={-1}\n        className={cn(\n          'uxm-view-switcher__button',\n          state === 'active' && 'uxm-view-switcher__button--active',\n          state === 'hover' && 'uxm-view-switcher__button--state-hover',\n          state === 'focus' && 'uxm-view-switcher__button--state-focus',\n        )}\n        disabled={state === 'disabled'}\n      >\n        <Icon glyph={VIEW_GLYPH.grid} />\n      </button>\n    </div>\n  );\n}\n\nexport function ViewSwitcherPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const [view, setView] = useState<View>('grid');\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — full <ViewSwitcher> atom with two icon\n          buttons. Real `:hover` / `:focus-visible` / selection toggles\n          exercise the production CSS via the projected vars above. The\n          State dropdown only carries through to `disabled` here; the\n          rest are exercised by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <ViewSwitcher\n          value={view}\n          onChange={(v) => setView(v as View)}\n          options={[\n            {\n              value: 'grid',\n              label: 'Grid view',\n              icon: <Icon glyph={VIEW_GLYPH.grid} />,\n              disabled: state === 'disabled',\n            },\n            {\n              value: 'list',\n              label: 'List view',\n              icon: <Icon glyph={VIEW_GLYPH.list} />,\n              disabled: state === 'disabled',\n            },\n          ]}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0EQ;AA1ER,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAAqB;AACrB,IAAAA,aAA6B;AAO7B,MAAM,aAAmC;AAAA,EACvC,MAAM;AAAA,EACN,MAAM;AACR;AAUA,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,GAAG,OAAO,WAAW;AAAA,IACzD,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,2BAA2B,GAAG,OAAO,GAAG;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,gCAAgC,OAAO;AAAA,IACvC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,qCAAqC,OAAO;AAAA,IAC5C,wCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,mCAAmC,GAAG,OAAO,UAAU;AAAA,IACvD,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,iCAAiC,GAAG,OAAO,QAAQ;AAAA,EACrD;AACF;AAYA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,SACE,4CAAC,SAAI,WAAU,qBAAoB,MAAK,SAAQ,OAAO,EAAE,eAAe,OAAO,GAC7E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc,UAAU;AAAA,MACxB,cAAW;AAAA,MACX,UAAU;AAAA,MACV,eAAW;AAAA,QACT;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,UAAU,UAAU;AAAA,MAEpB,sDAAC,kBAAK,OAAO,WAAW,MAAM;AAAA;AAAA,EAChC,GACF;AAEJ;AAEO,SAAS,oBAAoB,EAAE,QAAQ,SAAS,GAAiB;AACtE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAe,MAAM;AAC7C,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E;AAAA,iDAAC,SACC;AAAA,mDAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,4CAAC,kBAAe,OAAc;AAAA,OAChC;AAAA,IAOA,6CAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,kDAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,CAAS;AAAA,UAClC,SAAS;AAAA,YACP;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,4CAAC,kBAAK,OAAO,WAAW,MAAM;AAAA,cACpC,UAAU,UAAU;AAAA,YACtB;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,4CAAC,kBAAK,OAAO,WAAW,MAAM;AAAA,cACpC,UAAU,UAAU;AAAA,YACtB;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":["import_ui"]}

package/dist/ui/view-switcher/view-switcher-preview.d.ts

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

package/dist/ui/view-switcher/view-switcher-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-switcher-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/view-switcher/view-switcher-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA6ErD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAgDrE"}

package/dist/ui/view-switcher/view-switcher-preview.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/index.js";
+import { ViewSwitcher } from "../../ui/index.js";
+const VIEW_GLYPH = {
+  grid: "grid",
+  list: "list-lines"
+};
+function buildVars(styles) {
+  return {
+    "--uxm-view-switcher-track-bg": styles.trackBg,
+    "--uxm-view-switcher-track-border": styles.trackBorder,
+    "--uxm-view-switcher-track-radius": `${styles.trackRadius}px`,
+    "--uxm-view-switcher-track-padding": `${styles.trackPadding}px`,
+    "--uxm-view-switcher-gap": `${styles.gap}px`,
+    "--uxm-view-switcher-inactive-icon": styles.inactiveIcon,
+    "--uxm-view-switcher-hover-bg": styles.hoverBg,
+    "--uxm-view-switcher-hover-icon": styles.hoverIcon,
+    "--uxm-view-switcher-focus-icon": styles.focusIcon,
+    "--uxm-view-switcher-focus-ring": styles.focusRing,
+    "--uxm-view-switcher-active-bg": styles.activeBg,
+    "--uxm-view-switcher-active-icon": styles.activeIcon,
+    "--uxm-view-switcher-disabled-icon": styles.disabledIcon,
+    "--uxm-view-switcher-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-view-switcher-button-size": `${styles.buttonSize}px`,
+    "--uxm-view-switcher-button-radius": `${styles.buttonRadius}px`,
+    "--uxm-view-switcher-icon-size": `${styles.iconSize}px`
+  };
+}
+function StaticShowcase({ state }) {
+  return /* @__PURE__ */ jsx("div", { className: "uxm-view-switcher", role: "group", style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": state === "active",
+      "aria-label": "Grid view",
+      tabIndex: -1,
+      className: cn(
+        "uxm-view-switcher__button",
+        state === "active" && "uxm-view-switcher__button--active",
+        state === "hover" && "uxm-view-switcher__button--state-hover",
+        state === "focus" && "uxm-view-switcher__button--state-focus"
+      ),
+      disabled: state === "disabled",
+      children: /* @__PURE__ */ jsx(Icon, { glyph: VIEW_GLYPH.grid })
+    }
+  ) });
+}
+function ViewSwitcherPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const [view, setView] = useState("grid");
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        ViewSwitcher,
+        {
+          value: view,
+          onChange: (v) => setView(v),
+          options: [
+            {
+              value: "grid",
+              label: "Grid view",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: VIEW_GLYPH.grid }),
+              disabled: state === "disabled"
+            },
+            {
+              value: "list",
+              label: "List view",
+              icon: /* @__PURE__ */ jsx(Icon, { glyph: VIEW_GLYPH.list }),
+              disabled: state === "disabled"
+            }
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ViewSwitcherPreview
+};
+//# sourceMappingURL=view-switcher-preview.js.map

package/dist/ui/view-switcher/view-switcher-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/view-switcher/view-switcher-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { ViewSwitcher } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\ntype View = 'grid' | 'list';\n\n// `list-lines` (4 horizontal lines) is the right glyph here — registry's\n// `list` has bullets, which is a different visual.\nconst VIEW_GLYPH: Record<View, string> = {\n  grid: 'grid',\n  list: 'list-lines',\n};\n\n/**\n * Project every registry knob as a `--uxm-view-switcher-*` custom\n * property on the wrapper. Both the static showcase and the interactive\n * instance below read from the same vars; the showcase is inert so the\n * forced state isn't overridden by real input, while the interactive\n * instance exercises the production `:hover` / `:focus-visible` /\n * `:disabled` rules on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-view-switcher-track-bg': styles.trackBg as string,\n    '--uxm-view-switcher-track-border': styles.trackBorder as string,\n    '--uxm-view-switcher-track-radius': `${styles.trackRadius}px`,\n    '--uxm-view-switcher-track-padding': `${styles.trackPadding}px`,\n    '--uxm-view-switcher-gap': `${styles.gap}px`,\n    '--uxm-view-switcher-inactive-icon': styles.inactiveIcon as string,\n    '--uxm-view-switcher-hover-bg': styles.hoverBg as string,\n    '--uxm-view-switcher-hover-icon': styles.hoverIcon as string,\n    '--uxm-view-switcher-focus-icon': styles.focusIcon as string,\n    '--uxm-view-switcher-focus-ring': styles.focusRing as string,\n    '--uxm-view-switcher-active-bg': styles.activeBg as string,\n    '--uxm-view-switcher-active-icon': styles.activeIcon as string,\n    '--uxm-view-switcher-disabled-icon': styles.disabledIcon as string,\n    '--uxm-view-switcher-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-view-switcher-button-size': `${styles.buttonSize}px`,\n    '--uxm-view-switcher-button-radius': `${styles.buttonRadius}px`,\n    '--uxm-view-switcher-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE icon button wrapped in the track surface so the\n * full styling context reads (track bg/border + button interior). Inert:\n * `pointer-events: none` blocks the production `:hover` from firing on\n * mouse-over, and `tabIndex={-1}` keeps the button out of the focus\n * order so `:focus-visible` can't fire from a real Tab press.\n *\n * Hand-rendered (not the real `<ViewSwitcher>` atom) because the atom\n * doesn't expose per-option `className` for the forced-state class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  return (\n    <div className=\"uxm-view-switcher\" role=\"group\" style={{ pointerEvents: 'none' }}>\n      <button\n        type=\"button\"\n        aria-pressed={state === 'active'}\n        aria-label=\"Grid view\"\n        tabIndex={-1}\n        className={cn(\n          'uxm-view-switcher__button',\n          state === 'active' && 'uxm-view-switcher__button--active',\n          state === 'hover' && 'uxm-view-switcher__button--state-hover',\n          state === 'focus' && 'uxm-view-switcher__button--state-focus',\n        )}\n        disabled={state === 'disabled'}\n      >\n        <Icon glyph={VIEW_GLYPH.grid} />\n      </button>\n    </div>\n  );\n}\n\nexport function ViewSwitcherPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const [view, setView] = useState<View>('grid');\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — full <ViewSwitcher> atom with two icon\n          buttons. Real `:hover` / `:focus-visible` / selection toggles\n          exercise the production CSS via the projected vars above. The\n          State dropdown only carries through to `disabled` here; the\n          rest are exercised by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <ViewSwitcher\n          value={view}\n          onChange={(v) => setView(v as View)}\n          options={[\n            {\n              value: 'grid',\n              label: 'Grid view',\n              icon: <Icon glyph={VIEW_GLYPH.grid} />,\n              disabled: state === 'disabled',\n            },\n            {\n              value: 'list',\n              label: 'List view',\n              icon: <Icon glyph={VIEW_GLYPH.list} />,\n              disabled: state === 'disabled',\n            },\n          ]}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA0EQ,cAsBA,YAtBA;AA1ER,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAO7B,MAAM,aAAmC;AAAA,EACvC,MAAM;AAAA,EACN,MAAM;AACR;AAUA,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,GAAG,OAAO,WAAW;AAAA,IACzD,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,2BAA2B,GAAG,OAAO,GAAG;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,gCAAgC,OAAO;AAAA,IACvC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,qCAAqC,OAAO;AAAA,IAC5C,wCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,mCAAmC,GAAG,OAAO,UAAU;AAAA,IACvD,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,iCAAiC,GAAG,OAAO,QAAQ;AAAA,EACrD;AACF;AAYA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,SACE,oBAAC,SAAI,WAAU,qBAAoB,MAAK,SAAQ,OAAO,EAAE,eAAe,OAAO,GAC7E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc,UAAU;AAAA,MACxB,cAAW;AAAA,MACX,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,UAAU,UAAU;AAAA,MAEpB,8BAAC,QAAK,OAAO,WAAW,MAAM;AAAA;AAAA,EAChC,GACF;AAEJ;AAEO,SAAS,oBAAoB,EAAE,QAAQ,SAAS,GAAiB;AACtE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,MAAM;AAC7C,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E;AAAA,yBAAC,SACC;AAAA,2BAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,oBAAC,kBAAe,OAAc;AAAA,OAChC;AAAA,IAOA,qBAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,0BAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,CAAS;AAAA,UAClC,SAAS;AAAA,YACP;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,QAAK,OAAO,WAAW,MAAM;AAAA,cACpC,UAAU,UAAU;AAAA,YACtB;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO;AAAA,cACP,MAAM,oBAAC,QAAK,OAAO,WAAW,MAAM;AAAA,cACpC,UAAU,UAAU;AAAA,YACtB;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/view-switcher/view-switcher.cjs

@@ -0,0 +1,66 @@
+"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 view_switcher_exports = {};
+__export(view_switcher_exports, {
+  ViewSwitcher: () => ViewSwitcher
+});
+module.exports = __toCommonJS(view_switcher_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+function ViewSwitcher({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  className,
+  ...rest
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = (0, import_react.useState)(defaultValue ?? options[0]?.value ?? "");
+  const active = isControlled ? value : internal;
+  const select = (next) => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "group", className: (0, import_helpers.cn)("uxm-view-switcher", className), ...rest, children: options.map((opt) => {
+    const isActive = opt.value === active;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": isActive,
+        "aria-label": opt.label,
+        disabled: opt.disabled,
+        className: (0, import_helpers.cn)(
+          "uxm-view-switcher__button",
+          isActive && "uxm-view-switcher__button--active"
+        ),
+        onClick: () => select(opt.value),
+        children: opt.icon
+      },
+      opt.value
+    );
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ViewSwitcher
+});
+//# sourceMappingURL=view-switcher.cjs.map

package/dist/ui/view-switcher/view-switcher.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/view-switcher/view-switcher.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface ViewSwitcherOption {\n  value: string;\n  icon: ReactNode;\n  label: string;\n  /** Disabled buttons are inert and paint the disabled styling (opacity +\n   *  disabled icon color). Selecting one is a no-op. */\n  disabled?: boolean;\n}\n\nexport interface ViewSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  options: ViewSwitcherOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n}\n\nexport function ViewSwitcher({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  className,\n  ...rest\n}: ViewSwitcherProps) {\n  const isControlled = value !== undefined;\n  const [internal, setInternal] = useState<string>(defaultValue ?? options[0]?.value ?? '');\n  const active = isControlled ? value : internal;\n\n  const select = (next: string) => {\n    if (!isControlled) setInternal(next);\n    onChange?.(next);\n  };\n\n  return (\n    <div role=\"group\" className={cn('uxm-view-switcher', className)} {...rest}>\n      {options.map((opt) => {\n        const isActive = opt.value === active;\n        return (\n          <button\n            key={opt.value}\n            type=\"button\"\n            aria-pressed={isActive}\n            aria-label={opt.label}\n            disabled={opt.disabled}\n            className={cn(\n              'uxm-view-switcher__button',\n              isActive && 'uxm-view-switcher__button--active',\n            )}\n            onClick={() => select(opt.value)}\n          >\n            {opt.icon}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CU;AA5CV,mBAAyB;AAEzB,qBAAmB;AAoBZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,eAAe,UAAU;AAC/B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAiB,gBAAgB,QAAQ,CAAC,GAAG,SAAS,EAAE;AACxF,QAAM,SAAS,eAAe,QAAQ;AAEtC,QAAM,SAAS,CAAC,SAAiB;AAC/B,QAAI,CAAC,aAAc,aAAY,IAAI;AACnC,eAAW,IAAI;AAAA,EACjB;AAEA,SACE,4CAAC,SAAI,MAAK,SAAQ,eAAW,mBAAG,qBAAqB,SAAS,GAAI,GAAG,MAClE,kBAAQ,IAAI,CAAC,QAAQ;AACpB,UAAM,WAAW,IAAI,UAAU;AAC/B,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,cAAY,IAAI;AAAA,QAChB,UAAU,IAAI;AAAA,QACd,eAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QACA,SAAS,MAAM,OAAO,IAAI,KAAK;AAAA,QAE9B,cAAI;AAAA;AAAA,MAXA,IAAI;AAAA,IAYX;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}