@viax.io/uxm 4.36.0

package/dist/ui/icon-button/icon-button-preview.js

@@ -0,0 +1,74 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { getIcon } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { IconButton } from "../../ui/index.js";
+function IconButtonPreview({ styles, variants }) {
+  const glyph = variants.glyph ?? "close";
+  const state = variants.state ?? "default";
+  const def = getIcon(glyph);
+  const [hover, setHover] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const forced = state !== "default";
+  const isHover = forced ? state === "hover" : hover;
+  const isPressed = forced ? state === "active" : pressed;
+  const isFocused = state === "focus";
+  const isDisabled = state === "disabled";
+  const isForcedState = forced;
+  const iconSize = styles.iconSize;
+  const fallback = (stateValue, base) => stateValue !== void 0 ? stateValue : base;
+  const currentBg = isPressed ? fallback(styles.activeBackgroundColor, styles.backgroundColor) : isHover ? fallback(styles.hoverBackgroundColor, styles.backgroundColor) : styles.backgroundColor;
+  const currentColor = isDisabled ? fallback(styles.disabledColor, styles.color) : isPressed ? fallback(styles.activeColor, styles.color) : isHover ? fallback(styles.hoverColor, styles.color) : isFocused ? fallback(styles.focusColor, styles.color) : styles.color;
+  const cssVars = {
+    "--uxm-icon-button-size": `${styles.size}px`,
+    "--uxm-icon-button-radius": `${styles.borderRadius}px`,
+    "--uxm-icon-button-icon-size": `${iconSize}px`,
+    "--uxm-icon-button-stroke-width": styles.strokeWidth.toString(),
+    // Default-state values projected as custom props so real `:hover` still
+    // wins on actual pointer interaction in the editor canvas.
+    "--uxm-icon-button-bg": styles.backgroundColor,
+    "--uxm-icon-button-color": styles.color,
+    // Per-state vars the production CSS rules read.
+    "--uxm-icon-button-hover-bg": styles.hoverBackgroundColor,
+    "--uxm-icon-button-hover-color": styles.hoverColor,
+    "--uxm-icon-button-active-bg": styles.activeBackgroundColor,
+    "--uxm-icon-button-active-color": styles.activeColor,
+    "--uxm-icon-button-focus-ring-color": styles.focusRingColor,
+    "--uxm-icon-button-focus-color": styles.focusColor,
+    "--uxm-icon-button-disabled-opacity": styles.disabledOpacity.toString(),
+    "--uxm-icon-button-disabled-color": styles.disabledColor,
+    // Forced-state direct overrides keep the previewed state painted
+    // regardless of real pointer/keyboard interaction. Default state skips
+    // these so `:hover` etc. still trigger naturally.
+    ...isForcedState ? {
+      backgroundColor: currentBg,
+      color: currentColor
+    } : {},
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return /* @__PURE__ */ jsx("div", { style: { padding: 16, display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      "aria-label": def?.label ?? glyph,
+      disabled: isDisabled,
+      onMouseEnter: () => !forced && setHover(true),
+      onMouseLeave: () => {
+        if (!forced) {
+          setHover(false);
+          setPressed(false);
+        }
+      },
+      onMouseDown: () => !forced && setPressed(true),
+      onMouseUp: () => !forced && setPressed(false),
+      style: cssVars,
+      children: /* @__PURE__ */ jsx(Icon, { glyph, size: iconSize, strokeWidth: styles.strokeWidth })
+    }
+  ) });
+}
+export {
+  IconButtonPreview
+};
+//# sourceMappingURL=icon-button-preview.js.map

package/dist/ui/icon-button/icon-button-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { getIcon } from '@/ui';\nimport { Icon } from '@/ui';\nimport { IconButton } from '@/ui';\n\n/**\n * Renders the real <IconButton> with state-aware projection. Default-state\n * preview projects bg/color as custom properties (so real `:hover` works in\n * the editor canvas); forced states inline direct overrides so the chosen\n * state stays painted regardless of pointer/keyboard interaction. Mirrors\n * the same pattern used by `plainButtonStateStyle` for the labelled button\n * family.\n *\n * Uses the real <Icon> atom for the glyph render so every glyph type\n * works — both path- and body-based.\n */\nexport function IconButtonPreview({ styles, variants }: PreviewProps) {\n  const glyph = (variants.glyph as string) ?? 'close';\n  const state = (variants.state as string) ?? 'default';\n  const def = getIcon(glyph);\n\n  const [hover, setHover] = useState(false);\n  const [pressed, setPressed] = useState(false);\n  const forced = state !== 'default';\n  const isHover = forced ? state === 'hover' : hover;\n  const isPressed = forced ? state === 'active' : pressed;\n  const isFocused = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isForcedState = forced;\n\n  const iconSize = styles.iconSize as number;\n\n  const fallback = <T,>(stateValue: T | undefined, base: T) =>\n    stateValue !== undefined ? stateValue : base;\n\n  const currentBg = isPressed\n    ? fallback(styles.activeBackgroundColor as string | undefined, styles.backgroundColor as string)\n    : isHover\n    ? fallback(styles.hoverBackgroundColor as string | undefined, styles.backgroundColor as string)\n    : (styles.backgroundColor as string);\n  const currentColor = isDisabled\n    ? fallback(styles.disabledColor as string | undefined, styles.color as string)\n    : isPressed\n    ? fallback(styles.activeColor as string | undefined, styles.color as string)\n    : isHover\n    ? fallback(styles.hoverColor as string | undefined, styles.color as string)\n    : isFocused\n    ? fallback(styles.focusColor as string | undefined, styles.color as string)\n    : (styles.color as string);\n\n  const cssVars: CSSProperties = {\n    '--uxm-icon-button-size': `${styles.size}px`,\n    '--uxm-icon-button-radius': `${styles.borderRadius}px`,\n    '--uxm-icon-button-icon-size': `${iconSize}px`,\n    '--uxm-icon-button-stroke-width': (styles.strokeWidth as number).toString(),\n    // Default-state values projected as custom props so real `:hover` still\n    // wins on actual pointer interaction in the editor canvas.\n    '--uxm-icon-button-bg': styles.backgroundColor as string,\n    '--uxm-icon-button-color': styles.color as string,\n    // Per-state vars the production CSS rules read.\n    '--uxm-icon-button-hover-bg': styles.hoverBackgroundColor as string,\n    '--uxm-icon-button-hover-color': styles.hoverColor as string,\n    '--uxm-icon-button-active-bg': styles.activeBackgroundColor as string | undefined,\n    '--uxm-icon-button-active-color': styles.activeColor as string | undefined,\n    '--uxm-icon-button-focus-ring-color': styles.focusRingColor as string | undefined,\n    '--uxm-icon-button-focus-color': styles.focusColor as string | undefined,\n    '--uxm-icon-button-disabled-opacity': (styles.disabledOpacity as number).toString(),\n    '--uxm-icon-button-disabled-color': styles.disabledColor as string | undefined,\n    // Forced-state direct overrides keep the previewed state painted\n    // regardless of real pointer/keyboard interaction. Default state skips\n    // these so `:hover` etc. still trigger naturally.\n    ...(isForcedState\n      ? {\n          backgroundColor: currentBg,\n          color: currentColor,\n        }\n      : {}),\n    ...(isFocused\n      ? {\n          outline: `2px solid ${styles.focusRingColor as string}`,\n          outlineOffset: 2,\n        }\n      : {}),\n  } as CSSProperties;\n\n  return (\n    <div style={{ padding: 16, display: 'inline-flex' }}>\n      <IconButton\n        aria-label={def?.label ?? glyph}\n        disabled={isDisabled}\n        onMouseEnter={() => !forced && setHover(true)}\n        onMouseLeave={() => {\n          if (!forced) {\n            setHover(false);\n            setPressed(false);\n          }\n        }}\n        onMouseDown={() => !forced && setPressed(true)}\n        onMouseUp={() => !forced && setPressed(false)}\n        style={cssVars}\n      >\n        <Icon glyph={glyph} size={iconSize} strokeWidth={styles.strokeWidth as number} />\n      </IconButton>\n    </div>\n  );\n}\n"],"mappings":"AAuGQ;AAvGR,SAAS,gBAAoC;AAG7C,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAapB,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,MAAM,QAAQ,KAAK;AAEzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,SAAS,UAAU,UAAU;AAC7C,QAAM,YAAY,SAAS,UAAU,WAAW;AAChD,QAAM,YAAY,UAAU;AAC5B,QAAM,aAAa,UAAU;AAC7B,QAAM,gBAAgB;AAEtB,QAAM,WAAW,OAAO;AAExB,QAAM,WAAW,CAAK,YAA2B,SAC/C,eAAe,SAAY,aAAa;AAE1C,QAAM,YAAY,YACd,SAAS,OAAO,uBAA6C,OAAO,eAAyB,IAC7F,UACA,SAAS,OAAO,sBAA4C,OAAO,eAAyB,IAC3F,OAAO;AACZ,QAAM,eAAe,aACjB,SAAS,OAAO,eAAqC,OAAO,KAAe,IAC3E,YACA,SAAS,OAAO,aAAmC,OAAO,KAAe,IACzE,UACA,SAAS,OAAO,YAAkC,OAAO,KAAe,IACxE,YACA,SAAS,OAAO,YAAkC,OAAO,KAAe,IACvE,OAAO;AAEZ,QAAM,UAAyB;AAAA,IAC7B,0BAA0B,GAAG,OAAO,IAAI;AAAA,IACxC,4BAA4B,GAAG,OAAO,YAAY;AAAA,IAClD,+BAA+B,GAAG,QAAQ;AAAA,IAC1C,kCAAmC,OAAO,YAAuB,SAAS;AAAA;AAAA;AAAA,IAG1E,wBAAwB,OAAO;AAAA,IAC/B,2BAA2B,OAAO;AAAA;AAAA,IAElC,8BAA8B,OAAO;AAAA,IACrC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,iCAAiC,OAAO;AAAA,IACxC,sCAAuC,OAAO,gBAA2B,SAAS;AAAA,IAClF,oCAAoC,OAAO;AAAA;AAAA;AAAA;AAAA,IAI3C,GAAI,gBACA;AAAA,MACE,iBAAiB;AAAA,MACjB,OAAO;AAAA,IACT,IACA,CAAC;AAAA,IACL,GAAI,YACA;AAAA,MACE,SAAS,aAAa,OAAO,cAAwB;AAAA,MACrD,eAAe;AAAA,IACjB,IACA,CAAC;AAAA,EACP;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,IAAI,SAAS,cAAc,GAChD;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,KAAK,SAAS;AAAA,MAC1B,UAAU;AAAA,MACV,cAAc,MAAM,CAAC,UAAU,SAAS,IAAI;AAAA,MAC5C,cAAc,MAAM;AAClB,YAAI,CAAC,QAAQ;AACX,mBAAS,KAAK;AACd,qBAAW,KAAK;AAAA,QAClB;AAAA,MACF;AAAA,MACA,aAAa,MAAM,CAAC,UAAU,WAAW,IAAI;AAAA,MAC7C,WAAW,MAAM,CAAC,UAAU,WAAW,KAAK;AAAA,MAC5C,OAAO;AAAA,MAEP,8BAAC,QAAK,OAAc,MAAM,UAAU,aAAa,OAAO,aAAuB;AAAA;AAAA,EACjF,GACF;AAEJ;","names":[]}

package/dist/ui/icon-button/icon-button.cjs

@@ -0,0 +1,33 @@
+"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 icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(icon_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function IconButton({ children, className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-icon-button", className), ...rest, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});
+//# sourceMappingURL=icon-button.cjs.map

package/dist/ui/icon-button/icon-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n}\n\nexport function IconButton({ children, className, type = 'button', ...rest }: IconButtonProps) {\n  return (\n    <button type={type} className={cn('uxm-icon-button', className)} {...rest}>\n      {children}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaI;AAbJ,qBAAmB;AAWZ,SAAS,WAAW,EAAE,UAAU,WAAW,OAAO,UAAU,GAAG,KAAK,GAAoB;AAC7F,SACE,4CAAC,YAAO,MAAY,eAAW,mBAAG,mBAAmB,SAAS,GAAI,GAAG,MAClE,UACH;AAEJ;","names":[]}

package/dist/ui/icon-button/icon-button.css

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+/* ── icon-button ── */
+/* IconButton — defaults match the `icon-button` registry: 32×32, radius 6,
+   transparent bg, text-muted icon, surface-alt hover, 0.4 disabled opacity.
+   Previously the CSS hardcoded 40×40, surface-alt bg — the editor
+   preview disagreed with production right out of the gate.
+
+   `.uxm-button-icon` (the separate `button-icon` registry component) owns
+   its own rules in `button-icon/button-icon.scss` — it must NOT be
+   re-declared here, or whichever stylesheet loads later wins the cascade
+   and silently overrides the other component's look. */
+.uxm-icon-button {
+  align-items: center;
+  background-color: var(--uxm-icon-button-bg, transparent);
+  border: none;
+  border-radius: var(--uxm-icon-button-radius, 6px);
+  color: var(--uxm-icon-button-color, var(--color-text-muted));
+  cursor: pointer;
+  display: inline-flex;
+  height: var(--uxm-icon-button-size, 32px);
+  justify-content: center;
+  transition: background-color 0.15s, color 0.15s;
+  width: var(--uxm-icon-button-size, 32px);
+}
+
+.uxm-icon-button:hover {
+  background-color: var(--uxm-icon-button-hover-bg, var(--color-surface-alt));
+  color: var(--uxm-icon-button-hover-color, var(--color-text));
+}
+
+/* Pressed falls back to HOVER before the bare default. A tinted button (an
+   accent FAB, a coloured canvas affordance) sets `-bg` + `-hover-bg` and has
+   no reason to also spell out `-active-bg`; with a direct jump to
+   `--color-surface-alt` it flashed grey the instant it was pressed — the one
+   state the pointer is guaranteed to be over. Chaining keeps every existing
+   override intact: an explicit `-active-*` still wins, and a button that sets
+   neither still lands on the same default it always did. */
+.uxm-icon-button:active {
+  background-color: var(--uxm-icon-button-active-bg, var(--uxm-icon-button-hover-bg, var(--color-surface)));
+  color: var(--uxm-icon-button-active-color, var(--uxm-icon-button-hover-color, var(--color-text)));
+}
+
+.uxm-icon-button:focus-visible {
+  color: var(--uxm-icon-button-focus-color, var(--color-text));
+  outline: 2px solid var(--uxm-icon-button-focus-ring-color, var(--color-accent));
+  outline-offset: 2px;
+}
+
+.uxm-icon-button:disabled {
+  color: var(--uxm-icon-button-disabled-color, var(--color-text-muted));
+  cursor: not-allowed;
+  opacity: var(--uxm-icon-button-disabled-opacity, 0.4);
+}
+
+/* Inner SVG sizing — without this, the `iconSize` and `strokeWidth`
+   registry knobs emitted to `--uxm-icon-button-icon-size` / `-stroke-width`
+   but nothing read them. Saves were no-ops outside the editor preview.
+   CSS wins over SVG width/height/stroke-width attributes, so any
+   <Icon size={N} strokeWidth={X}> inside an IconButton now inherits
+   the IconButton's saved sizing instead of its own per-call prop. */
+.uxm-icon-button > svg {
+  height: var(--uxm-icon-button-icon-size, 16px);
+  stroke-width: var(--uxm-icon-button-stroke-width, 1.75);
+  width: var(--uxm-icon-button-icon-size, 16px);
+}

package/dist/ui/icon-button/icon-button.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** SVG content (use the Icon component or a raw <svg>). */
+    children: ReactNode;
+    /** Required for accessibility on icon-only buttons. */
+    'aria-label': string;
+}
+export declare function IconButton({ children, className, type, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/ui/icon-button/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-button/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,CAAC;IACpB,uDAAuD;IACvD,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAe,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAM5F"}

package/dist/ui/icon-button/icon-button.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function IconButton({ children, className, type = "button", ...rest }) {
+  return /* @__PURE__ */ jsx("button", { type, className: cn("uxm-icon-button", className), ...rest, children });
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/ui/icon-button/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-button/icon-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react';\n\nexport interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** SVG content (use the Icon component or a raw <svg>). */\n  children: ReactNode;\n  /** Required for accessibility on icon-only buttons. */\n  'aria-label': string;\n}\n\nexport function IconButton({ children, className, type = 'button', ...rest }: IconButtonProps) {\n  return (\n    <button type={type} className={cn('uxm-icon-button', className)} {...rest}>\n      {children}\n    </button>\n  );\n}\n"],"mappings":"AAaI;AAbJ,SAAS,UAAU;AAWZ,SAAS,WAAW,EAAE,UAAU,WAAW,OAAO,UAAU,GAAG,KAAK,GAAoB;AAC7F,SACE,oBAAC,YAAO,MAAY,WAAW,GAAG,mBAAmB,SAAS,GAAI,GAAG,MAClE,UACH;AAEJ;","names":[]}

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

package/dist/ui/icon-button/index.cjs.map

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

package/dist/ui/icon-button/index.d.ts

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

package/dist/ui/icon-button/index.d.ts.map

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

package/dist/ui/icon-button/index.js

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

package/dist/ui/icon-button/index.js.map

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

package/dist/ui/icon-tile/icon-tile-preview.cjs

@@ -0,0 +1,41 @@
+"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 icon_tile_preview_exports = {};
+__export(icon_tile_preview_exports, {
+  IconTilePreview: () => IconTilePreview
+});
+module.exports = __toCommonJS(icon_tile_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+function IconTilePreview({ styles }) {
+  const cssVars = {
+    "--uxm-icon-tile-size": `${styles.size}px`,
+    "--uxm-icon-tile-radius": `${styles.borderRadius}px`,
+    "--uxm-icon-tile-bg": styles.iconBg,
+    "--uxm-icon-tile-color": styles.iconColor,
+    "--uxm-icon-tile-icon-size": `${styles.iconSize}px`
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.IconTile, { style: cssVars, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "grid", size: styles.iconSize }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconTilePreview
+});
+//# sourceMappingURL=icon-tile-preview.cjs.map

package/dist/ui/icon-tile/icon-tile-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-tile/icon-tile-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { IconTile } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function IconTilePreview({ styles }: PreviewProps) {\n  // Every registry knob maps to a CSS custom property the component reads.\n  const cssVars = {\n    '--uxm-icon-tile-size': `${styles.size}px`,\n    '--uxm-icon-tile-radius': `${styles.borderRadius}px`,\n    '--uxm-icon-tile-bg': styles.iconBg as string,\n    '--uxm-icon-tile-color': styles.iconColor as string,\n    '--uxm-icon-tile-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n  return (\n    <IconTile style={cssVars}>\n      <Icon glyph=\"grid\" size={styles.iconSize as number} />\n    </IconTile>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBM;AAhBN,gBAAqB;AACrB,IAAAA,aAAyB;AAIlB,SAAS,gBAAgB,EAAE,OAAO,GAAiB;AAExD,QAAM,UAAU;AAAA,IACd,wBAAwB,GAAG,OAAO,IAAI;AAAA,IACtC,0BAA0B,GAAG,OAAO,YAAY;AAAA,IAChD,sBAAsB,OAAO;AAAA,IAC7B,yBAAyB,OAAO;AAAA,IAChC,6BAA6B,GAAG,OAAO,QAAQ;AAAA,EACjD;AACA,SACE,4CAAC,uBAAS,OAAO,SACf,sDAAC,kBAAK,OAAM,QAAO,MAAM,OAAO,UAAoB,GACtD;AAEJ;","names":["import_ui"]}

package/dist/ui/icon-tile/icon-tile-preview.d.ts

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

package/dist/ui/icon-tile/icon-tile-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-tile/icon-tile-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMrD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CAcvD"}

package/dist/ui/icon-tile/icon-tile-preview.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "../../ui/index.js";
+import { IconTile } from "../../ui/index.js";
+function IconTilePreview({ styles }) {
+  const cssVars = {
+    "--uxm-icon-tile-size": `${styles.size}px`,
+    "--uxm-icon-tile-radius": `${styles.borderRadius}px`,
+    "--uxm-icon-tile-bg": styles.iconBg,
+    "--uxm-icon-tile-color": styles.iconColor,
+    "--uxm-icon-tile-icon-size": `${styles.iconSize}px`
+  };
+  return /* @__PURE__ */ jsx(IconTile, { style: cssVars, children: /* @__PURE__ */ jsx(Icon, { glyph: "grid", size: styles.iconSize }) });
+}
+export {
+  IconTilePreview
+};
+//# sourceMappingURL=icon-tile-preview.js.map

package/dist/ui/icon-tile/icon-tile-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-tile/icon-tile-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Icon } from '@/ui';\nimport { IconTile } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function IconTilePreview({ styles }: PreviewProps) {\n  // Every registry knob maps to a CSS custom property the component reads.\n  const cssVars = {\n    '--uxm-icon-tile-size': `${styles.size}px`,\n    '--uxm-icon-tile-radius': `${styles.borderRadius}px`,\n    '--uxm-icon-tile-bg': styles.iconBg as string,\n    '--uxm-icon-tile-color': styles.iconColor as string,\n    '--uxm-icon-tile-icon-size': `${styles.iconSize}px`,\n  } as CSSProperties;\n  return (\n    <IconTile style={cssVars}>\n      <Icon glyph=\"grid\" size={styles.iconSize as number} />\n    </IconTile>\n  );\n}\n"],"mappings":"AAiBM;AAhBN,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAIlB,SAAS,gBAAgB,EAAE,OAAO,GAAiB;AAExD,QAAM,UAAU;AAAA,IACd,wBAAwB,GAAG,OAAO,IAAI;AAAA,IACtC,0BAA0B,GAAG,OAAO,YAAY;AAAA,IAChD,sBAAsB,OAAO;AAAA,IAC7B,yBAAyB,OAAO;AAAA,IAChC,6BAA6B,GAAG,OAAO,QAAQ;AAAA,EACjD;AACA,SACE,oBAAC,YAAS,OAAO,SACf,8BAAC,QAAK,OAAM,QAAO,MAAM,OAAO,UAAoB,GACtD;AAEJ;","names":[]}

package/dist/ui/icon-tile/icon-tile.cjs

@@ -0,0 +1,47 @@
+"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 icon_tile_exports = {};
+__export(icon_tile_exports, {
+  IconTile: () => IconTile
+});
+module.exports = __toCommonJS(icon_tile_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function IconTile({
+  children,
+  size = 28,
+  iconBg,
+  iconColor,
+  className,
+  style,
+  ...rest
+}) {
+  const cssVars = {
+    "--uxm-icon-tile-size": `${size}px`,
+    ...iconBg ? { "--uxm-icon-tile-bg": iconBg } : {},
+    ...iconColor ? { "--uxm-icon-tile-color": iconColor } : {},
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...rest, className: (0, import_helpers.cn)("uxm-icon-tile", className), style: cssVars, children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconTile
+});
+//# sourceMappingURL=icon-tile.cjs.map

package/dist/ui/icon-tile/icon-tile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-tile/icon-tile.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface IconTileProps extends HTMLAttributes<HTMLSpanElement> {\n  /** The icon to render — typically `<Icon glyph=\"...\" size={14} />`. */\n  children: ReactNode;\n  /** Tile size in px. Defaults to 28 (the small \"row icon\" size used in cards/lists). */\n  size?: number;\n  /** Background color for the tile. Falls back to `--color-surface-alt`. */\n  iconBg?: string;\n  /** Foreground color for the tile (passed to the icon via `color`). Falls back to `--color-text-muted`. */\n  iconColor?: string;\n}\n\n/**\n * A small rounded tile that wraps an icon with a colored background — the\n * accent square seen in front of every row card / list item / type chip\n * across modo. Built as its own component because the same 6 lines of JSX\n * (rounded square + flex centering + colored bg + icon) appeared in 5\n * templates with copy-paste subtle drift.\n *\n * The tile and the inner icon are independent: callers pass the icon they\n * want as children, so the consumer controls icon glyph + size.\n */\nexport function IconTile({\n  children,\n  size = 28,\n  iconBg,\n  iconColor,\n  className,\n  style,\n  ...rest\n}: IconTileProps) {\n  // Project the per-instance overrides into CSS custom properties the\n  // class rule reads. Default tokens live in `.uxm-icon-tile` in styles.css.\n  const cssVars: CSSProperties = {\n    '--uxm-icon-tile-size': `${size}px`,\n    ...(iconBg ? { '--uxm-icon-tile-bg': iconBg } : {}),\n    ...(iconColor ? { '--uxm-icon-tile-color': iconColor } : {}),\n    ...style,\n  } as CSSProperties;\n  return (\n    <span {...rest} className={cn('uxm-icon-tile', className)} style={cssVars}>\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CI;AA3CJ,qBAAmB;AAyBZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAGhB,QAAM,UAAyB;AAAA,IAC7B,wBAAwB,GAAG,IAAI;AAAA,IAC/B,GAAI,SAAS,EAAE,sBAAsB,OAAO,IAAI,CAAC;AAAA,IACjD,GAAI,YAAY,EAAE,yBAAyB,UAAU,IAAI,CAAC;AAAA,IAC1D,GAAG;AAAA,EACL;AACA,SACE,4CAAC,UAAM,GAAG,MAAM,eAAW,mBAAG,iBAAiB,SAAS,GAAG,OAAO,SAC/D,UACH;AAEJ;","names":[]}

package/dist/ui/icon-tile/icon-tile.css

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+/* ── icon-tile ── */
+.uxm-icon-tile {
+  align-items: center;
+  background-color: var(--uxm-icon-tile-bg, var(--color-surface-alt));
+  border-radius: var(--uxm-icon-tile-radius, 6px);
+  color: var(--uxm-icon-tile-color, var(--color-text-muted));
+  display: inline-flex;
+  flex-shrink: 0;
+  height: var(--uxm-icon-tile-size, 28px);
+  justify-content: center;
+  width: var(--uxm-icon-tile-size, 28px);
+}
+
+.uxm-icon-tile > .uxm-icon {
+  height: var(--uxm-icon-tile-icon-size, 14px);
+  width: var(--uxm-icon-tile-icon-size, 14px);
+}

package/dist/ui/icon-tile/icon-tile.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface IconTileProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The icon to render — typically `<Icon glyph="..." size={14} />`. */
+    children: ReactNode;
+    /** Tile size in px. Defaults to 28 (the small "row icon" size used in cards/lists). */
+    size?: number;
+    /** Background color for the tile. Falls back to `--color-surface-alt`. */
+    iconBg?: string;
+    /** Foreground color for the tile (passed to the icon via `color`). Falls back to `--color-text-muted`. */
+    iconColor?: string;
+}
+/**
+ * A small rounded tile that wraps an icon with a colored background — the
+ * accent square seen in front of every row card / list item / type chip
+ * across modo. Built as its own component because the same 6 lines of JSX
+ * (rounded square + flex centering + colored bg + icon) appeared in 5
+ * templates with copy-paste subtle drift.
+ *
+ * The tile and the inner icon are independent: callers pass the icon they
+ * want as children, so the consumer controls icon glyph + size.
+ */
+export declare function IconTile({ children, size, iconBg, iconColor, className, style, ...rest }: IconTileProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-tile.d.ts.map

package/dist/ui/icon-tile/icon-tile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-tile.d.ts","sourceRoot":"","sources":["../../../src/ui/icon-tile/icon-tile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB,uFAAuF;IACvF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0GAA0G;IAC1G,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,IAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAcf"}

package/dist/ui/icon-tile/icon-tile.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function IconTile({
+  children,
+  size = 28,
+  iconBg,
+  iconColor,
+  className,
+  style,
+  ...rest
+}) {
+  const cssVars = {
+    "--uxm-icon-tile-size": `${size}px`,
+    ...iconBg ? { "--uxm-icon-tile-bg": iconBg } : {},
+    ...iconColor ? { "--uxm-icon-tile-color": iconColor } : {},
+    ...style
+  };
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn("uxm-icon-tile", className), style: cssVars, children });
+}
+export {
+  IconTile
+};
+//# sourceMappingURL=icon-tile.js.map

package/dist/ui/icon-tile/icon-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/icon-tile/icon-tile.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface IconTileProps extends HTMLAttributes<HTMLSpanElement> {\n  /** The icon to render — typically `<Icon glyph=\"...\" size={14} />`. */\n  children: ReactNode;\n  /** Tile size in px. Defaults to 28 (the small \"row icon\" size used in cards/lists). */\n  size?: number;\n  /** Background color for the tile. Falls back to `--color-surface-alt`. */\n  iconBg?: string;\n  /** Foreground color for the tile (passed to the icon via `color`). Falls back to `--color-text-muted`. */\n  iconColor?: string;\n}\n\n/**\n * A small rounded tile that wraps an icon with a colored background — the\n * accent square seen in front of every row card / list item / type chip\n * across modo. Built as its own component because the same 6 lines of JSX\n * (rounded square + flex centering + colored bg + icon) appeared in 5\n * templates with copy-paste subtle drift.\n *\n * The tile and the inner icon are independent: callers pass the icon they\n * want as children, so the consumer controls icon glyph + size.\n */\nexport function IconTile({\n  children,\n  size = 28,\n  iconBg,\n  iconColor,\n  className,\n  style,\n  ...rest\n}: IconTileProps) {\n  // Project the per-instance overrides into CSS custom properties the\n  // class rule reads. Default tokens live in `.uxm-icon-tile` in styles.css.\n  const cssVars: CSSProperties = {\n    '--uxm-icon-tile-size': `${size}px`,\n    ...(iconBg ? { '--uxm-icon-tile-bg': iconBg } : {}),\n    ...(iconColor ? { '--uxm-icon-tile-color': iconColor } : {}),\n    ...style,\n  } as CSSProperties;\n  return (\n    <span {...rest} className={cn('uxm-icon-tile', className)} style={cssVars}>\n      {children}\n    </span>\n  );\n}\n"],"mappings":"AA2CI;AA3CJ,SAAS,UAAU;AAyBZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAGhB,QAAM,UAAyB;AAAA,IAC7B,wBAAwB,GAAG,IAAI;AAAA,IAC/B,GAAI,SAAS,EAAE,sBAAsB,OAAO,IAAI,CAAC;AAAA,IACjD,GAAI,YAAY,EAAE,yBAAyB,UAAU,IAAI,CAAC;AAAA,IAC1D,GAAG;AAAA,EACL;AACA,SACE,oBAAC,UAAM,GAAG,MAAM,WAAW,GAAG,iBAAiB,SAAS,GAAG,OAAO,SAC/D,UACH;AAEJ;","names":[]}

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

package/dist/ui/icon-tile/index.cjs.map

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

package/dist/ui/icon-tile/index.d.ts

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

package/dist/ui/icon-tile/index.d.ts.map

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

package/dist/ui/icon-tile/index.js

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

package/dist/ui/icon-tile/index.js.map

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