@sqrzro/ui 4.0.0-alpha.4 → 4.0.0-alpha.41

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

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ActionButton from '../../../components/buttons/ActionButton';
+import { useClassNames } from '../../../styles/context';
+function AppError({ action, classNameProps, classNames, description, error, title, }) {
+    const componentClassNames = useClassNames('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,18 +1,49 @@
 export * from './collections/interfaces';
+export type { ActionButtonProps } from './buttons/ActionButton';
 export { default as ActionButton } from './buttons/ActionButton';
+export type { AppBodyProps } from './utility/AppBody';
+export { default as AppBody } from './utility/AppBody';
+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 { BadgeProps } from './elements/Badge';
+export { default as Badge } from './elements/Badge';
+export type { InfoPanelProps } from './elements/InfoPanel';
+export { default as InfoPanel } from './elements/InfoPanel';
+export type { LinkProps } from './elements/Link';
+export { default as Link } from './elements/Link';
+export type { MenuProps } from './elements/Menu';
+export { default as Menu } from './elements/Menu';
+export type { PageProps } from './elements/Page';
+export { default as Page } from './elements/Page';
+export type { ReferenceProps } from './elements/Reference';
+export { default as Reference } from './elements/Reference';
+export type { SummaryProps } from './elements/Summary';
+export { default as Summary } from './elements/Summary';
+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 { MailProps } from './mail/Mail';
+export { default as Mail } from './mail/Mail';
+export type { MailBlockProps } from './mail/MailBlock';
+export { default as MailBlock } from './mail/MailBlock';
+export type { MailButtonProps } from './mail/MailButton';
+export { default as MailButton } from './mail/MailButton';
+export type { MailTableProps } from './mail/MailTable';
+export { default as MailTable } from './mail/MailTable';
+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 { 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 { RootLayoutProps } from './utility/RootLayout';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -1,10 +1,25 @@
 export * from './collections/interfaces';
 export { default as ActionButton } from './buttons/ActionButton';
+export { default as AppBody } from './utility/AppBody';
+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 Badge } from './elements/Badge';
+export { default as InfoPanel } from './elements/InfoPanel';
+export { default as Link } from './elements/Link';
+export { default as Menu } from './elements/Menu';
+export { default as Page } from './elements/Page';
+export { default as Reference } from './elements/Reference';
+export { default as Summary } from './elements/Summary';
+export { default as AppError } from './errors/AppError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
+export { default as Mail } from './mail/Mail';
+export { default as MailBlock } from './mail/MailBlock';
+export { default as MailButton } from './mail/MailButton';
+export { default as MailTable } from './mail/MailTable';
+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 Page } from './utility/Page';
 export { default as Popover } from './utility/Popover';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/mail/Mail/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppConfig } from '@sqrzro/config';
+export type MailProps = AppConfig['mail'] & {
+    children: React.ReactNode;
+    title: string;
+};
+declare function Mail({ children, logo, styles, title, }: Readonly<MailProps>): Promise<React.ReactElement>;
+export default Mail;

package/dist/components/mail/Mail/index.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines-per-function, react/jsx-max-depth, react/no-danger */
+import { Fragment } from 'react';
+import { deepMerge } from '@sqrzro/utility';
+import { getConfig } from '../../../addon/config';
+const DEFAULT_STYLES = {
+    styles: {
+        root: {
+            backgroundColor: '#f5f5f5',
+        },
+        panel: {
+            backgroundColor: '#ffffff',
+            padding: 40,
+        },
+        title: {
+            color: '#62748e',
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+    },
+};
+const HALF = 2;
+async function Mail({ children, logo, styles, title, }) {
+    const styleConfig = deepMerge(DEFAULT_STYLES?.styles || {}, getConfig().app.mail?.styles || {}, styles || {});
+    const logoData = await (await import('../../../utility/convert-to-datauri')).default(logo ?? getConfig().app.mail?.logo ?? '');
+    return (_jsxs("html", { lang: "en", children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), _jsx("style", { dangerouslySetInnerHTML: {
+                            __html: `
+                        body {
+                            color: #0f172b !important;
+                            font-family: -apple-system, 'SF Pro Display', 'SF Pro Text', 'Helvetica', sans-serif;
+                            font-size: 16px;
+                            font-weight:400;  
+                            line-height: 24px;
+                            margin: 0;
+                            padding: 0;
+                        }
+                        @media print {
+                            body {
+                                font-size: 14px !important;
+                                line-height: 21px !important;
+                            }
+                            .container {
+                                width: 100% !important;
+                            }
+                            .padding {
+                                height: auto !important;
+                                width: auto !important;
+                            }
+                        }
+                    `,
+                        } })] }), _jsx("body", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [_jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: styleConfig.root.backgroundColor } }) }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: { backgroundColor: styleConfig.root.backgroundColor }, width: "20" }), _jsx("td", { align: "center", style: { backgroundColor: styleConfig.root.backgroundColor }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, className: "container", width: "650", children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "padding", height: "20", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "20", children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderTopLeftRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderTopRightRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding }), _jsx("td", { style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: "100%", children: _jsxs("tbody", { children: [logoData ? (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { children: _jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, width: 240, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { children: _jsx("img", { alt: "Logo", src: logoData, width: 240 }) }) }) }) }) }) }), _jsx("tr", { children: _jsx("td", { height: styleConfig.panel
+                                                                                                .padding }) })] })) : null, _jsx("tr", { children: _jsx("td", { style: {
+                                                                                        color: styleConfig.title.color,
+                                                                                        fontSize: styleConfig.title.fontSize,
+                                                                                        fontWeight: styleConfig.title
+                                                                                            .fontWeight,
+                                                                                    }, children: title }) }), _jsx("tr", { children: _jsx("td", { height: styleConfig.panel.padding }) }), _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderBottomLeftRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: styleConfig.panel.padding, style: {
+                                                                    backgroundColor: styleConfig.panel.backgroundColor,
+                                                                }, width: styleConfig.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: styleConfig.root.backgroundColor,
+                                                                        height: styleConfig.panel.padding,
+                                                                        width: styleConfig.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: styleConfig.panel.backgroundColor,
+                                                                            borderBottomRightRadius: styleConfig.panel.padding / HALF,
+                                                                            height: styleConfig.panel.padding,
+                                                                            width: styleConfig.panel.padding,
+                                                                        } }) }) })] })] }) }) }), _jsx("td", { className: "padding", style: { backgroundColor: styleConfig.root.backgroundColor }, width: "20" })] }), _jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: styleConfig.root.backgroundColor } }) })] }) }) })] }));
+}
+export default Mail;

package/dist/components/mail/MailBlock/index.d.ts

@@ -0,0 +1,5 @@
+export interface MailBlockProps {
+    children: React.ReactNode;
+}
+declare function MailBlock({ children }: Readonly<MailBlockProps>): React.ReactElement;
+export default MailBlock;

package/dist/components/mail/MailBlock/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function MailBlock({ children }) {
+    return _jsx("div", { style: { marginBottom: 30 }, children: children });
+}
+export default MailBlock;

package/dist/components/mail/MailButton/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppConfig } from '@sqrzro/config';
+export type MailButtonProps = AppConfig['mail'] & {
+    children: string;
+    href: string;
+};
+declare function MailButton({ children, href, styles }: Readonly<MailButtonProps>): React.ReactElement;
+export default MailButton;

package/dist/components/mail/MailButton/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { deepMerge } from '@sqrzro/utility';
+import { getConfig } from '../../../addon/config';
+const DEFAULT_STYLES = {
+    styles: {
+        button: {
+            backgroundColor: '#f26c25',
+            borderRadius: 20,
+            color: '#ffffff',
+            height: 40,
+        },
+    },
+};
+function calculateWidth(text) {
+    const characterWidth = 8;
+    const padding = 50;
+    return text.length * characterWidth + padding;
+}
+function MailButton({ children, href, styles }) {
+    const styleConfig = deepMerge(DEFAULT_STYLES?.styles || {}, getConfig().app.mail?.styles || {}, styles || {});
+    const calculatedWidth = calculateWidth(children);
+    return (_jsx("div", { dangerouslySetInnerHTML: {
+            __html: `
+                    <!--[if mso]>
+                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${href}" style="height:${styleConfig.button.height}px;v-text-anchor:middle;width:${calculatedWidth}px;" arcsize="50%" stroke="f" fillcolor="${styleConfig.button.backgroundColor}">
+                        <w:anchorlock/>
+                        <center>
+                            <![endif]-->
+                            <a href="${href}"
+                                style="background-color:${styleConfig.button.backgroundColor};border-radius:${styleConfig.button.borderRadius}px;color:${styleConfig.button.color};display:inline-block;font-weight:bold;line-height:${styleConfig.button.height}px;text-align:center;text-decoration:none;width:${calculatedWidth}px;-webkit-text-size-adjust:none;">${children}</a>
+                            <!--[if mso]>
+                        </center>
+                    </v:roundrect>
+                    <![endif]-->
+        `,
+        } }));
+}
+export default MailButton;

package/dist/components/mail/MailTable/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface MailTableProps {
+    data: {
+        title: React.ReactNode;
+        value: React.ReactNode;
+    }[];
+}
+declare function MailTable({ data }: Readonly<MailTableProps>): React.ReactElement;
+export default MailTable;

package/dist/components/mail/MailTable/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+const EVEN_NUMBER = 2;
+function MailTable({ data }) {
+    return (_jsx("table", { border: 0, cellPadding: 0, cellSpacing: 0, style: { marginBottom: 30 }, width: "100%", children: _jsxs("tbody", { children: [data.map(({ title, value }, index) => (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { colSpan: 5, height: 1, style: { backgroundColor: '#cccccc' } }) }), _jsx("tr", { children: _jsx("td", { colSpan: 5, height: 10, style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' } }) }), _jsxs("tr", { children: [_jsx("td", { style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' }, width: 10 }), _jsx("td", { style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' }, children: title }), _jsx("td", { style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' }, width: 20 }), _jsx("td", { align: "right", style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' }, children: value }), _jsx("td", { style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' }, width: 10 })] }), _jsx("tr", { children: _jsx("td", { colSpan: 5, height: 10, style: { backgroundColor: index % EVEN_NUMBER ? '' : '#f7f7f7' } }) })] }, index))), _jsx("tr", { children: _jsx("td", { colSpan: 5, height: 1, style: { backgroundColor: '#cccccc' } }) })] }) }));
+}
+export default MailTable;

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

@@ -1,7 +1,9 @@
 import { ConfirmableObject } from '../../../utility/interfaces';
 import type { ModalProps } from '../Modal';
-export type ConfirmModalProps = Omit<ModalProps, 'children' | 'icon' | 'title'> & {
-    confirmable: ConfirmableObject;
+export type ConfirmModalProps<Data, Response> = Omit<ModalProps, 'children' | 'icon' | 'title'> & {
+    confirmable: ConfirmableObject<Data, Response>;
+    onCancel: () => void;
+    onConfirm: () => void;
 };
-declare function ConfirmModal({ confirmable, ...modalProps }: Readonly<ConfirmModalProps>): React.ReactElement;
+declare function ConfirmModal<Data, Response>({ confirmable, onCancel, onConfirm, ...modalProps }: Readonly<ConfirmModalProps<Data, Response>>): 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 { SimpleActionObject } 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?: SimpleActionObject[];
     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 { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import ModalActions from '../ModalActions';
 function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
+    const componentClassNames = useClassNames('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 { SimpleActionObject } from '../../../utility/interfaces';
 import type { ModalClassNames } from '../Modal';
 export interface ModalActionsProps extends ClassNameProps<ModalClassNames> {
-    actions: (Action | null)[];
+    actions: (SimpleActionObject | null)[];
     isLoading?: boolean;
 }
 declare function ModalActions({ actions, classNameProps, classNames, isLoading, }: Readonly<ModalActionsProps>): React.ReactElement;

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

@@ -1,8 +1,9 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context';
 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 = useClassNames('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, Response> extends Omit<ActionObject<Data, Response>, 'details' | 'label'> {
+    readonly children?: React.ReactNode;
+    readonly label?: React.ReactNode;
+    readonly render: (props: ActionComponentProps<Data, Response>) => React.ReactElement;
+}
+export interface ActionComponentProps<Data, Response> extends Pick<ActionProps<Data, Response>, 'action' | 'confirmable' | 'data' | 'href' | 'icon' | 'isDisabled' | 'isLoading' | 'isSubmittable' | 'onClick' | 'onSuccess' | 'searchParams' | 'variant'> {
+    children: React.ReactNode;
+}
+declare function Action<Data, Response>(props: ActionProps<Data, Response>): React.ReactElement;
+export default Action;

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

@@ -0,0 +1,48 @@
+'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, onSuccess, refreshOnSuccess, redirectOnSuccess, searchParams, render, variant, }) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    async function handleAction() {
+        return action?.(data);
+    }
+    const serverActionOptions = {
+        onSuccess,
+        refreshOnSuccess,
+        redirectOnSuccess,
+    };
+    const { handleClick: handleActionClick, isLoading: isActionLoading } = useServerAction(handleAction, serverActionOptions);
+    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,
+        onSuccess,
+        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,12 +1,12 @@
-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)[];
+export interface ActionListProps<Data, Response> extends ClassNameProps<ActionListClassNames> {
+    actions: (ActionObject<Data, Response> | null)[];
     isLoading?: boolean;
 }
-declare function ActionList({ actions, classNameProps, classNames, isLoading, }: Readonly<ActionListProps>): React.ReactElement;
+declare function ActionList<Data, Response>({ actions, classNameProps, classNames, isLoading, }: Readonly<ActionListProps<Data, Response>>): React.ReactElement;
 export default ActionList;

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

@@ -1,9 +1,11 @@
+'use client';
 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 { useClassNames } from '../../../styles/context';
 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 = useClassNames('actionList', { props: classNameProps }, classNames);
+    const filteredActions = filterNull(actions);
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredActions.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/AppBody/index.d.ts

@@ -0,0 +1,5 @@
+export interface AppBodyProps {
+    readonly children: React.ReactNode;
+}
+declare function AppBody({ children }: AppBodyProps): React.ReactElement;
+export default AppBody;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Toaster from '../../../components/utility/Toaster';
+function AppBody({ children }) {
+    return (_jsxs(Fragment, { 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))",
+                } }), _jsxs("div", { className: "flex min-h-screen flex-col", children: [children, _jsx(Toaster, {})] })] }));
+}
+export default AppBody;