@sqrzro/ui 4.0.0-alpha.6 → 4.0.0-alpha.60

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

@@ -1,4 +1,4 @@
-import { ClassNameProps } from '../../../styles/interfaces';
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { DropdownObject, InputProps } from '../../interfaces';
 import { DropdownClassNames, DropdownComponentProps } from '../Dropdown';
 export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T> {
@@ -7,5 +7,5 @@ export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T>
     selected?: DropdownObject<T> | null;
 }
 export type AutocompleteProps<T> = ClassNameProps<DropdownClassNames> & InputProps<T | null> & AutocompleteComponentProps<T>;
-declare function Autocomplete<T>({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
+declare function Autocomplete<T>({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
 export default Autocomplete;

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

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useRef, useState } from 'react';
 import Popover from '../../../components/utility/Popover';
 import useClickOutside from '../../../hooks/useClickOutside';
-import DropdownList from '../DropdownList';
 import StaticTextInput from '../StaticTextInput';
 import TextInput from '../TextInput';
-function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }) {
+import AutocompleteList from '../AutocompleteList';
+function Autocomplete({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }) {
     const inputRef = useRef(null);
     const [search, setSearch] = useState('');
     const [isOpen, setIsOpen, ref] = useClickOutside();
@@ -32,6 +32,6 @@ function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onCha
             inputRef.current?.focus();
         }, 10);
     }
-    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: isOptional, label: selected.label, name: name, onClick: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(Boolean(options?.length)), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen, isScrollable: true, children: options?.length ? (_jsx(DropdownList, { name: name, onChange: handleChange, options: options ?? [], value: value })) : isLoading ? (_jsx("div", { children: "Loading..." })) : (_jsx("div", { children: "No results" })) })] })) }));
+    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: true, label: selected.label, name: name, onClear: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(true), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen && search.length >= 3, isScrollable: true, children: _jsx(AutocompleteList, { name: name, onChange: handleChange, options: options, search: search, value: value }) })] })) }));
 }
 export default Autocomplete;

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

@@ -0,0 +1,7 @@
+import type { DropdownObject, InputProps } from '../../interfaces';
+interface AutocompleteListProps<T> extends InputProps<T | null> {
+    options?: DropdownObject<T>[];
+    search: string;
+}
+declare function AutocompleteList<T>({ name, onChange, options, search, value, }: AutocompleteListProps<T>): React.ReactElement | null;
+export default AutocompleteList;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import DropdownList from '../DropdownList';
+function AutocompleteList({ name, onChange, options, search, value, }) {
+    if (!options?.length) {
+        return (_jsx(DropdownList, { name: name, options: [
+                {
+                    label: (_jsxs(Fragment, { children: ["No results found for ", _jsx("strong", { children: search })] })),
+                    value: null,
+                },
+            ] }));
+    }
+    return _jsx(DropdownList, { name: name, onChange: onChange, options: options, value: value });
+}
+export default AutocompleteList;

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

@@ -0,0 +1,11 @@
+import { InputProps } from '../../interfaces';
+export interface BaseCalendarInputComponentProps {
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+}
+interface BaseCalendarInputProps extends InputProps<Date | [Date, Date] | null>, BaseCalendarInputComponentProps {
+    children: React.ReactElement;
+    onClear?: () => void;
+}
+declare function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }: BaseCalendarInputProps): React.ReactElement;
+export default BaseCalendarInput;

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Popover from '../../../components/utility/Popover';
+import usePopover from '../../../hooks/usePopover';
+import formatDateValue from '../../utility/format-date-value';
+import StaticTextInput from '../StaticTextInput';
+function BaseCalendarInput({ children, hasError, isDisabled, isOptional, isPanelOnly, name, onClear, value, }) {
+    const [oldValue, setOldValue] = useState(value);
+    const { controlProps, ref, targetProps } = usePopover();
+    if (isPanelOnly) {
+        return children;
+    }
+    useEffect(() => {
+        if ((value && !oldValue) || (value && oldValue)) {
+            controlProps.onClick();
+        }
+        setOldValue(value);
+    }, [value]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [_jsx(StaticTextInput, { hasError: hasError, isDisabled: isDisabled, label: formatDateValue(value), name: name, isOptional: isOptional, onClear: onClear, onClick: controlProps.onClick, value: value?.toString() }), _jsx(Popover, { ...targetProps, align: "center", children: children })] }));
+}
+export default BaseCalendarInput;

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

@@ -0,0 +1,11 @@
+import { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
+export interface CSVInputClassNames {
+    root: string;
+    icon: HighlightableClassName;
+    title: string;
+    description: string;
+}
+export type CSVInputProps = ClassNameProps<CSVInputClassNames> & InputProps<string>;
+declare function CSVInput({ classNames, classNameProps, id, isDisabled, name, onChange, value, }: Readonly<CSVInputProps>): React.ReactElement;
+export default CSVInput;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { formatPlural } from '@sqrzro/utility';
+import { useClassNames, useIcon } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import formatFileSize from '../../utility/format-file-size';
+function CSVInput({ classNames, classNameProps, id, isDisabled, name, onChange, value, }) {
+    const UploadIcon = useIcon('csvInput.upload');
+    const SuccessIcon = useIcon('csvInput.success');
+    const [fileData, setFileData] = useState(null);
+    const componentClassNames = useClassNames('csvInput', { props: classNameProps, states: { isHighlighted: Boolean(fileData) } }, classNames);
+    function handleChange(event) {
+        const { files } = event.target;
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+            const text = reader.result?.toString() || '';
+            const lines = text.split('\n').filter((item) => item.trim() !== '').length;
+            setFileData({
+                lines,
+                name: files?.[0].name || '',
+                size: files?.[0].size || 0,
+            });
+            onChange?.({ target: { name, value: text } });
+        }, false);
+        if (files?.[0]) {
+            reader.readAsText(files[0]);
+        }
+    }
+    return (_jsxs("div", { className: tw('relative flex items-center justify-center', componentClassNames?.root), children: [_jsx("input", { name: name, type: "hidden", value: value || '' }), _jsx("input", { accept: "text/csv", className: "absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: isDisabled, id: id || name, name: name, onChange: handleChange, type: "file" }), fileData ? (_jsxs("div", { className: tw('text-center', isDisabled ? 'pointer-events-none opacity-20' : null), children: [_jsx("i", { className: componentClassNames?.icon, children: SuccessIcon ? _jsx(SuccessIcon, {}) : null }), _jsx("p", { className: componentClassNames?.title, children: fileData.name }), _jsxs("p", { className: componentClassNames?.description, children: [formatFileSize(fileData.size), " \u2022", ' ', formatPlural('line', fileData.lines)] })] })) : (_jsxs("div", { className: "text-center", 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: "(or drag a CSV file over this box)" })] }))] }));
+}
+export default CSVInput;

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

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

package/dist/forms/components/CalendarInput/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 CalendarInput({ 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, { onChange: handleChange, value: value }) }));
+}
+export default CalendarInput;

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

@@ -0,0 +1,16 @@
+import { InputProps } from '../../../forms/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+export interface ColorInputClassNames {
+    root: ErrorableClassName;
+    input: string;
+    icon: string;
+    label: string;
+    placeholder: string;
+    clear: string;
+}
+export interface ColorInputComponentProps {
+    placeholder?: string;
+}
+export type ColorInputProps = ClassNameProps<ColorInputClassNames> & InputProps<string | undefined, string> & ColorInputComponentProps;
+declare function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }: Readonly<ColorInputProps>): React.ReactElement;
+export default ColorInput;

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Assistive from '../../../components/utility/Assistive';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+function ColorInput({ classNames, classNameProps, hasError, name, onChange, placeholder, value, }) {
+    const componentClassNames = useClassNames('colorInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
+    function handleClear() {
+        onChange?.({ target: { name, value: '' } });
+    }
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root), children: [_jsx("input", { className: tw('absolute inset-0 h-full w-full cursor-pointer opacity-0', componentClassNames?.input), name: name, onChange: onChange, type: "color", value: value || '' }), _jsx("i", { className: tw(componentClassNames?.icon), style: { backgroundColor: value || 'transparent' } }), value ? (_jsx("span", { className: tw(componentClassNames?.label), children: value.toUpperCase() })) : (_jsx("span", { className: tw(componentClassNames?.placeholder), children: placeholder || 'Select...' })), _jsx("span", { className: "absolute bottom-0 right-0 top-0 flex w-0 items-center justify-end", children: value ? (_jsx("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: _jsx(Assistive, { children: "Clear" }) })) : null })] }));
+}
+export default ColorInput;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName, FocusableClassName, SelectableClassName } from '../../../styles/classnames/interfaces';
 import type { DropdownObject, InputProps } from '../../interfaces';
 export interface DropdownClassNames {
     root: ErrorableClassName & FocusableClassName;

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

@@ -2,22 +2,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Popover from '../../../components/utility/Popover';
 import useClickOutside from '../../../hooks/useClickOutside';
-import tw from '../../../styles/tw';
-import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/classnames/utility/tw';
+import { useClassNames, useIcon } from '../../../styles/context';
 import DropdownList from '../DropdownList';
 import StaticTextInput from '../StaticTextInput';
 function findByValue(options, value) {
     return options.find((item) => item.value === value);
 }
 export function renderLabel(options, value) {
-    return findByValue(options, value)?.label || '';
+    return String(findByValue(options, value)?.label || '');
 }
 export function renderDetails(options, value) {
     return findByValue(options, value)?.details || '';
 }
 function Dropdown({ classNames, classNameProps, hasError, isDisabled, isOptional, isPanelOnly, name, onChange, options = [], placeholder, value, }) {
-    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
     const [isOpen, setIsOpen, node] = useClickOutside({ shouldHandleEnterKey: true });
+    const componentClassNames = useClassNames('dropdown', {
+        props: classNameProps,
+        states: { isError: hasError ?? false, isFocused: isOpen && !isDisabled },
+    }, classNames);
+    const Icon = useIcon('dropdown.control');
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
@@ -33,9 +37,6 @@ function Dropdown({ classNames, classNameProps, hasError, isDisabled, isOptional
     if (isPanelOnly) {
         return _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value });
     }
-    return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null, isOpen && !isDisabled ? componentClassNames?.root?.focused : null), children: [_jsx(StaticTextInput, { classNames: {
-                    clear: componentClassNames?.clear,
-                    icon: componentClassNames?.icon,
-                }, details: renderDetails(options, value), hasError: hasError, isDisabled: isDisabled || !options?.length, isOptional: isOptional, label: renderLabel(options, value), name: name, onClear: handleClear, onClick: toggleIsOpen, placeholder: placeholder || 'Select...', value: value ? String(value) : '' }), _jsx(Popover, { align: "center", isOpen: isOpen ? !isDisabled : false, isScrollable: true, children: _jsx(DropdownList, { name: name, onChange: handleChange, options: options, value: value }) })] }));
+    return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root), children: [_jsx(StaticTextInput, { classNameProps: classNameProps, details: renderDetails(options, value), hasError: hasError, icon: Icon ? _jsx(Icon, {}) : null, isDisabled: isDisabled || !options?.length, isOptional: isOptional, label: renderLabel(options, value), name: name, onClear: handleClear, onClick: toggleIsOpen, placeholder: placeholder || 'Select...', value: value ? String(value) : '' }), _jsx(Popover, { align: "center", isOpen: isOpen ? !isDisabled : false, isScrollable: true, children: _jsx(DropdownList, { classNameProps: classNameProps, classNames: classNames, name: name, onChange: handleChange, options: options, value: value }) })] }));
 }
 export default Dropdown;

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

@@ -0,0 +1,9 @@
+import type { DropdownObject } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DropdownClassNames } from '../Dropdown';
+interface DropdownItemProps<T> extends ClassNameProps<DropdownClassNames>, DropdownObject<T> {
+    isSelected: boolean;
+    onChange: (item: Pick<DropdownObject<T>, '$data' | 'value'>) => () => void;
+}
+declare function DropdownItem<T>({ $data, classNameProps, classNames, details, isDisabled, isSelected, label, onChange, value, }: DropdownItemProps<T>): React.ReactElement;
+export default DropdownItem;

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+function DropdownItem({ $data, classNameProps, classNames, details, isDisabled, isSelected, label, onChange, value, }) {
+    const componentClassNames = useClassNames('dropdown', { props: classNameProps, states: { isSelected } }, classNames);
+    return (_jsx("li", { "aria-selected": isSelected, role: "option", children: _jsxs("button", { className: tw('relative w-full text-left', componentClassNames?.item, isDisabled ? 'pointer-events-none opacity-30' : null), onClick: onChange({ $data, value }), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap', componentClassNames?.title), children: label }), details ? (_jsx("small", { className: tw(componentClassNames?.details), children: details })) : null] }) }));
+}
+export default DropdownItem;

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

@@ -1,5 +1,5 @@
 import type { DropdownObject, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { DropdownClassNames } from '../Dropdown';
 export interface DropdownListProps<T> extends ClassNameProps<DropdownClassNames>, InputProps<T | null> {
     options: DropdownObject<T>[];

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

@@ -1,12 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-function isSelected(id, value) {
-    return Boolean(value) && value === id;
-}
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import DropdownItem from '../DropdownItem';
 function DropdownList({ classNames, classNameProps, name, onChange, options, value, }) {
-    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
-    // const checkboxClassNames = getClassNames('checkboxInput')?.(classNameProps);
+    const componentClassNames = useClassNames('dropdown', { props: classNameProps }, classNames);
+    // const checkboxClassNames = useClassNames('checkboxInput')?.(classNameProps);
     function handleChange(item) {
         return () => {
             onChange?.({
@@ -15,8 +13,6 @@ function DropdownList({ classNames, classNameProps, name, onChange, options, val
             });
         };
     }
-    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx("li", { "aria-selected": isSelected(item.value, value), role: "option", children: _jsxs("button", { className: tw('relative w-full text-left', item.isDisabled ? 'pointer-events-none opacity-30' : null, componentClassNames?.item?.default, isSelected(item.value, value)
-                    ? componentClassNames?.item?.selected
-                    : null), onClick: handleChange(item), tabIndex: -1, type: "button", children: [_jsx("span", { className: tw('whitespace-nowrap' /*componentClassNames?.label*/), children: item.label }), item.details ? (_jsx("small", { className: tw(componentClassNames?.details), children: item.details })) : null] }) }, index))) }));
+    return (_jsx("ul", { className: componentClassNames?.list, role: "listbox", children: options.map((item, index) => (_jsx(DropdownItem, { ...item, classNameProps: classNameProps, classNames: classNames, isSelected: Boolean(value) && value === item.value, onChange: handleChange }, index))) }));
 }
 export default DropdownList;

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

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import type { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { SimpleActionObject } from '../../../utility/interfaces';
 import type { EditingStatus } from '../../interfaces';
 import type { FormProps } from '../Form';
 export interface EditableFormClassNames {
@@ -11,7 +11,7 @@ export interface EditableFormClassNames {
     content: string;
 }
 export interface EditableFormProps extends ClassNameProps<EditableFormClassNames> {
-    actions?: Action[] | false;
+    actions?: SimpleActionObject[] | false;
     children: React.ReactNode;
     formProps: Omit<FormProps, 'children'>;
     onCancel?: () => void;

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

@@ -1,10 +1,10 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context';
 import Form from '../Form';
 function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }) {
-    const componentClassNames = classNames || getClassNames('editableForm')?.(classNameProps);
+    const componentClassNames = useClassNames('editableForm', { props: classNameProps }, classNames);
     function setCancelled() {
         onCancel?.();
         setStatus?.('CANCELLED');
@@ -13,11 +13,11 @@ function EditableForm({ classNameProps, classNames, children, formProps, onCance
         onEdit?.();
         setStatus?.('EDITING');
     }
-    return (_jsx(Form, { ...formProps, children: _jsxs("fieldset", { className: componentClassNames?.root, children: [title ? _jsx("header", { className: tw(componentClassNames?.header), children: _jsx("legend", { className: componentClassNames?.title, children: title }) }) : null, _jsxs("div", { className: tw(componentClassNames?.content), children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
-                                    ? [
-                                        { label: 'Cancel', onClick: setCancelled },
-                                        { isSubmittable: true, label: 'Save' },
-                                    ]
-                                    : [{ label: 'Edit', onClick: setEditing }] }) })] })] }) }));
+    return (_jsxs(Form, { ...formProps, classNames: { root: componentClassNames?.root }, children: [title ? (_jsx("header", { className: componentClassNames?.header, children: _jsx("legend", { className: componentClassNames?.title, children: title }) })) : null, _jsxs("div", { className: componentClassNames?.content, children: [children, _jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: status === 'EDITING'
+                                ? [
+                                    { label: 'Cancel', onClick: setCancelled },
+                                    { isSubmittable: true, label: 'Save' },
+                                ]
+                                : [{ label: 'Edit', onClick: setEditing }] }) })] })] }));
 }
 export default EditableForm;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import { FormFieldProps } from '../FormField';
 import { EditingStatus } from '../../interfaces';
 export interface EditableFormFieldClassNames {

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';
 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,13 @@
 import type { EditableFormFieldComponentProps } from '../../interfaces';
+import type { ColorInputComponentProps } from '../ColorInput';
 import type { DropdownComponentProps } from '../Dropdown';
+import type { TextAreaComponentProps } from '../TextArea';
 import type { TextInputComponentProps } from '../TextInput';
+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 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,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import extractEditableInputProps from '../../utility/extract-editable-input-props';
+import ColorInput from '../ColorInput';
 import Dropdown from '../Dropdown';
 import EditableFormField from '../EditableFormField';
+import TextArea from '../TextArea';
 import TextInput from '../TextInput';
+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 +29,11 @@ export function EditableDropdownFormField(props) {
     }, [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,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 export interface FormClassNames {
     root: string;
 }
@@ -7,6 +7,8 @@ export interface FormProps extends ClassNameProps<FormClassNames> {
     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';
+import tw from '../../../styles/classnames/utility/tw';
+import { InfoPanel } from '../../../components';
+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(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';
 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';
+import tw from '../../../styles/classnames/utility/tw';
 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 { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
+import { SimpleActionObject } from '../../../utility/interfaces';
 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';
+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;