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

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

@@ -0,0 +1,11 @@
+interface UsePopoverReturn<T extends HTMLElement = HTMLElement> {
+    controlProps: {
+        onClick: () => void;
+    };
+    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,17 @@
+import useClickOutside from './useClickOutside';
+function usePopover() {
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    return {
+        controlProps: {
+            onClick: toggleIsOpen,
+        },
+        ref,
+        targetProps: {
+            isOpen,
+        },
+    };
+}
+export default usePopover;

package/dist/hooks/useServerAction.d.ts

@@ -0,0 +1,9 @@
+interface UseServerActionArgs {
+    onSuccess?: () => void;
+}
+interface UseServerActionReturn {
+    handleClick: () => void;
+    isLoading: boolean;
+}
+declare function useServerAction(fn?: () => Promise<void>, { onSuccess }?: UseServerActionArgs): UseServerActionReturn;
+export default useServerAction;

package/dist/hooks/useServerAction.js

@@ -0,0 +1,15 @@
+import { useTransition } from 'react';
+function useServerAction(fn, { onSuccess } = {}) {
+    const [isLoading, startTransition] = useTransition();
+    function handleClick() {
+        startTransition(async () => {
+            if (!fn) {
+                return;
+            }
+            await fn();
+            onSuccess?.();
+        });
+    }
+    return { handleClick, isLoading };
+}
+export default useServerAction;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
 import type { NavigationObject } from '../../interfaces';
 export interface AppNavigationClassNames {
     root: string;
@@ -7,6 +7,7 @@ export interface AppNavigationClassNames {
     link: HighlightableClassName;
 }
 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 { getClassNames } from '../../../styles/classnames';
 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 = getClassNames(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,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Action from '../../../components/utility/Action';
 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 }) }));
+import MenuItem from '../../../components/utility/MenuItem';
+import Popover from '../../../components/utility/Popover';
+import usePopover from '../../../hooks/usePopover';
+import { getClassNames } from '../../../styles/classnames';
+function AppNavigationItem({ children, classNameKey, classNameProps, classNames, href, isActive, label, }) {
+    const componentClassNames = getClassNames(classNameKey ?? 'appNavigation', { props: classNameProps, states: { isHighlighted: isActive ?? false } }, classNames);
+    const { controlProps, ref, targetProps } = usePopover();
+    if (children?.length) {
+        return (_jsxs("li", { className: componentClassNames?.item, ref: ref, children: [_jsx("button", { className: componentClassNames?.link, type: "button", ...controlProps, children: label }), _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 { ActionObject } from '../../utility/interfaces';
 import type { NavigationObject } from '../interfaces';
-interface NavigationAction extends Action {
-    children?: Action[];
+interface NavigationAction extends ActionObject {
+    children?: ActionObject[];
 }
 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/apply-variants.d.ts

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

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

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

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

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

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

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

package/dist/styles/classnames/index.js

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

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

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

package/dist/styles/classnames/interfaces.js

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

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

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

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

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

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

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

package/dist/styles/icons/config.js

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

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

@@ -0,0 +1,4 @@
+import type { RegisteredIcons } from './config';
+import type { IconComponent } from './interfaces';
+export declare function registerIcons(data: RegisteredIcons): void;
+export declare function getIcon(componentName: keyof RegisteredIcons): IconComponent | null;

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

@@ -0,0 +1,4 @@
+export type IconComponent = React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
+    title?: string;
+    titleId?: string;
+} & React.RefAttributes<SVGSVGElement>>;

package/dist/styles/icons/interfaces.js

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

package/dist/styles/index.d.ts

@@ -1,2 +1,2 @@
-export type { RegisteredClassNames } from './config';
-export { default as tw, twx } from './tw';
+export type { RegisteredClassNames } from './classnames/config';
+export { default as tw, twx } from './classnames/tw';

package/dist/styles/index.js

@@ -1 +1 @@
-export { default as tw, twx } from './tw';
+export { default as tw, twx } from './classnames/tw';

package/dist/styles/styles.css

@@ -0,0 +1,59 @@
+@theme {
+    /* These are defaults that will (probably) be overwritten by the consuming application */
+    --color-primary: var(--color-teal-600);
+    --color-primary-dark: var(--color-teal-700);
+    --color-on-primary: var(--color-white);
+    /* End defaults */
+
+    --color-button-bg: var(--color-primary);
+    --color-button-bg-hover: var(--color-primary-dark);
+    --color-button-text: var(--color-on-primary);
+    --color-link: var(--color-primary);
+    --color-panel: var(--color-white);
+
+    --color-error: var(--color-red-600);
+}
+
+@layer base {
+    button {
+        @apply cursor-pointer;
+    }
+    
+    hr {
+        @apply border-slate-200;
+    }
+
+    input::-webkit-inner-spin-button {
+        @apply appearance-none m-0;
+    }
+
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    small {
+        @apply text-xs;
+    }
+
+    strong {
+        @apply font-semibold;
+    }
+}
+
+@layer utilities {
+    .fade-closed {
+        @apply invisible opacity-0 ease-in-out;
+    }
+
+    .fade-open {
+        @apply transition-discrete transition-all duration-100 starting:opacity-0 visible opacity-100;
+    }
+
+    .show-closed {
+        @apply invisible opacity-0 ease-in-out scale-90;
+    }
+
+    .show-open {
+        @apply transition-discrete transition-all duration-100 starting:opacity-0 starting:scale-90 visible opacity-100 scale-100;
+    }
+}

package/dist/utility/interfaces.d.ts

@@ -1,18 +1,23 @@
 export interface ConfirmableObject {
-    actions?: Omit<Action, 'confirmable'>[];
+    actions?: Omit<ActionObject, 'confirmable'>[];
     confirmText?: string;
     description?: React.ReactNode;
     icon?: React.ReactNode;
     isLoading?: boolean;
     modalIcon?: React.ReactNode;
     onBeforeConfirm?: () => void;
-    onConfirm: () => void;
+    onConfirm?: () => void;
+    onSuccess?: () => Promise<void> | void;
+    redirectOnSuccess?: string | false | ((response: Response) => string | false);
+    refreshOnSuccess?: boolean;
     submitLabel?: string;
-    title?: string;
+    title?: React.ReactNode;
 }
-export interface Action {
-    action?: string;
+export type ActionEvent = React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>;
+export interface ActionObject<Data extends object | null = null> {
+    action?: (data: Data) => Promise<void>;
     confirmable?: ConfirmableObject;
+    data?: Data;
     details?: React.ReactNode;
     href?: string;
     icon?: React.ReactNode;
@@ -20,8 +25,9 @@ export interface Action {
     isLoading?: boolean;
     isSubmittable?: boolean;
     label: React.ReactNode;
-    onClick?: () => void;
-    variant?: ButtonVariant;
+    onClick?: (event?: ActionEvent) => void;
+    searchParams?: Record<string, string>;
+    variant?: StyleVariant[] | StyleVariant;
 }
 export interface NextLayoutProps {
     children: React.ReactNode;
@@ -31,5 +37,10 @@ export interface NextPageProps {
     params?: Promise<Record<string, string>> | null;
     searchParams?: Promise<Record<string, string>> | null;
 }
+export type ReferenceObject = {
+    id?: string;
+    name: string;
+    path?: string;
+    reference?: string;
+};
 export type StyleVariant = 'bordered' | 'danger' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
-export type ButtonVariant = StyleVariant | 'link';