@sqrzro/ui 4.0.0-alpha.2 → 4.0.0-alpha.21

package/dist/components/collections/TableRow/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Switch from '../../../forms/components/Switch';
+import { getClassNames } from '../../../styles/classnames';
+import ListItemMenu from '../ListItemMenu';
+function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }) {
+    const componentClassNames = getClassNames('table', { props: classNameProps, states: { isSelected } }, classNames);
+    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: componentClassNames?.cell, children: data.row[column.id] }, column.id))), data.actions ? (_jsx("td", { children: _jsx(ListItemMenu, { actions: data.actions, data: data.$data }) })) : null] }));
+}
+export default TableRow;

package/dist/components/collections/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { Action, StyleVariant } from '../../utility/interfaces';
+import type { ActionObject, StyleVariant } from '../../utility/interfaces';
 export interface CollectionFunctionConfig<Filters = null> {
     filters?: Partial<Filters> | null;
     params?: Record<string, string> | null;
@@ -7,27 +7,20 @@ export interface CollectionFunctionConfig<Filters = null> {
 export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
 export interface ListItemObject<Data extends object | null = null> {
     $data?: Data;
-    actions?: Action[];
-    description?: React.ReactNode | null;
+    actions?: ActionObject<Data>[];
+    description?: React.ReactNode;
     href?: string;
     id: string;
-    isMinimal?: boolean;
     image?: string | null;
     imageHref?: string | null;
     isLoading?: boolean;
-    meta?: {
-        data?: React.ReactNode[] | Record<string, React.ReactNode>;
-        id: string;
-    };
+    meta?: React.ReactNode[] | (DataTableObject | null)[];
     permission?: string;
     secondary?: {
         data?: React.ReactElement | {
-            description?: string;
-            meta?: {
-                data?: React.ReactNode[] | Record<string, React.ReactNode>;
-                id: string;
-            };
-            title?: string;
+            description?: React.ReactNode;
+            meta?: React.ReactNode[] | (DataTableObject | null)[];
+            title?: React.ReactNode;
         } | null;
         variant?: StyleVariant | null;
     };
@@ -36,11 +29,16 @@ export interface ListItemObject<Data extends object | null = null> {
     variant?: StyleVariant | null;
 }
 export type TableFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
-export interface TableItemObject {
-    [key: string]: React.ReactNode;
+export interface TableItemObject<Data extends object | null = null> {
+    $data?: Data;
+    actions?: ActionObject<Data>[];
     id: string;
+    isSelectable?: boolean;
+    row: {
+        [key: string]: React.ReactNode;
+    };
 }
-export type TableColumnType = 'date' | 'decimal' | 'id' | 'link' | 'money' | 'number' | 'percentage' | 'reference' | 'selectable' | 'string';
+export type TableColumnType = 'date' | 'decimal' | 'link' | 'money' | 'number' | 'percentage' | 'points' | 'raw' | 'reference' | 'string';
 export interface TableColumnObject {
     isSortable?: boolean;
     id: string;
@@ -55,3 +53,7 @@ export interface Paginated<T> {
         total: number;
     };
 }
+export interface DataTableObject {
+    label: React.ReactNode;
+    value: React.ReactNode;
+}

package/dist/components/collections/utility/is-data-table-array.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableObject } from '../interfaces';
+declare function isDataTableArray(item: unknown): item is DataTableObject[];
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-array.js

@@ -0,0 +1,5 @@
+import isDataTableObject from './is-data-table-object';
+function isDataTableArray(item) {
+    return Array.isArray(item) && item.every(isDataTableObject);
+}
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-object.d.ts

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

package/dist/components/collections/utility/is-data-table-object.js

@@ -0,0 +1,4 @@
+function isDataTableObject(item) {
+    return typeof item === 'object' && item !== null && 'label' in item && 'value' in item;
+}
+export default isDataTableObject;

package/dist/components/errors/AppError/index.d.ts

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ActionObject } from '../../../utility/interfaces';
+export interface AppErrorClassNames {
+    root: string;
+    panel: string;
+    title: string;
+    description: string;
+    action: string;
+}
+export interface AppErrorProps extends ClassNameProps<AppErrorClassNames> {
+    action?: ActionObject;
+    description: React.ReactNode;
+    error: Error & {
+        digest?: string;
+    };
+    title: React.ReactNode;
+}
+declare function AppError({ action, classNameProps, classNames, description, error, title, }: Readonly<AppErrorProps>): React.ReactElement;
+export default AppError;

package/dist/components/errors/AppError/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ActionButton from '../../../components/buttons/ActionButton';
+import { getClassNames } from '../../../styles/classnames';
+function AppError({ action, classNameProps, classNames, description, error, title, }) {
+    const componentClassNames = getClassNames('appError', { props: classNameProps }, classNames);
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("section", { className: componentClassNames?.panel, children: [_jsx("h2", { className: componentClassNames?.title, children: title }), _jsxs("div", { className: componentClassNames?.description, children: [description, error?.digest ? _jsxs("small", { children: ["Error code: ", error.digest] }) : null] }), action ? (_jsx("footer", { className: componentClassNames?.action, children: _jsx(ActionButton, { ...action }) })) : null] }) }));
+}
+export default AppError;

package/dist/components/errors/AppForbiddenError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppForbiddenErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppForbiddenError({ description, title, ...props }: AppForbiddenErrorProps): React.ReactElement;
+export default AppForbiddenError;

package/dist/components/errors/AppForbiddenError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppForbiddenError({ description = 'You do not have permission to access this resource. If you think this is a mistake, please contact your site administrator.', title = 'Forbidden', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppForbiddenError;

package/dist/components/errors/AppNotFoundError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppNotFoundErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppNotFoundError({ description, title, ...props }: AppNotFoundErrorProps): React.ReactElement;
+export default AppNotFoundError;

package/dist/components/errors/AppNotFoundError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppNotFoundError({ description = 'The requested resource could not be found. This might be because it has been moved or deleted. If you think this is a mistake, please contact your site administrator.', title = 'Not Found', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppNotFoundError;

package/dist/components/errors/AppServerError/index.d.ts

@@ -0,0 +1,8 @@
+import type { AppErrorProps } from '../AppError';
+interface AppServerErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    reset: () => void;
+    title?: React.ReactNode;
+}
+declare function AppServerError({ description, reset, title, ...props }: AppServerErrorProps): React.ReactElement;
+export default AppServerError;

package/dist/components/errors/AppServerError/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import AppError from '../AppError';
+const WAIT_TIME = 500;
+function AppServerError({ description = 'The server encountered an error and could not complete your request. If the problem persists, please contact your site administrator.', reset, title = 'Something Went Wrong', ...props }) {
+    const [isResetting, setIsResetting] = useState(false);
+    function handleReset() {
+        setIsResetting(true);
+        setTimeout(() => {
+            reset();
+            setIsResetting(false);
+        }, WAIT_TIME);
+    }
+    return (_jsx(AppError, { ...props, action: { isDisabled: isResetting, onClick: handleReset, label: 'Try Again' }, description: description, title: title }));
+}
+export default AppServerError;

package/dist/components/index.d.ts

@@ -1,16 +1,35 @@
 export * from './collections/interfaces';
+export type { ActionButtonProps } from './buttons/ActionButton';
 export { default as ActionButton } from './buttons/ActionButton';
+export type { ButtonProps } from './buttons/Button';
+export { default as Button } from './buttons/Button';
+export type { DataTableProps } from './collections/DataTable';
+export { default as DataTable } from './collections/DataTable';
 export type { ListProps } from './collections/List';
 export { default as List } from './collections/List';
 export type { TableProps } from './collections/Table';
 export { default as Table } from './collections/Table';
+export type { AppErrorProps } from './errors/AppError';
+export { default as AppError } from './errors/AppError';
+export type { AppForbiddenErrorProps } from './errors/AppForbiddenError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export type { AppNotFoundErrorProps } from './errors/AppNotFoundError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
+export type { ModalProps } from './modals/Modal';
+export { default as Modal } from './modals/Modal';
 export type { ModalLauncherProps } from './modals/ModalLauncher';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export type { ContainerProps } from './utility/Container';
 export { default as Container } from './utility/Container';
 export type { LinkProps } from './utility/Link';
 export { default as Link } from './utility/Link';
+export type { MenuProps } from './utility/Menu';
+export { default as Menu } from './utility/Menu';
 export type { PageProps } from './utility/Page';
 export { default as Page } from './utility/Page';
+export type { PopoverProps } from './utility/Popover';
+export { default as Popover } from './utility/Popover';
+export type { ReferenceProps } from './utility/Reference';
+export { default as Reference } from './utility/Reference';
 export type { RootLayoutProps } from './utility/RootLayout';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -1,9 +1,18 @@
 export * from './collections/interfaces';
 export { default as ActionButton } from './buttons/ActionButton';
+export { default as Button } from './buttons/Button';
+export { default as DataTable } from './collections/DataTable';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as AppError } from './errors/AppError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
+export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export { default as Container } from './utility/Container';
 export { default as Link } from './utility/Link';
+export { default as Menu } from './utility/Menu';
 export { default as Page } from './utility/Page';
+export { default as Popover } from './utility/Popover';
+export { default as Reference } from './utility/Reference';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/components/modals/ConfirmModal/index.d.ts

@@ -2,6 +2,8 @@ import { ConfirmableObject } from '../../../utility/interfaces';
 import type { ModalProps } from '../Modal';
 export type ConfirmModalProps = Omit<ModalProps, 'children' | 'icon' | 'title'> & {
     confirmable: ConfirmableObject;
+    onCancel: () => void;
+    onConfirm: () => void;
 };
-declare function ConfirmModal({ confirmable, ...modalProps }: Readonly<ConfirmModalProps>): React.ReactElement;
+declare function ConfirmModal({ confirmable, onCancel, onConfirm, ...modalProps }: Readonly<ConfirmModalProps>): React.ReactElement;
 export default ConfirmModal;

package/dist/components/modals/ConfirmModal/index.js

@@ -3,19 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
 import TextInput from '../../../forms/components/TextInput';
 import Modal from '../Modal';
-function ConfirmModal({ confirmable, ...modalProps }) {
+function ConfirmModal({ confirmable, onCancel, onConfirm, ...modalProps }) {
     const [confirmText, setConfirmText] = useState('');
     function handleChange(event) {
         setConfirmText(event.target.value?.toUpperCase() || '');
     }
     return (_jsxs(Modal, { ...modalProps, actions: [
-            { label: 'Cancel', variant: 'link' },
+            { label: 'Cancel', onClick: onCancel },
             ...(confirmable.actions || []),
             {
                 isDisabled: Boolean(confirmable.confirmText &&
                     confirmText !== confirmable.confirmText.toUpperCase()),
                 label: confirmable.submitLabel || 'Confirm',
-                onClick: confirmable.onConfirm,
+                onClick: onConfirm,
                 variant: 'primary',
             },
         ], title: confirmable.title || 'Are you sure?', children: [confirmable.description || 'This action cannot be undone.', confirmable.confirmText ? (_jsxs(Fragment, { children: [_jsxs("p", { children: ["Please type ", _jsx("strong", { children: confirmable.confirmText.toUpperCase() }), " to confirm"] }), _jsx(TextInput, { name: "confirm", onChange: handleChange, value: confirmText })] })) : null] }));

package/dist/components/modals/Modal/index.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ActionObject } from '../../../utility/interfaces';
 export interface ModalClassNames {
     actions: string;
     content: string;
@@ -9,11 +9,11 @@ export interface ModalClassNames {
     title: string;
 }
 export interface ModalProps extends ClassNameProps<ModalClassNames> {
-    actions?: Action[];
+    actions?: ActionObject[];
     children: React.ReactNode;
     icon?: React.ReactNode;
     isLoading?: boolean;
-    title?: string;
+    title?: React.ReactNode;
 }
 declare function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }: Readonly<ModalProps>): React.ReactElement | null;
 export default Modal;

package/dist/components/modals/Modal/index.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import ModalActions from '../ModalActions';
 function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
+    const componentClassNames = getClassNames('modal', { props: classNameProps }, classNames);
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current) {

package/dist/components/modals/ModalActions/index.d.ts

@@ -1,8 +1,8 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ActionObject } from '../../../utility/interfaces';
 import type { ModalClassNames } from '../Modal';
 export interface ModalActionsProps extends ClassNameProps<ModalClassNames> {
-    actions: (Action | null)[];
+    actions: (ActionObject | null)[];
     isLoading?: boolean;
 }
 declare function ModalActions({ actions, classNameProps, classNames, isLoading, }: Readonly<ModalActionsProps>): React.ReactElement;

package/dist/components/modals/ModalActions/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function ModalActions({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
-    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...(classNameProps || {}), isModal: true }, isLoading: isLoading }) }));
+    const componentClassNames = getClassNames('modal', { props: classNameProps }, classNames);
+    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...classNameProps, isModal: true }, isLoading: isLoading }) }));
 }
 export default ModalActions;

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

@@ -0,0 +1,11 @@
+import type { ActionObject } from '../../../utility/interfaces';
+export interface ActionProps<Data extends object | null = null> extends Omit<ActionObject<Data>, 'details' | 'label'> {
+    readonly children?: React.ReactNode;
+    readonly label?: React.ReactNode;
+    readonly render: (props: ActionComponentProps<Data>) => React.ReactElement;
+}
+export interface ActionComponentProps<Data extends object | null = null> extends Pick<ActionProps<Data>, 'href' | 'icon' | 'isDisabled' | 'isLoading' | 'isSubmittable' | 'onClick' | 'searchParams' | 'variant'> {
+    children: React.ReactNode;
+}
+declare function Action<Data extends object | null = null>(props: ActionProps<Data>): React.ReactElement;
+export default Action;

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+import useServerAction from '../../../hooks/useServerAction';
+import Confirmable from '../Confirmable';
+function ActionComponent({ action, children, confirmable, data, href, icon, isDisabled, isLoading, isSubmittable, label, onClick, searchParams, render, variant, }) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    async function handleAction() {
+        await action?.(data);
+    }
+    const { handleClick: handleActionClick, isLoading: isActionLoading } = useServerAction(handleAction, {
+        onSuccess: onClick,
+    });
+    function handleClick() {
+        if (action) {
+            handleActionClick();
+        }
+        else {
+            onClick?.();
+        }
+        if (searchParams) {
+            setSearchParamsHref(searchParams);
+        }
+    }
+    const componentProps = {
+        children: children ?? label,
+        href,
+        icon,
+        isDisabled: Boolean(isDisabled || isLoading || isActionLoading),
+        isLoading: isLoading || isActionLoading,
+        isSubmittable: Boolean(isSubmittable),
+        onClick: handleClick,
+        variant,
+    };
+    if (confirmable) {
+        return (_jsx(Confirmable, { confirmable: confirmable, renderProps: componentProps, render: render }));
+    }
+    return render(componentProps);
+}
+function Action(props) {
+    return (_jsx(Suspense, { children: _jsx(ActionComponent, { ...props }) }));
+}
+export default Action;

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

@@ -1,11 +1,11 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ActionObject } from '../../../utility/interfaces';
 export interface ActionListClassNames {
     root: string;
     item: string;
 }
 export interface ActionListProps extends ClassNameProps<ActionListClassNames> {
-    actions: (Action | null)[];
+    actions: (ActionObject | null)[];
     isLoading?: boolean;
 }
 declare function ActionList({ actions, classNameProps, classNames, isLoading, }: Readonly<ActionListProps>): React.ReactElement;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import ActionButton from '../../../components/buttons/ActionButton';
-import { getClassNames } from '../../../styles/config';
+import { getClassNames } from '../../../styles/classnames';
 function ActionList({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('actionList')?.(classNameProps);
-    return (_jsx("ul", { className: componentClassNames?.root, children: filterNull(actions).map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isDisabled) }) }, index))) }));
+    const componentClassNames = getClassNames('actionList', { props: classNameProps }, classNames);
+    return (_jsx("ul", { className: componentClassNames?.root, children: filterNull(actions).map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isLoading) }) }, index))) }));
 }
 export default ActionList;

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

@@ -0,0 +1,6 @@
+import type { RegisteredClassNames } from '../../../styles/classnames/config';
+export interface ClassNamesClientComponentProps {
+    data: RegisteredClassNames;
+}
+declare function ClassNamesClientComponent({ data }: ClassNamesClientComponentProps): null;
+export default ClassNamesClientComponent;

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

@@ -0,0 +1,7 @@
+'use client';
+import { registerClassNames } from '../../../styles/classnames';
+function ClassNamesClientComponent({ data }) {
+    registerClassNames(data);
+    return null;
+}
+export default ClassNamesClientComponent;

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from '../../../components/buttons/Button';
+import type { ConfirmableObject } from '../../../utility/interfaces';
+export type ConfirmableProps = {
+    confirmable: ConfirmableObject;
+    renderProps: ButtonProps;
+    render: (props: ButtonProps) => React.ReactElement;
+};
+declare function Confirmable({ confirmable, renderProps, render, }: Readonly<ConfirmableProps>): React.ReactElement;
+export default Confirmable;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import useConfirmable from '../../../hooks/useConfirmable';
+import ConfirmModal from '../../modals/ConfirmModal';
+function Confirmable({ confirmable, renderProps, render, }) {
+    const { handle, isOpen, modalProps } = useConfirmable({
+        isLoading: renderProps.isLoading,
+        onConfirm: (event) => renderProps.onClick?.(event),
+        refreshOnSuccess: true,
+    });
+    return (_jsxs(Fragment, { children: [render({ ...renderProps, isLoading: renderProps.isLoading, onClick: handle }), isOpen ? _jsx(ConfirmModal, { confirmable: confirmable, ...modalProps }) : null] }));
+}
+export default Confirmable;

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

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

package/dist/components/utility/Container/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 Container({ children, classNameProps, classNames, }) {
-    const componentClassNames = classNames || getClassNames('container')?.(classNameProps);
+    const componentClassNames = getClassNames('container', { props: classNameProps }, classNames);
     return _jsx("div", { className: componentClassNames?.root, children: children });
 }
 export default Container;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 interface DataProps {
     'data-test-id'?: string;
 }

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import NextLink from 'next/link';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function normalizeHref(href) {
     if (!href) {
         return '';
@@ -12,7 +12,7 @@ function normalizeHref(href) {
     return /^\//u.exec(href) ? href : `/${href}`;
 }
 function Link({ children, className, classNames, classNameProps, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
-    const componentClassNames = classNames || getClassNames('link')?.(classNameProps);
+    const componentClassNames = getClassNames('link', { props: classNameProps }, classNames);
     const newWindowProps = isNewWindow
         ? { rel: 'noopener noreferrer', target: '_blank' }
         : {};

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, SizableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces';
 export interface LoaderClassNames {
     root?: SizableClassName;
     inner?: SizableClassName;

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

@@ -1,9 +1,9 @@
 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';
 import Assistive from '../Assistive';
 function Loader({ classNameProps, classNames }) {
-    const componentClassNames = classNames || getClassNames('loader')?.(classNameProps);
-    return (_jsxs("div", { className: tw(componentClassNames?.root?.default), children: [_jsx("div", { className: tw(componentClassNames?.inner?.default) }), _jsx(Assistive, { children: "Loading..." })] }));
+    const componentClassNames = getClassNames('loader', { props: classNameProps }, classNames);
+    return (_jsxs("div", { className: tw(componentClassNames?.root), children: [_jsx("div", { className: tw(componentClassNames?.inner) }), _jsx(Assistive, { children: "Loading..." })] }));
 }
 export default Loader;

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

@@ -0,0 +1,11 @@
+import type { ActionObject } from '../../../utility/interfaces';
+import { PopoverProps } from '../Popover';
+export interface MenuProps<Data extends object | null = null> {
+    actions: ActionObject<Data>[];
+    align?: PopoverProps['align'];
+    data?: Data;
+    label: React.ReactNode;
+    vAlign?: PopoverProps['vAlign'];
+}
+declare function Menu<Data extends object | null = null>({ actions, align, data, label, vAlign, }: MenuProps<Data>): React.ReactElement;
+export default Menu;

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../../components/buttons/Button';
+import useClickOutside from '../../../hooks/useClickOutside';
+import Action from '../Action';
+import MenuItem from '../MenuItem';
+import Popover from '../Popover';
+function Menu({ actions, align, data, label, vAlign, }) {
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    return (_jsxs("div", { className: "relative", ref: ref, children: [_jsx(Button, { onClick: toggleIsOpen, children: label }), _jsx(Popover, { align: align, isOpen: isOpen, vAlign: vAlign, children: _jsx("ul", { children: actions.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, data: data, render: MenuItem }) }, index))) }) })] }));
+}
+export default Menu;

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

@@ -0,0 +1,4 @@
+import type { ActionComponentProps } from '../Action';
+type MenuItemProps<Data extends object | null = null> = ActionComponentProps<Data>;
+declare function MenuItem<Data extends object | null = null>({ children, href, onClick, }: MenuItemProps<Data>): React.ReactElement;
+export default MenuItem;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from '../Link';
+function MenuItem({ children, href, onClick, }) {
+    if (href) {
+        return (_jsx(Link, { href: href, onClick: onClick, children: children }));
+    }
+    return (_jsx("button", { onClick: onClick, type: "button", children: children }));
+}
+export default MenuItem;

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

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