@sqrzro/ui 4.0.0-alpha.13 → 4.0.0-alpha.14

package/dist/components/utility/Popover/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 const HORIZONTAL_THRESHOLD = 40;
 const VERTICAL_THRESHOLD = 40;
 function getPositionStyles(align = 'left', vAlign = 'top') {
@@ -22,7 +22,7 @@ function getPositionStyles(align = 'left', vAlign = 'top') {
         : 'left-1/2 -translate-x-1/2 origin-top top-full';
 }
 function Popover({ align: initialAlign = 'left', children, classNames, classNameProps, isOpen, isScrollable, vAlign: initialVAlign = 'bottom', }) {
-    const componentClassNames = classNames || getClassNames('popover')?.(classNameProps);
+    const componentClassNames = getClassNames('popover', { props: classNameProps, states: { isFocused: isOpen ?? false } }, classNames);
     const [align, setAlign] = useState(initialAlign);
     const [vAlign, setVAlign] = useState(initialVAlign);
     const ref = useRef(null);
@@ -66,6 +66,6 @@ function Popover({ align: initialAlign = 'left', children, classNames, className
             window.removeEventListener('scroll', handleResize);
         };
     }, []);
-    return (_jsx("div", { ref: ref, className: tw('absolute', getPositionStyles(align, vAlign), componentClassNames?.root?.default, isOpen ? componentClassNames?.root?.focused : null), style: { display: isOpen ? 'block' : 'none' }, children: isScrollable ? (_jsx("div", { className: componentClassNames?.scroll, children: children })) : (children) }));
+    return (_jsx("div", { ref: ref, className: tw('absolute', getPositionStyles(align, vAlign), componentClassNames?.root), style: { display: isOpen ? 'block' : 'none' }, children: isScrollable ? (_jsx("div", { className: componentClassNames?.scroll, children: children })) : (children) }));
 }
 export default Popover;

package/dist/components/utility/RootLayout/index.d.ts

@@ -1,5 +1,5 @@
-import { type RegisteredClassNames } from '../../../styles/config';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { RegisteredClassNames } from '../../../styles/classnames/config';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 export interface RootLayoutClassNames {
     root: string;
     content: string;

package/dist/components/utility/RootLayout/index.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames, registerClassNames } from '../../../styles/config';
-import ClassNames from '../ClassNames';
+import { getClassNames, registerClassNames } from '../../../styles/classnames';
+import ClassNamesClientComponent from '../ClassNamesClientComponent';
 import Toaster from '../Toaster';
+import tw from '../../../styles/classnames/tw';
 function RootLayout({ children, classNameConfig, classNameProps, classNames, font, }) {
     if (classNameConfig) {
         registerClassNames(classNameConfig);
     }
-    const componentClassNames = classNames || getClassNames('rootLayout')?.(classNameProps);
-    return (_jsxs("html", { lang: "en", className: font?.variable, children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: componentClassNames?.root, children: [_jsx("script", { dangerouslySetInnerHTML: {
+    const componentClassNames = getClassNames('rootLayout', { props: classNameProps }, classNames);
+    return (_jsxs("html", { lang: "en", className: font?.variable, children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: tw('overflow-x-hidden overflow-y-scroll has-[[data-modal][open]]:overflow-hidden', componentClassNames?.root), children: [_jsx("script", { dangerouslySetInnerHTML: {
                             __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
-                        } }), classNameConfig ? _jsx(ClassNames, { data: classNameConfig }) : null, _jsx("div", { className: componentClassNames?.content, children: children }), _jsx(Toaster, {})] })] }));
+                        } }), classNameConfig ? _jsx(ClassNamesClientComponent, { data: classNameConfig }) : null, _jsx("div", { className: tw('flex min-h-screen flex-col', componentClassNames?.content), children: children }), _jsx(Toaster, {})] })] }));
 }
 export default RootLayout;

package/dist/components/utility/Toast/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { StyleVariant } from '../../../utility/interfaces';
 export interface ToastClassNames {
     root: StylableClassName;

package/dist/components/utility/Toast/index.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function Toast({ children, classNames, classNameProps, }) {
-    const componentClassNames = classNames || getClassNames('toast')?.(classNameProps);
+    const componentClassNames = getClassNames('toast', { props: classNameProps }, classNames);
     if (!children) {
         return null;
     }

package/dist/filters/components/FilterBarClientComponent/index.d.ts

@@ -1,5 +1,5 @@
 import type { TableColumnObject } from '../../../components/collections/interfaces';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ClientFilterMap } from '../../interfaces';
 export interface FilterBarClassNames {
     root: string;

package/dist/filters/components/FilterBarClientComponent/index.js

@@ -10,12 +10,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import type { ClassNameProps } from '../../../utility/interfaces';
 import { getEntries } from '@sqrzro/utility';
 import useFilters from '../../../filters/hooks/useFilters';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import SearchFilter from '../../filters/SearchFilter';
 import FilterItem from '../FilterItem';
 const FILTERED_TYPES = ['assistive', 'search'];
 function FilterBarClientComponent({ classNames, classNameProps, columns, map, }) {
-    const componentClassNames = classNames || getClassNames('filterBar')?.(classNameProps);
+    const componentClassNames = getClassNames('filterBar', { props: classNameProps }, classNames);
     const [filters, setFilter] = useFilters();
     const mapArray = map ? getEntries(map) : [];
     const hasSearch = mapArray.some(([, item]) => item?.type === 'search');

package/dist/filters/components/FilterControl/index.d.ts

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

package/dist/filters/components/FilterControl/index.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // import FilterClearButton from '../FilterClearButton';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import FilterClearButton from '../FilterClearButton';
 function FilterControl({ classNameProps, classNames, children, isDisabled, isFocused, isHighlighted, onClear, onClick, }) {
-    const componentClassNames = classNames || getClassNames('filterItem')?.(classNameProps);
-    return (_jsxs("div", { className: tw(componentClassNames?.root?.default, isDisabled ? 'pointer-events-none opacity-30' : null, isFocused ? componentClassNames?.root?.focused : null, isHighlighted ? componentClassNames?.root?.highlighted : null), children: [children, isFocused && onClear ? _jsx(FilterClearButton, { onClick: onClear }) : null, onClick ? (_jsx("button", { className: tw('absolute -inset-1 z-10 select-none text-transparent'), disabled: isDisabled, onClick: onClick, type: "button", children: "Edit" })) : null] }));
+    const componentClassNames = getClassNames('filterItem', {
+        props: classNameProps,
+        states: { isFocused: isFocused ?? false, isHighlighted: isHighlighted ?? false },
+    }, classNames);
+    return (_jsxs("div", { className: tw(componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [children, isFocused && onClear ? _jsx(FilterClearButton, { onClick: onClear }) : null, onClick ? (_jsx("button", { className: "absolute -inset-1 z-10 select-none text-transparent", disabled: isDisabled, onClick: onClick, type: "button", children: "Edit" })) : null] }));
 }
 export default FilterControl;

package/dist/filters/components/FilterItem/index.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from '../../../forms/interfaces';
-import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/interfaces';
+import { ClassNameProps, FocusableClassName, HighlightableClassName } from '../../../styles/classnames/interfaces';
 import { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterItemClassNames {
     root: FocusableClassName & HighlightableClassName;

package/dist/filters/components/FilterItem/index.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import renderValue from '../../utility/render-value';
 import FilterControl from '../FilterControl';
 import FilterPanel from '../FilterPanel';
 function FilterItem({ align, classNameProps, classNames, config, icon, isDisabled, label, name, onChange, title, type, value, }) {
-    const componentClassNames = classNames || getClassNames('filterItem')?.(classNameProps);
+    const componentClassNames = getClassNames('filterItem', { props: classNameProps }, classNames);
     const [isOpen, setIsOpen, node] = useClickOutside();
     // const { dynamicConfig } = useDynamicData(config);
     const [pendingValue, setPendingValue] = useState(value);

package/dist/filters/components/FilterPanel/index.d.ts

@@ -1,5 +1,5 @@
 import { InputProps } from '../../../forms/interfaces';
-import { SizableClassName } from '../../../styles/interfaces';
+import { SizableClassName } from '../../../styles/classnames/interfaces';
 import type { ClientFilterObject, FilterType } from '../../interfaces';
 export interface FilterPanelClassNames {
     content: string;

package/dist/filters/filters/Filter/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClientFilterObject, FilterType } from '../../../filters/interfaces';
-import { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import { FilterPanelClassNames } from '../../components/FilterPanel';
 import { FilterComponentSize } from '../interfaces';
 interface FilterProps<F extends FilterType> extends ClassNameProps<FilterPanelClassNames>, ClientFilterObject<F> {

package/dist/filters/filters/Filter/index.js

@@ -2,12 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Button from '../../../components/buttons/Button';
 import Popover from '../../../components/utility/Popover';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
 function Filter({ align, children, classNameProps, classNames, icon, isOpen, label, onApply, size, title, }) {
-    const componentClassNames = classNames || getClassNames('filterPanel')?.(classNameProps);
+    const componentClassNames = getClassNames('filterPanel', { props: classNameProps }, classNames);
     const DefaultIcon = getIcon('filter.panel');
-    return (_jsx(Popover, { align: align, isOpen: isOpen, children: _jsxs("div", { className: tw(componentClassNames?.root?.default, size ? componentClassNames?.root?.[size] : null), children: [_jsxs("p", { className: componentClassNames?.title, children: [icon === false ? null : (_jsx("span", { className: componentClassNames?.icon, children: icon || (DefaultIcon ? _jsx(DefaultIcon, {}) : null) })), title || (label ? `Filter by ${label}` : 'Filter')] }), _jsx("div", { className: componentClassNames?.content, children: children }), _jsx("div", { className: componentClassNames?.footer, children: _jsx(Button, { isFullWidth: true, onClick: onApply, variant: "primary", children: "Apply" }) })] }) }));
+    return (_jsx(Popover, { align: align, isOpen: isOpen, children: _jsxs("div", { className: componentClassNames?.root, children: [_jsxs("p", { className: componentClassNames?.title, children: [icon === false ? null : (_jsx("span", { className: componentClassNames?.icon, children: icon || (DefaultIcon ? _jsx(DefaultIcon, {}) : null) })), title || (label ? `Filter by ${label}` : 'Filter')] }), _jsx("div", { className: componentClassNames?.content, children: children }), _jsx("div", { className: componentClassNames?.footer, children: _jsx(Button, { isFullWidth: true, onClick: onApply, variant: "primary", children: "Apply" }) })] }) }));
 }
 export default Filter;

package/dist/filters/filters/SearchFilter/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
 import FilterClearButton from '../../../filters/components/FilterClearButton';
 import TextInput from '../../../forms/components/TextInput';
+import tw from '../../../styles/classnames/tw';
 import { getIcon } from '../../../styles/icons';
-import tw from '../../../styles/tw';
 function SearchFilter({ onChange, value }) {
     const Icon = getIcon('filter.search');
     const [pendingValue, setPendingValue] = useState(value);

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> {

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,8 +2,8 @@
 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/tw';
+import { getClassNames } from '../../../styles/classnames';
 import DropdownList from '../DropdownList';
 import StaticTextInput from '../StaticTextInput';
 function findByValue(options, value) {
@@ -16,8 +16,11 @@ 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 = getClassNames('dropdown', {
+        props: classNameProps,
+        states: { isError: hasError ?? false, isFocused: isOpen && !isDisabled },
+    }, classNames);
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
@@ -33,7 +36,7 @@ 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: {
+    return (_jsxs("div", { ref: node, className: tw('relative', componentClassNames?.root), 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 }) })] }));

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,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+function DropdownItem({ $data, classNameProps, classNames, details, isDisabled, isSelected, label, onChange, value, }) {
+    const componentClassNames = getClassNames('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,11 +1,8 @@
-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;
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/classnames';
+import DropdownItem from '../DropdownItem';
 function DropdownList({ classNames, classNameProps, name, onChange, options, value, }) {
-    const componentClassNames = classNames || getClassNames('dropdown')?.(classNameProps);
+    const componentClassNames = getClassNames('dropdown', { props: classNameProps }, classNames);
     // const checkboxClassNames = getClassNames('checkboxInput')?.(classNameProps);
     function handleChange(item) {
         return () => {
@@ -15,8 +12,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, isSelected: Boolean(value) && value === item.value, onChange: handleChange }, index))) }));
 }
 export default DropdownList;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { Action } from '../../../utility/interfaces';
 import type { EditingStatus } from '../../interfaces';
 import type { FormProps } from '../Form';

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

@@ -1,10 +1,9 @@
 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 { getClassNames } from '../../../styles/classnames';
 import Form from '../Form';
 function EditableForm({ classNameProps, classNames, children, formProps, onCancel, onEdit, setStatus, status, title, }) {
-    const componentClassNames = classNames || getClassNames('editableForm')?.(classNameProps);
+    const componentClassNames = getClassNames('editableForm', { props: classNameProps }, classNames);
     function setCancelled() {
         onCancel?.();
         setStatus?.('CANCELLED');
@@ -13,7 +12,7 @@ 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'
+    return (_jsx(Form, { ...formProps, children: _jsxs("fieldset", { className: 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' },

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 { getClassNames } from '../../../styles/classnames';
 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 = getClassNames('editableFormField', { props: classNameProps }, classNames);
     const cachedValue = useRef(props.value);
     useEffect(() => {
         if (status === 'CANCELLED') {

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;
 }

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

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function Form({ action, children, classNames, classNameProps, id, onSubmit, ref, }) {
-    const componentClassNames = classNames || getClassNames('form')?.(classNameProps);
+    const componentClassNames = getClassNames('form', { props: classNameProps }, classNames);
     return (_jsx("form", { ref: ref, action: action, className: tw(componentClassNames?.root), id: id, onSubmit: onSubmit, children: children }));
 }
 export default Form;

package/dist/forms/components/FormError/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 FormErrorProps extends ClassNameProps<FormFieldClassNames> {
     children: React.ReactNode;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function FormError({ children, classNames, classNameProps, id, isAssistive, }) {
-    const componentClassNames = classNames || getClassNames('formField')?.(classNameProps);
+    const componentClassNames = getClassNames('formField', { props: classNameProps }, classNames);
     return (_jsx("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: children }));
 }
 export default FormError;

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

@@ -1,5 +1,5 @@
 import type { InputEvent, InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
 import { Action } from '../../../utility/interfaces';
 export interface FormFieldClassNames {
     root: ErrorableClassName;
@@ -21,5 +21,5 @@ export interface FormFieldProps<T, V extends T> extends ClassNameProps<FormField
     onChange?: (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, hasAssistiveLabel, id, isContentOnly, isDisabled, isOptional, label, name, onChange, onKeyDown, render, value, }: Readonly<FormFieldProps<T, V>>): React.ReactElement | null;
 export default FormField;

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

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

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

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

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

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

package/dist/forms/components/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,9 @@
+export interface PasswordComplexityProps {
+    data: {
+        status: boolean;
+        value: string;
+    }[];
+    onComplexity?: (isValid: boolean) => void;
+}
+declare function PasswordComplexity({ data, onComplexity }: PasswordComplexityProps): React.ReactElement;
+export default PasswordComplexity;

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

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

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

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

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

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

package/dist/forms/components/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;

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

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

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

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