@react-fabric/form 1.0.0-beta.6 → 1.0.0-beta.60

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

@@ -1,5 +1,5 @@
-import { type ReactNode, type RefObject } from "react";
-export interface ArrayInputProps {
+import { type Ref } from "react";
+export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * input label
      */
@@ -32,6 +32,10 @@ export interface ArrayInputProps {
      * minimum required length
      */
     minItems?: number;
+    /**
+     * maximum length
+     */
+    maxItems?: number;
     /**
      * field name to focus on add
      */
@@ -43,23 +47,37 @@ export interface ArrayInputProps {
     children: React.ReactNode | ((props: {
         index: number;
         name: string;
-    }) => ReactNode);
+        item: T;
+    }) => React.ReactNode);
     /**
      * add item button label
      */
     addLabel?: string;
-    /**
-     * fixed length list
-     */
-    fixedList?: boolean;
-    arrayRef?: RefObject<{
-        addItem: (item: AnyObject) => void;
+    buttonPosition?: "top" | "bottom" | "both";
+    arrayRef?: Ref<{
+        addItem: (item: T) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
+     */
+    onAdd?: () => T;
+    /**
+     * on item remove
      */
-    onAdd?: () => AnyObject;
+    onRemove?: (item: T, idx: number) => void;
+    /**
+     * before item remove
+     */
+    onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+    /**
+     * can remove item
+     */
+    canRemove?: false | "newonly" | ((props: {
+        item: T;
+        index: number;
+        lastItem: boolean;
+    }) => boolean);
     /**
      * field width
      */
@@ -73,4 +91,43 @@ export interface ArrayInputProps {
      */
     labelWidth?: string;
 }
-export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, ...rest }: ArrayInputProps) => 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, 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

@@ -1,5 +1,6 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 export interface Props extends RefProp {
     /**
      * field name
@@ -10,14 +11,25 @@ export interface Props extends RefProp {
      */
     value?: string;
     /**
-     * avatar stream src
+     * default avatar image
      */
-    src?: string;
+    defaultValue?: string;
+    /**
+     * avatar name
+     */
+    avatarName?: string;
+    rounded?: boolean;
+    variant?: AvatarProps["variant"];
+    fallbackIcon?: AvatarProps["fallbackIcon"];
+    avatarClassName?: AvatarProps["className"];
     size?: string | number;
     /**
      * upload handler to store file in temp storage
      */
     uploadHandler: UploadHandler;
+    /**
+     * file stream path
+     */
     fileUrl?: (path: string) => string;
     /**
      * change handler
@@ -28,4 +40,12 @@ export interface Props extends RefProp {
      */
     onChange?: (path: string) => void;
 }
-export declare const AvatarInput: ({ src, size, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
@@ -16,7 +15,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * on checked change
      */
-    onChange?: (checked: boolean | string | number) => void;
+    onChange?: (checked: boolean) => void;
     /**
      * disabled input
      */
@@ -43,4 +42,14 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
-export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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

@@ -1,10 +1,23 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
 import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
     /**
      * show eydrop picker
      */
     showPicker?: boolean;
 }
-export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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

@@ -15,10 +15,20 @@ export interface ColorProps {
     /**
      * color value
      */
-    value?: string;
+    value?: string | null;
     /**
      * change handler
      */
     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

@@ -0,0 +1,28 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+import { type InputProps } from "../types";
+export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement> {
+    type?: "date" | "datetime";
+    /**
+     * date format
+     */
+    format?: string;
+    /**
+     * minimum value
+     */
+    min?: DateLike;
+    /**
+     * maximum value
+     */
+    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, defaultValue, 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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
 export interface FieldProps extends ChildrenProp, CssProp {
     /**
@@ -39,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

@@ -7,10 +7,22 @@ interface Props {
      * hidden value will fire change for form update
      */
     hiddenValue?: AnyObject;
+    /**
+     * default avatar image
+     */
+    defaultValue?: string;
     /**
      * form onChange handler
      */
     onChange?: (value: AnyObject) => void;
 }
-export declare const HiddenInput: ({ hiddenValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, 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";
 }
-export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, 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;
 }
-export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, 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;
 }
-export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, autoFocus, showToggle, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 export interface RadioProps extends RefProp<HTMLInputElement> {
     name?: string;
@@ -39,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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
 import { type Radio } from "./Radio";
 export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
@@ -43,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

@@ -0,0 +1,67 @@
+import { type InputProps } from "../types";
+export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children" | "defaultValue"> {
+    /**
+     * min value
+     */
+    min?: number;
+    /**
+     * max value
+     */
+    max?: number;
+    /**
+     * increment step
+     */
+    step?: number;
+    /**
+     * Range color
+     */
+    color?: string;
+    /**
+     * Range height (only vertical)
+     */
+    height?: number;
+    /**
+     * vertical orientation
+     */
+    vertical?: boolean;
+    /**
+     * display value tooltip
+     */
+    showValue?: boolean;
+    /**
+     * display min/max labels
+     */
+    showLabels?: boolean;
+    /**
+     * custom min label
+     */
+    minLabel?: string;
+    /**
+     * custom max label
+     */
+    maxLabel?: string;
+    /**
+     * step ranges
+     */
+    ranges?: number[];
+    /**
+     * format value
+     */
+    format?: string;
+    /**
+     * slide event handler
+     */
+    onSlide?: (val: number) => void;
+}
+/**
+ * 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

@@ -9,9 +9,22 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
      * search on value change
      */
     searchOnChange?: boolean;
+    /**
+     * hide search action handle
+     */
+    hideHandle?: boolean;
     /**
      * search handler
      */
     onSearch?: (query?: string) => void;
 }
-export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, autoFocus, allowClear, searchOnChange, decorateEnd, decorateStart, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { type InputProps } from "../types";
-export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children" | "defaultValue"> {
     /**
      * min value
      */
@@ -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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ColorType, type RefProp } from "@react-fabric/core/dist/types/types";
 export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
@@ -43,4 +42,13 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     offLabel?: string;
     offLabelColor?: string | ColorType;
 }
-export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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

@@ -13,5 +13,19 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
      * increment rows on value change
      */
     variableRows?: boolean;
+    /**
+     * expandable textarea
+     */
+    expandable?: boolean;
 }
-export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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, defaultValue, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/FieldWrapper.d.ts

@@ -1 +1 @@
-export declare const FieldWrapper: ({ label, appendLabel, width, labelWidth, inline, info, disabled, required, children, listing, className, "data-inner": isInner, }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldWrapper: ({ label, appendLabel, width, labelWidth, inline, info, disabled, required, children, listing, className, invalid, error, "data-inner": isInner, }: KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/InputWrapper.d.ts

@@ -1 +1 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, children, onClear, noOutline, noBorder, textarea, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, actionButton, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/ranger/index.d.ts

@@ -18,7 +18,7 @@ type RangerConfig = {
     steps: number[];
 });
 export declare const useRanger: (opts: RangerConfig) => {
-    trackElRef: import("react").RefObject<HTMLDivElement>;
+    trackElRef: import("react").RefObject<HTMLDivElement | null>;
     activeHandleIndex: number | undefined;
     ticks: {
         key: number;
@@ -33,7 +33,7 @@ export declare const useRanger: (opts: RangerConfig) => {
         value: number;
         active: boolean;
         props: {
-            ref: import("react").RefObject<HTMLDivElement>;
+            ref: import("react").RefObject<HTMLDivElement | null>;
             onMouseDownCapture: (e: ME) => void;
             onTouchStartCapture: (e: TE) => void;
         } | {

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

@@ -13,5 +13,12 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
      */
     onInput?: (query: string) => void;
 };
-export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type ReactElement } from "react";
 import { type FieldProps } from "../input/Field";
 export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<HTMLInputElement> {
     /**
@@ -26,6 +26,10 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
      * value property name
      */
     valueProperty?: keyof T;
+    /**
+     * empty list display
+     */
+    emptyDisplay?: ReactElement;
     /**
      * item renderer
      */
@@ -35,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, 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;