@viax.io/uxm 4.36.0

package/dist/ui/input-with-icon/input-with-icon-preview.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/index.js";
+import { InputWithIcon } from "../../ui/index.js";
+function buildVars(styles) {
+  const iconSize = styles.iconSize;
+  return {
+    "--uxm-input-with-icon-bg": styles.backgroundColor,
+    "--uxm-input-with-icon-border-color": styles.borderColor,
+    "--uxm-input-with-icon-radius": `${styles.borderRadius}px`,
+    "--uxm-input-with-icon-padding-x": `${styles.paddingX}px`,
+    "--uxm-input-with-icon-padding-y": `${styles.paddingY}px`,
+    "--uxm-input-with-icon-font-size": `${styles.fontSize}px`,
+    "--uxm-input-with-icon-color": styles.color,
+    "--uxm-input-with-icon-icon-color": styles.iconColor,
+    "--uxm-input-with-icon-icon-size": `${iconSize}px`,
+    "--uxm-input-with-icon-icon-offset": `${styles.iconOffset}px`,
+    "--uxm-input-with-icon-hover-bg": styles.hoverBg,
+    "--uxm-input-with-icon-hover-border": styles.hoverBorder,
+    "--uxm-input-with-icon-focus-border": styles.focusBorder,
+    "--uxm-input-with-icon-focus-ring": styles.focusRing,
+    "--uxm-input-with-icon-disabled-bg": styles.disabledBg,
+    "--uxm-input-with-icon-disabled-border": styles.disabledBorder,
+    "--uxm-input-with-icon-disabled-color": styles.disabledColor,
+    "--uxm-input-with-icon-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-input-with-icon-error-bg": styles.errorBg,
+    "--uxm-input-with-icon-error-border": styles.errorBorder,
+    "--uxm-input-with-icon-error-color": styles.errorColor,
+    "--uxm-input-with-icon-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0,
+    width: 320
+  };
+}
+function InputWithIconPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(InputWithIconDemo, { state, styles }, state);
+}
+function InputWithIconDemo({ state, styles }) {
+  const isError = state === "error";
+  const iconSize = styles.iconSize;
+  const [value, setValue] = useState(isError ? "macroFoo " : "");
+  const cssVars = buildVars(styles);
+  const forcedClass = cn(
+    state === "hover" && "uxm-input-with-icon--state-hover",
+    state === "focus" && "uxm-input-with-icon--state-focus"
+  );
+  return /* @__PURE__ */ jsx("div", { style: cssVars, children: /* @__PURE__ */ jsx(
+    InputWithIcon,
+    {
+      type: "search",
+      placeholder: "Search\u2026",
+      icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: iconSize, strokeWidth: 1.5 }),
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onClear: () => setValue(""),
+      disabled: state === "disabled",
+      error: isError ? "No matching models." : void 0,
+      className: forcedClass || void 0
+    }
+  ) });
+}
+export {
+  InputWithIconPreview
+};
+//# sourceMappingURL=input-with-icon-preview.js.map

package/dist/ui/input-with-icon/input-with-icon-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input-with-icon/input-with-icon-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 { InputWithIcon } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nfunction buildVars(styles: Styles): CSSProperties {\n  const iconSize = styles.iconSize as number;\n  return {\n    '--uxm-input-with-icon-bg': styles.backgroundColor as string,\n    '--uxm-input-with-icon-border-color': styles.borderColor as string,\n    '--uxm-input-with-icon-radius': `${styles.borderRadius}px`,\n    '--uxm-input-with-icon-padding-x': `${styles.paddingX}px`,\n    '--uxm-input-with-icon-padding-y': `${styles.paddingY}px`,\n    '--uxm-input-with-icon-font-size': `${styles.fontSize}px`,\n    '--uxm-input-with-icon-color': styles.color as string,\n    '--uxm-input-with-icon-icon-color': styles.iconColor as string,\n    '--uxm-input-with-icon-icon-size': `${iconSize}px`,\n    '--uxm-input-with-icon-icon-offset': `${styles.iconOffset}px`,\n    '--uxm-input-with-icon-hover-bg': styles.hoverBg as string,\n    '--uxm-input-with-icon-hover-border': styles.hoverBorder as string,\n    '--uxm-input-with-icon-focus-border': styles.focusBorder as string,\n    '--uxm-input-with-icon-focus-ring': styles.focusRing as string,\n    '--uxm-input-with-icon-disabled-bg': styles.disabledBg as string,\n    '--uxm-input-with-icon-disabled-border': styles.disabledBorder as string,\n    '--uxm-input-with-icon-disabled-color': styles.disabledColor as string,\n    '--uxm-input-with-icon-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-input-with-icon-error-bg': styles.errorBg as string,\n    '--uxm-input-with-icon-error-border': styles.errorBorder as string,\n    '--uxm-input-with-icon-error-color': styles.errorColor as string,\n    '--uxm-input-with-icon-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n    width: 320,\n  } as CSSProperties;\n}\n\nexport function InputWithIconPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <InputWithIconDemo key={state} state={state} styles={styles} />;\n}\n\n// Keyed by state in the parent so changing the State knob remounts this\n// sub-component and `useState` re-seeds — no effect needed to sync.\nfunction InputWithIconDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n  const iconSize = styles.iconSize as number;\n\n  // Error: pre-fill with a query that has no matches so the message reads true.\n  const [value, setValue] = useState(isError ? 'macroFoo ' : '');\n\n  const cssVars = buildVars(styles);\n\n  // Forced state classes live on the wrapper. The inner `__input`\n  // receives the visual via descendant selectors in styles.css. The error\n  // state is NOT forced here — it goes through the real `error` prop so the\n  // preview exercises the component's own error path (class + message).\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-input-with-icon--state-hover',\n    state === 'focus' && 'uxm-input-with-icon--state-focus',\n  );\n\n  return (\n    <div style={cssVars}>\n      <InputWithIcon\n        type=\"search\"\n        placeholder=\"Search…\"\n        icon={<Icon glyph=\"search\" size={iconSize} strokeWidth={1.5} />}\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        onClear={() => setValue('')}\n        disabled={state === 'disabled'}\n        error={isError ? 'No matching models.' : undefined}\n        className={forcedClass || undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"AA0CS;AA1CT,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAI9B,SAAS,UAAU,QAA+B;AAChD,QAAM,WAAW,OAAO;AACxB,SAAO;AAAA,IACL,4BAA4B,OAAO;AAAA,IACnC,sCAAsC,OAAO;AAAA,IAC7C,gCAAgC,GAAG,OAAO,YAAY;AAAA,IACtD,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,mCAAmC,GAAG,OAAO,QAAQ;AAAA,IACrD,+BAA+B,OAAO;AAAA,IACtC,oCAAoC,OAAO;AAAA,IAC3C,mCAAmC,GAAG,QAAQ;AAAA,IAC9C,qCAAqC,GAAG,OAAO,UAAU;AAAA,IACzD,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,sCAAsC,OAAO;AAAA,IAC7C,oCAAoC,OAAO;AAAA,IAC3C,qCAAqC,OAAO;AAAA,IAC5C,yCAAyC,OAAO;AAAA,IAChD,wCAAwC,OAAO;AAAA,IAC/C,0CACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,kCAAkC,OAAO;AAAA,IACzC,sCAAsC,OAAO;AAAA,IAC7C,qCAAqC,OAAO;AAAA,IAC5C,4CACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,IACrE,OAAO;AAAA,EACT;AACF;AAEO,SAAS,qBAAqB,EAAE,QAAQ,SAAS,GAAiB;AACvE,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,oBAAC,qBAA8B,OAAc,UAArB,KAAqC;AACtE;AAIA,SAAS,kBAAkB,EAAE,OAAO,OAAO,GAAsC;AAC/E,QAAM,UAAU,UAAU;AAC1B,QAAM,WAAW,OAAO;AAGxB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,cAAc,EAAE;AAE7D,QAAM,UAAU,UAAU,MAAM;AAMhC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,OAAO,SACV;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAY;AAAA,MACZ,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,UAAU,aAAa,KAAK;AAAA,MAC7D;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,SAAS,MAAM,SAAS,EAAE;AAAA,MAC1B,UAAU,UAAU;AAAA,MACpB,OAAO,UAAU,wBAAwB;AAAA,MACzC,WAAW,eAAe;AAAA;AAAA,EAC5B,GACF;AAEJ;","names":[]}

package/dist/ui/input-with-icon/input-with-icon.cjs

@@ -0,0 +1,87 @@
+"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 input_with_icon_exports = {};
+__export(input_with_icon_exports, {
+  InputWithIcon: () => InputWithIcon
+});
+module.exports = __toCommonJS(input_with_icon_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_field_error = require("../../ui/field-error/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+var import_icon_button = require("../../ui/icon-button/index.cjs");
+function InputWithIcon({
+  icon,
+  className,
+  type = "text",
+  clearable,
+  onClear,
+  clearLabel = "Clear",
+  value,
+  error,
+  ...rest
+}) {
+  const errorId = (0, import_react.useId)();
+  const isClearable = clearable ?? type === "search";
+  const hasValue = typeof value === "string" && value.length > 0;
+  const showClear = isClearable && hasValue && typeof onClear === "function";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_helpers.cn)(
+          "uxm-input-with-icon",
+          isClearable && "uxm-input-with-icon--clearable",
+          error && "uxm-input-with-icon--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-input-with-icon__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              ...rest,
+              type,
+              className: "uxm-input-with-icon__input",
+              value,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": (0, import_helpers.mergeDescribedBy)(rest["aria-describedby"], error ? errorId : void 0)
+            }
+          ),
+          showClear && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icon_button.IconButton,
+            {
+              onClick: onClear,
+              className: "uxm-field-clear uxm-input-with-icon__clear",
+              "aria-label": clearLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "close" })
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field_error.FieldError, { id: errorId, className: "uxm-input-with-icon__error-message", children: error })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputWithIcon
+});
+//# sourceMappingURL=input-with-icon.cjs.map

package/dist/ui/input-with-icon/input-with-icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input-with-icon/input-with-icon.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\nimport { Icon } from '@/ui/icon';\nimport { IconButton } from '@/ui/icon-button';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface InputWithIconProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Leading icon (SVG or Icon component). */\n  icon: ReactNode;\n  /**\n   * Show a clear (✕) button at the trailing edge when the input has content.\n   * Defaults to `true` for `type=\"search\"` (the browser's native search clear\n   * button is suppressed by CSS so we don't render two), `false` otherwise.\n   */\n  clearable?: boolean;\n  /**\n   * Called when the user clicks the clear button. Required when `clearable`\n   * is true and the input is controlled — typically `() => setValue(\"\")`.\n   * The button is only rendered when both `onClear` and a non-empty `value`\n   * are provided, since uncontrolled inputs can't be reset from the outside.\n   */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /**\n   * When set to a non-empty string, the field renders in its error state: the\n   * `--error` modifier re-tones the input border/background and the leading\n   * icon, `aria-invalid` lands on the `<input>`, and the message renders below.\n   * Omit (or pass an empty string) for the normal state.\n   */\n  error?: string;\n}\n\nexport function InputWithIcon({\n  icon,\n  className,\n  type = 'text',\n  clearable,\n  onClear,\n  clearLabel = 'Clear',\n  value,\n  error,\n  ...rest\n}: InputWithIconProps) {\n  const errorId = useId();\n  const isClearable = clearable ?? type === 'search';\n  const hasValue = typeof value === 'string' && value.length > 0;\n  const showClear = isClearable && hasValue && typeof onClear === 'function';\n\n  return (\n    <>\n      <div\n        className={cn(\n          'uxm-input-with-icon',\n          isClearable && 'uxm-input-with-icon--clearable',\n          error && 'uxm-input-with-icon--error',\n          className,\n        )}\n      >\n        <span className=\"uxm-input-with-icon__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {/* `{...rest}` is spread FIRST so the managed props below always win\n            (same rule as TextInput) — a consumer prop can't clobber the\n            computed error state. */}\n        <input\n          {...rest}\n          type={type}\n          className=\"uxm-input-with-icon__input\"\n          value={value}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(rest['aria-describedby'], error ? errorId : undefined)}\n        />\n        {showClear && (\n          <IconButton\n            onClick={onClear}\n            className=\"uxm-field-clear uxm-input-with-icon__clear\"\n            aria-label={clearLabel}\n          >\n            <Icon glyph=\"close\" />\n          </IconButton>\n        )}\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-input-with-icon__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDI;AArDJ,mBAAsB;AAEtB,qBAAqC;AACrC,yBAA2B;AAC3B,kBAAqB;AACrB,yBAA2B;AA+BpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,cAAU,oBAAM;AACtB,QAAM,cAAc,aAAa,SAAS;AAC1C,QAAM,WAAW,OAAO,UAAU,YAAY,MAAM,SAAS;AAC7D,QAAM,YAAY,eAAe,YAAY,OAAO,YAAY;AAEhE,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,eAAe;AAAA,UACf,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QAEA;AAAA,sDAAC,UAAK,WAAU,6BAA4B,eAAY,QACrD,gBACH;AAAA,UAIA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,WAAU;AAAA,cACV;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,wBAAkB,iCAAiB,KAAK,kBAAkB,GAAG,QAAQ,UAAU,MAAS;AAAA;AAAA,UAC1F;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAY;AAAA,cAEZ,sDAAC,oBAAK,OAAM,SAAQ;AAAA;AAAA,UACtB;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,SACC,4CAAC,iCAAW,IAAI,SAAS,WAAU,sCAChC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/ui/input-with-icon/input-with-icon.css

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+/* ── input-with-icon ── */
+/* InputWithIcon — every registry knob (bg, border, radius, paddings,
+   fontSize, color, iconColor, iconSize, iconOffset) maps to a CSS
+   variable. The left padding stays computed so the input text can't
+   overlap the leading icon: `paddingX + iconOffset + iconSize ≈ 36px`
+   default. State colours (hover/focus/disabled) mirror the input-text
+   sibling so the input family themes uniformly. */
+.uxm-input-with-icon {
+  position: relative;
+  width: 100%;
+  /* Suppress the browser's native search clear button (Chrome/Safari/Edge).
+     Without this, `type="search"` renders its own ✕ on the right, on top of
+     our `__clear` button — two clear buttons side by side. */
+  /* Reserve trailing space when clearable so the input text doesn't slide
+     under the clear button when there's a value. Symmetric with the leading
+     icon padding computation. */
+}
+.uxm-input-with-icon__icon {
+  color: var(--uxm-input-with-icon-icon-color, var(--color-text-muted));
+  display: inline-flex;
+  left: var(--uxm-input-with-icon-icon-offset, 12px);
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.uxm-input-with-icon__input {
+  /* width: 100% + own padding/border only add up under border-box; ui.css
+     ships no reset (same fix as the input-text/textarea/select trio). */
+  box-sizing: border-box;
+  background-color: var(--uxm-input-with-icon-bg, var(--color-surface));
+  border: 1px solid var(--uxm-input-with-icon-border-color, var(--color-border));
+  border-radius: var(--uxm-input-with-icon-radius, 8px);
+  color: var(--uxm-input-with-icon-color, var(--color-text));
+  font-size: calc(var(--uxm-input-with-icon-font-size, 14px) * var(--type-scale, 1));
+  outline: none;
+  padding: var(--uxm-input-with-icon-padding-y, 8px) var(--uxm-input-with-icon-padding-x, 12px) var(--uxm-input-with-icon-padding-y, 8px) calc(var(--uxm-input-with-icon-icon-offset, 12px) + var(--uxm-input-with-icon-icon-size, 16px) + 8px);
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+  width: 100%;
+}
+.uxm-input-with-icon__input::-webkit-search-cancel-button, .uxm-input-with-icon__input::-webkit-search-decoration {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.uxm-input-with-icon__input:hover:not(:disabled) {
+  background-color: var(--uxm-input-with-icon-hover-bg, var(--color-card));
+  border-color: var(--uxm-input-with-icon-hover-border, var(--color-accent));
+}
+.uxm-input-with-icon__input:focus {
+  border-color: var(--uxm-input-with-icon-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-input-with-icon-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-input-with-icon__input:disabled {
+  background-color: var(--uxm-input-with-icon-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-input-with-icon-disabled-border, var(--color-border));
+  color: var(--uxm-input-with-icon-disabled-color, var(--color-text-muted));
+  cursor: not-allowed;
+  opacity: var(--uxm-input-with-icon-disabled-opacity, 0.6);
+}
+.uxm-input-with-icon--clearable .uxm-input-with-icon__input {
+  padding-right: calc(var(--uxm-input-with-icon-icon-offset, 12px) + 22px + 8px);
+}
+.uxm-input-with-icon {
+  /* Positioning only — chrome comes from the shared `.uxm-field-clear`
+     IconButton (matches TextInput / NumberInput / Textarea and modo). */
+}
+.uxm-input-with-icon__clear {
+  position: absolute;
+  right: var(--uxm-input-with-icon-icon-offset, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* Error state — the `--error` modifier on the wrapper re-tones the inner input
+   and the leading icon; the message below reads the errorColor / size knobs.
+   Every value falls back to the current default, so a field without `error`
+   is unchanged. Mirrors the rest of the input family. */
+.uxm-input-with-icon--error .uxm-input-with-icon__input {
+  background-color: var(--uxm-input-with-icon-error-bg, var(--color-card));
+  border-color: var(--uxm-input-with-icon-error-border, var(--color-danger-text));
+}
+
+.uxm-input-with-icon--error .uxm-input-with-icon__icon {
+  color: var(--uxm-input-with-icon-error-color, var(--color-danger-text));
+}
+
+.uxm-input-with-icon__error-message {
+  display: block;
+  margin-top: 4px;
+  font-size: calc(var(--uxm-input-with-icon-error-message-size, 12px) * var(--type-scale, 1));
+  color: var(--uxm-input-with-icon-error-color, var(--color-danger-text));
+}

package/dist/ui/input-with-icon/input-with-icon.d.ts

@@ -0,0 +1,29 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export interface InputWithIconProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Leading icon (SVG or Icon component). */
+    icon: ReactNode;
+    /**
+     * Show a clear (✕) button at the trailing edge when the input has content.
+     * Defaults to `true` for `type="search"` (the browser's native search clear
+     * button is suppressed by CSS so we don't render two), `false` otherwise.
+     */
+    clearable?: boolean;
+    /**
+     * Called when the user clicks the clear button. Required when `clearable`
+     * is true and the input is controlled — typically `() => setValue("")`.
+     * The button is only rendered when both `onClear` and a non-empty `value`
+     * are provided, since uncontrolled inputs can't be reset from the outside.
+     */
+    onClear?: () => void;
+    /** Accessible name for the clear button. Default `"Clear"`. */
+    clearLabel?: string;
+    /**
+     * When set to a non-empty string, the field renders in its error state: the
+     * `--error` modifier re-tones the input border/background and the leading
+     * icon, `aria-invalid` lands on the `<input>`, and the message renders below.
+     * Omit (or pass an empty string) for the normal state.
+     */
+    error?: string;
+}
+export declare function InputWithIcon({ icon, className, type, clearable, onClear, clearLabel, value, error, ...rest }: InputWithIconProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=input-with-icon.d.ts.map

package/dist/ui/input-with-icon/input-with-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-with-icon.d.ts","sourceRoot":"","sources":["../../../src/ui/input-with-icon/input-with-icon.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAC/E,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,IAAa,EACb,SAAS,EACT,OAAO,EACP,UAAoB,EACpB,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,2CA+CpB"}

package/dist/ui/input-with-icon/input-with-icon.js

@@ -0,0 +1,63 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn, mergeDescribedBy } from "../../helpers/index.js";
+import { FieldError } from "../../ui/field-error/index.js";
+import { Icon } from "../../ui/icon/index.js";
+import { IconButton } from "../../ui/icon-button/index.js";
+function InputWithIcon({
+  icon,
+  className,
+  type = "text",
+  clearable,
+  onClear,
+  clearLabel = "Clear",
+  value,
+  error,
+  ...rest
+}) {
+  const errorId = useId();
+  const isClearable = clearable ?? type === "search";
+  const hasValue = typeof value === "string" && value.length > 0;
+  const showClear = isClearable && hasValue && typeof onClear === "function";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "uxm-input-with-icon",
+          isClearable && "uxm-input-with-icon--clearable",
+          error && "uxm-input-with-icon--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "uxm-input-with-icon__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              type,
+              className: "uxm-input-with-icon__input",
+              value,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": mergeDescribedBy(rest["aria-describedby"], error ? errorId : void 0)
+            }
+          ),
+          showClear && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onClear,
+              className: "uxm-field-clear uxm-input-with-icon__clear",
+              "aria-label": clearLabel,
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "close" })
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: "uxm-input-with-icon__error-message", children: error })
+  ] });
+}
+export {
+  InputWithIcon
+};
+//# sourceMappingURL=input-with-icon.js.map

package/dist/ui/input-with-icon/input-with-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input-with-icon/input-with-icon.tsx"],"sourcesContent":["import { useId } from 'react';\n\nimport { cn, mergeDescribedBy } from '@/helpers';\nimport { FieldError } from '@/ui/field-error';\nimport { Icon } from '@/ui/icon';\nimport { IconButton } from '@/ui/icon-button';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nexport interface InputWithIconProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Leading icon (SVG or Icon component). */\n  icon: ReactNode;\n  /**\n   * Show a clear (✕) button at the trailing edge when the input has content.\n   * Defaults to `true` for `type=\"search\"` (the browser's native search clear\n   * button is suppressed by CSS so we don't render two), `false` otherwise.\n   */\n  clearable?: boolean;\n  /**\n   * Called when the user clicks the clear button. Required when `clearable`\n   * is true and the input is controlled — typically `() => setValue(\"\")`.\n   * The button is only rendered when both `onClear` and a non-empty `value`\n   * are provided, since uncontrolled inputs can't be reset from the outside.\n   */\n  onClear?: () => void;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /**\n   * When set to a non-empty string, the field renders in its error state: the\n   * `--error` modifier re-tones the input border/background and the leading\n   * icon, `aria-invalid` lands on the `<input>`, and the message renders below.\n   * Omit (or pass an empty string) for the normal state.\n   */\n  error?: string;\n}\n\nexport function InputWithIcon({\n  icon,\n  className,\n  type = 'text',\n  clearable,\n  onClear,\n  clearLabel = 'Clear',\n  value,\n  error,\n  ...rest\n}: InputWithIconProps) {\n  const errorId = useId();\n  const isClearable = clearable ?? type === 'search';\n  const hasValue = typeof value === 'string' && value.length > 0;\n  const showClear = isClearable && hasValue && typeof onClear === 'function';\n\n  return (\n    <>\n      <div\n        className={cn(\n          'uxm-input-with-icon',\n          isClearable && 'uxm-input-with-icon--clearable',\n          error && 'uxm-input-with-icon--error',\n          className,\n        )}\n      >\n        <span className=\"uxm-input-with-icon__icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n        {/* `{...rest}` is spread FIRST so the managed props below always win\n            (same rule as TextInput) — a consumer prop can't clobber the\n            computed error state. */}\n        <input\n          {...rest}\n          type={type}\n          className=\"uxm-input-with-icon__input\"\n          value={value}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={mergeDescribedBy(rest['aria-describedby'], error ? errorId : undefined)}\n        />\n        {showClear && (\n          <IconButton\n            onClick={onClear}\n            className=\"uxm-field-clear uxm-input-with-icon__clear\"\n            aria-label={clearLabel}\n          >\n            <Icon glyph=\"close\" />\n          </IconButton>\n        )}\n      </div>\n      {error && (\n        <FieldError id={errorId} className=\"uxm-input-with-icon__error-message\">\n          {error}\n        </FieldError>\n      )}\n    </>\n  );\n}\n"],"mappings":"AAqDI,mBASI,KARF,YADF;AArDJ,SAAS,aAAa;AAEtB,SAAS,IAAI,wBAAwB;AACrC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA+BpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,UAAU,MAAM;AACtB,QAAM,cAAc,aAAa,SAAS;AAC1C,QAAM,WAAW,OAAO,UAAU,YAAY,MAAM,SAAS;AAC7D,QAAM,YAAY,eAAe,YAAY,OAAO,YAAY;AAEhE,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,eAAe;AAAA,UACf,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,UAAK,WAAU,6BAA4B,eAAY,QACrD,gBACH;AAAA,UAIA;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,WAAU;AAAA,cACV;AAAA,cACA,gBAAc,QAAQ,OAAO;AAAA,cAC7B,oBAAkB,iBAAiB,KAAK,kBAAkB,GAAG,QAAQ,UAAU,MAAS;AAAA;AAAA,UAC1F;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,WAAU;AAAA,cACV,cAAY;AAAA,cAEZ,8BAAC,QAAK,OAAM,SAAQ;AAAA;AAAA,UACtB;AAAA;AAAA;AAAA,IAEJ;AAAA,IACC,SACC,oBAAC,cAAW,IAAI,SAAS,WAAU,sCAChC,iBACH;AAAA,KAEJ;AAEJ;","names":[]}

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

package/dist/ui/lifecycle-connector/index.cjs.map

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

package/dist/ui/lifecycle-connector/index.d.ts

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

package/dist/ui/lifecycle-connector/index.d.ts.map

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

package/dist/ui/lifecycle-connector/index.js

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

package/dist/ui/lifecycle-connector/index.js.map

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

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.cjs

@@ -0,0 +1,63 @@
+"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 lifecycle_connector_preview_exports = {};
+__export(lifecycle_connector_preview_exports, {
+  LifecycleConnectorPreview: () => LifecycleConnectorPreview
+});
+module.exports = __toCommonJS(lifecycle_connector_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+function LifecycleConnectorPreview({ styles, variants }) {
+  const state = variants.state ?? "idle";
+  const routing = variants.routing ?? "auto";
+  const startDot = (variants.startDot ?? "on") !== "off";
+  const arrowhead = variants.arrowhead ?? "triangle";
+  const W = 260;
+  const H = 120;
+  const cssVars = {
+    "--uxm-lifecycle-connector-idle-color": styles.connectorIdleColor,
+    "--uxm-lifecycle-connector-active-color": styles.connectorActiveColor,
+    "--uxm-lifecycle-connector-idle-stroke-width": styles.connectorIdleStrokeWidth,
+    "--uxm-lifecycle-connector-active-stroke-width": styles.connectorActiveStrokeWidth,
+    "--uxm-lifecycle-connector-dashed-color": styles.connectorDashedColor,
+    "--uxm-lifecycle-connector-dashed-stroke-width": styles.connectorDashedStrokeWidth,
+    "--uxm-lifecycle-connector-dash-pattern": styles.connectorDashPattern
+  };
+  const spread = routing === "bezier" || routing === "orthogonal";
+  const from = { x: spread ? 40 : 24, y: 20 };
+  const to = spread ? { x: W - 40, y: H - 20 } : { x: W - 24, y: 20 };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: W, height: H, style: { display: "block", overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.LifecycleConnector,
+    {
+      style: cssVars,
+      from,
+      to,
+      state,
+      routing,
+      startDot,
+      arrowSize: styles.connectorArrowSize,
+      arrowhead
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleConnectorPreview
+});
+//# sourceMappingURL=lifecycle-connector-preview.cjs.map

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-connector/lifecycle-connector-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleConnector,\n  type LifecycleConnectorArrowhead,\n  type LifecycleConnectorRouting,\n  type LifecycleConnectorState,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function LifecycleConnectorPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as LifecycleConnectorState) ?? 'idle';\n  const routing = (variants.routing as LifecycleConnectorRouting) ?? 'auto';\n  const startDot = (variants.startDot ?? 'on') !== 'off';\n  const arrowhead = (variants.arrowhead as LifecycleConnectorArrowhead) ?? 'triangle';\n  const W = 260;\n  const H = 120;\n\n  // Map the editor knobs onto the connector's own CSS custom properties +\n  // pass-through props so the preview reflects \"what would this look like\n  // with these settings.\" Dash Pattern rides the var rather than the\n  // `dashPattern` prop — the prop writes the same var, so passing both would\n  // just set it twice.\n  const cssVars = {\n    '--uxm-lifecycle-connector-idle-color': styles.connectorIdleColor as string,\n    '--uxm-lifecycle-connector-active-color': styles.connectorActiveColor as string,\n    '--uxm-lifecycle-connector-idle-stroke-width': styles.connectorIdleStrokeWidth as number,\n    '--uxm-lifecycle-connector-active-stroke-width': styles.connectorActiveStrokeWidth as number,\n    '--uxm-lifecycle-connector-dashed-color': styles.connectorDashedColor as string,\n    '--uxm-lifecycle-connector-dashed-stroke-width': styles.connectorDashedStrokeWidth as number,\n    '--uxm-lifecycle-connector-dash-pattern': styles.connectorDashPattern as string,\n  } as CSSProperties;\n\n  // `straight` reads as a plain line on aligned anchors, so the anchors only\n  // spread on the routes whose whole point is getting from one column to\n  // another — otherwise Bezier and Elbow would both render as a flat rule and\n  // the picker would look broken.\n  const spread = routing === 'bezier' || routing === 'orthogonal';\n  const from = { x: spread ? 40 : 24, y: 20 };\n  const to = spread ? { x: W - 40, y: H - 20 } : { x: W - 24, y: 20 };\n\n  return (\n    <svg width={W} height={H} style={{ display: 'block', overflow: 'visible' }}>\n      {/* Apply CSS variables on the connector's own root <g> (it spreads\n          {...rest} including style onto its element). Wrapper-cascade\n          would lose to saved overrides on `.uxm-lifecycle-connector`\n          via the inline > class specificity rule for custom properties. */}\n      <LifecycleConnector\n        style={cssVars}\n        from={from}\n        to={to}\n        state={state}\n        routing={routing}\n        startDot={startDot}\n        arrowSize={styles.connectorArrowSize as number}\n        arrowhead={arrowhead}\n      />\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CM;AA9CN,gBAKO;AAIA,SAAS,0BAA0B,EAAE,QAAQ,SAAS,GAAiB;AAC5E,QAAM,QAAS,SAAS,SAAqC;AAC7D,QAAM,UAAW,SAAS,WAAyC;AACnE,QAAM,YAAY,SAAS,YAAY,UAAU;AACjD,QAAM,YAAa,SAAS,aAA6C;AACzE,QAAM,IAAI;AACV,QAAM,IAAI;AAOV,QAAM,UAAU;AAAA,IACd,wCAAwC,OAAO;AAAA,IAC/C,0CAA0C,OAAO;AAAA,IACjD,+CAA+C,OAAO;AAAA,IACtD,iDAAiD,OAAO;AAAA,IACxD,0CAA0C,OAAO;AAAA,IACjD,iDAAiD,OAAO;AAAA,IACxD,0CAA0C,OAAO;AAAA,EACnD;AAMA,QAAM,SAAS,YAAY,YAAY,YAAY;AACnD,QAAM,OAAO,EAAE,GAAG,SAAS,KAAK,IAAI,GAAG,GAAG;AAC1C,QAAM,KAAK,SAAS,EAAE,GAAG,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,GAAG;AAElE,SACE,4CAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE,SAAS,SAAS,UAAU,UAAU,GAKvE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,OAAO;AAAA,MAClB;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.d.ts

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

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle-connector-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-connector/lifecycle-connector-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUrD,wBAAgB,yBAAyB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAiD3E"}

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  LifecycleConnector
+} from "../../ui/index.js";
+function LifecycleConnectorPreview({ styles, variants }) {
+  const state = variants.state ?? "idle";
+  const routing = variants.routing ?? "auto";
+  const startDot = (variants.startDot ?? "on") !== "off";
+  const arrowhead = variants.arrowhead ?? "triangle";
+  const W = 260;
+  const H = 120;
+  const cssVars = {
+    "--uxm-lifecycle-connector-idle-color": styles.connectorIdleColor,
+    "--uxm-lifecycle-connector-active-color": styles.connectorActiveColor,
+    "--uxm-lifecycle-connector-idle-stroke-width": styles.connectorIdleStrokeWidth,
+    "--uxm-lifecycle-connector-active-stroke-width": styles.connectorActiveStrokeWidth,
+    "--uxm-lifecycle-connector-dashed-color": styles.connectorDashedColor,
+    "--uxm-lifecycle-connector-dashed-stroke-width": styles.connectorDashedStrokeWidth,
+    "--uxm-lifecycle-connector-dash-pattern": styles.connectorDashPattern
+  };
+  const spread = routing === "bezier" || routing === "orthogonal";
+  const from = { x: spread ? 40 : 24, y: 20 };
+  const to = spread ? { x: W - 40, y: H - 20 } : { x: W - 24, y: 20 };
+  return /* @__PURE__ */ jsx("svg", { width: W, height: H, style: { display: "block", overflow: "visible" }, children: /* @__PURE__ */ jsx(
+    LifecycleConnector,
+    {
+      style: cssVars,
+      from,
+      to,
+      state,
+      routing,
+      startDot,
+      arrowSize: styles.connectorArrowSize,
+      arrowhead
+    }
+  ) });
+}
+export {
+  LifecycleConnectorPreview
+};
+//# sourceMappingURL=lifecycle-connector-preview.js.map

package/dist/ui/lifecycle-connector/lifecycle-connector-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-connector/lifecycle-connector-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleConnector,\n  type LifecycleConnectorArrowhead,\n  type LifecycleConnectorRouting,\n  type LifecycleConnectorState,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function LifecycleConnectorPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as LifecycleConnectorState) ?? 'idle';\n  const routing = (variants.routing as LifecycleConnectorRouting) ?? 'auto';\n  const startDot = (variants.startDot ?? 'on') !== 'off';\n  const arrowhead = (variants.arrowhead as LifecycleConnectorArrowhead) ?? 'triangle';\n  const W = 260;\n  const H = 120;\n\n  // Map the editor knobs onto the connector's own CSS custom properties +\n  // pass-through props so the preview reflects \"what would this look like\n  // with these settings.\" Dash Pattern rides the var rather than the\n  // `dashPattern` prop — the prop writes the same var, so passing both would\n  // just set it twice.\n  const cssVars = {\n    '--uxm-lifecycle-connector-idle-color': styles.connectorIdleColor as string,\n    '--uxm-lifecycle-connector-active-color': styles.connectorActiveColor as string,\n    '--uxm-lifecycle-connector-idle-stroke-width': styles.connectorIdleStrokeWidth as number,\n    '--uxm-lifecycle-connector-active-stroke-width': styles.connectorActiveStrokeWidth as number,\n    '--uxm-lifecycle-connector-dashed-color': styles.connectorDashedColor as string,\n    '--uxm-lifecycle-connector-dashed-stroke-width': styles.connectorDashedStrokeWidth as number,\n    '--uxm-lifecycle-connector-dash-pattern': styles.connectorDashPattern as string,\n  } as CSSProperties;\n\n  // `straight` reads as a plain line on aligned anchors, so the anchors only\n  // spread on the routes whose whole point is getting from one column to\n  // another — otherwise Bezier and Elbow would both render as a flat rule and\n  // the picker would look broken.\n  const spread = routing === 'bezier' || routing === 'orthogonal';\n  const from = { x: spread ? 40 : 24, y: 20 };\n  const to = spread ? { x: W - 40, y: H - 20 } : { x: W - 24, y: 20 };\n\n  return (\n    <svg width={W} height={H} style={{ display: 'block', overflow: 'visible' }}>\n      {/* Apply CSS variables on the connector's own root <g> (it spreads\n          {...rest} including style onto its element). Wrapper-cascade\n          would lose to saved overrides on `.uxm-lifecycle-connector`\n          via the inline > class specificity rule for custom properties. */}\n      <LifecycleConnector\n        style={cssVars}\n        from={from}\n        to={to}\n        state={state}\n        routing={routing}\n        startDot={startDot}\n        arrowSize={styles.connectorArrowSize as number}\n        arrowhead={arrowhead}\n      />\n    </svg>\n  );\n}\n"],"mappings":"AA+CM;AA9CN;AAAA,EACE;AAAA,OAIK;AAIA,SAAS,0BAA0B,EAAE,QAAQ,SAAS,GAAiB;AAC5E,QAAM,QAAS,SAAS,SAAqC;AAC7D,QAAM,UAAW,SAAS,WAAyC;AACnE,QAAM,YAAY,SAAS,YAAY,UAAU;AACjD,QAAM,YAAa,SAAS,aAA6C;AACzE,QAAM,IAAI;AACV,QAAM,IAAI;AAOV,QAAM,UAAU;AAAA,IACd,wCAAwC,OAAO;AAAA,IAC/C,0CAA0C,OAAO;AAAA,IACjD,+CAA+C,OAAO;AAAA,IACtD,iDAAiD,OAAO;AAAA,IACxD,0CAA0C,OAAO;AAAA,IACjD,iDAAiD,OAAO;AAAA,IACxD,0CAA0C,OAAO;AAAA,EACnD;AAMA,QAAM,SAAS,YAAY,YAAY,YAAY;AACnD,QAAM,OAAO,EAAE,GAAG,SAAS,KAAK,IAAI,GAAG,GAAG;AAC1C,QAAM,KAAK,SAAS,EAAE,GAAG,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI,GAAG,GAAG;AAElE,SACE,oBAAC,SAAI,OAAO,GAAG,QAAQ,GAAG,OAAO,EAAE,SAAS,SAAS,UAAU,UAAU,GAKvE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,OAAO;AAAA,MAClB;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}