@axenstudio/axen-form 0.1.10 → 0.1.12

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

@@ -1,23 +1,370 @@
+(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_hrx0p_8 {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ── Label ───────────────────────────────────── */
+._label_hrx0p_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_hrx0p_25::after {
+  content: ' *';
+  color: var(--axen-color-error, #d32f2f);
+  font-weight: var(--axen-font-weight-bold, 600);
+}
+
+/* ── Input Base ──────────────────────────────── */
+._input_hrx0p_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_hrx0p_32::placeholder {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+._input_hrx0p_32:hover:not(:disabled):not(:read-only) {
+  border-color: var(--axen-color-border-hover, #888888);
+}
+
+/* Focus ring (keyboard + mouse) */
+._input_hrx0p_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 {
+  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_hrx0p_32:read-only,
+textarea._input_hrx0p_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 {
+  display: none;
+  -webkit-appearance: none;
+}
+
+._input_hrx0p_32::-webkit-date-and-time-value {
+  text-align: left;
+}
+
+/* ── Error State ─────────────────────────────── */
+._inputError_hrx0p_102 {
+  border-color: var(--axen-color-error, #d32f2f);
+}
+
+._inputError_hrx0p_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 {
+  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_hrx0p_120 {
+  color: var(--axen-color-error, #d32f2f);
+}
+
+/* ── Textarea ────────────────────────────────── */
+._textarea_hrx0p_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_hrx0p_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;
+}
+
+._selectPlaceholder_hrx0p_142 {
+  color: var(--axen-color-text-disabled, #9e9e9e);
+}
+
+/* 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_hrx0p_150 {
+  display: flex;
+  align-items: stretch;
+}
+
+/* ── Icon inside input ───────────────────────── */
+._inputIconWrapper_hrx0p_156 {
+  position: relative;
+}
+
+._fieldIcon_hrx0p_160 {
+  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_hrx0p_176 {
+  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_hrx0p_176:hover {
+  color: var(--axen-color-primary, #1976d2);
+}
+
+._fieldIconClickable_hrx0p_176: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 {
+  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_hrx0p_206:hover {
+  color: var(--axen-color-primary, #1976d2);
+  background-color: var(--axen-color-bg-hover, #fafafa);
+}
+
+._pickerTrigger_hrx0p_206: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 {
+  padding-right: 2.25rem;
+}
+
+._inputWithIcon_hrx0p_240 {
+  padding-left: 2.5rem;
+}
+
+._inputPrefix_hrx0p_244,
+._inputSuffix_hrx0p_245 {
+  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_hrx0p_244 {
+  border-right: none;
+  border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
+}
+
+._inputSuffix_hrx0p_245 {
+  border-left: none;
+  border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
+}
+
+._inputGroupInput_hrx0p_266 {
+  border-radius: 0;
+}
+
+._inputPrefix_hrx0p_244 + ._inputGroupInput_hrx0p_266 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+._inputGroupInput_hrx0p_266:has(+ ._inputSuffix_hrx0p_245) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* ── Checkbox/Radio/Switch shared ────────────── */
+._inlineWrapper_hrx0p_281 {
+  display: flex;
+  align-items: center;
+  gap: var(--axen-space-sm, 0.5rem);
+  min-height: var(--axen-field-min-height, 44px);
+  cursor: pointer;
+}
+
+._inlineWrapper_hrx0p_281:has(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+._inlineLabel_hrx0p_294 {
+  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_hrx0p_32 {
+    font-size: 16px; /* Prevent iOS zoom on focus */
+    min-height: 48px;
+  }
+
+  ._inlineWrapper_hrx0p_281 {
+    min-height: 48px;
+  }
+}
+
+/* ── High Contrast Mode ──────────────────────── */
+@media (prefers-contrast: more) {
+  ._input_hrx0p_32 {
+    border-width: 2px;
+  }
+
+  ._inputError_hrx0p_102 {
+    border-width: 3px;
+  }
+
+  ._helperTextError_hrx0p_120 {
+    font-weight: var(--axen-font-weight-bold, 600);
+  }
+}
+
+/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
+@media (prefers-reduced-motion: reduce) {
+  ._input_hrx0p_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_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 styles = {
   wrapper,
   label,
@@ -28,9 +375,13 @@ const styles = {
   helperTextError,
   textarea,
   select,
+  selectPlaceholder,
   inputGroup,
   inputIconWrapper,
   fieldIcon,
+  fieldIconClickable,
+  pickerTrigger,
+  inputWithPicker,
   inputWithIcon,
   inputPrefix,
   inputSuffix,
@@ -40,6 +391,7 @@ const styles = {
 };
 exports.default = styles;
 exports.fieldIcon = fieldIcon;
+exports.fieldIconClickable = fieldIconClickable;
 exports.helperText = helperText;
 exports.helperTextError = helperTextError;
 exports.inlineLabel = inlineLabel;
@@ -52,8 +404,11 @@ 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.selectPlaceholder = selectPlaceholder;
 exports.textarea = textarea;
 exports.wrapper = wrapper;