@formatica/react 0.1.2 → 0.2.3

package/README.md

@@ -1,54 +1,293 @@
 # @formatica/react
 
-Schema-driven form builder for React. Powered by `@formatica/core`, it provides components and hooks for building forms from JSON schemas with automatic validation and conditional logic.
+Schema-driven form builder for React. Powered by `@formatica/core`, it provides a context provider, components, and hooks for building forms from JSON schemas with automatic validation, conditional logic, theming, and dark mode.
 
 ## Installation
 
 ```bash
-npm install @formatica/react
+npm install @formatica/react libphonenumber-js
+# or
+yarn add @formatica/react libphonenumber-js
+```
+
+Import the CSS file in your entry point (required for theming and dark mode):
+
+```ts
+// The CSS file is published via @formatica/vue
+import "@formatica/vue/style.css";
+```
+
+`libphonenumber-js` is required for the phone field type. All other field types have zero external dependencies.
+
+## FormaticaProvider Setup
+
+Wrap your app (or a subtree) in `FormaticaProvider` to configure global defaults:
+
+```tsx
+import { FormaticaProvider } from "@formatica/react";
+import "@formatica/vue/style.css";
+
+function App() {
+  return (
+    <FormaticaProvider
+      config={{
+        theme: {
+          name: "my-theme",
+          colors: { primary: "#059669", error: "#dc2626" },
+          borders: { radius: "0.5rem" },
+        },
+        locale: "en",
+        // components: { rating: MyRatingField },  // register custom types globally
+      }}
+    >
+      <MyForms />
+    </FormaticaProvider>
+  );
+}
+```
+
+### FormaticaConfig
+
+```ts
+interface FormaticaConfig {
+  theme?: ThemeConfig;
+  locale?: string;
+  fallbackLocale?: string;
+  components?: Record<string, ComponentType<FieldComponentProps>>;
+}
+```
+
+Props passed directly to `FormBuilder` always override the provider config.
+
+### useFormaticaConfig()
+
+Access the global config from any component inside the provider:
+
+```tsx
+import { useFormaticaConfig } from "@formatica/react";
+
+function MyComponent() {
+  const config = useFormaticaConfig();
+  console.log(config.locale); // 'en'
+  console.log(config.theme); // ThemeConfig object
+  return <div>...</div>;
+}
 ```
 
 ## Quick Start
 
 ```tsx
-import { FormRenderer, useForm } from "@formatica/react";
-import type { FormSchema } from "@formatica/core";
+import { FormBuilder } from "@formatica/react";
+import type { FormSchema } from "@formatica/react";
 
 const schema: FormSchema = {
   fields: [
-    { name: "name", type: "text", label: "Name", required: true },
-    { name: "email", type: "email", label: "Email", required: true },
     {
-      name: "role",
-      type: "select",
-      label: "Role",
-      options: [
-        { label: "Developer", value: "dev" },
-        { label: "Designer", value: "design" },
+      type: "text",
+      name: "name",
+      label: "Full name",
+      rules: ["required", "minLength:2"],
+    },
+    {
+      type: "text",
+      name: "email",
+      label: "Email",
+      inputType: "email",
+      rules: ["required", "email"],
+    },
+    { type: "textarea", name: "message", label: "Message", rules: ["required"] },
+  ],
+};
+
+export default function ContactForm() {
+  async function handleSubmit(values: Record<string, unknown>) {
+    console.log("Form submitted:", values);
+  }
+
+  return (
+    <FormBuilder
+      schema={schema}
+      onSubmit={handleSubmit}
+      onError={(errors) => console.error("Validation failed:", errors)}
+    />
+  );
+}
+```
+
+## Schema Format
+
+The schema format is identical across all three packages. Fields and layout containers live together in a single tree. See the [`@formatica/core` README](../core/README.md) for full details.
+
+```ts
+const schema: FormSchema = {
+  fields: [
+    { type: "text", name: "email", label: "Email", rules: ["required", "email"] },
+    {
+      type: "row",
+      children: [
+        { type: "text", name: "city", label: "City", span: 8 },
+        { type: "text", name: "zip", label: "ZIP", span: 4 },
       ],
     },
   ],
 };
+```
 
-function App() {
-  const form = useForm(schema);
+## Custom Components
 
-  function handleSubmit(data: Record<string, unknown>) {
-    console.log("Form submitted:", data);
-  }
+### Via provider
 
-  return <FormRenderer form={form} onSubmit={handleSubmit} />;
+```tsx
+<FormaticaProvider
+  config={{
+    components: {
+      rating: MyRatingField,
+      text: MyCustomTextField,
+    },
+  }}
+>
+  <MyForms />
+</FormaticaProvider>
+```
+
+### Via props
+
+```tsx
+<FormBuilder
+  schema={schema}
+  components={{ rating: MyRatingField }}
+  onSubmit={handleSubmit}
+/>
+```
+
+Custom components receive `FieldComponentProps`:
+
+```ts
+interface FieldComponentProps {
+  field: FieldSchema;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+  errors: string[];
+  disabled: boolean;
 }
 ```
 
-## Features
+Components are wrapped by `BaseField` which handles label, error messages, and help text automatically.
+
+## useForm() Hook
+
+For advanced use cases where you need direct access to form state:
+
+```tsx
+import { useForm } from "@formatica/react";
+
+const form = useForm(schema, { locale: "en" });
+
+// State
+form.values; // Record<string, unknown>
+form.errors; // Record<string, string[]>
+form.touched; // Record<string, boolean>
+form.dirty; // Record<string, boolean>
+form.isValid; // boolean
+form.isDirty; // boolean
+form.isSubmitting; // boolean
+form.submitCount; // number
+
+// Methods
+form.setFieldValue("email", "test@example.com");
+form.getFieldValue("email");
+form.validate(); // validate all, returns Promise<boolean>
+form.validateField("email");
+form.reset();
+form.clear();
+form.setError("email", "Already taken");
+form.clearError("email");
+form.clearErrors();
+
+// Submit (validates first, then calls handler)
+form.submit(async (values) => {
+  await fetch("/api/users", { method: "POST", body: JSON.stringify(values) });
+});
+```
+
+## useFormContext()
+
+Access form state from any child component rendered inside `FormBuilder`:
+
+```tsx
+import { useFormContext } from "@formatica/react";
 
-- Schema-driven rendering with 15+ field types
-- Built-in validation with custom validator support
-- Conditional field visibility and behavior
-- Multi-step form support
-- Full TypeScript support
-- React 18 and 19 compatible
+function SubmitButton() {
+  const form = useFormContext();
+
+  return (
+    <button type="submit" disabled={form.isSubmitting || !form.isValid}>
+      {form.isSubmitting ? "Saving..." : "Submit"}
+    </button>
+  );
+}
+```
+
+## Theming
+
+### CSS variables
+
+The CSS file (`@formatica/vue/style.css`) maps ThemeConfig values to CSS custom properties:
+
+| Variable | Description |
+| --- | --- |
+| `--fc-color-primary` | Primary color (buttons, focus rings, accents) |
+| `--fc-color-error` | Error color (validation messages, borders) |
+| `--fc-color-success` | Success color |
+| `--fc-border-radius` | Border radius for inputs and buttons |
+| `--fc-color-border` | Default border color |
+| `--fc-color-border-focus` | Border color on focus |
+| `--fc-input-padding-x` | Horizontal input padding |
+| `--fc-input-padding-y` | Vertical input padding |
+
+You can also set CSS variables directly via a wrapper div:
+
+```tsx
+<div
+  style={
+    {
+      "--fc-color-primary": "#4f46e5",
+      "--fc-border-radius": "0.75rem",
+    } as React.CSSProperties
+  }
+>
+  <FormBuilder schema={schema} onSubmit={handleSubmit} />
+</div>
+```
+
+### Dark mode
+
+Add the `.dark` class to any ancestor element. Compatible with Tailwind's `darkMode: 'class'`:
+
+```html
+<html class="dark">
+  ...
+</html>
+```
+
+## TypeScript Support
+
+All types are exported from `@formatica/react` (re-exported from `@formatica/core`):
+
+```ts
+import type {
+  FormSchema,
+  FieldSchema,
+  SchemaNode,
+  ThemeConfig,
+  FormaticaConfig,
+  FieldComponentProps,
+  FormBuilderProps,
+  FormInstance,
+  UseFormOptions,
+} from "@formatica/react";
+```
 
 ## License
 

package/dist/components/BaseField.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface BaseFieldProps {
+    label?: string;
+    required?: boolean;
+    errors?: string[];
+    touched?: boolean;
+    helpText?: string;
+    tooltip?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    fieldName?: string;
+    children: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function BaseField({ label, required, errors, touched, helpText, tooltip, disabled, readOnly, fieldName, children, className, style, }: BaseFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BaseField.d.ts.map

package/dist/components/BaseField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseField.d.ts","sourceRoot":"","sources":["../../src/components/BaseField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC/B;AAED,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAc,EACd,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,GACR,EAAE,cAAc,2CA8EhB"}

package/dist/components/FormBuilder.d.ts

@@ -0,0 +1,22 @@
+import { FieldSchema, FormSchema, ThemeConfig } from '@formatica/core';
+import { ComponentType } from 'react';
+export interface FieldComponentProps {
+    field: FieldSchema;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+    errors: string[];
+    disabled: boolean;
+}
+export interface FormBuilderProps {
+    schema: FormSchema;
+    onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+    onError?: (errors: Record<string, string[]>) => void;
+    locale?: string;
+    fallbackLocale?: string;
+    theme?: ThemeConfig;
+    components?: Record<string, ComponentType<FieldComponentProps>>;
+    className?: string;
+}
+export declare function FormBuilder({ schema, onSubmit, onError, locale: localeProp, fallbackLocale: fallbackLocaleProp, theme: themeProp, components: componentsProp, className, }: FormBuilderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FormBuilder.d.ts.map

package/dist/components/FormBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormBuilder.d.ts","sourceRoot":"","sources":["../../src/components/FormBuilder.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAGR,WAAW,EACX,UAAU,EASV,WAAW,EACd,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAwB,MAAM,OAAO,CAAC;AAoBjE,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AA2pBD,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAM,EAAE,UAAU,EAClB,cAAc,EAAE,kBAAkB,EAClC,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,cAAc,EAC1B,SAAS,GACZ,EAAE,gBAAgB,2CAgGlB"}

package/dist/components/FormaticaProvider.d.ts

@@ -0,0 +1,15 @@
+import { ThemeConfig } from '@formatica/core';
+import { ComponentType, ReactNode } from 'react';
+import { FieldComponentProps } from './FormBuilder';
+export interface FormaticaConfig {
+    theme?: ThemeConfig;
+    locale?: string;
+    fallbackLocale?: string;
+    components?: Record<string, ComponentType<FieldComponentProps>>;
+}
+export declare function FormaticaProvider({ config, children, }: {
+    config: FormaticaConfig;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useFormaticaConfig(): FormaticaConfig;
+//# sourceMappingURL=FormaticaProvider.d.ts.map

package/dist/components/FormaticaProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormaticaProvider.d.ts","sourceRoot":"","sources":["../../src/components/FormaticaProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAiB,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,WAAW,eAAe;IAC5B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC;CACnE;AAID,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,QAAQ,GACX,EAAE;IACC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACvB,2CAIA;AAED,wBAAgB,kBAAkB,IAAI,eAAe,CAEpD"}

package/dist/components/fields/CheckboxField.d.ts

@@ -0,0 +1,10 @@
+export interface CheckboxFieldProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+}
+export declare function CheckboxField({ value, onChange, onBlur, disabled, label, className, }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxField.d.ts.map

package/dist/components/fields/CheckboxField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/CheckboxField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,KAAK,EACL,SAAS,GACZ,EAAE,kBAAkB,2CA+DpB"}

package/dist/components/fields/NumberField.d.ts

@@ -0,0 +1,17 @@
+export interface NumberFieldProps {
+    value: number | null;
+    onChange: (value: number | null) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    readOnly?: boolean;
+    prefix?: string;
+    suffix?: string;
+    className?: string;
+}
+export declare function NumberField({ value, onChange, onBlur, disabled, placeholder, min, max, step, precision, readOnly, prefix, suffix, className, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/components/fields/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/NumberField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,GAAG,EACH,GAAG,EACH,IAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,GACZ,EAAE,gBAAgB,2CAgElB"}

package/dist/components/fields/RadioField.d.ts

@@ -0,0 +1,17 @@
+export interface RadioOption {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+}
+export interface RadioFieldProps {
+    name: string;
+    value: unknown;
+    onChange: (value: string | number | boolean) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    options: RadioOption[];
+    inline?: boolean;
+    className?: string;
+}
+export declare function RadioField({ name, value, onChange, onBlur, disabled, options, inline, className, }: RadioFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RadioField.d.ts.map

package/dist/components/fields/RadioField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/RadioField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAO,EACP,MAAc,EACd,SAAS,GACZ,EAAE,eAAe,2CA0EjB"}

package/dist/components/fields/SelectField.d.ts

@@ -0,0 +1,19 @@
+export interface SelectOption {
+    label: string;
+    value: string | number | boolean;
+    disabled?: boolean;
+}
+export interface SelectFieldProps {
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    options: SelectOption[];
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    className?: string;
+}
+export declare function SelectField({ value, onChange, onBlur, disabled, placeholder, options, multiple, searchable, clearable, className, }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectField.d.ts.map

package/dist/components/fields/SelectField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SelectField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,YAAY;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAyB,EACzB,OAAO,EACP,QAAgB,EAChB,UAAkB,EAClB,SAAiB,EACjB,SAAS,GACZ,EAAE,gBAAgB,2CAqQlB"}

package/dist/components/fields/SliderField.d.ts

@@ -0,0 +1,13 @@
+export interface SliderFieldProps {
+    value: number | null;
+    onChange: (value: number) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    showTooltip?: boolean;
+    className?: string;
+}
+export declare function SliderField({ value, onChange, onBlur, disabled, min, max, step, showTooltip, className, }: SliderFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SliderField.d.ts.map

package/dist/components/fields/SliderField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SliderField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,WAAkB,EAClB,SAAS,GACZ,EAAE,gBAAgB,2CAmDlB"}

package/dist/components/fields/SwitchField.d.ts

@@ -0,0 +1,11 @@
+export interface SwitchFieldProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    activeLabel?: string;
+    inactiveLabel?: string;
+    className?: string;
+}
+export declare function SwitchField({ value, onChange, onBlur, disabled, activeLabel, inactiveLabel, className, }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SwitchField.d.ts.map

package/dist/components/fields/SwitchField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/SwitchField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,aAAa,EACb,SAAS,GACZ,EAAE,gBAAgB,2CAiDlB"}

package/dist/components/fields/TextField.d.ts

@@ -0,0 +1,15 @@
+export interface TextFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    inputType?: "text" | "email" | "password" | "url" | "tel" | "search";
+    readOnly?: boolean;
+    prefix?: string;
+    suffix?: string;
+    maxLength?: number;
+    className?: string;
+}
+export declare function TextField({ value, onChange, onBlur, disabled, placeholder, inputType, readOnly, prefix, suffix, maxLength, className, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/components/fields/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,SAAkB,EAClB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,GACZ,EAAE,cAAc,2CAiDhB"}

package/dist/components/fields/TextareaField.d.ts

@@ -0,0 +1,14 @@
+export interface TextareaFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    placeholder?: string;
+    rows?: number;
+    readOnly?: boolean;
+    autoResize?: boolean;
+    maxLength?: number;
+    className?: string;
+}
+export declare function TextareaField({ value, onChange, onBlur, disabled, placeholder, rows, readOnly, autoResize, maxLength, className, }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TextareaField.d.ts.map

package/dist/components/fields/TextareaField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.d.ts","sourceRoot":"","sources":["../../../src/components/fields/TextareaField.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,GACZ,EAAE,kBAAkB,2CA2CpB"}