@sqrzro/admin 2.1.0-bz.9 → 2.1.0-r19.3

package/dist/components/List/index.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import clsx from 'clsx';
-import { EmptyMessage } from '@sqrzro/components';
+import { Fragment, Suspense } from 'react';
+import { getLayout } from '../../services/SettingsService';
 import FilterBar from '../FilterBar';
-import ListItem from '../ListItem';
-function defaultTransformer() {
-    return {
-        id: 0,
-        title: '',
-    };
-}
-async function List({ actions, columns, emptyMessageProps, filters, fn, params, renderItem = ListItem, searchParams, transformer, }) {
-    const [response, error] = await fn(params, searchParams);
-    if (error) {
-        return _jsx("div", { children: "Error" });
+import ListComponent from '../ListComponent';
+async function List({ filters, hasSearch, ...props }) {
+    const layout = await getLayout();
+    let searchParams; // eslint-disable-line @typescript-eslint/init-declarations
+    try {
+        const { headers } = await import('next/headers');
+        searchParams = new URLSearchParams((await headers()).get('x-search-params') || '');
+    }
+    catch (err) {
+        searchParams = new URLSearchParams();
     }
-    const data = response.map(transformer || defaultTransformer);
-    const hasFilters = Boolean(Object.keys(searchParams || []).length);
-    return (_jsxs(Fragment, { children: [filters && (data.length || hasFilters) ? _jsx(FilterBar, { map: filters }) : null, data.length ? (_jsx("ul", { className: clsx('relative', columns ? 'grid grid-cols-3 gap-6' : 'flex flex-col gap-4'), children: data.map((item) => renderItem({ actions, ...item })) })) : (_jsx(EmptyMessage, { ...emptyMessageProps }))] }));
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(ListComponent, { ...props, searchParams: searchParams }) })] }));
 }
 export default List;

package/dist/components/ListActions/index.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
-import type { ConfirmableAction } from '@sqrzro/interfaces';
+import type { ConfirmableAction, LinkableAction } from '@sqrzro/interfaces';
+export interface ListAction extends Omit<ConfirmableAction & LinkableAction, 'onClick'> {
+    onClick?: (id: string) => void;
+}
 export interface ListActionsProps {
-    actions: ConfirmableAction<number>[];
-    id: number;
+    actions?: (ListAction | null)[] | ((id: string) => (ListAction | null)[]);
+    id: string;
 }
 declare function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement;
 export default ListActions;

package/dist/components/ListActions/index.js

@@ -1,12 +1,25 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useClickOutside } from '@sqrzro/hooks';
-import ListAction from '../ListAction';
+import Menu from '../Menu';
+function parseHref(href, id) {
+    return href.replace(':id', id);
+}
 function ListActions({ actions, id }) {
     const [isOpen, setIsOpen, ref] = useClickOutside();
+    function handleClick(item) {
+        item.onClick?.(id);
+    }
     function toggleIsOpen() {
         setIsOpen(!isOpen);
     }
-    return (_jsxs("div", { ref: ref, className: "flex flex-row-reverse items-center gap-4", children: [_jsxs("button", { className: "h-4 rotate-90 text-xs leading-[1em] tracking-tighter text-slate-500", onClick: toggleIsOpen, type: "button", children: ["\u2022\u2022\u2022", _jsxs("span", { className: "sr-only", children: [isOpen ? 'Close' : 'Open', " Actions"] })] }), isOpen ? (_jsx("ul", { className: "show relative flex origin-right gap-4 bg-white before:absolute before:left-[-999em] before:right-full before:h-full before:bg-white/80", children: actions.map(({ label, onClick, variant }) => (_jsx("li", { children: _jsx(ListAction, { id: id, label: label, onClick: onClick, variant: variant }) }, label))) })) : null] }));
+    const transformedActions = (typeof actions === 'function' ? actions(id) : actions)
+        .filter(Boolean)
+        .map((item) => ({
+        ...item,
+        href: item.href ? parseHref(item.href, id) : undefined, // eslint-disable-line no-undefined
+        onClick: () => handleClick(item),
+    }));
+    return (_jsxs("div", { ref: ref, className: "relative col-start-4 flex h-5 justify-end self-center pl-4", children: [_jsx("button", { onClick: toggleIsOpen, type: "button", children: _jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 fill-slate-500", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 3a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM10 8.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM11.5 15.5a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z" }) }) }), isOpen ? _jsx(Menu, { actions: transformedActions, align: "right" }) : null] }));
 }
 export default ListActions;

package/dist/components/ListClientComponent/index.d.ts

@@ -0,0 +1,13 @@
+import type { EmptyMessageProps } from '@sqrzro/components';
+import type { ListObject } from '../ListItem';
+export interface ListClientComponentProps<Data = Record<string, unknown>> {
+    actions?: ListObject<Data>['actions'];
+    columns?: number;
+    data: ListObject<Data>[];
+    emptyMessageProps?: EmptyMessageProps;
+    hasFilters?: boolean;
+    isMinimal?: boolean;
+    renderItem?: (props: ListObject<Data>) => React.ReactElement;
+}
+declare function ListClientComponent<Data = Record<string, unknown>>({ actions, columns, data, emptyMessageProps, hasFilters, isMinimal, renderItem, }: Readonly<ListClientComponentProps<Data>>): React.ReactElement;
+export default ListClientComponent;

package/dist/components/ListClientComponent/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { EmptyMessage, tw } from '@sqrzro/components';
+import ListItem from '../ListItem';
+function ListClientComponent({ actions, columns, data, emptyMessageProps, hasFilters, isMinimal, renderItem = ListItem, }) {
+    const componentEmptyMessageProps = hasFilters
+        ? {
+            children: 'Try adjusting the filters above. If you think this is a mistake, please contact your site administrator.',
+            title: 'No results match the current filters',
+        }
+        : emptyMessageProps;
+    return data.length ? (_jsx("ul", { className: tw('relative', columns ? 'grid grid-cols-3 gap-6' : 'flex flex-col gap-4'), children: data.map((item) => (_jsx(Fragment, { children: renderItem({ actions, isMinimal, ...item }) }, item.id))) })) : (_jsx(EmptyMessage, { ...componentEmptyMessageProps, classNameProps: { isMinimal } }));
+}
+export default ListClientComponent;

package/dist/components/ListComponent/index.d.ts

@@ -0,0 +1,13 @@
+import type { Errorable } from '@sqrzro/interfaces';
+import type { ListObject } from '../ListItem';
+import type { ListClientComponentProps } from '../ListClientComponent';
+export interface ListComponentProps<Item, Params> extends Omit<ListClientComponentProps, 'data' | 'hasFilters'> {
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
+    hasFilters?: boolean;
+    hasSearch?: boolean;
+    params?: Params;
+    searchParams?: URLSearchParams;
+    transformer?: (item: Item) => ListObject;
+}
+declare function ListComponent<Item extends object, Params>({ fn, hasFilters, params, searchParams, transformer, ...clientProps }: Readonly<ListComponentProps<Item, Params>>): Promise<React.ReactElement>;
+export default ListComponent;

package/dist/components/ListComponent/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterList } from '../../services/PermissionService';
+import ListClientComponent from '../ListClientComponent';
+function defaultTransformer() {
+    return {
+        id: '',
+        title: '',
+    };
+}
+async function ListComponent({ fn, hasFilters, params, searchParams, transformer, ...clientProps }) {
+    const [response, error] = await fn(params, searchParams);
+    if (!Array.isArray(response)) {
+        throw new Error('Response is not an array. Did you forget to return an Errorable object in the function?');
+    }
+    if (error) {
+        return _jsx("div", { children: "Error" });
+    }
+    const data = await filterList(response.map(transformer || defaultTransformer));
+    return _jsx(ListClientComponent, { data: data, hasFilters: hasFilters, ...clientProps });
+}
+export default ListComponent;

package/dist/components/ListItem/index.d.ts

@@ -1,15 +1,24 @@
-/// <reference types="react" />
-export interface ListObject {
-    actions?: ({ id }: {
-        id: number;
-    }) => React.ReactElement;
+import type { StyleVariant } from '@sqrzro/interfaces';
+export interface ListObject<Data = Record<string, unknown>> {
+    $data?: Data;
+    actions?: (data: Data) => React.ReactNode;
+    description?: React.ReactNode | null;
     href?: string;
-    id: number;
+    id: string;
+    isMinimal?: boolean;
     image?: string | null;
+    imageHref?: string | null;
     meta?: React.ReactNode[] | Record<string, React.ReactNode>;
-    subtitle?: string;
-    title: string;
+    permission?: string;
+    secondary?: {
+        description?: string;
+        meta?: React.ReactNode[];
+        title?: string;
+    };
+    tertiary?: React.ReactNode;
+    title?: React.ReactNode;
+    variant?: StyleVariant;
 }
-export declare function renderMeta(meta: ListObject['meta']): React.ReactElement | null;
-declare function ListItem({ actions: Actions, href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
+export declare function renderMeta(id: string, meta: ListObject['meta']): React.ReactElement | null;
+declare function ListItem<Data = Record<string, unknown>>({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, variant, }: Readonly<ListObject<Data>>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -1,15 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from '@sqrzro/components';
-export function renderMeta(meta) {
+import { isValidElement } from 'react';
+import { Link, tw } from '@sqrzro/components';
+import { filterNull } from '@sqrzro/utility';
+const variantMap = {
+    danger: 'text-red-700',
+};
+function getKey(item) {
+    if (isValidElement(item)) {
+        return item.key;
+    }
+    return String(item);
+}
+export function renderMeta(id, meta) {
     if (!meta) {
         return null;
     }
     if (Array.isArray(meta)) {
-        return (_jsx("ul", { className: "flex items-center gap-4 text-xs text-slate-600", children: meta.map((item) => (_jsx("li", { children: item }, item?.toString()))) }));
+        return (_jsx("ul", { className: "flex items-center gap-4 text-xs text-slate-500", "data-testid": `list-item-meta--${id}`, children: filterNull(meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) }));
     }
     return (_jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { children: Object.entries(meta).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-semibold", children: key }), _jsx("td", { className: "p-2 text-right", children: value || '-' })] }, key))) }) }));
 }
-function ListItem({ actions: Actions, href, id, meta, title, }) {
-    return (_jsx("li", { children: _jsxs("article", { className: "bg-panel overflow-hidden rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [_jsx("h2", { className: "border-b border-slate-200 pb-3 text-lg font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), _jsxs("div", { className: "mt-4 flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+function ListItem({ $data, actions, description, href, id, isMinimal, meta, secondary, tertiary, title, variant, }) {
+    return (_jsx("li", { children: _jsx("article", { className: tw('', isMinimal
+                ? 'border-b border-slate-200 pb-4'
+                : 'bg-panel rounded p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]', variant ? variantMap[variant] : ''), "data-testid": `list-item-root--${id}`, children: _jsxs("div", { className: "grid grid-cols-[3fr_2fr_2fr_auto]", children: [_jsxs("div", { children: [title ? (_jsx("h2", { className: tw('text-base font-semibold', variant === 'danger' ? 'line-through' : ''), "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw('mt-1', isMinimal ? '' : 'flex items-center justify-between'), children: meta ? renderMeta(id, meta) : null })) : null] }), tertiary ? (_jsx("div", { className: "flex h-full flex-col justify-center", children: tertiary })) : null, secondary ? (_jsxs("div", { className: "col-start-3 text-right", children: [secondary.title ? (_jsx("p", { className: tw('text-base font-semibold', variant === 'danger' ? 'line-through' : ''), children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "mt-1 text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "mt-1 flex items-center justify-end gap-4 text-xs text-slate-500", children: filterNull(secondary.meta).map((item) => (_jsx("li", { children: item }, getKey(item)))) })) : null] })) : null, typeof actions === 'function' ? actions($data) : null] }) }) }));
 }
 export default ListItem;

package/dist/components/ListSkeleton/index.d.ts

@@ -0,0 +1,4 @@
+interface ListSkeletonProps {
+}
+declare function ListSkeleton({}: Readonly<ListSkeletonProps>): React.ReactElement;
+export default ListSkeleton;

package/dist/components/ListSkeleton/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ListSkeleton({}) {
+    return (_jsx("div", { className: "relative flex flex-col gap-4", children: Array.from({ length: 4 }).map((item, index) => (_jsxs("div", { className: "grid grid-cols-[auto_auto] grid-rows-[auto_auto] gap-2 rounded bg-white p-4 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [_jsx("div", { className: "h-7 w-64 bg-slate-200" }), _jsx("div", { className: "row-start-2 h-4 w-24 bg-slate-200" }), _jsx("div", { className: "col-start-2 flex justify-end", children: _jsx("div", { className: "col-start-2 h-7 w-24 bg-slate-200" }) }), _jsx("div", { className: "col-start-2 row-start-2 flex justify-end", children: _jsx("div", { className: "h-4 w-36 bg-slate-200" }) })] }, index))) }));
+}
+export default ListSkeleton;

package/dist/components/MeActions/index.d.ts

@@ -1,3 +1,5 @@
-/// <reference types="react" />
-declare function MeActions(): React.ReactElement;
+interface MeActionsProps {
+    logoutButton?: React.ReactNode;
+}
+declare function MeActions({ logoutButton }: Readonly<MeActionsProps>): React.ReactElement;
 export default MeActions;

package/dist/components/MeActions/index.js

@@ -1,13 +1,6 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouter } from 'next/navigation';
-import { logout } from '../../services/AuthService';
-function MeActions() {
-    const router = useRouter();
-    async function handleLogout() {
-        await logout();
-        router.refresh();
-    }
-    return (_jsx("button", { className: "text-xs text-slate-300", onClick: handleLogout, type: "button", children: "Log Out" }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from '@sqrzro/components';
+function MeActions({ logoutButton }) {
+    return (_jsxs("ul", { className: "flex gap-2 text-xs text-slate-300", children: [_jsx("li", { children: _jsx(Link, { href: "/settings", children: "Settings" }) }), _jsx("li", { children: logoutButton })] }));
 }
 export default MeActions;

package/dist/components/MePanel/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 interface MePanelProps {
+    layout?: string;
+    logoutButton?: React.ReactNode;
     user?: {
         name: string;
     } | null;
 }
-declare function MePanel({ user }: Readonly<MePanelProps>): React.ReactElement;
+declare function MePanel({ layout, logoutButton, user }: Readonly<MePanelProps>): React.ReactElement;
 export default MePanel;

package/dist/components/MePanel/index.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
 import MeActions from '../MeActions';
-function MePanel({ user }) {
-    return (_jsxs("div", { className: "ml-auto flex items-center gap-3", children: [_jsxs("div", { className: "flex flex-col items-end text-white", children: [_jsx("strong", { children: user?.name }), _jsx(MeActions, {})] }), _jsx("div", { className: "h-9 w-9 rounded-full border-4 border-slate-500" })] }));
+function MePanel({ layout, logoutButton, user }) {
+    return (_jsxs("div", { className: tw('flex gap-3', layout === 'sidebar' ? 'w-full p-4' : 'ml-auto items-center'), children: [_jsxs("div", { className: tw('flex flex-col gap-0.5 text-white', layout === 'sidebar' ? '' : 'items-end'), children: [_jsx("strong", { children: user?.name }), _jsx(MeActions, { logoutButton: logoutButton })] }), layout === 'sidebar' ? null : (_jsx("div", { className: "h-9 w-9 flex-none rounded-full border-4 border-slate-500" }))] }));
 }
 export default MePanel;

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

@@ -0,0 +1,7 @@
+import type { ConfirmableAction, LinkableAction } from '@sqrzro/interfaces';
+interface MenuProps {
+    actions: (ConfirmableAction & LinkableAction)[];
+    align: 'left' | 'right';
+}
+declare function Menu({ actions, align }: Readonly<MenuProps>): React.ReactElement;
+export default Menu;

package/dist/components/Menu/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputPanel } from '@sqrzro/components';
+import MenuItem from '../MenuItem';
+function Menu({ actions, align }) {
+    return (_jsx(InputPanel, { align: align, children: _jsx("ul", { className: "min-w-44 py-1", children: actions.map((item) => (_jsx("li", { children: _jsx(MenuItem, { ...item }) }, item.label))) }) }));
+}
+export default Menu;

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

@@ -0,0 +1,4 @@
+import type { ConfirmableAction, LinkableAction } from '@sqrzro/interfaces';
+type MenuItemProps = ConfirmableAction & LinkableAction;
+declare function MenuItem({ href, isConfirmable, label, onClick, variant, }: Readonly<MenuItemProps>): React.ReactElement;
+export default MenuItem;

package/dist/components/MenuItem/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmableButton, Link, tw } from '@sqrzro/components';
+const classMap = {
+    danger: 'text-red-700',
+    error: 'text-red-700',
+    info: 'text-sky-700',
+    warning: 'text-yellow-700',
+    success: 'text-green-700',
+};
+function MenuItem({ href, isConfirmable, label, onClick, variant, }) {
+    const classNames = tw('block w-full whitespace-nowrap px-3 py-1.5 text-left text-sm text-slate-700', variant ? classMap[variant] : null);
+    if (!href) {
+        if (isConfirmable) {
+            return (_jsx(ConfirmableButton, { classNames: { root: { default: classNames } }, onClick: onClick, type: "button", children: label }));
+        }
+        return (_jsx("button", { className: classNames, onClick: onClick, type: "button", children: label }));
+    }
+    return (_jsx(Link, { className: classNames, href: href, onClick: onClick, children: label }));
+}
+export default MenuItem;

package/dist/components/Page/index.d.ts

@@ -1,12 +1,13 @@
-/// <reference types="react" />
 import type { LinkableAction } from '@sqrzro/interfaces';
+import type { NavigationAction } from '../../interfaces';
 export interface PageProps {
     actions?: LinkableAction[];
     basePath?: string;
     children: React.ReactNode;
+    icon?: string;
     isFullWidth?: boolean;
-    tabs?: LinkableAction[];
+    tabs?: (NavigationAction | null)[];
     title: string;
 }
-declare function Page({ basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): React.ReactElement;
+declare function Page({ basePath, children, icon, isFullWidth, tabs, title, }: Readonly<PageProps>): Promise<React.ReactElement>;
 export default Page;

package/dist/components/Page/index.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import { Container } from '@sqrzro/components';
+import { Container, tw } from '@sqrzro/components';
+import { filterNull } from '@sqrzro/utility';
+import { getLayout } from '../../services/SettingsService';
 import Tabs from '../Tabs';
-function Page({ basePath, children, isFullWidth, tabs, title, }) {
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-slate-800 pb-16 text-white", children: _jsxs(Container, { isFullWidth: isFullWidth, children: [_jsxs("div", { className: "flex items-center justify-between py-10", children: [_jsx("h1", { className: "min-h-10 text-3xl font-semibold", children: title }), _jsx("div", { id: "page-actions" })] }), tabs ? (_jsx("div", { className: "-mt-4 mb-8", children: _jsx(Tabs, { basePath: basePath, data: tabs }) })) : null] }) }), _jsx(Container, { isFullWidth: isFullWidth, children: _jsx("div", { className: "-mt-16 flex flex-col gap-8", children: children }) })] }));
+async function Page({ basePath, children, icon, isFullWidth, tabs, title, }) {
+    const layout = await getLayout();
+    return (_jsxs(Fragment, { children: [_jsx("header", { className: tw(layout === 'sidebar' ? 'bg-slate-200' : 'bg-slate-800 pb-16 text-white'), children: _jsxs(Container, { isFullWidth: layout === 'sidebar' || isFullWidth, children: [_jsxs("div", { className: tw('flex items-center justify-between', layout === 'sidebar' ? 'py-8' : 'py-10'), children: [_jsxs("h1", { className: "flex min-h-10 items-center text-3xl font-semibold", children: [icon ? (_jsx("i", { className: tw('mr-3 h-10 w-10 rounded-full border-4 border-blue-300/50 bg-blue-300 bg-clip-padding', icon) })) : null, title] }), _jsx("div", { className: "flex gap-2", id: "page-actions" })] }), tabs ? (_jsx("div", { className: tw('', layout === 'sidebar' ? '' : '-mt-4 mb-8 border-b border-slate-700'), children: _jsx(Tabs, { basePath: basePath, data: filterNull(tabs) }) })) : null] }) }), _jsx(Container, { isFullWidth: layout === 'sidebar' || isFullWidth, children: _jsx("div", { className: tw('@container flex flex-col gap-8', layout === 'sidebar' ? 'mt-8' : '-mt-16'), children: children }) })] }));
 }
 export default Page;

package/dist/components/PageActions/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PageActionsProps {
     children: React.ReactNode;
 }

package/dist/components/PaginatedList/index.d.ts

@@ -0,0 +1,8 @@
+import type { FilterObject } from '../FilterBar';
+import type { PaginatedListComponentProps } from '../PaginatedListComponent';
+export interface PaginatedListProps<Item extends object, Params> extends Omit<PaginatedListComponentProps<Item, Params>, 'actions'> {
+    actions?: (data: Record<string, unknown>) => React.ReactNode;
+    filters?: FilterObject[];
+}
+declare function PaginatedList<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<PaginatedListProps<Item, Params>>): Promise<React.ReactElement>;
+export default PaginatedList;

package/dist/components/PaginatedList/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import { getLayout } from '../../services/SettingsService';
+import FilterBar from '../FilterBar';
+import PaginatedListComponent from '../PaginatedListComponent';
+async function PaginatedList({ filters, hasSearch, ...props }) {
+    const layout = await getLayout();
+    let searchParams; // eslint-disable-line @typescript-eslint/init-declarations
+    try {
+        const { headers } = await import('next/headers');
+        searchParams = new URLSearchParams((await headers()).get('x-search-params') || '');
+    }
+    catch (err) {
+        searchParams = new URLSearchParams();
+    }
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(PaginatedListComponent, { ...props, searchParams: searchParams }) })] }));
+}
+export default PaginatedList;

package/dist/components/PaginatedListComponent/index.d.ts

@@ -0,0 +1,13 @@
+import type { Errorable, Paginated } from '@sqrzro/interfaces';
+import type { ListObject } from '../ListItem';
+import type { ListClientComponentProps } from '../ListClientComponent';
+export interface PaginatedListComponentProps<Item, Params> extends Omit<ListClientComponentProps, 'data' | 'hasFilters'> {
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Paginated<Item>>>;
+    hasFilters?: boolean;
+    hasSearch?: boolean;
+    params?: Params;
+    searchParams?: URLSearchParams;
+    transformer?: (item: Item) => ListObject;
+}
+declare function PaginatedListComponent<Item extends object, Params>({ fn, hasFilters, params, searchParams, transformer, ...clientProps }: Readonly<PaginatedListComponentProps<Item, Params>>): Promise<React.ReactElement>;
+export default PaginatedListComponent;

package/dist/components/PaginatedListComponent/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { filterList } from '../../services/PermissionService';
+import ListClientComponent from '../ListClientComponent';
+import Pagination from '../Pagination';
+function defaultTransformer() {
+    return {
+        id: '',
+        title: '',
+    };
+}
+async function PaginatedListComponent({ fn, hasFilters, params, searchParams, transformer, ...clientProps }) {
+    const [response, error] = await fn(params, searchParams);
+    if (error) {
+        return _jsx("div", { children: "Error" });
+    }
+    const data = await filterList(response.data.map(transformer || defaultTransformer));
+    return (_jsxs(Fragment, { children: [_jsx(ListClientComponent, { data: data, hasFilters: hasFilters, ...clientProps }), _jsx(Pagination, { ...response.meta })] }));
+}
+export default PaginatedListComponent;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,7 @@
+interface PaginationProps {
+    limit: number;
+    page: number;
+    total: number;
+}
+declare function Pagination({ limit, page, total }: Readonly<PaginationProps>): React.ReactElement | null;
+export default Pagination;

package/dist/components/Pagination/index.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, tw } from '@sqrzro/components';
+import { usePathname, useSearchParams } from 'next/navigation';
+import PaginationItem, { getLink } from '../PaginationItem';
+function getOffsetPage(pageCount, page) {
+    if (page === 1) {
+        return 2;
+    }
+    if (page === pageCount) {
+        return pageCount - 1;
+    }
+    return page;
+}
+let spaceIndex = 0;
+function getLinks(pageCount, page) {
+    const offsetPage = getOffsetPage(pageCount, page);
+    const set = new Set([1, offsetPage - 1, offsetPage, offsetPage + 1, pageCount]);
+    return Array.from(set)
+        .filter((item) => item > 0 && item <= pageCount)
+        .reduce((acc, cur, index, arr) => {
+        if (arr[index + 1] && arr[index + 1] !== cur + 1) {
+            spaceIndex -= 1;
+            return [...acc, cur, spaceIndex];
+        }
+        return [...acc, cur];
+    }, []);
+}
+function Pagination({ limit, page, total }) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const pageCount = Math.ceil(total / limit);
+    if (pageCount <= 1) {
+        return null;
+    }
+    const links = getLinks(pageCount, page);
+    const linkClass = tw('inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-md px-4 py-2 pl-2.5 text-sm font-medium hover:bg-slate-100');
+    return (_jsxs("nav", { className: "mx-auto flex w-full justify-between", children: [_jsx(Link, { className: tw(linkClass, page <= 1 ? 'pointer-events-none opacity-30' : ''), href: getLink(pathname, searchParams, page - 1), children: "\u2190 Previous" }), _jsx("ul", { className: "flex flex-row items-center gap-1", children: links.map((item) => (_jsx("li", { children: _jsx(PaginationItem, { currentPage: page || 1, number: item, pathname: pathname, searchParams: searchParams }) }, item))) }), _jsx(Link, { className: tw(linkClass, page >= pageCount ? 'pointer-events-none opacity-30' : ''), href: getLink(pathname, searchParams, page + 1), children: "Next \u2192" })] }));
+}
+export default Pagination;

package/dist/components/PaginationItem/index.d.ts

@@ -0,0 +1,9 @@
+export declare function getLink(pathname: string, searchParams: URLSearchParams, page: number): string;
+interface PaginationItemProps {
+    currentPage: number;
+    number: number;
+    pathname: string;
+    searchParams: URLSearchParams;
+}
+declare function PaginationItem({ currentPage, number, pathname, searchParams, }: Readonly<PaginationItemProps>): React.ReactElement;
+export default PaginationItem;

package/dist/components/PaginationItem/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, tw } from '@sqrzro/components';
+export function getLink(pathname, searchParams, page) {
+    const newSearchParams = new URLSearchParams(searchParams.toString());
+    newSearchParams.set('page', page.toString());
+    return `${pathname}?${newSearchParams.toString()}`;
+}
+function PaginationItem({ currentPage, number, pathname, searchParams, }) {
+    if (number < 0) {
+        return (_jsx("span", { className: "flex h-9 w-9 items-center justify-center text-xs text-slate-400", children: "\u2022\u2022\u2022" }));
+    }
+    return (_jsx(Link, { className: tw('inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md border text-sm font-medium hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-30', number === currentPage
+            ? 'border-slate-200 bg-white shadow-sm'
+            : 'border-transparent'), href: getLink(pathname, searchParams, number), children: number }));
+}
+export default PaginationItem;

package/dist/components/Panel/index.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import type { LinkableAction } from '@sqrzro/interfaces';
 export interface PanelProps {
+    action?: LinkableAction | React.ReactElement;
     children: React.ReactNode;
     title?: string;
 }
-declare function Panel({ children, title }: Readonly<PanelProps>): React.ReactElement;
+declare function Panel({ action, children, title }: Readonly<PanelProps>): React.ReactElement;
 export default Panel;

package/dist/components/Panel/index.js

@@ -1,5 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Panel({ children, title }) {
-    return (_jsxs("article", { className: "bg-panel relative overflow-hidden rounded p-6 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [title ? (_jsx("h3", { className: "mb-4 border-b border-slate-200 pb-3 text-lg font-semibold leading-none", children: title })) : null, children] }));
+import { Button } from '@sqrzro/components';
+import { isValidElement } from 'react';
+function renderAction(action) {
+    if (typeof action === 'object' && 'href' in action && 'label' in action) {
+        return _jsx(Button, { href: action.href, children: action.label });
+    }
+    if (isValidElement(action)) {
+        return action;
+    }
+    return null;
+}
+function Panel({ action, children, title }) {
+    return (_jsxs("article", { className: "@container bg-panel relative rounded p-6 shadow-[0px_0px_0px_1px_rgba(9,9,11,0.07),0px_2px_2px_0px_rgba(9,9,11,0.05)]", children: [title ? (_jsxs("header", { className: "-mt-6 mb-4 flex h-16 items-center justify-between border-b border-slate-200", children: [_jsx("h3", { className: "text-lg font-semibold leading-none", children: title }), action ? renderAction(action) : null] })) : null, children] }));
 }
 export default Panel;

package/dist/components/RootLayout/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import type { Config as ConfigObject } from '../../services/ConfigService';
 export interface RootLayoutProps {
     children: React.ReactNode;
     config?: ConfigObject;
+    font?: string;
     logo?: () => React.ReactElement;
 }
-declare function RootLayout({ children, config, logo }: Readonly<RootLayoutProps>): React.ReactElement;
+declare function RootLayout({ children, config, font, logo, }: Readonly<RootLayoutProps>): React.ReactElement;
 export default RootLayout;

package/dist/components/RootLayout/index.js

@@ -1,21 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense } from 'react';
-import { Inter as getInter } from 'next/font/google';
-import clsx from 'clsx';
-import { ClassNames, Toaster } from '@sqrzro/components';
+/* eslint-disable react/no-danger */
+import { ClassNames, Toaster, tw } from '@sqrzro/components';
 import { setConfig } from '../../services/ConfigService';
 import classNames from '../../styles/config';
 import Config from '../Config';
-const inter = getInter({
-    subsets: ['latin'],
-    variable: '--font-inter',
-});
-function RootLayout({ children, config, logo }) {
+function RootLayout({ children, config, font, logo, }) {
     if (config) {
         setConfig(config, logo);
     }
-    return (_jsxs("html", { lang: "en", children: [_jsx("head", {}), _jsxs("body", { className: clsx(inter.variable, 'has-[[data-modal][open]]:overflow-hidden overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800'), children: [_jsx("script", { dangerouslySetInnerHTML: {
-                            __html: `(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))`,
-                        } }), _jsx(Config, { data: config }), _jsx(ClassNames, { data: classNames }), children, _jsx(Suspense, { fallback: null, children: _jsx(Toaster, {}) })] })] }));
+    return (_jsxs("html", { lang: "en", children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: tw(font, 'overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800 has-[[data-modal][open]]:overflow-hidden'), children: [_jsx("script", { dangerouslySetInnerHTML: {
+                            __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
+                        } }), _jsx(Config, { data: config }), _jsx(ClassNames, { data: classNames }), children, _jsx(Toaster, {})] })] }));
 }
 export default RootLayout;

package/dist/components/SettingsForm/index.d.ts

@@ -0,0 +1,6 @@
+import type { SettingsFormFields } from '../../services/SettingsService';
+interface SettingsFormProps {
+    defaults: Partial<SettingsFormFields>;
+}
+declare function SettingsForm({ defaults }: Readonly<SettingsFormProps>): React.ReactElement;
+export default SettingsForm;