@omnitron-dev/prism 0.1.3 → 0.3.0

package/dist/components/field/field-code.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Field.Code Component
+ *
+ * React Hook Form integrated OTP (One-Time Password) input.
+ * Provides a professional code/PIN entry experience.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+/**
+ * Props for Field.Code component.
+ */
+export interface FieldCodeProps {
+    /** Field name in the form */
+    name: string;
+    /** Number of code digits (default: 6) */
+    length?: number;
+    /** Placeholder character (default: '-') */
+    placeholder?: string;
+    /** Helper text shown below the input */
+    helperText?: ReactNode;
+    /** Auto-focus the first input on mount */
+    autoFocus?: boolean;
+    /** Disable all inputs */
+    disabled?: boolean;
+    /** Input type: text, number, or password */
+    type?: 'text' | 'number' | 'password';
+    /** Gap between inputs (CSS value) */
+    gap?: number | string;
+    /** Width of each input field (CSS value) */
+    inputWidth?: number | string;
+    /** Slot props for nested components */
+    slotProps?: {
+        /** Wrapper Box props */
+        wrapper?: Partial<BoxProps>;
+        /** Individual TextField props */
+        textField?: Partial<TextFieldProps>;
+        /** FormHelperText props */
+        helperText?: Partial<FormHelperTextProps>;
+    };
+}
+/**
+ * Field.Code - OTP/PIN code input with React Hook Form integration.
+ *
+ * Features:
+ * - Automatic focus navigation between digits
+ * - Paste support for full codes
+ * - Backspace navigation
+ * - Configurable length and styling
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.Code
+ *     name="verificationCode"
+ *     autoFocus
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <Field.Code
+ *   name="pin"
+ *   length={4}
+ *   type="password"
+ *   inputWidth={56}
+ *   gap={2}
+ *   slotProps={{
+ *     textField: { variant: 'filled' },
+ *   }}
+ * />
+ * ```
+ */
+export declare function FieldCode({ name, length, placeholder, helperText, autoFocus, disabled, type, gap, inputWidth, slotProps, }: FieldCodeProps): ReactNode;
+//# sourceMappingURL=field-code.d.ts.map

package/dist/components/field/field-code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-code.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-code.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAA8C,MAAM,OAAO,CAAC;AAMnF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAMxE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtC,qCAAqC;IACrC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE;QACV,wBAAwB;QACxB,OAAO,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;QAC5B,iCAAiC;QACjC,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;QACpC,2BAA2B;QAC3B,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC3C,CAAC;CACH;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,MAAU,EACV,WAAiB,EACjB,UAAU,EACV,SAAiB,EACjB,QAAgB,EAChB,IAAa,EACb,GAAS,EACT,UAAe,EACf,SAAS,GACV,EAAE,cAAc,GAAG,SAAS,CAyK5B"}

package/dist/components/field/field-country-select.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Field.CountrySelect Component
+ *
+ * React Hook Form integrated country selector with flag icons.
+ * Provides searchable country selection with ISO code support.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { TextFieldProps } from '@mui/material/TextField';
+/**
+ * Country data structure
+ */
+export interface Country {
+    /** ISO 3166-1 alpha-2 code */
+    code: string;
+    /** Country name */
+    label: string;
+    /** Dial code with + prefix */
+    phone: string;
+    /** Flag emoji */
+    flag: string;
+}
+/**
+ * Props for Field.CountrySelect component.
+ */
+export interface FieldCountrySelectProps extends Omit<AutocompleteProps<Country, boolean, boolean, false>, 'options' | 'renderInput' | 'value' | 'onChange' | 'getOptionLabel' | 'isOptionEqualToValue'> {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Helper text shown below the field */
+    helperText?: ReactNode;
+    /** Return value type: 'code' returns ISO code, 'label' returns country name */
+    getValue?: 'code' | 'label' | 'full';
+    /** Custom countries data (overrides default) */
+    countries?: Country[];
+    /** TextField props for customization */
+    textFieldProps?: Partial<TextFieldProps>;
+}
+/**
+ * Field.CountrySelect - Country selector with React Hook Form integration.
+ *
+ * Features:
+ * - Searchable country list with flag icons
+ * - Return ISO code, country name, or full object
+ * - Custom country data support
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.CountrySelect
+ *     name="country"
+ *     label="Country"
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Return ISO code instead of full object
+ * <Field.CountrySelect
+ *   name="countryCode"
+ *   label="Country"
+ *   getValue="code"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple selection
+ * <Field.CountrySelect
+ *   name="visitedCountries"
+ *   label="Countries Visited"
+ *   multiple
+ *   getValue="code"
+ * />
+ * ```
+ */
+export declare function FieldCountrySelect({ name, label, placeholder, helperText, getValue, countries: customCountries, textFieldProps, multiple, disabled, ...other }: FieldCountrySelectProps): ReactNode;
+//# sourceMappingURL=field-country-select.d.ts.map

package/dist/components/field/field-country-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-country-select.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-country-select.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAMvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,EACnD,SAAS,GAAG,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,gBAAgB,GAAG,sBAAsB,CAC7F;IACC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACrC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IACtB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC1C;AA4KD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAiB,EACjB,SAAS,EAAE,eAAe,EAC1B,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,SAAS,CAkHrC"}

package/dist/components/field/field-date-picker.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Field.DatePicker Component
+ *
+ * React Hook Form integrated date picker using MUI X DatePickers.
+ * Consistent with Field.DateTimePicker and Field.TimePicker.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { Dayjs } from 'dayjs';
+/**
+ * Props for Field.DatePicker component.
+ */
+export interface FieldDatePickerProps {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: ReactNode;
+    /** Helper text shown below the field */
+    helperText?: ReactNode;
+    /** TextField props for customization */
+    textFieldProps?: Partial<TextFieldProps>;
+    /** Disable the field */
+    disabled?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Minimum selectable date */
+    minDate?: Dayjs;
+    /** Maximum selectable date */
+    maxDate?: Dayjs;
+    /** Disable past dates */
+    disablePast?: boolean;
+    /** Disable future dates */
+    disableFuture?: boolean;
+    /** Views to display */
+    views?: Array<'year' | 'month' | 'day'>;
+    /** Open picker to specific view */
+    openTo?: 'year' | 'month' | 'day';
+    /** Format for display */
+    format?: string;
+}
+/**
+ * Field.DatePicker - Date picker with React Hook Form integration.
+ *
+ * Uses @mui/x-date-pickers DatePicker for a polished calendar UI.
+ * Stores value as ISO string for serialization compatibility.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.DatePicker name="birthDate" label="Birth Date" />
+ *   <Field.DatePicker name="deadline" label="Deadline" disablePast />
+ * </FormProvider>
+ * ```
+ */
+export declare function FieldDatePicker({ name, label, helperText, textFieldProps, disabled, readOnly, minDate, maxDate, disablePast, disableFuture, views, openTo, format, }: FieldDatePickerProps): ReactNode;
+//# sourceMappingURL=field-date-picker.d.ts.map

package/dist/components/field/field-date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-date-picker.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAQnC;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;IACxC,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAClC,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAqBD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,WAAW,EACX,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE,oBAAoB,GAAG,SAAS,CA+ClC"}

package/dist/components/field/field-datetime-picker.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Field.DateTimePicker Component
+ *
+ * React Hook Form integrated date-time picker using MUI X DatePickers.
+ * Combines date and time selection in a single component.
+ *
+ * @module components/field
+ */
+import type { ReactNode } from 'react';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { Dayjs } from 'dayjs';
+/**
+ * Props for Field.DateTimePicker component.
+ */
+export interface FieldDateTimePickerProps {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: ReactNode;
+    /** Helper text shown below the field */
+    helperText?: ReactNode;
+    /** TextField props for customization */
+    textFieldProps?: Partial<TextFieldProps>;
+    /** Disable the field */
+    disabled?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Minutes step for time selection */
+    minutesStep?: number;
+    /** Use 12-hour format with AM/PM */
+    ampm?: boolean;
+    /** Minimum selectable datetime */
+    minDateTime?: Dayjs;
+    /** Maximum selectable datetime */
+    maxDateTime?: Dayjs;
+    /** Disable past dates */
+    disablePast?: boolean;
+    /** Disable future dates */
+    disableFuture?: boolean;
+    /** Views to display */
+    views?: Array<'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds'>;
+    /** Open picker to specific view */
+    openTo?: 'year' | 'month' | 'day' | 'hours' | 'minutes' | 'seconds';
+    /** Format for display */
+    format?: string;
+}
+/**
+ * Field.DateTimePicker - Combined date and time picker with React Hook Form integration.
+ *
+ * Uses @mui/x-date-pickers DateTimePicker for comprehensive date-time selection.
+ * Automatically normalizes various date/time value types to Dayjs.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.DateTimePicker
+ *     name="eventStart"
+ *     label="Event Start"
+ *   />
+ *   <Field.DateTimePicker
+ *     name="eventEnd"
+ *     label="Event End"
+ *     ampm={false}
+ *     minutesStep={15}
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With date constraints
+ * <Field.DateTimePicker
+ *   name="appointment"
+ *   label="Appointment"
+ *   minDateTime={dayjs()}
+ *   maxDateTime={dayjs().add(30, 'day')}
+ *   disablePast
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom views
+ * <Field.DateTimePicker
+ *   name="scheduledAt"
+ *   label="Schedule"
+ *   views={['year', 'month', 'day', 'hours', 'minutes']}
+ *   textFieldProps={{
+ *     variant: 'filled',
+ *     size: 'small',
+ *   }}
+ * />
+ * ```
+ */
+export declare function FieldDateTimePicker({ name, label, helperText, textFieldProps, disabled, readOnly, minutesStep, ampm, minDateTime, maxDateTime, disablePast, disableFuture, views, openTo, format, }: FieldDateTimePickerProps): ReactNode;
+//# sourceMappingURL=field-datetime-picker.d.ts.map

package/dist/components/field/field-datetime-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-datetime-picker.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-datetime-picker.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAWnC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC,CAAC;IAC1E,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,UAAU,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,WAAW,EACX,WAAW,EACX,WAAW,EACX,aAAa,EACb,KAAK,EACL,MAAM,EACN,MAAM,GACP,EAAE,wBAAwB,GAAG,SAAS,CA0CtC"}

package/dist/components/field/field-editor.d.ts

@@ -0,0 +1,218 @@
+/**
+ * Field.Editor Component
+ *
+ * Rich text editor with React Hook Form integration.
+ * Provides both a basic textarea fallback and a headless API for custom editors (TipTap, etc.)
+ *
+ * @module components/field
+ */
+import type { ReactNode, ComponentProps, ReactElement } from 'react';
+import { type RegisterOptions } from 'react-hook-form';
+import Box from '@mui/material/Box';
+/**
+ * Toolbar configuration for the editor.
+ */
+export interface EditorToolbarConfig {
+    /** Enable bold formatting */
+    bold?: boolean;
+    /** Enable italic formatting */
+    italic?: boolean;
+    /** Enable underline formatting */
+    underline?: boolean;
+    /** Enable strikethrough formatting */
+    strikethrough?: boolean;
+    /** Enable heading levels */
+    headings?: boolean | number[];
+    /** Enable bullet list */
+    bulletList?: boolean;
+    /** Enable numbered list */
+    orderedList?: boolean;
+    /** Enable blockquote */
+    blockquote?: boolean;
+    /** Enable code block */
+    codeBlock?: boolean;
+    /** Enable link insertion */
+    link?: boolean;
+    /** Enable image insertion */
+    image?: boolean;
+    /** Enable text alignment */
+    align?: boolean;
+    /** Enable undo/redo */
+    history?: boolean;
+}
+/**
+ * Props passed to custom editor render function.
+ */
+export interface EditorRenderProps {
+    /** Current HTML content */
+    value: string;
+    /** Update handler - call with new HTML content */
+    onChange: (html: string) => void;
+    /** Blur handler for form validation */
+    onBlur: () => void;
+    /** Error state */
+    error: boolean;
+    /** Field name */
+    name: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read-only state */
+    readOnly?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Toolbar configuration */
+    toolbar?: EditorToolbarConfig;
+    /** Minimum height */
+    minHeight?: number | string;
+    /** Maximum height */
+    maxHeight?: number | string;
+    /** Custom CSS class */
+    className?: string;
+    /** Aria label for accessibility */
+    'aria-label'?: string;
+    /** Aria described-by for error messages */
+    'aria-describedby'?: string;
+}
+/**
+ * Props for Field.Editor component.
+ */
+export interface FieldEditorProps {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Helper text displayed below the editor */
+    helperText?: ReactNode;
+    /** Validation rules for react-hook-form */
+    rules?: RegisterOptions;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read-only state */
+    readOnly?: boolean;
+    /** Toolbar configuration */
+    toolbar?: EditorToolbarConfig;
+    /** Minimum height */
+    minHeight?: number | string;
+    /** Maximum height */
+    maxHeight?: number | string;
+    /** Required field indicator */
+    required?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Custom editor render function (for TipTap, etc.) */
+    renderEditor?: (props: EditorRenderProps) => ReactElement;
+    /** Additional props for the wrapper Box */
+    sx?: ComponentProps<typeof Box>['sx'];
+    /** Aria label for accessibility */
+    'aria-label'?: string;
+}
+/**
+ * Default toolbar configuration.
+ */
+export declare const DEFAULT_EDITOR_TOOLBAR: EditorToolbarConfig;
+/**
+ * Field.Editor - Rich text editor with React Hook Form integration.
+ *
+ * Supports both a basic textarea fallback and custom editor implementations.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (textarea fallback)
+ * <FormProvider {...methods}>
+ *   <Field.Editor
+ *     name="content"
+ *     label="Article Content"
+ *     placeholder="Write your article..."
+ *     minHeight={300}
+ *   />
+ * </FormProvider>
+ *
+ * // With custom TipTap editor
+ * <Field.Editor
+ *   name="content"
+ *   label="Article Content"
+ *   renderEditor={({ value, onChange, onBlur, error }) => (
+ *     <TipTapEditor
+ *       content={value}
+ *       onUpdate={({ editor }) => onChange(editor.getHTML())}
+ *       onBlur={onBlur}
+ *       editorProps={{
+ *         attributes: {
+ *           class: error ? 'editor-error' : '',
+ *         },
+ *       }}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function FieldEditor({ name, label, helperText, rules, placeholder, disabled, readOnly, toolbar, minHeight, maxHeight, required, fullWidth, renderEditor, sx, 'aria-label': ariaLabel, }: FieldEditorProps): ReactNode;
+/**
+ * Props for Field.CustomEditor component.
+ */
+export interface FieldCustomEditorProps {
+    /** Field name in the form */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Helper text displayed below the editor */
+    helperText?: ReactNode;
+    /** Validation rules for react-hook-form */
+    rules?: RegisterOptions;
+    /** Required field indicator */
+    required?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional props for the wrapper Box */
+    sx?: ComponentProps<typeof Box>['sx'];
+    /** Render function for custom editor */
+    children: (props: {
+        value: string;
+        onChange: (value: string) => void;
+        onBlur: () => void;
+        error: boolean;
+        errorMessage?: string;
+        name: string;
+        disabled?: boolean;
+    }) => ReactElement;
+}
+/**
+ * Field.CustomEditor - Headless editor field with render prop pattern.
+ *
+ * Provides maximum flexibility for integrating any editor library.
+ *
+ * @example
+ * ```tsx
+ * import { useEditor, EditorContent } from '@tiptap/react';
+ * import StarterKit from '@tiptap/starter-kit';
+ *
+ * function ArticleForm() {
+ *   return (
+ *     <FormProvider {...methods}>
+ *       <Field.CustomEditor name="content" label="Content" required>
+ *         {({ value, onChange, onBlur, error }) => {
+ *           const editor = useEditor({
+ *             extensions: [StarterKit],
+ *             content: value,
+ *             onUpdate: ({ editor }) => onChange(editor.getHTML()),
+ *             onBlur: () => onBlur(),
+ *           });
+ *
+ *           return (
+ *             <Box sx={{ border: error ? '1px solid red' : '1px solid gray' }}>
+ *               <EditorContent editor={editor} />
+ *             </Box>
+ *           );
+ *         }}
+ *       </Field.CustomEditor>
+ *     </FormProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function FieldCustomEditor({ name, label, helperText, rules, required, fullWidth, disabled, sx, children, }: FieldCustomEditorProps): ReactNode;
+//# sourceMappingURL=field-editor.d.ts.map

package/dist/components/field/field-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-editor.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-editor.tsx"],"names":[],"mappings":"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"}

package/dist/components/field/field-multi-checkbox.d.ts

@@ -0,0 +1,91 @@
+/**
+ * Field.MultiCheckbox Component
+ *
+ * React Hook Form integrated multiple checkbox group.
+ * Manages array values for multi-select scenarios.
+ *
+ * @module components/field
+ */
+import { type ReactNode } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { FormControlProps } from '@mui/material/FormControl';
+import type { FormGroupProps } from '@mui/material/FormGroup';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+import type { FormLabelProps } from '@mui/material/FormLabel';
+/**
+ * Option for multi-checkbox selection
+ */
+export interface MultiCheckboxOption {
+    /** Display label */
+    label: string;
+    /** Value stored when selected */
+    value: string;
+    /** Disable this option */
+    disabled?: boolean;
+}
+/**
+ * Props for Field.MultiCheckbox component.
+ */
+export interface FieldMultiCheckboxProps extends Omit<FormGroupProps, 'onChange'> {
+    /** Field name in the form */
+    name: string;
+    /** Label for the checkbox group */
+    label?: string;
+    /** Available options */
+    options: MultiCheckboxOption[];
+    /** Helper text shown below the group */
+    helperText?: ReactNode;
+    /** Slot props for nested components */
+    slotProps?: {
+        /** Wrapper FormControl props */
+        wrapper?: Partial<FormControlProps>;
+        /** Individual Checkbox props */
+        checkbox?: Partial<CheckboxProps>;
+        /** FormLabel props */
+        formLabel?: Partial<FormLabelProps>;
+        /** FormHelperText props */
+        helperText?: Partial<FormHelperTextProps>;
+        /** Container Box props */
+        container?: Partial<BoxProps>;
+    };
+}
+/**
+ * Field.MultiCheckbox - Multiple checkbox group with React Hook Form integration.
+ *
+ * Stores selected values as an array. Toggle logic automatically adds/removes
+ * values when checkboxes are clicked.
+ *
+ * @example
+ * ```tsx
+ * <FormProvider {...methods}>
+ *   <Field.MultiCheckbox
+ *     name="interests"
+ *     label="Select your interests"
+ *     options={[
+ *       { label: 'Technology', value: 'tech' },
+ *       { label: 'Sports', value: 'sports' },
+ *       { label: 'Music', value: 'music' },
+ *       { label: 'Art', value: 'art' },
+ *     ]}
+ *   />
+ * </FormProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Horizontal layout
+ * <Field.MultiCheckbox
+ *   name="features"
+ *   label="Enable features"
+ *   row
+ *   options={[
+ *     { label: 'Dark Mode', value: 'dark' },
+ *     { label: 'Notifications', value: 'notify' },
+ *     { label: 'Auto-save', value: 'autosave', disabled: true },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function FieldMultiCheckbox({ name, label, options, helperText, slotProps, row, ...other }: FieldMultiCheckboxProps): ReactNode;
+//# sourceMappingURL=field-multi-checkbox.d.ts.map

package/dist/components/field/field-multi-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-multi-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-multi-checkbox.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAM9D;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IAC/E,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,wCAAwC;IACxC,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uCAAuC;IACvC,SAAS,CAAC,EAAE;QACV,gCAAgC;QAChC,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACpC,gCAAgC;QAChC,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;QAClC,sBAAsB;QACtB,SAAS,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;QACpC,2BAA2B;QAC3B,UAAU,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAC1C,0BAA0B;QAC1B,SAAS,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;KAC/B,CAAC;CACH;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,UAAU,EACV,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,SAAS,CAsErC"}