@sqrzro/admin 2.1.0-bz.0 → 2.1.0-bz.11

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023 Richard Carter
+Copyright 2024 Richard Carter
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

package/README.md

@@ -1,14 +1,17 @@
 <div align="center">
 
-# Square Zero Admin
-  
-Square Zero Admin is an intentionally opionated collection of components, hooks, services and utilities that lets you very quickly build admin systems in Typescript & React.
+<h1>
+    <img src="assets/logo.svg" alt="" width="64" style="margin-bottom: 5px">
+    <br />
+    Square Zero Admin
+</h1>
 
-[Click here to get started](/story/guides-installation--page)
+<p>An intentionally opionated collection of components, hooks, services and utilities that lets you very quickly build admin systems in Typescript & React.</p>
+<p>[Click here to get started](/story/guides-installation--page)</p>
   
 <hr />
 
-[![GitHub license](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/sqrzro/admin/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@sqrzro/admin.svg?style=flat)](https://www.npmjs.com/package/@sqrzro/admin) [![Build](https://github.com/sqrzro/admin/actions/workflows/development.yml/badge.svg)](https://github.com/sqrzro/admin/actions/workflows/development.yml)
+[![GitHub license](https://img.shields.io/badge/license-ISC-blue.svg)](https://github.com/sqrzro/sqrzro/admin/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@sqrzro/admin.svg?style=flat)](https://www.npmjs.com/package/@sqrzro/admin) [![Build](https://github.com/sqrzro/sqrzro/admin/actions/workflows/development.yml/badge.svg)](https://github.com/sqrzro/sqrzro/admin/actions/workflows/development.yml)
  
 </div>  
   

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

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

package/dist/components/AppLayout/index.js

@@ -1,10 +1,13 @@
+'use server';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Container, Link } from '@sqrzro/components';
+import { Container, Link, tw } from '@sqrzro/components';
+import { cookies } from 'next/headers';
 import { getConfig } from '../../services/ConfigService';
 import AppNavigation from '../AppNavigation';
 import MePanel from '../MePanel';
-function AppLayout({ children }) {
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-gray-800", children: _jsx(Container, { isFullWidth: true, children: _jsxs("div", { className: "flex h-16 items-center border-b border-gray-700", children: [_jsx(Link, { className: "h-9 w-9 rounded-full border-4 border-primary", href: "/", children: _jsx("span", { className: "sr-only", children: getConfig().app.name }) }), _jsx(AppNavigation, {}), _jsx(MePanel, {})] }) }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
+function AppLayout({ children, user }) {
+    const config = getConfig();
+    const layout = cookies().get('layout')?.value || 'topbar';
+    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 h-16 items-center border-b border-slate-700', layout === 'sidebar' ? 'h-screen flex-col' : null), children: [_jsxs(Link, { className: "h-9 w-9", href: "/", children: [config.logo?.(), _jsx("span", { className: "sr-only", children: config.app.name })] }), _jsx(AppNavigation, {}), _jsx(MePanel, { user: user })] }) }) }), _jsx("main", { className: "mb-10 block", children: children })] }));
 }
 export default AppLayout;

package/dist/components/AppNavigation/index.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { Link } from '@sqrzro/components';
+import { Link, tw } from '@sqrzro/components';
 import { useNavigation } from '@sqrzro/hooks';
 import { getConfig } from '../../services/ConfigService';
 function getNavigation() {
@@ -10,6 +9,8 @@ function getNavigation() {
 }
 function AppNavigation() {
     const navigation = useNavigation(getNavigation());
-    return (_jsx("ul", { className: "flex h-full items-center gap-2 pl-6", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: "h-full", children: _jsx(Link, { className: "block flex h-full items-center font-semibold text-white", href: href, children: _jsx("span", { className: clsx('rounded px-3 py-2', isActive ? 'bg-gray-700' : null), children: label }) }) }, href))) }));
+    return (_jsx("nav", { className: "h-full pl-6", children: _jsx("ul", { className: "flex h-full items-center gap-2", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { className: "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))) }) }));
 }
 export default AppNavigation;

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

@@ -0,0 +1,5 @@
+/// <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;

package/dist/components/Auth/index.js

@@ -0,0 +1,12 @@
+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',
+    panel: 'rounded bg-white p-8 shadow-lg',
+    title: 'text-lg font-semibold mb-4 leading-none',
+};
+function Auth(props) {
+    return _jsx(AuthComponent, { ...props, classNames: classNames });
+}
+export default Auth;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { StyleVariant } from '@sqrzro/interfaces';
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant: StyleVariant;
+}
+declare function Badge({ children, variant }: Readonly<BadgeProps>): React.ReactElement;
+export default Badge;

package/dist/components/Badge/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+const variantMap = {
+    info: 'bg-sky-100 border-sky-300 text-sky-700',
+    warning: 'bg-yellow-100 border-yellow-300 text-yellow-700',
+    success: 'bg-emerald-100 border-emerald-300 text-emerald-600',
+};
+function Badge({ children, variant }) {
+    return (_jsx("strong", { className: tw('block rounded border px-2 py-1 text-xs', variantMap[variant]), children: children }));
+}
+export default Badge;

package/dist/components/Dashboard/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Dashboard({ children, title }) {
-    return (_jsxs("div", { children: [_jsx("h1", { className: "mx-auto text-center text-4xl font-semibold", children: title }), children] }));
+    return (_jsxs("div", { className: "py-8", children: [_jsx("h1", { className: "mx-auto text-center text-4xl font-semibold", children: title }), children] }));
 }
 export default Dashboard;

package/dist/components/DateFilter/index.js

@@ -4,7 +4,6 @@ function DateFilter({ name, onChange, value }) {
     return _jsx(CalendarInput, { name: name, onChange: onChange, value: value, isPanelOnly: true, isRange: true });
 }
 export function transformDateValue(value) {
-    //return value?.split(',').map((item) => new Date(item)) || [];
     return value || '';
 }
 const LENGTH_OF_YEAR = 4;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import type { FilterObject } from '../FilterBarItem';
-export type FilterMap = FilterObject[];
+export type { FilterObject } from '../FilterBarItem';
 export interface FilterBarProps {
-    map: FilterMap;
+    hasSearch?: boolean;
+    map?: FilterObject[];
 }
-declare function FilterBar({ map }: Readonly<FilterBarProps>): React.ReactElement;
+declare function FilterBar({ hasSearch, map }: Readonly<FilterBarProps>): React.ReactElement;
 export default FilterBar;

package/dist/components/FilterBar/index.js

@@ -1,12 +1,21 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import { useFilters } from '@sqrzro/hooks';
+import { useRouter } from 'next/navigation';
 import FilterBarItem from '../FilterBarItem';
-function FilterBar({ map }) {
+function FilterBar({ hasSearch, map }) {
+    const router = useRouter();
     const [filters, setFilter] = useFilters();
+    const [search, setSearch] = useState(filters.get('search') || '');
     function handleChange(name, value) {
         setFilter(name, value);
+        router.refresh();
     }
-    return (_jsx("ul", { className: "sticky top-0 flex gap-2", children: map.map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name))) }));
+    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("input", { name: "search", onChange: (event) => setSearch(event.currentTarget.value), onKeyDown: (event) => {
+                        if (event.key === 'Enter') {
+                            setFilter('search', event.currentTarget.value);
+                        }
+                    }, value: search }) })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
 }
 export default FilterBar;

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

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

package/dist/components/FilterBarItem/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
-import clsx from 'clsx';
+import { tw } from '@sqrzro/components';
 import BooleanFilter, { renderBooleanValue } from '../BooleanFilter';
 import DateFilter, { renderDateValue, transformDateValue } from '../DateFilter';
 import DropdownFilter, { renderDropdownValue } from '../DropdownFilter';
@@ -26,6 +26,6 @@ function FilterBarItem({ data, label, name, onChange, type, value, }) {
         onChange(name, '');
     }
     const { component: FilterComponent, renderValue, size, transformValue } = map[type];
-    return (_jsxs("li", { className: clsx('relative inline-flex gap-2 rounded-full border px-5 py-2 text-xs text-white', value ? 'border-solid border-gray-400' : 'border-dashed border-gray-500', value ? 'bg-gray-700 pr-10' : 'text-slate-500'), 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: clsx('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-gray-800", children: "\u00D7" })] })) : null, _jsx("div", { ref: panel, anchor: `${name}-control`, className: `showpanel -ml-px mt-2 ${size || DEFAULT_SIZE} left-[anchor(left)] top-[anchor(bottom)] origin-top-left rounded-md bg-white shadow-lg`, 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 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 }) }) })] }));
 }
 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<T> = Omit<ListProps<T>, 'renderItem'>;
-declare function GridList<T extends object>(props: ListProps<T>): React.ReactElement;
+export type GridListProps<Item, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
+declare function GridList<Item extends object, Params = object>(props: GridListProps<Item, Params>): React.ReactElement;
 export default GridList;

package/dist/components/GridList/index.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import GridListItem from '../GridListItem';
 import List from '../List';
 function GridList(props) {
-    return _jsx(List, { ...props, className: "grid grid-cols-3 gap-6", renderItem: GridListItem });
+    return _jsx(List, { ...props, columns: 3, renderItem: GridListItem });
 }
 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, meta, title, }: Readonly<ListObject>): React.ReactElement;
+declare function GridListItem({ actions, href, id, image, imageHref, meta, subtitle, title, }: Readonly<ListObject>): React.ReactElement;
 export default GridListItem;

package/dist/components/GridListItem/index.js

@@ -1,7 +1,8 @@
 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, meta, title, }) {
-    return (_jsx("li", { children: _jsxs("article", { className: "overflow-hidden rounded-md bg-white p-4 shadow", children: [image ? _jsx("img", { alt: "", className: "mb-4 border border-gray-200", src: image }) : null, _jsx("h2", { className: "text-base font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), meta || Actions ? _jsx("hr", { className: "my-4" }) : null, _jsxs("div", { className: "flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+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] }) }));
 }
 export default GridListItem;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { StyleVariant } from '@sqrzro/interfaces';
+export interface InfoPanelProps {
+    children: React.ReactNode;
+    variant?: StyleVariant;
+}
+declare function InfoPanel({ children, variant }: Readonly<InfoPanelProps>): React.ReactElement;
+export default InfoPanel;

package/dist/components/InfoPanel/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tw } from '@sqrzro/components';
+const variantMap = {
+    info: 'bg-sky-50 border-sky-200 text-sky-700',
+    warning: 'bg-yellow-50 border-yellow-100 text-yellow-700',
+};
+function InfoPanel({ children, variant = 'info' }) {
+    return (_jsx("aside", { className: tw('rounded border px-3 py-2', variantMap[variant]), children: children }));
+}
+export default InfoPanel;

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

@@ -1,22 +1,24 @@
 /// <reference types="react" />
-import type { ErrorablePromise } from '@sqrzro/server';
-import type { FilterMap } from '../FilterBar';
+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<T> {
+export interface ListProps<Item, Params = object> {
     actions?: ({ id }: {
         readonly id: number;
     }) => React.ReactElement;
-    className?: string;
-    filters?: FilterMap;
-    fn: (params?: Record<string, string>, searchParams?: Record<string, string>) => ErrorablePromise<T[]>;
+    columns?: number;
+    emptyMessageProps?: EmptyMessageProps;
+    filters?: FilterObject[];
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
+    hasSearch?: boolean;
     renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Record<string, string>;
-    searchParams?: Record<string, string>;
-    transformer?: (item: T) => ListObject;
+    params?: Params;
+    transformer?: (item: Item) => ListObject;
 }
-declare function List<T extends object>({ actions, className, filters, fn, params, renderItem, searchParams, transformer, }: Readonly<ListProps<T>>): Promise<React.ReactElement>;
+declare function List<Item extends object, Params = object>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, params, renderItem, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
 export default List;

package/dist/components/List/index.js

@@ -1,7 +1,8 @@
+'use server';
 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 { EmptyMessage, tw } from '@sqrzro/components';
+import { headers } from 'next/headers';
 import FilterBar from '../FilterBar';
 import ListItem from '../ListItem';
 function defaultTransformer() {
@@ -10,13 +11,14 @@ function defaultTransformer() {
         title: '',
     };
 }
-async function List({ actions, className, filters, fn, params, renderItem = ListItem, searchParams, transformer, }) {
+async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearch, params, renderItem = ListItem, transformer, }) {
+    const searchParams = new URLSearchParams(headers().get('x-search-params') || '');
     const [response, error] = await fn(params, searchParams);
     if (error) {
-        return _jsx("div", { children: "ERRORROROR" });
+        return _jsx("div", { children: "Error" });
     }
     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(className), children: data.map((item) => renderItem({ actions, ...item })) })) : (_jsx(EmptyMessage, {}))] }));
+    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, { ...emptyMessageProps }))] }));
 }
 export default List;

package/dist/components/ListActions/index.js

@@ -7,6 +7,6 @@ function ListActions({ actions, 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: "showpanel 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] }));
+    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] }));
 }
 export default ListActions;

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

@@ -1,14 +1,17 @@
 /// <reference types="react" />
 export interface ListObject {
     actions?: ({ id }: {
-        id: number;
+        id: number | string;
     }) => React.ReactElement;
     href?: string;
-    id: number;
-    image?: string;
-    meta?: string[];
+    id: number | string;
+    image?: string | null;
+    imageHref?: string | null;
+    meta?: React.ReactNode[] | Record<string, React.ReactNode>;
+    subtitle?: React.ReactNode | null;
     title: string;
 }
-export declare function renderMeta(meta: Record<string, string> | string[]): React.ReactElement;
-declare function ListItem({ actions: Actions, href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
+export declare function renderMeta(meta: ListObject['meta']): React.ReactElement | null;
+declare function ListItem({ actions: Actions, // eslint-disable-line @typescript-eslint/naming-convention
+href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Link } from '@sqrzro/components';
 export function renderMeta(meta) {
+    if (!meta) {
+        return null;
+    }
     if (Array.isArray(meta)) {
-        return (_jsx("ul", { className: "flex gap-4 text-xs", children: meta.map((item) => (_jsx("li", { children: item }, item))) }));
+        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("dl", { className: "w-full text-xs", children: Object.entries(meta).map(([key, value]) => (_jsxs("div", { className: "flex justify-between p-2 odd:bg-gray-100", children: [_jsx("dt", { children: key }), _jsx("dd", { children: value })] }, key))) }));
+    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", { className: "mb-4", children: _jsxs("article", { className: "overflow-hidden rounded-md bg-white p-4 shadow", children: [_jsx("h2", { className: "font-semibold", children: href ? _jsx(Link, { href: href, children: title }) : title }), _jsxs("div", { className: "mt-2 flex items-center justify-between", children: [meta ? renderMeta(meta) : null, Actions ? _jsx(Actions, { id: id }) : null] })] }) }));
+function ListItem({ actions: Actions, // eslint-disable-line @typescript-eslint/naming-convention
+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] })] }) }));
 }
 export default ListItem;

package/dist/components/MeActions/index.js

@@ -1,13 +1,6 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { removeSession } from '@sqrzro/server';
-import { useRouter } from 'next/navigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, LogoutButton } from '@sqrzro/components';
 function MeActions() {
-    const router = useRouter();
-    async function handleLogout() {
-        await removeSession();
-        router.refresh();
-    }
-    return (_jsx("button", { className: "text-xs text-gray-300", onClick: handleLogout, type: "button", children: "Log Out" }));
+    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, {}) })] }));
 }
 export default MeActions;

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

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

package/dist/components/MePanel/index.js

@@ -1,9 +1,6 @@
-'use server';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getIdFromSession } from '@sqrzro/server';
 import MeActions from '../MeActions';
-async function MePanel() {
-    const id = await getIdFromSession();
-    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: id }), _jsx(MeActions, {})] }), _jsx("div", { className: "h-9 w-9 rounded-full border-4 border-gray-500" })] }));
+function MePanel({ user }) {
+    return (_jsxs("div", { className: "ml-auto flex items-center gap-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5 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" })] }));
 }
 export default MePanel;

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

@@ -8,5 +8,5 @@ export interface PageProps {
     tabs?: LinkableAction[];
     title: string;
 }
-declare function Page({ actions, basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): React.ReactElement;
+declare function Page({ basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): React.ReactElement;
 export default Page;

package/dist/components/Page/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { Container } from '@sqrzro/components';
 import Tabs from '../Tabs';
-function Page({ actions, basePath, children, isFullWidth, tabs, title, }) {
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-gray-800 pb-32 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-32 flex flex-col gap-8", children: children }) })] }));
+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 }) })] }));
 }
 export default Page;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface PanelProps {
+export interface PanelProps {
     children: React.ReactNode;
     title?: string;
 }

package/dist/components/Panel/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Panel({ children, title }) {
-    return (_jsxs("article", { children: [title ? _jsx("h3", { children: title }) : null, children] }));
+    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] }));
 }
 export default Panel;

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

@@ -3,6 +3,7 @@ import type { Config as ConfigObject } from '../../services/ConfigService';
 export interface RootLayoutProps {
     children: React.ReactNode;
     config?: ConfigObject;
+    logo?: () => React.ReactElement;
 }
-declare function RootLayout({ children, config }: Readonly<RootLayoutProps>): React.ReactElement;
+declare function RootLayout({ children, config, logo }: Readonly<RootLayoutProps>): React.ReactElement;
 export default RootLayout;

package/dist/components/RootLayout/index.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/no-danger */
 import { Suspense } from 'react';
-import { ClassNames, Toaster, registerClassNames } from '@sqrzro/components';
+import { Inter as getInter } from 'next/font/google';
+import { ClassNames, Toaster, tw } from '@sqrzro/components';
 import { setConfig } from '../../services/ConfigService';
 import classNames from '../../styles/config';
 import Config from '../Config';
-function RootLayout({ children, config }) {
-    registerClassNames(classNames);
+const inter = getInter({
+    subsets: ['latin'],
+    variable: '--font-inter',
+});
+function RootLayout({ children, config, logo }) {
     if (config) {
-        setConfig(config);
+        setConfig(config, logo);
     }
-    return (_jsxs("html", { lang: "en", children: [_jsx("head", {}), _jsxs("body", { children: [_jsx(Config, { data: config }), _jsx(ClassNames, { data: classNames }), children, _jsx(Suspense, { fallback: null, children: _jsx(Toaster, {}) })] })] }));
+    return (_jsxs("html", { lang: "en", children: [_jsx("head", {}), _jsxs("body", { className: tw(inter.variable, '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(Suspense, { fallback: null, children: _jsx(Toaster, {}) })] })] }));
 }
 export default RootLayout;

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

@@ -0,0 +1,2 @@
+declare function SettingsForm(): import("react/jsx-runtime").JSX.Element;
+export default SettingsForm;

package/dist/components/SettingsForm/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EditableForm } from '@sqrzro/components';
+import { useEditableForm } from '@sqrzro/hooks';
+function SettingsForm() {
+    const { formProps } = useEditableForm({});
+    return (_jsx(EditableForm, { title: "Appearance", ...formProps, children: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, aperiam modi. Atque, nemo qui! Quae consectetur tempora beatae, ducimus reprehenderit, et aliquam quod est, quidem fugiat impedit sit nihil cum!" }));
+}
+export default SettingsForm;

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

@@ -0,0 +1,2 @@
+declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;
+export default SettingsPage;

package/dist/components/SettingsPage/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Page from '../Page';
+import SettingsForm from '../SettingsForm';
+function SettingsPage() {
+    return (_jsx(Page, { title: "Settings", children: _jsx(SettingsForm, {}) }));
+}
+export default SettingsPage;

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import type { ErrorablePromise } from '@sqrzro/server';
+import type { Errorable } from '@sqrzro/interfaces';
 import type { TableClientComponentProps } from '../TableClientComponent';
 export interface TableProps<T> extends Omit<TableClientComponentProps, 'data'> {
-    fn: (filters?: Record<string, string>) => ErrorablePromise<T[]>;
+    fn: (filters?: Record<string, string>) => Promise<Errorable<T[]>>;
     searchParams?: Record<string, string>;
 }
 declare function Table<T>({ columns, fn, searchParams, }: Readonly<TableProps<T>>): Promise<React.ReactElement>;

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

@@ -3,13 +3,13 @@ export interface TableItemObject {
     [key: string]: string;
     id: string;
 }
-interface TableColumnObject {
+export interface TableColumnObject {
     key: string;
-    title: string;
-    type?: 'string';
+    title?: string;
+    type?: 'number' | 'string';
 }
 export interface TableClientComponentProps {
-    columns: TableColumnObject[];
+    columns: string[] | TableColumnObject[];
     data: TableItemObject[];
 }
 declare function TableClientComponent({ columns, data, }: Readonly<TableClientComponentProps>): React.ReactElement;