@axenstudio/axen-form 0.1.9 → 0.1.10

package/package.json

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

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

@@ -1,168 +0,0 @@
-._inputWrap_1hzxx_1 {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-._spinner_1hzxx_7 {
-  position: absolute;
-  right: 0.75rem;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--axen-color-border);
-  border-top-color: var(--axen-color-primary);
-  border-radius: 50%;
-  animation: _spin_1hzxx_7 0.6s linear infinite;
-}
-
-@keyframes _spin_1hzxx_7 {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ._spinner_1hzxx_7 {
-    animation: none;
-    opacity: 0.6;
-  }
-}
-
-/* ── Dropdown ────────────────────────────────── */
-._dropdown_1hzxx_32 {
-  position: absolute;
-  z-index: var(--axen-z-dropdown);
-  width: 100%;
-  max-height: 240px;
-  margin: 0;
-  padding: var(--axen-space-xs) 0;
-  list-style: none;
-  overflow-y: auto;
-  background: var(--axen-color-bg);
-  border: var(--axen-border-width) solid var(--axen-color-border);
-  border-top: none;
-  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-._option_1hzxx_48 {
-  display: flex;
-  align-items: center;
-  padding: var(--axen-space-sm) var(--axen-field-padding-x);
-  font-size: var(--axen-font-size-md);
-  color: var(--axen-color-text);
-  cursor: pointer;
-  min-height: var(--axen-field-min-height);
-  transition: background-color var(--axen-transition-fast);
-}
-
-._option_1hzxx_48:hover {
-  background-color: var(--axen-color-bg-hover);
-}
-
-._optionActive_1hzxx_63 {
-  background-color: var(--axen-color-primary-light);
-}
-
-._optionDisabled_1hzxx_67 {
-  color: var(--axen-color-text-disabled);
-  cursor: not-allowed;
-}
-
-._noResults_1hzxx_72 {
-  padding: var(--axen-space-sm) var(--axen-field-padding-x);
-  font-size: var(--axen-font-size-sm);
-  color: var(--axen-color-text-secondary);
-  border: var(--axen-border-width) solid var(--axen-color-border);
-  border-top: none;
-  border-radius: 0 0 var(--axen-border-radius) var(--axen-border-radius);
-  background: var(--axen-color-bg);
-}
-
-/* ── Chip (used by multi) ────────────────────── */
-._chipWrap_1hzxx_83 {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--axen-space-xs);
-  padding: var(--axen-space-xs);
-}
-
-._chip_1hzxx_83 {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--axen-space-xs);
-  padding: 2px 8px;
-  font-size: var(--axen-font-size-xs);
-  color: var(--axen-color-text);
-  background-color: var(--axen-color-primary-light);
-  border-radius: var(--axen-border-radius-pill);
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-._chipRemove_1hzxx_105 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--axen-color-text-secondary);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-._chipRemove_1hzxx_105:hover {
-  background: rgba(0, 0, 0, 0.08);
-  color: var(--axen-color-text);
-}
-
-._chipRemove_1hzxx_105:focus-visible {
-  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
-}
-
-/* ── Ghost text (predict) ────────────────────── */
-._predictWrap_1hzxx_131 {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-._ghostText_1hzxx_137 {
-  position: absolute;
-  left: var(--axen-field-padding-x);
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--axen-color-text-disabled);
-  font-family: var(--axen-font-family);
-  font-size: var(--axen-font-size-md);
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-._ghostHidden_1hzxx_150 {
-  visibility: hidden;
-  position: absolute;
-  white-space: pre;
-  font-family: var(--axen-font-family);
-  font-size: var(--axen-font-size-md);
-}
-
-/* ── Mobile adjustments ──────────────────────── */
-@media (max-width: 599px) {
-  ._dropdown_1hzxx_32 {
-    max-height: 200px;
-  }
-
-  ._option_1hzxx_48 {
-    min-height: 48px;
-    padding: var(--axen-space-sm) var(--axen-space-md);
-  }
-}

package/dist/fields/CheckboxField/CheckboxField.module.css

@@ -1,29 +0,0 @@
-._checkboxLabel_1labl_1 {
-  cursor: pointer;
-}
-
-._checkbox_1labl_1 {
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--axen-color-primary);
-  border-radius: var(--axen-border-radius-sm);
-}
-
-._checkbox_1labl_1:focus-visible {
-  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
-  outline-offset: var(--axen-focus-ring-offset);
-}
-
-._checkbox_1labl_1:disabled {
-  cursor: not-allowed;
-}
-
-/* Mobile: larger touch target */
-@media (max-width: 599px) {
-  ._checkbox_1labl_1 {
-    width: 24px;
-    height: 24px;
-  }
-}

package/dist/fields/ColorField/ColorField.module.css

@@ -1,33 +0,0 @@
-._colorWrap_or7ln_1 {
-  display: flex;
-  align-items: center;
-  gap: var(--axen-space-sm);
-  min-height: var(--axen-field-min-height);
-}
-
-._colorInput_or7ln_8 {
-  width: 44px;
-  height: 44px;
-  padding: 2px;
-  border: var(--axen-border-width) solid var(--axen-color-border);
-  border-radius: var(--axen-border-radius);
-  cursor: pointer;
-  background: none;
-}
-
-._colorInput_or7ln_8:focus-visible {
-  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
-  outline-offset: var(--axen-focus-ring-offset);
-}
-
-._colorInput_or7ln_8:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-._colorValue_or7ln_28 {
-  font-size: var(--axen-font-size-sm);
-  font-family: monospace;
-  color: var(--axen-color-text-secondary);
-  text-transform: uppercase;
-}

package/dist/fields/PasswordField/PasswordField.module.css

@@ -1,41 +0,0 @@
-._inputWrap_1nxa7_1 {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-._passwordInput_1nxa7_7 {
-  padding-right: 2.5rem;
-}
-
-._toggle_1nxa7_11 {
-  position: absolute;
-  right: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--axen-color-text-secondary);
-  font-size: var(--axen-font-size-lg);
-  border-radius: var(--axen-border-radius-sm);
-  transition: color var(--axen-transition-fast);
-}
-
-._toggle_1nxa7_11:hover:not(:disabled) {
-  color: var(--axen-color-text);
-}
-
-._toggle_1nxa7_11:focus-visible {
-  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
-  outline-offset: var(--axen-focus-ring-offset);
-}
-
-._toggle_1nxa7_11:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}

package/dist/fields/RadioField/RadioField.module.css

@@ -1,34 +0,0 @@
-._radioGroup_1nz5i_1 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--axen-space-xs);
-}
-
-._radioLabel_1nz5i_7 {
-  cursor: pointer;
-}
-
-._radio_1nz5i_1 {
-  width: 20px;
-  height: 20px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--axen-color-primary);
-}
-
-._radio_1nz5i_1:focus-visible {
-  outline: var(--axen-focus-ring-width) solid var(--axen-focus-ring-color);
-  outline-offset: var(--axen-focus-ring-offset);
-}
-
-._radio_1nz5i_1:disabled {
-  cursor: not-allowed;
-}
-
-/* Mobile: larger touch target */
-@media (max-width: 599px) {
-  ._radio_1nz5i_1 {
-    width: 24px;
-    height: 24px;
-  }
-}

package/dist/fields/SliderField/SliderField.module.css

@@ -1,76 +0,0 @@
-._sliderWrap_84w8t_1 {
-  display: flex;
-  align-items: center;
-  gap: var(--axen-space-md);
-  min-height: var(--axen-field-min-height);
-}
-
-._slider_84w8t_1 {
-  flex: 1;
-  height: 6px;
-  appearance: none;
-  background: var(--axen-color-border);
-  border-radius: var(--axen-border-radius-pill);
-  outline: none;
-  cursor: pointer;
-  transition: background var(--axen-transition-fast);
-}
-
-._slider_84w8t_1::-webkit-slider-thumb {
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--axen-color-primary);
-  border: 2px solid var(--axen-color-bg);
-  box-shadow: var(--axen-shadow-sm);
-  cursor: pointer;
-  transition:
-    background var(--axen-transition-fast),
-    transform var(--axen-transition-fast);
-}
-
-._slider_84w8t_1::-webkit-slider-thumb:hover {
-  background: var(--axen-color-primary-hover);
-  transform: scale(1.15);
-}
-
-._slider_84w8t_1:focus-visible::-webkit-slider-thumb {
-  box-shadow: var(--axen-shadow-focus);
-}
-
-._slider_84w8t_1::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background: var(--axen-color-primary);
-  border: 2px solid var(--axen-color-bg);
-  box-shadow: var(--axen-shadow-sm);
-  cursor: pointer;
-}
-
-._slider_84w8t_1:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-._output_84w8t_57 {
-  min-width: 2.5em;
-  text-align: center;
-  font-size: var(--axen-font-size-sm);
-  font-weight: var(--axen-font-weight-medium);
-  color: var(--axen-color-text);
-}
-
-/* Touch target for mobile */
-@media (max-width: 599px) {
-  ._slider_84w8t_1::-webkit-slider-thumb {
-    width: 28px;
-    height: 28px;
-  }
-
-  ._slider_84w8t_1::-moz-range-thumb {
-    width: 28px;
-    height: 28px;
-  }
-}

package/dist/fields/SwitchField/SwitchField.module.css

@@ -1,79 +0,0 @@
-._switchLabel_1itxk_1 {
-  cursor: pointer;
-}
-
-._switchTrack_1itxk_5 {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 44px;
-  height: 24px;
-  background-color: var(--axen-color-border);
-  border-radius: var(--axen-border-radius-pill);
-  transition: background-color var(--axen-transition-fast);
-  flex-shrink: 0;
-}
-
-._switchInput_1itxk_17 {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-._switchInput_1itxk_17:checked + ._switchThumb_1itxk_27 {
-  transform: translateX(20px);
-}
-
-._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
-  transform: translateX(20px);
-}
-
-._switchTrack_1itxk_5:has(._switchInput_1itxk_17:checked) {
-  background-color: var(--axen-color-primary);
-}
-
-._switchInput_1itxk_17:focus-visible ~ ._switchThumb_1itxk_27 {
-  box-shadow: var(--axen-shadow-focus);
-}
-
-._switchInput_1itxk_17:disabled {
-  cursor: not-allowed;
-}
-
-._switchTrack_1itxk_5:has(._switchInput_1itxk_17:disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-._switchThumb_1itxk_27 {
-  position: absolute;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background-color: var(--axen-color-bg);
-  border-radius: 50%;
-  box-shadow: var(--axen-shadow-sm);
-  transition: transform var(--axen-transition-fast);
-  pointer-events: none;
-}
-
-/* Mobile: larger touch target */
-@media (max-width: 599px) {
-  ._switchTrack_1itxk_5 {
-    width: 52px;
-    height: 28px;
-  }
-
-  ._switchThumb_1itxk_27 {
-    width: 24px;
-    height: 24px;
-  }
-
-  ._switchInput_1itxk_17:checked ~ ._switchThumb_1itxk_27 {
-    transform: translateX(24px);
-  }
-}

package/dist/fields/fieldBase.module.css

@@ -1,244 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form Field Base Styles
-   Shared styles for all field components
-   A11y-aware + Responsive
-   ═══════════════════════════════════════════════ */
-
-/* ── Field Wrapper ───────────────────────────── */
-._wrapper_1w6h8_8 {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-/* ── Label ───────────────────────────────────── */
-._label_1w6h8_15 {
-  display: block;
-  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_1w6h8_25::after {
-  content: ' *';
-  color: var(--axen-color-error, #d32f2f);
-  font-weight: var(--axen-font-weight-bold, 600);
-}
-
-/* ── Input Base ──────────────────────────────── */
-._input_1w6h8_32 {
-  display: block;
-  width: 100%;
-  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, 150ms ease),
-    box-shadow var(--axen-transition-fast, 150ms ease);
-  outline: none;
-}
-
-._input_1w6h8_32::placeholder {
-  color: var(--axen-color-text-disabled, #9e9e9e);
-}
-
-._input_1w6h8_32:hover:not(:disabled):not(:read-only) {
-  border-color: var(--axen-color-border-hover, #888888);
-}
-
-/* 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_1w6h8_32:disabled {
-  background-color: var(--axen-color-bg-disabled, #f5f5f5);
-  color: var(--axen-color-text-disabled, #9e9e9e);
-  cursor: not-allowed;
-}
-
-._input_1w6h8_32:read-only {
-  background-color: var(--axen-color-bg-disabled, #f5f5f5);
-}
-
-/* ── Error State ─────────────────────────────── */
-._inputError_1w6h8_86 {
-  border-color: var(--axen-color-error, #d32f2f);
-}
-
-._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_1w6h8_96 {
-  display: block;
-  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_1w6h8_104 {
-  color: var(--axen-color-error, #d32f2f);
-}
-
-/* ── Textarea ────────────────────────────────── */
-._textarea_1w6h8_109 {
-  height: auto;
-  min-height: calc(var(--axen-field-min-height, 44px) * 2);
-  resize: vertical;
-  padding-top: var(--axen-field-padding-x, 0.75rem);
-}
-
-/* ── Select ──────────────────────────────────── */
-._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;
-  background-position: right 0.75rem center;
-  padding-right: 2rem;
-  cursor: pointer;
-}
-
-/* ── Input with prefix/suffix ────────────────── */
-._inputGroup_1w6h8_127 {
-  display: flex;
-  align-items: stretch;
-}
-
-/* ── 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;
-  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_1w6h8_156 {
-  border-right: none;
-  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
-}
-
-._inputSuffix_1w6h8_157 {
-  border-left: none;
-  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
-}
-
-._inputGroupInput_1w6h8_178 {
-  border-radius: 0;
-}
-
-._inputPrefix_1w6h8_156 + ._inputGroupInput_1w6h8_178 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-._inputGroupInput_1w6h8_178:has(+ ._inputSuffix_1w6h8_157) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_1w6h8_193 {
-  display: flex;
-  align-items: center;
-  gap: var(--axen-space-sm, 0.5rem);
-  min-height: var(--axen-field-min-height, 44px);
-  cursor: pointer;
-}
-
-._inlineWrapper_1w6h8_193:has(:disabled) {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-._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_1w6h8_32 {
-    font-size: 16px; /* Prevent iOS zoom on focus */
-    min-height: 48px;
-  }
-
-  ._inlineWrapper_1w6h8_193 {
-    min-height: 48px;
-  }
-}
-
-/* ── High Contrast Mode ──────────────────────── */
-@media (prefers-contrast: more) {
-  ._input_1w6h8_32 {
-    border-width: 2px;
-  }
-
-  ._inputError_1w6h8_86 {
-    border-width: 3px;
-  }
-
-  ._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;
-  }
-}