@react-fabric/form 1.0.0-beta.0

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

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+export interface CheckboxProps extends RefProp<HTMLInputElement> {
+    /**
+     * checkbox label
+     */
+    label?: JSX.Element | string;
+    /**
+     * checked
+     */
+    checked?: boolean;
+    /**
+     * value
+     */
+    value?: string | number;
+    /**
+     * on checked change
+     */
+    onChange?: (checked: boolean | string | number) => void;
+    /**
+     * disabled input
+     */
+    disabled?: boolean;
+    /**
+     * invalid value input
+     */
+    invalid?: boolean;
+    /**
+     * error message
+     */
+    error?: string;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * cutom checkbox icon
+     */
+    icon?: string;
+    /**
+     * cutom checkbox checked icon
+     */
+    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;

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

@@ -0,0 +1,10 @@
+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 {
+    /**
+     * 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;

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

@@ -0,0 +1,24 @@
+import { type FC } from "react";
+export interface ColorProps {
+    /**
+     * color swatches
+     */
+    swatches?: string[];
+    /**
+     * default color
+     */
+    defaultColor?: string;
+    /**
+     * hide alpha value
+     */
+    hideAlpha?: boolean;
+    /**
+     * color value
+     */
+    value?: string;
+    /**
+     * change handler
+     */
+    onChange?: (color?: string) => void;
+}
+export declare const ColorPicker: FC<ColorProps>;

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
+export interface FieldProps extends ChildrenProp, CssProp {
+    /**
+     * input label
+     */
+    label?: string;
+    /**
+     * append to label end
+     */
+    appendLabel?: JSX.Element | string | number | boolean;
+    /**
+     * info label at bottom
+     */
+    info?: string;
+    /**
+     * required
+     */
+    required?: boolean;
+    /**
+     * hide outline
+     */
+    noOutline?: boolean;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * inline label and input
+     */
+    inline?: boolean;
+    /**
+     * label width for inline
+     */
+    labelWidth?: string;
+    /**
+     * dont apply bg and outline
+     */
+    plain?: boolean;
+}
+export declare const Field: ({ children, noOutline, plain, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface FileInputProps extends InputProps<AnyObject>, RefProp<HTMLInputElement> {
+    /**
+     * allow selecting mutiple files
+     */
+    multiple?: boolean;
+    /**
+     * show selected file list
+     */
+    showList?: boolean;
+    /**
+     * acceptable file types
+     */
+    accept?: string;
+}
+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

@@ -0,0 +1,16 @@
+interface Props {
+    /**
+     * field name
+     */
+    name?: string;
+    /**
+     * hidden value will fire change for form update
+     */
+    hiddenValue?: AnyObject;
+    /**
+     * form onChange handler
+     */
+    onChange?: (value: AnyObject) => void;
+}
+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

@@ -0,0 +1,9 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
+    /**
+     * input type
+     */
+    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;

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

@@ -0,0 +1,17 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElement> {
+    /**
+     * minimum value
+     */
+    min?: number;
+    /**
+     * maximum value
+     */
+    max?: number;
+    /**
+     * increment step
+     */
+    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;

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

@@ -0,0 +1,13 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
+    /**
+     * show password toggle
+     */
+    showToggle?: boolean;
+    /**
+     * password strength meter (0-1)
+     */
+    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;

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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+export interface RadioProps extends RefProp<HTMLInputElement> {
+    name?: string;
+    /**
+     * radio label
+     */
+    label?: JSX.Element | string;
+    /**
+     * value
+     */
+    value: string | number;
+    /**
+     * on checked change
+     */
+    onChange?: ((value: string) => void) | ((value: number) => void);
+    /**
+     * disabled input
+     */
+    disabled?: boolean;
+    /**
+     * invalid value input
+     */
+    invalid?: boolean;
+    /**
+     * error message
+     */
+    error?: string;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * cutom checkbox icon
+     */
+    icon?: string;
+    /**
+     * cutom checkbox checked icon
+     */
+    iconChecked?: string;
+}
+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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { type CssProp, type ChildrenProp } from "@react-fabric/core/dist/types/types";
+import { type Radio } from "./Radio";
+export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
+    /**
+     * input label
+     */
+    label?: string;
+    /**
+     * append to label end
+     */
+    appendLabel?: JSX.Element | string | number | boolean;
+    /**
+     * field info
+     */
+    info?: string;
+    /**
+     * field name
+     */
+    name?: string;
+    /**
+     * vertical orientation
+     */
+    vertical?: boolean;
+    /**
+     * change handler
+     */
+    onChange?: (value: AnyObject) => void;
+}
+export declare const RadioGroup: ({ children, name, className, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,59 @@
+import { type InputProps } from "../types";
+export interface RangeProps extends Omit<InputProps<[number, number]>, "placeholder" | "allowClear" | "children"> {
+    /**
+     * 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;
+}
+/**
+ * Number Range input
+ */
+export declare const Range: ({ 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

@@ -0,0 +1,17 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
+    /**
+     * is searching
+     */
+    searching?: boolean;
+    /**
+     * search on value change
+     */
+    searchOnChange?: 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;

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

@@ -0,0 +1,63 @@
+import { type InputProps } from "../types";
+export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "allowClear" | "children"> {
+    /**
+     * min value
+     */
+    min?: number;
+    /**
+     * max value
+     */
+    max?: number;
+    /**
+     * increment step
+     */
+    step?: number;
+    /**
+     * slider color
+     */
+    color?: string;
+    /**
+     * slider 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[];
+    /**
+     * infinity max value
+     */
+    useInfinity?: true;
+    /**
+     * format value
+     */
+    format?: string;
+    /**
+     * slide event handler
+     */
+    onSlide?: (val: number) => void;
+}
+/**
+ * Number slider input
+ */
+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

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { type ColorType, type RefProp } from "@react-fabric/core/dist/types/types";
+export interface SwitchProps extends RefProp<HTMLInputElement> {
+    /**
+     * Switch label
+     */
+    label?: JSX.Element | string;
+    /**
+     * checked
+     */
+    checked?: boolean;
+    /**
+     * on checked change
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * disabled input
+     */
+    disabled?: boolean;
+    /**
+     * invalid value input
+     */
+    invalid?: boolean;
+    /**
+     * error message
+     */
+    error?: string;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * cutom Switch icon
+     */
+    color?: ColorType;
+    /**
+     * cutom Switch icon
+     */
+    defaultColor?: ColorType;
+    name?: string;
+}
+export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type InputProps } from "../types";
+export interface TextareaProps extends Omit<InputProps, "onEnterPressed">, RefProp<HTMLTextAreaElement> {
+    /**
+     * textarae rows
+     */
+    rows?: number;
+    /**
+     * maximum rows
+     */
+    maxRows?: number;
+    /**
+     * increment rows on value change
+     */
+    variableRows?: boolean;
+}
+export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, autoFocus, rows, maxRows, variableRows, onChange, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const ErrorIcon: ({ error, invalid }: KeyValue) => any;

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

@@ -0,0 +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;

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

@@ -0,0 +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;

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

@@ -0,0 +1,70 @@
+import { type KeyboardEvent as KE, type MouseEvent as ME, type TouchEvent as TE } from "react";
+type RangerChangeEvent = (newValue: readonly number[]) => void;
+type RangerConfig = {
+    values: readonly number[];
+    min: number;
+    max: number;
+    tickSize: number;
+    ticks?: number[];
+    vertical?: boolean;
+    onChange: RangerChangeEvent;
+    onDrag?: RangerChangeEvent;
+    onDragStart?: () => void;
+    onDragEnd?: () => void;
+    debug?: boolean;
+} & ({
+    stepSize: number;
+} | {
+    steps: number[];
+});
+export declare const useRanger: (opts: RangerConfig) => {
+    trackElRef: import("react").RefObject<HTMLDivElement>;
+    activeHandleIndex: number | undefined;
+    ticks: {
+        key: number;
+        value: number;
+        percentage: number;
+        styles: {
+            [x: string]: string;
+        };
+    }[];
+    segments: {
+        key: number;
+        value: number;
+        active: boolean;
+        props: {
+            ref: import("react").RefObject<HTMLDivElement>;
+            onMouseDownCapture: (e: ME) => void;
+            onTouchStartCapture: (e: TE) => void;
+        } | {
+            ref?: undefined;
+            onMouseDownCapture?: undefined;
+            onTouchStartCapture?: undefined;
+        };
+        styles: {
+            [x: string]: string;
+        };
+    }[];
+    handles: {
+        key: number;
+        value: number;
+        percentage: number;
+        active: boolean;
+        props: {
+            role: string;
+            "aria-valuemin": number;
+            "aria-valuemax": number;
+            "aria-valuenow": number;
+            onKeyDown: (e: KE) => void;
+            onMouseDownCapture: (e: ME) => void;
+            onTouchStartCapture: (e: TE) => void;
+        };
+        styles: {
+            [x: string]: string;
+        };
+        valueStyles: {
+            [x: string]: string;
+        };
+    }[];
+};
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * react-ranger
+ * https://github.com/TanStack/ranger
+ */
+export declare const getBoundingClientRect: (element: any) => {
+    top: number;
+    left: number;
+    right: number;
+    width: number;
+    bottom: number;
+    height: number;
+};
+export declare const sortNumList: (arr: ReadonlyArray<number | string>) => number[];
+export declare const linearInterpolator: {
+    getPercentageForValue: (val: number, min: number, max: number) => number;
+    getValueForClientX: (clientX: number, trackDims: {
+        width: number;
+        left: number;
+        right: number;
+    }, min: number, max: number, isRtl: boolean) => number;
+    getValueForClientY: (clientY: number, trackDims: {
+        height: number;
+        bottom: number;
+    }, min: number, max: number) => number;
+};

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

@@ -0,0 +1,17 @@
+import { type SelectProps } from "../types";
+type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "createOption"> & {
+    /**
+     * auto-complete history
+     */
+    history?: string[];
+    /**
+     * expand input on edit
+     */
+    expandOnEdit?: boolean;
+    /**
+     * input change handler
+     */
+    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;
+export {};

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type FieldProps } from "../input/Field";
+export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<HTMLInputElement> {
+    /**
+     * list height
+     */
+    height?: string | number;
+    /**
+     * list options
+     */
+    options: T[];
+    /**
+     * selected value
+     */
+    value?: string[];
+    /**
+     * group by property name
+     */
+    groupProperty?: keyof T;
+    /**
+     * label property name
+     */
+    labelProperty?: keyof T;
+    /**
+     * value property name
+     */
+    valueProperty?: keyof T;
+    /**
+     * item renderer
+     */
+    renderer?: (option: T) => React.ReactNode;
+    /**
+     * change handler
+     */
+    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;

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

@@ -0,0 +1,4 @@
+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, multiple, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: SelectProps<T> & {
+    height?: string | number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { type ReactElement, type ReactNode } from "react";
+export declare const Options: ({ ref, style, items, active, className, itemRef, empty, valueProperty, labelProperty, itemProps, children, ...rest }: {
+    ref: AnyObject;
+    itemRef: AnyObject;
+    style?: AnyObject;
+    items: AnyObject[];
+    active: number | null;
+    className?: string;
+    empty?: ReactElement;
+    valueProperty?: AnyObject;
+    labelProperty?: AnyObject;
+    itemProps: (item: AnyObject) => AnyObject;
+    children: (item: AnyObject, label: string) => ReactNode;
+} & KeyValue) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { type SelectProps } from "../types";
+export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, groupProperty, labelProperty, valueProperty, multiple, searchable, allowCreate, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export declare const makeOption: (query: string) => string;
+export declare const getSelectedValue: (value: AnyObject, emptyValue: AnyObject, valueProperty?: AnyObject) => any;