@axenstudio/axen-form 0.1.17 → 0.1.18

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

@@ -10,14 +10,36 @@
    ═══════════════════════════════════════════════ */
 
 /* ── Field Wrapper ───────────────────────────── */
-._wrapper_1sk2v_8 {
+:where(._wrapper_18hu4_8),
+:where(._wrapper_18hu4_8) *,
+:where(._wrapper_18hu4_8) *::before,
+:where(._wrapper_18hu4_8) *::after {
+  box-sizing: border-box;
+}
+
+:where(._wrapper_18hu4_8) {
+  color-scheme: light;
+}
+
+:where(._wrapper_18hu4_8) input,
+:where(._wrapper_18hu4_8) textarea,
+:where(._wrapper_18hu4_8) select,
+:where(._wrapper_18hu4_8) button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+._wrapper_18hu4_8 {
   display: flex;
   flex-direction: column;
   width: 100%;
 }
 
 /* ── Label ───────────────────────────────────── */
-._label_1sk2v_15 {
+._label_18hu4_37 {
   display: block;
   font-size: var(--axen-font-size-sm, 0.875rem);
   font-weight: var(--axen-font-weight-medium, 500);
@@ -27,14 +49,14 @@
   letter-spacing: 0.01em;
 }
 
-._labelRequired_1sk2v_25::after {
+._labelRequired_18hu4_47::after {
   content: ' *';
   color: var(--axen-color-error, #d32f2f);
   font-weight: var(--axen-font-weight-bold, 600);
 }
 
 /* ── Input Base ──────────────────────────────── */
-._input_1sk2v_32 {
+._input_18hu4_54 {
   display: block;
   width: 100%;
   height: var(--axen-field-height, 2.75rem);
@@ -62,22 +84,22 @@
   outline: none;
 }
 
-._input_1sk2v_32::placeholder {
+._input_18hu4_54::placeholder {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._input_1sk2v_32:hover:not(:disabled):not(:read-only) {
+._input_18hu4_54:hover:not(:disabled):not(:read-only) {
   border-color: var(--axen-color-border-hover, #888888);
 }
 
 /* Focus ring (keyboard + mouse) */
-._input_1sk2v_32:focus {
+._input_18hu4_54: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_1sk2v_32:disabled {
+._input_18hu4_54:disabled {
   background-color: var(--axen-color-bg-disabled, #f5f5f5);
   color: var(--axen-color-text-disabled, #9e9e9e);
   cursor: not-allowed;
@@ -86,35 +108,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_1sk2v_32:read-only,
-textarea._input_1sk2v_32:read-only {
+input._input_18hu4_54:read-only,
+textarea._input_18hu4_54: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_1sk2v_32::-webkit-calendar-picker-indicator {
+._input_18hu4_54::-webkit-calendar-picker-indicator {
   display: none;
   -webkit-appearance: none;
 }
 
-._input_1sk2v_32::-webkit-date-and-time-value {
+._input_18hu4_54::-webkit-date-and-time-value {
   text-align: left;
 }
 
 /* ── Error State ─────────────────────────────── */
-._inputError_1sk2v_102 {
+._inputError_18hu4_124 {
   border-color: var(--axen-color-error, #d32f2f);
 }
 
-._inputError_1sk2v_102:focus {
+._inputError_18hu4_124: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_1sk2v_112 {
+._helperText_18hu4_134 {
   display: block;
   font-size: var(--axen-font-size-xs, 0.75rem);
   color: var(--axen-color-text-secondary, #666666);
@@ -122,12 +144,12 @@ textarea._input_1sk2v_32:read-only {
   line-height: var(--axen-line-height, 1.5);
 }
 
-._helperTextError_1sk2v_120 {
+._helperTextError_18hu4_142 {
   color: var(--axen-color-error, #d32f2f);
 }
 
 /* ── Textarea ────────────────────────────────── */
-._textarea_1sk2v_125 {
+._textarea_18hu4_147 {
   height: auto;
   min-height: calc(var(--axen-field-min-height, 44px) * 2);
   resize: vertical;
@@ -135,7 +157,7 @@ textarea._input_1sk2v_32:read-only {
 }
 
 /* ── Select ──────────────────────────────────── */
-._select_1sk2v_133 {
+._select_18hu4_155 {
   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,11 +166,11 @@ textarea._input_1sk2v_32:read-only {
   cursor: pointer;
 }
 
-._selectPlaceholder_1sk2v_142 {
+._selectPlaceholder_18hu4_164 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
-._inputPlaceholder_1sk2v_146 {
+._inputPlaceholder_18hu4_168 {
   color: var(--axen-color-text-disabled, #9e9e9e);
 }
 
@@ -156,17 +178,17 @@ textarea._input_1sk2v_32:read-only {
    See tokens.css for color-scheme: light declaration. */
 
 /* ── Input with prefix/suffix ────────────────── */
-._inputGroup_1sk2v_154 {
+._inputGroup_18hu4_176 {
   display: flex;
   align-items: stretch;
 }
 
 /* ── Icon inside input ───────────────────────── */
-._inputIconWrapper_1sk2v_160 {
+._inputIconWrapper_18hu4_182 {
   position: relative;
 }
 
-._fieldIcon_1sk2v_164 {
+._fieldIcon_18hu4_186 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -182,7 +204,7 @@ textarea._input_1sk2v_32:read-only {
 }
 
 /* Clickable variant for icons that open pickers */
-._fieldIconClickable_1sk2v_180 {
+._fieldIconClickable_18hu4_202 {
   position: absolute;
   left: 0.75rem;
   top: 50%;
@@ -201,18 +223,18 @@ textarea._input_1sk2v_32:read-only {
   margin: 0;
 }
 
-._fieldIconClickable_1sk2v_180:hover {
+._fieldIconClickable_18hu4_202:hover {
   color: var(--axen-color-primary, #1976d2);
 }
 
-._fieldIconClickable_1sk2v_180:focus-visible {
+._fieldIconClickable_18hu4_202: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_1sk2v_210 {
+._pickerTrigger_18hu4_232 {
   position: absolute;
   right: 0.5rem;
   top: 50%;
@@ -231,27 +253,27 @@ textarea._input_1sk2v_32:read-only {
   z-index: 1;
 }
 
-._pickerTrigger_1sk2v_210:hover {
+._pickerTrigger_18hu4_232:hover {
   color: var(--axen-color-primary, #1976d2);
   background-color: var(--axen-color-bg-hover, #fafafa);
 }
 
-._pickerTrigger_1sk2v_210:focus-visible {
+._pickerTrigger_18hu4_232: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_1sk2v_240 {
+._inputWithPicker_18hu4_262 {
   padding-right: 2.25rem;
 }
 
-._inputWithIcon_1sk2v_244 {
+._inputWithIcon_18hu4_266 {
   padding-left: 2.5rem;
 }
 
-._inputPrefix_1sk2v_248,
-._inputSuffix_1sk2v_249 {
+._inputPrefix_18hu4_270,
+._inputSuffix_18hu4_271 {
   display: flex;
   align-items: center;
   padding: 0 var(--axen-space-sm, 0.5rem);
@@ -262,32 +284,32 @@ textarea._input_1sk2v_32:read-only {
   white-space: nowrap;
 }
 
-._inputPrefix_1sk2v_248 {
+._inputPrefix_18hu4_270 {
   border-right: none;
   border-radius: var(--axen-border-radius, 6px) 0 0 var(--axen-border-radius, 6px);
 }
 
-._inputSuffix_1sk2v_249 {
+._inputSuffix_18hu4_271 {
   border-left: none;
   border-radius: 0 var(--axen-border-radius, 6px) var(--axen-border-radius, 6px) 0;
 }
 
-._inputGroupInput_1sk2v_270 {
+._inputGroupInput_18hu4_292 {
   border-radius: 0;
 }
 
-._inputPrefix_1sk2v_248 + ._inputGroupInput_1sk2v_270 {
+._inputPrefix_18hu4_270 + ._inputGroupInput_18hu4_292 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-._inputGroupInput_1sk2v_270:has(+ ._inputSuffix_1sk2v_249) {
+._inputGroupInput_18hu4_292:has(+ ._inputSuffix_18hu4_271) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* ── Checkbox/Radio/Switch shared ────────────── */
-._inlineWrapper_1sk2v_285 {
+._inlineWrapper_18hu4_307 {
   display: flex;
   align-items: center;
   gap: var(--axen-space-sm, 0.5rem);
@@ -295,12 +317,12 @@ textarea._input_1sk2v_32:read-only {
   cursor: pointer;
 }
 
-._inlineWrapper_1sk2v_285:has(:disabled) {
+._inlineWrapper_18hu4_307:has(:disabled) {
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-._inlineLabel_1sk2v_298 {
+._inlineLabel_18hu4_320 {
   font-size: var(--axen-font-size-md, 1rem);
   color: var(--axen-color-text, #1a1a1a);
   user-select: none;
@@ -308,34 +330,34 @@ textarea._input_1sk2v_32:read-only {
 
 /* ── Responsive: mobile touch targets ────────── */
 @media (max-width: 599px) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     font-size: 16px; /* Prevent iOS zoom on focus */
     min-height: 48px;
   }
 
-  ._inlineWrapper_1sk2v_285 {
+  ._inlineWrapper_18hu4_307 {
     min-height: 48px;
   }
 }
 
 /* ── High Contrast Mode ──────────────────────── */
 @media (prefers-contrast: more) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     border-width: 2px;
   }
 
-  ._inputError_1sk2v_102 {
+  ._inputError_18hu4_124 {
     border-width: 3px;
   }
 
-  ._helperTextError_1sk2v_120 {
+  ._helperTextError_18hu4_142 {
     font-weight: var(--axen-font-weight-bold, 600);
   }
 }
 
 /* ── Reduced Motion (A11y: WCAG 2.3.3) ──────── */
 @media (prefers-reduced-motion: reduce) {
-  ._input_1sk2v_32 {
+  ._input_18hu4_54 {
     transition: none;
   }
 }`));
@@ -345,29 +367,29 @@ textarea._input_1sk2v_32:read-only {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-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 wrapper = "_wrapper_18hu4_8";
+const label = "_label_18hu4_37";
+const labelRequired = "_labelRequired_18hu4_47";
+const input = "_input_18hu4_54";
+const inputError = "_inputError_18hu4_124";
+const helperText = "_helperText_18hu4_134";
+const helperTextError = "_helperTextError_18hu4_142";
+const textarea = "_textarea_18hu4_147";
+const select = "_select_18hu4_155";
+const selectPlaceholder = "_selectPlaceholder_18hu4_164";
+const inputPlaceholder = "_inputPlaceholder_18hu4_168";
+const inputGroup = "_inputGroup_18hu4_176";
+const inputIconWrapper = "_inputIconWrapper_18hu4_182";
+const fieldIcon = "_fieldIcon_18hu4_186";
+const fieldIconClickable = "_fieldIconClickable_18hu4_202";
+const pickerTrigger = "_pickerTrigger_18hu4_232";
+const inputWithPicker = "_inputWithPicker_18hu4_262";
+const inputWithIcon = "_inputWithIcon_18hu4_266";
+const inputPrefix = "_inputPrefix_18hu4_270";
+const inputSuffix = "_inputSuffix_18hu4_271";
+const inputGroupInput = "_inputGroupInput_18hu4_292";
+const inlineWrapper = "_inlineWrapper_18hu4_307";
+const inlineLabel = "_inlineLabel_18hu4_320";
 const styles = {
   wrapper,
   label,

package/dist/fields/fieldUtils.d.ts

@@ -21,4 +21,3 @@ export declare function ariaProps(name: string, options: {
 export declare function helperId(name: string): string;
 /** Generate label element ID */
 export declare function labelId(name: string): string;
-//# sourceMappingURL=fieldUtils.d.ts.map

package/dist/fields/iconUtils.d.ts

@@ -6,4 +6,3 @@ import { ReactNode } from 'react';
  * - `ReactNode` → custom icon
  */
 export declare function resolveFieldIcon(icon: ReactNode | false | undefined, fieldType: string): ReactNode | null;
-//# sourceMappingURL=iconUtils.d.ts.map

package/dist/fields/icons.d.ts

@@ -1,10 +1,9 @@
 import { ReactNode } from 'react';
 import { BuiltInFieldType } from '../types';
 /** Calendar icon */
-export declare const CalendarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const CalendarIcon: import("react").JSX.Element;
 /** Clock icon */
-export declare const ClockIcon: import("react/jsx-runtime").JSX.Element;
+export declare const ClockIcon: import("react").JSX.Element;
 /** Link / URL icon */
-export declare const LinkIcon: import("react/jsx-runtime").JSX.Element;
+export declare const LinkIcon: import("react").JSX.Element;
 export declare const defaultIcons: Partial<Record<BuiltInFieldType, ReactNode>>;
-//# sourceMappingURL=icons.d.ts.map

package/dist/index.cjs

@@ -5,20 +5,21 @@
       var elementStyle = document.createElement("style");
       elementStyle.appendChild(document.createTextNode(`/* ═══════════════════════════════════════════════
    axen-form CSS Reset
-   Minimal reset for form elements
+   Reset only inside an Axen form or an explicit data-axen-theme wrapper
    ═══════════════════════════════════════════════ */
 
-*,
-*::before,
-*::after {
+:where([data-axen-theme]),
+:where([data-axen-theme]) *,
+:where([data-axen-theme]) *::before,
+:where([data-axen-theme]) *::after {
   box-sizing: border-box;
 }
 
 /* Reset form element defaults */
-input,
-textarea,
-select,
-button {
+:where([data-axen-theme]) input,
+:where([data-axen-theme]) textarea,
+:where([data-axen-theme]) select,
+:where([data-axen-theme]) button {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -27,46 +28,46 @@ button {
 }
 
 /* Remove default styling from number inputs */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+:where([data-axen-theme]) input[type='number']::-webkit-inner-spin-button,
+:where([data-axen-theme]) input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type='number'] {
+:where([data-axen-theme]) 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 {
+:where([data-axen-theme]) input[type='date']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='time']::-webkit-calendar-picker-indicator,
+:where([data-axen-theme]) input[type='datetime-local']::-webkit-calendar-picker-indicator {
   cursor: pointer;
 }
 
 /* Ensure fieldset/legend reset */
-fieldset {
+:where([data-axen-theme]) fieldset {
   border: none;
   padding: 0;
   margin: 0;
 }
 
-legend {
+:where([data-axen-theme]) legend {
   padding: 0;
 }
 
 /* Remove textarea resize handle (can be overridden) */
-textarea {
+:where([data-axen-theme]) textarea {
   resize: vertical;
 }
 
 /* Focus visible only — keyboard navigation (A11y) */
-:focus:not(:focus-visible) {
+:where([data-axen-theme]) :focus:not(:focus-visible) {
   outline: none;
 }
 
-:focus-visible {
+:where([data-axen-theme]) :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);
@@ -108,9 +109,6 @@ textarea {
    ═══════════════════════════════════════════════ */
 
 :root {
-  /* Force light rendering for all native form controls (select, date, etc.) */
-  color-scheme: light;
-
   /* ── Color Palette ─────────────────────────── */
   --axen-color-primary: #1976d2;
   --axen-color-primary-hover: #1565c0;
@@ -189,6 +187,11 @@ textarea {
   --axen-z-tooltip: 200;
 }
 
+:where([data-axen-theme]) {
+  /* Keep native Axen controls light without changing the host document. */
+  color-scheme: light;
+}
+
 /* ── Dark Mode ───────────────────────────────
    Removed: axen-form ships as light-only by default.
    Form elements are locked to color-scheme: light above.
@@ -233,10 +236,12 @@ const numberUtils = require("./core/numberUtils.cjs");
 const pathUtils = require("./core/pathUtils.cjs");
 const payloadUtils = require("./core/payloadUtils.cjs");
 const validation = require("./core/validation.cjs");
+const semanticValidation = require("./core/semanticValidation.cjs");
 const FormContext = require("./react/FormContext.cjs");
 const useAxenForm = require("./react/useAxenForm.cjs");
 const useField = require("./react/useField.cjs");
 const useFieldArray = require("./react/useFieldArray.cjs");
+const useFormState = require("./react/useFormState.cjs");
 const AxenArrayField = require("./react/AxenArrayField.cjs");
 const AxenField = require("./react/AxenField.cjs");
 const AxenForm = require("./react/AxenForm.cjs");
@@ -293,11 +298,15 @@ exports.getStrippedFields = payloadUtils.getStrippedFields;
 exports.mapPayload = payloadUtils.mapPayload;
 exports.pickFields = payloadUtils.pickFields;
 exports.simpleValidator = validation.simpleValidator;
+exports.validateSemanticValue = semanticValidation.validateSemanticValue;
+exports.withValidationPolicy = semanticValidation.withValidationPolicy;
 exports.FormContext = FormContext.FormContext;
 exports.useFormContext = FormContext.useFormContext;
 exports.useAxenForm = useAxenForm.useAxenForm;
 exports.useField = useField.useField;
 exports.useFieldArray = useFieldArray.useFieldArray;
+exports.useFormState = useFormState.useFormState;
+exports.useWatch = useFormState.useWatch;
 exports.AxenArrayField = AxenArrayField.AxenArrayField;
 exports.AxenField = AxenField.AxenField;
 exports.AxenForm = AxenForm.AxenForm;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { ArrayFieldConfig, ArrayHelpers, AutocompleteOption, AxenFormProps, AxenFormRef, BoxProps, Breakpoint, BuiltInFieldType, DividerProps, FieldComponentProps, FieldConfig, FieldGroupConfig, FieldOption, FieldTypeComponentMap, FormApi, FormConfig, GridProps, GridSize, PayloadConfig, SpacerProps, StackProps, ValidationAdapter, } from './types';
+export type { ArrayFieldConfig, ArrayHelpers, AutocompleteOption, AxenFormProps, AxenFormRef, BoxProps, Breakpoint, BuiltInFieldType, DividerProps, FieldComponentProps, FieldConfig, FieldGroupConfig, FieldOption, FieldTypeComponentMap, FormApi, FormConfig, GridProps, GridSize, PayloadConfig, SpacerProps, StackProps, ValidationAdapter, ValidationPolicy, ValidationRules, } from './types';
 export { isFieldGroup } from './types';
 export { formatDateLocale, formatDateTimeLocale, formatTimeLocale, getDefaultLocale, toISODateString, toISODateTimeLocalString, toISOTimeString, } from './core/dateUtils';
 export { createFormStore } from './core/formStore';
@@ -6,11 +6,13 @@ export { calculateCursorPosition, formatNumber, getDecimalSeparator, getGroupSep
 export { get, pathToString, set, toPathArray } from './core/pathUtils';
 export { getStrippedFields, mapPayload, pickFields } from './core/payloadUtils';
 export { simpleValidator } from './core/validation';
+export { withValidationPolicy, validateSemanticValue } from './core/semanticValidation';
 export { FormContext, useFormContext } from './react/FormContext';
 export type { FormContextValue } from './react/FormContext';
 export { useAxenForm } from './react/useAxenForm';
 export { useField } from './react/useField';
 export { useFieldArray } from './react/useFieldArray';
+export { useFormState, useWatch } from './react/useFormState';
 export { AxenArrayField } from './react/AxenArrayField';
 export { AxenField } from './react/AxenField';
 export { AxenForm } from './react/AxenForm';
@@ -45,4 +47,3 @@ export { defaultPlaceholders } from './fields/defaultPlaceholders';
 export { ariaProps, cx, helperId, labelId } from './fields/fieldUtils';
 export { defaultIcons } from './fields/icons';
 export { resolveFieldIcon } from './fields/iconUtils';
-//# sourceMappingURL=index.d.ts.map