@viax.io/uxm 4.36.0

package/dist/ui/inline-filter/index.d.ts

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

package/dist/ui/inline-filter/index.d.ts.map

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

package/dist/ui/inline-filter/index.js

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

package/dist/ui/inline-filter/index.js.map

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

package/dist/ui/inline-filter/inline-filter-preview.cjs

@@ -0,0 +1,64 @@
+"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 inline_filter_preview_exports = {};
+__export(inline_filter_preview_exports, {
+  InlineFilterPreview: () => InlineFilterPreview
+});
+module.exports = __toCommonJS(inline_filter_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");
+const FILTERS = ["All", "Active", "Draft", "Archived"];
+function InlineFilterPreview({ styles }) {
+  const [active, setActive] = (0, import_react.useState)("Active");
+  const [search, setSearch] = (0, import_react.useState)("");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 500 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui3.InlineFilter,
+    {
+      style: { "--uxm-inline-filter-gap": `${styles.gap}px` },
+      search: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui4.InputWithIcon,
+        {
+          placeholder: "Search\u2026",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "search", size: 14, strokeWidth: 1.5 })
+        }
+      ),
+      filters: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: FILTERS.map((label) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.Chip,
+        {
+          mode: "filter",
+          selected: active === label,
+          onClick: () => setActive((curr) => curr === label ? null : label),
+          children: label
+        },
+        label
+      )) })
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InlineFilterPreview
+});
+//# sourceMappingURL=inline-filter-preview.cjs.map

package/dist/ui/inline-filter/inline-filter-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/inline-filter/inline-filter-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Chip } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineFilter } from '@/ui';\nimport { InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst FILTERS = ['All', 'Active', 'Draft', 'Archived'];\n\n/**\n * Real atomic composition: InlineFilter's slots receive UXM atoms —\n *   `search`  → <InputWithIcon>      (atom owns its theming)\n *   `filters` → <Chip mode=\"filter\"> (atom owns its theming)\n *\n * The chip-shape knobs that used to live in InlineFilter's registry are\n * gone; theming filter chips happens on the Chip atom's registry, and\n * those changes flow into every consumer (this preview included)\n * automatically — that's the whole point of the atomic split.\n *\n * InlineFilter's only remaining knob is `gap` (the spacing between the\n * three slots), which is a real CSS property.\n */\nexport function InlineFilterPreview({ styles }: PreviewProps) {\n  const [active, setActive] = useState<string | null>('Active');\n  const [search, setSearch] = useState('');\n\n  return (\n    <div style={{ width: 500 }}>\n      <InlineFilter\n        style={{ '--uxm-inline-filter-gap': `${styles.gap}px` } as CSSProperties}\n        search={\n          <InputWithIcon\n            placeholder=\"Search…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n          />\n        }\n        filters={\n          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>\n            {FILTERS.map((label) => (\n              <Chip\n                key={label}\n                mode=\"filter\"\n                selected={active === label}\n                onClick={() => setActive((curr) => (curr === label ? null : label))}\n              >\n                {label}\n              </Chip>\n            ))}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCkB;AAtClB,mBAAyB;AAGzB,gBAAqB;AACrB,IAAAA,aAAqB;AACrB,IAAAA,aAA6B;AAC7B,IAAAA,aAA8B;AAI9B,MAAM,UAAU,CAAC,OAAO,UAAU,SAAS,UAAU;AAe9C,SAAS,oBAAoB,EAAE,OAAO,GAAiB;AAC5D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAwB,QAAQ;AAC5D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,EAAE;AAEvC,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,2BAA2B,GAAG,OAAO,GAAG,KAAK;AAAA,MACtD,QACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,UACzC,MAAM,4CAAC,mBAAK,OAAM,UAAS,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,MACzD;AAAA,MAEF,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,GAAG,UAAU,OAAO,GACrD,kBAAQ,IAAI,CAAC,UACZ;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU,WAAW;AAAA,UACrB,SAAS,MAAM,UAAU,CAAC,SAAU,SAAS,QAAQ,OAAO,KAAM;AAAA,UAEjE;AAAA;AAAA,QALI;AAAA,MAMP,CACD,GACH;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":["import_ui"]}

package/dist/ui/inline-filter/inline-filter-preview.d.ts

@@ -0,0 +1,16 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Real atomic composition: InlineFilter's slots receive UXM atoms —
+ *   `search`  → <InputWithIcon>      (atom owns its theming)
+ *   `filters` → <Chip mode="filter"> (atom owns its theming)
+ *
+ * The chip-shape knobs that used to live in InlineFilter's registry are
+ * gone; theming filter chips happens on the Chip atom's registry, and
+ * those changes flow into every consumer (this preview included)
+ * automatically — that's the whole point of the atomic split.
+ *
+ * InlineFilter's only remaining knob is `gap` (the spacing between the
+ * three slots), which is a real CSS property.
+ */
+export declare function InlineFilterPreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-filter-preview.d.ts.map

package/dist/ui/inline-filter/inline-filter-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-filter-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/inline-filter/inline-filter-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUrD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CAiC3D"}

package/dist/ui/inline-filter/inline-filter-preview.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Chip } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+import { InlineFilter } from "../../ui/index.js";
+import { InputWithIcon } from "../../ui/index.js";
+const FILTERS = ["All", "Active", "Draft", "Archived"];
+function InlineFilterPreview({ styles }) {
+  const [active, setActive] = useState("Active");
+  const [search, setSearch] = useState("");
+  return /* @__PURE__ */ jsx("div", { style: { width: 500 }, children: /* @__PURE__ */ jsx(
+    InlineFilter,
+    {
+      style: { "--uxm-inline-filter-gap": `${styles.gap}px` },
+      search: /* @__PURE__ */ jsx(
+        InputWithIcon,
+        {
+          placeholder: "Search\u2026",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          icon: /* @__PURE__ */ jsx(Icon, { glyph: "search", size: 14, strokeWidth: 1.5 })
+        }
+      ),
+      filters: /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: FILTERS.map((label) => /* @__PURE__ */ jsx(
+        Chip,
+        {
+          mode: "filter",
+          selected: active === label,
+          onClick: () => setActive((curr) => curr === label ? null : label),
+          children: label
+        },
+        label
+      )) })
+    }
+  ) });
+}
+export {
+  InlineFilterPreview
+};
+//# sourceMappingURL=inline-filter-preview.js.map

package/dist/ui/inline-filter/inline-filter-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/inline-filter/inline-filter-preview.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { Chip } from '@/ui';\nimport { Icon } from '@/ui';\nimport { InlineFilter } from '@/ui';\nimport { InputWithIcon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst FILTERS = ['All', 'Active', 'Draft', 'Archived'];\n\n/**\n * Real atomic composition: InlineFilter's slots receive UXM atoms —\n *   `search`  → <InputWithIcon>      (atom owns its theming)\n *   `filters` → <Chip mode=\"filter\"> (atom owns its theming)\n *\n * The chip-shape knobs that used to live in InlineFilter's registry are\n * gone; theming filter chips happens on the Chip atom's registry, and\n * those changes flow into every consumer (this preview included)\n * automatically — that's the whole point of the atomic split.\n *\n * InlineFilter's only remaining knob is `gap` (the spacing between the\n * three slots), which is a real CSS property.\n */\nexport function InlineFilterPreview({ styles }: PreviewProps) {\n  const [active, setActive] = useState<string | null>('Active');\n  const [search, setSearch] = useState('');\n\n  return (\n    <div style={{ width: 500 }}>\n      <InlineFilter\n        style={{ '--uxm-inline-filter-gap': `${styles.gap}px` } as CSSProperties}\n        search={\n          <InputWithIcon\n            placeholder=\"Search…\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            icon={<Icon glyph=\"search\" size={14} strokeWidth={1.5} />}\n          />\n        }\n        filters={\n          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>\n            {FILTERS.map((label) => (\n              <Chip\n                key={label}\n                mode=\"filter\"\n                selected={active === label}\n                onClick={() => setActive((curr) => (curr === label ? null : label))}\n              >\n                {label}\n              </Chip>\n            ))}\n          </div>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"AAsCkB;AAtClB,SAAS,gBAAgB;AAGzB,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAI9B,MAAM,UAAU,CAAC,OAAO,UAAU,SAAS,UAAU;AAe9C,SAAS,oBAAoB,EAAE,OAAO,GAAiB;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,QAAQ;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,IAAI,GACvB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,2BAA2B,GAAG,OAAO,GAAG,KAAK;AAAA,MACtD,QACE;AAAA,QAAC;AAAA;AAAA,UACC,aAAY;AAAA,UACZ,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,UACzC,MAAM,oBAAC,QAAK,OAAM,UAAS,MAAM,IAAI,aAAa,KAAK;AAAA;AAAA,MACzD;AAAA,MAEF,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,GAAG,UAAU,OAAO,GACrD,kBAAQ,IAAI,CAAC,UACZ;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU,WAAW;AAAA,UACrB,SAAS,MAAM,UAAU,CAAC,SAAU,SAAS,QAAQ,OAAO,KAAM;AAAA,UAEjE;AAAA;AAAA,QALI;AAAA,MAMP,CACD,GACH;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}

package/dist/ui/inline-filter/inline-filter.cjs

@@ -0,0 +1,43 @@
+"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 inline_filter_exports = {};
+__export(inline_filter_exports, {
+  InlineFilter: () => InlineFilter
+});
+module.exports = __toCommonJS(inline_filter_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function InlineFilter({
+  search,
+  filters,
+  trailing,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-inline-filter", className), ...rest, children: [
+    search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-inline-filter__search", children: search }),
+    filters && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-inline-filter__filters", children: filters }),
+    trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-inline-filter__trailing", children: trailing })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InlineFilter
+});
+//# sourceMappingURL=inline-filter.cjs.map

package/dist/ui/inline-filter/inline-filter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/inline-filter/inline-filter.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface InlineFilterProps extends HTMLAttributes<HTMLDivElement> {\n  search?: ReactNode;\n  filters?: ReactNode;\n  trailing?: ReactNode;\n}\n\nexport function InlineFilter({\n  search,\n  filters,\n  trailing,\n  className,\n  ...rest\n}: InlineFilterProps) {\n  return (\n    <div className={cn('uxm-inline-filter', className)} {...rest}>\n      {search && <div className=\"uxm-inline-filter__search\">{search}</div>}\n      {filters && <div className=\"uxm-inline-filter__filters\">{filters}</div>}\n      {trailing && <div className=\"uxm-inline-filter__trailing\">{trailing}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBI;AAlBJ,qBAAmB;AAUZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE,6CAAC,SAAI,eAAW,mBAAG,qBAAqB,SAAS,GAAI,GAAG,MACrD;AAAA,cAAU,4CAAC,SAAI,WAAU,6BAA6B,kBAAO;AAAA,IAC7D,WAAW,4CAAC,SAAI,WAAU,8BAA8B,mBAAQ;AAAA,IAChE,YAAY,4CAAC,SAAI,WAAU,+BAA+B,oBAAS;AAAA,KACtE;AAEJ;","names":[]}

package/dist/ui/inline-filter/inline-filter.css

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+/* ── inline-filter ── */
+.uxm-inline-filter {
+  align-items: center;
+  display: flex;
+  gap: var(--uxm-inline-filter-gap, 12px);
+  width: 100%;
+}
+.uxm-inline-filter__search {
+  flex: 0 1 220px;
+}
+.uxm-inline-filter__filters {
+  flex: 1;
+}
+.uxm-inline-filter__trailing {
+  margin-left: auto;
+}

package/dist/ui/inline-filter/inline-filter.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface InlineFilterProps extends HTMLAttributes<HTMLDivElement> {
+    search?: ReactNode;
+    filters?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare function InlineFilter({ search, filters, trailing, className, ...rest }: InlineFilterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-filter.d.ts.map

package/dist/ui/inline-filter/inline-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-filter.d.ts","sourceRoot":"","sources":["../../../src/ui/inline-filter/inline-filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAQnB"}

package/dist/ui/inline-filter/inline-filter.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function InlineFilter({
+  search,
+  filters,
+  trailing,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-inline-filter", className), ...rest, children: [
+    search && /* @__PURE__ */ jsx("div", { className: "uxm-inline-filter__search", children: search }),
+    filters && /* @__PURE__ */ jsx("div", { className: "uxm-inline-filter__filters", children: filters }),
+    trailing && /* @__PURE__ */ jsx("div", { className: "uxm-inline-filter__trailing", children: trailing })
+  ] });
+}
+export {
+  InlineFilter
+};
+//# sourceMappingURL=inline-filter.js.map

package/dist/ui/inline-filter/inline-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/inline-filter/inline-filter.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport interface InlineFilterProps extends HTMLAttributes<HTMLDivElement> {\n  search?: ReactNode;\n  filters?: ReactNode;\n  trailing?: ReactNode;\n}\n\nexport function InlineFilter({\n  search,\n  filters,\n  trailing,\n  className,\n  ...rest\n}: InlineFilterProps) {\n  return (\n    <div className={cn('uxm-inline-filter', className)} {...rest}>\n      {search && <div className=\"uxm-inline-filter__search\">{search}</div>}\n      {filters && <div className=\"uxm-inline-filter__filters\">{filters}</div>}\n      {trailing && <div className=\"uxm-inline-filter__trailing\">{trailing}</div>}\n    </div>\n  );\n}\n"],"mappings":"AAkBI,SACa,KADb;AAlBJ,SAAS,UAAU;AAUZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,SACE,qBAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MACrD;AAAA,cAAU,oBAAC,SAAI,WAAU,6BAA6B,kBAAO;AAAA,IAC7D,WAAW,oBAAC,SAAI,WAAU,8BAA8B,mBAAQ;AAAA,IAChE,YAAY,oBAAC,SAAI,WAAU,+BAA+B,oBAAS;AAAA,KACtE;AAEJ;","names":[]}

package/dist/ui/input/clear-field-value.cjs

@@ -0,0 +1,36 @@
+"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 clear_field_value_exports = {};
+__export(clear_field_value_exports, {
+  clearFieldValue: () => clearFieldValue
+});
+module.exports = __toCommonJS(clear_field_value_exports);
+function clearFieldValue(el) {
+  if (!el) return;
+  const proto = el instanceof HTMLTextAreaElement ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+  setter?.call(el, "");
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.focus();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clearFieldValue
+});
+//# sourceMappingURL=clear-field-value.cjs.map

package/dist/ui/input/clear-field-value.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input/clear-field-value.ts"],"sourcesContent":["/**\n * Imperatively clear a controlled-or-uncontrolled `<input>` / `<textarea>`.\n *\n * Sets the element's value to \"\" via the prototype's native setter, then\n * dispatches a real `input` event. React's delegated listener picks the event\n * up and fires the element's own `onChange` with the empty value — so a\n * controlled consumer's `onChange={(e) => setX(e.target.value)}` resets its\n * state automatically, with NO separate `onClear` wiring. For an uncontrolled\n * field the DOM value is simply reset. Focus returns to the field so the user\n * can keep typing after clearing.\n *\n * This is why the free-text atoms (TextInput / Textarea / InputWithIcon) can\n * default `clearable` to true: the ✕ works for any usage that already passes\n * `value` + `onChange`, which is every controlled field — no per-usage opt-in.\n */\nexport function clearFieldValue(el: HTMLInputElement | HTMLTextAreaElement | null): void {\n  if (!el) return;\n  const proto =\n    el instanceof HTMLTextAreaElement\n      ? window.HTMLTextAreaElement.prototype\n      : window.HTMLInputElement.prototype;\n  const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;\n  setter?.call(el, '');\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n  el.focus();\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeO,SAAS,gBAAgB,IAAyD;AACvF,MAAI,CAAC,GAAI;AACT,QAAM,QACJ,cAAc,sBACV,OAAO,oBAAoB,YAC3B,OAAO,iBAAiB;AAC9B,QAAM,SAAS,OAAO,yBAAyB,OAAO,OAAO,GAAG;AAChE,UAAQ,KAAK,IAAI,EAAE;AACnB,KAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AACtD,KAAG,MAAM;AACX;","names":[]}

package/dist/ui/input/clear-field-value.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Imperatively clear a controlled-or-uncontrolled `<input>` / `<textarea>`.
+ *
+ * Sets the element's value to "" via the prototype's native setter, then
+ * dispatches a real `input` event. React's delegated listener picks the event
+ * up and fires the element's own `onChange` with the empty value — so a
+ * controlled consumer's `onChange={(e) => setX(e.target.value)}` resets its
+ * state automatically, with NO separate `onClear` wiring. For an uncontrolled
+ * field the DOM value is simply reset. Focus returns to the field so the user
+ * can keep typing after clearing.
+ *
+ * This is why the free-text atoms (TextInput / Textarea / InputWithIcon) can
+ * default `clearable` to true: the ✕ works for any usage that already passes
+ * `value` + `onChange`, which is every controlled field — no per-usage opt-in.
+ */
+export declare function clearFieldValue(el: HTMLInputElement | HTMLTextAreaElement | null): void;
+//# sourceMappingURL=clear-field-value.d.ts.map

package/dist/ui/input/clear-field-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-field-value.d.ts","sourceRoot":"","sources":["../../../src/ui/input/clear-field-value.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,EAAE,EAAE,gBAAgB,GAAG,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAUvF"}

package/dist/ui/input/clear-field-value.js

@@ -0,0 +1,12 @@
+function clearFieldValue(el) {
+  if (!el) return;
+  const proto = el instanceof HTMLTextAreaElement ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+  const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
+  setter?.call(el, "");
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.focus();
+}
+export {
+  clearFieldValue
+};
+//# sourceMappingURL=clear-field-value.js.map

package/dist/ui/input/clear-field-value.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input/clear-field-value.ts"],"sourcesContent":["/**\n * Imperatively clear a controlled-or-uncontrolled `<input>` / `<textarea>`.\n *\n * Sets the element's value to \"\" via the prototype's native setter, then\n * dispatches a real `input` event. React's delegated listener picks the event\n * up and fires the element's own `onChange` with the empty value — so a\n * controlled consumer's `onChange={(e) => setX(e.target.value)}` resets its\n * state automatically, with NO separate `onClear` wiring. For an uncontrolled\n * field the DOM value is simply reset. Focus returns to the field so the user\n * can keep typing after clearing.\n *\n * This is why the free-text atoms (TextInput / Textarea / InputWithIcon) can\n * default `clearable` to true: the ✕ works for any usage that already passes\n * `value` + `onChange`, which is every controlled field — no per-usage opt-in.\n */\nexport function clearFieldValue(el: HTMLInputElement | HTMLTextAreaElement | null): void {\n  if (!el) return;\n  const proto =\n    el instanceof HTMLTextAreaElement\n      ? window.HTMLTextAreaElement.prototype\n      : window.HTMLInputElement.prototype;\n  const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;\n  setter?.call(el, '');\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n  el.focus();\n}\n"],"mappings":"AAeO,SAAS,gBAAgB,IAAyD;AACvF,MAAI,CAAC,GAAI;AACT,QAAM,QACJ,cAAc,sBACV,OAAO,oBAAoB,YAC3B,OAAO,iBAAiB;AAC9B,QAAM,SAAS,OAAO,yBAAyB,OAAO,OAAO,GAAG;AAChE,UAAQ,KAAK,IAAI,EAAE;AACnB,KAAG,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,KAAK,CAAC,CAAC;AACtD,KAAG,MAAM;AACX;","names":[]}

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

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

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

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

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

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

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

package/dist/ui/input/index.js

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

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

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

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

@@ -0,0 +1,80 @@
+"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_preview_exports = {};
+__export(input_preview_exports, {
+  InputPreview: () => InputPreview
+});
+module.exports = __toCommonJS(input_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");
+function buildVars(styles) {
+  return {
+    "--uxm-input-text-bg": styles.backgroundColor,
+    "--uxm-input-text-border-color": styles.borderColor,
+    "--uxm-input-text-color": styles.color,
+    "--uxm-input-text-border-radius": `${styles.borderRadius}px`,
+    "--uxm-input-text-padding-x": `${styles.paddingX}px`,
+    "--uxm-input-text-padding-y": `${styles.paddingY}px`,
+    "--uxm-input-text-font-size": `${styles.fontSize}px`,
+    "--uxm-input-text-hover-bg": styles.hoverBg,
+    "--uxm-input-text-hover-border": styles.hoverBorder,
+    "--uxm-input-text-focus-border": styles.focusBorder,
+    "--uxm-input-text-focus-ring": styles.focusRing,
+    "--uxm-input-text-disabled-bg": styles.disabledBg,
+    "--uxm-input-text-disabled-border": styles.disabledBorder,
+    "--uxm-input-text-disabled-color": styles.disabledColor,
+    "--uxm-input-text-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-input-text-error-bg": styles.errorBg,
+    "--uxm-input-text-error-border": styles.errorBorder,
+    "--uxm-input-text-error-color": styles.errorColor,
+    "--uxm-input-text-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+}
+function InputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InputDemo, { state, styles }, state);
+}
+function InputDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = (0, import_react.useState)(isError ? "bad@" : "");
+  const cssVars = buildVars(styles);
+  const forcedClass = (0, import_helpers.cn)(
+    state === "hover" && "uxm-input-text--state-hover",
+    state === "focus" && "uxm-input-text--state-focus"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 300, ...cssVars }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.TextInput,
+    {
+      type: "email",
+      value,
+      onChange: (e) => setValue(e.target.value),
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      placeholder: "you@example.com",
+      error: isError ? "Please enter a valid email address." : void 0
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputPreview
+});
+//# sourceMappingURL=input-preview.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input/input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { TextInput } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob onto the wrapper as a `--uxm-input-text-*`\n * custom prop. The single <TextInput> below reads them through the\n * styles.css `:hover` / `:focus` / `:disabled` / `--error` rules — so\n * live edits paint immediately and real pointer / keyboard interaction\n * exercises the same production CSS that ships to consumers.\n *\n * The preview shows the bare input atom — no label. Labels are owned\n * entirely by `<FormField>`; consumers wrap with FormField when they\n * want a label. This keeps the input editor focused on input shape and\n * state, and routes all label theming questions to FormField.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-input-text-bg': styles.backgroundColor as string,\n    '--uxm-input-text-border-color': styles.borderColor as string,\n    '--uxm-input-text-color': styles.color as string,\n    '--uxm-input-text-border-radius': `${styles.borderRadius}px`,\n    '--uxm-input-text-padding-x': `${styles.paddingX}px`,\n    '--uxm-input-text-padding-y': `${styles.paddingY}px`,\n    '--uxm-input-text-font-size': `${styles.fontSize}px`,\n    '--uxm-input-text-hover-bg': styles.hoverBg as string,\n    '--uxm-input-text-hover-border': styles.hoverBorder as string,\n    '--uxm-input-text-focus-border': styles.focusBorder as string,\n    '--uxm-input-text-focus-ring': styles.focusRing as string,\n    '--uxm-input-text-disabled-bg': styles.disabledBg as string,\n    '--uxm-input-text-disabled-border': styles.disabledBorder as string,\n    '--uxm-input-text-disabled-color': styles.disabledColor as string,\n    '--uxm-input-text-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-input-text-error-bg': styles.errorBg as string,\n    '--uxm-input-text-error-border': styles.errorBorder as string,\n    '--uxm-input-text-error-color': styles.errorColor as string,\n    '--uxm-input-text-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  } as CSSProperties;\n}\n\nexport function InputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <InputDemo 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 InputDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Error state pre-fills with visibly bad input so the full error UX\n  // (red border + message) reads as a realistic failure, not just\n  // \"input with a red border.\"\n  const [value, setValue] = useState(isError ? 'bad@' : '');\n\n  const cssVars = buildVars(styles);\n\n  // Forced-state modifier class. `--state-hover` and `--state-focus`\n  // mirror the `:hover` / `:focus` pseudo styles via shared CSS selectors,\n  // so the visual fires without needing real interaction. Disabled\n  // engages via the HTML `disabled` attribute.\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-input-text--state-hover',\n    state === 'focus' && 'uxm-input-text--state-focus',\n  );\n\n  return (\n    <div style={{ width: 300, ...cssVars } as CSSProperties}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <TextInput\n        type=\"email\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        placeholder=\"you@example.com\"\n        error={isError ? 'Please enter a valid email address.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDS;AAhDT,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAA0B;AAgB1B,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,uBAAuB,OAAO;AAAA,IAC9B,iCAAiC,OAAO;AAAA,IACxC,0BAA0B,OAAO;AAAA,IACjC,kCAAkC,GAAG,OAAO,YAAY;AAAA,IACxD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,mCAAmC,OAAO;AAAA,IAC1C,qCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,OAAO;AAAA,IACvC,uCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,EACvE;AACF;AAEO,SAAS,aAAa,EAAE,QAAQ,SAAS,GAAiB;AAC/D,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,4CAAC,aAAsB,OAAc,UAArB,KAAqC;AAC9D;AAIA,SAAS,UAAU,EAAE,OAAO,OAAO,GAAsC;AACvE,QAAM,UAAU,UAAU;AAK1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,UAAU,SAAS,EAAE;AAExD,QAAM,UAAU,UAAU,MAAM;AAMhC,QAAM,kBAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,4CAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,QAAQ,GAInC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,aAAY;AAAA,MACZ,OAAO,UAAU,wCAAwC;AAAA;AAAA,EAC3D,GACF;AAEJ;","names":[]}

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

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

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

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

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

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { TextInput } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    "--uxm-input-text-bg": styles.backgroundColor,
+    "--uxm-input-text-border-color": styles.borderColor,
+    "--uxm-input-text-color": styles.color,
+    "--uxm-input-text-border-radius": `${styles.borderRadius}px`,
+    "--uxm-input-text-padding-x": `${styles.paddingX}px`,
+    "--uxm-input-text-padding-y": `${styles.paddingY}px`,
+    "--uxm-input-text-font-size": `${styles.fontSize}px`,
+    "--uxm-input-text-hover-bg": styles.hoverBg,
+    "--uxm-input-text-hover-border": styles.hoverBorder,
+    "--uxm-input-text-focus-border": styles.focusBorder,
+    "--uxm-input-text-focus-ring": styles.focusRing,
+    "--uxm-input-text-disabled-bg": styles.disabledBg,
+    "--uxm-input-text-disabled-border": styles.disabledBorder,
+    "--uxm-input-text-disabled-color": styles.disabledColor,
+    "--uxm-input-text-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-input-text-error-bg": styles.errorBg,
+    "--uxm-input-text-error-border": styles.errorBorder,
+    "--uxm-input-text-error-color": styles.errorColor,
+    "--uxm-input-text-error-message-size": styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : void 0
+  };
+}
+function InputPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  return /* @__PURE__ */ jsx(InputDemo, { state, styles }, state);
+}
+function InputDemo({ state, styles }) {
+  const isError = state === "error";
+  const [value, setValue] = useState(isError ? "bad@" : "");
+  const cssVars = buildVars(styles);
+  const forcedClass = cn(
+    state === "hover" && "uxm-input-text--state-hover",
+    state === "focus" && "uxm-input-text--state-focus"
+  );
+  return /* @__PURE__ */ jsx("div", { style: { width: 300, ...cssVars }, children: /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      type: "email",
+      value,
+      onChange: (e) => setValue(e.target.value),
+      disabled: state === "disabled",
+      className: forcedClass || void 0,
+      placeholder: "you@example.com",
+      error: isError ? "Please enter a valid email address." : void 0
+    }
+  ) });
+}
+export {
+  InputPreview
+};
+//# sourceMappingURL=input-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/input/input-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { TextInput } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every state knob onto the wrapper as a `--uxm-input-text-*`\n * custom prop. The single <TextInput> below reads them through the\n * styles.css `:hover` / `:focus` / `:disabled` / `--error` rules — so\n * live edits paint immediately and real pointer / keyboard interaction\n * exercises the same production CSS that ships to consumers.\n *\n * The preview shows the bare input atom — no label. Labels are owned\n * entirely by `<FormField>`; consumers wrap with FormField when they\n * want a label. This keeps the input editor focused on input shape and\n * state, and routes all label theming questions to FormField.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-input-text-bg': styles.backgroundColor as string,\n    '--uxm-input-text-border-color': styles.borderColor as string,\n    '--uxm-input-text-color': styles.color as string,\n    '--uxm-input-text-border-radius': `${styles.borderRadius}px`,\n    '--uxm-input-text-padding-x': `${styles.paddingX}px`,\n    '--uxm-input-text-padding-y': `${styles.paddingY}px`,\n    '--uxm-input-text-font-size': `${styles.fontSize}px`,\n    '--uxm-input-text-hover-bg': styles.hoverBg as string,\n    '--uxm-input-text-hover-border': styles.hoverBorder as string,\n    '--uxm-input-text-focus-border': styles.focusBorder as string,\n    '--uxm-input-text-focus-ring': styles.focusRing as string,\n    '--uxm-input-text-disabled-bg': styles.disabledBg as string,\n    '--uxm-input-text-disabled-border': styles.disabledBorder as string,\n    '--uxm-input-text-disabled-color': styles.disabledColor as string,\n    '--uxm-input-text-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-input-text-error-bg': styles.errorBg as string,\n    '--uxm-input-text-error-border': styles.errorBorder as string,\n    '--uxm-input-text-error-color': styles.errorColor as string,\n    '--uxm-input-text-error-message-size':\n      styles.errorMessageSize != null ? `${styles.errorMessageSize}px` : undefined,\n  } as CSSProperties;\n}\n\nexport function InputPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  return <InputDemo 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 InputDemo({ state, styles }: { state: string; styles: Styles }) {\n  const isError = state === 'error';\n\n  // Error state pre-fills with visibly bad input so the full error UX\n  // (red border + message) reads as a realistic failure, not just\n  // \"input with a red border.\"\n  const [value, setValue] = useState(isError ? 'bad@' : '');\n\n  const cssVars = buildVars(styles);\n\n  // Forced-state modifier class. `--state-hover` and `--state-focus`\n  // mirror the `:hover` / `:focus` pseudo styles via shared CSS selectors,\n  // so the visual fires without needing real interaction. Disabled\n  // engages via the HTML `disabled` attribute.\n  const forcedClass = cn(\n    state === 'hover' && 'uxm-input-text--state-hover',\n    state === 'focus' && 'uxm-input-text--state-focus',\n  );\n\n  return (\n    <div style={{ width: 300, ...cssVars } as CSSProperties}>\n      {/* `--error` is driven by the real `error` prop (not a forced-state\n          class), so the atom renders its production error message — icon\n          + text via the shared FieldError — instead of a preview-only mock. */}\n      <TextInput\n        type=\"email\"\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        disabled={state === 'disabled'}\n        className={forcedClass || undefined}\n        placeholder=\"you@example.com\"\n        error={isError ? 'Please enter a valid email address.' : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"AAgDS;AAhDT,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,iBAAiB;AAgB1B,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,uBAAuB,OAAO;AAAA,IAC9B,iCAAiC,OAAO;AAAA,IACxC,0BAA0B,OAAO;AAAA,IACjC,kCAAkC,GAAG,OAAO,YAAY;AAAA,IACxD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,8BAA8B,GAAG,OAAO,QAAQ;AAAA,IAChD,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,iCAAiC,OAAO;AAAA,IACxC,+BAA+B,OAAO;AAAA,IACtC,gCAAgC,OAAO;AAAA,IACvC,oCAAoC,OAAO;AAAA,IAC3C,mCAAmC,OAAO;AAAA,IAC1C,qCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,gCAAgC,OAAO;AAAA,IACvC,uCACE,OAAO,oBAAoB,OAAO,GAAG,OAAO,gBAAgB,OAAO;AAAA,EACvE;AACF;AAEO,SAAS,aAAa,EAAE,QAAQ,SAAS,GAAiB;AAC/D,QAAM,QAAS,SAAS,SAAoB;AAC5C,SAAO,oBAAC,aAAsB,OAAc,UAArB,KAAqC;AAC9D;AAIA,SAAS,UAAU,EAAE,OAAO,OAAO,GAAsC;AACvE,QAAM,UAAU,UAAU;AAK1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,EAAE;AAExD,QAAM,UAAU,UAAU,MAAM;AAMhC,QAAM,cAAc;AAAA,IAClB,UAAU,WAAW;AAAA,IACrB,UAAU,WAAW;AAAA,EACvB;AAEA,SACE,oBAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,QAAQ,GAInC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,UAAU,UAAU;AAAA,MACpB,WAAW,eAAe;AAAA,MAC1B,aAAY;AAAA,MACZ,OAAO,UAAU,wCAAwC;AAAA;AAAA,EAC3D,GACF;AAEJ;","names":[]}