@axenstudio/axen-form 0.1.12 → 0.1.13

package/dist/fields/DateField/DateField.cjs

@@ -75,7 +75,7 @@ function DateField({
       min,
       max,
       lang: resolvedLocale,
-      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, !dateValue && fieldBase_module.default.inputPlaceholder, error && fieldBase_module.default.inputError)
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [

package/dist/fields/DateField/DateField.js

@@ -73,7 +73,7 @@ function DateField({
       min,
       max,
       lang: resolvedLocale,
-      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, !dateValue && styles.inputPlaceholder, error && styles.inputError)
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [

package/dist/fields/DateTimeField/DateTimeField.cjs

@@ -118,6 +118,7 @@ function DateTimeField({
         fieldBase_module.default.input,
         resolvedIcon && fieldBase_module.default.inputWithIcon,
         fieldBase_module.default.inputWithPicker,
+        !dtValue && fieldBase_module.default.inputPlaceholder,
         error && fieldBase_module.default.inputError
       )
     }

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CACT,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CACF,2CAyLA"}
+{"version":3,"file":"DateTimeField.d.ts","sourceRoot":"","sources":["../../../src/fields/DateTimeField/DateTimeField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,GAAG,EACH,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,WAAW,GACZ,EAAE,QAAQ,CACT,mBAAmB,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CACF,2CA0LA"}

package/dist/fields/DateTimeField/DateTimeField.js

@@ -116,6 +116,7 @@ function DateTimeField({
         styles.input,
         resolvedIcon && styles.inputWithIcon,
         styles.inputWithPicker,
+        !dtValue && styles.inputPlaceholder,
         error && styles.inputError
       )
     }

package/dist/fields/TimeField/TimeField.cjs

@@ -75,7 +75,7 @@ function TimeField({
       disabled,
       readOnly,
       lang: resolvedLocale,
-      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, error && fieldBase_module.default.inputError)
+      className: fieldUtils.cx(fieldBase_module.default.input, resolvedIcon && fieldBase_module.default.inputWithIcon, !timeValue && fieldBase_module.default.inputPlaceholder, error && fieldBase_module.default.inputError)
     }
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fieldBase_module.default.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [

package/dist/fields/TimeField/TimeField.js

@@ -73,7 +73,7 @@ function TimeField({
       disabled,
       readOnly,
       lang: resolvedLocale,
-      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, error && styles.inputError)
+      className: cx(styles.input, resolvedIcon && styles.inputWithIcon, !timeValue && styles.inputPlaceholder, error && styles.inputError)
     }
   );
   return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, ref: wrapperRef, style: { position: "relative" }, children: [

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

@@ -10,14 +10,14 @@
    ═══════════════════════════════════════════════ */
 
 /* ── Field Wrapper ───────────────────────────── */
-._wrapper_hrx0p_8 {
+._wrapper_1sk2v_8 {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 /* ── Label ───────────────────────────────────── */
-._label_hrx0p_15 {
+._label_1sk2v_15 {
   display: block;
   font-size: var(--axen-font-size-sm, 0.875rem);
   font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +27,14 @@
   letter-spacing: 0.01em;
 }
 
-._labelRequired_hrx0p_25::after {
+._labelRequired_1sk2v_25::after {
   content: ' *';
   color: var(--axen-color-error, #d32f2f);
   font-weight: var(--axen-font-weight-bold, 600);
 }
 
 /* ── Input Base ──────────────────────────────── */
-._input_hrx0p_32 {
+._input_1sk2v_32 {
   display: block;
   width: 100%;
   height: var(--axen-field-height, 2.75rem);
@@ -62,22 +62,22 @@
   outline: none;
 }
 
-._input_hrx0p_32::placeholder {
+._input_1sk2v_32::placeholder {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._input_hrx0p_32:hover:not(:disabled):not(:read-only) {
+._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
   border-color: var(--axen-color-border-hover, #888888);
 }
 
 /* Focus ring (keyboard + mouse) */
-._input_hrx0p_32:focus {
+._input_1sk2v_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_hrx0p_32:disabled {
+._input_1sk2v_32:disabled {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
   color: var(--axen-color-text-disabled, #9e9e9e);
   cursor: not-allowed;
@@ -86,35 +86,35 @@
 /* Scope :read-only to actual text inputs only.
    <select> and <div> match :read-only by default in modern browsers,
    which would incorrectly apply the disabled-looking background. */
-input._input_hrx0p_32:read-only,
-textarea._input_hrx0p_32:read-only {
+input._input_1sk2v_32:read-only,
+textarea._input_1sk2v_32:read-only {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
 }
 
 /* Hide native browser picker icons for date/time/datetime inputs.
    We provide our own custom pickers via DatePicker / TimePicker components,
    so the native chromium dark-themed popups must not appear. */
-._input_hrx0p_32::-webkit-calendar-picker-indicator {
+._input_1sk2v_32::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
 
-._input_hrx0p_32::-webkit-date-and-time-value {
+._input_1sk2v_32::-webkit-date-and-time-value {
   text-align: left;
 }
 
 /* ── Error State ─────────────────────────────── */
-._inputError_hrx0p_102 {
+._inputError_1sk2v_102 {
   border-color: var(--axen-color-error, #d32f2f);
 }
 
-._inputError_hrx0p_102:focus {
+._inputError_1sk2v_102: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_hrx0p_112 {
+._helperText_1sk2v_112 {
   display: block;
   font-size: var(--axen-font-size-xs, 0.75rem);
   color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +122,12 @@ textarea._input_hrx0p_32:read-only {
   line-height: var(--axen-line-height, 1.5);
 }
 
-._helperTextError_hrx0p_120 {
+._helperTextError_1sk2v_120 {
   color: var(--axen-color-error, #d32f2f);
 }
 
 /* ── Textarea ────────────────────────────────── */
-._textarea_hrx0p_125 {
+._textarea_1sk2v_125 {
   height: auto;
   min-height: calc(var(--axen-field-min-height, 44px) * 2);
   resize: vertical;
@@ -135,7 +135,7 @@ textarea._input_hrx0p_32:read-only {
 }
 
 /* ── Select ──────────────────────────────────── */
-._select_hrx0p_133 {
+._select_1sk2v_133 {
   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;
@@ -144,7 +144,11 @@ textarea._input_hrx0p_32:read-only {
   cursor: pointer;
 }
 
-._selectPlaceholder_hrx0p_142 {
+._selectPlaceholder_1sk2v_142 {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+._inputPlaceholder_1sk2v_146 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
@@ -152,17 +156,17 @@ textarea._input_hrx0p_32:read-only {
    See tokens.css for color-scheme: light declaration. */
 
 /* ── Input with prefix/suffix ────────────────── */
-._inputGroup_hrx0p_150 {
+._inputGroup_1sk2v_154 {
   display: flex;
   align-items: stretch;
 }
 
 /* ── Icon inside input ───────────────────────── */
-._inputIconWrapper_hrx0p_156 {
+._inputIconWrapper_1sk2v_160 {
   position: relative;
 }
 
-._fieldIcon_hrx0p_160 {
+._fieldIcon_1sk2v_164 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -178,7 +182,7 @@ textarea._input_hrx0p_32:read-only {
 }
 
 /* Clickable variant for icons that open pickers */
-._fieldIconClickable_hrx0p_176 {
+._fieldIconClickable_1sk2v_180 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -197,18 +201,18 @@ textarea._input_hrx0p_32:read-only {
   margin: 0;
 }
 
-._fieldIconClickable_hrx0p_176:hover {
+._fieldIconClickable_1sk2v_180:hover {
   color: var(--axen-color-primary, #1976d2);
 }
 
-._fieldIconClickable_hrx0p_176:focus-visible {
+._fieldIconClickable_1sk2v_180:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
   border-radius: var(--axen-border-radius-sm, 4px);
 }
 
 /* Right-side picker trigger button inside inputIconWrapper */
-._pickerTrigger_hrx0p_206 {
+._pickerTrigger_1sk2v_210 {
   position: absolute;
   right: 0.5rem;
   top: 50%;
@@ -227,27 +231,27 @@ textarea._input_hrx0p_32:read-only {
   z-index: 1;
 }
 
-._pickerTrigger_hrx0p_206:hover {
+._pickerTrigger_1sk2v_210:hover {
   color: var(--axen-color-primary, #1976d2);
   background-color: var(--axen-color-bg-hover, #fafafa);
 }
 
-._pickerTrigger_hrx0p_206:focus-visible {
+._pickerTrigger_1sk2v_210:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
 }
 
 /* Input with right-side picker trigger needs extra right padding */
-._inputWithPicker_hrx0p_236 {
+._inputWithPicker_1sk2v_240 {
   padding-right: 2.25rem;
 }
 
-._inputWithIcon_hrx0p_240 {
+._inputWithIcon_1sk2v_244 {
   padding-left: 2.5rem;
 }
 
-._inputPrefix_hrx0p_244,
-._inputSuffix_hrx0p_245 {
+._inputPrefix_1sk2v_248,
+._inputSuffix_1sk2v_249 {
   display: flex;
   align-items: center;
   padding: 0 var(--axen-space-sm, 0.5rem);
@@ -258,32 +262,32 @@ textarea._input_hrx0p_32:read-only {
   white-space: nowrap;
 }
 
-._inputPrefix_hrx0p_244 {
+._inputPrefix_1sk2v_248 {
   border-right: none;
   border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
 }
 
-._inputSuffix_hrx0p_245 {
+._inputSuffix_1sk2v_249 {
   border-left: none;
   border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
 }
 
-._inputGroupInput_hrx0p_266 {
+._inputGroupInput_1sk2v_270 {
   border-radius: 0;
 }
 
-._inputPrefix_hrx0p_244 + ._inputGroupInput_hrx0p_266 {
+._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-._inputGroupInput_hrx0p_266:has(+ ._inputSuffix_hrx0p_245) {
+._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_hrx0p_281 {
+._inlineWrapper_1sk2v_285 {
   display: flex;
   align-items: center;
   gap: var(--axen-space-sm, 0.5rem);
@@ -291,12 +295,12 @@ textarea._input_hrx0p_32:read-only {
   cursor: pointer;
 }
 
-._inlineWrapper_hrx0p_281:has(:disabled) {
+._inlineWrapper_1sk2v_285:has(:disabled) {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-._inlineLabel_hrx0p_294 {
+._inlineLabel_1sk2v_298 {
   font-size: var(--axen-font-size-md, 1rem);
   color: var(--axen-color-text, #1a1a1a);
   user-select: none;
@@ -304,34 +308,34 @@ textarea._input_hrx0p_32:read-only {
 
 /* ── Responsive: mobile touch targets ────────── */
 @media (max-width: 599px) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     font-size: 16px; /* Prevent iOS zoom on focus */
     min-height: 48px;
   }
 
-  ._inlineWrapper_hrx0p_281 {
+  ._inlineWrapper_1sk2v_285 {
     min-height: 48px;
   }
 }
 
 /* ── High Contrast Mode ──────────────────────── */
 @media (prefers-contrast: more) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     border-width: 2px;
   }
 
-  ._inputError_hrx0p_102 {
+  ._inputError_1sk2v_102 {
     border-width: 3px;
   }
 
-  ._helperTextError_hrx0p_120 {
+  ._helperTextError_1sk2v_120 {
     font-weight: var(--axen-font-weight-bold, 600);
   }
 }
 
 /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
 @media (prefers-reduced-motion: reduce) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     transition: none;
   }
 }`));
@@ -343,28 +347,29 @@ textarea._input_hrx0p_32:read-only {
 })();
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_hrx0p_8";
-const label = "_label_hrx0p_15";
-const labelRequired = "_labelRequired_hrx0p_25";
-const input = "_input_hrx0p_32";
-const inputError = "_inputError_hrx0p_102";
-const helperText = "_helperText_hrx0p_112";
-const helperTextError = "_helperTextError_hrx0p_120";
-const textarea = "_textarea_hrx0p_125";
-const select = "_select_hrx0p_133";
-const selectPlaceholder = "_selectPlaceholder_hrx0p_142";
-const inputGroup = "_inputGroup_hrx0p_150";
-const inputIconWrapper = "_inputIconWrapper_hrx0p_156";
-const fieldIcon = "_fieldIcon_hrx0p_160";
-const fieldIconClickable = "_fieldIconClickable_hrx0p_176";
-const pickerTrigger = "_pickerTrigger_hrx0p_206";
-const inputWithPicker = "_inputWithPicker_hrx0p_236";
-const inputWithIcon = "_inputWithIcon_hrx0p_240";
-const inputPrefix = "_inputPrefix_hrx0p_244";
-const inputSuffix = "_inputSuffix_hrx0p_245";
-const inputGroupInput = "_inputGroupInput_hrx0p_266";
-const inlineWrapper = "_inlineWrapper_hrx0p_281";
-const inlineLabel = "_inlineLabel_hrx0p_294";
+const wrapper = "_wrapper_1sk2v_8";
+const label = "_label_1sk2v_15";
+const labelRequired = "_labelRequired_1sk2v_25";
+const input = "_input_1sk2v_32";
+const inputError = "_inputError_1sk2v_102";
+const helperText = "_helperText_1sk2v_112";
+const helperTextError = "_helperTextError_1sk2v_120";
+const textarea = "_textarea_1sk2v_125";
+const select = "_select_1sk2v_133";
+const selectPlaceholder = "_selectPlaceholder_1sk2v_142";
+const inputPlaceholder = "_inputPlaceholder_1sk2v_146";
+const inputGroup = "_inputGroup_1sk2v_154";
+const inputIconWrapper = "_inputIconWrapper_1sk2v_160";
+const fieldIcon = "_fieldIcon_1sk2v_164";
+const fieldIconClickable = "_fieldIconClickable_1sk2v_180";
+const pickerTrigger = "_pickerTrigger_1sk2v_210";
+const inputWithPicker = "_inputWithPicker_1sk2v_240";
+const inputWithIcon = "_inputWithIcon_1sk2v_244";
+const inputPrefix = "_inputPrefix_1sk2v_248";
+const inputSuffix = "_inputSuffix_1sk2v_249";
+const inputGroupInput = "_inputGroupInput_1sk2v_270";
+const inlineWrapper = "_inlineWrapper_1sk2v_285";
+const inlineLabel = "_inlineLabel_1sk2v_298";
 const styles = {
   wrapper,
   label,
@@ -376,6 +381,7 @@ const styles = {
   textarea,
   select,
   selectPlaceholder,
+  inputPlaceholder,
   inputGroup,
   inputIconWrapper,
   fieldIcon,
@@ -401,6 +407,7 @@ exports.inputError = inputError;
 exports.inputGroup = inputGroup;
 exports.inputGroupInput = inputGroupInput;
 exports.inputIconWrapper = inputIconWrapper;
+exports.inputPlaceholder = inputPlaceholder;
 exports.inputPrefix = inputPrefix;
 exports.inputSuffix = inputSuffix;
 exports.inputWithIcon = inputWithIcon;

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

@@ -10,14 +10,14 @@
    ═══════════════════════════════════════════════ */
 
 /* ── Field Wrapper ───────────────────────────── */
-._wrapper_hrx0p_8 {
+._wrapper_1sk2v_8 {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 /* ── Label ───────────────────────────────────── */
-._label_hrx0p_15 {
+._label_1sk2v_15 {
   display: block;
   font-size: var(--axen-font-size-sm, 0.875rem);
   font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +27,14 @@
   letter-spacing: 0.01em;
 }
 
-._labelRequired_hrx0p_25::after {
+._labelRequired_1sk2v_25::after {
   content: ' *';
   color: var(--axen-color-error, #d32f2f);
   font-weight: var(--axen-font-weight-bold, 600);
 }
 
 /* ── Input Base ──────────────────────────────── */
-._input_hrx0p_32 {
+._input_1sk2v_32 {
   display: block;
   width: 100%;
   height: var(--axen-field-height, 2.75rem);
@@ -62,22 +62,22 @@
   outline: none;
 }
 
-._input_hrx0p_32::placeholder {
+._input_1sk2v_32::placeholder {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._input_hrx0p_32:hover:not(:disabled):not(:read-only) {
+._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
   border-color: var(--axen-color-border-hover, #888888);
 }
 
 /* Focus ring (keyboard + mouse) */
-._input_hrx0p_32:focus {
+._input_1sk2v_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_hrx0p_32:disabled {
+._input_1sk2v_32:disabled {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
   color: var(--axen-color-text-disabled, #9e9e9e);
   cursor: not-allowed;
@@ -86,35 +86,35 @@
 /* Scope :read-only to actual text inputs only.
    <select> and <div> match :read-only by default in modern browsers,
    which would incorrectly apply the disabled-looking background. */
-input._input_hrx0p_32:read-only,
-textarea._input_hrx0p_32:read-only {
+input._input_1sk2v_32:read-only,
+textarea._input_1sk2v_32:read-only {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
 }
 
 /* Hide native browser picker icons for date/time/datetime inputs.
    We provide our own custom pickers via DatePicker / TimePicker components,
    so the native chromium dark-themed popups must not appear. */
-._input_hrx0p_32::-webkit-calendar-picker-indicator {
+._input_1sk2v_32::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
 
-._input_hrx0p_32::-webkit-date-and-time-value {
+._input_1sk2v_32::-webkit-date-and-time-value {
   text-align: left;
 }
 
 /* ── Error State ─────────────────────────────── */
-._inputError_hrx0p_102 {
+._inputError_1sk2v_102 {
   border-color: var(--axen-color-error, #d32f2f);
 }
 
-._inputError_hrx0p_102:focus {
+._inputError_1sk2v_102: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_hrx0p_112 {
+._helperText_1sk2v_112 {
   display: block;
   font-size: var(--axen-font-size-xs, 0.75rem);
   color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +122,12 @@ textarea._input_hrx0p_32:read-only {
   line-height: var(--axen-line-height, 1.5);
 }
 
-._helperTextError_hrx0p_120 {
+._helperTextError_1sk2v_120 {
   color: var(--axen-color-error, #d32f2f);
 }
 
 /* ── Textarea ────────────────────────────────── */
-._textarea_hrx0p_125 {
+._textarea_1sk2v_125 {
   height: auto;
   min-height: calc(var(--axen-field-min-height, 44px) * 2);
   resize: vertical;
@@ -135,7 +135,7 @@ textarea._input_hrx0p_32:read-only {
 }
 
 /* ── Select ──────────────────────────────────── */
-._select_hrx0p_133 {
+._select_1sk2v_133 {
   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;
@@ -144,7 +144,11 @@ textarea._input_hrx0p_32:read-only {
   cursor: pointer;
 }
 
-._selectPlaceholder_hrx0p_142 {
+._selectPlaceholder_1sk2v_142 {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+._inputPlaceholder_1sk2v_146 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
@@ -152,17 +156,17 @@ textarea._input_hrx0p_32:read-only {
    See tokens.css for color-scheme: light declaration. */
 
 /* ── Input with prefix/suffix ────────────────── */
-._inputGroup_hrx0p_150 {
+._inputGroup_1sk2v_154 {
   display: flex;
   align-items: stretch;
 }
 
 /* ── Icon inside input ───────────────────────── */
-._inputIconWrapper_hrx0p_156 {
+._inputIconWrapper_1sk2v_160 {
   position: relative;
 }
 
-._fieldIcon_hrx0p_160 {
+._fieldIcon_1sk2v_164 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -178,7 +182,7 @@ textarea._input_hrx0p_32:read-only {
 }
 
 /* Clickable variant for icons that open pickers */
-._fieldIconClickable_hrx0p_176 {
+._fieldIconClickable_1sk2v_180 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -197,18 +201,18 @@ textarea._input_hrx0p_32:read-only {
   margin: 0;
 }
 
-._fieldIconClickable_hrx0p_176:hover {
+._fieldIconClickable_1sk2v_180:hover {
   color: var(--axen-color-primary, #1976d2);
 }
 
-._fieldIconClickable_hrx0p_176:focus-visible {
+._fieldIconClickable_1sk2v_180:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
   border-radius: var(--axen-border-radius-sm, 4px);
 }
 
 /* Right-side picker trigger button inside inputIconWrapper */
-._pickerTrigger_hrx0p_206 {
+._pickerTrigger_1sk2v_210 {
   position: absolute;
   right: 0.5rem;
   top: 50%;
@@ -227,27 +231,27 @@ textarea._input_hrx0p_32:read-only {
   z-index: 1;
 }
 
-._pickerTrigger_hrx0p_206:hover {
+._pickerTrigger_1sk2v_210:hover {
   color: var(--axen-color-primary, #1976d2);
   background-color: var(--axen-color-bg-hover, #fafafa);
 }
 
-._pickerTrigger_hrx0p_206:focus-visible {
+._pickerTrigger_1sk2v_210:focus-visible {
   outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);
   outline-offset: 2px;
 }
 
 /* Input with right-side picker trigger needs extra right padding */
-._inputWithPicker_hrx0p_236 {
+._inputWithPicker_1sk2v_240 {
   padding-right: 2.25rem;
 }
 
-._inputWithIcon_hrx0p_240 {
+._inputWithIcon_1sk2v_244 {
   padding-left: 2.5rem;
 }
 
-._inputPrefix_hrx0p_244,
-._inputSuffix_hrx0p_245 {
+._inputPrefix_1sk2v_248,
+._inputSuffix_1sk2v_249 {
   display: flex;
   align-items: center;
   padding: 0 var(--axen-space-sm, 0.5rem);
@@ -258,32 +262,32 @@ textarea._input_hrx0p_32:read-only {
   white-space: nowrap;
 }
 
-._inputPrefix_hrx0p_244 {
+._inputPrefix_1sk2v_248 {
   border-right: none;
   border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
 }
 
-._inputSuffix_hrx0p_245 {
+._inputSuffix_1sk2v_249 {
   border-left: none;
   border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
 }
 
-._inputGroupInput_hrx0p_266 {
+._inputGroupInput_1sk2v_270 {
   border-radius: 0;
 }
 
-._inputPrefix_hrx0p_244 + ._inputGroupInput_hrx0p_266 {
+._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-._inputGroupInput_hrx0p_266:has(+ ._inputSuffix_hrx0p_245) {
+._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_hrx0p_281 {
+._inlineWrapper_1sk2v_285 {
   display: flex;
   align-items: center;
   gap: var(--axen-space-sm, 0.5rem);
@@ -291,12 +295,12 @@ textarea._input_hrx0p_32:read-only {
   cursor: pointer;
 }
 
-._inlineWrapper_hrx0p_281:has(:disabled) {
+._inlineWrapper_1sk2v_285:has(:disabled) {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-._inlineLabel_hrx0p_294 {
+._inlineLabel_1sk2v_298 {
   font-size: var(--axen-font-size-md, 1rem);
   color: var(--axen-color-text, #1a1a1a);
   user-select: none;
@@ -304,34 +308,34 @@ textarea._input_hrx0p_32:read-only {
 
 /* ── Responsive: mobile touch targets ────────── */
 @media (max-width: 599px) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     font-size: 16px; /* Prevent iOS zoom on focus */
     min-height: 48px;
   }
 
-  ._inlineWrapper_hrx0p_281 {
+  ._inlineWrapper_1sk2v_285 {
     min-height: 48px;
   }
 }
 
 /* ── High Contrast Mode ──────────────────────── */
 @media (prefers-contrast: more) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     border-width: 2px;
   }
 
-  ._inputError_hrx0p_102 {
+  ._inputError_1sk2v_102 {
     border-width: 3px;
   }
 
-  ._helperTextError_hrx0p_120 {
+  ._helperTextError_1sk2v_120 {
     font-weight: var(--axen-font-weight-bold, 600);
   }
 }
 
 /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
 @media (prefers-reduced-motion: reduce) {
-  ._input_hrx0p_32 {
+  ._input_1sk2v_32 {
     transition: none;
   }
 }`));
@@ -341,28 +345,29 @@ textarea._input_hrx0p_32:read-only {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const wrapper = "_wrapper_hrx0p_8";
-const label = "_label_hrx0p_15";
-const labelRequired = "_labelRequired_hrx0p_25";
-const input = "_input_hrx0p_32";
-const inputError = "_inputError_hrx0p_102";
-const helperText = "_helperText_hrx0p_112";
-const helperTextError = "_helperTextError_hrx0p_120";
-const textarea = "_textarea_hrx0p_125";
-const select = "_select_hrx0p_133";
-const selectPlaceholder = "_selectPlaceholder_hrx0p_142";
-const inputGroup = "_inputGroup_hrx0p_150";
-const inputIconWrapper = "_inputIconWrapper_hrx0p_156";
-const fieldIcon = "_fieldIcon_hrx0p_160";
-const fieldIconClickable = "_fieldIconClickable_hrx0p_176";
-const pickerTrigger = "_pickerTrigger_hrx0p_206";
-const inputWithPicker = "_inputWithPicker_hrx0p_236";
-const inputWithIcon = "_inputWithIcon_hrx0p_240";
-const inputPrefix = "_inputPrefix_hrx0p_244";
-const inputSuffix = "_inputSuffix_hrx0p_245";
-const inputGroupInput = "_inputGroupInput_hrx0p_266";
-const inlineWrapper = "_inlineWrapper_hrx0p_281";
-const inlineLabel = "_inlineLabel_hrx0p_294";
+const wrapper = "_wrapper_1sk2v_8";
+const label = "_label_1sk2v_15";
+const labelRequired = "_labelRequired_1sk2v_25";
+const input = "_input_1sk2v_32";
+const inputError = "_inputError_1sk2v_102";
+const helperText = "_helperText_1sk2v_112";
+const helperTextError = "_helperTextError_1sk2v_120";
+const textarea = "_textarea_1sk2v_125";
+const select = "_select_1sk2v_133";
+const selectPlaceholder = "_selectPlaceholder_1sk2v_142";
+const inputPlaceholder = "_inputPlaceholder_1sk2v_146";
+const inputGroup = "_inputGroup_1sk2v_154";
+const inputIconWrapper = "_inputIconWrapper_1sk2v_160";
+const fieldIcon = "_fieldIcon_1sk2v_164";
+const fieldIconClickable = "_fieldIconClickable_1sk2v_180";
+const pickerTrigger = "_pickerTrigger_1sk2v_210";
+const inputWithPicker = "_inputWithPicker_1sk2v_240";
+const inputWithIcon = "_inputWithIcon_1sk2v_244";
+const inputPrefix = "_inputPrefix_1sk2v_248";
+const inputSuffix = "_inputSuffix_1sk2v_249";
+const inputGroupInput = "_inputGroupInput_1sk2v_270";
+const inlineWrapper = "_inlineWrapper_1sk2v_285";
+const inlineLabel = "_inlineLabel_1sk2v_298";
 const styles = {
   wrapper,
   label,
@@ -374,6 +379,7 @@ const styles = {
   textarea,
   select,
   selectPlaceholder,
+  inputPlaceholder,
   inputGroup,
   inputIconWrapper,
   fieldIcon,
@@ -400,6 +406,7 @@ export {
   inputGroup,
   inputGroupInput,
   inputIconWrapper,
+  inputPlaceholder,
   inputPrefix,
   inputSuffix,
   inputWithIcon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axenstudio/axen-form",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Lightweight, config-driven, enterprise-grade React form library. Zero UI dependency. CSS Modules. A11y-aware.",
   "type": "module",
   "main": "./dist/index.cjs",