@sqrzro/ui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/forms/components/FormField/index.js

@@ -1,16 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import FormError from '../FormError';
 import FormLabel from '../FormLabel';
 import ActionButton from '../../../components/buttons/ActionButton';
 function checkHasError(error) {
-    return Boolean(error && Object.keys(error).length > 0 && Object.values(error).some(Boolean));
+    return Boolean(error &&
+        Object.keys(error).length > 0 &&
+        Object.values(error).some((item) => typeof item === 'string'));
 }
-function FormField({ action, classNameProps, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
-    const classNames = getClassNames('formField')?.(classNameProps);
+function FormField({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }) {
+    const componentClassNames = getClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
     function handleError(message) {
@@ -32,6 +33,6 @@ function FormField({ action, classNameProps, details, error, hasAssistiveError,
     if (isContentOnly) {
         return render(renderProps);
     }
-    return (_jsxs("div", { className: tw(classNames?.root?.default, error ? classNames?.root?.error : null), children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? _jsx("div", { className: classNames?.details, children: details }) : null, _jsx("div", { className: classNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
+    return (_jsxs("div", { className: componentClassNames?.root, children: [label ? (_jsx(FormLabel, { classNameProps: classNameProps, htmlFor: inputId, isAssistive: hasAssistiveLabel, isOptional: isOptional, children: label })) : null, details && label ? (_jsx("div", { className: componentClassNames?.details, children: details })) : null, _jsx("div", { className: componentClassNames?.field, children: render(renderProps) }), action ? (_jsx("div", { children: _jsx(ActionButton, { ...action, isDisabled: Boolean(isDisabled || action.isDisabled) }) })) : null, inputError || error?.[name] ? (_jsx(FormError, { classNameProps: classNameProps, id: inputId, isAssistive: hasAssistiveError, children: inputError || error?.[name] })) : null] }));
 }
 export default FormField;

package/dist/forms/components/FormFields/index.d.ts

@@ -1,9 +1,18 @@
 import type { FormFieldComponentProps } from '../../interfaces';
+import type { AutocompleteComponentProps } from '../Autocomplete';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { PointsInputComponentProps } from '../PointsInput';
+import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
 import type { TextInputComponentProps } from '../TextInput';
+export type AutocompleteFormFieldProps<T> = FormFieldComponentProps<T | null> & AutocompleteComponentProps<T>;
+export declare function AutocompleteFormField<T>(props: Readonly<AutocompleteFormFieldProps<T>>): React.ReactElement;
 export type DropdownFormFieldProps<T> = FormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function DropdownFormField<T>(props: Readonly<DropdownFormFieldProps<T>>): React.ReactElement;
+export type MoneyFormFieldProps = FormFieldComponentProps<number> & PointsInputComponentProps;
+export declare function MoneyFormField(props: Readonly<MoneyFormFieldProps>): React.ReactElement;
+export type NumberFormFieldProps = FormFieldComponentProps<number> & NumberInputComponentProps;
+export declare function NumberFormField(props: Readonly<NumberFormFieldProps>): React.ReactElement;
 export type PasswordFormFieldProps = FormFieldComponentProps<string> & PasswordInputComponentProps;
 export declare function PasswordFormField(props: Readonly<PasswordFormFieldProps>): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;

package/dist/forms/components/FormFields/index.js

@@ -1,15 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
+import Autocomplete from '../Autocomplete';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
+import PointsInput from '../PointsInput';
+import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
 import TextInput from '../TextInput';
+export function AutocompleteFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Autocomplete, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function DropdownFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function MoneyFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function NumberFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(NumberInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function PasswordFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);

package/dist/forms/components/FormLabel/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { FormFieldClassNames } from '../FormField';
 interface FormLabelProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;

package/dist/forms/components/FormLabel/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function FormLabel({ children, classNames, classNameProps, htmlFor, isAssistive, isOptional, }) {
-    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
+    const componentClassNames = getClassNames('formField', { props: classNameProps }, classNames);
     return (_jsxs("label", { className: tw(componentClassNames?.label, isAssistive ? 'sr-only' : null), htmlFor: htmlFor, children: [children, isOptional ? _jsx("small", { className: componentClassNames?.optional, children: "Optional" }) : null] }));
 }
 export default FormLabel;

package/dist/forms/components/ModalForm/index.js

@@ -10,7 +10,7 @@ function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDi
         setSearchParamsHref('action', null);
     }
     return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [children, hasServerError ? _jsx("div", { children: "SERVER ERROR" }) : null, _jsx(ModalActions, { actions: [
-                        { label: 'Cancel', onClick: handleCancel, variant: 'link' },
+                        { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit
                             ? {

package/dist/forms/components/NumberInput/index.d.ts

@@ -0,0 +1,7 @@
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { InputProps } from '../../interfaces';
+import type { TextInputClassNames, TextInputComponentProps } from '../TextInput';
+export type NumberInputComponentProps = TextInputComponentProps;
+export type NumberInputProps = ClassNameProps<TextInputClassNames> & InputProps<number> & NumberInputComponentProps;
+declare function NumberInput({ onChange, value, ...props }: Readonly<NumberInputProps>): React.ReactElement;
+export default NumberInput;

package/dist/forms/components/NumberInput/index.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import TextInput from '../TextInput';
+function NumberInput({ onChange, value, ...props }) {
+    const ref = useRef(null);
+    function handleChange(event) {
+        onChange?.({ target: { name: event.target.name, value: Number(event.target.value) } });
+    }
+    function disableScroll() {
+        if (ref.current) {
+            ref.current.blur();
+        }
+    }
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.addEventListener('wheel', disableScroll, { passive: false });
+        }
+        return () => {
+            if (ref.current) {
+                ref.current.removeEventListener('wheel', disableScroll);
+            }
+        };
+    }, []);
+    return (_jsx(TextInput, { ...props, ref: ref, onChange: handleChange, type: "number", value: value ? String(value) : '' }));
+}
+export default NumberInput;

package/dist/forms/components/PasswordComplexity/index.d.ts

@@ -0,0 +1,9 @@
+export interface PasswordComplexityProps {
+    data: {
+        status: boolean;
+        value: string;
+    }[];
+    onComplexity?: (isValid: boolean) => void;
+}
+declare function PasswordComplexity({ data, onComplexity }: PasswordComplexityProps): React.ReactElement;
+export default PasswordComplexity;

package/dist/forms/components/PasswordComplexity/index.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import useDeepCompareEffect from 'use-deep-compare-effect';
+function PasswordComplexity({ data, onComplexity }) {
+    useDeepCompareEffect(() => {
+        onComplexity?.(data.every((item) => item.status));
+    }, [data]);
+    return (_jsx("aside", { children: _jsx("ul", { children: data.map((item) => (_jsx("li", { style: { color: item.status ? 'green' : 'red' }, children: item.value }, item.value))) }) }));
+}
+export default PasswordComplexity;

package/dist/forms/components/PasswordInput/index.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces';
 import type { TextInputComponentProps } from '../TextInput';
 export interface PasswordInputClassNames {
     action: string;

package/dist/forms/components/PasswordInput/index.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
 import TextInput from '../TextInput';
 function PasswordInput({ classNameProps, classNames, ...props }) {
-    const componentClassNames = classNames || getClassNames('passwordInput')?.(classNameProps);
-    const Icon = getIcon('password');
     const [isVisible, setIsVisible] = useState(false);
+    const componentClassNames = getClassNames('passwordInput', { props: classNameProps, states: { isSelected: isVisible } }, classNames);
+    const Icon = getIcon('password');
     function toggleVisible() {
         setIsVisible(!isVisible);
     }
-    return (_jsxs("div", { className: "relative", children: [_jsx(TextInput, { type: isVisible ? 'text' : 'password', ...props }), _jsx("div", { className: componentClassNames?.action, children: _jsxs("button", { className: tw(componentClassNames?.icon?.default, isVisible ? componentClassNames?.icon?.selected : null), onClick: toggleVisible, type: "button", children: [Icon ? _jsx(Icon, {}) : null, isVisible ? 'Hide' : 'Show'] }) })] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx(TextInput, { type: isVisible ? 'text' : 'password', ...props }), _jsx("div", { className: componentClassNames?.action, children: _jsxs("button", { className: componentClassNames?.icon, onClick: toggleVisible, type: "button", children: [Icon ? _jsx(Icon, {}) : null, isVisible ? 'Hide' : 'Show'] }) })] }));
 }
 export default PasswordInput;

package/dist/forms/components/PointsInput/index.d.ts

@@ -0,0 +1,5 @@
+import type { NumberInputComponentProps, NumberInputProps } from '../NumberInput';
+export type PointsInputComponentProps = NumberInputComponentProps;
+export type PointsInputProps = NumberInputProps;
+declare function PointsInput({ name, onChange, value, ...props }: Readonly<PointsInputProps>): React.ReactElement;
+export default PointsInput;

package/dist/forms/components/PointsInput/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NumberInput from '../NumberInput';
+const FACTOR = 100;
+function setValue(value) {
+    if (typeof value === 'undefined') {
+        return value;
+    }
+    return Math.round(value * FACTOR);
+}
+function getValue(value) {
+    if (typeof value === 'undefined') {
+        return value;
+    }
+    return value / FACTOR;
+}
+function PointsInput({ name, onChange, value, ...props }) {
+    function handleChange(event) {
+        onChange?.({ target: { name, value: setValue(event.target.value) } });
+    }
+    return _jsx(NumberInput, { ...props, name: name, onChange: handleChange, value: getValue(value) });
+}
+export default PointsInput;

package/dist/forms/components/StaticTextInput/index.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
 export interface StaticTextInputClassNames {
     root: ErrorableClassName;
     placeholder: string;
@@ -12,11 +12,10 @@ export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClas
     details?: string | null;
     label: string;
     icon?: React.ReactNode;
-    isOpen?: boolean;
     isOptional?: boolean;
     onClear?: () => void;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     placeholder?: string;
 }
-declare function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder, value, }: Readonly<StaticTextInputProps>): React.ReactElement;
+declare function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder, value, }: Readonly<StaticTextInputProps>): React.ReactElement;
 export default StaticTextInput;

package/dist/forms/components/StaticTextInput/index.js

@@ -1,22 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import Assistive from '../../../components/utility/Assistive';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function hasValue(value) {
     if (Array.isArray(value)) {
         return Boolean(value.filter((item) => Boolean(item)).length);
     }
     return Boolean(value);
 }
-function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOpen, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
-    const componentClassNames = {
-        ...getClassNames('staticTextInput')?.(classNameProps),
-        ...classNames,
-    };
+function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
+    const componentClassNames = getClassNames('staticTextInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     function handleClear() {
         onClear?.();
     }
-    return (_jsxs("div", { className: tw('relative', isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames.root?.default, hasError ? componentClassNames.root?.error : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: tw(componentClassNames.label), children: label }), details ? (_jsx("small", { className: tw(componentClassNames.details), children: details })) : null] })) : (_jsx("span", { className: tw(componentClassNames.placeholder), children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: isOpen ? 'Close' : 'Open' }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsx("button", { className: tw('flex-none', componentClassNames.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null, icon && !isDisabled ? (_jsx("i", { className: tw('pointer-events-none flex-none', componentClassNames.icon) })) : null] })] }));
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: componentClassNames?.label, children: label }), details ? (_jsx("small", { className: componentClassNames?.details, children: details })) : null] })) : (_jsx("span", { className: componentClassNames?.placeholder, children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: "Toggle" }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsx("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null, icon && !isDisabled ? (_jsx("i", { className: tw('pointer-events-none flex-none', componentClassNames?.icon) })) : null] })] }));
 }
 export default StaticTextInput;

package/dist/forms/components/Switch/index.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps } from '../../../forms/interfaces';
-import { CheckableClassName, ClassNameProps } from '../../../styles/interfaces';
+import { CheckableClassName, ClassNameProps } from '../../../styles/classnames/interfaces';
 export interface SwitchClassNames {
     root: string;
     control: string;

package/dist/forms/components/Switch/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
-    const componentClassNames = classNames || getClassNames('switch')?.(classNameProps);
+    const componentClassNames = getClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const inputEvent = {
@@ -12,6 +12,6 @@ function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, va
             onChange(inputEvent);
         }
     }
-    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input?.default, value ? componentClassNames?.input?.checked : null), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: tw(componentClassNames?.icon?.default, value ? componentClassNames?.icon?.checked : null) })] }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("input", { name: name, type: "hidden", value: "false" }), _jsx("div", { className: tw('block', componentClassNames?.root), children: _jsxs("div", { className: tw('relative', componentClassNames?.control), children: [_jsx("input", { "aria-checked": Boolean(value), checked: Boolean(value), className: tw('appearance-none', componentClassNames?.input), disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "checkbox", value: "true" }), _jsx("i", { className: componentClassNames?.icon })] }) })] }));
 }
 export default Switch;

package/dist/forms/components/TextInput/index.d.ts

@@ -1,5 +1,5 @@
 import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
 export interface TextInputClassNames {
     loading: string;
     prefix: ErrorableClassName;
@@ -30,5 +30,5 @@ export type TextInputProps = ClassNameProps<TextInputClassNames> & InputProps<st
  * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
  * button itself is handled by the `renderClear` prop. | `string` |
  */
-declare function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }: Readonly<TextInputProps>): React.ReactElement;
+declare function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }: Readonly<TextInputProps>): React.ReactElement;
 export default TextInput;

package/dist/forms/components/TextInput/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 /**
  *
  * ## ClassNames
@@ -13,18 +13,18 @@ import tw from '../../../styles/tw';
  * | clear | The wrapper around the 'clear' button of the input, if one exists. The style of the
  * button itself is handled by the `renderClear` prop. | `string` |
  */
-function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, suffix, type, value, }) {
-    const componentClassNames = classNames || getClassNames('textInput')?.(classNameProps);
+function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }) {
+    const componentClassNames = getClassNames('textInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const target = { name, value: event.target.value };
             onChange({ target });
         }
     }
-    return (_jsxs("div", { className: tw('relative', prefix ? 'flex flex-row-reverse' : null, (!prefix && suffix) || value ? 'flex' : null, isDisabled ? 'pointer-events-none opacity-30' : null), children: [prefix ? _jsx("div", { children: prefix }) : null, _jsx("input", { "aria-invalid": hasError, "aria-labelledby": hasError
+    return (_jsxs("div", { className: tw('relative', prefix ? 'flex flex-row-reverse' : null, (!prefix && suffix) || value ? 'flex' : null, isDisabled ? 'pointer-events-none opacity-30' : null), children: [prefix ? _jsx("div", { children: prefix }) : null, _jsx("input", { ref: ref, "aria-invalid": hasError, "aria-labelledby": hasError
                     ? `${id || name}_err`
                     : undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
                     ? 'one-time-code'
-                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
+                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
 }
 export default TextInput;

package/dist/forms/hooks/useAutocomplete.d.ts

@@ -0,0 +1,9 @@
+import { DropdownObject } from '../interfaces';
+import { AutocompleteFormFieldProps } from '../components/FormFields';
+export interface UseAutocompleteArgs<T extends string> {
+    searchFn: (search: string) => Promise<DropdownObject<T>[]>;
+    selectFn: (id: T) => Promise<DropdownObject<T> | null>;
+}
+export type UseAutocompleteReturn<T extends string> = AutocompleteFormFieldProps<T>;
+declare function useAutocomplete<T extends string>(props: AutocompleteFormFieldProps<T>, { searchFn, selectFn }: UseAutocompleteArgs<T>): UseAutocompleteReturn<T>;
+export default useAutocomplete;

package/dist/forms/hooks/useAutocomplete.js

@@ -0,0 +1,31 @@
+'use client';
+import { useEffect, useState } from 'react';
+function useAutocomplete(props, { searchFn, selectFn }) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [options, setOptions] = useState([]);
+    const [selected, setSelected] = useState(null);
+    async function handleSelect(value) {
+        if (!value) {
+            setSelected(null);
+            return;
+        }
+        const response = await selectFn(value);
+        setOptions([]);
+        setSelected(response);
+    }
+    async function handleSearch(search) {
+        if (search.length < 3) {
+            setOptions([]);
+            return;
+        }
+        setIsLoading(true);
+        const response = await searchFn(search);
+        setOptions(response);
+        setIsLoading(false);
+    }
+    useEffect(() => {
+        void handleSelect(props.value);
+    }, [props.value]);
+    return { ...props, isLoading, onSearch: handleSearch, options, selected };
+}
+export default useAutocomplete;

package/dist/forms/hooks/useDropdown.d.ts

@@ -1,9 +1,9 @@
 import { DropdownObject } from '../interfaces';
-interface UseDropdownArgs<T extends string> {
+export interface UseDropdownArgs<T extends string> {
     deps?: unknown[];
     fn: (...args: unknown[]) => Promise<DropdownObject<T>[]>;
 }
-interface UseDropdownReturn<T extends string> {
+export interface UseDropdownReturn<T extends string> {
     data: DropdownObject<T>[];
 }
 declare function useDropdown<T extends string>({ deps, fn }: UseDropdownArgs<T>): UseDropdownReturn<T>;

package/dist/forms/hooks/useForm.d.ts

@@ -37,7 +37,7 @@ export interface UseFormReturn<Request> {
     isLoading: boolean;
     resetForm: () => void;
     setErrors: (errors: Record<string, string> | null) => void;
-    setFormData: (key: keyof Request, value: Request[keyof Request]) => void;
+    setFormData: <K extends keyof Request>(key: K, value: Request[K]) => void;
     submitForm: () => void;
 }
 /**

package/dist/forms/hooks/useForm.js

@@ -120,9 +120,9 @@ function getToastMessage(key, toasts) {
  *   handling additional form events or integrating with different server APIs.
  */
 function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
-    const innerRef = useRef(null);
+    const ref = useRef(null);
     const router = useRouter();
-    const [isLoading, startTransition] = useTransition();
+    const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
@@ -168,7 +168,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         if (fnReturn.validation) {
             return handleValidation(fnReturn.validation);
         }
-        if (fnReturn.data) {
+        if (fnReturn.data !== null) {
             return handleSuccess(fnReturn.data);
         }
     }
@@ -196,13 +196,14 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         formData: data,
         formProps: {
             action: handleSubmit,
+            ref,
         },
         isLoading,
         resetForm,
         setErrors,
         setFormData,
         submitForm: () => {
-            setTimeout(() => innerRef.current?.requestSubmit(), 1);
+            setTimeout(() => ref.current?.requestSubmit(), 1);
         },
     };
 }

package/dist/forms/hooks/useModalForm.d.ts

@@ -1,8 +1,8 @@
-import type { Action } from '../../utility/interfaces';
+import type { ActionObject } from '../../utility/interfaces';
 import type { ModalFormProps } from '../components/ModalForm';
 import type { UseFormArgs, UseFormReturn } from './useForm';
 export interface UseModalFormArgs<Request, Response> extends UseFormArgs<Request, Response> {
-    actions?: Action[];
+    actions?: ActionObject[];
     icon?: React.ReactNode;
     submitLabel?: string;
     title?: string;

package/dist/forms/index.d.ts

@@ -1,4 +1,6 @@
 export * from './interfaces';
+export type { AutocompleteProps } from './components/Autocomplete';
+export { default as Autocomplete } from './components/Autocomplete';
 export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
 export { default as Dropdown } from './components/Dropdown';
 export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
@@ -13,15 +15,29 @@ export type { FormSubmitProps } from './components/FormSubmit';
 export { default as FormSubmit } from './components/FormSubmit';
 export type { ModalFormProps } from './components/ModalForm';
 export { default as ModalForm } from './components/ModalForm';
+export type { PasswordComplexityProps } from './components/PasswordComplexity';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
+export type { NumberInputProps } from './components/NumberInput';
+export { default as NumberInput } from './components/NumberInput';
 export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export type { PointsInputProps } from './components/PointsInput';
+export { default as PointsInput } from './components/PointsInput';
+export type { StaticTextInputClassNames, StaticTextInputProps } from './components/StaticTextInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
 export type { TextInputClassNames, TextInputProps } from './components/TextInput';
 export { default as TextInput } from './components/TextInput';
 export type { EditableDropdownFormFieldProps, EditableTextFormFieldProps, } from './components/EditableFormFields';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export type { DropdownFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
+export type { AutocompleteFormFieldProps, DropdownFormFieldProps, MoneyFormFieldProps, NumberFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
+export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export type { UseAutocompleteArgs, UseAutocompleteReturn } from './hooks/useAutocomplete';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
+export type { UseDropdownArgs, UseDropdownReturn } from './hooks/useDropdown';
 export { default as useDropdown } from './hooks/useDropdown';
+export type { UseEditableFormArgs, UseEditableFormReturn } from './hooks/useEditableForm';
 export { default as useEditableForm } from './hooks/useEditableForm';
+export type { UseFormArgs, UseFormReturn } from './hooks/useForm';
 export { default as useForm } from './hooks/useForm';
+export type { UseModalFormArgs, UseModalFormReturn } from './hooks/useModalForm';
 export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/index.js

@@ -1,4 +1,5 @@
 export * from './interfaces';
+export { default as Autocomplete } from './components/Autocomplete';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EditableForm } from './components/EditableForm';
 export { default as EditableFormField } from './components/EditableFormField';
@@ -6,11 +7,15 @@ export { default as Form } from './components/Form';
 export { default as FormField } from './components/FormField';
 export { default as FormSubmit } from './components/FormSubmit';
 export { default as ModalForm } from './components/ModalForm';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
+export { default as NumberInput } from './components/NumberInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export { default as PointsInput } from './components/PointsInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
 export { default as TextInput } from './components/TextInput';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
-// Hooks
+export { AutocompleteFormField, DropdownFormField, MoneyFormField, NumberFormField, PasswordFormField, TextFormField, } from './components/FormFields';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
 export { default as useDropdown } from './hooks/useDropdown';
 export { default as useEditableForm } from './hooks/useEditableForm';
 export { default as useForm } from './hooks/useForm';

package/dist/forms/interfaces.d.ts

@@ -26,6 +26,7 @@ export interface InputProps<V, T extends V = V> {
     id?: string;
     isDisabled?: boolean;
     name: string;
+    ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;
     onKeyDown?: React.KeyboardEventHandler;
     value?: V;

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useClickOutside } from './useClickOutside';
+export { default as useServerAction } from './useServerAction';

package/dist/hooks/index.js

@@ -1 +1,2 @@
-"use strict";
+export { default as useClickOutside } from './useClickOutside';
+export { default as useServerAction } from './useServerAction';

package/dist/hooks/useConfirmable.d.ts

@@ -0,0 +1,21 @@
+import type { ActionEvent } from '../utility/interfaces';
+interface UseConfirmableArgs {
+    isLoading?: boolean;
+    onBeforeConfirm?: () => void;
+    onConfirm: (event: ActionEvent, currentRef: HTMLButtonElement | null) => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
+}
+interface UseConfirmableReturn {
+    handle: (event?: ActionEvent) => void;
+    isOpen: boolean;
+    modalProps: {
+        isLoading: boolean;
+        onCancel: () => void;
+        onConfirm: () => void;
+    };
+    ref: React.RefObject<HTMLButtonElement | null>;
+}
+declare function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }: Readonly<UseConfirmableArgs>): UseConfirmableReturn;
+export default useConfirmable;