@sqrzro/ui 4.0.0-alpha.8 → 4.0.0-alpha.81

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement, useEffect, useRef } from 'react';
 import FormField from '../FormField';
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context.js';
 function getRenderedValue(value, renderValue) {
     if (renderValue) {
         if (typeof renderValue === 'function') {
@@ -19,7 +19,7 @@ function getRenderedValue(value, renderValue) {
     return value ? String(value) : '-';
 }
 function EditableFormField({ classNameProps, classNames, renderValue, status, ...props }) {
-    const componentClassNames = classNames || getClassNames('editableFormField')(classNameProps);
+    const componentClassNames = useClassNames('editableFormField', { props: classNameProps }, classNames);
     const cachedValue = useRef(props.value);
     useEffect(() => {
         if (status === 'CANCELLED') {
@@ -30,7 +30,7 @@ function EditableFormField({ classNameProps, classNames, renderValue, status, ..
         }
     }, [status]);
     if (status === 'EDITING') {
-        return _jsx(FormField, { ...props });
+        return _jsx(FormField, { classNameProps: { ...classNameProps, isEditable: true }, ...props });
     }
     return (_jsxs("div", { className: componentClassNames?.root, children: [_jsx("div", { className: componentClassNames?.label, children: props.label }), _jsx("div", { className: componentClassNames?.field, children: getRenderedValue(props.value, renderValue) })] }));
 }

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

@@ -1,7 +1,30 @@
 import type { EditableFormFieldComponentProps } from '../../interfaces';
+import type { CheckboxInputComponentProps } from '../CheckboxInput';
+import type { ColorInputComponentProps } from '../ColorInput';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { ImageInputComponentProps } from '../ImageInput';
+import type { NumberInputComponentProps } from '../NumberInput';
+import type { PointsInputComponentProps } from '../PointsInput';
+import type { SwitchComponentProps } from '../Switch';
+import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
+export type EditableCheckboxFormFieldProps<T> = EditableFormFieldComponentProps<T[]> & CheckboxInputComponentProps<T>;
+export declare function EditableCheckboxFormField<T>(props: Readonly<EditableCheckboxFormFieldProps<T>>): React.ReactElement;
+export type EditableColorFormFieldProps = EditableFormFieldComponentProps<string | undefined> & ColorInputComponentProps;
+export declare function EditableColorFormField(props: Readonly<EditableColorFormFieldProps>): React.ReactElement;
 export type EditableDropdownFormFieldProps<T> = EditableFormFieldComponentProps<T | null> & DropdownComponentProps<T>;
 export declare function EditableDropdownFormField<T>(props: Readonly<EditableDropdownFormFieldProps<T>>): React.ReactElement;
+export type EditableImageFormFieldProps = EditableFormFieldComponentProps<string | null> & ImageInputComponentProps;
+export declare function EditableImageFormField(props: Readonly<EditableImageFormFieldProps>): React.ReactElement;
+export type EditableMoneyFormFieldProps = EditableFormFieldComponentProps<number> & PointsInputComponentProps;
+export declare function EditableMoneyFormField(props: Readonly<EditableMoneyFormFieldProps>): React.ReactElement;
+export type EditableNumberFormFieldProps = EditableFormFieldComponentProps<number> & NumberInputComponentProps;
+export declare function EditableNumberFormField(props: Readonly<EditableNumberFormFieldProps>): React.ReactElement;
+export type EditablePointsFormFieldProps = EditableFormFieldComponentProps<number> & PointsInputComponentProps;
+export declare function EditablePointsFormField(props: Readonly<EditablePointsFormFieldProps>): React.ReactElement;
+export type EditableSwitchFormFieldProps = EditableFormFieldComponentProps<boolean> & SwitchComponentProps;
+export declare function EditableSwitchFormField(props: Readonly<EditableSwitchFormFieldProps>): React.ReactElement;
+export type EditableTextAreaFormFieldProps = EditableFormFieldComponentProps<string> & TextAreaComponentProps;
+export declare function EditableTextAreaFormField(props: Readonly<EditableTextAreaFormFieldProps>): React.ReactElement;
 export type EditableTextFormFieldProps = EditableFormFieldComponentProps<string> & TextInputComponentProps;
 export declare function EditableTextFormField(props: Readonly<EditableTextFormFieldProps>): React.ReactElement;

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

@@ -1,9 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import { formatMoney, formatPoints } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
+import CheckboxInput from '../CheckboxInput';
+import ColorInput from '../ColorInput';
 import Dropdown from '../Dropdown';
 import EditableFormField from '../EditableFormField';
+import ImageInput from '../ImageInput';
+import NumberInput from '../NumberInput';
+import PointsInput from '../PointsInput';
+import Switch from '../Switch';
+import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+import ChkRad from '../ChkRad';
+export function EditableCheckboxFormField(props) {
+    const classNames = useClassNames('checkboxInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CheckboxInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsx("ul", { className: classNames?.root, role: "listbox", children: props.options
+                ?.filter((option) => value.includes(option.value))
+                .map((option) => (_jsx("li", { className: classNames?.item, children: _jsx(ChkRad, { isReadOnly: true, label: option.label, name: props.name, value: true }) }, String(option.value)))) }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
+export function EditableColorFormField(props) {
+    const classNames = useClassNames('colorInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ColorInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsxs("div", { className: "relative flex items-center gap-2", children: [_jsx("span", { className: tw(classNames?.icon), style: { backgroundColor: value || 'transparent' } }), _jsx("span", { className: tw(classNames?.label), children: value.toUpperCase() })] }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
 export function EditableDropdownFormField(props) {
     const { fieldProps, inputProps } = extractEditableInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(Dropdown, { ...renderProps, ...inputProps })), [inputProps]);
@@ -13,6 +50,46 @@ export function EditableDropdownFormField(props) {
     }, [inputProps]);
     return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
 }
+export function EditableImageFormField(props) {
+    const classNames = useClassNames('imageInput');
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ImageInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        if (!value) {
+            return '-';
+        }
+        return (_jsx("div", { className: tw('relative flex items-center justify-center overflow-hidden text-center', classNames?.root), children: _jsx("img", { src: value, className: classNames?.image }) }));
+    }, [fieldProps.value]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
+export function EditableMoneyFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps, prefix: "\u00A3" })), [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: formatMoney });
+}
+export function EditableNumberFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(NumberInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput });
+}
+export function EditablePointsFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: formatPoints });
+}
+export function EditableSwitchFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Switch, { ...renderProps, ...inputProps, label: null })), [inputProps]);
+    const renderValue = useCallback((value) => {
+        return _jsx("div", { children: value ? 'Yes' : 'No' });
+    }, [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput, renderValue: renderValue });
+}
+export function EditableTextAreaFormField(props) {
+    const { fieldProps, inputProps } = extractEditableInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(TextArea, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(EditableFormField, { ...fieldProps, render: renderInput });
+}
 export function EditableTextFormField(props) {
     const { fieldProps, inputProps } = extractEditableInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);

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

@@ -1,12 +1,15 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 export interface FormClassNames {
     root: string;
+    errors: string;
 }
 export interface FormProps extends ClassNameProps<FormClassNames> {
     action?: (formData: FormData) => void;
     children: React.ReactNode;
     id?: string;
     onSubmit?: React.FormEventHandler<HTMLFormElement>;
+    ref?: React.Ref<HTMLFormElement>;
+    uncaughtErrors: Record<string, string> | null;
 }
-declare function Form({ action, children, classNames, classNameProps, id, onSubmit, }: Readonly<FormProps>): React.ReactElement;
+declare function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }: Readonly<FormProps>): React.ReactElement;
 export default Form;

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

@@ -1,9 +1,10 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-function Form({ action, children, classNames, classNameProps, id, onSubmit, }) {
-    const componentClassNames = classNames || getClassNames('form')?.(classNameProps);
-    return (_jsx("form", { action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import { InfoPanel } from '../../../components/index.js';
+function Form({ action, children, classNames, classNameProps, id, onSubmit, uncaughtErrors, ref, }) {
+    const componentClassNames = useClassNames('form', { props: classNameProps }, classNames);
+    return (_jsxs("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: [uncaughtErrors && Object.keys(uncaughtErrors).length ? (_jsx("div", { className: tw(componentClassNames?.errors), children: _jsx(InfoPanel, { variant: "error", children: Object.values(uncaughtErrors).map((item, index) => (_jsx("p", { children: item }, index))) }) })) : null, children] }));
 }
 export default Form;

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

@@ -1,6 +1,6 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { FormFieldClassNames } from '../FormField';
-interface FormErrorProps extends ClassNameProps<FormFieldClassNames> {
+export interface FormErrorProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;
     id: string;
     isAssistive?: boolean;

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

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function FormError({ children, classNames, classNameProps, id, isAssistive, }) {
-    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
-    return (_jsx("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: children }));
+    const componentClassNames = useClassNames('formField', { props: classNameProps }, classNames);
+    const Icon = useIcon('formField.error');
+    return (_jsxs("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: [Icon ? (_jsx("div", { className: "h-5 w-5", children: _jsx(Icon, {}) })) : null, children] }));
 }
 export default FormError;

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

@@ -1,6 +1,6 @@
-import type { InputEvent, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { InputEvent, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces.js';
+import { SimpleActionObject } from '../../../utility/interfaces.js';
 export interface FormFieldClassNames {
     root: ErrorableClassName;
     label: string;
@@ -10,16 +10,18 @@ export interface FormFieldClassNames {
     error: string;
 }
 export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormFieldClassNames>, InputProps<T, V> {
-    action?: Action | null;
-    details?: string | null;
+    action?: SimpleActionObject | null;
+    details?: React.ReactNode;
     error?: Record<string, string> | null;
     hasAssistiveError?: boolean;
+    hasAssistiveDetails?: boolean;
     hasAssistiveLabel?: boolean;
     isContentOnly?: boolean;
     isOptional?: boolean;
     label?: React.ReactNode;
     onChange?: (event: InputEvent<T>) => void;
+    onFieldChange?: (event: InputEvent<T>) => void;
     render: (props: InputProps<T>) => React.ReactElement | null;
 }
-declare function FormField<T, V extends T>({ action, classNameProps, details, error, hasAssistiveError, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
+declare function FormField<T, V extends T>({ action, classNameProps, classNames, details, error, hasAssistiveError, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

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

@@ -1,30 +1,38 @@
 '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 { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 import FormError from '../FormError';
 import FormLabel from '../FormLabel';
-import ActionButton from '../../../components/buttons/ActionButton';
+import ActionButton from '../../../components/buttons/ActionButton/index.js';
 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, hasAssistiveDetails, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onFieldChange, onKeyDown, render, value, }) {
+    const componentClassNames = useClassNames('formField', { props: classNameProps, states: { isError: checkHasError(error) } }, classNames);
     const inputId = id || `ff_${name}`;
     const [inputError, setInputError] = useState(null);
+    function handleChange(event) {
+        onFieldChange?.(event);
+        onChange?.(event);
+    }
     function handleError(message) {
         setInputError(message);
     }
     const renderProps = {
         classNameProps,
+        details,
         error,
         hasError: checkHasError(error),
         id: inputId,
         isDisabled,
+        isOptional,
         label,
         name,
-        onChange,
+        onChange: handleChange,
         onError: handleError,
         onKeyDown,
         value,
@@ -32,6 +40,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: tw(componentClassNames?.details, hasAssistiveDetails ? 'sr-only' : null), 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,19 +1,44 @@
 import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
+import type { ColorInputComponentProps } from '../ColorInput';
+import type { CalendarInputComponentProps } from '../CalendarInput';
+import type { CheckboxInputComponentProps } from '../CheckboxInput';
 import type { DropdownComponentProps } from '../Dropdown';
-import type { MoneyInputComponentProps } from '../MoneyInput';
+import type { ImageInputComponentProps } from '../ImageInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
+import type { PointsInputComponentProps } from '../PointsInput';
+import type { RangeCalendarInputComponentProps } from '../RangeCalendarInput';
+import type { SwitchComponentProps } from '../Switch';
+import type { TextAreaComponentProps } from '../TextArea';
 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 CalendarFormFieldProps = FormFieldComponentProps<Date | null> & CalendarInputComponentProps;
+export declare function CalendarFormField(props: Readonly<CalendarFormFieldProps>): React.ReactElement;
+export type CheckboxFormFieldProps<T> = FormFieldComponentProps<T[]> & CheckboxInputComponentProps<T>;
+export declare function CheckboxFormField<T>(props: Readonly<CheckboxFormFieldProps<T>>): React.ReactElement;
+export type ColorFormFieldProps = FormFieldComponentProps<string> & ColorInputComponentProps;
+export declare function ColorFormField(props: Readonly<ColorFormFieldProps>): React.ReactElement;
+export type CSVFormFieldProps = FormFieldComponentProps<string>;
+export declare function CSVFormField(props: Readonly<CSVFormFieldProps>): 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> & MoneyInputComponentProps;
+export type ImageFormFieldProps = FormFieldComponentProps<string | null> & ImageInputComponentProps;
+export declare function ImageFormField(props: Readonly<ImageFormFieldProps>): 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 PointsFormFieldProps = FormFieldComponentProps<number> & PointsInputComponentProps;
+export declare function PointsFormField(props: Readonly<PointsFormFieldProps>): React.ReactElement;
+export type RangeCalendarFormFieldProps = FormFieldComponentProps<[Date, Date] | null> & RangeCalendarInputComponentProps;
+export declare function RangeCalendarFormField(props: Readonly<RangeCalendarFormFieldProps>): React.ReactElement;
+export type SwitchFormFieldProps = FormFieldComponentProps<boolean> & SwitchComponentProps;
+export declare function SwitchFormField(props: SwitchFormFieldProps): React.ReactElement;
 export type TextFormFieldProps = FormFieldComponentProps<string> & TextInputComponentProps;
 export declare function TextFormField(props: Readonly<TextFormFieldProps>): React.ReactElement;
+export type TextAreaFormFieldProps = FormFieldComponentProps<string> & TextAreaComponentProps;
+export declare function TextAreaFormField(props: Readonly<TextAreaFormFieldProps>): React.ReactElement;

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

@@ -2,25 +2,58 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import extractInputProps from '../../utility/extract-input-props';
 import Autocomplete from '../Autocomplete';
+import ColorInput from '../ColorInput';
+import CSVInput from '../CSVInput';
+import CalendarInput from '../CalendarInput';
+import CheckboxInput from '../CheckboxInput';
 import Dropdown from '../Dropdown';
 import FormField from '../FormField';
-import MoneyInput from '../MoneyInput';
+import ImageInput from '../ImageInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
+import PointsInput from '../PointsInput';
+import RangeCalendarInput from '../RangeCalendarInput';
+import Switch from '../Switch';
+import TextArea from '../TextArea';
 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 CalendarFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function CheckboxFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CheckboxInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function ColorFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ColorInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function CSVFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(CSVInput, { ...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 ImageFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(ImageInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
 export function MoneyFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
-    const renderInput = useCallback((renderProps) => (_jsx(MoneyInput, { ...renderProps, ...inputProps })), [inputProps]);
+    const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps, prefix: "\u00A3" })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
 export function NumberFormField(props) {
@@ -33,8 +66,28 @@ export function PasswordFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function PointsFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(PointsInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function RangeCalendarFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(RangeCalendarInput, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}
+export function SwitchFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(Switch, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, hasAssistiveLabel: true, hasAssistiveDetails: true, render: renderInput });
+}
 export function TextFormField(props) {
     const { fieldProps, inputProps } = extractInputProps(props);
     const renderInput = useCallback((renderProps) => (_jsx(TextInput, { ...renderProps, ...inputProps })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
+export function TextAreaFormField(props) {
+    const { fieldProps, inputProps } = extractInputProps(props);
+    const renderInput = useCallback((renderProps) => (_jsx(TextArea, { ...renderProps, ...inputProps })), [inputProps]);
+    return _jsx(FormField, { ...fieldProps, render: renderInput });
+}

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.js';
 import type { FormFieldClassNames } from '../FormField';
 interface FormLabelProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;

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

@@ -1,8 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
 function FormLabel({ children, classNames, classNameProps, htmlFor, isAssistive, isOptional, }) {
-    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
+    const componentClassNames = useClassNames('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/FormSubmit/index.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from '../../../components/buttons/Button';
+import type { ButtonProps } from '../../../components/buttons/Button/index.js';
 export type FormSubmitProps = Omit<ButtonProps, 'href' | 'isNewWindow' | 'isText'>;
 declare function FormSubmit({ isLoading, ...props }: Readonly<FormSubmitProps>): React.ReactElement;
 export default FormSubmit;

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormStatus } from 'react-dom';
-import Button from '../../../components/buttons/Button';
+import Button from '../../../components/buttons/Button/index.js';
 function FormSubmit({ isLoading, ...props }) {
     const { pending } = useFormStatus();
     return _jsx(Button, { ...props, isLoading: isLoading || pending, type: "submit", variant: "primary" });

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

@@ -0,0 +1,20 @@
+import type { ImageTypeKey } from '../../utility/preprocess-image.js';
+import type { FormResponse, InputProps } from '../../interfaces.js';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces.js';
+export interface ImageInputClassNames {
+    description: string;
+    icon: HighlightableClassName;
+    image: string;
+    root: string;
+    title: string;
+}
+export interface ImageInputComponentProps {
+    accept?: ImageTypeKey[];
+    format?: ImageTypeKey;
+    maxSize?: [number?, number?];
+    minSize?: [number?, number?];
+    onUpload?: (file: File) => FormResponse<string>;
+}
+export type ImageInputProps = ClassNameProps<ImageInputClassNames> & InputProps<string | null> & ImageInputComponentProps;
+declare function ImageInput({ accept, classNames, classNameProps, format, id, isDisabled, maxSize, minSize, name, onChange, onUpload, value, }: Readonly<ImageInputProps>): React.ReactElement;
+export default ImageInput;

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

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import preprocessImage from '../../utility/preprocess-image.js';
+import { useClassNames } from '../../../styles/context.js';
+import tw from '../../../styles/classnames/utility/tw.js';
+import ImageInputPanel from '../ImageInputPanel';
+function ImageInput({ accept, classNames, classNameProps, format, id, isDisabled, maxSize, minSize, name, onChange, onUpload, value, }) {
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const componentClassNames = useClassNames('imageInput', {
+        props: classNameProps,
+    }, classNames);
+    async function handleChange(event) {
+        if (!onUpload) {
+            return;
+        }
+        setError(null);
+        setIsLoading(true);
+        const imageFiles = event.target.files;
+        if (!imageFiles?.length) {
+            setIsLoading(false);
+            return;
+        }
+        try {
+            const preprocessed = await preprocessImage(imageFiles[0], {
+                accept,
+                format,
+                maxSize,
+                minSize,
+            });
+            const fnReturn = await onUpload(preprocessed);
+            setIsLoading(false);
+            if (fnReturn.error) {
+                setError(fnReturn.error);
+            }
+            else if (fnReturn.validation) {
+                setError(Object.values(fnReturn.validation)[0]);
+            }
+            else if (fnReturn.data !== null) {
+                onChange?.({ target: { name, value: fnReturn.data } });
+            }
+        }
+        catch (err) {
+            setIsLoading(false);
+            setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+        }
+    }
+    return (_jsxs("div", { className: tw('relative flex items-center justify-center overflow-hidden text-center', componentClassNames?.root, isDisabled || isLoading ? 'pointer-events-none opacity-20' : null), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: accept?.map((type) => `.${type}`).join(',') || 'image/*', className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled || isLoading, id: id || name, name: name, onChange: handleChange, type: "file" }), _jsx(ImageInputPanel, { classNames: classNames, classNameProps: { ...classNameProps, isError: Boolean(error) }, error: error, isLoading: isLoading, minSize: minSize, value: value })] }));
+}
+export default ImageInput;

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

@@ -0,0 +1,10 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
+import type { ImageInputClassNames } from '../ImageInput';
+interface ImageInputPanelProps extends ClassNameProps<ImageInputClassNames> {
+    error?: string | null;
+    isLoading?: boolean;
+    minSize?: [number?, number?];
+    value?: string | null;
+}
+declare function ImageInputPanel({ classNameProps, classNames, error, isLoading, minSize, value, }: ImageInputPanelProps): React.ReactElement;
+export default ImageInputPanel;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/context.js';
+function renderMinSize(minSize) {
+    if (!minSize) {
+        return null;
+    }
+    const [width, height] = minSize;
+    if (width && height) {
+        return `(Minimum size: ${width} x ${height}px)`;
+    }
+    if (width) {
+        return `(Minimum width: ${width}px)`;
+    }
+    if (height) {
+        return `(Minimum height: ${height}px)`;
+    }
+    return null;
+}
+function ImageInputPanel({ classNameProps, classNames, error, isLoading, minSize, value, }) {
+    const ErrorIcon = useIcon('imageInput.error');
+    const UploadIcon = useIcon('imageInput.upload');
+    const componentClassNames = useClassNames('imageInput', {
+        props: classNameProps,
+    }, classNames);
+    if (value) {
+        return _jsx("img", { src: value, className: componentClassNames?.image });
+    }
+    const minSizeDescription = renderMinSize(minSize);
+    if (error) {
+        return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: ErrorIcon ? _jsx(ErrorIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: error }), _jsx("p", { className: componentClassNames?.description, children: minSizeDescription ?? 'Please try again' })] }));
+    }
+    return (_jsxs("div", { children: [_jsx("i", { className: componentClassNames?.icon, children: UploadIcon ? _jsx(UploadIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: "Click to Upload" }), _jsx("p", { className: componentClassNames?.description, children: minSizeDescription ?? 'or drag an image over this box' })] }));
+}
+export default ImageInputPanel;

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

@@ -1,13 +1,14 @@
-import type { ModalProps } from '../../../components/modals/Modal';
+import type { ModalProps } from '../../../components/modals/Modal/index.js';
 import type { FormProps } from '../Form';
 export interface ModalFormProps {
     children: React.ReactNode;
     formProps: Omit<FormProps, 'children'>;
-    hasServerError?: boolean;
     hasSubmit?: boolean;
     isDisabled?: boolean;
     modalProps: Omit<ModalProps, 'children'>;
+    serverError?: string | null;
     submitLabel?: string;
+    validationErrors?: string[];
 }
-declare function ModalForm({ children, formProps, hasServerError, hasSubmit, isDisabled, modalProps, submitLabel, }: Readonly<ModalFormProps>): React.ReactElement;
+declare function ModalForm({ children, formProps, hasSubmit, isDisabled, modalProps, serverError, submitLabel, validationErrors, }: Readonly<ModalFormProps>): React.ReactElement;
 export default ModalForm;