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

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/ModalForm/index.js

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { InputProps } from '../../../forms/interfaces';
-import type { ClassNameProps, ErrorableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, ErrorableClassName } from '../../../styles/classnames/interfaces';
 export interface TextInputClassNames {
     loading: string;
     prefix: ErrorableClassName;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 /**
  *
  * ## ClassNames
@@ -14,7 +14,7 @@ import tw from '../../../styles/tw';
  * button itself is handled by the `renderClear` prop. | `string` |
  */
 function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, isDisabled, name, onBlur, onChange, onFocus, onKeyDown, placeholder, prefix, ref, suffix, type, value, }) {
-    const componentClassNames = classNames || getClassNames('textInput')?.(classNameProps);
+    const componentClassNames = getClassNames('textInput', { props: classNameProps, states: { isError: hasError ?? false } }, classNames);
     function handleChange(event) {
         if (onChange) {
             const target = { name, value: event.target.value };
@@ -25,6 +25,6 @@ function TextInput({ classNames, classNameProps, hasError, id, isAutocomplete, i
                     ? `${id || name}_err`
                     : undefined /* eslint-disable-line no-undefined */, autoComplete: isAutocomplete === false
                     ? 'one-time-code'
-                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root?.default, hasError ? componentClassNames?.root?.error : null), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
+                    : undefined /* eslint-disable-line no-undefined */, className: tw('peer w-full focus-visible:outline-0', prefix ? 'border-l-0' : null, (!prefix && suffix) || value ? 'border-r-0' : null, componentClassNames?.root), disabled: isDisabled, formNoValidate: true, id: id || name, name: name, onBlur: onBlur, onChange: handleChange, onFocus: onFocus, onKeyDown: onKeyDown, placeholder: placeholder, type: type, value: value || '' }), suffix ? _jsx("div", { children: suffix }) : null] }));
 }
 export default TextInput;

package/dist/forms/hooks/useForm.js

@@ -168,7 +168,7 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         if (fnReturn.validation) {
             return handleValidation(fnReturn.validation);
         }
-        if (fnReturn.data) {
+        if (fnReturn.data !== null) {
             return handleSuccess(fnReturn.data);
         }
     }

package/dist/forms/index.d.ts

@@ -15,12 +15,14 @@ export type { FormSubmitProps } from './components/FormSubmit';
 export { default as FormSubmit } from './components/FormSubmit';
 export type { ModalFormProps } from './components/ModalForm';
 export { default as ModalForm } from './components/ModalForm';
-export type { PointsInputProps } from './components/PointsInput';
-export { default as PointsInput } from './components/PointsInput';
+export type { PasswordComplexityProps } from './components/PasswordComplexity';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
 export type { NumberInputProps } from './components/NumberInput';
 export { default as NumberInput } from './components/NumberInput';
 export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export type { PointsInputProps } from './components/PointsInput';
+export { default as PointsInput } from './components/PointsInput';
 export type { StaticTextInputClassNames, StaticTextInputProps } from './components/StaticTextInput';
 export { default as StaticTextInput } from './components/StaticTextInput';
 export type { TextInputClassNames, TextInputProps } from './components/TextInput';

package/dist/forms/index.js

@@ -7,9 +7,10 @@ export { default as Form } from './components/Form';
 export { default as FormField } from './components/FormField';
 export { default as FormSubmit } from './components/FormSubmit';
 export { default as ModalForm } from './components/ModalForm';
-export { default as PointsInput } from './components/PointsInput';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
 export { default as NumberInput } from './components/NumberInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export { default as PointsInput } from './components/PointsInput';
 export { default as StaticTextInput } from './components/StaticTextInput';
 export { default as TextInput } from './components/TextInput';
 export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';

package/dist/navigation/components/AppNavigation/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
 import type { NavigationObject } from '../../interfaces';
 export interface AppNavigationClassNames {
     root: string;

package/dist/navigation/components/AppNavigation/index.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import useNavigation from '../../hooks/useNavigation';
 import AppNavigationItem from '../AppNavigationItem';
 function AppNavigationComponent({ classNameProps, classNames, data, }) {
-    const componentClassNames = classNames || getClassNames('appNavigation')?.(classNameProps);
+    const componentClassNames = getClassNames('appNavigation', { props: classNameProps }, classNames);
     const navigation = useNavigation(data);
     return (_jsx("nav", { className: componentClassNames?.root, children: _jsx("ul", { className: componentClassNames?.list, children: navigation.map((item, index) => (_jsx(AppNavigationItem, { classNames: classNames, ...item }, index))) }) }));
 }

package/dist/navigation/components/AppNavigationItem/index.d.ts

@@ -1,5 +1,5 @@
 import type { NavigationObject } from '../../../navigation/interfaces';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { AppNavigationClassNames } from '../AppNavigation';
 export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
 declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;

package/dist/navigation/components/AppNavigationItem/index.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from '../../../components/utility/Link';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }) {
-    const componentClassNames = classNames || getClassNames('appNavigation')?.(classNameProps);
-    return (_jsx("li", { className: tw(componentClassNames?.item?.default, isActive ? componentClassNames?.item?.highlighted : null), children: _jsx(Link, { className: tw(componentClassNames?.link?.default, isActive ? componentClassNames?.link?.highlighted : null), href: href, children: label }) }));
+    const componentClassNames = getClassNames('appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false } }, classNames);
+    return (_jsx("li", { className: componentClassNames?.item, children: _jsx(Link, { className: componentClassNames?.link, href: href, children: label }) }));
 }
 export default AppNavigationItem;

package/dist/navigation/components/Tabs/index.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 import AppNavigation from '../AppNavigation';
 function Tabs({ classNameProps, classNames, ...props }) {
-    const componentClassNames = classNames || getClassNames('tabs')?.(classNameProps);
+    const componentClassNames = getClassNames('tabs', { props: classNameProps }, classNames);
     return _jsx(AppNavigation, { classNames: componentClassNames ?? {}, ...props });
 }
 export default Tabs;

package/dist/navigation/hooks/useNavigation.js

@@ -1,4 +1,4 @@
-import { joinUrl } from '@sqrzro/utility';
+import { joinURL } from '@sqrzro/utility';
 import { usePathname, useSelectedLayoutSegments } from 'next/navigation';
 function getActivePath(pathname, hrefs) {
     return (hrefs
@@ -18,7 +18,7 @@ function getBasePath(pathname, segments) {
 function transformChildren(children, basePath) {
     return children.map(({ details, href, label }) => ({
         details,
-        href: joinUrl(basePath, href),
+        href: joinURL(basePath, href),
         label,
     }));
 }
@@ -26,13 +26,13 @@ function useNavigation(data, options) {
     const pathname = usePathname();
     const segments = useSelectedLayoutSegments();
     const basePath = getBasePath(pathname, segments);
-    const hrefs = data.map(({ href }) => joinUrl(basePath, href));
+    const hrefs = data.map(({ href }) => joinURL(basePath, href));
     const activePath = getActivePath(pathname, hrefs);
     return data.map((item) => ({
         ...item,
         children: transformChildren(item.children || [], item.href),
-        href: joinUrl(basePath, item.href),
-        isActive: joinUrl(basePath, item.href) === activePath,
+        href: joinURL(basePath, item.href),
+        isActive: joinURL(basePath, item.href) === activePath,
     }));
 }
 export default useNavigation;

package/dist/styles/classnames/apply-variants.d.ts

@@ -0,0 +1,3 @@
+import type { StyleVariant } from '../../utility/interfaces';
+declare function applyVariants(variants?: StyleVariant[] | StyleVariant): Record<string, boolean>;
+export default applyVariants;

package/dist/styles/classnames/apply-variants.js

@@ -0,0 +1,25 @@
+const keyMap = {
+    bordered: 'isBordered',
+    danger: 'isDanger',
+    error: 'isError',
+    info: 'isInfo',
+    primary: 'isPrimary',
+    secondary: 'isSecondary',
+    success: 'isSuccess',
+    tertiary: 'isTertiary',
+    warning: 'isWarning',
+};
+function applyVariants(variants) {
+    if (!variants) {
+        return {};
+    }
+    const variantArray = Array.isArray(variants) ? variants : [variants];
+    return variantArray.reduce((acc, variant) => {
+        const key = keyMap[variant];
+        if (key) {
+            acc[key] = true;
+        }
+        return acc;
+    }, {});
+}
+export default applyVariants;

package/dist/styles/classnames/config.d.ts

@@ -0,0 +1,67 @@
+import type { ButtonClassNames } from '../../components/buttons/Button';
+import type { TextButtonClassNames } from '../../components/buttons/TextButton';
+import type { DataTableClassNames } from '../../components/collections/DataTable';
+import type { EmptyMessageClassNames } from '../../components/collections/EmptyMessage';
+import type { ListClassNames } from '../../components/collections/ListClientComponent';
+import type { ListItemClassNames } from '../../components/collections/ListItem';
+import type { ListItemMetaClassNames } from '../../components/collections/ListItemMeta';
+import type { PaginationClassNames } from '../../components/collections/Pagination';
+import type { TableClassNames } from '../../components/collections/Table';
+import type { AppErrorClassNames } from '../../components/errors/AppError';
+import type { ModalClassNames } from '../../components/modals/Modal';
+import type { ActionListClassNames } from '../../components/utility/ActionList';
+import type { ContainerClassNames } from '../../components/utility/Container';
+import type { LinkClassNames } from '../../components/utility/Link';
+import type { LoaderClassNames } from '../../components/utility/Loader';
+import type { PopoverClassNames } from '../../components/utility/Popover';
+import type { RootLayoutClassNames } from '../../components/utility/RootLayout';
+import type { ToastClassNames } from '../../components/utility/Toast';
+import type { FilterBarClassNames } from '../../filters/components/FilterBar';
+import type { FilterItemClassNames } from '../../filters/components/FilterItem';
+import type { FilterPanelClassNames } from '../../filters/components/FilterPanel';
+import type { DropdownClassNames } from '../../forms/components/Dropdown';
+import type { EditableFormClassNames } from '../../forms/components/EditableForm';
+import type { EditableFormFieldClassNames } from '../../forms/components/EditableFormField';
+import type { FormClassNames } from '../../forms/components/Form';
+import type { FormFieldClassNames } from '../../forms/components/FormField';
+import type { PasswordInputClassNames } from '../../forms/components/PasswordInput';
+import type { StaticTextInputClassNames } from '../../forms/components/StaticTextInput';
+import type { SwitchClassNames } from '../../forms/components/Switch';
+import type { TextInputClassNames } from '../../forms/components/TextInput';
+import type { AppNavigationClassNames } from '../../navigation/components/AppNavigation';
+import type { TabsClassNames } from '../../navigation/components/Tabs';
+import type { ComponentClassNames } from './interfaces';
+export interface RegisteredClassNames {
+    actionList?: ComponentClassNames<ActionListClassNames>;
+    appError?: ComponentClassNames<AppErrorClassNames>;
+    appNavigation?: ComponentClassNames<AppNavigationClassNames>;
+    button?: ComponentClassNames<ButtonClassNames>;
+    container?: ComponentClassNames<ContainerClassNames>;
+    dataTable?: ComponentClassNames<DataTableClassNames>;
+    dropdown?: ComponentClassNames<DropdownClassNames>;
+    editableForm?: ComponentClassNames<EditableFormClassNames>;
+    editableFormField?: ComponentClassNames<EditableFormFieldClassNames>;
+    emptyMessage?: ComponentClassNames<EmptyMessageClassNames>;
+    filterBar?: ComponentClassNames<FilterBarClassNames>;
+    filterItem?: ComponentClassNames<FilterItemClassNames>;
+    filterPanel?: ComponentClassNames<FilterPanelClassNames>;
+    form?: ComponentClassNames<FormClassNames>;
+    formField?: ComponentClassNames<FormFieldClassNames>;
+    link?: ComponentClassNames<LinkClassNames>;
+    list?: ComponentClassNames<ListClassNames>;
+    listItem?: ComponentClassNames<ListItemClassNames>;
+    listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
+    loader?: ComponentClassNames<LoaderClassNames>;
+    modal?: ComponentClassNames<ModalClassNames>;
+    pagination?: ComponentClassNames<PaginationClassNames>;
+    passwordInput?: ComponentClassNames<PasswordInputClassNames>;
+    popover?: ComponentClassNames<PopoverClassNames>;
+    rootLayout?: ComponentClassNames<RootLayoutClassNames>;
+    staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
+    switch?: ComponentClassNames<SwitchClassNames>;
+    table?: ComponentClassNames<TableClassNames>;
+    tabs?: ComponentClassNames<TabsClassNames>;
+    textButton?: ComponentClassNames<TextButtonClassNames>;
+    textInput?: ComponentClassNames<TextInputClassNames>;
+    toast?: ComponentClassNames<ToastClassNames>;
+}

package/dist/styles/classnames/index.d.ts

@@ -0,0 +1,7 @@
+import type { RegisteredClassNames } from './config';
+import type { ExtractClassNames } from './interfaces';
+export declare function registerClassNames(data: RegisteredClassNames): void;
+export declare function getClassNames<K extends keyof RegisteredClassNames>(component: K, config?: {
+    props?: Record<string, boolean>;
+    states?: Record<string, boolean>;
+}, overrides?: RegisteredClassNames[K]): ExtractClassNames<RegisteredClassNames[K]>;

package/dist/styles/classnames/index.js

@@ -0,0 +1,37 @@
+import { getEntries } from '@sqrzro/utility';
+import tw from './tw';
+import isClassNameObject from './utility/is-classname-object';
+let registeredClassNames = {};
+export function registerClassNames(data) {
+    registeredClassNames = { ...registeredClassNames, ...data };
+}
+export function getClassNames(component, config, overrides) {
+    const componentClassNames = registeredClassNames[component];
+    if (!componentClassNames) {
+        return {};
+    }
+    const overridden = { ...componentClassNames, ...overrides };
+    return getEntries(overridden).reduce((acc, [key, value]) => {
+        if (typeof value === 'string') {
+            return { ...acc, [key]: value };
+        }
+        if (isClassNameObject(value)) {
+            const { default: defaultClassName, props, states } = value;
+            const propClassNames = props
+                ? Object.keys(props)
+                    .filter((key) => config?.props?.[key])
+                    .map((key) => props[key])
+                : [];
+            const stateClassNames = states
+                ? Object.keys(states)
+                    .filter((key) => config?.states?.[key])
+                    .map((key) => states[key])
+                : [];
+            return {
+                ...acc,
+                [key]: tw(defaultClassName, ...propClassNames, ...stateClassNames),
+            };
+        }
+        return acc;
+    }, {});
+}

package/dist/styles/classnames/interfaces.d.ts

@@ -0,0 +1,56 @@
+type ComponentClassNamesValue<T> = T extends string ? string | StatefulClassName : T extends StatefulClassName<infer U> ? StatefulClassName<U> : never;
+export type ComponentClassNames<T> = {
+    [K in keyof T]?: ComponentClassNamesValue<T[K]>;
+};
+export type ExtractClassNames<T> = {
+    [K in keyof T]?: string;
+};
+export interface ClassNameObject {
+    default: string;
+    props?: Record<string, string>;
+    states?: Record<string, string>;
+}
+export interface ClassNameProps<T> {
+    classNames?: Partial<T>;
+    classNameProps?: Record<string, boolean>;
+}
+interface StatefulClassName<T = null> {
+    default: string;
+    props?: Record<string, string>;
+    states?: T;
+}
+export type CheckableClassName = string | StatefulClassName<{
+    isChecked?: string;
+}>;
+export type ErrorableClassName = string | StatefulClassName<{
+    isError?: string;
+}>;
+export type FocusableClassName = string | StatefulClassName<{
+    isFocused?: string;
+}>;
+export type HighlightableClassName = string | StatefulClassName<{
+    isHighlighted?: string;
+}>;
+export type LoadableClassName = string | StatefulClassName<{
+    isLoading?: string;
+}>;
+export type SelectableClassName = string | StatefulClassName<{
+    isSelected?: string;
+}>;
+export type SizableClassName = string | StatefulClassName<{
+    isLarge?: string;
+    isMedium?: string;
+    isSmall?: string;
+}>;
+export type StylableClassName = string | StatefulClassName<{
+    isBordered?: string;
+    isDanger?: string;
+    isError?: string;
+    isInfo?: string;
+    isPrimary?: string;
+    isSecondary?: string;
+    isSuccess?: string;
+    isTertiary?: string;
+    isWarning?: string;
+}>;
+export {};

package/dist/styles/classnames/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/classnames/utility/is-classname-object.d.ts

@@ -0,0 +1,3 @@
+import type { ClassNameObject } from '../interfaces';
+declare function isClassNameObject(value: unknown): value is ClassNameObject;
+export default isClassNameObject;

package/dist/styles/classnames/utility/is-classname-object.js

@@ -0,0 +1,7 @@
+function isClassNameObject(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'default' in value &&
+        typeof value.default === 'string');
+}
+export default isClassNameObject;

package/dist/styles/icons/config.d.ts

@@ -0,0 +1,9 @@
+import type { IconComponent } from './interfaces';
+export interface RegisteredIcons {
+    'collection.empty'?: IconComponent;
+    'filter.panel'?: IconComponent;
+    'filter.search'?: IconComponent;
+    password?: IconComponent;
+    'utility.success'?: IconComponent;
+    'utility.error'?: IconComponent;
+}

package/dist/styles/icons/config.js

@@ -0,0 +1 @@
+export {};