@axenstudio/axen-form 0.1.3 → 0.1.5

package/dist/fields/TimeField/TimeField.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const dateUtils = require("../../core/dateUtils.cjs");
 const fieldBase_module = require("../fieldBase.module.css.cjs");
 const fieldUtils = require("../fieldUtils.cjs");
+const iconUtils = require("../iconUtils.cjs");
 function TimeField({
   name,
   value,
@@ -17,15 +18,33 @@ function TimeField({
   readOnly,
   required,
   locale,
-  ampm
+  ampm,
+  icon
 }) {
   const aria = fieldUtils.ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? dateUtils.getDefaultLocale();
+  const resolvedIcon = iconUtils.resolveFieldIcon(icon, "time");
   const timeValue = typeof value === "string" ? value : "";
   const displayText = timeValue ? dateUtils.formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ...aria,
+      type: "time",
+      name,
+      value: timeValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      lang: resolvedLocale,
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -36,22 +55,10 @@ function TimeField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...aria,
-        type: "time",
-        name,
-        value: timeValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        lang: resolvedLocale,
-        className: fieldUtils.cx(fieldBase_module.default.input, error && fieldBase_module.default.inputError)
-      }
-    ),
+    resolvedIcon ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.inputIconWrapper, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: fieldBase_module.default.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsxRuntime.jsx(
       "span",

package/dist/fields/TimeField/TimeField.d.ts

@@ -1,5 +1,5 @@
 import { FieldComponentProps } from '../../types';
-export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, }: Readonly<FieldComponentProps & {
+export declare function TimeField({ name, value, onChange, onBlur, error, helperText, label, placeholder, disabled, readOnly, required, locale, ampm, icon, }: Readonly<FieldComponentProps & {
     locale?: string;
     ampm?: boolean;
 }>): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CAuDrE"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/TimeField/TimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE,QAAQ,CAAC,mBAAmB,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,2CA+DrE"}

package/dist/fields/TimeField/TimeField.js

@@ -1,7 +1,8 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { formatTimeLocale, getDefaultLocale } from "../../core/dateUtils.js";
 import styles from "../fieldBase.module.css.js";
 import { ariaProps, cx, labelId, helperId } from "../fieldUtils.js";
+import { resolveFieldIcon } from "../iconUtils.js";
 function TimeField({
   name,
   value,
@@ -15,15 +16,33 @@ function TimeField({
   readOnly,
   required,
   locale,
-  ampm
+  ampm,
+  icon
 }) {
   const aria = ariaProps(name, { error, helperText, required, label });
   const resolvedLocale = locale ?? getDefaultLocale();
+  const resolvedIcon = resolveFieldIcon(icon, "time");
   const timeValue = typeof value === "string" ? value : "";
   const displayText = timeValue ? formatTimeLocale(timeValue, resolvedLocale, ampm) : "";
   const handleChange = (e) => {
     onChange(e);
   };
+  const inputEl = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...aria,
+      type: "time",
+      name,
+      value: timeValue,
+      onChange: handleChange,
+      onBlur,
+      placeholder,
+      disabled,
+      readOnly,
+      lang: resolvedLocale,
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+    }
+  );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
     label && /* @__PURE__ */ jsx(
       "label",
@@ -34,22 +53,10 @@ function TimeField({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...aria,
-        type: "time",
-        name,
-        value: timeValue,
-        onChange: handleChange,
-        onBlur,
-        placeholder,
-        disabled,
-        readOnly,
-        lang: resolvedLocale,
-        className: cx(styles.input, error && styles.inputError)
-      }
-    ),
+    resolvedIcon ? /* @__PURE__ */ jsxs("div", { className: styles.inputIconWrapper, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.fieldIcon, children: resolvedIcon }),
+      inputEl
+    ] }) : inputEl,
     displayText && /* @__PURE__ */ jsx("span", { className: styles.helperText, "aria-hidden": "true", children: displayText }),
     helperText && /* @__PURE__ */ jsx(
       "span",

package/dist/fields/defaultPlaceholders.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const defaultPlaceholders = {
+  text: "Enter text...",
+  email: "user@example.com",
+  password: "Enter password...",
+  // NOSONAR  — avoid SonarQube flagging "password" as a hardcoded secret
+  phone: "+1 (555) 000-0000",
+  textarea: "Enter description...",
+  number: "0",
+  currency: "0.00",
+  date: "Select date",
+  time: "Select time",
+  datetime: "Select date and time",
+  autocomplete: "Search...",
+  "autocomplete-predict": "Search...",
+  "autocomplete-multi": "Search..."
+};
+exports.defaultPlaceholders = defaultPlaceholders;

package/dist/fields/defaultPlaceholders.d.ts

@@ -0,0 +1,3 @@
+import { BuiltInFieldType } from '../types';
+export declare const defaultPlaceholders: Partial<Record<BuiltInFieldType, string>>;
+//# sourceMappingURL=defaultPlaceholders.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPlaceholders.d.ts","sourceRoot":"","sources":["../../src/fields/defaultPlaceholders.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAOjD,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAczE,CAAC"}

package/dist/fields/defaultPlaceholders.js

@@ -0,0 +1,19 @@
+const defaultPlaceholders = {
+  text: "Enter text...",
+  email: "user@example.com",
+  password: "Enter password...",
+  // NOSONAR  — avoid SonarQube flagging "password" as a hardcoded secret
+  phone: "+1 (555) 000-0000",
+  textarea: "Enter description...",
+  number: "0",
+  currency: "0.00",
+  date: "Select date",
+  time: "Select time",
+  datetime: "Select date and time",
+  autocomplete: "Search...",
+  "autocomplete-predict": "Search...",
+  "autocomplete-multi": "Search..."
+};
+export {
+  defaultPlaceholders
+};

package/dist/fields/fieldBase.module.css

@@ -5,104 +5,116 @@
    ═══════════════════════════════════════════════ */
 
 /* ── Field Wrapper ───────────────────────────── */
-._wrapper_7lsag_8 {
+._wrapper_1w6h8_8 {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 /* ── Label ───────────────────────────────────── */
-._label_7lsag_15 {
+._label_1w6h8_15 {
   display: block;
-  font-size: var(--axen-font-size-sm);
-  font-weight: var(--axen-font-weight-medium);
-  color: var(--axen-color-text);
-  margin-bottom: var(--axen-label-margin-bottom);
-  line-height: var(--axen-line-height);
+  font-size: var(--axen-font-size-sm, 0.875rem);
+  font-weight: var(--axen-font-weight-medium, 500);
+  color: var(--axen-color-label, var(--axen-color-text, #1a1a1a));
+  margin-bottom: var(--axen-label-margin-bottom, 0.375rem);
+  line-height: var(--axen-line-height, 1.5);
+  letter-spacing: 0.01em;
 }
 
-._labelRequired_7lsag_24::after {
+._labelRequired_1w6h8_25::after {
   content: ' *';
-  color: var(--axen-color-error);
+  color: var(--axen-color-error, #d32f2f);
+  font-weight: var(--axen-font-weight-bold, 600);
 }
 
 /* ── Input Base ──────────────────────────────── */
-._input_7lsag_30 {
+._input_1w6h8_32 {
   display: block;
   width: 100%;
-  height: var(--axen-field-height);
-  min-height: var(--axen-field-min-height);
-  padding: var(--axen-field-padding-y) var(--axen-field-padding-x);
-  font-family: var(--axen-font-family);
-  font-size: var(--axen-font-size-md);
-  line-height: var(--axen-line-height);
-  color: var(--axen-color-text);
-  background-color: var(--axen-color-bg);
-  border: var(--axen-border-width) solid var(--axen-color-border);
-  border-radius: var(--axen-border-radius);
+  height: var(--axen-field-height, 2.75rem);
+  min-height: var(--axen-field-min-height, 44px);
+  padding: var(--axen-field-padding-y, 0.5rem) var(--axen-field-padding-x, 0.75rem);
+  font-family: var(
+    --axen-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  font-size: var(--axen-font-size-md, 1rem);
+  line-height: var(--axen-line-height, 1.5);
+  color: var(--axen-color-text, #1a1a1a);
+  background-color: var(--axen-color-input-bg, var(--axen-color-bg, #ffffff));
+  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);
+  border-radius: var(--axen-border-radius, 8px);
   transition:
-    border-color var(--axen-transition-fast),
-    box-shadow var(--axen-transition-fast);
+    border-color var(--axen-transition-fast, 150ms ease),
+    box-shadow var(--axen-transition-fast, 150ms ease);
   outline: none;
 }
 
-._input_7lsag_30::placeholder {
-  color: var(--axen-color-text-disabled);
+._input_1w6h8_32::placeholder {
+  color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._input_7lsag_30:hover:not(:disabled):not(:read-only) {
-  border-color: var(--axen-color-border-hover);
+._input_1w6h8_32:hover:not(:disabled):not(:read-only) {
+  border-color: var(--axen-color-border-hover, #888888);
 }
 
-/* Focus-visible ring (A11y: keyboard-only focus indicator) */
-._input_7lsag_30:focus-visible {
-  border-color: var(--axen-color-border-focus);
-  box-shadow: var(--axen-shadow-focus);
+/* Focus ring (keyboard + mouse) */
+._input_1w6h8_32:focus {
+  border-color: var(--axen-color-border-focus, var(--axen-color-primary, #1976d2));
+  box-shadow: var(--axen-shadow-focus, 0 0 0 2px rgba(25, 118, 210, 0.5));
   outline: none;
 }
 
-._input_7lsag_30:disabled {
-  background-color: var(--axen-color-bg-disabled);
-  color: var(--axen-color-text-disabled);
+._input_1w6h8_32:disabled {
+  background-color: var(--axen-color-bg-disabled, #f5f5f5);
+  color: var(--axen-color-text-disabled, #9e9e9e);
   cursor: not-allowed;
 }
 
-._input_7lsag_30:read-only {
-  background-color: var(--axen-color-bg-disabled);
+._input_1w6h8_32:read-only {
+  background-color: var(--axen-color-bg-disabled, #f5f5f5);
 }
 
 /* ── Error State ─────────────────────────────── */
-._inputError_7lsag_75 {
-  border-color: var(--axen-color-error);
+._inputError_1w6h8_86 {
+  border-color: var(--axen-color-error, #d32f2f);
 }
 
-._inputError_7lsag_75:focus-visible {
-  border-color: var(--axen-color-error);
-  box-shadow: 0 0 0 var(--axen-focus-ring-width) rgba(211, 47, 47, 0.3);
+._inputError_1w6h8_86:focus {
+  border-color: var(--axen-color-error, #d32f2f);
+  box-shadow: 0 0 0 var(--axen-focus-ring-width, 2px) rgba(211, 47, 47, 0.3);
 }
 
 /* ── Helper Text ─────────────────────────────── */
-._helperText_7lsag_85 {
+._helperText_1w6h8_96 {
   display: block;
-  font-size: var(--axen-font-size-xs);
-  color: var(--axen-color-text-secondary);
-  margin-top: var(--axen-helper-margin-top);
-  line-height: var(--axen-line-height);
+  font-size: var(--axen-font-size-xs, 0.75rem);
+  color: var(--axen-color-text-secondary, #666666);
+  margin-top: var(--axen-helper-margin-top, 0.25rem);
+  line-height: var(--axen-line-height, 1.5);
 }
 
-._helperTextError_7lsag_93 {
-  color: var(--axen-color-error);
+._helperTextError_1w6h8_104 {
+  color: var(--axen-color-error, #d32f2f);
 }
 
 /* ── Textarea ────────────────────────────────── */
-._textarea_7lsag_98 {
+._textarea_1w6h8_109 {
   height: auto;
-  min-height: calc(var(--axen-field-min-height) * 2);
+  min-height: calc(var(--axen-field-min-height, 44px) * 2);
   resize: vertical;
+  padding-top: var(--axen-field-padding-x, 0.75rem);
 }
 
 /* ── Select ──────────────────────────────────── */
-._select_7lsag_105 {
+._select_1w6h8_117 {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -112,90 +124,121 @@
 }
 
 /* ── Input with prefix/suffix ────────────────── */
-._inputGroup_7lsag_115 {
+._inputGroup_1w6h8_127 {
   display: flex;
   align-items: stretch;
 }
 
-._inputPrefix_7lsag_120,
-._inputSuffix_7lsag_121 {
+/* ── Icon inside input ───────────────────────── */
+._inputIconWrapper_1w6h8_133 {
+  position: relative;
+}
+
+._fieldIcon_1w6h8_137 {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--axen-color-text-secondary, #666666);
+  pointer-events: none;
   display: flex;
   align-items: center;
-  padding: 0 var(--axen-space-sm);
-  font-size: var(--axen-font-size-sm);
-  color: var(--axen-color-text-secondary);
-  background-color: var(--axen-color-bg-hover);
-  border: var(--axen-border-width) solid var(--axen-color-border);
+  justify-content: center;
+  z-index: 1;
+}
+
+._inputWithIcon_1w6h8_152 {
+  padding-left: 2.5rem;
+}
+
+._inputPrefix_1w6h8_156,
+._inputSuffix_1w6h8_157 {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--axen-space-sm, 0.5rem);
+  font-size: var(--axen-font-size-sm, 0.875rem);
+  color: var(--axen-color-text-secondary, #666666);
+  background-color: var(--axen-color-bg-hover, #fafafa);
+  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #c4c4c4);
   white-space: nowrap;
 }
 
-._inputPrefix_7lsag_120 {
+._inputPrefix_1w6h8_156 {
   border-right: none;
-  border-radius: var(--axen-border-radius) 0 0 var(--axen-border-radius);
+  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
 }
 
-._inputSuffix_7lsag_121 {
+._inputSuffix_1w6h8_157 {
   border-left: none;
-  border-radius: 0 var(--axen-border-radius) var(--axen-border-radius) 0;
+  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
 }
 
-._inputGroupInput_7lsag_142 {
+._inputGroupInput_1w6h8_178 {
   border-radius: 0;
 }
 
-._inputPrefix_7lsag_120 + ._inputGroupInput_7lsag_142 {
+._inputPrefix_1w6h8_156 + ._inputGroupInput_1w6h8_178 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-._inputGroupInput_7lsag_142:has(+ ._inputSuffix_7lsag_121) {
+._inputGroupInput_1w6h8_178:has(+ ._inputSuffix_1w6h8_157) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_7lsag_157 {
+._inlineWrapper_1w6h8_193 {
   display: flex;
   align-items: center;
-  gap: var(--axen-space-sm);
-  min-height: var(--axen-field-min-height);
+  gap: var(--axen-space-sm, 0.5rem);
+  min-height: var(--axen-field-min-height, 44px);
   cursor: pointer;
 }
 
-._inlineWrapper_7lsag_157:has(:disabled) {
+._inlineWrapper_1w6h8_193:has(:disabled) {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-._inlineLabel_7lsag_170 {
-  font-size: var(--axen-font-size-md);
-  color: var(--axen-color-text);
+._inlineLabel_1w6h8_206 {
+  font-size: var(--axen-font-size-md, 1rem);
+  color: var(--axen-color-text, #1a1a1a);
   user-select: none;
 }
 
 /* ── Responsive: mobile touch targets ────────── */
 @media (max-width: 599px) {
-  ._input_7lsag_30 {
+  ._input_1w6h8_32 {
     font-size: 16px; /* Prevent iOS zoom on focus */
     min-height: 48px;
   }
 
-  ._inlineWrapper_7lsag_157 {
+  ._inlineWrapper_1w6h8_193 {
     min-height: 48px;
   }
 }
 
 /* ── High Contrast Mode ──────────────────────── */
 @media (prefers-contrast: more) {
-  ._input_7lsag_30 {
+  ._input_1w6h8_32 {
     border-width: 2px;
   }
 
-  ._inputError_7lsag_75 {
+  ._inputError_1w6h8_86 {
     border-width: 3px;
   }
 
-  ._helperTextError_7lsag_93 {
-    font-weight: var(--axen-font-weight-bold);
+  ._helperTextError_1w6h8_104 {
+    font-weight: var(--axen-font-weight-bold, 600);
+  }
+}
+
+/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
+@media (prefers-reduced-motion: reduce) {
+  ._input_1w6h8_32 {
+    transition: none;
   }
 }

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

@@ -1,20 +1,23 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_7lsag_8";
-const label = "_label_7lsag_15";
-const labelRequired = "_labelRequired_7lsag_24";
-const input = "_input_7lsag_30";
-const inputError = "_inputError_7lsag_75";
-const helperText = "_helperText_7lsag_85";
-const helperTextError = "_helperTextError_7lsag_93";
-const textarea = "_textarea_7lsag_98";
-const select = "_select_7lsag_105";
-const inputGroup = "_inputGroup_7lsag_115";
-const inputPrefix = "_inputPrefix_7lsag_120";
-const inputSuffix = "_inputSuffix_7lsag_121";
-const inputGroupInput = "_inputGroupInput_7lsag_142";
-const inlineWrapper = "_inlineWrapper_7lsag_157";
-const inlineLabel = "_inlineLabel_7lsag_170";
+const wrapper = "_wrapper_1w6h8_8";
+const label = "_label_1w6h8_15";
+const labelRequired = "_labelRequired_1w6h8_25";
+const input = "_input_1w6h8_32";
+const inputError = "_inputError_1w6h8_86";
+const helperText = "_helperText_1w6h8_96";
+const helperTextError = "_helperTextError_1w6h8_104";
+const textarea = "_textarea_1w6h8_109";
+const select = "_select_1w6h8_117";
+const inputGroup = "_inputGroup_1w6h8_127";
+const inputIconWrapper = "_inputIconWrapper_1w6h8_133";
+const fieldIcon = "_fieldIcon_1w6h8_137";
+const inputWithIcon = "_inputWithIcon_1w6h8_152";
+const inputPrefix = "_inputPrefix_1w6h8_156";
+const inputSuffix = "_inputSuffix_1w6h8_157";
+const inputGroupInput = "_inputGroupInput_1w6h8_178";
+const inlineWrapper = "_inlineWrapper_1w6h8_193";
+const inlineLabel = "_inlineLabel_1w6h8_206";
 const styles = {
   wrapper,
   label,
@@ -26,6 +29,9 @@ const styles = {
   textarea,
   select,
   inputGroup,
+  inputIconWrapper,
+  fieldIcon,
+  inputWithIcon,
   inputPrefix,
   inputSuffix,
   inputGroupInput,
@@ -33,6 +39,7 @@ const styles = {
   inlineLabel
 };
 exports.default = styles;
+exports.fieldIcon = fieldIcon;
 exports.helperText = helperText;
 exports.helperTextError = helperTextError;
 exports.inlineLabel = inlineLabel;
@@ -41,8 +48,10 @@ exports.input = input;
 exports.inputError = inputError;
 exports.inputGroup = inputGroup;
 exports.inputGroupInput = inputGroupInput;
+exports.inputIconWrapper = inputIconWrapper;
 exports.inputPrefix = inputPrefix;
 exports.inputSuffix = inputSuffix;
+exports.inputWithIcon = inputWithIcon;
 exports.label = label;
 exports.labelRequired = labelRequired;
 exports.select = select;

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

@@ -1,18 +1,21 @@
-const wrapper = "_wrapper_7lsag_8";
-const label = "_label_7lsag_15";
-const labelRequired = "_labelRequired_7lsag_24";
-const input = "_input_7lsag_30";
-const inputError = "_inputError_7lsag_75";
-const helperText = "_helperText_7lsag_85";
-const helperTextError = "_helperTextError_7lsag_93";
-const textarea = "_textarea_7lsag_98";
-const select = "_select_7lsag_105";
-const inputGroup = "_inputGroup_7lsag_115";
-const inputPrefix = "_inputPrefix_7lsag_120";
-const inputSuffix = "_inputSuffix_7lsag_121";
-const inputGroupInput = "_inputGroupInput_7lsag_142";
-const inlineWrapper = "_inlineWrapper_7lsag_157";
-const inlineLabel = "_inlineLabel_7lsag_170";
+const wrapper = "_wrapper_1w6h8_8";
+const label = "_label_1w6h8_15";
+const labelRequired = "_labelRequired_1w6h8_25";
+const input = "_input_1w6h8_32";
+const inputError = "_inputError_1w6h8_86";
+const helperText = "_helperText_1w6h8_96";
+const helperTextError = "_helperTextError_1w6h8_104";
+const textarea = "_textarea_1w6h8_109";
+const select = "_select_1w6h8_117";
+const inputGroup = "_inputGroup_1w6h8_127";
+const inputIconWrapper = "_inputIconWrapper_1w6h8_133";
+const fieldIcon = "_fieldIcon_1w6h8_137";
+const inputWithIcon = "_inputWithIcon_1w6h8_152";
+const inputPrefix = "_inputPrefix_1w6h8_156";
+const inputSuffix = "_inputSuffix_1w6h8_157";
+const inputGroupInput = "_inputGroupInput_1w6h8_178";
+const inlineWrapper = "_inlineWrapper_1w6h8_193";
+const inlineLabel = "_inlineLabel_1w6h8_206";
 const styles = {
   wrapper,
   label,
@@ -24,6 +27,9 @@ const styles = {
   textarea,
   select,
   inputGroup,
+  inputIconWrapper,
+  fieldIcon,
+  inputWithIcon,
   inputPrefix,
   inputSuffix,
   inputGroupInput,
@@ -32,6 +38,7 @@ const styles = {
 };
 export {
   styles as default,
+  fieldIcon,
   helperText,
   helperTextError,
   inlineLabel,
@@ -40,8 +47,10 @@ export {
   inputError,
   inputGroup,
   inputGroupInput,
+  inputIconWrapper,
   inputPrefix,
   inputSuffix,
+  inputWithIcon,
   label,
   labelRequired,
   select,

package/dist/fields/fieldUtils.d.ts

@@ -2,7 +2,7 @@
  * Field utility functions shared across all field components.
  */
 /** Compose CSS module class names — falsy values are filtered out */
-export declare function cx(...args: (string | false | null | undefined)[]): string;
+export declare function cx(...args: (string | false | 0 | 0n | null | undefined)[]): string;
 /** Build ARIA props for a field */
 export declare function ariaProps(name: string, options: {
     error?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"fieldUtils.d.ts","sourceRoot":"","sources":["../../src/fields/fieldUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,qEAAqE;AACrE,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAEzE;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE;IACP,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;;;;;EAYF;AAED,sCAAsC;AACtC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,gCAAgC;AAChC,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C"}
+{"version":3,"file":"fieldUtils.d.ts","sourceRoot":"","sources":["../../src/fields/fieldUtils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,qEAAqE;AACrE,wBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAElF;AAED,mCAAmC;AACnC,wBAAgB,SAAS,CACvB,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE;IACP,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;;;;;;EAYF;AAED,sCAAsC;AACtC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,gCAAgC;AAChC,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C"}