@formitiva/react 0.9.0

package/dist/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1,27 @@
+export type DebouncedCallback = {
+    callback: (...args: unknown[]) => void;
+    cancel: () => void;
+    flush: () => void;
+};
+/**
+ * useDebouncedCallback
+ * - callback: function to call
+ * - wait: debounce delay in ms
+ * - options.leading: if true, call on leading edge (optional)
+ *
+ * Returns { callback, cancel, flush } where callback is debounced.
+ */
+export declare function useDebouncedCallback(callback: (...args: unknown[]) => unknown, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): DebouncedCallback;
+/**
+ * createDebouncedCallback - non-hook variant that returns the same API but
+ * doesn't use React hooks. Useful for creating many debounced callbacks
+ * programmatically (e.g., driven from a static schema) while handling
+ * lifecycle cleanup manually.
+ */
+export declare function createDebouncedCallback(callback: (...args: unknown[]) => unknown, wait?: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): DebouncedCallback;

package/dist/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function useDropdownPosition(controlRef: React.RefObject<HTMLElement | null>, open: boolean, maxHeight?: number): {
+    left: number;
+    top: number;
+    width: number;
+} | null;

package/dist/hooks/useFieldValidator.d.ts

@@ -0,0 +1,3 @@
+import type { DefinitionPropertyField, FieldValueType } from '../core/formitivaTypes';
+export type ValidationTrigger = 'change' | 'blur' | 'sync';
+export declare function useFieldValidator(field: DefinitionPropertyField, externalError?: string | null): (value: FieldValueType, trigger?: ValidationTrigger) => string | null;

package/dist/hooks/useFormitivaContext.d.ts

@@ -0,0 +1,4 @@
+import type { FormitivaContextType } from '../core/formitivaTypes';
+export declare const FormitivaContext: import("react").Context<FormitivaContextType | undefined>;
+declare const useFormitivaContext: () => FormitivaContextType;
+export default useFormitivaContext;

package/dist/hooks/useUncontrolledValidatedInput.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ValidationTrigger } from "./useFieldValidator";
+export type UseUncontrolledValidatedInputProps = {
+    value?: string | number;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onError?: (error: string | null) => void;
+    validate: (value: string, trigger?: ValidationTrigger) => string | null;
+};
+/**
+ * Handles:
+ * - Uncontrolled input
+ * - Validation
+ * - Error sync
+ */
+export declare function useUncontrolledValidatedInput<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>({ value, disabled, onChange, onError, validate, }: UseUncontrolledValidatedInputProps): {
+    inputRef: React.MutableRefObject<T | null>;
+    error: string | null;
+    handleChange: (e: React.ChangeEvent<T>) => void;
+    handleBlur: () => void;
+};

package/dist/hooks/useUnitValueField.d.ts

@@ -0,0 +1,13 @@
+import type { DefinitionPropertyField } from "../core/formitivaTypes";
+export declare function useUnitValueField(definitionName: string, field: DefinitionPropertyField, value: [string | number, string], unitFactors: {
+    default: string;
+    labels: Record<string, string>;
+    reverseLabels?: Record<string, string>;
+}, t: (key: string) => string, onChange?: (v: [string, string], err: string | null) => void, onError?: (err: string | null) => void): {
+    value: string;
+    unit: string;
+    error: string | null;
+    setValue: (v: string) => void;
+    setUnit: (u: string) => void;
+    setBoth: (v: string, u: string) => void;
+};

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export declare function injectFormitivaStyles(): void;
+export { default as Formitiva } from './components/form/Formitiva';
+export { default as FormitivaRenderer } from './components/form/FormitivaRenderer';
+export type { FormitivaRendererProps } from './components/form/FormitivaRenderer';
+export { FormitivaProvider } from './components/form/FormitivaProvider';
+export { default as useFormitivaContext } from './hooks/useFormitivaContext';
+export { StandardFieldLayout } from './components/layout/LayoutComponents';
+export { CSS_CLASSES, combineClasses } from './styles/cssClasses';
+export type { FormitivaContextType, FormitivaProviderProps, DefinitionPropertyField, FormitivaDefinition, FormitivaInstance, FormitivaProps, FieldValueType, ErrorType, FieldCustomValidationHandler, FieldTypeValidationHandler, FormValidationHandler, FormSubmissionHandler, InputOnChange, BaseInputProps, TranslationFunction, FieldValidationMode } from './core/formitivaTypes';
+export { registerComponent, getComponent, } from './core/registries/componentRegistry';
+export { validateFieldValue, // Deprecated, use validateFieldWithHandler instead
+validateFieldWithCustomHandler } from './validation/validation';
+export { type FormitivaPlugin, type ConflictResolution, type PluginRegistrationOptions, type PluginConflict, registerPlugin, unregisterPlugin, getPlugin, getAllPlugins, hasPlugin, registerComponents, } from './core/registries/pluginRegistry';
+export type { LoadDefinitionOptions, DefinitionLoadResult, InstanceLoadResult, } from './core/formitivaModel';
+export { loadJsonDefinition, createInstanceFromDefinition, // Create new instance with default values
+loadInstance, // Load existing instance (valuesMap)
+upgradeInstanceToLatestDefinition } from './core/formitivaModel';
+export { registerSubmissionHandler, } from './core/registries/submissionHandlerRegistry';
+export { registerFieldCustomValidationHandler, registerFieldTypeValidationHandler, registerFormValidationHandler, } from './core/registries/validationHandlerRegistry';
+export { registerButtonHandler, getButtonHandler, hasButtonHandler, unregisterButtonHandler, listButtonHandlers, type ButtonHandler, } from './core/registries/buttonHandlerRegistry';
+export { type DebouncedCallback, useDebouncedCallback } from './hooks/useDebouncedCallback';
+export { useFieldValidator } from './hooks/useFieldValidator';
+export { useUncontrolledValidatedInput, type UseUncontrolledValidatedInputProps } from './hooks/useUncontrolledValidatedInput';
+export * as Units from './utils/unitValueMapper';
+export { isDarkTheme } from './styles/themeUtils';
+export { serializeInstance, deserializeInstance, serializeDefinition, deserializeDefinition } from './utils/definitionSerializers';
+export { getSupportedLanguages } from './utils/translationUtils';

package/dist/react.css

@@ -0,0 +1 @@
+:root{--formitiva-primary-bg: #f9f9f9;--formitiva-secondary-bg: #fff;--formitiva-text-color: #000;--formitiva-text-muted: #666;--formitiva-label-text-color: #000000;--formitiva-form-border-color: #000000;--formitiva-border-color: #ccc;--formitiva-border-hover: #999;--formitiva-border-focus: #4CAF50;--formitiva-error-color: #e11d48;--formitiva-success-color: #4CAF50;--formitiva-space: 8px;--formitiva-space-lg: 12px;--formitiva-option-menu-hover-bg: #80FFFF;--formitiva-column-gap: var(--formitiva-space);--formitiva-inline-gap: var(--formitiva-space);--formitiva-label-gap: 0px;--formitiva-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--formitiva-font-size: 14px;--formitiva-font-weight: 500;--formitiva-label-font-family: var(--formitiva-font-family);--formitiva-label-font-size: 14px;--formitiva-label-font-weight: 600;--formitiva-border-radius: 0px;--formitiva-border-width: 1px;--formitiva-border-style: solid;--formitiva-form-border-radius: 0px;--formitiva-form-border-style: solid;--formitiva-form-border-width: 0px;--formitiva-group-border-radius: var(--formitiva-border-radius);--formitiva-group-border-style: var(--formitiva-border-style);--formitiva-group-border-width: var(--formitiva-border-width);--formitiva-form-shadow: 0 2px 4px rgba(0, 0, 0, .1);--formitiva-button-bg: var(--formitiva-success-color);--formitiva-button-text: #ffffff;--formitiva-button-padding: var(--formitiva-space) 12px;--formitiva-button-border-radius: 6px;--formitiva-button-font-size: 14px;--formitiva-button-font-weight: var(--formitiva-font-weight);--formitiva-button-hover-opacity: .9;--formitiva-button-disabled-opacity: .6;--formitiva-button-disabled-bg: #cccccc;--formitiva-button-disabled-cursor: not-allowed;--formitiva-button-margin-top: .5em;--formitiva-button-shadow: none;--formitiva-input-padding: var(--formitiva-space);--formitiva-container-padding: var(--formitiva-space-lg);--formitiva-field-gap: var(--formitiva-space);--formitiva-input-bg: var(--formitiva-secondary-bg);--formitiva-field-text-color: #0000ff;--formitiva-tooltip-color-bg: rgba(60,60,60,.92);--formitiva-tooltip-color: #ffffff;--formitiva-field-grid-columns: 1fr 2fr}[data-formitiva-theme=dark]{--formitiva-primary-bg: #121212;--formitiva-secondary-bg: #1A1A1A;--formitiva-input-bg: #262626;--formitiva-text-color: #EDEDED;--formitiva-text-muted: #A5A5A5;--formitiva-field-text-color: #C8C8E5;--formitiva-border-color: #3A3A3A;--formitiva-border-hover: #4A4A4A;--formitiva-border-focus: #4DA6FF;--formitiva-form-border-color: #333333;--formitiva-error-color: #FF6B6B;--formitiva-success-color: #4CAF6A;--formitiva-option-menu-hover-bg: rgba(255, 255, 255, .06);--formitiva-form-shadow: 0 2px 8px rgba(0, 0, 0, .45);--formitiva-tooltip-color-bg: rgba(40, 40, 40, .95);--formitiva-tooltip-color: #F5F5F5}.formitiva-container{font-family:var(--formitiva-font-family, sans-serif);font-size:var(--formitiva-font-size, 14px);background:var(--formitiva-primary-bg, #f9f9f9);color:var(--formitiva-text-color, #000000);padding:var(--formitiva-container-padding, 12px);border-radius:var(--formitiva-form-border-radius, 0px);border-color:var(--formitiva-form-border-color, #000000);border-style:var(--formitiva-form-border-style, solid);border-width:var(--formitiva-form-border-width, 0px);box-shadow:var(--formitiva-form-shadow, none);gap:var(--formitiva-space-lg, 12px);max-width:100%;margin:0 auto}.formitiva-field{display:grid;grid-template-columns:var(--formitiva-field-grid-columns, 1fr 2fr);align-items:start;padding:0;gap:var(--formitiva-column-gap, 8px);margin-bottom:var(--formitiva-field-gap, 8px)}.formitiva-group{border:1px solid var(--formitiva-border-color, #bbb);padding:var(--formitiva-fieldset-padding, .5em);border-radius:var(--formitiva-group-border-radius, var(--formitiva-border-radius, 4px));border-style:var(--formitiva-group-border-style, var(--formitiva-border-style, solid));border-width:var(--formitiva-group-border-width, var(--formitiva-border-width, 1px));margin-bottom:var(--formitiva-space, 8px)}.formitiva-group_legend{font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:0 var(--formitiva-space, 8px);color:var(--formitiva-text-color, inherit);margin-left:.4em}.formitiva-group_legend_arrow{margin-left:.4em}.formitiva-label{justify-self:start;align-self:center;white-space:normal;line-height:1.4;min-width:100px;color:var(--formitiva-label-text-color, var(--formitiva-text-color, #000000));font-family:var(--formitiva-label-font-family, var(--formitiva-font-family, sans-serif));font-weight:var(--formitiva-label-font-weight, var(--formitiva-font-weight, 600));font-size:var(--formitiva-label-font-size, var(--formitiva-font-size, 14px));-webkit-user-select:none;user-select:none}.formitiva-description{font-size:var(--formitiva-font-size, 14px);font-weight:var(--formitiva-font-weight, 500);margin:var(--formitiva-space, 8px) 0;color:var(--formitiva-text-color, #000000);-webkit-user-select:none;user-select:none}.formitiva-input{width:100%;color:var(--formitiva-text-color, #000000);border:1px solid var(--formitiva-border-color, #ccc);border-radius:var(--formitiva-border-radius, 0px);border-style:var(--formitiva-border-style, solid);border-width:var(--formitiva-border-width, 1px);padding:var(--formitiva-input-padding, 8px);box-sizing:border-box;background-color:var(--formitiva-input-bg, #ffffff);font-size:var(--formitiva-font-size, 14px);font-weight:var(--formitiva-font-weight, 400);transition:border-color .2s ease;box-shadow:inset 0 1px #ffffff08}.formitiva-input:hover{border-color:var(--formitiva-border-hover, #4A4A4A)}.formitiva-input:focus{outline:none;border-color:var(--formitiva-border-focus, #4DA6FF);box-shadow:0 0 0 3px #22d3ee66,0 0 16px #22d3ee40,inset 0 1px #ffffff0d}.formitiva-input--text{text-align:left}.formitiva-input--number{text-align:right}.formitiva-input--select{text-align:left;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='8' viewBox='0 0 24 24' width='8' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right var(--formitiva-space) center;background-size:20px;padding-right:32px}.formitiva-select{text-align:left;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='%23666' height='8' viewBox='0 0 24 24' width='8' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right var(--formitiva-space) center;background-size:2.5em;padding-right:32px;background-color:var(--formitiva-input-bg)}.formitiva-textarea{width:100%;background-color:var(--formitiva-input-bg);color:var(--formitiva-text-color);border:1px solid var(--formitiva-border-color);border-radius:var(--formitiva-border-radius);padding:var(--formitiva-input-padding);box-sizing:border-box}.formitiva-chip{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background-color:var(--formitiva-input-bg);border:1px solid var(--formitiva-border-color);border-radius:var(--formitiva-border-radius);color:var(--formitiva-text-color);font-size:.875rem;gap:8px}.formitiva-button{background-color:var(--formitiva-button-bg, var(--formitiva-success-color, #4CAF50));color:var(--formitiva-button-text, var(--formitiva-text-color, #000000));padding:var(--formitiva-button-padding);border-radius:var(--formitiva-button-border-radius, 6px);font-size:var(--formitiva-button-font-size);font-weight:var(--formitiva-button-font-weight);box-shadow:var(--formitiva-button-shadow);margin-top:var(--formitiva-button-margin-top);border:none;cursor:pointer;transition:opacity .2s ease;width:100%;display:flex;justify-content:center;align-items:center}.formitiva-button:hover:not(:disabled){opacity:var(--formitiva-button-hover-opacity);background-color:var(--formitiva-button-bg-hover, #0056b3)}.formitiva-button:disabled{opacity:var(--formitiva-button-disabled-opacity);background-color:var(--formitiva-button-disabled-bg);cursor:var(--formitiva-button-disabled-cursor)}@media(max-width:1024px){.formitiva-container{padding:calc(var(--formitiva-space) * .8)}.formitiva-field{gap:calc(var(--formitiva-column-gap) * .8)}}@media(max-width:768px){.formitiva-field{grid-template-columns:1fr;gap:6px}.formitiva-label{justify-self:start;margin-bottom:4px;font-size:.9rem}.formitiva-container{padding:var(--formitiva-space)}.formitiva-input,.formitiva-textarea,.formitiva-select{font-size:16px;padding:var(--formitiva-input-padding)}.formitiva-checkbox-wrapper,.formitiva-radio-wrapper{padding:8px 0;min-height:44px;align-items:center}.formitiva-group{margin-bottom:calc(var(--formitiva-space) * 1.5)}}@media(max-width:480px){.formitiva-container{padding:calc(var(--formitiva-space) * .7)}.formitiva-field{gap:8px}.formitiva-label{font-size:.85rem;line-height:1.3}.formitiva-input,.formitiva-textarea,.formitiva-select{padding:14px}}

package/dist/styles/cssClasses.d.ts

@@ -0,0 +1,15 @@
+/**
+ * CSS class constants and helpers
+ */
+export declare const CSS_CLASSES: {
+    readonly field: "formitiva-field";
+    readonly label: "formitiva-label";
+    readonly input: "formitiva-input";
+    readonly textInput: "formitiva-input--text";
+    readonly inputNumber: "formitiva-input--number";
+    readonly inputSelect: "formitiva-select";
+    readonly rangeInput: "formitiva-input--range";
+    readonly button: "formitiva-button";
+    readonly description: "formitiva-description";
+};
+export declare const combineClasses: (...classes: (string | undefined | null | false | Record<string, boolean>)[]) => string;

package/dist/styles/themeUtils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Utility functions for theme detection and management
+ */
+/**
+ * Determines if a theme is dark-themed based on naming convention.
+ *
+ * Convention: Theme names containing "dark" are considered dark themes.
+ *
+ * When creating custom themes:
+ * - Include "dark" in the theme name for dark themes (e.g., "my-theme-dark")
+ * - Or rely on CSS variables only and avoid theme-specific logic
+ *
+ * @param themeName - The theme name from the `theme` prop
+ * @returns true if the theme is dark-themed
+ *
+ * @example
+ * isDarkTheme('material-dark') // true
+ * isDarkTheme('dark') // true
+ * isDarkTheme('midnight-dark') // true
+ * isDarkTheme('my-custom-dark') // true
+ * isDarkTheme('material') // false
+ */
+export declare function isDarkTheme(themeName: string): boolean;
+/**
+ * Determines if a color string represents a dark color.
+ * Supports hex (3, 4, 6, 8 digits) and rgb/rgba formats.
+ *
+ * @param color - The color string to check
+ * @returns true if the color is considered dark (luminance < 128)
+ */
+export declare function isDarkColor(color: string): boolean;

package/dist/themes/ant-design-dark.css

@@ -0,0 +1,31 @@
+[data-formitiva-theme="antd-dark"] {
+  --formitiva-primary-bg: #141414;
+  --formitiva-secondary-bg: #1f1f1f;
+  --formitiva-input-bg: #1f1f1f;
+
+  --formitiva-text-color: #e8e8e8;
+  --formitiva-text-muted: #9ca3af;
+
+  --formitiva-border-color: #303030;
+  --formitiva-border-hover: #434343;
+  --formitiva-border-focus: #1677ff;
+
+  --formitiva-option-menu-hover-bg: #1a1a1a;
+
+  --formitiva-error-color: #ff4d4f;
+  --formitiva-success-color: #52c41a;
+
+  --formitiva-border-radius: 6px;
+
+  --formitiva-shadow:
+    0 6px 20px #000000;
+
+  --formitiva-button-bg: #1677ff;
+  --formitiva-button-text: white;
+
+  --formitiva-input-padding: 10px 12px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #282828;
+  --formitiva-tooltip-color: #F5F5F5;
+}

package/dist/themes/ant-design.css

@@ -0,0 +1,42 @@
+[data-formitiva-theme="antd"] {
+  /* Surfaces */
+  --formitiva-primary-bg: #ffffff;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #ffffff;
+
+  /* Text */
+  --formitiva-text-color: #1f1f1f;
+  --formitiva-text-muted: #8c8c8c;
+
+  /* Borders */
+  --formitiva-border-color: #d9d9d9;
+  --formitiva-border-hover: #bfbfbf;
+  --formitiva-border-focus: #1677ff; /* Ant Primary */
+
+  /* States */
+  --formitiva-error-color: #ff4d4f;
+  --formitiva-success-color: #52c41a;
+
+  /* Interaction */
+  --formitiva-option-menu-hover-bg: #fafafa;
+
+  /* Shape ??AntD slightly rounded */
+  --formitiva-border-radius: 6px;
+
+  /* Elevation */
+  --formitiva-shadow:
+    0 2px 8px #000000;
+
+  /* Buttons */
+  --formitiva-button-bg: #1677ff;
+  --formitiva-button-text: #ffffff;
+  --formitiva-button-border-radius: 6px;
+
+  /* Comfortable spacing */
+  --formitiva-input-padding: 10px 12px;
+  --formitiva-font-size: 14px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/blueprint-dark.css

@@ -0,0 +1,31 @@
+[data-formitiva-theme="blueprint-dark"] {
+  --formitiva-primary-bg: #202b33;
+  --formitiva-secondary-bg: #293742;
+  --formitiva-input-bg: #30404d;
+
+  --formitiva-text-color: #f5f8fa;
+  --formitiva-text-muted: #c0cbd3;
+
+  --formitiva-border-color: #394b59;
+  --formitiva-border-hover: #738694;
+  --formitiva-border-focus: #2b95d6;
+
+  --formitiva-option-menu-hover-bg: #ffffff;
+
+  --formitiva-error-color: #ff7373;
+  --formitiva-success-color: #3dcc91;
+
+  --formitiva-border-radius: 4px;
+
+  --formitiva-shadow:
+    0 4px 20px #10161a;
+
+  --formitiva-button-bg: #2b95d6;
+  --formitiva-button-text: white;
+
+  --formitiva-input-padding: 8px 10px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #282828;
+  --formitiva-tooltip-color: #F5F5F5;
+}

package/dist/themes/blueprint.css

@@ -0,0 +1,43 @@
+[data-formitiva-theme="blueprint"] {
+  /* Surfaces */
+  --formitiva-primary-bg: #f5f8fa;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #ffffff;
+
+  /* Text */
+  --formitiva-text-color: #182026;
+  --formitiva-text-muted: #5c7080;
+
+  /* Borders */
+  --formitiva-border-color: #d8e1e8;
+  --formitiva-border-hover: #8a9ba8;
+  --formitiva-border-focus: #137cbd; /* Blueprint Primary Blue */
+
+  /* Status */
+  --formitiva-error-color: #c23030;
+  --formitiva-success-color: #0f9960;
+
+  /* Interaction */
+  --formitiva-option-menu-hover-bg: #ebf1f5;
+
+  /* Shape */
+  --formitiva-border-radius: 4px;
+
+  /* Elevation */
+  --formitiva-shadow:
+    0 1px 3px #10161a,
+    0 0 0 1px #10161a;
+
+  /* Buttons */
+  --formitiva-button-bg: #137cbd;
+  --formitiva-button-text: #ffffff;
+  --formitiva-button-border-radius: 4px;
+
+  /* Density */
+  --formitiva-input-padding: 8px 10px;
+  --formitiva-font-size: 13px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/compact-variant.css

@@ -0,0 +1,8 @@
+[data-formitiva-size="compact"] {
+  --formitiva-input-padding: 6px 8px;
+  --formitiva-font-size: 12px;
+  --formitiva-space: 4px;
+  --formitiva-space-lg: 6px;
+  --formitiva-field-gap: 6px;
+  --formitiva-column-gap: 8px;
+}

package/dist/themes/fluent.css

@@ -0,0 +1,40 @@
+[data-formitiva-theme="fluent"] {
+  /* Surfaces */
+  --formitiva-primary-bg: #ffffff;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #f5f6f8;
+
+  /* Text */
+  --formitiva-text-color: #242424;
+  --formitiva-text-muted: #616161;
+
+  /* Borders */
+  --formitiva-border-color: #d1d1d6;
+  --formitiva-border-hover: #bdbdbd;
+  --formitiva-border-focus: #0078d4;
+
+  /* Accent */
+  --formitiva-success-color: #107c10;
+  --formitiva-error-color: #d13438;
+
+  /* Interaction */
+  --formitiva-option-menu-hover-bg: #000000;
+
+  /* Shape */
+  --formitiva-border-radius: 6px;
+
+  /* Shadow */
+  --formitiva-shadow:
+    0 4px 12px #000000;
+
+  /* Buttons */
+  --formitiva-button-bg: #0078d4;
+  --formitiva-button-text: white;
+  --formitiva-button-border-radius: 6px;
+
+  --formitiva-input-padding: 10px 12px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/glass-morphism.css

@@ -0,0 +1,25 @@
+[data-formitiva-theme="glass"] {
+  --formitiva-primary-bg: #ffffff40;
+  --formitiva-secondary-bg: #ffffff59;
+  --formitiva-input-bg: #ffffff59;
+
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+
+  --formitiva-text-color: #111827;
+  --formitiva-text-muted: #4b5563;
+
+  --formitiva-border-color: #ffffff66;
+  --formitiva-border-hover: #ffffffb3;
+  --formitiva-border-focus: #38bdf8;
+
+  --formitiva-error-color: #e11d48;
+  --formitiva-success-color: #059669;
+
+  --formitiva-border-radius: 12px;
+  --formitiva-shadow: 0 12px 40px #000000;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/high-contrast-accessible.css

@@ -0,0 +1,22 @@
+[data-formitiva-theme="accessible"] {
+  --formitiva-primary-bg: #ffffff;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #ffffff;
+
+  --formitiva-text-color: #000000;
+  --formitiva-text-muted: #333333;
+
+  --formitiva-border-color: #000000;
+  --formitiva-border-hover: #000000;
+  --formitiva-border-focus: #1d4ed8;
+
+  --formitiva-error-color: #b91c1c;
+  --formitiva-success-color: #166534;
+
+  --formitiva-border-radius: 0;
+  --formitiva-shadow: none;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/ios-mobile.css

@@ -0,0 +1,32 @@
+[data-formitiva-theme="ios"] {
+  --formitiva-primary-bg: #f2f2f7;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #ffffff;
+
+  --formitiva-text-color: #000000;
+  --formitiva-text-muted: #8e8e93;
+
+  --formitiva-border-color: #d1d1d6;
+  --formitiva-border-hover: #b3b3b9;
+  --formitiva-border-focus: #0a84ff;
+
+  --formitiva-error-color: #ff3b30;
+  --formitiva-success-color: #34c759;
+
+  --formitiva-option-menu-hover-bg: #000000;
+
+  --formitiva-border-radius: 14px;
+
+  --formitiva-shadow:
+    0 10px 30px #000000;
+
+  --formitiva-button-bg: #0a84ff;
+  --formitiva-button-text: white;
+  --formitiva-button-border-radius: 14px;
+
+  --formitiva-input-padding: 14px 16px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/macos-native.css

@@ -0,0 +1,32 @@
+[data-formitiva-theme="macos"] {
+  --formitiva-primary-bg: #f5f5f7;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #ffffff;
+
+  --formitiva-text-color: #111111;
+  --formitiva-text-muted: #6e6e73;
+
+  --formitiva-border-color: #d2d2d7;
+  --formitiva-border-hover: #9e9ea2;
+  --formitiva-border-focus: #0a84ff;
+
+  --formitiva-success-color: #34c759;
+  --formitiva-error-color: #ff3b30;
+
+  --formitiva-option-menu-hover-bg: #000000;
+
+  --formitiva-border-radius: 999px;
+
+  --formitiva-shadow:
+    0 8px 30px #000000;
+
+  --formitiva-button-bg: #0a84ff;
+  --formitiva-button-text: white;
+  --formitiva-button-border-radius: 999px;
+
+  --formitiva-input-padding: 10px 14px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/material-dark.css

@@ -0,0 +1,27 @@
+[data-formitiva-theme="material-dark"] {
+  --formitiva-primary-bg: #121212;
+  --formitiva-secondary-bg: #1D1B20;
+  --formitiva-input-bg: #2B2830;
+
+  --formitiva-text-color: #EDE7F6;
+  --formitiva-text-muted: #BDB5D7;
+
+  --formitiva-border-color: #3A3346;
+  --formitiva-border-hover: #524364;
+  --formitiva-border-focus: #D0BCFF;
+
+  --formitiva-option-menu-hover-bg: #ffffff;
+
+  --formitiva-error-color: #F2B8B5;
+  --formitiva-success-color: #81C995;
+
+  --formitiva-border-radius: 12px;
+  --formitiva-shadow: 0 8px 30px #000000;
+
+  --formitiva-button-bg: #D0BCFF;
+  --formitiva-button-text: #381E72;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #282828;
+  --formitiva-tooltip-color: #F5F5F5;
+}

package/dist/themes/material.css

@@ -0,0 +1,46 @@
+/* Material Design 3 Inspired Light Theme */
+[data-formitiva-theme="material"] {
+
+  /* Surfaces */
+  --formitiva-primary-bg: #ffffff;
+  --formitiva-secondary-bg: #ffffff;
+  --formitiva-input-bg: #f9fafb;
+
+  /* Text */
+  --formitiva-text-color: #1f2937;
+  --formitiva-text-muted: #6b7280;
+
+  /* Material Border System */
+  --formitiva-border-color: #e5e7eb;
+  --formitiva-border-hover: #cbd5e1;
+  --formitiva-border-focus: #6750A4; /* Material Purple Primary */
+
+  /* State Colors */
+  --formitiva-error-color: #B3261E;
+  --formitiva-success-color: #1E8E3E;
+
+  /* Interaction */
+  --formitiva-option-menu-hover-bg: #000000;
+
+  /* Shape */
+  --formitiva-border-radius: 12px;
+
+  /* Elevation */
+  --formitiva-shadow:
+    0 1px 2px #000000,
+    0 2px 6px #000000;
+
+  /* Buttons */
+  --formitiva-button-bg: #6750A4;
+  --formitiva-button-text: #ffffff;
+  --formitiva-button-border-radius: 999px; /* pill */
+  --formitiva-button-shadow:
+    0 2px 6px #000000;
+
+  /* Inputs */
+  --formitiva-input-padding: 12px 14px;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/midnight-dark.css

@@ -0,0 +1,24 @@
+[data-formitiva-theme="midnight-dark"] {
+  --formitiva-primary-bg: #0b1120;
+  --formitiva-secondary-bg: #111c2d;
+  --formitiva-input-bg: #14223a;
+
+  --formitiva-text-color: #e5f0ff;
+  --formitiva-text-muted: #9db2d4;
+
+  --formitiva-border-color: #1f2b44;
+  --formitiva-border-hover: #2c3d5e;
+  --formitiva-border-focus: #60a5fa;
+
+  --formitiva-error-color: #fb7185;
+  --formitiva-success-color: #4ade80;
+
+  --formitiva-option-menu-hover-bg: #ffffff;
+  --formitiva-border-radius: 6px;
+
+  --formitiva-shadow: 0 12px 28px #000000;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #282828;
+  --formitiva-tooltip-color: #F5F5F5;
+}

package/dist/themes/modern-light.css

@@ -0,0 +1,23 @@
+[data-formitiva-theme="modern-light"] {
+  --formitiva-primary-bg: #ffffff;
+  --formitiva-secondary-bg: #fafafa;
+  --formitiva-input-bg: #ffffff;
+
+  --formitiva-text-color: #1f2937;
+  --formitiva-text-muted: #6b7280;
+
+  --formitiva-border-color: #e5e7eb;
+  --formitiva-border-hover: #d1d5db;
+  --formitiva-border-focus: #2563eb;
+
+  --formitiva-error-color: #dc2626;
+  --formitiva-success-color: #16a34a;
+
+  --formitiva-option-menu-hover-bg: #f3f4f6;
+  --formitiva-border-radius: 6px;
+  --formitiva-shadow: 0 8px 24px #000000;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #3c3c3c;
+  --formitiva-tooltip-color: #ffffff;
+}

package/dist/themes/neon-cyber-dark.css

@@ -0,0 +1,24 @@
+[data-formitiva-theme="neon-cyber-dark"] {
+  --formitiva-primary-bg: #0c0f1a;
+  --formitiva-secondary-bg: #11172b;
+  --formitiva-input-bg: #141c33;
+
+  --formitiva-text-color: #e0e7ff;
+  --formitiva-text-muted: #9ca3af;
+
+  --formitiva-border-color: #303b63;
+  --formitiva-border-hover: #6366f1;
+  --formitiva-border-focus: #22d3ee;
+
+  --formitiva-error-color: #fb7185;
+  --formitiva-success-color: #34d399;
+
+  --formitiva-option-menu-hover-bg: #636cf1;
+  --formitiva-border-radius: 10px;
+
+  --formitiva-shadow: 0 0 20px #636cf1;
+
+  /* Tooltip */
+  --formitiva-tooltip-color-bg: #282828;
+  --formitiva-tooltip-color: #F5F5F5;
+}