@viax.io/uxm 4.36.0

package/dist/ui/bulk-action-bar/index.js.map

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

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

@@ -0,0 +1,190 @@
+"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 button_preview_exports = {};
+__export(button_preview_exports, {
+  ButtonPreview: () => ButtonPreview
+});
+module.exports = __toCommonJS(button_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+var import_ui4 = require("../../ui/index.cjs");
+function plainButtonStateStyle(props, variant) {
+  const { styles, variants } = props;
+  const state = variants.state ?? "default";
+  const isHover = state === "hover";
+  const isPressed = state === "active";
+  const isFocused = state === "focus";
+  const isDisabled = state === "disabled";
+  const isForcedState = isHover || isPressed || isFocused || isDisabled;
+  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 currentBorder = isPressed ? fallback(styles.activeBorderColor, styles.borderColor) : isHover ? fallback(styles.hoverBorderColor, styles.borderColor) : styles.borderColor;
+  const gapVar = `--uxm-button-${variant}-gap`;
+  const cssVars = {
+    // Default-state base — projected as custom props so the base CSS rule
+    // reads them and `:hover` still wins on real pointer interaction.
+    [`--uxm-button-${variant}-background-color`]: styles.backgroundColor,
+    [`--uxm-button-${variant}-color`]: styles.color,
+    [`--uxm-button-${variant}-border-color`]: styles.borderColor,
+    // State-specific vars — production CSS pseudo-class rules read these.
+    [`--uxm-button-${variant}-hover-background-color`]: styles.hoverBackgroundColor,
+    [`--uxm-button-${variant}-hover-color`]: styles.hoverColor,
+    [`--uxm-button-${variant}-hover-border-color`]: styles.hoverBorderColor,
+    [`--uxm-button-${variant}-active-background-color`]: styles.activeBackgroundColor,
+    [`--uxm-button-${variant}-active-color`]: styles.activeColor,
+    [`--uxm-button-${variant}-active-border-color`]: styles.activeBorderColor,
+    [`--uxm-button-${variant}-focus-ring-color`]: styles.focusRingColor,
+    [`--uxm-button-${variant}-focus-color`]: styles.focusColor,
+    [`--uxm-button-${variant}-disabled-opacity`]: styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    [`--uxm-button-${variant}-disabled-color`]: styles.disabledColor
+  };
+  const forcedDirectOverrides = isForcedState ? {
+    backgroundColor: currentBg,
+    color: currentColor,
+    borderColor: currentBorder
+  } : {};
+  const style = {
+    ...cssVars,
+    ...forcedDirectOverrides,
+    // Geometry/type projected as custom props (same contract as colours) so the
+    // atom's own base rule resolves them — keeps the editor consistent with the
+    // production generate-css output and with the `--uxm` variable layer,
+    // instead of inlining real properties that would shadow the var.
+    [`--uxm-button-${variant}-border-radius`]: styles.borderRadius != null ? `${styles.borderRadius}px` : void 0,
+    [`--uxm-button-${variant}-padding-y`]: styles.paddingY != null ? `${styles.paddingY}px` : void 0,
+    [`--uxm-button-${variant}-padding-x`]: styles.paddingX != null ? `${styles.paddingX}px` : void 0,
+    [`--uxm-button-${variant}-font-size`]: styles.fontSize != null ? `${styles.fontSize}px` : void 0,
+    [`--uxm-button-${variant}-font-weight`]: styles.fontWeight != null ? String(styles.fontWeight) : void 0,
+    [gapVar]: styles.gap != null ? `${styles.gap}px` : void 0,
+    ...isDisabled ? { opacity: styles.disabledOpacity } : {},
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return { style, disabled: isDisabled };
+}
+function ButtonPreview(props) {
+  const { componentId } = props;
+  if (componentId === "button-icon") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonIconStatePreview, { ...props });
+  }
+  if (componentId === "button-secondary") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "secondary");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.ButtonSecondary,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1.5 },
+        disabled: disabled2,
+        children: "Secondary Button"
+      }
+    );
+  }
+  if (componentId === "button-tertiary") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "tertiary");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.ButtonTertiary,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1 },
+        disabled: disabled2,
+        children: "Tertiary Button"
+      }
+    );
+  }
+  if (componentId === "button-ghost") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "ghost");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonGhost, { style: style2, disabled: disabled2, children: "Ghost Button" });
+  }
+  if (componentId === "button-danger") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "danger");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.ButtonDanger,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1 },
+        disabled: disabled2,
+        children: "Delete"
+      }
+    );
+  }
+  const { style, disabled } = plainButtonStateStyle(props, "primary");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonPrimary, { style, disabled, children: "Primary Button" });
+}
+function ButtonIconStatePreview({ styles, variants }) {
+  const glyph = variants.glyph ?? "plus";
+  const state = variants.state ?? "default";
+  const def = (0, import_ui4.getIcon)(glyph);
+  const [hover, setHover] = (0, import_react.useState)(false);
+  const [pressed, setPressed] = (0, import_react.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 iconSize = styles.iconSize;
+  const currentBg = isDisabled ? styles.backgroundColor : isPressed ? styles.activeBackgroundColor : isHover ? styles.hoverBackgroundColor : styles.backgroundColor;
+  const currentColor = isDisabled ? styles.disabledColor : isPressed ? styles.activeColor : isHover ? styles.hoverColor : isFocused ? styles.focusColor : styles.color;
+  const forcedDirectOverrides = forced ? { backgroundColor: currentBg, color: currentColor } : {};
+  const cssVars = {
+    "--uxm-button-icon-size": `${styles.size}px`,
+    "--uxm-button-icon-icon-size": `${iconSize}px`,
+    "--uxm-button-icon-background-color": styles.backgroundColor,
+    "--uxm-button-icon-color": styles.color,
+    "--uxm-button-icon-hover-background-color": styles.hoverBackgroundColor,
+    "--uxm-button-icon-hover-color": styles.hoverColor,
+    "--uxm-button-icon-active-background-color": styles.activeBackgroundColor,
+    "--uxm-button-icon-active-color": styles.activeColor,
+    "--uxm-button-icon-focus-ring-color": styles.focusRingColor,
+    "--uxm-button-icon-focus-color": styles.focusColor,
+    "--uxm-button-icon-disabled-opacity": styles.disabledOpacity.toString(),
+    "--uxm-button-icon-disabled-color": styles.disabledColor,
+    ...forcedDirectOverrides,
+    borderRadius: styles.borderRadius,
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui2.ButtonIcon,
+    {
+      "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__ */ (0, import_jsx_runtime.jsx)(import_ui3.Icon, { glyph, size: iconSize })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonPreview
+});
+//# sourceMappingURL=button-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/button/button-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { ButtonDanger, ButtonGhost, ButtonPrimary, ButtonSecondary, ButtonTertiary } from '@/ui';\nimport { ButtonIcon } from '@/ui';\nimport { Icon } from '@/ui';\nimport { getIcon } from '@/ui';\n\ntype PlainButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';\n\n/**\n * State-aware style for plain buttons that adopt the per-state knob pattern.\n *\n * Default-state preview projects `backgroundColor`/`color`/`borderColor` as\n * CSS custom properties (e.g. `--uxm-button-primary-background-color`), NOT\n * inline `background-color`. That preserves real pointer `:hover` interaction\n * in the editor canvas — the base rule reads the var, and the `:hover` rule\n * reads its own var without an inline declaration to fight against.\n *\n * Forced-state preview (hover/active/focus/disabled selected in the panel)\n * inlines direct `background-color`/`color`/`border-color` so the forced\n * visual stays painted regardless of real pointer/keyboard interaction. The\n * tradeoff: real `:hover` is disabled in forced-state preview, which is\n * intended (the user is examining a specific state, not exercising it).\n */\nfunction plainButtonStateStyle(\n  props: PreviewProps,\n  variant: PlainButtonVariant,\n): { style: CSSProperties; disabled: boolean } {\n  const { styles, variants } = props;\n  const state = (variants.state as string) ?? 'default';\n  const isHover = state === 'hover';\n  const isPressed = state === 'active';\n  const isFocused = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isForcedState = isHover || isPressed || isFocused || isDisabled;\n\n  const fallback = <T,>(stateValue: T | undefined, base: T) => (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\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 currentBorder = isPressed\n    ? fallback(styles.activeBorderColor as string | undefined, styles.borderColor as string)\n    : isHover\n    ? fallback(styles.hoverBorderColor as string | undefined, styles.borderColor as string)\n    : (styles.borderColor as string | undefined);\n\n  const gapVar = `--uxm-button-${variant}-gap` as const;\n  const cssVars: Record<string, string | undefined> = {\n    // Default-state base — projected as custom props so the base CSS rule\n    // reads them and `:hover` still wins on real pointer interaction.\n    [`--uxm-button-${variant}-background-color`]: styles.backgroundColor as string | undefined,\n    [`--uxm-button-${variant}-color`]: styles.color as string | undefined,\n    [`--uxm-button-${variant}-border-color`]: styles.borderColor as string | undefined,\n    // State-specific vars — production CSS pseudo-class rules read these.\n    [`--uxm-button-${variant}-hover-background-color`]: styles.hoverBackgroundColor as string | undefined,\n    [`--uxm-button-${variant}-hover-color`]: styles.hoverColor as string | undefined,\n    [`--uxm-button-${variant}-hover-border-color`]: styles.hoverBorderColor as string | undefined,\n    [`--uxm-button-${variant}-active-background-color`]: styles.activeBackgroundColor as string | undefined,\n    [`--uxm-button-${variant}-active-color`]: styles.activeColor as string | undefined,\n    [`--uxm-button-${variant}-active-border-color`]: styles.activeBorderColor as string | undefined,\n    [`--uxm-button-${variant}-focus-ring-color`]: styles.focusRingColor as string | undefined,\n    [`--uxm-button-${variant}-focus-color`]: styles.focusColor as string | undefined,\n    [`--uxm-button-${variant}-disabled-opacity`]:\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    [`--uxm-button-${variant}-disabled-color`]: styles.disabledColor as string | undefined,\n  };\n\n  // Forced state — direct inline overrides win over CSS rules and keep the\n  // selected state painted regardless of pointer/keyboard interaction. In\n  // default state we skip these so real `:hover` etc. work.\n  const forcedDirectOverrides: CSSProperties = isForcedState\n    ? {\n        backgroundColor: currentBg,\n        color: currentColor,\n        borderColor: currentBorder,\n      }\n    : {};\n\n  const style: CSSProperties = {\n    ...cssVars,\n    ...forcedDirectOverrides,\n    // Geometry/type projected as custom props (same contract as colours) so the\n    // atom's own base rule resolves them — keeps the editor consistent with the\n    // production generate-css output and with the `--uxm` variable layer,\n    // instead of inlining real properties that would shadow the var.\n    [`--uxm-button-${variant}-border-radius`]: styles.borderRadius != null ? `${styles.borderRadius}px` : undefined,\n    [`--uxm-button-${variant}-padding-y`]: styles.paddingY != null ? `${styles.paddingY}px` : undefined,\n    [`--uxm-button-${variant}-padding-x`]: styles.paddingX != null ? `${styles.paddingX}px` : undefined,\n    [`--uxm-button-${variant}-font-size`]: styles.fontSize != null ? `${styles.fontSize}px` : undefined,\n    [`--uxm-button-${variant}-font-weight`]: styles.fontWeight != null ? String(styles.fontWeight) : undefined,\n    [gapVar]: styles.gap != null ? `${styles.gap}px` : undefined,\n    ...(isDisabled ? { opacity: styles.disabledOpacity as number | undefined } : {}),\n    ...(isFocused\n      ? {\n          outline: `2px solid ${styles.focusRingColor as string}`,\n          outlineOffset: 2,\n        }\n      : {}),\n  } as CSSProperties;\n\n  return { style, disabled: isDisabled };\n}\n\nexport function ButtonPreview(props: PreviewProps) {\n  const { componentId } = props;\n\n  if (componentId === 'button-icon') {\n    return <ButtonIconStatePreview {...props} />;\n  }\n\n  if (componentId === 'button-secondary') {\n    const { style, disabled } = plainButtonStateStyle(props, 'secondary');\n    return (\n      <ButtonSecondary\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1.5 }}\n        disabled={disabled}\n      >\n        Secondary Button\n      </ButtonSecondary>\n    );\n  }\n\n  if (componentId === 'button-tertiary') {\n    const { style, disabled } = plainButtonStateStyle(props, 'tertiary');\n    return (\n      <ButtonTertiary\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1 }}\n        disabled={disabled}\n      >\n        Tertiary Button\n      </ButtonTertiary>\n    );\n  }\n\n  if (componentId === 'button-ghost') {\n    const { style, disabled } = plainButtonStateStyle(props, 'ghost');\n    return (\n      <ButtonGhost style={style} disabled={disabled}>\n        Ghost Button\n      </ButtonGhost>\n    );\n  }\n\n  if (componentId === 'button-danger') {\n    const { style, disabled } = plainButtonStateStyle(props, 'danger');\n    return (\n      <ButtonDanger\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1 }}\n        disabled={disabled}\n      >\n        Delete\n      </ButtonDanger>\n    );\n  }\n\n  const { style, disabled } = plainButtonStateStyle(props, 'primary');\n  return (\n    <ButtonPrimary style={style} disabled={disabled}>\n      Primary Button\n    </ButtonPrimary>\n  );\n}\n\n/**\n * Renders the real <ButtonIcon> so the editor preview exercises the same\n * `.uxm-button-icon` CSS path as production. Forced states (hover/active/\n * disabled chosen in the panel) override the live pointer state so designers\n * can see each state without interaction.\n */\nfunction ButtonIconStatePreview({ styles, variants }: PreviewProps) {\n  const glyph = (variants.glyph as string) ?? 'plus';\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\n  const iconSize = styles.iconSize as number;\n\n  // Resolve current-state visible values for forced-state preview. Default\n  // state skips direct overrides so real `:hover` / `:active` rules win;\n  // see plainButtonStateStyle for the full rationale.\n  const currentBg = isDisabled\n    ? (styles.backgroundColor as string)\n    : isPressed\n    ? (styles.activeBackgroundColor as string)\n    : isHover\n    ? (styles.hoverBackgroundColor as string)\n    : (styles.backgroundColor as string);\n  const currentColor = isDisabled\n    ? (styles.disabledColor as string)\n    : isPressed\n    ? (styles.activeColor as string)\n    : isHover\n    ? (styles.hoverColor as string)\n    : isFocused\n    ? (styles.focusColor as string)\n    : (styles.color as string);\n\n  const forcedDirectOverrides: CSSProperties = forced\n    ? { backgroundColor: currentBg, color: currentColor }\n    : {};\n\n  const cssVars: CSSProperties = {\n    '--uxm-button-icon-size': `${styles.size}px`,\n    '--uxm-button-icon-icon-size': `${iconSize}px`,\n    '--uxm-button-icon-background-color': styles.backgroundColor as string,\n    '--uxm-button-icon-color': styles.color as string,\n    '--uxm-button-icon-hover-background-color': styles.hoverBackgroundColor as string,\n    '--uxm-button-icon-hover-color': styles.hoverColor as string,\n    '--uxm-button-icon-active-background-color': styles.activeBackgroundColor as string,\n    '--uxm-button-icon-active-color': styles.activeColor as string,\n    '--uxm-button-icon-focus-ring-color': styles.focusRingColor as string,\n    '--uxm-button-icon-focus-color': styles.focusColor as string,\n    '--uxm-button-icon-disabled-opacity': (styles.disabledOpacity as number).toString(),\n    '--uxm-button-icon-disabled-color': styles.disabledColor as string,\n    ...forcedDirectOverrides,\n    borderRadius: styles.borderRadius as number,\n    ...(isFocused ? {\n      outline: `2px solid ${styles.focusRingColor as string}`,\n      outlineOffset: 2,\n    } : {}),\n  } as CSSProperties;\n\n  return (\n    <div style={{ padding: 16, display: 'inline-flex' }}>\n      <ButtonIcon\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} />\n      </ButtonIcon>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0HW;AA1HX,mBAA6C;AAG7C,gBAA0F;AAC1F,IAAAA,aAA2B;AAC3B,IAAAA,aAAqB;AACrB,IAAAA,aAAwB;AAmBxB,SAAS,sBACP,OACA,SAC6C;AAC7C,QAAM,EAAE,QAAQ,SAAS,IAAI;AAC7B,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAU,UAAU;AAC1B,QAAM,YAAY,UAAU;AAC5B,QAAM,YAAY,UAAU;AAC5B,QAAM,aAAa,UAAU;AAC7B,QAAM,gBAAgB,WAAW,aAAa,aAAa;AAE3D,QAAM,WAAW,CAAK,YAA2B,SAAa,eAAe,SAAY,aAAa;AAEtG,QAAM,YAAY,YACd,SAAS,OAAO,uBAA6C,OAAO,eAAyB,IAC7F,UACA,SAAS,OAAO,sBAA4C,OAAO,eAAyB,IAC3F,OAAO;AAEZ,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,gBAAgB,YAClB,SAAS,OAAO,mBAAyC,OAAO,WAAqB,IACrF,UACA,SAAS,OAAO,kBAAwC,OAAO,WAAqB,IACnF,OAAO;AAEZ,QAAM,SAAS,gBAAgB,OAAO;AACtC,QAAM,UAA8C;AAAA;AAAA;AAAA,IAGlD,CAAC,gBAAgB,OAAO,mBAAmB,GAAG,OAAO;AAAA,IACrD,CAAC,gBAAgB,OAAO,QAAQ,GAAG,OAAO;AAAA,IAC1C,CAAC,gBAAgB,OAAO,eAAe,GAAG,OAAO;AAAA;AAAA,IAEjD,CAAC,gBAAgB,OAAO,yBAAyB,GAAG,OAAO;AAAA,IAC3D,CAAC,gBAAgB,OAAO,cAAc,GAAG,OAAO;AAAA,IAChD,CAAC,gBAAgB,OAAO,qBAAqB,GAAG,OAAO;AAAA,IACvD,CAAC,gBAAgB,OAAO,0BAA0B,GAAG,OAAO;AAAA,IAC5D,CAAC,gBAAgB,OAAO,eAAe,GAAG,OAAO;AAAA,IACjD,CAAC,gBAAgB,OAAO,sBAAsB,GAAG,OAAO;AAAA,IACxD,CAAC,gBAAgB,OAAO,mBAAmB,GAAG,OAAO;AAAA,IACrD,CAAC,gBAAgB,OAAO,cAAc,GAAG,OAAO;AAAA,IAChD,CAAC,gBAAgB,OAAO,mBAAmB,GACzC,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,CAAC,gBAAgB,OAAO,iBAAiB,GAAG,OAAO;AAAA,EACrD;AAKA,QAAM,wBAAuC,gBACzC;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EACf,IACA,CAAC;AAEL,QAAM,QAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAKH,CAAC,gBAAgB,OAAO,gBAAgB,GAAG,OAAO,gBAAgB,OAAO,GAAG,OAAO,YAAY,OAAO;AAAA,IACtG,CAAC,gBAAgB,OAAO,YAAY,GAAG,OAAO,YAAY,OAAO,GAAG,OAAO,QAAQ,OAAO;AAAA,IAC1F,CAAC,gBAAgB,OAAO,YAAY,GAAG,OAAO,YAAY,OAAO,GAAG,OAAO,QAAQ,OAAO;AAAA,IAC1F,CAAC,gBAAgB,OAAO,YAAY,GAAG,OAAO,YAAY,OAAO,GAAG,OAAO,QAAQ,OAAO;AAAA,IAC1F,CAAC,gBAAgB,OAAO,cAAc,GAAG,OAAO,cAAc,OAAO,OAAO,OAAO,UAAU,IAAI;AAAA,IACjG,CAAC,MAAM,GAAG,OAAO,OAAO,OAAO,GAAG,OAAO,GAAG,OAAO;AAAA,IACnD,GAAI,aAAa,EAAE,SAAS,OAAO,gBAAsC,IAAI,CAAC;AAAA,IAC9E,GAAI,YACA;AAAA,MACE,SAAS,aAAa,OAAO,cAAwB;AAAA,MACrD,eAAe;AAAA,IACjB,IACA,CAAC;AAAA,EACP;AAEA,SAAO,EAAE,OAAO,UAAU,WAAW;AACvC;AAEO,SAAS,cAAc,OAAqB;AACjD,QAAM,EAAE,YAAY,IAAI;AAExB,MAAI,gBAAgB,eAAe;AACjC,WAAO,4CAAC,0BAAwB,GAAG,OAAO;AAAA,EAC5C;AAEA,MAAI,gBAAgB,oBAAoB;AACtC,UAAM,EAAE,OAAAC,QAAO,UAAAC,UAAS,IAAI,sBAAsB,OAAO,WAAW;AACpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,GAAGD,QAAO,aAAa,SAAS,aAAa,IAAI;AAAA,QAC1D,UAAUC;AAAA,QACX;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,MAAI,gBAAgB,mBAAmB;AACrC,UAAM,EAAE,OAAAD,QAAO,UAAAC,UAAS,IAAI,sBAAsB,OAAO,UAAU;AACnE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,GAAGD,QAAO,aAAa,SAAS,aAAa,EAAE;AAAA,QACxD,UAAUC;AAAA,QACX;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,MAAI,gBAAgB,gBAAgB;AAClC,UAAM,EAAE,OAAAD,QAAO,UAAAC,UAAS,IAAI,sBAAsB,OAAO,OAAO;AAChE,WACE,4CAAC,yBAAY,OAAOD,QAAO,UAAUC,WAAU,0BAE/C;AAAA,EAEJ;AAEA,MAAI,gBAAgB,iBAAiB;AACnC,UAAM,EAAE,OAAAD,QAAO,UAAAC,UAAS,IAAI,sBAAsB,OAAO,QAAQ;AACjE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,GAAGD,QAAO,aAAa,SAAS,aAAa,EAAE;AAAA,QACxD,UAAUC;AAAA,QACX;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,QAAM,EAAE,OAAO,SAAS,IAAI,sBAAsB,OAAO,SAAS;AAClE,SACE,4CAAC,2BAAc,OAAc,UAAoB,4BAEjD;AAEJ;AAQA,SAAS,uBAAuB,EAAE,QAAQ,SAAS,GAAiB;AAClE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,UAAM,oBAAQ,KAAK;AAEzB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AACxC,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,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;AAE7B,QAAM,WAAW,OAAO;AAKxB,QAAM,YAAY,aACb,OAAO,kBACR,YACC,OAAO,wBACR,UACC,OAAO,uBACP,OAAO;AACZ,QAAM,eAAe,aAChB,OAAO,gBACR,YACC,OAAO,cACR,UACC,OAAO,aACR,YACC,OAAO,aACP,OAAO;AAEZ,QAAM,wBAAuC,SACzC,EAAE,iBAAiB,WAAW,OAAO,aAAa,IAClD,CAAC;AAEL,QAAM,UAAyB;AAAA,IAC7B,0BAA0B,GAAG,OAAO,IAAI;AAAA,IACxC,+BAA+B,GAAG,QAAQ;AAAA,IAC1C,sCAAsC,OAAO;AAAA,IAC7C,2BAA2B,OAAO;AAAA,IAClC,4CAA4C,OAAO;AAAA,IACnD,iCAAiC,OAAO;AAAA,IACxC,6CAA6C,OAAO;AAAA,IACpD,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,iCAAiC,OAAO;AAAA,IACxC,sCAAuC,OAAO,gBAA2B,SAAS;AAAA,IAClF,oCAAoC,OAAO;AAAA,IAC3C,GAAG;AAAA,IACH,cAAc,OAAO;AAAA,IACrB,GAAI,YAAY;AAAA,MACd,SAAS,aAAa,OAAO,cAAwB;AAAA,MACrD,eAAe;AAAA,IACjB,IAAI,CAAC;AAAA,EACP;AAEA,SACE,4CAAC,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,sDAAC,mBAAK,OAAc,MAAM,UAAU;AAAA;AAAA,EACtC,GACF;AAEJ;","names":["import_ui","style","disabled"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/button/button-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAoHrD,wBAAgB,aAAa,CAAC,KAAK,EAAE,YAAY,2CA0DhD"}

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

@@ -0,0 +1,166 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ButtonDanger, ButtonGhost, ButtonPrimary, ButtonSecondary, ButtonTertiary } from "../../ui/index.js";
+import { ButtonIcon } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { getIcon } from "../../ui/index.js";
+function plainButtonStateStyle(props, variant) {
+  const { styles, variants } = props;
+  const state = variants.state ?? "default";
+  const isHover = state === "hover";
+  const isPressed = state === "active";
+  const isFocused = state === "focus";
+  const isDisabled = state === "disabled";
+  const isForcedState = isHover || isPressed || isFocused || isDisabled;
+  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 currentBorder = isPressed ? fallback(styles.activeBorderColor, styles.borderColor) : isHover ? fallback(styles.hoverBorderColor, styles.borderColor) : styles.borderColor;
+  const gapVar = `--uxm-button-${variant}-gap`;
+  const cssVars = {
+    // Default-state base — projected as custom props so the base CSS rule
+    // reads them and `:hover` still wins on real pointer interaction.
+    [`--uxm-button-${variant}-background-color`]: styles.backgroundColor,
+    [`--uxm-button-${variant}-color`]: styles.color,
+    [`--uxm-button-${variant}-border-color`]: styles.borderColor,
+    // State-specific vars — production CSS pseudo-class rules read these.
+    [`--uxm-button-${variant}-hover-background-color`]: styles.hoverBackgroundColor,
+    [`--uxm-button-${variant}-hover-color`]: styles.hoverColor,
+    [`--uxm-button-${variant}-hover-border-color`]: styles.hoverBorderColor,
+    [`--uxm-button-${variant}-active-background-color`]: styles.activeBackgroundColor,
+    [`--uxm-button-${variant}-active-color`]: styles.activeColor,
+    [`--uxm-button-${variant}-active-border-color`]: styles.activeBorderColor,
+    [`--uxm-button-${variant}-focus-ring-color`]: styles.focusRingColor,
+    [`--uxm-button-${variant}-focus-color`]: styles.focusColor,
+    [`--uxm-button-${variant}-disabled-opacity`]: styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    [`--uxm-button-${variant}-disabled-color`]: styles.disabledColor
+  };
+  const forcedDirectOverrides = isForcedState ? {
+    backgroundColor: currentBg,
+    color: currentColor,
+    borderColor: currentBorder
+  } : {};
+  const style = {
+    ...cssVars,
+    ...forcedDirectOverrides,
+    // Geometry/type projected as custom props (same contract as colours) so the
+    // atom's own base rule resolves them — keeps the editor consistent with the
+    // production generate-css output and with the `--uxm` variable layer,
+    // instead of inlining real properties that would shadow the var.
+    [`--uxm-button-${variant}-border-radius`]: styles.borderRadius != null ? `${styles.borderRadius}px` : void 0,
+    [`--uxm-button-${variant}-padding-y`]: styles.paddingY != null ? `${styles.paddingY}px` : void 0,
+    [`--uxm-button-${variant}-padding-x`]: styles.paddingX != null ? `${styles.paddingX}px` : void 0,
+    [`--uxm-button-${variant}-font-size`]: styles.fontSize != null ? `${styles.fontSize}px` : void 0,
+    [`--uxm-button-${variant}-font-weight`]: styles.fontWeight != null ? String(styles.fontWeight) : void 0,
+    [gapVar]: styles.gap != null ? `${styles.gap}px` : void 0,
+    ...isDisabled ? { opacity: styles.disabledOpacity } : {},
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return { style, disabled: isDisabled };
+}
+function ButtonPreview(props) {
+  const { componentId } = props;
+  if (componentId === "button-icon") {
+    return /* @__PURE__ */ jsx(ButtonIconStatePreview, { ...props });
+  }
+  if (componentId === "button-secondary") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "secondary");
+    return /* @__PURE__ */ jsx(
+      ButtonSecondary,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1.5 },
+        disabled: disabled2,
+        children: "Secondary Button"
+      }
+    );
+  }
+  if (componentId === "button-tertiary") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "tertiary");
+    return /* @__PURE__ */ jsx(
+      ButtonTertiary,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1 },
+        disabled: disabled2,
+        children: "Tertiary Button"
+      }
+    );
+  }
+  if (componentId === "button-ghost") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "ghost");
+    return /* @__PURE__ */ jsx(ButtonGhost, { style: style2, disabled: disabled2, children: "Ghost Button" });
+  }
+  if (componentId === "button-danger") {
+    const { style: style2, disabled: disabled2 } = plainButtonStateStyle(props, "danger");
+    return /* @__PURE__ */ jsx(
+      ButtonDanger,
+      {
+        style: { ...style2, borderStyle: "solid", borderWidth: 1 },
+        disabled: disabled2,
+        children: "Delete"
+      }
+    );
+  }
+  const { style, disabled } = plainButtonStateStyle(props, "primary");
+  return /* @__PURE__ */ jsx(ButtonPrimary, { style, disabled, children: "Primary Button" });
+}
+function ButtonIconStatePreview({ styles, variants }) {
+  const glyph = variants.glyph ?? "plus";
+  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 iconSize = styles.iconSize;
+  const currentBg = isDisabled ? styles.backgroundColor : isPressed ? styles.activeBackgroundColor : isHover ? styles.hoverBackgroundColor : styles.backgroundColor;
+  const currentColor = isDisabled ? styles.disabledColor : isPressed ? styles.activeColor : isHover ? styles.hoverColor : isFocused ? styles.focusColor : styles.color;
+  const forcedDirectOverrides = forced ? { backgroundColor: currentBg, color: currentColor } : {};
+  const cssVars = {
+    "--uxm-button-icon-size": `${styles.size}px`,
+    "--uxm-button-icon-icon-size": `${iconSize}px`,
+    "--uxm-button-icon-background-color": styles.backgroundColor,
+    "--uxm-button-icon-color": styles.color,
+    "--uxm-button-icon-hover-background-color": styles.hoverBackgroundColor,
+    "--uxm-button-icon-hover-color": styles.hoverColor,
+    "--uxm-button-icon-active-background-color": styles.activeBackgroundColor,
+    "--uxm-button-icon-active-color": styles.activeColor,
+    "--uxm-button-icon-focus-ring-color": styles.focusRingColor,
+    "--uxm-button-icon-focus-color": styles.focusColor,
+    "--uxm-button-icon-disabled-opacity": styles.disabledOpacity.toString(),
+    "--uxm-button-icon-disabled-color": styles.disabledColor,
+    ...forcedDirectOverrides,
+    borderRadius: styles.borderRadius,
+    ...isFocused ? {
+      outline: `2px solid ${styles.focusRingColor}`,
+      outlineOffset: 2
+    } : {}
+  };
+  return /* @__PURE__ */ jsx("div", { style: { padding: 16, display: "inline-flex" }, children: /* @__PURE__ */ jsx(
+    ButtonIcon,
+    {
+      "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 })
+    }
+  ) });
+}
+export {
+  ButtonPreview
+};
+//# sourceMappingURL=button-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/button/button-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { ButtonDanger, ButtonGhost, ButtonPrimary, ButtonSecondary, ButtonTertiary } from '@/ui';\nimport { ButtonIcon } from '@/ui';\nimport { Icon } from '@/ui';\nimport { getIcon } from '@/ui';\n\ntype PlainButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger';\n\n/**\n * State-aware style for plain buttons that adopt the per-state knob pattern.\n *\n * Default-state preview projects `backgroundColor`/`color`/`borderColor` as\n * CSS custom properties (e.g. `--uxm-button-primary-background-color`), NOT\n * inline `background-color`. That preserves real pointer `:hover` interaction\n * in the editor canvas — the base rule reads the var, and the `:hover` rule\n * reads its own var without an inline declaration to fight against.\n *\n * Forced-state preview (hover/active/focus/disabled selected in the panel)\n * inlines direct `background-color`/`color`/`border-color` so the forced\n * visual stays painted regardless of real pointer/keyboard interaction. The\n * tradeoff: real `:hover` is disabled in forced-state preview, which is\n * intended (the user is examining a specific state, not exercising it).\n */\nfunction plainButtonStateStyle(\n  props: PreviewProps,\n  variant: PlainButtonVariant,\n): { style: CSSProperties; disabled: boolean } {\n  const { styles, variants } = props;\n  const state = (variants.state as string) ?? 'default';\n  const isHover = state === 'hover';\n  const isPressed = state === 'active';\n  const isFocused = state === 'focus';\n  const isDisabled = state === 'disabled';\n  const isForcedState = isHover || isPressed || isFocused || isDisabled;\n\n  const fallback = <T,>(stateValue: T | undefined, base: T) => (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\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 currentBorder = isPressed\n    ? fallback(styles.activeBorderColor as string | undefined, styles.borderColor as string)\n    : isHover\n    ? fallback(styles.hoverBorderColor as string | undefined, styles.borderColor as string)\n    : (styles.borderColor as string | undefined);\n\n  const gapVar = `--uxm-button-${variant}-gap` as const;\n  const cssVars: Record<string, string | undefined> = {\n    // Default-state base — projected as custom props so the base CSS rule\n    // reads them and `:hover` still wins on real pointer interaction.\n    [`--uxm-button-${variant}-background-color`]: styles.backgroundColor as string | undefined,\n    [`--uxm-button-${variant}-color`]: styles.color as string | undefined,\n    [`--uxm-button-${variant}-border-color`]: styles.borderColor as string | undefined,\n    // State-specific vars — production CSS pseudo-class rules read these.\n    [`--uxm-button-${variant}-hover-background-color`]: styles.hoverBackgroundColor as string | undefined,\n    [`--uxm-button-${variant}-hover-color`]: styles.hoverColor as string | undefined,\n    [`--uxm-button-${variant}-hover-border-color`]: styles.hoverBorderColor as string | undefined,\n    [`--uxm-button-${variant}-active-background-color`]: styles.activeBackgroundColor as string | undefined,\n    [`--uxm-button-${variant}-active-color`]: styles.activeColor as string | undefined,\n    [`--uxm-button-${variant}-active-border-color`]: styles.activeBorderColor as string | undefined,\n    [`--uxm-button-${variant}-focus-ring-color`]: styles.focusRingColor as string | undefined,\n    [`--uxm-button-${variant}-focus-color`]: styles.focusColor as string | undefined,\n    [`--uxm-button-${variant}-disabled-opacity`]:\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    [`--uxm-button-${variant}-disabled-color`]: styles.disabledColor as string | undefined,\n  };\n\n  // Forced state — direct inline overrides win over CSS rules and keep the\n  // selected state painted regardless of pointer/keyboard interaction. In\n  // default state we skip these so real `:hover` etc. work.\n  const forcedDirectOverrides: CSSProperties = isForcedState\n    ? {\n        backgroundColor: currentBg,\n        color: currentColor,\n        borderColor: currentBorder,\n      }\n    : {};\n\n  const style: CSSProperties = {\n    ...cssVars,\n    ...forcedDirectOverrides,\n    // Geometry/type projected as custom props (same contract as colours) so the\n    // atom's own base rule resolves them — keeps the editor consistent with the\n    // production generate-css output and with the `--uxm` variable layer,\n    // instead of inlining real properties that would shadow the var.\n    [`--uxm-button-${variant}-border-radius`]: styles.borderRadius != null ? `${styles.borderRadius}px` : undefined,\n    [`--uxm-button-${variant}-padding-y`]: styles.paddingY != null ? `${styles.paddingY}px` : undefined,\n    [`--uxm-button-${variant}-padding-x`]: styles.paddingX != null ? `${styles.paddingX}px` : undefined,\n    [`--uxm-button-${variant}-font-size`]: styles.fontSize != null ? `${styles.fontSize}px` : undefined,\n    [`--uxm-button-${variant}-font-weight`]: styles.fontWeight != null ? String(styles.fontWeight) : undefined,\n    [gapVar]: styles.gap != null ? `${styles.gap}px` : undefined,\n    ...(isDisabled ? { opacity: styles.disabledOpacity as number | undefined } : {}),\n    ...(isFocused\n      ? {\n          outline: `2px solid ${styles.focusRingColor as string}`,\n          outlineOffset: 2,\n        }\n      : {}),\n  } as CSSProperties;\n\n  return { style, disabled: isDisabled };\n}\n\nexport function ButtonPreview(props: PreviewProps) {\n  const { componentId } = props;\n\n  if (componentId === 'button-icon') {\n    return <ButtonIconStatePreview {...props} />;\n  }\n\n  if (componentId === 'button-secondary') {\n    const { style, disabled } = plainButtonStateStyle(props, 'secondary');\n    return (\n      <ButtonSecondary\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1.5 }}\n        disabled={disabled}\n      >\n        Secondary Button\n      </ButtonSecondary>\n    );\n  }\n\n  if (componentId === 'button-tertiary') {\n    const { style, disabled } = plainButtonStateStyle(props, 'tertiary');\n    return (\n      <ButtonTertiary\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1 }}\n        disabled={disabled}\n      >\n        Tertiary Button\n      </ButtonTertiary>\n    );\n  }\n\n  if (componentId === 'button-ghost') {\n    const { style, disabled } = plainButtonStateStyle(props, 'ghost');\n    return (\n      <ButtonGhost style={style} disabled={disabled}>\n        Ghost Button\n      </ButtonGhost>\n    );\n  }\n\n  if (componentId === 'button-danger') {\n    const { style, disabled } = plainButtonStateStyle(props, 'danger');\n    return (\n      <ButtonDanger\n        style={{ ...style, borderStyle: 'solid', borderWidth: 1 }}\n        disabled={disabled}\n      >\n        Delete\n      </ButtonDanger>\n    );\n  }\n\n  const { style, disabled } = plainButtonStateStyle(props, 'primary');\n  return (\n    <ButtonPrimary style={style} disabled={disabled}>\n      Primary Button\n    </ButtonPrimary>\n  );\n}\n\n/**\n * Renders the real <ButtonIcon> so the editor preview exercises the same\n * `.uxm-button-icon` CSS path as production. Forced states (hover/active/\n * disabled chosen in the panel) override the live pointer state so designers\n * can see each state without interaction.\n */\nfunction ButtonIconStatePreview({ styles, variants }: PreviewProps) {\n  const glyph = (variants.glyph as string) ?? 'plus';\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\n  const iconSize = styles.iconSize as number;\n\n  // Resolve current-state visible values for forced-state preview. Default\n  // state skips direct overrides so real `:hover` / `:active` rules win;\n  // see plainButtonStateStyle for the full rationale.\n  const currentBg = isDisabled\n    ? (styles.backgroundColor as string)\n    : isPressed\n    ? (styles.activeBackgroundColor as string)\n    : isHover\n    ? (styles.hoverBackgroundColor as string)\n    : (styles.backgroundColor as string);\n  const currentColor = isDisabled\n    ? (styles.disabledColor as string)\n    : isPressed\n    ? (styles.activeColor as string)\n    : isHover\n    ? (styles.hoverColor as string)\n    : isFocused\n    ? (styles.focusColor as string)\n    : (styles.color as string);\n\n  const forcedDirectOverrides: CSSProperties = forced\n    ? { backgroundColor: currentBg, color: currentColor }\n    : {};\n\n  const cssVars: CSSProperties = {\n    '--uxm-button-icon-size': `${styles.size}px`,\n    '--uxm-button-icon-icon-size': `${iconSize}px`,\n    '--uxm-button-icon-background-color': styles.backgroundColor as string,\n    '--uxm-button-icon-color': styles.color as string,\n    '--uxm-button-icon-hover-background-color': styles.hoverBackgroundColor as string,\n    '--uxm-button-icon-hover-color': styles.hoverColor as string,\n    '--uxm-button-icon-active-background-color': styles.activeBackgroundColor as string,\n    '--uxm-button-icon-active-color': styles.activeColor as string,\n    '--uxm-button-icon-focus-ring-color': styles.focusRingColor as string,\n    '--uxm-button-icon-focus-color': styles.focusColor as string,\n    '--uxm-button-icon-disabled-opacity': (styles.disabledOpacity as number).toString(),\n    '--uxm-button-icon-disabled-color': styles.disabledColor as string,\n    ...forcedDirectOverrides,\n    borderRadius: styles.borderRadius as number,\n    ...(isFocused ? {\n      outline: `2px solid ${styles.focusRingColor as string}`,\n      outlineOffset: 2,\n    } : {}),\n  } as CSSProperties;\n\n  return (\n    <div style={{ padding: 16, display: 'inline-flex' }}>\n      <ButtonIcon\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} />\n      </ButtonIcon>\n    </div>\n  );\n}\n"],"mappings":"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","names":["style","disabled"]}

package/dist/ui/button/button.cjs

@@ -0,0 +1,53 @@
+"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 button_exports = {};
+__export(button_exports, {
+  ButtonDanger: () => ButtonDanger,
+  ButtonGhost: () => ButtonGhost,
+  ButtonPrimary: () => ButtonPrimary,
+  ButtonSecondary: () => ButtonSecondary,
+  ButtonTertiary: () => ButtonTertiary
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function ButtonPrimary({ className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-primary", className), ...rest });
+}
+function ButtonSecondary({ className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-secondary", className), ...rest });
+}
+function ButtonTertiary({ className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-tertiary", className), ...rest });
+}
+function ButtonGhost({ className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-ghost", className), ...rest });
+}
+function ButtonDanger({ className, type = "button", ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type, className: (0, import_helpers.cn)("uxm-button-danger", className), ...rest });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonDanger,
+  ButtonGhost,
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonTertiary
+});
+//# sourceMappingURL=button.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/button/button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { ButtonHTMLAttributes } from 'react';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- ButtonProps is a named alias for native button attrs (no extra members needed yet); shared by all button variants.\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport function ButtonPrimary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-primary', className)} {...rest} />;\n}\n\nexport function ButtonSecondary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-secondary', className)} {...rest} />;\n}\n\nexport function ButtonTertiary({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-tertiary', className)} {...rest} />;\n}\n\nexport function ButtonGhost({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-ghost', className)} {...rest} />;\n}\n\nexport function ButtonDanger({ className, type = 'button', ...rest }: ButtonProps) {\n  return <button type={type} className={cn('uxm-button-danger', className)} {...rest} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQS;AART,qBAAmB;AAOZ,SAAS,cAAc,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAClF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,sBAAsB,SAAS,GAAI,GAAG,MAAM;AACvF;AAEO,SAAS,gBAAgB,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACpF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,wBAAwB,SAAS,GAAI,GAAG,MAAM;AACzF;AAEO,SAAS,eAAe,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACnF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AACxF;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AAChF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AACrF;AAEO,SAAS,aAAa,EAAE,WAAW,OAAO,UAAU,GAAG,KAAK,GAAgB;AACjF,SAAO,4CAAC,YAAO,MAAY,eAAW,mBAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM;AACtF;","names":[]}