@sqrzro/ui 4.0.0-alpha.8 → 4.0.0-alpha.80

package/dist/hooks/useSuccess.d.ts

@@ -0,0 +1,10 @@
+export interface UseSuccessArgs<Response> {
+    onSuccess?: (response: Response) => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => Promise<string | false> | string | false);
+    refreshOnSuccess?: boolean;
+}
+interface UseSuccessReturn<Response> {
+    handleSuccess: (response: Response) => Promise<void>;
+}
+declare function useSuccess<Response>({ onSuccess, redirectOnSuccess, refreshOnSuccess, }: UseSuccessArgs<Response>): UseSuccessReturn<Response>;
+export default useSuccess;

package/dist/hooks/useSuccess.js

@@ -0,0 +1,24 @@
+import { usePathname, useRouter } from 'next/navigation';
+import normalizeHref from '../utility/normalize-href.js';
+function useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess, }) {
+    const pathname = usePathname();
+    const router = useRouter();
+    async function handleSuccess(response) {
+        if (onSuccess) {
+            await onSuccess(response);
+        }
+        if (redirectOnSuccess) {
+            const url = typeof redirectOnSuccess === 'function'
+                ? await redirectOnSuccess(response)
+                : redirectOnSuccess;
+            if (url) {
+                router.push(normalizeHref(url, pathname));
+            }
+        }
+        else if (refreshOnSuccess) {
+            router.refresh();
+        }
+    }
+    return { handleSuccess };
+}
+export default useSuccess;

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

@@ -0,0 +1,8 @@
+import { DeepPartial } from '@sqrzro/utility';
+import { MailConfigObject } from '../utility/interfaces';
+export interface MailProps extends DeepPartial<MailConfigObject> {
+    children: React.ReactNode;
+    title?: string;
+}
+declare function Mail({ children, logo, styles, title, }: Readonly<MailProps>): Promise<React.ReactElement>;
+export default Mail;

package/dist/mail/Mail/index.js

@@ -0,0 +1,108 @@
+'use server';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { setMailConfig } from '../utility/mail-config';
+const HALF = 2;
+async function Mail({ children, logo, styles, title, }) {
+    const mailConfig = setMailConfig({ styles });
+    const logoData = await (await import('../utility/convert-to-datauri')).default(logo ?? mailConfig.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: mailConfig.styles.root.backgroundColor } }) }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: { backgroundColor: mailConfig.styles.root.backgroundColor }, width: "20" }), _jsx("td", { align: "center", style: { backgroundColor: mailConfig.styles.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: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: "20", children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: mailConfig.styles.root.backgroundColor,
+                                                                        height: mailConfig.styles.panel.padding,
+                                                                        width: mailConfig.styles.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: mailConfig.styles.panel
+                                                                                .backgroundColor,
+                                                                            borderTopLeftRadius: mailConfig.styles.panel.padding /
+                                                                                HALF,
+                                                                            height: mailConfig.styles.panel.padding,
+                                                                            width: mailConfig.styles.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: mailConfig.styles.panel.padding, style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: mailConfig.styles.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: mailConfig.styles.root.backgroundColor,
+                                                                        height: mailConfig.styles.panel.padding,
+                                                                        width: mailConfig.styles.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: mailConfig.styles.panel
+                                                                                .backgroundColor,
+                                                                            borderTopRightRadius: mailConfig.styles.panel.padding /
+                                                                                HALF,
+                                                                            height: mailConfig.styles.panel.padding,
+                                                                            width: mailConfig.styles.panel.padding,
+                                                                        } }) }) })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: mailConfig.styles.panel.padding }), _jsx("td", { style: {
+                                                                    backgroundColor: mailConfig.styles.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: mailConfig.styles.panel
+                                                                                                .padding }) })] })) : null, title ? (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { style: {
+                                                                                                color: mailConfig.styles
+                                                                                                    .title.color,
+                                                                                                fontSize: mailConfig.styles
+                                                                                                    .title.fontSize,
+                                                                                                fontWeight: mailConfig.styles
+                                                                                                    .title
+                                                                                                    .fontWeight,
+                                                                                            }, children: title }) }), _jsx("tr", { children: _jsx("td", { height: mailConfig.styles.panel
+                                                                                                .padding }) })] })) : null, _jsx("tr", { children: _jsx("td", { children: children }) })] }) }) }), _jsx("td", { className: "padding", style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: mailConfig.styles.panel.padding })] }), _jsxs("tr", { children: [_jsx("td", { className: "padding", height: mailConfig.styles.panel.padding, style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: mailConfig.styles.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: mailConfig.styles.root.backgroundColor,
+                                                                        height: mailConfig.styles.panel.padding,
+                                                                        width: mailConfig.styles.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: mailConfig.styles.panel
+                                                                                .backgroundColor,
+                                                                            borderBottomLeftRadius: mailConfig.styles.panel.padding /
+                                                                                HALF,
+                                                                            height: mailConfig.styles.panel.padding,
+                                                                            width: mailConfig.styles.panel.padding,
+                                                                        } }) }) }), _jsx("td", { className: "container", style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: "610" }), _jsx("td", { className: "padding", height: mailConfig.styles.panel.padding, style: {
+                                                                    backgroundColor: mailConfig.styles.panel.backgroundColor,
+                                                                }, width: mailConfig.styles.panel.padding, children: _jsx("div", { className: "padding", style: {
+                                                                        backgroundColor: mailConfig.styles.root.backgroundColor,
+                                                                        height: mailConfig.styles.panel.padding,
+                                                                        width: mailConfig.styles.panel.padding,
+                                                                    }, children: _jsx("div", { className: "padding", style: {
+                                                                            backgroundColor: mailConfig.styles.panel
+                                                                                .backgroundColor,
+                                                                            borderBottomRightRadius: mailConfig.styles.panel.padding /
+                                                                                HALF,
+                                                                            height: mailConfig.styles.panel.padding,
+                                                                            width: mailConfig.styles.panel.padding,
+                                                                        } }) }) })] })] }) }) }), _jsx("td", { className: "padding", style: { backgroundColor: mailConfig.styles.root.backgroundColor }, width: "20" })] }), _jsx("tr", { children: _jsx("td", { className: "padding", colSpan: 3, height: "20", style: { backgroundColor: mailConfig.styles.root.backgroundColor } }) })] }) }) })] }));
+}
+export default Mail;

package/dist/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/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/mail/MailButton/index.d.ts

@@ -0,0 +1,8 @@
+import type { DeepPartial } from '@sqrzro/utility';
+import { MailConfigObject } from '../utility/interfaces';
+export interface MailButtonProps extends DeepPartial<MailConfigObject> {
+    children: string;
+    href: string;
+}
+declare function MailButton({ children, href, styles, }: MailButtonProps): Promise<React.ReactElement>;
+export default MailButton;

package/dist/mail/MailButton/index.js

@@ -0,0 +1,28 @@
+'use server';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getMailConfig } from '../utility/mail-config';
+function calculateWidth(text) {
+    const characterWidth = 8;
+    const padding = 50;
+    return text.length * characterWidth + padding;
+}
+async function MailButton({ children, href, styles, }) {
+    const mailConfig = getMailConfig({ 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:${mailConfig.styles.button.height}px;v-text-anchor:middle;width:${calculatedWidth}px;" arcsize="50%" stroke="f" fillcolor="${mailConfig.styles.button.backgroundColor}">
+                        <w:anchorlock/>
+                        <center>
+                            <![endif]-->
+                            <a href="${href}"
+                                style="background-color:${mailConfig.styles.button.backgroundColor};border-radius:${mailConfig.styles.button.borderRadius}px;color:${mailConfig.styles.button.color};display:inline-block;font-weight:bold;line-height:${mailConfig.styles.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/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/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/mail/index.d.ts

@@ -0,0 +1,8 @@
+export type { MailProps } from './Mail';
+export { default as Mail } from './Mail';
+export type { MailBlockProps } from './MailBlock';
+export { default as MailBlock } from './MailBlock';
+export type { MailButtonProps } from './MailButton';
+export { default as MailButton } from './MailButton';
+export type { MailTableProps } from './MailTable';
+export { default as MailTable } from './MailTable';

package/dist/mail/index.js

@@ -0,0 +1,4 @@
+export { default as Mail } from './Mail';
+export { default as MailBlock } from './MailBlock';
+export { default as MailButton } from './MailButton';
+export { default as MailTable } from './MailTable';

package/dist/mail/utility/convert-to-datauri.d.ts

@@ -0,0 +1,2 @@
+declare function convertToDataURI(fileName: string): Promise<string | null>;
+export default convertToDataURI;

package/dist/mail/utility/convert-to-datauri.js

@@ -0,0 +1,37 @@
+'use server';
+import fs from 'node:fs';
+import path from 'node:path';
+function isURL(value) {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+async function read(fileName) {
+    if (isURL(fileName)) {
+        const response = await fetch(fileName);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${fileName}: ${response.status}`);
+        }
+        return Buffer.from(await response.arrayBuffer());
+    }
+    return fs.readFileSync(fileName);
+}
+async function convertToDataURI(fileName) {
+    try {
+        const filePath = path.isAbsolute(fileName) || isURL(fileName)
+            ? fileName
+            : path.join(process.cwd(), fileName);
+        const mimeType = 'image/' + path.extname(filePath).slice(1);
+        const imageData = await read(filePath);
+        const base64Image = Buffer.from(imageData).toString('base64');
+        return Promise.resolve(`data:${mimeType};base64,${base64Image}`);
+    }
+    catch (error) {
+        return null;
+    }
+}
+export default convertToDataURI;

package/dist/mail/utility/interfaces.d.ts

@@ -0,0 +1,23 @@
+export interface MailConfigObject {
+    logo?: string;
+    styles: {
+        root: {
+            backgroundColor: string;
+        };
+        panel: {
+            backgroundColor: string;
+            padding: number;
+        };
+        button: {
+            backgroundColor: string;
+            borderRadius: number;
+            color: string;
+            height: number;
+        };
+        title: {
+            color: string;
+            fontSize: number;
+            fontWeight: string;
+        };
+    };
+}

package/dist/mail/utility/mail-config.d.ts

@@ -0,0 +1,4 @@
+import type { DeepPartial } from '@sqrzro/utility';
+import type { MailConfigObject } from './interfaces';
+export declare function setMailConfig(overrides?: DeepPartial<MailConfigObject>): MailConfigObject;
+export declare function getMailConfig(overrides?: DeepPartial<MailConfigObject>): MailConfigObject;

package/dist/mail/utility/mail-config.js

@@ -0,0 +1,42 @@
+import { deepMerge } from '@sqrzro/utility';
+import { cache } from 'react';
+const DEFAULT_STYLES = {
+    styles: {
+        button: {
+            backgroundColor: '#0f172b',
+            borderRadius: 4,
+            color: '#ffffff',
+            height: 40,
+        },
+        panel: {
+            backgroundColor: '#ffffff',
+            padding: 40,
+        },
+        root: {
+            backgroundColor: '#f5f5f5',
+        },
+        title: {
+            color: '#62748e',
+            fontSize: 20,
+            fontWeight: 'bold',
+        },
+    },
+};
+const context = cache(() => new Map());
+const global = context();
+export function setMailConfig(overrides) {
+    const string = process.env.MAIL_CONFIG || '{}';
+    try {
+        const object = JSON.parse(string);
+        global.set('mail', deepMerge(DEFAULT_STYLES, object, overrides || {}));
+    }
+    catch (err) {
+        global.set('mail', deepMerge(DEFAULT_STYLES, overrides || {}));
+    }
+    return global.get('mail');
+}
+export function getMailConfig(overrides) {
+    return global.has('mail')
+        ? deepMerge(DEFAULT_STYLES, global.get('mail'), overrides || {})
+        : deepMerge(DEFAULT_STYLES, overrides || {});
+}

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

@@ -1,12 +1,14 @@
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, HighlightableClassName, SelectableClassName } from '../../../styles/classnames/interfaces.js';
 import type { NavigationObject } from '../../interfaces';
 export interface AppNavigationClassNames {
     root: string;
     list: string;
     item: HighlightableClassName;
     link: HighlightableClassName;
+    icon: SelectableClassName;
 }
 export interface AppNavigationProps extends ClassNameProps<AppNavigationClassNames> {
+    classNameKey?: 'appNavigation' | 'tabs';
     data: NavigationObject[];
 }
 declare function AppNavigation(props: Readonly<AppNavigationProps>): React.ReactElement;

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

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

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

@@ -1,6 +1,8 @@
-import type { NavigationObject } from '../../../navigation/interfaces';
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { NavigationObject } from '../../interfaces.js';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces.js';
 import type { AppNavigationClassNames } from '../AppNavigation';
-export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
-declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
+export interface AppNavigationItemProps extends NavigationObject, ClassNameProps<AppNavigationClassNames> {
+    classNameKey?: 'appNavigation' | 'tabs';
+}
+declare function AppNavigationItem({ children, classNameKey, classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
 export default AppNavigationItem;

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

@@ -1,9 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Link from '../../../components/utility/Link';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-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 }) }));
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from '../../../components/elements/Link/index.js';
+import MenuItem from '../../../components/elements/MenuItem/index.js';
+import Action from '../../../components/utility/Action/index.js';
+import Popover from '../../../components/utility/Popover/index.js';
+import usePopover from '../../../hooks/usePopover.js';
+import { useClassNames, useIcon } from '../../../styles/context.js';
+function AppNavigationItem({ children, classNameKey, classNameProps, classNames, href, isActive, label, }) {
+    const Icon = useIcon('appNavigation.menu');
+    const { controlProps, isOpen, ref, targetProps } = usePopover();
+    const componentClassNames = useClassNames(classNameKey ?? 'appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false, isSelected: isOpen } }, classNames);
+    if (children?.length) {
+        return (_jsxs("li", { className: componentClassNames?.item, ref: ref, children: [_jsxs("button", { className: componentClassNames?.link, type: "button", ...controlProps, children: [label, Icon ? (_jsx("div", { className: componentClassNames?.icon, children: _jsx(Icon, {}) })) : null] }), _jsx("div", { className: "relative -mt-3", children: _jsx(Popover, { align: "left", vAlign: "bottom", ...targetProps, children: _jsx("ul", { children: children.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, render: MenuItem }) }, index))) }) }) })] }));
+    }
+    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,6 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
 import AppNavigation from '../AppNavigation';
 function Tabs({ classNameProps, classNames, ...props }) {
-    const componentClassNames = classNames || getClassNames('tabs')?.(classNameProps);
-    return _jsx(AppNavigation, { classNames: componentClassNames ?? {}, ...props });
+    return _jsx(AppNavigation, { classNameKey: "tabs", ...props });
 }
 export default Tabs;

package/dist/navigation/hooks/useNavigation.d.ts

@@ -1,7 +1,7 @@
-import type { Action } from '../../utility/interfaces';
+import type { SimpleActionObject } from '../../utility/interfaces.js';
 import type { NavigationObject } from '../interfaces';
-interface NavigationAction extends Action {
-    children?: Action[];
+interface NavigationAction extends SimpleActionObject {
+    children?: SimpleActionObject[];
 }
 interface UseNavigationOptions {
     basePath?: string;

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/config.d.ts

@@ -0,0 +1,97 @@
+import type { ButtonClassNames } from '../../components/buttons/Button/index.js';
+import type { TextButtonClassNames } from '../../components/buttons/TextButton/index.js';
+import type { DataTableClassNames } from '../../components/collections/DataTable/index.js';
+import type { DefinitionListClassNames } from '../../components/collections/DefinitionList/index.js';
+import type { EmptyMessageClassNames } from '../../components/collections/EmptyMessage/index.js';
+import type { ListClassNames } from '../../components/collections/List/index.js';
+import type { ListItemClassNames } from '../../components/collections/ListItem/index.js';
+import type { ListItemMetaClassNames } from '../../components/collections/ListItemMeta/index.js';
+import type { PaginationClassNames } from '../../components/collections/Pagination/index.js';
+import type { TableClassNames } from '../../components/collections/Table/index.js';
+import type { BadgeClassNames } from '../../components/elements/Badge/index.js';
+import type { InfoPanelClassNames } from '../../components/elements/InfoPanel/index.js';
+import type { LinkClassNames } from '../../components/elements/Link/index.js';
+import type { MenuClassNames } from '../../components/elements/Menu/index.js';
+import type { ReferenceClassNames } from '../../components/elements/Reference/index.js';
+import type { SummaryClassNames } from '../../components/elements/Summary/index.js';
+import type { AppErrorClassNames } from '../../components/errors/AppError/index.js';
+import type { ModalClassNames } from '../../components/modals/Modal/index.js';
+import type { ActionListClassNames } from '../../components/utility/ActionList/index.js';
+import type { CalendarClassNames } from '../../components/utility/Calendar/index.js';
+import type { ContainerClassNames } from '../../components/utility/Container/index.js';
+import type { LoaderClassNames } from '../../components/utility/Loader/index.js';
+import type { PopoverClassNames } from '../../components/utility/Popover/index.js';
+import type { ToastClassNames } from '../../components/utility/Toast/index.js';
+import type { FilterBarClassNames } from '../../filters/components/FilterBar/index.js';
+import type { FilterClearButtonClassNames } from '../../filters/components/FilterClearButton/index.js';
+import type { FilterItemClassNames } from '../../filters/components/FilterItem/index.js';
+import type { FilterPanelClassNames } from '../../filters/components/FilterPanel/index.js';
+import type { SearchFilterClassNames } from '../../filters/filters/SearchFilter/index.js';
+import type { CheckboxInputClassNames } from '../../forms/components/CheckboxInput/index.js';
+import type { ChkRadClassNames } from '../../forms/components/ChkRad/index.js';
+import type { ColorInputClassNames } from '../../forms/components/ColorInput/index.js';
+import type { CSVInputClassNames } from '../../forms/components/CSVInput/index.js';
+import type { DropdownClassNames } from '../../forms/components/Dropdown/index.js';
+import type { EditableFormClassNames } from '../../forms/components/EditableForm/index.js';
+import type { EditableFormFieldClassNames } from '../../forms/components/EditableFormField/index.js';
+import type { FormClassNames } from '../../forms/components/Form/index.js';
+import type { FormFieldClassNames } from '../../forms/components/FormField/index.js';
+import type { ImageInputClassNames } from '../../forms/components/ImageInput/index.js';
+import type { PasswordComplexityClassNames } from '../../forms/components/PasswordComplexity/index.js';
+import type { PasswordInputClassNames } from '../../forms/components/PasswordInput/index.js';
+import type { StaticTextInputClassNames } from '../../forms/components/StaticTextInput/index.js';
+import type { SwitchClassNames } from '../../forms/components/Switch/index.js';
+import type { TextInputClassNames } from '../../forms/components/TextInput/index.js';
+import type { TextAreaClassNames } from '../../forms/components/TextArea/index.js';
+import type { AppNavigationClassNames } from '../../navigation/components/AppNavigation/index.js';
+import type { TabsClassNames } from '../../navigation/components/Tabs/index.js';
+import type { ComponentClassNames } from './interfaces';
+export interface UIClassNames {
+    actionList?: ComponentClassNames<ActionListClassNames>;
+    appError?: ComponentClassNames<AppErrorClassNames>;
+    appNavigation?: ComponentClassNames<AppNavigationClassNames>;
+    badge?: ComponentClassNames<BadgeClassNames>;
+    button?: ComponentClassNames<ButtonClassNames>;
+    calendar?: ComponentClassNames<CalendarClassNames>;
+    checkboxInput?: ComponentClassNames<CheckboxInputClassNames>;
+    chkrad?: ComponentClassNames<ChkRadClassNames>;
+    colorInput?: ComponentClassNames<ColorInputClassNames>;
+    container?: ComponentClassNames<ContainerClassNames>;
+    csvInput?: ComponentClassNames<CSVInputClassNames>;
+    dataTable?: ComponentClassNames<DataTableClassNames>;
+    definitionList?: ComponentClassNames<DefinitionListClassNames>;
+    dropdown?: ComponentClassNames<DropdownClassNames>;
+    editableForm?: ComponentClassNames<EditableFormClassNames>;
+    editableFormField?: ComponentClassNames<EditableFormFieldClassNames>;
+    emptyMessage?: ComponentClassNames<EmptyMessageClassNames>;
+    filterBar?: ComponentClassNames<FilterBarClassNames>;
+    filterClear?: ComponentClassNames<FilterClearButtonClassNames>;
+    filterItem?: ComponentClassNames<FilterItemClassNames>;
+    filterPanel?: ComponentClassNames<FilterPanelClassNames>;
+    filterSearch?: ComponentClassNames<SearchFilterClassNames>;
+    form?: ComponentClassNames<FormClassNames>;
+    formField?: ComponentClassNames<FormFieldClassNames>;
+    imageInput?: ComponentClassNames<ImageInputClassNames>;
+    infoPanel?: ComponentClassNames<InfoPanelClassNames>;
+    link?: ComponentClassNames<LinkClassNames>;
+    list?: ComponentClassNames<ListClassNames>;
+    listItem?: ComponentClassNames<ListItemClassNames>;
+    listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
+    loader?: ComponentClassNames<LoaderClassNames>;
+    menu?: ComponentClassNames<MenuClassNames>;
+    modal?: ComponentClassNames<ModalClassNames>;
+    pagination?: ComponentClassNames<PaginationClassNames>;
+    passwordComplexity?: ComponentClassNames<PasswordComplexityClassNames>;
+    passwordInput?: ComponentClassNames<PasswordInputClassNames>;
+    popover?: ComponentClassNames<PopoverClassNames>;
+    reference?: ComponentClassNames<ReferenceClassNames>;
+    staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
+    summary?: ComponentClassNames<SummaryClassNames>;
+    switch?: ComponentClassNames<SwitchClassNames>;
+    table?: ComponentClassNames<TableClassNames>;
+    tabs?: ComponentClassNames<TabsClassNames>;
+    textArea?: ComponentClassNames<TextAreaClassNames>;
+    textButton?: ComponentClassNames<TextButtonClassNames>;
+    textInput?: ComponentClassNames<TextInputClassNames>;
+    toast?: ComponentClassNames<ToastClassNames>;
+}

package/dist/styles/classnames/config.js

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