@viax.io/uxm 4.36.0

package/dist/ui/chip/chip.js

@@ -0,0 +1,77 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/icon/index.js";
+function inferMode(props) {
+  if (props.mode) return props.mode;
+  if (props.onRemove) return "input";
+  return "assist";
+}
+function Chip(props) {
+  const {
+    children,
+    mode: _mode,
+    selected = false,
+    disabled = false,
+    iconLeft,
+    onClick,
+    onRemove,
+    removeLabel = "Remove",
+    className,
+    style,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const mode = inferMode(props);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconLeft && /* @__PURE__ */ jsx("span", { className: "uxm-chip__icon-left", "aria-hidden": "true", children: iconLeft }),
+    /* @__PURE__ */ jsx("span", { className: "uxm-chip__label", children }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "uxm-chip__remove",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (!disabled) onRemove();
+        },
+        "aria-label": removeLabel,
+        disabled,
+        tabIndex: disabled ? -1 : 0,
+        children: /* @__PURE__ */ jsx(Icon, { glyph: "close", size: 10, strokeWidth: 2.5, "aria-hidden": "true" })
+      }
+    )
+  ] });
+  const classes = cn("uxm-chip", `uxm-chip--${mode}`, className);
+  const isInteractive = Boolean(onClick) || mode === "filter";
+  if (isInteractive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...rest,
+        className: classes,
+        style,
+        disabled,
+        "aria-pressed": mode === "filter" ? selected : void 0,
+        "aria-label": ariaLabel,
+        onClick,
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: classes,
+      style,
+      "aria-disabled": disabled || void 0,
+      "aria-label": ariaLabel,
+      children: inner
+    }
+  );
+}
+export {
+  Chip
+};
+//# sourceMappingURL=chip.js.map

package/dist/ui/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/chip/chip.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, MouseEvent, ReactNode } from 'react';\n\nexport type ChipMode = 'assist' | 'filter' | 'input' | 'suggestion';\n\nexport interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode;\n  /** Material Design Chip mode. Inferred from props when omitted: `onRemove` → input, otherwise → assist. */\n  mode?: ChipMode;\n  /** Toggle state for `mode=\"filter\"`. Ignored on other modes. */\n  selected?: boolean;\n  disabled?: boolean;\n  /** Optional leading icon. */\n  iconLeft?: ReactNode;\n  /** Click handler. When set (or mode=\"filter\"), the chip renders as a `<button>`. */\n  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n  /** Removal handler. When set, mode defaults to \"input\" and a trailing × button appears. */\n  onRemove?: () => void;\n  /**\n   * Accessible name for that × . Default `\"Remove\"`. The button has no\n   * visible text, so this is the only thing AT announces for it — and a\n   * bare \"Remove\" is worth overriding when several chips share a row\n   * (`Remove ${label}` tells the user *which* one).\n   */\n  removeLabel?: string;\n  /**\n   * `style` (inherited) is used by the editor preview to project draft\n   * `--uxm-chip-*` CSS variables directly onto the chip, since inline styles\n   * take precedence over the saved-overrides CSS rule on `.uxm-chip` (which\n   * would otherwise win the cascade).\n   */\n}\n\nfunction inferMode(props: ChipProps): ChipMode {\n  if (props.mode) return props.mode;\n  if (props.onRemove) return 'input';\n  return 'assist';\n}\n\n/**\n * Chip — Material Design's interactive label component. Four modes\n * (assist / filter / input / suggestion), four states (default / hover /\n * selected / disabled).\n *\n * Styled via `.uxm-chip` + `.uxm-chip--{mode}` CSS classes that read\n * `--uxm-chip-{mode}-{state}-{field}` custom properties — same private\n * namespace convention used across the rest of UXM (`--uxm-card-*`,\n * `--uxm-page-header-*`, etc.). Hover/selected/disabled states attach\n * to native pseudo-classes (`:hover`, `[aria-pressed=\"true\"]`,\n * `:disabled`) so no JS state-tracking is needed.\n *\n * Renders as a `<button>` when interactive (onClick, mode=filter) and\n * a `<span>` otherwise.\n */\nexport function Chip(props: ChipProps) {\n  const {\n    children,\n    mode: _mode,\n    selected = false,\n    disabled = false,\n    iconLeft,\n    onClick,\n    onRemove,\n    removeLabel = 'Remove',\n    className,\n    style,\n    'aria-label': ariaLabel,\n    ...rest\n  } = props;\n  const mode = inferMode(props);\n\n  const inner = (\n    <>\n      {iconLeft && (\n        <span className=\"uxm-chip__icon-left\" aria-hidden=\"true\">\n          {iconLeft}\n        </span>\n      )}\n      <span className=\"uxm-chip__label\">{children}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className=\"uxm-chip__remove\"\n          onClick={(e) => {\n            e.stopPropagation();\n            if (!disabled) onRemove();\n          }}\n          aria-label={removeLabel}\n          disabled={disabled}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon glyph=\"close\" size={10} strokeWidth={2.5} aria-hidden=\"true\" />\n        </button>\n      )}\n    </>\n  );\n\n  const classes = cn('uxm-chip', `uxm-chip--${mode}`, className);\n  const isInteractive = Boolean(onClick) || mode === 'filter';\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        {...rest}\n        className={classes}\n        style={style}\n        disabled={disabled}\n        aria-pressed={mode === 'filter' ? selected : undefined}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {inner}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      {...rest}\n      className={classes}\n      style={style}\n      aria-disabled={disabled || undefined}\n      aria-label={ariaLabel}\n    >\n      {inner}\n    </span>\n  );\n}\n"],"mappings":"AA0EI,mBAEI,KAFJ;AA1EJ,SAAS,UAAU;AACnB,SAAS,YAAY;AAkCrB,SAAS,UAAU,OAA4B;AAC7C,MAAI,MAAM,KAAM,QAAO,MAAM;AAC7B,MAAI,MAAM,SAAU,QAAO;AAC3B,SAAO;AACT;AAiBO,SAAS,KAAK,OAAkB;AACrC,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,OAAO,UAAU,KAAK;AAE5B,QAAM,QACJ,iCACG;AAAA,gBACC,oBAAC,UAAK,WAAU,uBAAsB,eAAY,QAC/C,oBACH;AAAA,IAEF,oBAAC,UAAK,WAAU,mBAAmB,UAAS;AAAA,IAC3C,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACd,YAAE,gBAAgB;AAClB,cAAI,CAAC,SAAU,UAAS;AAAA,QAC1B;AAAA,QACA,cAAY;AAAA,QACZ;AAAA,QACA,UAAU,WAAW,KAAK;AAAA,QAE1B,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,aAAa,KAAK,eAAY,QAAO;AAAA;AAAA,IACrE;AAAA,KAEJ;AAGF,QAAM,UAAU,GAAG,YAAY,aAAa,IAAI,IAAI,SAAS;AAC7D,QAAM,gBAAgB,QAAQ,OAAO,KAAK,SAAS;AAEnD,MAAI,eAAe;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,gBAAc,SAAS,WAAW,WAAW;AAAA,QAC7C,cAAY;AAAA,QACZ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,MACX;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,cAAY;AAAA,MAEX;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

package/dist/ui/chip/index.cjs.map

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

package/dist/ui/chip/index.d.ts

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

package/dist/ui/chip/index.d.ts.map

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

package/dist/ui/chip/index.js

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

package/dist/ui/chip/index.js.map

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

package/dist/ui/cluster/cluster-preview.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 cluster_preview_exports = {};
+__export(cluster_preview_exports, {
+  ClusterPreview: () => ClusterPreview
+});
+module.exports = __toCommonJS(cluster_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const ITEMS = ["filter", "tag", "chip", "item", "label", "category"];
+function ClusterPreview({ styles, variants }) {
+  const gap = styles.gap;
+  const align = variants.align ?? "center";
+  const justify = variants.justify ?? "start";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 360 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Cluster, { gap, align, justify, children: ITEMS.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      style: {
+        padding: `6px ${10 + i * 2}px`,
+        borderRadius: 999,
+        border: "1px solid var(--color-border)",
+        backgroundColor: "var(--color-card)",
+        fontSize: 12,
+        color: "var(--color-text-muted)",
+        // Mixed font sizes give `baseline` align something to anchor.
+        lineHeight: 1 + i % 3 * 0.15
+      },
+      children: label
+    },
+    label
+  )) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClusterPreview
+});
+//# sourceMappingURL=cluster-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/cluster/cluster-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Cluster } from '@/ui';\n\ntype ClusterAlign = 'center' | 'start' | 'end' | 'baseline';\ntype ClusterJustify = 'start' | 'center' | 'end' | 'between';\n\nconst ITEMS = ['filter', 'tag', 'chip', 'item', 'label', 'category'];\n\nexport function ClusterPreview({ styles, variants }: PreviewProps) {\n  const gap = styles.gap as number;\n  const align = (variants.align as ClusterAlign) ?? 'center';\n  const justify = (variants.justify as ClusterJustify) ?? 'start';\n  return (\n    <div style={{ width: 360 }}>\n      <Cluster gap={gap} align={align} justify={justify}>\n        {ITEMS.map((label, i) => (\n          <span\n            key={label}\n            style={{\n              padding: `6px ${10 + i * 2}px`,\n              borderRadius: 999,\n              border: '1px solid var(--color-border)',\n              backgroundColor: 'var(--color-card)',\n              fontSize: 12,\n              color: 'var(--color-text-muted)',\n              // Mixed font sizes give `baseline` align something to anchor.\n              lineHeight: 1 + (i % 3) * 0.15,\n            }}\n          >\n            {label}\n          </span>\n        ))}\n      </Cluster>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBU;AAfV,gBAAwB;AAKxB,MAAM,QAAQ,CAAC,UAAU,OAAO,QAAQ,QAAQ,SAAS,UAAU;AAE5D,SAAS,eAAe,EAAE,QAAQ,SAAS,GAAiB;AACjE,QAAM,MAAM,OAAO;AACnB,QAAM,QAAS,SAAS,SAA0B;AAClD,QAAM,UAAW,SAAS,WAA8B;AACxD,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB,sDAAC,qBAAQ,KAAU,OAAc,SAC9B,gBAAM,IAAI,CAAC,OAAO,MACjB;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,QACL,SAAS,OAAO,KAAK,IAAI,CAAC;AAAA,QAC1B,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,OAAO;AAAA;AAAA,QAEP,YAAY,IAAK,IAAI,IAAK;AAAA,MAC5B;AAAA,MAEC;AAAA;AAAA,IAZI;AAAA,EAaP,CACD,GACH,GACF;AAEJ;","names":[]}

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { Cluster } from "../../ui/index.js";
+const ITEMS = ["filter", "tag", "chip", "item", "label", "category"];
+function ClusterPreview({ styles, variants }) {
+  const gap = styles.gap;
+  const align = variants.align ?? "center";
+  const justify = variants.justify ?? "start";
+  return /* @__PURE__ */ jsx("div", { style: { width: 360 }, children: /* @__PURE__ */ jsx(Cluster, { gap, align, justify, children: ITEMS.map((label, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        padding: `6px ${10 + i * 2}px`,
+        borderRadius: 999,
+        border: "1px solid var(--color-border)",
+        backgroundColor: "var(--color-card)",
+        fontSize: 12,
+        color: "var(--color-text-muted)",
+        // Mixed font sizes give `baseline` align something to anchor.
+        lineHeight: 1 + i % 3 * 0.15
+      },
+      children: label
+    },
+    label
+  )) }) });
+}
+export {
+  ClusterPreview
+};
+//# sourceMappingURL=cluster-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/cluster/cluster-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { Cluster } from '@/ui';\n\ntype ClusterAlign = 'center' | 'start' | 'end' | 'baseline';\ntype ClusterJustify = 'start' | 'center' | 'end' | 'between';\n\nconst ITEMS = ['filter', 'tag', 'chip', 'item', 'label', 'category'];\n\nexport function ClusterPreview({ styles, variants }: PreviewProps) {\n  const gap = styles.gap as number;\n  const align = (variants.align as ClusterAlign) ?? 'center';\n  const justify = (variants.justify as ClusterJustify) ?? 'start';\n  return (\n    <div style={{ width: 360 }}>\n      <Cluster gap={gap} align={align} justify={justify}>\n        {ITEMS.map((label, i) => (\n          <span\n            key={label}\n            style={{\n              padding: `6px ${10 + i * 2}px`,\n              borderRadius: 999,\n              border: '1px solid var(--color-border)',\n              backgroundColor: 'var(--color-card)',\n              fontSize: 12,\n              color: 'var(--color-text-muted)',\n              // Mixed font sizes give `baseline` align something to anchor.\n              lineHeight: 1 + (i % 3) * 0.15,\n            }}\n          >\n            {label}\n          </span>\n        ))}\n      </Cluster>\n    </div>\n  );\n}\n"],"mappings":"AAgBU;AAfV,SAAS,eAAe;AAKxB,MAAM,QAAQ,CAAC,UAAU,OAAO,QAAQ,QAAQ,SAAS,UAAU;AAE5D,SAAS,eAAe,EAAE,QAAQ,SAAS,GAAiB;AACjE,QAAM,MAAM,OAAO;AACnB,QAAM,QAAS,SAAS,SAA0B;AAClD,QAAM,UAAW,SAAS,WAA8B;AACxD,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB,8BAAC,WAAQ,KAAU,OAAc,SAC9B,gBAAM,IAAI,CAAC,OAAO,MACjB;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO;AAAA,QACL,SAAS,OAAO,KAAK,IAAI,CAAC;AAAA,QAC1B,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,OAAO;AAAA;AAAA,QAEP,YAAY,IAAK,IAAI,IAAK;AAAA,MAC5B;AAAA,MAEC;AAAA;AAAA,IAZI;AAAA,EAaP,CACD,GACH,GACF;AAEJ;","names":[]}

package/dist/ui/cluster/cluster.cjs

@@ -0,0 +1,58 @@
+"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 cluster_exports = {};
+__export(cluster_exports, {
+  Cluster: () => Cluster
+});
+module.exports = __toCommonJS(cluster_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function Cluster({
+  gap,
+  align = "center",
+  justify = "start",
+  wrap = true,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...gap !== void 0 ? { ["--uxm-cluster-gap"]: typeof gap === "number" ? `${gap}px` : gap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_helpers.cn)(
+        "uxm-cluster",
+        `uxm-cluster--align-${align}`,
+        `uxm-cluster--justify-${justify}`,
+        wrap && "uxm-cluster--wrap",
+        className
+      ),
+      style: mergedStyle,
+      ...rest
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Cluster
+});
+//# sourceMappingURL=cluster.cjs.map

package/dist/ui/cluster/cluster.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/cluster/cluster.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode, CSSProperties } from 'react';\n\nexport interface ClusterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Gap between items. Defaults to 12px. */\n  gap?: string | number;\n  /**\n   * Vertical alignment of items relative to each other. Most useful when\n   * children have mixed heights (e.g., a label + a button). Defaults to\n   * \"center\".\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline';\n  /**\n   * Horizontal distribution. \"start\" keeps items packed left; \"between\"\n   * pushes the first/last to the edges (toolbar pattern). Defaults to\n   * \"start\".\n   */\n  justify?: 'start' | 'center' | 'end' | 'between';\n  /**\n   * Allow items to wrap onto a second row when they don't fit. The whole\n   * point of Cluster is that it's wrap-friendly, so default true; pass\n   * false only for explicit single-row toolbars.\n   */\n  wrap?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Horizontal row of items with a consistent gap, wrapping by default when\n * there's not enough room. The classic \"tag list\" / \"filter chips\" /\n * \"button row\" container — replaces hand-rolled `flex flex-wrap items-center\n * gap-N` div soup across the codebase.\n */\nexport function Cluster({\n  gap,\n  align = 'center',\n  justify = 'start',\n  wrap = true,\n  className,\n  style,\n  ...rest\n}: ClusterProps) {\n  const mergedStyle: CSSProperties = {\n    ...(gap !== undefined\n      ? { ['--uxm-cluster-gap' as string]: typeof gap === 'number' ? `${gap}px` : gap }\n      : null),\n    ...style,\n  };\n  return (\n    <div\n      className={cn(\n        'uxm-cluster',\n        `uxm-cluster--align-${align}`,\n        `uxm-cluster--justify-${justify}`,\n        wrap && 'uxm-cluster--wrap',\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDI;AAlDJ,qBAAmB;AAkCZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,cAA6B;AAAA,IACjC,GAAI,QAAQ,SACR,EAAE,CAAC,mBAA6B,GAAG,OAAO,QAAQ,WAAW,GAAG,GAAG,OAAO,IAAI,IAC9E;AAAA,IACJ,GAAG;AAAA,EACL;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,sBAAsB,KAAK;AAAA,QAC3B,wBAAwB,OAAO;AAAA,QAC/B,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/ui/cluster/cluster.css

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+/* Cluster — moved from monolithic styles.css */
+.uxm-cluster {
+  display: flex;
+  gap: var(--uxm-cluster-gap, 12px);
+}
+.uxm-cluster--wrap {
+  flex-wrap: wrap;
+}
+.uxm-cluster--align-start {
+  align-items: flex-start;
+}
+.uxm-cluster--align-center {
+  align-items: center;
+}
+.uxm-cluster--align-end {
+  align-items: flex-end;
+}
+.uxm-cluster--align-baseline {
+  align-items: baseline;
+}
+.uxm-cluster--justify-start {
+  justify-content: flex-start;
+}
+.uxm-cluster--justify-center {
+  justify-content: center;
+}
+.uxm-cluster--justify-end {
+  justify-content: flex-end;
+}
+.uxm-cluster--justify-between {
+  justify-content: space-between;
+}

package/dist/ui/cluster/cluster.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ClusterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Gap between items. Defaults to 12px. */
+    gap?: string | number;
+    /**
+     * Vertical alignment of items relative to each other. Most useful when
+     * children have mixed heights (e.g., a label + a button). Defaults to
+     * "center".
+     */
+    align?: 'start' | 'center' | 'end' | 'baseline';
+    /**
+     * Horizontal distribution. "start" keeps items packed left; "between"
+     * pushes the first/last to the edges (toolbar pattern). Defaults to
+     * "start".
+     */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /**
+     * Allow items to wrap onto a second row when they don't fit. The whole
+     * point of Cluster is that it's wrap-friendly, so default true; pass
+     * false only for explicit single-row toolbars.
+     */
+    wrap?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Horizontal row of items with a consistent gap, wrapping by default when
+ * there's not enough room. The classic "tag list" / "filter chips" /
+ * "button row" container — replaces hand-rolled `flex flex-wrap items-center
+ * gap-N` div soup across the codebase.
+ */
+export declare function Cluster({ gap, align, justify, wrap, className, style, ...rest }: ClusterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=cluster.d.ts.map

package/dist/ui/cluster/cluster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster.d.ts","sourceRoot":"","sources":["../../../src/ui/cluster/cluster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAiB,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAClE,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;IAChD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EACtB,GAAG,EACH,KAAgB,EAChB,OAAiB,EACjB,IAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,YAAY,2CAoBd"}

package/dist/ui/cluster/cluster.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function Cluster({
+  gap,
+  align = "center",
+  justify = "start",
+  wrap = true,
+  className,
+  style,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...gap !== void 0 ? { ["--uxm-cluster-gap"]: typeof gap === "number" ? `${gap}px` : gap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "uxm-cluster",
+        `uxm-cluster--align-${align}`,
+        `uxm-cluster--justify-${justify}`,
+        wrap && "uxm-cluster--wrap",
+        className
+      ),
+      style: mergedStyle,
+      ...rest
+    }
+  );
+}
+export {
+  Cluster
+};
+//# sourceMappingURL=cluster.js.map

package/dist/ui/cluster/cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/cluster/cluster.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode, CSSProperties } from 'react';\n\nexport interface ClusterProps extends HTMLAttributes<HTMLDivElement> {\n  /** Gap between items. Defaults to 12px. */\n  gap?: string | number;\n  /**\n   * Vertical alignment of items relative to each other. Most useful when\n   * children have mixed heights (e.g., a label + a button). Defaults to\n   * \"center\".\n   */\n  align?: 'start' | 'center' | 'end' | 'baseline';\n  /**\n   * Horizontal distribution. \"start\" keeps items packed left; \"between\"\n   * pushes the first/last to the edges (toolbar pattern). Defaults to\n   * \"start\".\n   */\n  justify?: 'start' | 'center' | 'end' | 'between';\n  /**\n   * Allow items to wrap onto a second row when they don't fit. The whole\n   * point of Cluster is that it's wrap-friendly, so default true; pass\n   * false only for explicit single-row toolbars.\n   */\n  wrap?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Horizontal row of items with a consistent gap, wrapping by default when\n * there's not enough room. The classic \"tag list\" / \"filter chips\" /\n * \"button row\" container — replaces hand-rolled `flex flex-wrap items-center\n * gap-N` div soup across the codebase.\n */\nexport function Cluster({\n  gap,\n  align = 'center',\n  justify = 'start',\n  wrap = true,\n  className,\n  style,\n  ...rest\n}: ClusterProps) {\n  const mergedStyle: CSSProperties = {\n    ...(gap !== undefined\n      ? { ['--uxm-cluster-gap' as string]: typeof gap === 'number' ? `${gap}px` : gap }\n      : null),\n    ...style,\n  };\n  return (\n    <div\n      className={cn(\n        'uxm-cluster',\n        `uxm-cluster--align-${align}`,\n        `uxm-cluster--justify-${justify}`,\n        wrap && 'uxm-cluster--wrap',\n        className,\n      )}\n      style={mergedStyle}\n      {...rest}\n    />\n  );\n}\n"],"mappings":"AAkDI;AAlDJ,SAAS,UAAU;AAkCZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,cAA6B;AAAA,IACjC,GAAI,QAAQ,SACR,EAAE,CAAC,mBAA6B,GAAG,OAAO,QAAQ,WAAW,GAAG,GAAG,OAAO,IAAI,IAC9E;AAAA,IACJ,GAAG;AAAA,EACL;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,KAAK;AAAA,QAC3B,wBAAwB,OAAO;AAAA,QAC/B,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

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

package/dist/ui/cluster/index.cjs.map

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

package/dist/ui/cluster/index.d.ts

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

package/dist/ui/cluster/index.d.ts.map

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

package/dist/ui/cluster/index.js

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

package/dist/ui/cluster/index.js.map

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

package/dist/ui/code-editor/code-editor-preview.cjs

@@ -0,0 +1,100 @@
+"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 code_editor_preview_exports = {};
+__export(code_editor_preview_exports, {
+  CodeEditorPreview: () => CodeEditorPreview
+});
+module.exports = __toCommonJS(code_editor_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+const SAMPLE = `query OrdersByAccount($account: ID!) {
+  orders(where: { accountId: { eq: $account } }) {
+    id
+    status
+    total { amount currency }
+  }
+}`;
+const SAMPLE_RESULT = `{
+  "data": {
+    "orders": [
+      { "id": "ord_8842", "status": "OPEN" }
+    ]
+  }
+}`;
+function buildVars(styles) {
+  return {
+    "--uxm-code-editor-bg": styles.backgroundColor,
+    "--uxm-code-editor-border-color": styles.borderColor,
+    "--uxm-code-editor-color": styles.color,
+    "--uxm-code-editor-border-radius": `${styles.borderRadius}px`,
+    "--uxm-code-editor-padding-x": `${styles.paddingX}px`,
+    "--uxm-code-editor-padding-y": `${styles.paddingY}px`,
+    "--uxm-code-editor-font-size": `${styles.fontSize}px`,
+    "--uxm-code-editor-line-height": styles.lineHeight != null ? String(styles.lineHeight) : void 0,
+    "--uxm-code-editor-min-height": `${styles.minHeight}px`,
+    "--uxm-code-editor-gutter-color": styles.gutterColor,
+    "--uxm-code-editor-gutter-bg": styles.gutterBg,
+    "--uxm-code-editor-gutter-border": styles.gutterBorder,
+    "--uxm-code-editor-gutter-gap": `${styles.gutterGap}px`,
+    "--uxm-code-editor-hover-border": styles.hoverBorder,
+    "--uxm-code-editor-focus-border": styles.focusBorder,
+    "--uxm-code-editor-focus-ring": styles.focusRing,
+    "--uxm-code-editor-disabled-bg": styles.disabledBg,
+    "--uxm-code-editor-disabled-border": styles.disabledBorder,
+    "--uxm-code-editor-disabled-color": styles.disabledColor,
+    "--uxm-code-editor-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-code-editor-error-border": styles.errorBorder,
+    "--uxm-code-editor-error-color": styles.errorColor,
+    "--uxm-code-editor-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+}
+function CodeEditorPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeEditorDemo, { state, styles }, state);
+}
+function CodeEditorDemo({ state, styles }) {
+  const isError = state === "error";
+  const [code, setCode] = (0, import_react.useState)(isError ? `${SAMPLE.slice(0, 62)}
+` : SAMPLE);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 460, ...buildVars(styles) }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_ui.CodeEditor,
+      {
+        value: code,
+        onChange: (e) => setCode(e.target.value),
+        lineNumbers: true,
+        disabled: state === "disabled",
+        error: isError ? 'Syntax error on line 2: expected "}".' : void 0,
+        className: (0, import_helpers.cn)(
+          state === "hover" && "uxm-code-editor--state-hover",
+          state === "focus" && "uxm-code-editor--state-focus"
+        ) || void 0,
+        "aria-label": "GraphQL query"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.CodeBlock, { lineNumbers: true, children: SAMPLE_RESULT }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CodeEditorPreview
+});
+//# sourceMappingURL=code-editor-preview.cjs.map

package/dist/ui/code-editor/code-editor-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/code-editor/code-editor-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { CodeBlock, CodeEditor } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst SAMPLE = `query OrdersByAccount($account: ID!) {\n  orders(where: { accountId: { eq: $account } }) {\n    id\n    status\n    total { amount currency }\n  }\n}`;\n\nconst SAMPLE_RESULT = `{\n  \"data\": {\n    \"orders\": [\n      { \"id\": \"ord_8842\", \"status\": \"OPEN\" }\n    ]\n  }\n}`;\n\n/**\n * Project the knobs onto the wrapper. The cascade has to start ABOVE the\n * atom's root, not on it — the gutter, the textarea and the CodeBlock all\n * read the same `--uxm-code-editor-*` vars, and the alignment between the\n * gutter and the code only holds while they resolve to the same values.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-code-editor-bg': styles.backgroundColor as string,\n    '--uxm-code-editor-border-color': styles.borderColor as string,\n    '--uxm-code-editor-color': styles.color as string,\n    '--uxm-code-editor-border-radius': `${styles.borderRadius}px`,\n    '--uxm-code-editor-padding-x': `${styles.paddingX}px`,\n    '--uxm-code-editor-padding-y': `${styles.paddingY}px`,\n    '--uxm-code-editor-font-size': `${styles.fontSize}px`,\n    '--uxm-code-editor-line-height':\n      styles.lineHeight != null ? String(styles.lineHeight) : undefined,\n    '--uxm-code-editor-min-height': `${styles.minHeight}px`,\n    '--uxm-code-editor-gutter-color': styles.gutterColor as string,\n    '--uxm-code-editor-gutter-bg': styles.gutterBg as string,\n    '--uxm-code-editor-gutter-border': styles.gutterBorder as string,\n    '--uxm-code-editor-gutter-gap': `${styles.gutterGap}px`,\n    '--uxm-code-editor-hover-border': styles.hoverBorder as string,\n    '--uxm-code-editor-focus-border': styles.focusBorder as string,\n    '--uxm-code-editor-focus-ring': styles.focusRing as string,\n    '--uxm-code-editor-disabled-bg': styles.disabledBg as string,\n    '--uxm-code-editor-disabled-border': styles.disabledBorder as string,\n    '--uxm-code-editor-disabled-color': styles.disabledColor as string,\n    '--uxm-code-editor-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-code-editor-error-border': styles.errorBorder as string,\n    '--uxm-code-editor-error-color': styles.errorColor as string,\n    '--uxm-code-editor-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  } as CSSProperties;\n}\n\nexport function CodeEditorPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  // Keyed by state so the State knob remounts the demo and `useState`\n  // re-seeds — no effect needed to sync.\n  return <CodeEditorDemo key={state} state={state} styles={styles} />;\n}\n\nfunction CodeEditorDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n  const [code, setCode] = useState(isError ? `${SAMPLE.slice(0, 62)}\\n` : SAMPLE);\n\n  return (\n    <div style={{ width: 460, ...buildVars(styles) } as CSSProperties}>\n      <CodeEditor\n        value={code}\n        onChange={(e) => setCode(e.target.value)}\n        lineNumbers\n        disabled={state === 'disabled'}\n        error={isError ? 'Syntax error on line 2: expected \"}\".' : undefined}\n        className={\n          cn(\n            state === 'hover' && 'uxm-code-editor--state-hover',\n            state === 'focus' && 'uxm-code-editor--state-focus',\n          ) || undefined\n        }\n        aria-label=\"GraphQL query\"\n      />\n      {/* The read-only half, under the same knobs. CodeBlock has no registry\n          entry of its own on purpose — it IS this surface, so it renders here\n          to prove a knob change reaches both. An output panel that drifted\n          from the query above it would be the bug. */}\n      <div style={{ marginTop: 12 }}>\n        <CodeBlock lineNumbers>{SAMPLE_RESULT}</CodeBlock>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiES;AAjET,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAAsC;AAItC,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQf,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AActB,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,wBAAwB,OAAO;AAAA,IAC/B,kCAAkC,OAAO;AAAA,IACzC,2BAA2B,OAAO;AAAA,IAClC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,iCACE,OAAO,cAAc,OAAO,OAAO,OAAO,UAAU,IAAI;AAAA,IAC1D,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,kCAAkC,OAAO;AAAA,IACzC,+BAA+B,OAAO;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA,IACvC,iCAAiC,OAAO;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,wCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,EACvE;AACF;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAG5C,SAAO,4CAAC,kBAA2B,OAAc,UAArB,KAAqC;AACnE;AAEA,SAAS,eAAe,EAAE,OAAO,OAAO,GAAsC;AAC5E,QAAM,UAAU,UAAU;AAC1B,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,UAAU,GAAG,OAAO,MAAM,GAAG,EAAE,CAAC;AAAA,IAAO,MAAM;AAE9E,SACE,6CAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,UAAU,MAAM,EAAE,GAC7C;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,QACvC,aAAW;AAAA,QACX,UAAU,UAAU;AAAA,QACpB,OAAO,UAAU,0CAA0C;AAAA,QAC3D,eACE;AAAA,UACE,UAAU,WAAW;AAAA,UACrB,UAAU,WAAW;AAAA,QACvB,KAAK;AAAA,QAEP,cAAW;AAAA;AAAA,IACb;AAAA,IAKA,4CAAC,SAAI,OAAO,EAAE,WAAW,GAAG,GAC1B,sDAAC,uBAAU,aAAW,MAAE,yBAAc,GACxC;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/code-editor/code-editor-preview.d.ts

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

package/dist/ui/code-editor/code-editor-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/code-editor/code-editor-preview.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AA0DrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAKnE"}