@sqrzro/admin 2.1.0-bz.17 → 2.1.0-bz.19

package/dist/components/AppLayout/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container, Link, tw } from '@sqrzro/components';
+import { Link, tw } from '@sqrzro/components';
 import { getConfig } from '../../services/ConfigService';
-import { getLayout } from '../../services/LayoutService';
+import { getLayout } from '../../services/SettingsService';
 import AppNavigation from '../AppNavigation';
 import MePanel from '../MePanel';
 async function AppLayout({ children, user }) {
     const config = getConfig();
     const layout = await getLayout();
-    return (_jsxs("div", { className: tw('', layout === 'sidebar' ? 'grid grid-cols-[12rem_1fr]' : null), children: [_jsx("header", { className: "bg-slate-800", children: _jsx(Container, { isFullWidth: true, children: _jsxs("div", { className: tw('flex  items-center', layout === 'sidebar'
-                            ? 'h-screen flex-col py-4'
-                            : 'h-16 border-b border-slate-700'), children: [_jsxs(Link, { className: tw(layout === 'sidebar' ? 'h-12 w-12' : 'h-9 w-9'), href: "/", children: [config.logo?.(), _jsx("span", { className: "sr-only", children: config.app.name })] }), _jsx(AppNavigation, { layout: layout }), _jsx(MePanel, { user: user })] }) }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
+    return (_jsxs("div", { className: tw('', layout === 'sidebar' ? 'grid grid-cols-[12rem_1fr]' : null), children: [_jsx("header", { className: "bg-slate-800", children: _jsxs("div", { className: tw('flex items-center', layout === 'sidebar'
+                        ? 'h-screen flex-col'
+                        : 'h-16 border-b border-slate-700 px-4'), children: [_jsxs(Link, { className: tw(layout === 'sidebar' ? 'my-7 h-12 w-12' : 'h-9 w-9'), href: "/", children: [config.logo?.(), _jsx("span", { className: "sr-only", children: config.app.name })] }), _jsx(AppNavigation, { layout: layout }), _jsx(MePanel, { layout: layout, user: user })] }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
 }
 export default AppLayout;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 interface AppNavigationProps {
-    layout: string;
+    layout?: string;
 }
-declare function AppNavigation({ layout }: Readonly<AppNavigationProps>): React.ReactElement;
+declare function AppNavigation({ layout, }: Readonly<AppNavigationProps>): Promise<React.ReactElement>;
 export default AppNavigation;

package/dist/components/AppNavigation/index.js

@@ -1,16 +1,8 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Link, tw } from '@sqrzro/components';
-import { useNavigation } from '@sqrzro/hooks';
 import { getConfig } from '../../services/ConfigService';
-function getNavigation() {
-    const { navigation } = getConfig();
-    return Object.entries(navigation).map(([href, label]) => ({ href, label }));
-}
-function AppNavigation({ layout }) {
-    const navigation = useNavigation(getNavigation());
-    return (_jsx("nav", { className: "h-full pl-6", children: _jsx("ul", { className: tw('flex h-full gap-2', layout === 'sidebar' ? 'flex-col items-start' : 'items-center'), children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: tw(layout === 'sidebar' ? null : 'h-full'), children: _jsx(Link, { className: tw('relative flex h-full items-center px-1 font-semibold', isActive
-                        ? 'before:bg-primary text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1'
-                        : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
+import { filterList } from '../../services/PermissionService';
+import AppNavigationComponent from '../AppNavigationComponent';
+async function AppNavigation({ layout, }) {
+    return (_jsx(AppNavigationComponent, { data: await filterList(getConfig().navigation), layout: layout }));
 }
 export default AppNavigation;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface ConfigNavigationObject {
+    href: string;
+    label: string;
+    permission?: string;
+}
+interface AppNavigationComponentProps {
+    data: ConfigNavigationObject[];
+    layout?: string;
+}
+declare function AppNavigationComponent({ data, layout, }: Readonly<AppNavigationComponentProps>): React.ReactElement;
+export default AppNavigationComponent;

package/dist/components/AppNavigationComponent/index.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link, tw } from '@sqrzro/components';
+import useNavigation from '../../hooks/useNavigation';
+function getActiveClassNames(layout) {
+    if (layout === 'sidebar') {
+        return 'bg-slate-700 text-white';
+    }
+    return 'before:bg-primary text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1';
+}
+function AppNavigationComponent({ data, layout, }) {
+    const navigation = useNavigation(data);
+    return (_jsx("nav", { className: tw('h-full', layout === 'sidebar' ? 'w-full' : 'pl-6'), children: _jsx("ul", { className: tw('flex h-full gap-4', layout === 'sidebar' ? 'flex-col items-start' : 'items-center'), children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: tw(layout === 'sidebar' ? 'w-full' : 'h-full'), children: _jsx(Link, { className: tw(layout === 'sidebar'
+                        ? 'block px-4 py-3'
+                        : 'relative flex h-full items-center px-1 font-semibold', isActive
+                        ? getActiveClassNames(layout)
+                        : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
+}
+export default AppNavigationComponent;

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

@@ -1,5 +1,10 @@
-/// <reference types="react" />
-import type { AuthProps as AuthComponentProps } from '@sqrzro/components';
-export type AuthProps = AuthComponentProps;
-declare function Auth(props: AuthComponentProps): JSX.Element;
-export default Auth;
+declare const classNames: {
+    root: string;
+    logo: string;
+    panel: string;
+    title: string;
+    link: string;
+    actions: string;
+    footer: string;
+};
+export default classNames;

package/dist/components/Auth/index.js

@@ -1,5 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Auth as AuthComponent } from '@sqrzro/components';
 const classNames = {
     root: 'bg-slate-800 gap-8',
     logo: 'mx-auto flex h-12 w-32 items-end',
@@ -9,7 +7,4 @@ const classNames = {
     actions: 'pt-2 w-full',
     footer: '-mb-2',
 };
-function Auth(props) {
-    return _jsx(AuthComponent, { ...props, classNames: classNames });
-}
-export default Auth;
+export default classNames;

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

@@ -2,7 +2,7 @@
 import type { StyleVariant } from '@sqrzro/interfaces';
 export interface BadgeProps {
     children: React.ReactNode;
-    variant: StyleVariant;
+    variant?: StyleVariant | null;
 }
 declare function Badge({ children, variant }: Readonly<BadgeProps>): React.ReactElement;
 export default Badge;

package/dist/components/Badge/index.js

@@ -8,13 +8,13 @@ const classMap = {
     success: 'bg-green-100 text-green-700',
 };
 const dotMap = {
-    danger: 'fill-red-500',
-    error: 'fill-red-500',
-    info: 'fill-sky-500',
-    warning: 'fill-yellow-500',
-    success: 'fill-green-500',
+    danger: 'fill-red-400',
+    error: 'fill-red-400',
+    info: 'fill-sky-400',
+    warning: 'fill-yellow-400',
+    success: 'fill-green-400',
 };
 function Badge({ children, variant }) {
-    return (_jsxs("strong", { className: tw('inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium', classMap[variant]), children: [_jsx("svg", { "aria-hidden": "true", className: tw('h-1.5 w-1.5', dotMap[variant]), viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
+    return (_jsxs("strong", { className: tw('inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600', variant ? classMap[variant] : null), "data-testid": "badge-root", children: [_jsx("svg", { "aria-hidden": "true", className: tw('h-1.5 w-1.5 fill-slate-400', variant ? dotMap[variant] : null), viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
 }
 export default Badge;

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

@@ -3,7 +3,8 @@ import type { FilterObject } from '../FilterBarItem';
 export type { FilterObject } from '../FilterBarItem';
 export interface FilterBarProps {
     hasSearch?: boolean;
+    layout?: string;
     map?: FilterObject[];
 }
-declare function FilterBar({ hasSearch, map }: Readonly<FilterBarProps>): React.ReactElement;
+declare function FilterBar({ hasSearch, layout, map }: Readonly<FilterBarProps>): React.ReactElement;
 export default FilterBar;

package/dist/components/FilterBar/index.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { TextInput } from '@sqrzro/components';
+import { TextInput, tw } from '@sqrzro/components';
 import { useFilters } from '@sqrzro/hooks';
 import { useRouter } from 'next/navigation';
+import FilterBarClearButton from '../FilterBarClearButton';
 import FilterBarItem from '../FilterBarItem';
-function FilterBar({ hasSearch, map }) {
+function FilterBar({ hasSearch, layout, map }) {
     const router = useRouter();
     const [filters, setFilter] = useFilters();
     const [search, setSearch] = useState(filters.get('search') || '');
@@ -16,11 +17,23 @@ function FilterBar({ hasSearch, map }) {
     function handleSearchChange(event) {
         setSearch(event.target.value || '');
     }
+    function handleSearchClear() {
+        setSearch('');
+        setFilter('search', '');
+    }
     function handleSearchKeyDown(event) {
         if (event.key === 'Enter') {
             setFilter('search', event.currentTarget.value);
         }
     }
-    return (_jsxs("ul", { className: "relative flex gap-2 before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800", children: [hasSearch ? (_jsx("li", { children: _jsx(TextInput, { name: "search", onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, value: search }) })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
+    return (_jsxs("ul", { className: tw('flex gap-2', layout === 'sidebar'
+            ? ''
+            : 'relative before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800'), children: [hasSearch ? (_jsxs("li", { className: "relative", children: [_jsx(TextInput, { classNames: {
+                            root: {
+                                default: tw('h-8 w-56 rounded-full border border-slate-400  px-3 text-xs text-white placeholder:text-slate-300', filters.get('search')
+                                    ? 'bg-slate-700'
+                                    : 'bg-transparent focus:bg-slate-700'),
+                            },
+                        }, name: "search", onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, placeholder: "Search...", value: search }), filters.get('search') ? (_jsx(FilterBarClearButton, { onClick: handleSearchClear })) : null] })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
 }
 export default FilterBar;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface FilterBarClearButtonProps {
+    onClick: () => void;
+}
+declare function FilterBarClearButton({ onClick, }: Readonly<FilterBarClearButtonProps>): React.ReactElement;
+export default FilterBarClearButton;

package/dist/components/FilterBarClearButton/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function FilterBarClearButton({ onClick, }) {
+    return (_jsxs("button", { className: "absolute right-0 top-0 flex h-full w-10 select-none items-center justify-center", onClick: onClick, type: "button", children: [_jsx("span", { className: "sr-only", children: "Remove" }), _jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white leading-none text-slate-800", children: "\u00D7" })] }));
+}
+export default FilterBarClearButton;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-import type { SimpleObject } from '@sqrzro/interfaces';
 export type FilterType = 'boolean' | 'date' | 'dropdown';
 export interface FilterObject {
-    data?: SimpleObject[];
+    data?: {
+        id: string;
+        name: string;
+    }[];
     label: string;
     name: string;
     type: FilterType;

package/dist/components/FilterBarItem/index.js

@@ -5,6 +5,7 @@ import { tw } from '@sqrzro/components';
 import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
 import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
 import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
+import FilterBarClearButton from '../FilterBarClearButton';
 const map = {
     boolean: { component: BooleanFilter, renderValue: renderBooleanValue },
     date: {
@@ -26,6 +27,6 @@ function FilterBarItem({ data, label, name, onChange, type, value, }) {
         onChange(name, '');
     }
     const { component: FilterComponent, renderValue, size, transformValue } = map[type];
-    return (_jsxs("li", { className: tw('relative inline-flex gap-2 rounded-full border px-5 py-2 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-400', value ? 'bg-slate-700 pr-10' : 'text-slate-300'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("button", { className: tw('absolute left-0 top-0 h-full select-none text-transparent', value ? 'right-10' : 'right-0'), id: `${name}-control`, popovertarget: `${name}-target`, type: "button", children: "Edit" }), value ? (_jsxs("button", { className: "absolute right-0 top-0 flex h-full w-10 select-none items-center justify-center", onClick: handleClear, type: "button", children: [_jsx("span", { className: "sr-only", children: "Remove" }), _jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded-full bg-white leading-none text-slate-800", children: "\u00D7" })] })) : null, _jsx("div", { ref: panel, anchor: `${name}-control`, className: tw('show left-[anchor(left)] top-[anchor(bottom)] -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE), id: `${name}-target`, popover: "auto", children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
+    return (_jsxs("li", { className: tw('relative inline-flex h-8 items-center gap-2 rounded-full border px-5 text-xs text-white', value ? 'border-solid border-slate-400' : 'border-dashed border-slate-400', value ? 'bg-slate-700 pr-10' : 'text-slate-300'), children: [_jsx("p", { className: "", children: label }), value ? (_jsx("p", { className: "border-l border-l-slate-300 pl-2 font-semibold", children: renderValue(value, data) })) : null, _jsx("button", { className: tw('absolute left-0 top-0 h-full select-none text-transparent', value ? 'right-10' : 'right-0'), id: `${name}-control`, popovertarget: `${name}-target`, type: "button", children: "Edit" }), value ? _jsx(FilterBarClearButton, { onClick: handleClear }) : null, _jsx("div", { ref: panel, anchor: `${name}-control`, className: tw('show left-[anchor(left)] top-[anchor(bottom)] -ml-px mt-2 origin-top-left origin-top-left rounded bg-white shadow-lg', size || DEFAULT_SIZE), id: `${name}-target`, popover: "auto", children: _jsx("div", { className: "py-1", role: "none", children: _jsx(FilterComponent, { data: data, name: name, onChange: handleChange, value: transformValue ? transformValue(value) : value }) }) })] }));
 }
 export default FilterBarItem;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ListProps } from '../List';
-export type GridListProps<Item, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
+export type GridListProps<Item extends object, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
 declare function GridList<Item extends object, Params>(props: GridListProps<Item, Params>): React.ReactElement;
 export default GridList;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { ListObject } from '../ListItem';
-declare function GridListItem({ actions: Actions, href, id, image, imageHref, meta, subtitle, title, }: Readonly<ListObject>): React.ReactElement;
+declare function GridListItem({ description, href, id, image, imageHref, meta, title, }: Readonly<ListObject>): React.ReactElement;
 export default GridListItem;

package/dist/components/GridListItem/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Link } from '@sqrzro/components';
 import { renderMeta } from '../ListItem';
-function GridListItem({ actions: Actions, href, id, image, imageHref, meta, subtitle, title, }) {
-    return (_jsx("li", { children: _jsxs("article", { className: "bg-panel overflow-hidden rounded p-4 shadow", children: [_jsx("div", { className: "relative mb-4 h-64 rounded border border border-slate-300 bg-slate-50 p-4", children: image ? (_jsxs(Fragment, { children: [_jsx("img", { alt: "", className: "h-full w-full object-contain", src: image }), imageHref ? (_jsx(Link, { className: "absolute inset-0", href: imageHref, scroll: false, children: _jsx("span", { className: "sr-only", children: "Edit Image" }) })) : null] })) : imageHref ? (_jsxs(Link, { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 font-semibold text-slate-500", href: imageHref, scroll: false, children: [_jsx("i", { className: "block h-12 w-12 rounded-full border-2 border-slate-300" }), "Add Image"] })) : null }), _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), subtitle ? _jsx("p", { className: "text-xs text-slate-500", children: subtitle }) : null, meta ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx("div", { className: "flex items-center justify-between", children: meta ? renderMeta(meta) : null })] })) : null, href ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx(Link, { href: href, scroll: false, children: "Edit" })] })) : null] }) }));
+function GridListItem({ description, href, id, image, imageHref, meta, title, }) {
+    return (_jsx("li", { children: _jsxs("article", { className: "bg-panel overflow-hidden rounded p-4 shadow", children: [_jsx("div", { className: "relative mb-4 h-64 rounded border border border-slate-300 bg-slate-50 p-4", children: image ? (_jsxs(Fragment, { children: [_jsx("img", { alt: "", className: "h-full w-full object-contain", src: image }), imageHref ? (_jsx(Link, { className: "absolute inset-0", href: imageHref, scroll: false, children: _jsx("span", { className: "sr-only", children: "Edit Image" }) })) : null] })) : imageHref ? (_jsxs(Link, { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 font-semibold text-slate-500", href: imageHref, scroll: false, children: [_jsx("i", { className: "block h-12 w-12 rounded-full border-2 border-slate-300" }), "Add Image"] })) : null }), _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), description ? _jsx("p", { className: "text-xs text-slate-500", children: description }) : null, meta ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx("div", { className: "flex items-center justify-between", children: meta ? renderMeta(id, meta) : null })] })) : null, href ? (_jsxs(Fragment, { children: [_jsx("hr", { className: "my-4" }), _jsx(Link, { href: href, scroll: false, children: "Edit" })] })) : null] }) }));
 }
 export default GridListItem;

package/dist/components/InfoPanel/index.js

@@ -1,22 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tw } from '@sqrzro/components';
-import Icon from '../Icon';
-const iconTypeMap = {
-    danger: 'danger',
-    info: 'info',
-    success: 'success',
-    warning: 'warning',
+const iconClassMap = {
+    danger: 'bg-[url(/admin/images/danger.svg)]',
+    info: 'bg-[url(/admin/images/info.svg)]',
+    success: 'bg-[url(/admin/images/success.svg)]',
+    warning: 'bg-[url(/admin/images/warning.svg)]',
 };
 const classMap = {
-    danger: 'bg-red-50 text-red-700',
-    info: 'bg-sky-50 text-sky-700',
-    success: 'bg-green-50 text-green-700',
-    warning: 'bg-yellow-50 text-yellow-700',
+    danger: 'bg-red-100 text-red-700',
+    info: 'bg-sky-100 text-sky-700',
+    success: 'bg-green-100 text-green-700',
+    warning: 'bg-yellow-100 text-yellow-700',
 };
-function mapVariantToIconType(variant) {
-    return iconTypeMap[variant] || 'info';
-}
 function InfoPanel({ children, variant = 'info' }) {
-    return (_jsxs("aside", { className: tw('grid grid-cols-[1rem_auto] gap-4 rounded p-4', classMap[variant]), children: [_jsx(Icon, { type: mapVariantToIconType(variant) }), _jsx("div", { children: children })] }));
+    return (_jsxs("aside", { className: tw('flex gap-2 rounded p-4', classMap[variant]), children: [_jsx("i", { className: tw('aspect-square w-5 flex-none bg-contain bg-no-repeat', iconClassMap[variant]) }), _jsx("div", { children: children })] }));
 }
 export default InfoPanel;

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

@@ -1,25 +1,8 @@
 /// <reference types="react" />
-import type { EmptyMessageProps } from '@sqrzro/components';
-import type { Errorable } from '@sqrzro/interfaces';
 import type { FilterObject } from '../FilterBar';
-import type { ListObject } from '../ListItem';
-export interface ListComponentProps {
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-}
-export interface ListProps<Item, Params> {
-    actions?: ({ id }: {
-        readonly id: number;
-    }) => React.ReactElement;
-    columns?: number;
-    emptyMessageProps?: EmptyMessageProps;
+import type { ListComponentProps } from '../ListComponent';
+export interface ListProps<Item extends object, Params> extends ListComponentProps<Item, Params> {
     filters?: FilterObject[];
-    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
-    hasSearch?: boolean;
-    isMinimal?: boolean;
-    renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Params;
-    transformer?: (item: Item) => ListObject;
 }
-declare function List<Item extends object, Params>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
+declare function List<Item extends object, Params>({ filters, hasSearch, ...props }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
 export default List;

package/dist/components/List/index.js

@@ -1,20 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { EmptyMessage, tw } 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: '',
-    };
-}
+import ListComponent from '../ListComponent';
+import ListSkeleton from '../ListSkeleton';
 const reservedSearchParams = ['action'];
 function checkHasFilters(searchParams) {
     return Array.from(searchParams.entries()).some(([key, value]) => !reservedSearchParams.includes(key) && Boolean(value));
 }
-async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem = ListItem, transformer, }) {
-    let searchParams;
+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(headers().get('x-search-params') || '');
@@ -22,18 +18,6 @@ async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearc
     catch (err) {
         searchParams = new URLSearchParams();
     }
-    const [response, error] = await fn(params, searchParams);
-    if (error) {
-        return _jsx("div", { children: "Error" });
-    }
-    const data = response.map(transformer || defaultTransformer);
-    const hasFilters = checkHasFilters(searchParams);
-    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 (_jsxs(Fragment, { children: [(filters || hasSearch) && (data.length || hasFilters) ? (_jsx(FilterBar, { hasSearch: hasSearch, map: filters })) : null, data.length ? (_jsx("ul", { className: tw('relative', columns ? 'grid grid-cols-3 gap-6' : 'flex flex-col gap-4'), children: data.map((item) => renderItem({ actions, ...item })) })) : (_jsx(EmptyMessage, { ...componentEmptyMessageProps, classNameProps: { isMinimal } }))] }));
+    return (_jsxs(Fragment, { children: [filters || hasSearch ? (_jsx(FilterBar, { hasSearch: hasSearch, layout: layout, map: filters })) : null, _jsx(Suspense, { fallback: _jsx(ListSkeleton, {}), children: _jsx(ListComponent, { ...props, searchParams: searchParams }) })] }));
 }
 export default List;

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

@@ -1,8 +1,11 @@
 /// <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[];
+    id: string;
 }
 declare function ListActions({ actions, id }: Readonly<ListActionsProps>): React.ReactElement;
 export default ListActions;

package/dist/components/ListActions/index.js

@@ -1,12 +1,19 @@
 '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 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 = actions.map((item) => ({
+        ...item,
+        onClick: () => handleClick(item),
+    }));
+    return (_jsxs("div", { ref: ref, className: "relative h-5", 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,15 @@
+/// <reference types="react" />
+import type { EmptyMessageProps } from '@sqrzro/components';
+import type { ListAction } from '../ListActions';
+import type { ListObject } from '../ListItem';
+export interface ListClientComponentProps {
+    actions?: ListAction[];
+    columns?: number;
+    data: ListObject[];
+    emptyMessageProps?: EmptyMessageProps;
+    hasFilters?: boolean;
+    isMinimal?: boolean;
+    renderItem?: (props: ListObject) => JSX.Element;
+}
+declare function ListClientComponent({ actions, columns, data, emptyMessageProps, hasFilters, isMinimal, renderItem, }: Readonly<ListClientComponentProps>): 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,14 @@
+/// <reference types="react" />
+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,18 +1,23 @@
 /// <reference types="react" />
+import type { ListAction } from '../ListActions';
 export interface ListObject {
-    actions?: ({ id }: {
-        id: number | string;
-    }) => React.ReactElement;
+    actions?: ListAction[];
     description?: React.ReactNode | null;
     href?: string;
-    id: number | string;
+    id: string;
+    isMinimal?: boolean;
     image?: string | null;
     imageHref?: string | null;
     meta?: React.ReactNode[] | Record<string, React.ReactNode>;
-    subtitle?: React.ReactNode | null;
-    title?: string;
+    permission?: string;
+    secondary?: {
+        description?: string;
+        meta?: React.ReactNode[];
+        title?: string;
+    };
+    tertiary?: React.ReactNode;
+    title?: React.ReactNode;
 }
-export declare function renderMeta(meta: ListObject['meta']): React.ReactElement | null;
-declare function ListItem({ actions: Actions, // eslint-disable-line @typescript-eslint/naming-convention
-description, href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
+export declare function renderMeta(id: string, meta: ListObject['meta']): React.ReactElement | null;
+declare function ListItem({ actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }: Readonly<ListObject>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -1,16 +1,26 @@
 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';
+import ListActions from '../ListActions';
+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, index) => (_jsx("li", { children: item }, index))) }));
+        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, // eslint-disable-line @typescript-eslint/naming-convention
-description, 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: [title ? (_jsx("h2", { className: "border-b border-slate-200 pb-3 text-lg font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description ? (_jsx("div", { className: "border-b border-slate-200 pb-3 ", children: description })) : null, _jsxs("div", { className: "mt-4 flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+function ListItem({ actions, description, href, id, isMinimal, meta, secondary, tertiary, title, }) {
+    return (_jsx("li", { children: _jsx("article", { className: tw('@container', 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)]'), "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: "text-base font-semibold", "data-testid": `list-item-title--${id}`, children: href ? _jsx(Link, { href: href, children: title }) : title })) : null, description, meta ? (_jsx("div", { className: tw(isMinimal ? 'mt-1' : 'mt-2 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: "text-base font-semibold", children: secondary.title })) : null, secondary.description ? (_jsx("div", { className: "text-xs text-slate-500", children: secondary.description })) : null, secondary.meta ? (_jsx("ul", { className: "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, actions ? (_jsx("div", { className: "h-5 self-center pl-6", children: _jsx(ListActions, { actions: actions, id: id }) })) : null] }) }) }));
 }
 export default ListItem;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+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.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, LogoutButton } from '@sqrzro/components';
+import { Link } from '@sqrzro/components';
 function MeActions() {
-    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: _jsx(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", {})] }));
 }
 export default MeActions;