@react-fabric/form 1.0.0-beta.51 → 1.0.0-beta.52

package/dist/types/form/Controller.d.ts

@@ -17,4 +17,49 @@ export interface ControllerProps {
         ref?: React.Ref<HTMLInputElement>;
     }) => ReactElement);
 }
+/**
+ * This component is used to wrap form controls
+ * and provide them with the necessary props and state management.
+ *
+ * It uses the `Controller` component from `react-hook-form`
+ * to manage the form state and validation.
+ *
+ * It accepts a `name` prop to identify the form control,
+ * and a `children` prop which can either be a React element
+ * or a function that receives the necessary props to render the control.
+ *
+ * The component will pass down the following props to the child:
+ * - `name`: the name of the form control
+ * - `error`: any validation error message
+ * - `checked`: whether the control is checked (for checkboxes/radios)
+ * - `value`: the current value of the control
+ * - `invalid`: whether the control is invalid
+ * - `readOnly`: whether the control is read-only (disabled during submission)
+ * - `disabled`: whether the control is disabled
+ * - `onBlur`: function to call when the control loses focus
+ * - `onChange`: function to call when the control value changes
+ * - `ref`: a ref to the control element
+ * * The component also handles the `ref` prop to ensure that it is passed correctly
+ * to the child component, allowing for proper focus management and DOM access.
+ *
+ * @param {ControllerProps} props - The properties for the Controller component.
+ * @returns {JSX.Element} The rendered Controller component.
+ *
+ * @example
+ * ```jsx
+ * <Controller
+ *   name="username"
+ *   children={({ name, error, checked, value, invalid, readOnly, onChange }) => (
+ *     <input
+ *       type="text"
+ *       name={name}
+ *       onChange={onChange}
+ *       readOnly={readOnly}
+ *       aria-invalid={invalid}
+ *       value={value}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
 export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/form/Form.d.ts

@@ -33,5 +33,36 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      */
     onSubmit?: (values: K) => void;
 }
-export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Form component for managing form state and validation using react-hook-form and yup.
+ * It provides a simple interface for form handling, including submission, validation, and value management.
+ * It supports nested form structures and allows for custom validation schemas using Yup.
+ *
+ * @param {FormProps<K>} props - The properties for the Form component.
+ * @returns {JSX.Element} The rendered Form component.
+ *
+ * @example
+ * ```jsx
+ * <Form
+ *   formRef={formRef}
+ *   schema={yup.object().shape({
+ *     name: yup.string().required("Name is required"),
+ *     email: yup.string().email("Invalid email").required("Email is required"),
+ *   })}
+ *   defaultValues={{ name: "", email: "" }}
+ *   onSubmit={(values) => {
+ *     console.log("Form submitted with values:", values);
+ *   }}
+ * >
+ *   <input name="name" ref={form.register} placeholder="Name" />
+ *   <input name="email" ref={form.register} placeholder="Email" />
+ *   <button type="submit">Submit</button>
+ * </Form>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/form-form--docs} for the properties that can be passed to this component.
+ * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
+ * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
+ */
+export declare const Form: <K extends KeyValue>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/hooks/useFileUploader.d.ts

@@ -12,6 +12,22 @@ interface FileInfo {
     progress?: number;
     abort?: AbortController["abort"];
 }
+/**
+ * useFileUploader hook provides a way to handle file uploads
+ * with progress tracking, error handling, and file management.
+ * It uses a reducer to manage the state of uploaded files and their statuses.
+ *
+ * @param uploader - The function that handles the file upload.
+ * @param initialList - Initial list of files to be managed by the uploader.
+ * @param multiple - Whether to allow multiple file uploads or not.
+ * @returns An object containing methods to upload, remove, retry files,
+ *          and the current state of the uploader including pending uploads and file list.
+ *
+ * @example
+ * ```jsx
+ * const { upload, remove, retry, state } = useFileUploader(uploader, initialList, multiple);
+ * ```
+ */
 export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
     upload: (files: FileList | null) => void;
     remove: (key: string) => void;

package/dist/types/hooks/useFormBuilder.d.ts

@@ -2,7 +2,36 @@ import { yup } from "@react-fabric/utilities";
 import { type BaseSelectProps } from "../types";
 import { type FormSchema } from "../types/schema";
 import { type UploadHandler } from "./useFileUploader";
-export declare const useFormBuilder: <T extends unknown = string>(schema: FormSchema, options?: {
+/**
+ * useFormBuilder hook to create a form definition based on a schema.
+ * It generates a Yup validation schema and a form definition component.
+ *
+ * @param {FormSchema} schema - The schema defining the form fields.
+ * @param {Object} options - Optional parameters for the form builder.
+ * @returns An object containing the form definition and the Yup validation schema.
+ *
+ * @example
+ * ```jsx
+ * const { formDef, schemaDef } = useFormBuilder(schema, {
+ *   prefix: "form",
+ *   inline: true,
+ *   fileUrl: (path) => `/files/${path}`,
+ *   uploadHandler: async (file) => {
+ *    // handle file upload
+ *   },
+ *  optionLists: {
+ *    // define option lists for select fields
+ *  }
+ * * });
+ * <FormBuilder
+ *   schema={schemaDef}
+ *   onSubmit={(data) => console.log(data)}
+ * >
+ *   {formDef}
+ * </FormBuilder>
+ * ```
+ */
+export declare const useFormBuilder: <T extends AnyObject = string>(schema: FormSchema, options?: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;

package/dist/types/input/ArrayInput.d.ts

@@ -94,4 +94,43 @@ export interface ArrayInputProps<T extends AnyObject = string> {
      */
     labelWidth?: string;
 }
-export declare const ArrayInput: <T extends unknown = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ArrayInput component for managing an array of items in a form.
+ * It allows adding, removing, and sorting items within the array.
+ * It integrates with react-hook-form for form state management and validation.
+ * It supports fixed-length lists, custom add/remove handlers, and can display validation errors.
+ * It also provides options for inline display and custom button positioning.
+ *
+ * It uses the `useFieldArray` hook from `react-hook-form` to manage the array state and provides a simple interface for adding and removing items.
+ *
+ * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
+ *
+ * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
+ * @returns {JSX.Element} The rendered ArrayInput component.
+ *
+ * @example
+ * ```jsx
+ * <ArrayInput
+ *   name="items"
+ *   label="Items"
+ *   addLabel="Add Item"
+ *   onAdd={() => ({ name: "", value: "" })}
+ *   onRemove={(item, index) => console.log("Removed item:", item, "at index:", index)}
+ *   onBeforeRemove={(item, index) => confirm(`Are you sure you want to remove item at index ${index}?`)}
+ *   canRemove={({ item, index, lastItem }) => !lastItem} // Prevent removing the last item
+ * >
+ *   {({ index, name }) => (
+ *     <Input
+ *       name={name}
+ *       label={`Item ${index + 1}`}
+ *       placeholder="Enter item value"
+ *       required={index === 0} // Make the first item required
+ *     />
+ *   )}
+ * </ArrayInput>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/api/usefieldarray} for more details on `useFieldArray`.
+ * @see {@link https://react-dnd.github.io/react-dnd/about} for more details on DnD context and sorting.
+ */
+export declare const ArrayInput: <T extends AnyObject = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/AvatarInput.d.ts

@@ -31,4 +31,12 @@ export interface Props extends RefProp {
      */
     onChange?: (path: string) => void;
 }
+/**
+ * Avatar input component for uploading and displaying user avatars.
+ * It allows users to select an image file, upload it, and display the avatar.
+ * It also provides a way to remove the uploaded file and shows upload progress.
+ *
+ * @param {Props} props - The properties for the AvatarInput component.
+ * @returns {JSX.Element} - The rendered AvatarInput component.
+ */
 export declare const AvatarInput: ({ size, avatarName, value, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Checkbox.d.ts

@@ -42,5 +42,14 @@ interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
+/**
+ * Checkbox component for rendering a checkbox input with label and error handling.
+ * It supports custom icons for checked and unchecked states, and handles disabled and invalid states.
+ * The component uses a deferred value to manage the checked state, ensuring smooth updates.
+ * It also provides an error icon to indicate validation errors.
+ *
+ * @param {CheckboxProps} props - The properties for the Checkbox component.
+ * @returns {JSX.Element} The rendered Checkbox component.
+ */
 export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, required, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/ColorInput.d.ts

@@ -7,4 +7,17 @@ export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange"
      */
     showPicker?: boolean;
 }
+/**
+ * Color input component that allows users to select a color
+ * and optionally use an eye dropper to pick a color from the screen.
+ * It uses the Floating UI library for positioning the color picker.
+ * It also provides a button to clear the selected color.
+ *
+ * This component is a wrapper around the `ColorPicker` component
+ * and provides additional functionality such as showing an eye dropper
+ * and handling the color selection state.
+ *
+ * @param {ColorInputProps} props - The properties for the ColorInput component.
+ * @returns {JSX.Element} - The rendered ColorInput component.
+ */
 export declare const ColorInput: ({ ref, required, disabled, readOnly, invalid, error, value, showPicker, defaultColor, onBlur, onFocus, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/ColorPicker.d.ts

@@ -21,4 +21,14 @@ export interface ColorProps {
      */
     onChange?: (color?: string) => void;
 }
+/**
+ * ColorPicker component allows users to select a color using a color picker UI.
+ * It supports swatches, alpha transparency, and custom styles.
+ * The component uses the `react-color` library for the color picker functionality.
+ *
+ * @param {ColorProps} props - The properties for the ColorPicker component.
+ * @returns {JSX.Element} The rendered ColorPicker component.
+ *
+ * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
+ */
 export declare const ColorPicker: FC<ColorProps>;

package/dist/types/input/DateInput.d.ts

@@ -16,4 +16,13 @@ export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement>
      */
     max?: DateLike;
 }
+/**
+ * Date input component that allows users to select a date or datetime.
+ * It uses the Floating UI library for positioning the date picker.
+ * It also provides a button to clear the selected date.
+ * The component supports both date and datetime types, with appropriate formatting.
+ *
+ * @param {DateProps} props - The properties for the DateInput component.
+ * @returns {JSX.Element} - The rendered DateInput component.
+ */
 export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Field.d.ts

@@ -38,4 +38,9 @@ export interface FieldProps extends ChildrenProp, CssProp {
     plain?: boolean;
     vertical?: boolean;
 }
+/**
+ * Field component for rendering multiple form fields under a single label.
+ * It supports various properties for customization, including label, info, required state,
+ * and styling options.
+ */
 export declare const Field: ({ children, vertical, noOutline, plain, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/File.d.ts

@@ -14,4 +14,13 @@ export interface FileInputProps extends InputProps<AnyObject>, RefProp<HTMLInput
      */
     accept?: string;
 }
+/**
+ * File input component that allows users to select files from their system.
+ * It supports multiple file selection and displays a list of selected files.
+ * The component also provides functionality to remove files from the list.
+ * It handles file changes, invalid states, and read-only or disabled states.
+ *
+ * @param {FileInputProps} props - The properties for the FileInput component.
+ * @returns {JSX.Element} - The rendered FileInput component.
+ */
 export declare const FileInput: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, name, accept, showList, multiple, onChange, onEnterPressed, ...rest }: FileInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Hidden.d.ts

@@ -12,5 +12,13 @@ interface Props {
      */
     onChange?: (value: AnyObject) => void;
 }
+/**
+ * Hidden input component to handle hidden values in forms.
+ * It will trigger the onChange handler with the hidden value after a short delay.
+ * This is useful for cases where you need to update the form state without user interaction.
+ *
+ * @param {Object} props - Component properties.
+ * @returns {JSX.Element} The rendered hidden input field and error icon.
+ */
 export declare const HiddenInput: ({ hiddenValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/Input.d.ts

@@ -6,4 +6,12 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
      */
     type?: "email" | "file" | "search" | "tel" | "text" | "url";
 }
+/**
+ * This component is used to render a text input field with various properties such as name, value, invalid state, read-only, disabled, required, placeholder, autoFocus, error message, monospace font option, and event handlers for blur, focus, change, and enter key press.
+ * It also includes a clear button that appears when there is a value in the input field, allowing users to clear the input easily.
+ * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
+ *
+ * @param {TextInputProps} props - The properties for the text input component.
+ * @returns {JSX.Element} - A JSX element representing the text input field.
+ */
 export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, monospace, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Number.d.ts

@@ -14,4 +14,12 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
      */
     step?: number;
 }
+/**
+ * This component allows users to input numeric values with optional minimum, maximum, and step constraints.
+ * It provides a clear interface for entering numbers, with support for validation and accessibility features.
+ * It also includes a clear button to reset the input value.
+ *
+ * @param {NumberProps} props - The properties for the Number input component.
+ * @returns {JSX.Element} The rendered Number input component.
+ */
 export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onBlur, onFocus, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Password.d.ts

@@ -10,4 +10,10 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
      */
     strength?: number;
 }
+/**
+ * Password input component with optional strength meter and toggle visibility.
+ *
+ * @param {PasswordProps} props - The properties for the Password component.
+ * @returns {JSX.Element} The rendered Password input component.
+ */
 export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Radio.d.ts

@@ -38,4 +38,13 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
      */
     iconChecked?: string;
 }
+/**
+ * Radio input component with custom icons and label.
+ *
+ * This component renders a radio button with an optional label and custom icons for checked and unchecked states.
+ * It supports disabled and invalid states, and allows for custom width.
+ *
+ * @param {RadioProps} props - The properties for the Radio component.
+ * @returns {JSX.Element} The rendered Radio input component.
+ */
 export declare const Radio: ({ ref, name, label, value, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/RadioGroup.d.ts

@@ -42,4 +42,12 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      */
     onChange?: (value: AnyObject) => void;
 }
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * It allows for customization of the label, options, and layout.
+ * The component supports inline and vertical orientations, and can handle change events.
+ *
+ * @param {RadioGroupProps} props - The properties for the RadioGroup component.
+ * @returns {JSX.Element} The rendered RadioGroup component.
+ */
 export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/RangeSlider.d.ts

@@ -54,6 +54,14 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
     onSlide?: (val: number) => void;
 }
 /**
- * Number Range input
+ * RangeSlider component for rendering a range slider input.
+ * It supports vertical orientation, custom colors, step increments,
+ * min/max values, and display of labels and value tooltips.
+ * The component uses the Ranger library for handling the slider functionality.
+ * It also provides error handling and supports disabled and read-only states.
+ * The component is designed to be flexible and customizable, allowing for various configurations.
+ *
+ * @param {RangeProps} props - The properties for the RangeSlider component.
+ * @returns {JSX.Element} The rendered RangeSlider component.
  */
 export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -18,4 +18,13 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      */
     onSearch?: (query?: string) => void;
 }
+/**
+ * Search input component with optional searching state and search handler.
+ * This component allows users to input search queries and trigger a search action.
+ * It supports features like searching on value change, showing a search handle,
+ * and handling search actions with a debounce mechanism.
+ *
+ * @param {SearchProps} props - The properties for the Search component.
+ * @returns {JSX.Element} The rendered Search input component.
+ */
 export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Slider.d.ts

@@ -58,6 +58,12 @@ export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "a
     onSlide?: (val: number) => void;
 }
 /**
- * Number slider input
+ * Slider component for rendering a slider input with labels and value display.
+ * It supports vertical orientation, custom min/max labels, and step ranges.
+ * The component handles value changes, displays tooltips, and integrates with ranger for slider functionality.
+ * It also supports deferred value updates for smoother interactions.
+ *
+ * @param {SliderProps} props - The properties for the Slider component.
+ * @returns {JSX.Element} The rendered Slider component.
  */
 export declare const Slider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, useInfinity, format, invalid, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, ...rest }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Switch.d.ts

@@ -42,4 +42,13 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     offLabel?: string;
     offLabelColor?: string | ColorType;
 }
+/**
+ * Switch input component with custom labels and colors.
+ * This component renders a switch input with optional labels for the "on" and "off" states,
+ * and allows for custom colors for the switch background and labels.
+ * It supports disabled and invalid states, and handles change events.
+ *
+ * @param {SwitchProps} props - The properties for the Switch component.
+ * @returns {JSX.Element} The rendered Switch input component.
+ */
 export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -18,4 +18,14 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      */
     expandable?: boolean;
 }
+/**
+ * Textarea component that allows users to input multi-line text.
+ * It supports features like variable row count, expandable behavior,
+ * and handling of focus, blur, and change events.
+ * This component is designed to be flexible and user-friendly,
+ * providing a clear interface for text input with optional validation and accessibility features.
+ *
+ * @param {TextareaProps} props - The properties for the Textarea component.
+ * @returns {JSX.Element} The rendered Textarea component.
+ */
 export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/AutoComplete.d.ts

@@ -13,5 +13,12 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
      */
     onInput?: (query: string) => void;
 };
+/**
+ * AutoComplete component for selecting or entering values with history suggestions.
+ * It supports multiple selections, history suggestions, and custom styling.
+ *
+ * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
+ * @returns {JSX.Element} The rendered AutoComplete component.
+ */
 export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onQuery, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/select/DualList.d.ts

@@ -39,4 +39,15 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
      */
     onChange?: (value?: string[]) => void;
 }
-export declare const DualList: <T extends unknown = string>({ ref, value, options, emptyDisplay, groupProperty, height, labelProperty, valueProperty, renderer, onChange, name, invalid, readOnly, disabled, placeholder, autoFocus, error, ...rest }: DualListProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ *
+ * @param {DualListProps<T>} props - The properties for the DualList component.
+ * @returns {JSX.Element} The rendered DualList component.
+ */
+export declare const DualList: <T extends AnyObject = string>({ ref, value, options, emptyDisplay, groupProperty, height, labelProperty, valueProperty, renderer, onChange, name, invalid, readOnly, disabled, placeholder, autoFocus, error, ...rest }: DualListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/List.d.ts

@@ -1,4 +1,12 @@
 import { type SelectProps } from "../types";
-export declare const List: <T extends unknown = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+/**
+ * List component for selecting items from a list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the List component.
+ * @returns {JSX.Element} The rendered List component.
+ */
+export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Select.d.ts

@@ -1,2 +1,10 @@
 import { type SelectProps } from "../types";
-export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Select component for selecting items from a dropdown list.
+ * It supports single and multiple selections, searching, creating new options,
+ * and custom rendering of options.
+ *
+ * @param {SelectProps<T>} props - The properties for the Select component.
+ * @returns {JSX.Element} The rendered Select component.
+ */
+export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/useSelect.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface State {
     multiple: boolean;
     emptyValue: AnyObject;
@@ -27,7 +26,17 @@ export declare const useSelect: ({ options, value, defaultOpen, autoComplete, mu
     onSelect?: (item: AnyObject) => void;
     onChange?: (value: AnyObject) => void;
 }) => {
-    state: State;
+    state: State | {
+        value: any;
+        activeIndex: null;
+        selectedIndex: any;
+        multiple: boolean;
+        emptyValue: AnyObject;
+        open: boolean;
+        loading: boolean;
+        query?: string;
+        items: AnyObject[];
+    };
     listRef: import("react").RefObject<HTMLElement[]>;
     focusableRef: import("react").RefObject<HTMLElement | null>;
     listContentRef: import("react").RefObject<any[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.51",
+  "version": "1.0.0-beta.52",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.27.9",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.51",
-    "@react-fabric/date": "^1.0.0-beta.51",
-    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@react-fabric/core": "^1.0.0-beta.52",
+    "@react-fabric/date": "^1.0.0-beta.52",
+    "@react-fabric/utilities": "^1.0.0-beta.52",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
+  "gitHead": "0eabb9d88d91af93d657bcc209b226fd576e8260"
 }

package/src/builder/SchemaEditor.tsx

@@ -32,6 +32,13 @@ import {
 } from "../types/schema";
 import { SchemaArrayForm } from "./components/SchemaArrayForm";
 
+/**
+ * SchemaEditor component allows users to edit a schema definition.
+ * It provides a form interface to modify schema properties dynamically.
+ *
+ * @param {SchemaEditorProps} props - The properties for the SchemaEditor component.
+ * @returns {JSX.Element} The rendered SchemaEditor component.
+ */
 export const SchemaEditor = ({
   schemaDef,
   dynamic,