@sqrzro/ui 4.0.0-alpha.7 → 4.0.0-alpha.71

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';
+import tw from '../../../styles/classnames/utility/tw';
 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, 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,39 @@
 import type { FormFieldComponentProps } from '../../interfaces';
 import type { AutocompleteComponentProps } from '../Autocomplete';
+import type { ColorInputComponentProps } from '../ColorInput';
+import type { CalendarInputComponentProps } from '../CalendarInput';
 import type { DropdownComponentProps } from '../Dropdown';
-import type { MoneyInputComponentProps } from '../MoneyInput';
+import type { ImageInputComponentProps } from '../ImageInput';
+import type { PointsInputComponentProps } from '../PointsInput';
 import type { NumberInputComponentProps } from '../NumberInput';
 import type { PasswordInputComponentProps } from '../PasswordInput';
+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 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 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,52 @@ 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 Dropdown from '../Dropdown';
 import FormField from '../FormField';
-import MoneyInput from '../MoneyInput';
+import ImageInput from '../ImageInput';
+import PointsInput from '../PointsInput';
 import NumberInput from '../NumberInput';
 import PasswordInput from '../PasswordInput';
+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 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 })), [inputProps]);
     return _jsx(FormField, { ...fieldProps, render: renderInput });
 }
 export function NumberFormField(props) {
@@ -33,8 +60,23 @@ export function PasswordFormField(props) {
     const renderInput = useCallback((renderProps) => (_jsx(PasswordInput, { ...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';
 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';
+import tw from '../../../styles/classnames/utility/tw';
 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/ImageInput/index.d.ts

@@ -0,0 +1,17 @@
+import type { FormResponse, InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
+export interface ImageInputClassNames {
+    description: string;
+    icon: HighlightableClassName;
+    image: string;
+    root: string;
+    title: string;
+}
+export interface ImageInputComponentProps {
+    maxSize?: [number?, number?];
+    minSize?: [number?, number?];
+    onUpload?: (file: File) => FormResponse<string>;
+}
+export type ImageInputProps = ClassNameProps<ImageInputClassNames> & InputProps<string | null> & ImageInputComponentProps;
+declare function ImageInput({ classNames, classNameProps, 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,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import preprocessImage from '../../../forms/utility/preprocess-image';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import ImageInputPanel from '../ImageInputPanel';
+function ImageInput({ classNames, classNameProps, 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], { 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: "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';
+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';
+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

@@ -3,11 +3,12 @@ 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;

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

@@ -4,13 +4,14 @@ import Modal from '../../../components/modals/Modal';
 import ModalActions from '../../../components/modals/ModalActions';
 import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
 import Form from '../Form';
-function ModalForm({ children, formProps, hasServerError, hasSubmit = true, isDisabled, modalProps, submitLabel, }) {
+import { InfoPanel } from '../../../components';
+function ModalForm({ children, formProps, hasSubmit = true, isDisabled, modalProps, serverError, submitLabel, validationErrors, }) {
     const { setSearchParamsHref } = useSearchParamsHref();
     function handleCancel() {
-        setSearchParamsHref('action', null);
+        setSearchParamsHref({ action: null, id: 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' },
+    return (_jsx(Modal, { ...modalProps, children: _jsxs(Form, { ...formProps, children: [serverError ? _jsx(InfoPanel, { variant: "error", children: serverError }) : null, validationErrors?.length ? (_jsx(InfoPanel, { variant: "error", children: JSON.stringify(validationErrors) })) : null, children, _jsx(ModalActions, { actions: [
+                        { label: 'Cancel', onClick: handleCancel },
                         ...(modalProps.actions || []),
                         hasSubmit
                             ? {

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { InputProps } from '../../interfaces';
 import type { TextInputClassNames, TextInputComponentProps } from '../TextInput';
 export type NumberInputComponentProps = TextInputComponentProps;

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

@@ -0,0 +1,16 @@
+import { ClassNameProps } from '../../../styles';
+export interface PasswordComplexityClassNames {
+    root: string;
+    list: string;
+    item: string;
+    icon: string;
+}
+export interface PasswordComplexityProps extends ClassNameProps<PasswordComplexityClassNames> {
+    data: {
+        status: boolean;
+        value: string;
+    }[];
+    onComplexity?: (isValid: boolean) => void;
+}
+declare function PasswordComplexity({ classNameProps, classNames, data, onComplexity, }: PasswordComplexityProps): React.ReactElement;
+export default PasswordComplexity;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import PasswordComplexityItem from '../PasswordComplexityItem';
+function PasswordComplexity({ classNameProps, classNames, data, onComplexity, }) {
+    useDeepCompareEffect(() => {
+        onComplexity?.(data.every((item) => item.status));
+    }, [data]);
+    const isValid = data.every((item) => item.status);
+    const componentClassNames = useClassNames('passwordComplexity', { props: { ...classNameProps, isValid } }, classNames);
+    return (_jsx("aside", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: data.map((item) => (_jsx(PasswordComplexityItem, { classNameProps: classNameProps, classNames: classNames, isValid: item.status, value: item.value }, item.value))) }) }));
+}
+export default PasswordComplexity;

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

@@ -0,0 +1,8 @@
+import { ClassNameProps } from '../../../styles';
+import type { PasswordComplexityClassNames } from '../PasswordComplexity';
+interface PasswordComplexityItemProps extends ClassNameProps<PasswordComplexityClassNames> {
+    isValid: boolean;
+    value: string;
+}
+declare function PasswordComplexityItem({ classNameProps, classNames, isValid, value, }: PasswordComplexityItemProps): React.ReactElement;
+export default PasswordComplexityItem;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles';
+function PasswordComplexityItem({ classNameProps, classNames, isValid, value, }) {
+    const componentClassNames = useClassNames('passwordComplexity', { props: { ...classNameProps, isValid } }, classNames);
+    const InvalidIcon = useIcon('passwordComplexity.invalid');
+    const ValidIcon = useIcon('passwordComplexity.valid');
+    const Icon = isValid ? ValidIcon : InvalidIcon;
+    return (_jsxs("li", { className: componentClassNames?.item, children: [Icon ? (_jsx("div", { className: componentClassNames?.icon, children: _jsx(Icon, {}) })) : null, value] }));
+}
+export default PasswordComplexityItem;

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,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { getClassNames } from '../../../styles/config';
-import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
+import { useClassNames, useIcon } from '../../../styles/context';
 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 = useClassNames('passwordInput', { props: classNameProps, states: { isSelected: isVisible } }, classNames);
+    const HiddenIcon = useIcon('passwordInput.hidden');
+    const VisibleIcon = useIcon('passwordInput.visible');
+    const Icon = isVisible ? VisibleIcon : HiddenIcon;
     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/{MoneyInput → PointsInput}/index.js

@@ -13,10 +13,10 @@ function getValue(value) {
     }
     return value / FACTOR;
 }
-function MoneyInput({ name, onChange, prefix = '£', value, ...props }) {
+function PointsInput({ name, onChange, value, ...props }) {
     function handleChange(event) {
         onChange?.({ target: { name, value: setValue(event.target.value) } });
     }
-    return (_jsx(NumberInput, { prefix: prefix, ...props, name: name, onChange: handleChange, value: getValue(value) }));
+    return _jsx(NumberInput, { ...props, name: name, onChange: handleChange, value: getValue(value) });
 }
-export default MoneyInput;
+export default PointsInput;

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

@@ -0,0 +1,6 @@
+import { InputProps } from '../../interfaces';
+import { BaseCalendarInputComponentProps } from '../BaseCalendarInput';
+export type RangeCalendarInputComponentProps = BaseCalendarInputComponentProps;
+export type RangeCalendarInputProps = InputProps<[Date, Date] | null> & RangeCalendarInputComponentProps;
+declare function RangeCalendarInput({ name, onChange, value, ...baseProps }: RangeCalendarInputProps): React.ReactElement;
+export default RangeCalendarInput;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Calendar from '../../../components/utility/Calendar';
+import BaseCalendarInput from '../BaseCalendarInput';
+function RangeCalendarInput({ name, onChange, value, ...baseProps }) {
+    function handleChange(eventValue) {
+        onChange?.({ target: { name, value: eventValue } });
+    }
+    function handleClear() {
+        onChange?.({ target: { name, value: null } });
+    }
+    return (_jsx(BaseCalendarInput, { ...baseProps, name: name, onClear: handleClear, value: value, children: _jsx(Calendar, { isRange: true, onChange: handleChange, value: value }) }));
+}
+export default RangeCalendarInput;

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;
@@ -10,7 +10,7 @@ export interface StaticTextInputClassNames {
 }
 export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClassNames>, Omit<InputProps<string[] | string, string[] | string>, 'onChange'> {
     details?: string | null;
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     isOptional?: boolean;
     onClear?: () => void;

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

@@ -1,8 +1,9 @@
+'use client';
 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 { useClassNames, useIcon } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 function hasValue(value) {
     if (Array.isArray(value)) {
         return Boolean(value.filter((item) => Boolean(item)).length);
@@ -10,13 +11,11 @@ function hasValue(value) {
     return Boolean(value);
 }
 function StaticTextInput({ classNames, classNameProps, details, hasError, icon, isDisabled, isOptional, label, name, onClear, onClick, onKeyDown, placeholder = 'Select...', value, }) {
-    const componentClassNames = {
-        ...getClassNames('staticTextInput')?.(classNameProps),
-        ...classNames,
-    };
+    const componentClassNames = useClassNames('staticTextInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    const ClearIcon = useIcon('staticTextInput.clear');
     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: "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] })] }));
+    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-1 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsxs("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: [ClearIcon ? _jsx(ClearIcon, {}) : null, _jsx(Assistive, { children: "Clear" })] })) : null, icon && !isDisabled ? (_jsx("div", { className: tw('pointer-events-none flex-none', componentClassNames?.icon), children: icon })) : null] })] }));
 }
 export default StaticTextInput;

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

@@ -1,11 +1,17 @@
 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;
     input: CheckableClassName;
     icon: CheckableClassName;
+    label: string;
+    details: string;
 }
-export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean>;
-declare function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
+export type SwitchComponentProps = {
+    details?: React.ReactNode;
+    label?: React.ReactNode;
+};
+export type SwitchProps = ClassNameProps<SwitchClassNames> & InputProps<boolean> & SwitchComponentProps;
+declare function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }: Readonly<SwitchProps>): React.ReactElement;
 export default Switch;

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

@@ -1,9 +1,11 @@
+'use client';
 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';
-function Switch({ classNameProps, classNames, id, isDisabled, name, onChange, value, }) {
-    const componentClassNames = classNames || getClassNames('switch')?.(classNameProps);
+import Assistive from '../../../components/utility/Assistive';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+function Switch({ classNameProps, classNames, details, id, isDisabled, label, name, onChange, value, }) {
+    const componentClassNames = useClassNames('switch', { props: classNameProps, states: { isChecked: Boolean(value) } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const inputEvent = {
@@ -12,6 +14,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" }), _jsxs("div", { className: tw('block', componentClassNames?.root), children: [_jsxs("div", { className: tw('relative', componentClassNames?.control, isDisabled ? 'pointer-events-none opacity-30' : ''), 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 })] }), label ? (_jsxs("label", { htmlFor: id || name, children: [_jsx("span", { className: tw('', componentClassNames?.label), children: label }), details ? (_jsx("small", { className: tw('', componentClassNames?.details), children: details })) : null] })) : (_jsx(Assistive, { children: "Yes?" }))] })] }));
 }
 export default Switch;

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

@@ -0,0 +1,14 @@
+import type { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+export interface TextAreaClassNames {
+    root: ErrorableClassName;
+}
+export interface TextAreaComponentProps {
+    onBlur?: React.EventHandler<React.FocusEvent>;
+    onFocus?: React.EventHandler<React.FocusEvent>;
+    placeholder?: string;
+    rows?: number;
+}
+export type TextAreaProps = ClassNameProps<TextAreaClassNames> & InputProps<string> & TextAreaComponentProps;
+declare function TextArea({ classNames, classNameProps, hasError, id, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, rows, value, }: Readonly<TextAreaProps>): React.ReactElement;
+export default TextArea;