@axenstudio/axen-form 0.1.10 → 0.1.11

package/dist/fields/TimeField/TimePicker.module.css.cjs

@@ -0,0 +1,50 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Time Picker\n   Custom dropdown picker for TimeField\n   ═══════════════════════════════════════════════ */\n\n._overlay_1qexq_6 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1qexq_12 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown, 100);\n  margin-top: var(--axen-space-xs, 0.25rem);\n  background: 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  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  padding: var(--axen-space-sm, 0.5rem);\n  min-width: 200px;\n}\n\n/* ── Column layout ───────────────────────────── */\n._columns_1qexq_27 {\n  display: flex;\n  gap: var(--axen-space-xs, 0.25rem);\n  justify-content: center;\n}\n\n._column_1qexq_27 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  max-height: 200px;\n  overflow-y: auto;\n  padding: var(--axen-space-xs, 0.25rem) 0;\n  scrollbar-width: thin;\n}\n\n._column_1qexq_27::-webkit-scrollbar {\n  width: 4px;\n}\n\n._column_1qexq_27::-webkit-scrollbar-thumb {\n  background: var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-pill, 9999px);\n}\n\n._columnLabel_1qexq_53 {\n  font-size: var(--axen-font-size-xs, 0.75rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text-secondary, #666666);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-bottom: var(--axen-space-xs, 0.25rem);\n  flex-shrink: 0;\n}\n\n/* ── Individual cell ─────────────────────────── */\n._cell_1qexq_64 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 36px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-md, 1rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n._cell_1qexq_64:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._cell_1qexq_64:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._cellSelected_1qexq_91 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._cellSelected_1qexq_91:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n/* ── Separator between columns ───────────────── */\n._separator_1qexq_102 {\n  display: flex;\n  align-items: center;\n  padding: 0 2px;\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  font-weight: var(--axen-font-weight-bold, 600);\n  color: var(--axen-color-text-secondary, #666666);\n  user-select: none;\n  margin-top: 20px;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1qexq_114 {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--axen-space-sm, 0.5rem);\n  padding-top: var(--axen-space-sm, 0.5rem);\n  margin-top: var(--axen-space-sm, 0.5rem);\n  border-top: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._footerBtn_1qexq_123 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: var(--axen-color-bg, #ffffff);\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition:\n    background-color var(--axen-transition-fast, 150ms ease),\n    border-color var(--axen-transition-fast, 150ms ease);\n  padding: 0 var(--axen-space-sm, 0.5rem);\n}\n\n._footerBtn_1qexq_123:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1qexq_123:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._footerBtnPrimary_1qexq_152 {\n  background-color: var(--axen-color-primary, #1976d2);\n  border-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n}\n\n._footerBtnPrimary_1qexq_152:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n  border-color: var(--axen-color-primary-hover, #1565c0);\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 overlay = "_overlay_1qexq_6";
+const picker = "_picker_1qexq_12";
+const columns = "_columns_1qexq_27";
+const column = "_column_1qexq_27";
+const columnLabel = "_columnLabel_1qexq_53";
+const cell = "_cell_1qexq_64";
+const cellSelected = "_cellSelected_1qexq_91";
+const separator = "_separator_1qexq_102";
+const footer = "_footer_1qexq_114";
+const footerBtn = "_footerBtn_1qexq_123";
+const footerBtnPrimary = "_footerBtnPrimary_1qexq_152";
+const s = {
+  overlay,
+  picker,
+  columns,
+  column,
+  columnLabel,
+  cell,
+  cellSelected,
+  separator,
+  footer,
+  footerBtn,
+  footerBtnPrimary
+};
+exports.cell = cell;
+exports.cellSelected = cellSelected;
+exports.column = column;
+exports.columnLabel = columnLabel;
+exports.columns = columns;
+exports.default = s;
+exports.footer = footer;
+exports.footerBtn = footerBtn;
+exports.footerBtnPrimary = footerBtnPrimary;
+exports.overlay = overlay;
+exports.picker = picker;
+exports.separator = separator;

package/dist/fields/TimeField/TimePicker.module.css.js

@@ -0,0 +1,50 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("/* ═══════════════════════════════════════════════\n   axen-form Time Picker\n   Custom dropdown picker for TimeField\n   ═══════════════════════════════════════════════ */\n\n._overlay_1qexq_6 {\n  position: fixed;\n  inset: 0;\n  z-index: calc(var(--axen-z-dropdown, 100) - 1);\n}\n\n._picker_1qexq_12 {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: var(--axen-z-dropdown, 100);\n  margin-top: var(--axen-space-xs, 0.25rem);\n  background: 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  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  padding: var(--axen-space-sm, 0.5rem);\n  min-width: 200px;\n}\n\n/* ── Column layout ───────────────────────────── */\n._columns_1qexq_27 {\n  display: flex;\n  gap: var(--axen-space-xs, 0.25rem);\n  justify-content: center;\n}\n\n._column_1qexq_27 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 2px;\n  max-height: 200px;\n  overflow-y: auto;\n  padding: var(--axen-space-xs, 0.25rem) 0;\n  scrollbar-width: thin;\n}\n\n._column_1qexq_27::-webkit-scrollbar {\n  width: 4px;\n}\n\n._column_1qexq_27::-webkit-scrollbar-thumb {\n  background: var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-pill, 9999px);\n}\n\n._columnLabel_1qexq_53 {\n  font-size: var(--axen-font-size-xs, 0.75rem);\n  font-weight: var(--axen-font-weight-medium, 500);\n  color: var(--axen-color-text-secondary, #666666);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding-bottom: var(--axen-space-xs, 0.25rem);\n  flex-shrink: 0;\n}\n\n/* ── Individual cell ─────────────────────────── */\n._cell_1qexq_64 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 36px;\n  border: none;\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: transparent;\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-md, 1rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition: background-color var(--axen-transition-fast, 150ms ease);\n  padding: 0;\n  flex-shrink: 0;\n}\n\n._cell_1qexq_64:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n}\n\n._cell_1qexq_64:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._cellSelected_1qexq_91 {\n  background-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n  font-weight: var(--axen-font-weight-medium, 500);\n}\n\n._cellSelected_1qexq_91:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n}\n\n/* ── Separator between columns ───────────────── */\n._separator_1qexq_102 {\n  display: flex;\n  align-items: center;\n  padding: 0 2px;\n  font-size: var(--axen-font-size-lg, 1.125rem);\n  font-weight: var(--axen-font-weight-bold, 600);\n  color: var(--axen-color-text-secondary, #666666);\n  user-select: none;\n  margin-top: 20px;\n}\n\n/* ── Footer actions ──────────────────────────── */\n._footer_1qexq_114 {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--axen-space-sm, 0.5rem);\n  padding-top: var(--axen-space-sm, 0.5rem);\n  margin-top: var(--axen-space-sm, 0.5rem);\n  border-top: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n}\n\n._footerBtn_1qexq_123 {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 36px;\n  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);\n  border-radius: var(--axen-border-radius-sm, 4px);\n  background: var(--axen-color-bg, #ffffff);\n  color: var(--axen-color-text, #1a1a1a);\n  font-size: var(--axen-font-size-sm, 0.875rem);\n  font-family: var(--axen-font-family);\n  cursor: pointer;\n  transition:\n    background-color var(--axen-transition-fast, 150ms ease),\n    border-color var(--axen-transition-fast, 150ms ease);\n  padding: 0 var(--axen-space-sm, 0.5rem);\n}\n\n._footerBtn_1qexq_123:hover {\n  background-color: var(--axen-color-bg-hover, #fafafa);\n  border-color: var(--axen-color-border-hover, #888888);\n}\n\n._footerBtn_1qexq_123:focus-visible {\n  outline: var(--axen-focus-ring-width, 2px) solid var(--axen-focus-ring-color);\n  outline-offset: -2px;\n}\n\n._footerBtnPrimary_1qexq_152 {\n  background-color: var(--axen-color-primary, #1976d2);\n  border-color: var(--axen-color-primary, #1976d2);\n  color: #ffffff;\n}\n\n._footerBtnPrimary_1qexq_152:hover {\n  background-color: var(--axen-color-primary-hover, #1565c0);\n  border-color: var(--axen-color-primary-hover, #1565c0);\n}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const overlay = "_overlay_1qexq_6";
+const picker = "_picker_1qexq_12";
+const columns = "_columns_1qexq_27";
+const column = "_column_1qexq_27";
+const columnLabel = "_columnLabel_1qexq_53";
+const cell = "_cell_1qexq_64";
+const cellSelected = "_cellSelected_1qexq_91";
+const separator = "_separator_1qexq_102";
+const footer = "_footer_1qexq_114";
+const footerBtn = "_footerBtn_1qexq_123";
+const footerBtnPrimary = "_footerBtnPrimary_1qexq_152";
+const s = {
+  overlay,
+  picker,
+  columns,
+  column,
+  columnLabel,
+  cell,
+  cellSelected,
+  separator,
+  footer,
+  footerBtn,
+  footerBtnPrimary
+};
+export {
+  cell,
+  cellSelected,
+  column,
+  columnLabel,
+  columns,
+  s as default,
+  footer,
+  footerBtn,
+  footerBtnPrimary,
+  overlay,
+  picker,
+  separator
+};

package/dist/fields/defaultPlaceholders.cjs

@@ -9,6 +9,7 @@ const defaultPlaceholders = {
   textarea: "Enter description...",
   number: "0",
   currency: "0.00",
+  select: "Select...",
   date: "Select date",
   time: "Select time",
   datetime: "Select date and time",

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

@@ -1 +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"}
+{"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,CAezE,CAAC"}

package/dist/fields/defaultPlaceholders.js

@@ -7,6 +7,7 @@ const defaultPlaceholders = {
   textarea: "Enter description...",
   number: "0",
   currency: "0.00",
+  select: "Select...",
   date: "Select date",
   time: "Select time",
   datetime: "Select date and time",

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

@@ -1,23 +1,365 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
+   axen-form Field Base Styles
+   Shared styles for all field components
+   A11y-aware + Responsive
+   ═══════════════════════════════════════════════ */
+
+/* ── Field Wrapper ───────────────────────────── */
+._wrapper_1hrya_8 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ── Label ───────────────────────────────────── */
+._label_1hrya_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_1hrya_25::after {
+  content: ' *';
+  color: var(--axen-color-error, #d32f2f);
+  font-weight: var(--axen-font-weight-bold, 600);
+}
+
+/* ── Input Base ──────────────────────────────── */
+._input_1hrya_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_1hrya_32::placeholder {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+._input_1hrya_32:hover:not(:disabled):not(:read-only) {
+  border-color: var(--axen-color-border-hover, #888888);
+}
+
+/* Focus ring (keyboard + mouse) */
+._input_1hrya_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_1hrya_32:disabled {
+  background-color: var(--axen-color-bg-disabled, #f5f5f5);
+  color: var(--axen-color-text-disabled, #9e9e9e);
+  cursor: not-allowed;
+}
+
+/* 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_1hrya_32:read-only,
+textarea._input_1hrya_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_1hrya_32::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+._input_1hrya_32::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+/* ── Error State ─────────────────────────────── */
+._inputError_1hrya_102 {
+  border-color: var(--axen-color-error, #d32f2f);
+}
+
+._inputError_1hrya_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_1hrya_112 {
+  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_1hrya_120 {
+  color: var(--axen-color-error, #d32f2f);
+}
+
+/* ── Textarea ────────────────────────────────── */
+._textarea_1hrya_125 {
+  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_1hrya_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;
+  background-position: right 0.75rem center;
+  padding-right: 2rem;
+  cursor: pointer;
+}
+
+/* Dark-mode override removed — axen-form is now light-only by default.
+   See tokens.css for color-scheme: light declaration. */
+
+/* ── Input with prefix/suffix ────────────────── */
+._inputGroup_1hrya_146 {
+  display: flex;
+  align-items: stretch;
+}
+
+/* ── Icon inside input ───────────────────────── */
+._inputIconWrapper_1hrya_152 {
+  position: relative;
+}
+
+._fieldIcon_1hrya_156 {
+  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;
+}
+
+/* Clickable variant for icons that open pickers */
+._fieldIconClickable_1hrya_172 {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--axen-color-text-secondary, #666666);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+}
+
+._fieldIconClickable_1hrya_172:hover {
+  color: var(--axen-color-primary, #1976d2);
+}
+
+._fieldIconClickable_1hrya_172: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_1hrya_202 {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--axen-color-text-secondary, #666666);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--axen-border-radius-sm, 4px);
+  background: transparent;
+  padding: 0;
+  z-index: 1;
+}
+
+._pickerTrigger_1hrya_202:hover {
+  color: var(--axen-color-primary, #1976d2);
+  background-color: var(--axen-color-bg-hover, #fafafa);
+}
+
+._pickerTrigger_1hrya_202: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_1hrya_232 {
+  padding-right: 2.25rem;
+}
+
+._inputWithIcon_1hrya_236 {
+  padding-left: 2.5rem;
+}
+
+._inputPrefix_1hrya_240,
+._inputSuffix_1hrya_241 {
+  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-input-bg, #ffffff);
+  border: var(--axen-border-width, 1px) solid var(--axen-color-border, #d0d5dd);
+  white-space: nowrap;
+}
+
+._inputPrefix_1hrya_240 {
+  border-right: none;
+  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
+}
+
+._inputSuffix_1hrya_241 {
+  border-left: none;
+  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
+}
+
+._inputGroupInput_1hrya_262 {
+  border-radius: 0;
+}
+
+._inputPrefix_1hrya_240 + ._inputGroupInput_1hrya_262 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+._inputGroupInput_1hrya_262:has(+ ._inputSuffix_1hrya_241) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* ── Checkbox/Radio/Switch shared ────────────── */
+._inlineWrapper_1hrya_277 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-sm, 0.5rem);
+  min-height: var(--axen-field-min-height, 44px);
+  cursor: pointer;
+}
+
+._inlineWrapper_1hrya_277:has(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+._inlineLabel_1hrya_290 {
+  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_1hrya_32 {
+    font-size: 16px; /* Prevent iOS zoom on focus */
+    min-height: 48px;
+  }
+
+  ._inlineWrapper_1hrya_277 {
+    min-height: 48px;
+  }
+}
+
+/* ── High Contrast Mode ──────────────────────── */
+@media (prefers-contrast: more) {
+  ._input_1hrya_32 {
+    border-width: 2px;
+  }
+
+  ._inputError_1hrya_102 {
+    border-width: 3px;
+  }
+
+  ._helperTextError_1hrya_120 {
+    font-weight: var(--axen-font-weight-bold, 600);
+  }
+}
+
+/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
+@media (prefers-reduced-motion: reduce) {
+  ._input_1hrya_32 {
+    transition: none;
+  }
+}`));
+      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 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 wrapper = "_wrapper_1hrya_8";
+const label = "_label_1hrya_15";
+const labelRequired = "_labelRequired_1hrya_25";
+const input = "_input_1hrya_32";
+const inputError = "_inputError_1hrya_102";
+const helperText = "_helperText_1hrya_112";
+const helperTextError = "_helperTextError_1hrya_120";
+const textarea = "_textarea_1hrya_125";
+const select = "_select_1hrya_133";
+const inputGroup = "_inputGroup_1hrya_146";
+const inputIconWrapper = "_inputIconWrapper_1hrya_152";
+const fieldIcon = "_fieldIcon_1hrya_156";
+const fieldIconClickable = "_fieldIconClickable_1hrya_172";
+const pickerTrigger = "_pickerTrigger_1hrya_202";
+const inputWithPicker = "_inputWithPicker_1hrya_232";
+const inputWithIcon = "_inputWithIcon_1hrya_236";
+const inputPrefix = "_inputPrefix_1hrya_240";
+const inputSuffix = "_inputSuffix_1hrya_241";
+const inputGroupInput = "_inputGroupInput_1hrya_262";
+const inlineWrapper = "_inlineWrapper_1hrya_277";
+const inlineLabel = "_inlineLabel_1hrya_290";
 const styles = {
   wrapper,
   label,
@@ -31,6 +373,9 @@ const styles = {
   inputGroup,
   inputIconWrapper,
   fieldIcon,
+  fieldIconClickable,
+  pickerTrigger,
+  inputWithPicker,
   inputWithIcon,
   inputPrefix,
   inputSuffix,
@@ -40,6 +385,7 @@ const styles = {
 };
 exports.default = styles;
 exports.fieldIcon = fieldIcon;
+exports.fieldIconClickable = fieldIconClickable;
 exports.helperText = helperText;
 exports.helperTextError = helperTextError;
 exports.inlineLabel = inlineLabel;
@@ -52,8 +398,10 @@ exports.inputIconWrapper = inputIconWrapper;
 exports.inputPrefix = inputPrefix;
 exports.inputSuffix = inputSuffix;
 exports.inputWithIcon = inputWithIcon;
+exports.inputWithPicker = inputWithPicker;
 exports.label = label;
 exports.labelRequired = labelRequired;
+exports.pickerTrigger = pickerTrigger;
 exports.select = select;
 exports.textarea = textarea;
 exports.wrapper = wrapper;