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

package/dist/forms/hooks/useForm.js

@@ -1,8 +1,8 @@
 'use client';
 import { useRef, useState, useTransition } from 'react';
 import { formatTitle } from '@sqrzro/utility';
-import { useRouter } from 'next/navigation';
 import useDeepCompareEffect from 'use-deep-compare-effect';
+import useSuccess from '../../hooks/useSuccess';
 import useToast from '../../hooks/useToast';
 const DEFAULT_TOAST_MESSAGES = {
     server: 'There was a problem submitting your request. Please try again later.',
@@ -120,9 +120,9 @@ function getToastMessage(key, toasts) {
  *   handling additional form events or integrating with different server APIs.
  */
 function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
-    const innerRef = useRef(null);
-    const router = useRouter();
-    const [isLoading, startTransition] = useTransition();
+    const ref = useRef(null);
+    const { handleSuccess } = useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess });
+    const [isLoading] = useTransition();
     const [errors, setErrors] = useState(null);
     const [data, setData] = useState(defaults);
     const { toastError, toastSuccess } = useToast();
@@ -132,26 +132,15 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
     function handleChange(event) {
         setData((prev) => ({ ...prev, [event.target.name]: event.target.value }));
     }
-    async function handleSuccess(response) {
-        await onSuccess?.(response);
-        if (redirectOnSuccess) {
-            const redirect = typeof redirectOnSuccess === 'function'
-                ? redirectOnSuccess(response)
-                : redirectOnSuccess;
-            if (redirect) {
-                router.push(redirect);
-            }
-        }
-        if (refreshOnSuccess) {
-            router.refresh();
-        }
+    async function handleFormSuccess(response) {
+        await handleSuccess(response);
         toastSuccess(getToastMessage('success', toasts));
     }
-    function handleError(message) {
+    function handleFormError(message) {
         onError?.(message);
         toastError(getToastMessage('server', toasts));
     }
-    function handleValidation(messages) {
+    function handleFormValidation(messages) {
         onValidation?.(messages);
         setErrors(messages);
         toastError(getToastMessage('validation', toasts));
@@ -163,13 +152,13 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         setErrors(null);
         const fnReturn = await onSubmit(data);
         if (fnReturn.error) {
-            return handleError(fnReturn.error);
+            return handleFormError(fnReturn.error);
         }
         if (fnReturn.validation) {
-            return handleValidation(fnReturn.validation);
+            return handleFormValidation(fnReturn.validation);
         }
-        if (fnReturn.data) {
-            return handleSuccess(fnReturn.data);
+        if (fnReturn.data !== null) {
+            return handleFormSuccess(fnReturn.data);
         }
     }
     function fieldProps(name, label) {
@@ -196,13 +185,14 @@ function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, re
         formData: data,
         formProps: {
             action: handleSubmit,
+            ref,
         },
         isLoading,
         resetForm,
         setErrors,
         setFormData,
         submitForm: () => {
-            setTimeout(() => innerRef.current?.requestSubmit(), 1);
+            setTimeout(() => ref.current?.requestSubmit(), 1);
         },
     };
 }

package/dist/forms/hooks/useModalForm.d.ts

@@ -1,8 +1,8 @@
-import type { Action } from '../../utility/interfaces';
+import type { SimpleActionObject } from '../../utility/interfaces';
 import type { ModalFormProps } from '../components/ModalForm';
 import type { UseFormArgs, UseFormReturn } from './useForm';
 export interface UseModalFormArgs<Request, Response> extends UseFormArgs<Request, Response> {
-    actions?: Action[];
+    actions?: SimpleActionObject[];
     icon?: React.ReactNode;
     submitLabel?: string;
     title?: string;

package/dist/forms/index.d.ts

@@ -1,4 +1,8 @@
 export * from './interfaces';
+export type { AutocompleteProps } from './components/Autocomplete';
+export { default as Autocomplete } from './components/Autocomplete';
+export type { CSVInputClassNames, CSVInputProps } from './components/CSVInput';
+export { default as CSVInput } from './components/CSVInput';
 export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
 export { default as Dropdown } from './components/Dropdown';
 export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
@@ -7,21 +11,39 @@ export type { EditableFormFieldProps } from './components/EditableFormField';
 export { default as EditableFormField } from './components/EditableFormField';
 export type { FormClassNames, FormProps } from './components/Form';
 export { default as Form } from './components/Form';
+export type { FormErrorProps } from './components/FormError';
+export { default as FormError } from './components/FormError';
 export type { FormFieldClassNames, FormFieldProps } from './components/FormField';
 export { default as FormField } from './components/FormField';
 export type { FormSubmitProps } from './components/FormSubmit';
 export { default as FormSubmit } from './components/FormSubmit';
 export type { ModalFormProps } from './components/ModalForm';
 export { default as ModalForm } from './components/ModalForm';
+export type { PasswordComplexityProps } from './components/PasswordComplexity';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
+export type { NumberInputProps } from './components/NumberInput';
+export { default as NumberInput } from './components/NumberInput';
 export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export type { PointsInputProps } from './components/PointsInput';
+export { default as PointsInput } from './components/PointsInput';
+export type { StaticTextInputClassNames, StaticTextInputProps } from './components/StaticTextInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
+export type { TextAreaClassNames, TextAreaProps } from './components/TextArea';
+export { default as TextArea } from './components/TextArea';
 export type { TextInputClassNames, TextInputProps } from './components/TextInput';
 export { default as TextInput } from './components/TextInput';
-export type { EditableDropdownFormFieldProps, EditableTextFormFieldProps, } from './components/EditableFormFields';
-export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export type { DropdownFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
+export type * from './components/EditableFormFields';
+export * from './components/EditableFormFields';
+export type * from './components/FormFields';
+export * from './components/FormFields';
+export type { UseAutocompleteArgs, UseAutocompleteReturn } from './hooks/useAutocomplete';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
+export type { UseDropdownArgs, UseDropdownReturn } from './hooks/useDropdown';
 export { default as useDropdown } from './hooks/useDropdown';
+export type { UseEditableFormArgs, UseEditableFormReturn } from './hooks/useEditableForm';
 export { default as useEditableForm } from './hooks/useEditableForm';
+export type { UseFormArgs, UseFormReturn } from './hooks/useForm';
 export { default as useForm } from './hooks/useForm';
+export type { UseModalFormArgs, UseModalFormReturn } from './hooks/useModalForm';
 export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/index.js

@@ -1,16 +1,24 @@
 export * from './interfaces';
+export { default as Autocomplete } from './components/Autocomplete';
+export { default as CSVInput } from './components/CSVInput';
 export { default as Dropdown } from './components/Dropdown';
 export { default as EditableForm } from './components/EditableForm';
 export { default as EditableFormField } from './components/EditableFormField';
 export { default as Form } from './components/Form';
+export { default as FormError } from './components/FormError';
 export { default as FormField } from './components/FormField';
 export { default as FormSubmit } from './components/FormSubmit';
 export { default as ModalForm } from './components/ModalForm';
+export { default as PasswordComplexity } from './components/PasswordComplexity';
+export { default as NumberInput } from './components/NumberInput';
 export { default as PasswordInput } from './components/PasswordInput';
+export { default as PointsInput } from './components/PointsInput';
+export { default as StaticTextInput } from './components/StaticTextInput';
+export { default as TextArea } from './components/TextArea';
 export { default as TextInput } from './components/TextInput';
-export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
-export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
-// Hooks
+export * from './components/EditableFormFields';
+export * from './components/FormFields';
+export { default as useAutocomplete } from './hooks/useAutocomplete';
 export { default as useDropdown } from './hooks/useDropdown';
 export { default as useEditableForm } from './hooks/useEditableForm';
 export { default as useForm } from './hooks/useForm';

package/dist/forms/interfaces.d.ts

@@ -26,6 +26,7 @@ export interface InputProps<V, T extends V = V> {
     id?: string;
     isDisabled?: boolean;
     name: string;
+    ref?: React.Ref<HTMLInputElement>;
     onChange?: (event: InputEvent<T>) => void;
     onKeyDown?: React.KeyboardEventHandler;
     value?: V;

package/dist/forms/utility/format-file-size.d.ts

@@ -0,0 +1,2 @@
+declare function formatFileSize(size: number): string;
+export default formatFileSize;

package/dist/forms/utility/format-file-size.js

@@ -0,0 +1,11 @@
+const BYTES_IN_KB = 1024;
+const DECIMAL_PLACES = 3;
+function formatFileSize(size) {
+    const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    const exponent = Math.min(Math.floor(Math.log(size) / Math.log(BYTES_IN_KB)), units.length - 1);
+    const approx = size / BYTES_IN_KB ** exponent;
+    return exponent === 0
+        ? `${size} bytes`
+        : `${approx.toFixed(DECIMAL_PLACES)} ${units[exponent]} (${size} bytes)`;
+}
+export default formatFileSize;

package/dist/hooks/index.d.ts

@@ -1 +1,4 @@
 export { default as useClickOutside } from './useClickOutside';
+export { default as useDownload } from './useDownload';
+export { default as usePopover } from './usePopover';
+export { default as useServerAction } from './useServerAction';

package/dist/hooks/index.js

@@ -1 +1,4 @@
 export { default as useClickOutside } from './useClickOutside';
+export { default as useDownload } from './useDownload';
+export { default as usePopover } from './usePopover';
+export { default as useServerAction } from './useServerAction';

package/dist/hooks/useConfirmable.d.ts

@@ -0,0 +1,21 @@
+import type { ActionEvent } from '../utility/interfaces';
+interface UseConfirmableArgs {
+    isLoading?: boolean;
+    onBeforeConfirm?: () => void;
+    onConfirm: (event: ActionEvent, currentRef: HTMLButtonElement | null) => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
+}
+interface UseConfirmableReturn {
+    handle: (event?: ActionEvent) => void;
+    isOpen: boolean;
+    modalProps: {
+        isLoading: boolean;
+        onCancel: () => void;
+        onConfirm: () => void;
+    };
+    ref: React.RefObject<HTMLButtonElement | null>;
+}
+declare function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }: Readonly<UseConfirmableArgs>): UseConfirmableReturn;
+export default useConfirmable;

package/dist/hooks/useConfirmable.js

@@ -0,0 +1,58 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+function useConfirmable({ isLoading, onBeforeConfirm, onConfirm, onSuccess, redirectOnSuccess, refreshOnSuccess, }) {
+    const ref = useRef(null);
+    const router = useRouter();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isConfirmed, setIsConfirmed] = useState(false);
+    const [refEvent, setRefEvent] = useState();
+    function handle(event) {
+        onBeforeConfirm?.();
+        if (!isConfirmed) {
+            event?.preventDefault();
+            setIsModalOpen(true);
+        }
+        setRefEvent(event);
+        setIsConfirmed(false);
+    }
+    function handleConfirm() {
+        setIsConfirmed(true);
+        setTimeout(() => {
+            if (refEvent) {
+                onConfirm(refEvent, ref.current);
+            }
+            // If `isLoading` hasn't been set, we can just close the modal now. If it has, by
+            // setting `isConfirmed` to true above, we trigger the useEffect below to wait until
+            // after loading to close the modal.
+            if (typeof isLoading === 'undefined') {
+                setIsConfirmed(false);
+                setIsModalOpen(false);
+            }
+        }, 0);
+    }
+    function handleCancel() {
+        setIsModalOpen(false);
+    }
+    function handleSuccess() {
+        setIsConfirmed(false);
+        setIsModalOpen(false);
+        router.refresh();
+    }
+    useEffect(() => {
+        if (!isLoading && isConfirmed) {
+            handleSuccess();
+        }
+    }, [isLoading]);
+    return {
+        handle,
+        isOpen: isModalOpen,
+        modalProps: {
+            isLoading: isLoading ?? false,
+            onCancel: handleCancel,
+            onConfirm: handleConfirm,
+        },
+        ref,
+    };
+}
+export default useConfirmable;

package/dist/hooks/useDownload.d.ts

@@ -0,0 +1,2 @@
+declare function useDownload(): (data: Blob | string, filename: string) => void;
+export default useDownload;

package/dist/hooks/useDownload.js

@@ -0,0 +1,18 @@
+function download(data, filename) {
+    const href = typeof data === 'string' ? data : URL.createObjectURL(data);
+    // Create a temporary link element to trigger the download
+    const link = document.createElement('a');
+    link.href = href;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    // Clean up
+    document.body.removeChild(link);
+    if (typeof data !== 'string') {
+        URL.revokeObjectURL(href);
+    }
+}
+function useDownload() {
+    return download;
+}
+export default useDownload;

package/dist/hooks/usePopover.d.ts

@@ -0,0 +1,12 @@
+interface UsePopoverReturn<T extends HTMLElement = HTMLElement> {
+    controlProps: {
+        onClick: () => void;
+    };
+    isOpen: boolean;
+    ref: React.RefObject<T | null>;
+    targetProps: {
+        isOpen: boolean;
+    };
+}
+declare function usePopover<T extends HTMLElement = HTMLElement>(): UsePopoverReturn<T>;
+export default usePopover;

package/dist/hooks/usePopover.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import useClickOutside from './useClickOutside';
+import { usePathname } from 'next/navigation';
+function usePopover() {
+    const pathname = usePathname();
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    useEffect(() => {
+        setIsOpen(false);
+    }, [pathname]);
+    return {
+        controlProps: {
+            onClick: toggleIsOpen,
+        },
+        isOpen,
+        ref,
+        targetProps: {
+            isOpen,
+        },
+    };
+}
+export default usePopover;

package/dist/hooks/useSelected.d.ts

@@ -0,0 +1,12 @@
+import type { InputEvent } from '../forms/interfaces';
+interface UseSelectedReturn {
+    checkSelected: (id: string) => boolean;
+    isAllSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
+    onSelectAll: () => void;
+    selected: string[];
+}
+declare function useSelected(data: {
+    id: string;
+}[]): UseSelectedReturn;
+export default useSelected;

package/dist/hooks/useSelected.js

@@ -0,0 +1,35 @@
+import { toggleArrayItem } from '@sqrzro/utility';
+import { useSearchParams } from 'next/navigation';
+import useSearchParamsHref from './useSearchParamsHref';
+function getSelectedFromSearchParams(searchParams) {
+    const selected = searchParams.get('selected');
+    return selected ? selected.split('|') : [];
+}
+function setSelectedToSearchParams(selected) {
+    return selected.length ? selected.join('|') : null;
+}
+function useSelected(data) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    const searchParams = useSearchParams();
+    const selected = getSelectedFromSearchParams(searchParams);
+    function onSelect(event) {
+        const value = toggleArrayItem(selected, event.target.name);
+        setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
+    }
+    function onSelectAll() {
+        const value = selected.length === data.length ? [] : data.map((item) => item.id);
+        setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
+    }
+    const isAllSelected = data.length > 0 && selected.length === data.length;
+    function checkSelected(id) {
+        return selected.includes(id);
+    }
+    return {
+        checkSelected,
+        isAllSelected,
+        onSelect,
+        onSelectAll,
+        selected,
+    };
+}
+export default useSelected;

package/dist/hooks/useServerAction.d.ts

@@ -0,0 +1,10 @@
+import type { UseSuccessArgs } from './useSuccess';
+interface UseServerActionArgs<Response> extends UseSuccessArgs<Response> {
+    onSuccess?: (response: Response) => void;
+}
+interface UseServerActionReturn {
+    handleClick: () => void;
+    isLoading: boolean;
+}
+declare function useServerAction<Response>(fn?: () => Promise<Response>, args?: UseServerActionArgs<Response>): UseServerActionReturn;
+export default useServerAction;

package/dist/hooks/useServerAction.js

@@ -0,0 +1,17 @@
+import { useTransition } from 'react';
+import useSuccess from './useSuccess';
+function useServerAction(fn, args = {}) {
+    const { handleSuccess } = useSuccess(args);
+    const [isLoading, startTransition] = useTransition();
+    function handleClick() {
+        startTransition(async () => {
+            if (!fn) {
+                return;
+            }
+            const response = await fn();
+            await handleSuccess(response);
+        });
+    }
+    return { handleClick, isLoading };
+}
+export default useServerAction;

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,22 @@
+import { useRouter } from 'next/navigation';
+function useSuccess({ onSuccess, redirectOnSuccess, refreshOnSuccess, }) {
+    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(url);
+            }
+        }
+        else if (refreshOnSuccess) {
+            router.refresh();
+        }
+    }
+    return { handleSuccess };
+}
+export default useSuccess;

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';
 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';
 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 { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { AppNavigationClassNames } from '../AppNavigation';
-export type AppNavigationItemProps = NavigationObject & ClassNameProps<AppNavigationClassNames>;
-declare function AppNavigationItem({ classNameProps, classNames, href, isActive, label, }: Readonly<AppNavigationItemProps>): React.ReactElement;
+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';
+import MenuItem from '../../../components/elements/MenuItem';
+import Action from '../../../components/utility/Action';
+import Popover from '../../../components/utility/Popover';
+import usePopover from '../../../hooks/usePopover';
+import { useClassNames, useIcon } from '../../../styles/context';
+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';
 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;