@axenstudio/axen-form 0.1.9 → 0.1.11

package/dist/core/dateUtils.cjs

@@ -10,15 +10,19 @@ function formatDateLocale(isoDate, locale) {
     day: "2-digit"
   });
 }
-function formatTimeLocale(isoTime, locale, ampm) {
+function formatTimeLocale(isoTime, locale, ampm, showSeconds) {
   if (!isoTime) return "";
-  const [hours, minutes] = isoTime.split(":").map(Number);
+  const parts = isoTime.split(":").map(Number);
+  const hours = parts[0];
+  const minutes = parts[1];
+  const seconds = parts[2] ?? 0;
   if (Number.isNaN(hours) || Number.isNaN(minutes)) return isoTime;
-  const date = new Date(2e3, 0, 1, hours, minutes);
+  const date = new Date(2e3, 0, 1, hours, minutes, seconds);
   if (Number.isNaN(date.getTime())) return isoTime;
   return date.toLocaleTimeString(locale ?? navigator.language, {
     hour: "2-digit",
     minute: "2-digit",
+    ...showSeconds ? { second: "2-digit" } : {},
     hour12: ampm
   });
 }

package/dist/core/dateUtils.d.ts

@@ -7,7 +7,7 @@
 /** Format an ISO date string to locale display */
 export declare function formatDateLocale(isoDate: string, locale?: string): string;
 /** Format an ISO time string (HH:MM or HH:MM:SS) to locale display */
-export declare function formatTimeLocale(isoTime: string, locale?: string, ampm?: boolean): string;
+export declare function formatTimeLocale(isoTime: string, locale?: string, ampm?: boolean, showSeconds?: boolean): string;
 /** Format an ISO datetime-local string to locale display */
 export declare function formatDateTimeLocale(isoDateTime: string, locale?: string, ampm?: boolean): string;
 /** Parse a locale-formatted date back to ISO (YYYY-MM-DD) */

package/dist/core/dateUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../src/core/dateUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,kDAAkD;AAClD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CASzE;AAED,sEAAsE;AACtE,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAYzF;AAED,4DAA4D;AAC5D,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAYjG;AAED,6DAA6D;AAC7D,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ7E;AAED,mEAAmE;AACnE,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAO/D;AAED,iCAAiC;AACjC,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAKlD;AAED,+DAA+D;AAC/D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAO3D;AAED,4BAA4B;AAC5B,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAIlD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAKzC"}
+{"version":3,"file":"dateUtils.d.ts","sourceRoot":"","sources":["../../src/core/dateUtils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,kDAAkD;AAClD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CASzE;AAED,sEAAsE;AACtE,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,OAAO,EACd,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,CAgBR;AAED,4DAA4D;AAC5D,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAYjG;AAED,6DAA6D;AAC7D,wBAAgB,cAAc,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ7E;AAED,mEAAmE;AACnE,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAO/D;AAED,iCAAiC;AACjC,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAKlD;AAED,+DAA+D;AAC/D,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAO3D;AAED,4BAA4B;AAC5B,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAIlD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAKzC"}

package/dist/core/dateUtils.js

@@ -8,15 +8,19 @@ function formatDateLocale(isoDate, locale) {
     day: "2-digit"
   });
 }
-function formatTimeLocale(isoTime, locale, ampm) {
+function formatTimeLocale(isoTime, locale, ampm, showSeconds) {
   if (!isoTime) return "";
-  const [hours, minutes] = isoTime.split(":").map(Number);
+  const parts = isoTime.split(":").map(Number);
+  const hours = parts[0];
+  const minutes = parts[1];
+  const seconds = parts[2] ?? 0;
   if (Number.isNaN(hours) || Number.isNaN(minutes)) return isoTime;
-  const date = new Date(2e3, 0, 1, hours, minutes);
+  const date = new Date(2e3, 0, 1, hours, minutes, seconds);
   if (Number.isNaN(date.getTime())) return isoTime;
   return date.toLocaleTimeString(locale ?? navigator.language, {
     hour: "2-digit",
     minute: "2-digit",
+    ...showSeconds ? { second: "2-digit" } : {},
     hour12: ampm
   });
 }

package/dist/core/validation.cjs

@@ -5,13 +5,16 @@ const simpleValidator = {
     return fields.filter((f) => f.required).map((f) => ({
       name: f.name,
       message: f.requiredMessage ?? `${f.label ?? f.name} is required`,
-      type: f.type
+      type: f.type,
+      hidden: f.hidden
     }));
   },
   async validate(schema, values) {
     const rules = schema;
     const errors = {};
     for (const rule of rules) {
+      const isHidden = typeof rule.hidden === "function" ? rule.hidden(values) : rule.hidden;
+      if (isHidden) continue;
       const value = getNestedValue(values, rule.name);
       if (isEmpty(value)) {
         errors[rule.name] = rule.message;

package/dist/core/validation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/core/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,iBA+B7B,CAAC"}
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/core/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,iBAyC7B,CAAC"}

package/dist/core/validation.js

@@ -3,13 +3,16 @@ const simpleValidator = {
     return fields.filter((f) => f.required).map((f) => ({
       name: f.name,
       message: f.requiredMessage ?? `${f.label ?? f.name} is required`,
-      type: f.type
+      type: f.type,
+      hidden: f.hidden
     }));
   },
   async validate(schema, values) {
     const rules = schema;
     const errors = {};
     for (const rule of rules) {
+      const isHidden = typeof rule.hidden === "function" ? rule.hidden(values) : rule.hidden;
+      if (isHidden) continue;
       const value = getNestedValue(values, rule.name);
       if (isEmpty(value)) {
         errors[rule.name] = rule.message;

package/dist/fields/AutocompleteField/AutocompleteField.cjs

@@ -203,39 +203,39 @@ function AutocompleteField({
           )
         }
       ),
-      loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })
-    ] }),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: listboxId,
-        ref: listRef,
-        role: "listbox",
-        className: AutocompleteField_module.default.dropdown,
-        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: `${name}-opt-${i}`,
-            role: "option",
-            tabIndex: -1,
-            "aria-selected": i === activeIndex,
-            "aria-disabled": opt.disabled,
-            className: fieldUtils.cx(
-              AutocompleteField_module.default.option,
-              i === activeIndex && AutocompleteField_module.default.optionActive,
-              opt.disabled && AutocompleteField_module.default.optionDisabled
-            ),
-            onMouseDown: (e) => {
-              e.preventDefault();
-              if (!opt.disabled) selectOption(opt);
+      loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" }),
+      isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: listboxId,
+          ref: listRef,
+          role: "listbox",
+          className: AutocompleteField_module.default.dropdown,
+          children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: `${name}-opt-${i}`,
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": i === activeIndex,
+              "aria-disabled": opt.disabled,
+              className: fieldUtils.cx(
+                AutocompleteField_module.default.option,
+                i === activeIndex && AutocompleteField_module.default.optionActive,
+                opt.disabled && AutocompleteField_module.default.optionDisabled
+              ),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!opt.disabled) selectOption(opt);
+              },
+              children: getOptionLabel(opt)
             },
-            children: getOptionLabel(opt)
-          },
-          opt.value
-        ))
-      }
-    ),
-    isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutocompleteField_module.default.noResults, children: "No results found" }),
+            opt.value
+          ))
+        }
+      ),
+      isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: AutocompleteField_module.default.noResults, children: "No results found" })
+    ] }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/AutocompleteField/AutocompleteField.js

@@ -201,39 +201,39 @@ function AutocompleteField({
           )
         }
       ),
-      loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" })
-    ] }),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: listboxId,
-        ref: listRef,
-        role: "listbox",
-        className: localStyles.dropdown,
-        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: `${name}-opt-${i}`,
-            role: "option",
-            tabIndex: -1,
-            "aria-selected": i === activeIndex,
-            "aria-disabled": opt.disabled,
-            className: cx(
-              localStyles.option,
-              i === activeIndex && localStyles.optionActive,
-              opt.disabled && localStyles.optionDisabled
-            ),
-            onMouseDown: (e) => {
-              e.preventDefault();
-              if (!opt.disabled) selectOption(opt);
+      loading && /* @__PURE__ */ jsx("span", { className: localStyles.spinner, "aria-hidden": "true" }),
+      isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: listboxId,
+          ref: listRef,
+          role: "listbox",
+          className: localStyles.dropdown,
+          children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: `${name}-opt-${i}`,
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": i === activeIndex,
+              "aria-disabled": opt.disabled,
+              className: cx(
+                localStyles.option,
+                i === activeIndex && localStyles.optionActive,
+                opt.disabled && localStyles.optionDisabled
+              ),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!opt.disabled) selectOption(opt);
+              },
+              children: getOptionLabel(opt)
             },
-            children: getOptionLabel(opt)
-          },
-          opt.value
-        ))
-      }
-    ),
-    isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsx("div", { className: localStyles.noResults, children: "No results found" }),
+            opt.value
+          ))
+        }
+      ),
+      isOpen && filteredOptions.length === 0 && inputText && !loading && /* @__PURE__ */ jsx("div", { className: localStyles.noResults, children: "No results found" })
+    ] }),
     helperText && /* @__PURE__ */ jsx(
       "span",
       {

package/dist/fields/AutocompleteField/AutocompleteField.module.css.cjs

@@ -1,18 +1,33 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._inputWrap_12exf_1 {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n._spinner_12exf_7 {\n  position: absolute;\n  right: 0.75rem;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--axen-color-border);\n  border-top-color: var(--axen-color-primary);\n  border-radius: 50%;\n  animation: _spin_12exf_7 0.6s linear infinite;\n}\n\n@keyframes _spin_12exf_7 {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ._spinner_12exf_7 {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n/* ── Dropdown ────────────────────────────────── */\n._dropdown_12exf_32 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown);\n  width: 100%;\n  max-height: 240px;\n  margin: 0;\n  padding: var(--axen-space-xs) 0;\n  list-style: none;\n  overflow-y: auto;\n  background: var(--axen-color-bg);\n  border: var(--axen-border-width) solid var(--axen-color-border);\n  border-top: none;\n  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n._option_12exf_50 {\n  display: flex;\n  align-items: center;\n  padding: var(--axen-space-sm) var(--axen-field-padding-x);\n  font-size: var(--axen-font-size-md);\n  color: var(--axen-color-text);\n  cursor: pointer;\n  min-height: var(--axen-field-min-height);\n  transition: background-color var(--axen-transition-fast);\n}\n\n._option_12exf_50:hover {\n  background-color: var(--axen-color-bg-hover);\n}\n\n._optionActive_12exf_65 {\n  background-color: var(--axen-color-primary-light);\n}\n\n._optionDisabled_12exf_69 {\n  color: var(--axen-color-text-disabled);\n  cursor: not-allowed;\n}\n\n._noResults_12exf_74 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  padding: var(--axen-space-sm) var(--axen-field-padding-x);\n  font-size: var(--axen-font-size-sm);\n  color: var(--axen-color-text-secondary);\n  border: var(--axen-border-width) solid var(--axen-color-border);\n  border-top: none;\n  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);\n  background: var(--axen-color-bg);\n  z-index: var(--axen-z-dropdown);\n}\n\n/* ── Chip (used by multi) ────────────────────── */\n._chipWrap_12exf_90 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--axen-space-xs);\n  padding: var(--axen-space-xs);\n}\n\n._chip_12exf_90 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--axen-space-xs);\n  padding: 2px 8px;\n  font-size: var(--axen-font-size-xs);\n  color: var(--axen-color-text);\n  background-color: var(--axen-color-primary-light);\n  border-radius: var(--axen-border-radius-pill);\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._chipRemove_12exf_112 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--axen-color-text-secondary);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n._chipRemove_12exf_112:hover {\n  background: rgba(0, 0, 0, 0.08);\n  color: var(--axen-color-text);\n}\n\n._chipRemove_12exf_112:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n}\n\n/* ── Ghost text (predict) ────────────────────── */\n._predictWrap_12exf_138 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  /* Take on the input visual appearance so the inner <input>\n     can have a transparent bg and the ghost text shows through */\n  background-color: var(--axen-color-input-bg, var(--axen-color-bg, #ffffff));\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius, 8px);\n  transition:\n    border-color var(--axen-transition-fast, 150ms ease),\n    box-shadow var(--axen-transition-fast, 150ms ease);\n}\n\n._predictWrap_12exf_138:hover {\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._predictWrap_12exf_138:focus-within {\n  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));\n  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));\n}\n\n/* Inner input transparent so ghost text shows through */\n._predictInput_12exf_162 {\n  background: transparent;\n  border-color: transparent;\n  box-shadow: none;\n}\n\n._predictInput_12exf_162:hover,\n._predictInput_12exf_162:focus {\n  border-color: transparent;\n  box-shadow: none;\n}\n\n._predictWrapError_12exf_174 {\n  border-color: var(--axen-color-error, #d32f2f);\n}\n\n._predictWrapError_12exf_174:focus-within {\n  border-color: var(--axen-color-error, #d32f2f);\n  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);\n}\n\n._ghostText_12exf_183 {\n  position: absolute;\n  /* Offset by the input's transparent border so text aligns exactly */\n  top: var(--axen-border-width, 1px);\n  left: var(--axen-border-width, 1px);\n  right: var(--axen-border-width, 1px);\n  bottom: var(--axen-border-width, 1px);\n  display: flex;\n  align-items: center;\n  padding: var(--axen-field-padding-y, 0.5rem) var(--axen-field-padding-x, 0.75rem);\n  color: var(--axen-color-text-disabled);\n  font-family: var(--axen-font-family);\n  font-size: var(--axen-font-size-md);\n  line-height: var(--axen-line-height, 1.5);\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n._ghostTextWithIcon_12exf_202 {\n  padding-left: 2.5rem;\n}\n\n._ghostHidden_12exf_206 {\n  visibility: hidden;\n  position: absolute;\n  white-space: pre;\n  font-family: var(--axen-font-family);\n  font-size: var(--axen-font-size-md);\n}\n\n/* ── Mobile adjustments ──────────────────────── */\n@media (max-width: 599px) {\n  ._dropdown_12exf_32 {\n    max-height: 200px;\n  }\n\n  ._option_12exf_50 {\n    min-height: 48px;\n    padding: var(--axen-space-sm) var(--axen-space-md);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const inputWrap = "_inputWrap_1hzxx_1";
-const spinner = "_spinner_1hzxx_7";
-const dropdown = "_dropdown_1hzxx_32";
-const option = "_option_1hzxx_48";
-const optionActive = "_optionActive_1hzxx_63";
-const optionDisabled = "_optionDisabled_1hzxx_67";
-const noResults = "_noResults_1hzxx_72";
-const chipWrap = "_chipWrap_1hzxx_83";
-const chip = "_chip_1hzxx_83";
-const chipRemove = "_chipRemove_1hzxx_105";
-const predictWrap = "_predictWrap_1hzxx_131";
-const ghostText = "_ghostText_1hzxx_137";
-const ghostHidden = "_ghostHidden_1hzxx_150";
+const inputWrap = "_inputWrap_12exf_1";
+const spinner = "_spinner_12exf_7";
+const dropdown = "_dropdown_12exf_32";
+const option = "_option_12exf_50";
+const optionActive = "_optionActive_12exf_65";
+const optionDisabled = "_optionDisabled_12exf_69";
+const noResults = "_noResults_12exf_74";
+const chipWrap = "_chipWrap_12exf_90";
+const chip = "_chip_12exf_90";
+const chipRemove = "_chipRemove_12exf_112";
+const predictWrap = "_predictWrap_12exf_138";
+const predictInput = "_predictInput_12exf_162";
+const predictWrapError = "_predictWrapError_12exf_174";
+const ghostText = "_ghostText_12exf_183";
+const ghostTextWithIcon = "_ghostTextWithIcon_12exf_202";
+const ghostHidden = "_ghostHidden_12exf_206";
 const localStyles = {
   inputWrap,
   spinner,
@@ -25,7 +40,10 @@ const localStyles = {
   chip,
   chipRemove,
   predictWrap,
+  predictInput,
+  predictWrapError,
   ghostText,
+  ghostTextWithIcon,
   ghostHidden
 };
 exports.chip = chip;
@@ -35,10 +53,13 @@ exports.default = localStyles;
 exports.dropdown = dropdown;
 exports.ghostHidden = ghostHidden;
 exports.ghostText = ghostText;
+exports.ghostTextWithIcon = ghostTextWithIcon;
 exports.inputWrap = inputWrap;
 exports.noResults = noResults;
 exports.option = option;
 exports.optionActive = optionActive;
 exports.optionDisabled = optionDisabled;
+exports.predictInput = predictInput;
 exports.predictWrap = predictWrap;
+exports.predictWrapError = predictWrapError;
 exports.spinner = spinner;

package/dist/fields/AutocompleteField/AutocompleteField.module.css.js

@@ -1,16 +1,31 @@
-const inputWrap = "_inputWrap_1hzxx_1";
-const spinner = "_spinner_1hzxx_7";
-const dropdown = "_dropdown_1hzxx_32";
-const option = "_option_1hzxx_48";
-const optionActive = "_optionActive_1hzxx_63";
-const optionDisabled = "_optionDisabled_1hzxx_67";
-const noResults = "_noResults_1hzxx_72";
-const chipWrap = "_chipWrap_1hzxx_83";
-const chip = "_chip_1hzxx_83";
-const chipRemove = "_chipRemove_1hzxx_105";
-const predictWrap = "_predictWrap_1hzxx_131";
-const ghostText = "_ghostText_1hzxx_137";
-const ghostHidden = "_ghostHidden_1hzxx_150";
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._inputWrap_12exf_1 {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n._spinner_12exf_7 {\n  position: absolute;\n  right: 0.75rem;\n  width: 16px;\n  height: 16px;\n  border: 2px solid var(--axen-color-border);\n  border-top-color: var(--axen-color-primary);\n  border-radius: 50%;\n  animation: _spin_12exf_7 0.6s linear infinite;\n}\n\n@keyframes _spin_12exf_7 {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  ._spinner_12exf_7 {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n/* ── Dropdown ────────────────────────────────── */\n._dropdown_12exf_32 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown);\n  width: 100%;\n  max-height: 240px;\n  margin: 0;\n  padding: var(--axen-space-xs) 0;\n  list-style: none;\n  overflow-y: auto;\n  background: var(--axen-color-bg);\n  border: var(--axen-border-width) solid var(--axen-color-border);\n  border-top: none;\n  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n._option_12exf_50 {\n  display: flex;\n  align-items: center;\n  padding: var(--axen-space-sm) var(--axen-field-padding-x);\n  font-size: var(--axen-font-size-md);\n  color: var(--axen-color-text);\n  cursor: pointer;\n  min-height: var(--axen-field-min-height);\n  transition: background-color var(--axen-transition-fast);\n}\n\n._option_12exf_50:hover {\n  background-color: var(--axen-color-bg-hover);\n}\n\n._optionActive_12exf_65 {\n  background-color: var(--axen-color-primary-light);\n}\n\n._optionDisabled_12exf_69 {\n  color: var(--axen-color-text-disabled);\n  cursor: not-allowed;\n}\n\n._noResults_12exf_74 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 100%;\n  padding: var(--axen-space-sm) var(--axen-field-padding-x);\n  font-size: var(--axen-font-size-sm);\n  color: var(--axen-color-text-secondary);\n  border: var(--axen-border-width) solid var(--axen-color-border);\n  border-top: none;\n  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);\n  background: var(--axen-color-bg);\n  z-index: var(--axen-z-dropdown);\n}\n\n/* ── Chip (used by multi) ────────────────────── */\n._chipWrap_12exf_90 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--axen-space-xs);\n  padding: var(--axen-space-xs);\n}\n\n._chip_12exf_90 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--axen-space-xs);\n  padding: 2px 8px;\n  font-size: var(--axen-font-size-xs);\n  color: var(--axen-color-text);\n  background-color: var(--axen-color-primary-light);\n  border-radius: var(--axen-border-radius-pill);\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n._chipRemove_12exf_112 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--axen-color-text-secondary);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n._chipRemove_12exf_112:hover {\n  background: rgba(0, 0, 0, 0.08);\n  color: var(--axen-color-text);\n}\n\n._chipRemove_12exf_112:focus-visible {\n  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);\n}\n\n/* ── Ghost text (predict) ────────────────────── */\n._predictWrap_12exf_138 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  /* Take on the input visual appearance so the inner <input>\n     can have a transparent bg and the ghost text shows through */\n  background-color: var(--axen-color-input-bg, var(--axen-color-bg, #ffffff));\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius, 8px);\n  transition:\n    border-color var(--axen-transition-fast, 150ms ease),\n    box-shadow var(--axen-transition-fast, 150ms ease);\n}\n\n._predictWrap_12exf_138:hover {\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._predictWrap_12exf_138:focus-within {\n  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));\n  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));\n}\n\n/* Inner input transparent so ghost text shows through */\n._predictInput_12exf_162 {\n  background: transparent;\n  border-color: transparent;\n  box-shadow: none;\n}\n\n._predictInput_12exf_162:hover,\n._predictInput_12exf_162:focus {\n  border-color: transparent;\n  box-shadow: none;\n}\n\n._predictWrapError_12exf_174 {\n  border-color: var(--axen-color-error, #d32f2f);\n}\n\n._predictWrapError_12exf_174:focus-within {\n  border-color: var(--axen-color-error, #d32f2f);\n  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);\n}\n\n._ghostText_12exf_183 {\n  position: absolute;\n  /* Offset by the input's transparent border so text aligns exactly */\n  top: var(--axen-border-width, 1px);\n  left: var(--axen-border-width, 1px);\n  right: var(--axen-border-width, 1px);\n  bottom: var(--axen-border-width, 1px);\n  display: flex;\n  align-items: center;\n  padding: var(--axen-field-padding-y, 0.5rem) var(--axen-field-padding-x, 0.75rem);\n  color: var(--axen-color-text-disabled);\n  font-family: var(--axen-font-family);\n  font-size: var(--axen-font-size-md);\n  line-height: var(--axen-line-height, 1.5);\n  pointer-events: none;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n._ghostTextWithIcon_12exf_202 {\n  padding-left: 2.5rem;\n}\n\n._ghostHidden_12exf_206 {\n  visibility: hidden;\n  position: absolute;\n  white-space: pre;\n  font-family: var(--axen-font-family);\n  font-size: var(--axen-font-size-md);\n}\n\n/* ── Mobile adjustments ──────────────────────── */\n@media (max-width: 599px) {\n  ._dropdown_12exf_32 {\n    max-height: 200px;\n  }\n\n  ._option_12exf_50 {\n    min-height: 48px;\n    padding: var(--axen-space-sm) var(--axen-space-md);\n  }\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const inputWrap = "_inputWrap_12exf_1";
+const spinner = "_spinner_12exf_7";
+const dropdown = "_dropdown_12exf_32";
+const option = "_option_12exf_50";
+const optionActive = "_optionActive_12exf_65";
+const optionDisabled = "_optionDisabled_12exf_69";
+const noResults = "_noResults_12exf_74";
+const chipWrap = "_chipWrap_12exf_90";
+const chip = "_chip_12exf_90";
+const chipRemove = "_chipRemove_12exf_112";
+const predictWrap = "_predictWrap_12exf_138";
+const predictInput = "_predictInput_12exf_162";
+const predictWrapError = "_predictWrapError_12exf_174";
+const ghostText = "_ghostText_12exf_183";
+const ghostTextWithIcon = "_ghostTextWithIcon_12exf_202";
+const ghostHidden = "_ghostHidden_12exf_206";
 const localStyles = {
   inputWrap,
   spinner,
@@ -23,7 +38,10 @@ const localStyles = {
   chip,
   chipRemove,
   predictWrap,
+  predictInput,
+  predictWrapError,
   ghostText,
+  ghostTextWithIcon,
   ghostHidden
 };
 export {
@@ -34,11 +52,14 @@ export {
   dropdown,
   ghostHidden,
   ghostText,
+  ghostTextWithIcon,
   inputWrap,
   noResults,
   option,
   optionActive,
   optionDisabled,
+  predictInput,
   predictWrap,
+  predictWrapError,
   spinner
 };

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.cjs

@@ -190,99 +190,101 @@ function AutocompleteMultiField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
-        style: { height: "auto", padding: 0 },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.chipWrap, children: [
-          resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: fieldBase_module.default.fieldIcon,
-              style: { position: "static", transform: "none", flexShrink: 0 },
-              children: resolvedIcon
-            }
-          ),
-          selectedValues.map((val) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AutocompleteField_module.default.chip, children: [
-            resolveLabel(val),
-            !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.inputWrap, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError),
+          style: { height: "auto", padding: 0 },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AutocompleteField_module.default.chipWrap, children: [
+            resolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
               {
-                type: "button",
-                className: AutocompleteField_module.default.chipRemove,
-                onClick: () => removeValue(val),
-                "aria-label": `Remove ${resolveLabel(val)}`,
-                children: "×"
+                className: fieldBase_module.default.fieldIcon,
+                style: { position: "static", transform: "none", flexShrink: 0 },
+                children: resolvedIcon
               }
-            )
-          ] }, val)),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              ...aria,
-              type: "text",
-              value: inputText,
-              onChange: handleInputChange,
-              onKeyDown: handleKeyDown,
-              onBlur: handleBlur,
-              onFocus: () => {
-                doSearch(inputText);
-                setIsOpen(true);
-              },
-              placeholder: selectedValues.length === 0 ? placeholder : "",
-              disabled,
-              readOnly,
-              role: "combobox",
-              "aria-expanded": isOpen,
-              "aria-controls": listboxId,
-              "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
-              "aria-autocomplete": "list",
-              autoComplete: "off",
-              style: {
-                border: "none",
-                outline: "none",
-                flex: 1,
-                minWidth: "60px",
-                padding: "var(--axen-space-xs)",
-                background: "transparent"
+            ),
+            selectedValues.map((val) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: AutocompleteField_module.default.chip, children: [
+              resolveLabel(val),
+              !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: AutocompleteField_module.default.chipRemove,
+                  onClick: () => removeValue(val),
+                  "aria-label": `Remove ${resolveLabel(val)}`,
+                  children: "×"
+                }
+              )
+            ] }, val)),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...aria,
+                type: "text",
+                value: inputText,
+                onChange: handleInputChange,
+                onKeyDown: handleKeyDown,
+                onBlur: handleBlur,
+                onFocus: () => {
+                  doSearch(inputText);
+                  setIsOpen(true);
+                },
+                placeholder: selectedValues.length === 0 ? placeholder : "",
+                disabled,
+                readOnly,
+                role: "combobox",
+                "aria-expanded": isOpen,
+                "aria-controls": listboxId,
+                "aria-activedescendant": activeIndex >= 0 ? `${name}-opt-${activeIndex}` : void 0,
+                "aria-autocomplete": "list",
+                autoComplete: "off",
+                style: {
+                  border: "none",
+                  outline: "none",
+                  flex: 1,
+                  minWidth: "60px",
+                  padding: "var(--axen-space-xs)",
+                  background: "transparent"
+                }
               }
-            }
-          ),
-          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })
-        ] })
-      }
-    ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: listboxId,
-        role: "listbox",
-        className: AutocompleteField_module.default.dropdown,
-        "aria-multiselectable": "true",
-        children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            id: `${name}-opt-${i}`,
-            role: "option",
-            tabIndex: -1,
-            "aria-selected": i === activeIndex,
-            "aria-disabled": opt.disabled,
-            className: fieldUtils.cx(
-              AutocompleteField_module.default.option,
-              i === activeIndex && AutocompleteField_module.default.optionActive,
-              opt.disabled && AutocompleteField_module.default.optionDisabled
             ),
-            onMouseDown: (e) => {
-              e.preventDefault();
-              if (!opt.disabled) selectOption(opt);
+            loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: AutocompleteField_module.default.spinner, "aria-hidden": "true" })
+          ] })
+        }
+      ),
+      isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: listboxId,
+          role: "listbox",
+          className: AutocompleteField_module.default.dropdown,
+          "aria-multiselectable": "true",
+          children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: `${name}-opt-${i}`,
+              role: "option",
+              tabIndex: -1,
+              "aria-selected": i === activeIndex,
+              "aria-disabled": opt.disabled,
+              className: fieldUtils.cx(
+                AutocompleteField_module.default.option,
+                i === activeIndex && AutocompleteField_module.default.optionActive,
+                opt.disabled && AutocompleteField_module.default.optionDisabled
+              ),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                if (!opt.disabled) selectOption(opt);
+              },
+              children: getOptionLabel(opt)
             },
-            children: getOptionLabel(opt)
-          },
-          opt.value
-        ))
-      }
-    ),
+            opt.value
+          ))
+        }
+      )
+    ] }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {

package/dist/fields/AutocompleteMultiField/AutocompleteMultiField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMultiField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteMultiField/AutocompleteMultiField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQ3E,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CA+RA"}
+{"version":3,"file":"AutocompleteMultiField.d.ts","sourceRoot":"","sources":["../../../src/fields/AutocompleteMultiField/AutocompleteMultiField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQ3E,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,KAAK,EACL,QAAQ,EAAE,SAAS,EACnB,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EAAE,aAAa,EACtB,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,IAAI,GACL,EAAE,mBAAmB,GAAG;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,2CAiSA"}