@axenstudio/axen-form 0.1.8 → 0.1.10

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;
-  }
-}

package/dist/layout/Box/Box.module.css

@@ -1,3 +0,0 @@
-._box_17jtc_1 {
-  min-width: 0;
-}

package/dist/layout/Divider/Divider.module.css

@@ -1,25 +0,0 @@
-._divider_7khjl_1 {
-  border: none;
-  margin: 0;
-  flex-shrink: 0;
-}
-
-._horizontal_7khjl_7 {
-  width: 100%;
-  height: 1px;
-  background-color: var(--axen-color-border);
-}
-
-._vertical_7khjl_13 {
-  width: 1px;
-  height: auto;
-  align-self: stretch;
-  background-color: var(--axen-color-border);
-}
-
-@media (prefers-contrast: more) {
-  ._horizontal_7khjl_7,
-  ._vertical_7khjl_13 {
-    background-color: var(--axen-color-text);
-  }
-}

package/dist/layout/Grid/Grid.module.css

@@ -1,43 +0,0 @@
-/* ═══════════════════════════════════════════════
-   Grid Layout — Responsive CSS Grid
-   12-column mobile-first system
-   ═══════════════════════════════════════════════ */
-
-._container_1asbx_6 {
-  display: grid;
-  width: 100%;
-}
-
-._item_1asbx_11 {
-  min-width: 0; /* Prevent overflow */
-}
-
-/* ── Responsive Breakpoints ──────────────────── */
-
-/* sm ≥ 600px */
-@media (min-width: 600px) {
-  ._sm_1asbx_19 {
-    grid-column: span var(--axen-grid-sm, 12);
-  }
-}
-
-/* md ≥ 900px */
-@media (min-width: 900px) {
-  ._md_1asbx_26 {
-    grid-column: span var(--axen-grid-md, 12);
-  }
-}
-
-/* lg ≥ 1200px */
-@media (min-width: 1200px) {
-  ._lg_1asbx_33 {
-    grid-column: span var(--axen-grid-lg, 12);
-  }
-}
-
-/* xl ≥ 1536px */
-@media (min-width: 1536px) {
-  ._xl_1asbx_40 {
-    grid-column: span var(--axen-grid-xl, 12);
-  }
-}

package/dist/layout/Stack/Stack.module.css

@@ -1,3 +0,0 @@
-._stack_1m70l_1 {
-  min-width: 0;
-}

package/dist/react/fieldGroup.module.css

@@ -1,22 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form Field Group / Section Styles
-   ═══════════════════════════════════════════════ */
-
-._fieldGroup_1864u_5 {
-  display: contents; /* Inherit parent grid flow */
-}
-
-._groupLabel_1864u_9 {
-  grid-column: 1 / -1;
-  font-size: var(--axen-font-size-md, 1rem);
-  font-weight: var(--axen-font-weight-bold, 600);
-  color: var(--axen-color-primary, #1976d2);
-  padding-bottom: var(--axen-space-xs, 0.25rem);
-  border-bottom: 2px solid var(--axen-color-primary-light, #e3f2fd);
-  margin-top: var(--axen-space-md, 1rem);
-  margin-bottom: var(--axen-space-xs, 0.25rem);
-}
-
-._fieldGroup_1864u_5:first-child > ._groupLabel_1864u_9 {
-  margin-top: 0;
-}

package/dist/react/gridCell.module.css

@@ -1,38 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form Grid Cell — Responsive colSpan
-   Uses CSS custom properties + media queries
-   ═══════════════════════════════════════════════ */
-
-._cell_s3hwz_6 {
-  --_col: var(--col-xs, 12);
-  grid-column: span var(--_col);
-  min-width: 0; /* Prevent grid blowout from long content */
-}
-
-/* sm ≥ 600px */
-@media (min-width: 600px) {
-  ._cell_s3hwz_6 {
-    --_col: var(--col-sm, var(--col-xs, 12));
-  }
-}
-
-/* md ≥ 900px */
-@media (min-width: 900px) {
-  ._cell_s3hwz_6 {
-    --_col: var(--col-md, var(--col-sm, var(--col-xs, 12)));
-  }
-}
-
-/* lg ≥ 1200px */
-@media (min-width: 1200px) {
-  ._cell_s3hwz_6 {
-    --_col: var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12))));
-  }
-}
-
-/* xl ≥ 1536px */
-@media (min-width: 1536px) {
-  ._cell_s3hwz_6 {
-    --_col: var(--col-xl, var(--col-lg, var(--col-md, var(--col-sm, var(--col-xs, 12)))));
-  }
-}

package/dist/tokens/reset.css

@@ -1,68 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form CSS Reset
-   Minimal reset for form elements
-   ═══════════════════════════════════════════════ */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* Reset form element defaults */
-input,
-textarea,
-select,
-button {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-}
-
-/* Remove default styling from number inputs */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-input[type='number'] {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-/* Remove default date/time input icons if using custom components */
-input[type='date']::-webkit-calendar-picker-indicator,
-input[type='time']::-webkit-calendar-picker-indicator,
-input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-}
-
-/* Ensure fieldset/legend reset */
-fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-/* Remove textarea resize handle (can be overridden) */
-textarea {
-  resize: vertical;
-}
-
-/* Focus visible only — keyboard navigation (A11y) */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-:focus-visible {
-  outline: var(--axen-focus-ring-width, 2px) solid
-    var(--axen-focus-ring-color, rgba(25, 118, 210, 0.5));
-  outline-offset: var(--axen-focus-ring-offset, 2px);
-}

package/dist/tokens/themes.css

@@ -1,31 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form Built-in Theme Presets
-   Applied via data-axen-theme attribute on form
-   ═══════════════════════════════════════════════ */
-
-/* ── Default Theme (Blue) ────────────────────── */
-[data-axen-theme='default'] {
-  --axen-color-primary: #1976d2;
-  --axen-color-primary-hover: #1565c0;
-  --axen-color-primary-light: #e3f2fd;
-  --axen-color-input-bg: #f0f7ff;
-  --axen-color-label: #1565c0;
-}
-
-/* ── Subtle Theme (Gray) ─────────────────────── */
-[data-axen-theme='subtle'] {
-  --axen-color-primary: #546e7a;
-  --axen-color-primary-hover: #37474f;
-  --axen-color-primary-light: #eceff1;
-  --axen-color-input-bg: #f5f5f5;
-  --axen-color-label: #37474f;
-}
-
-/* ── Green Theme ─────────────────────────────── */
-[data-axen-theme='green'] {
-  --axen-color-primary: #2e7d32;
-  --axen-color-primary-hover: #1b5e20;
-  --axen-color-primary-light: #e8f5e9;
-  --axen-color-input-bg: #f1f8e9;
-  --axen-color-label: #1b5e20;
-}

package/dist/tokens/tokens.css

@@ -1,120 +0,0 @@
-/* ═══════════════════════════════════════════════
-   axen-form Design Tokens
-   CSS Custom Properties — A11y-aware & Responsive
-   ═══════════════════════════════════════════════ */
-
-:root {
-  /* ── Color Palette ─────────────────────────── */
-  --axen-color-primary: #1976d2;
-  --axen-color-primary-hover: #1565c0;
-  --axen-color-primary-light: #e3f2fd;
-  --axen-color-error: #d32f2f;
-  --axen-color-error-light: #fdecea;
-  --axen-color-success: #2e7d32;
-  --axen-color-warning: #ed6c02;
-  --axen-color-text: #1a1a1a;
-  --axen-color-text-secondary: #666666;
-  --axen-color-text-disabled: #9e9e9e;
-  --axen-color-border: #d0d5dd;
-  --axen-color-border-hover: #888888;
-  --axen-color-border-focus: var(--axen-color-primary);
-  --axen-color-bg: #ffffff;
-  --axen-color-bg-disabled: #f5f5f5;
-  --axen-color-bg-hover: #fafafa;
-  --axen-color-input-bg: #f0f7ff;
-  --axen-color-label: var(--axen-color-text);
-
-  /* ── Typography ────────────────────────────── */
-  --axen-font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --axen-font-size-xs: 0.75rem;
-  --axen-font-size-sm: 0.875rem;
-  --axen-font-size-md: 1rem;
-  --axen-font-size-lg: 1.125rem;
-  --axen-font-weight-normal: 400;
-  --axen-font-weight-medium: 500;
-  --axen-font-weight-bold: 600;
-  --axen-line-height: 1.5;
-
-  /* ── Spacing ───────────────────────────────── */
-  --axen-space-xs: 0.25rem;
-  --axen-space-sm: 0.5rem;
-  --axen-space-md: 1rem;
-  --axen-space-lg: 1.5rem;
-  --axen-space-xl: 2rem;
-
-  /* ── Border & Radius ───────────────────────── */
-  --axen-border-width: 1px;
-  --axen-border-radius: 8px;
-  --axen-border-radius-sm: 4px;
-  --axen-border-radius-lg: 10px;
-  --axen-border-radius-pill: 9999px;
-
-  /* ── Focus Ring (A11y: WCAG 2.4.7) ─────────── */
-  --axen-focus-ring-width: 2px;
-  --axen-focus-ring-offset: 2px;
-  --axen-focus-ring-color: rgba(25, 118, 210, 0.5);
-
-  /* ── Field Sizing ──────────────────────────── */
-  --axen-field-height: 2.75rem;
-  --axen-field-min-height: 44px; /* A11y: min 44px touch target */
-  --axen-field-padding-x: 0.75rem;
-  --axen-field-padding-y: 0.5rem;
-  --axen-label-margin-bottom: 0.375rem;
-  --axen-helper-margin-top: 0.25rem;
-
-  /* ── Transitions ───────────────────────────── */
-  --axen-transition-fast: 150ms ease;
-  --axen-transition-normal: 200ms ease;
-
-  /* ── Shadows ───────────────────────────────── */
-  --axen-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --axen-shadow-focus: 0 0 0 var(--axen-focus-ring-width) var(--axen-focus-ring-color);
-
-  /* ── Breakpoints (for reference in JS) ─────── */
-  --axen-bp-sm: 600px;
-  --axen-bp-md: 900px;
-  --axen-bp-lg: 1200px;
-  --axen-bp-xl: 1536px;
-
-  /* ── Z-index layers ────────────────────────── */
-  --axen-z-dropdown: 100;
-  --axen-z-tooltip: 200;
-}
-
-/* ── Dark Mode (respects system) ────────────── */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --axen-color-text: #e0e0e0;
-    --axen-color-text-secondary: #a0a0a0;
-    --axen-color-text-disabled: #666666;
-    --axen-color-border: #555555;
-    --axen-color-border-hover: #888888;
-    --axen-color-bg: #1e1e1e;
-    --axen-color-bg-disabled: #2a2a2a;
-    --axen-color-bg-hover: #2e2e2e;
-    --axen-color-primary-light: #1a3a5c;
-    --axen-color-error-light: #3d1c1c;
-    --axen-focus-ring-color: rgba(66, 165, 245, 0.6);
-  }
-}
-
-/* ── High Contrast Mode (A11y) ──────────────── */
-@media (prefers-contrast: more) {
-  :root {
-    --axen-color-border: #000000;
-    --axen-color-text: #000000;
-    --axen-color-text-secondary: #333333;
-    --axen-border-width: 2px;
-    --axen-focus-ring-width: 3px;
-    --axen-focus-ring-color: rgba(0, 0, 0, 0.8);
-  }
-}
-
-/* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --axen-transition-fast: 0ms;
-    --axen-transition-normal: 0ms;
-  }
-}