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

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

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

package/dist/components/AppLayout/index.js

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Container, Link, tw } from '@sqrzro/components';
 import { getConfig } from '../../services/ConfigService';
+import { getLayout } from '../../services/LayoutService';
 import AppNavigation from '../AppNavigation';
 import MePanel from '../MePanel';
-function AppLayout({ children, layout, user }) {
+async function AppLayout({ children, user }) {
     const config = getConfig();
-    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 })] }));
+    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 })] }));
 }
 export default AppLayout;

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

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

package/dist/components/AppNavigation/index.js

@@ -7,9 +7,9 @@ function getNavigation() {
     const { navigation } = getConfig();
     return Object.entries(navigation).map(([href, label]) => ({ href, label }));
 }
-function AppNavigation() {
+function AppNavigation({ layout }) {
     const navigation = useNavigation(getNavigation());
-    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
+    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))) }) }));
 }

package/dist/components/Badge/index.js

@@ -1,11 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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',
+const classMap = {
+    danger: 'bg-red-100 text-red-700',
+    error: 'bg-red-100 text-red-700',
+    info: 'bg-sky-100 text-sky-700',
+    warning: 'bg-yellow-100 text-yellow-700',
+    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',
 };
 function Badge({ children, variant }) {
-    return (_jsx("strong", { className: tw('block rounded border px-2 py-1 text-xs', variantMap[variant]), children: children }));
+    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] }));
 }
 export default Badge;

package/dist/components/FilterBar/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { TextInput } from '@sqrzro/components';
 import { useFilters } from '@sqrzro/hooks';
 import { useRouter } from 'next/navigation';
 import FilterBarItem from '../FilterBarItem';
@@ -12,10 +13,14 @@ function FilterBar({ hasSearch, map }) {
         setFilter(name, value);
         router.refresh();
     }
-    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)))] }));
+    function handleSearchChange(event) {
+        setSearch(event.target.value || '');
+    }
+    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)))] }));
 }
 export default FilterBar;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ListProps } from '../List';
-export type GridListProps<Item> = Omit<ListProps<Item>, 'renderItem'>;
-declare function GridList<Item extends object>(props: GridListProps<Item>): React.ReactElement;
+export type GridListProps<Item, 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/Icon/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type IconType = 'error' | 'info' | 'success' | 'warning';
+export type IconType = 'danger' | 'error' | 'info' | 'success' | 'warning';
 declare const icons: Record<IconType, () => React.ReactElement>;
 export interface IconProps {
     type?: keyof typeof icons;

package/dist/components/Icon/index.js

@@ -4,6 +4,7 @@ import InfoIcon from '../../icons/InfoIcon';
 import SuccessIcon from '../../icons/SuccessIcon';
 import WarningIcon from '../../icons/WarningIcon';
 const icons = {
+    danger: ErrorIcon,
     error: ErrorIcon,
     info: InfoIcon,
     success: SuccessIcon,

package/dist/components/InfoPanel/index.js

@@ -1,10 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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',
+import Icon from '../Icon';
+const iconTypeMap = {
+    danger: 'danger',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
 };
+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',
+};
+function mapVariantToIconType(variant) {
+    return iconTypeMap[variant] || 'info';
+}
 function InfoPanel({ children, variant = 'info' }) {
-    return (_jsx("aside", { className: tw('rounded border px-3 py-2', variantMap[variant]), children: children }));
+    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 })] }));
 }
 export default InfoPanel;

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

@@ -7,18 +7,19 @@ export interface ListComponentProps {
     params?: Record<string, string>;
     searchParams?: Record<string, string>;
 }
-export interface ListProps<Item> {
+export interface ListProps<Item, Params> {
     actions?: ({ id }: {
         readonly id: number;
     }) => React.ReactElement;
     columns?: number;
     emptyMessageProps?: EmptyMessageProps;
     filters?: FilterObject[];
-    fn: (params: Record<string, string>, searchParams: URLSearchParams) => Promise<Errorable<Item[]>>;
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
     hasSearch?: boolean;
+    isMinimal?: boolean;
     renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Record<string, string>;
+    params?: Params;
     transformer?: (item: Item) => ListObject;
 }
-declare function List<Item extends object>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, params, renderItem, transformer, }: Readonly<ListProps<Item>>): Promise<React.ReactElement>;
+declare function List<Item extends object, Params>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
 export default List;

package/dist/components/List/index.js

@@ -9,7 +9,11 @@ function defaultTransformer() {
         title: '',
     };
 }
-async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearch, params, renderItem = ListItem, transformer, }) {
+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;
     try {
         const { headers } = await import('next/headers');
@@ -18,12 +22,18 @@ async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearc
     catch (err) {
         searchParams = new URLSearchParams();
     }
-    const [response, error] = await fn(params || {}, searchParams);
+    const [response, error] = await fn(params, searchParams);
     if (error) {
         return _jsx("div", { children: "Error" });
     }
     const data = response.map(transformer || defaultTransformer);
-    const hasFilters = Boolean(Object.keys(searchParams || []).length);
-    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 }))] }));
+    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 } }))] }));
 }
 export default List;

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

@@ -3,15 +3,16 @@ export interface ListObject {
     actions?: ({ id }: {
         id: number | string;
     }) => React.ReactElement;
+    description?: React.ReactNode | null;
     href?: string;
     id: number | string;
     image?: string | null;
     imageHref?: string | null;
     meta?: React.ReactNode[] | Record<string, React.ReactNode>;
     subtitle?: React.ReactNode | null;
-    title: string;
+    title?: string;
 }
 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;
+description, href, id, meta, title, }: Readonly<ListObject>): React.ReactElement;
 export default ListItem;

package/dist/components/ListItem/index.js

@@ -5,12 +5,12 @@ export function renderMeta(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-600", children: meta.map((item, index) => (_jsx("li", { children: item }, index))) }));
     }
     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
-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] })] }) }));
+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] })] }) }));
 }
 export default ListItem;

package/dist/components/MePanel/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 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" })] }));
+    return (_jsxs("div", { className: "ml-auto flex items-center gap-3", children: [_jsxs("div", { className: "flex flex-col items-end gap-0.5 text-white", children: [_jsx("strong", { children: user?.name }), _jsx(MeActions, {})] }), _jsx("div", { className: "h-9 w-9 flex-none 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({ basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): React.ReactElement;
+declare function Page({ basePath, children, isFullWidth, tabs, title, }: Readonly<PageProps>): Promise<React.ReactElement>;
 export default Page;

package/dist/components/Page/index.js

@@ -1,8 +1,12 @@
 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 { getLayout } from '../../services/LayoutService';
 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, isFullWidth, tabs, title, }) {
+    const layout = await getLayout();
+    return (_jsxs(Fragment, { children: [_jsx("header", { className: tw('', layout === 'sidebar'
+                    ? 'border-b border-slate-200 bg-white'
+                    : 'bg-slate-800 pb-16 text-white'), children: _jsxs(Container, { isFullWidth: layout === 'sidebar' || 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", { className: "flex gap-2", id: "page-actions" })] }), tabs ? (_jsx("div", { className: "-mt-4 mb-8", children: _jsx(Tabs, { basePath: basePath, data: tabs }) })) : null] }) }), _jsx(Container, { isFullWidth: layout === 'sidebar' || isFullWidth, children: _jsx("div", { className: tw('flex flex-col gap-8', layout === 'sidebar' ? 'mt-8' : '-mt-16'), children: children }) })] }));
 }
 export default Page;

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

@@ -1,2 +1,9 @@
-declare function SettingsForm(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+interface SettingsFormFields {
+    layout: string;
+}
+interface SettingsFormProps {
+    defaults: Partial<SettingsFormFields>;
+}
+declare function SettingsForm({ defaults }: Readonly<SettingsFormProps>): JSX.Element;
 export default SettingsForm;

package/dist/components/SettingsForm/index.js

@@ -1,9 +1,14 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { EditableForm } from '@sqrzro/components';
+import { EditableForm, EditableRadioFormField } 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!" }));
+import { submitLayoutForm } from '../../services/LayoutService';
+const options = { sidebar: 'Side bar', topbar: 'Top bar' };
+function SettingsForm({ defaults }) {
+    const { fieldProps, formProps } = useEditableForm({
+        defaults,
+        onSubmit: submitLayoutForm,
+    });
+    return (_jsx(EditableForm, { title: "Appearance", ...formProps, children: _jsx(EditableRadioFormField, { ...fieldProps('layout'), options: options, renderValue: (value) => (value ? options[value] || '-' : '-') }) }));
 }
 export default SettingsForm;

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

@@ -1,2 +1,3 @@
-declare function SettingsPage(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare function SettingsPage(): Promise<JSX.Element>;
 export default SettingsPage;

package/dist/components/SettingsPage/index.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { getLayout } from '../../services/LayoutService';
 import Page from '../Page';
 import SettingsForm from '../SettingsForm';
-function SettingsPage() {
-    return (_jsx(Page, { title: "Settings", children: _jsx(SettingsForm, {}) }));
+async function SettingsPage() {
+    const layout = await getLayout();
+    return (_jsx(Page, { title: "Settings", children: _jsx(SettingsForm, { defaults: { layout } }) }));
 }
 export default SettingsPage;

package/dist/components/Tabs/index.js

@@ -7,18 +7,5 @@ function Tabs({ basePath = '', data }) {
     return (_jsx("nav", { className: "border-b border-slate-700", children: _jsx("ul", { className: "flex gap-4", children: navigation.map(({ href, isActive, label }) => (_jsx("li", { children: _jsx(Link, { className: tw('block px-1 pb-2 font-semibold', isActive
                         ? 'border-primary border-b-4 text-white'
                         : 'text-white/80 hover:text-white'), href: href, children: label }) }, href))) }) }));
-    // return (
-    //     <nav className="border-y border-slate-700">
-    //         <ul className="flex gap-4 font-semibold">
-    //             {data.map(({ href, label }) => (
-    //                 <li key={href}>
-    //                     <Link className="block py-2 text-white" href={`${basePath}${href || ''}`}>
-    //                         {label}
-    //                     </Link>
-    //                 </li>
-    //             ))}
-    //         </ul>
-    //     </nav>
-    // );
 }
 export default Tabs;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
-export { Button, CalendarInput, ConnectedDropdown, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextFormField, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, Switch, SwitchFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export type { DropdownItem } from '@sqrzro/components';
 export type { AppLayoutProps } from './AppLayout';
 export { default as AppLayout } from './AppLayout';
 export type { AuthProps } from './Auth';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 // Exported from @sqrzro/components
-export { Button, CalendarInput, ConnectedDropdown, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextFormField, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, Switch, SwitchFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export { default as AppLayout } from './AppLayout';
 export { default as Auth } from './Auth';
 export { default as Badge } from './Badge';

package/dist/services/LayoutService.d.ts

@@ -0,0 +1,7 @@
+import type { SerializedErrorable } from '@sqrzro/interfaces';
+type Layout = 'sidebar' | 'topbar';
+export declare function getLayout(): Promise<string>;
+export declare function submitLayoutForm(formData: {
+    layout: Layout;
+}): Promise<SerializedErrorable<boolean>>;
+export {};

package/dist/services/LayoutService.js

@@ -0,0 +1,9 @@
+'use server';
+import { cookies } from 'next/headers';
+export async function getLayout() {
+    return Promise.resolve(cookies().get('layout')?.value || 'topbar');
+}
+export async function submitLayoutForm(formData) {
+    cookies().set('layout', formData.layout);
+    return Promise.resolve([true, null]);
+}

package/dist/styles/config.js

@@ -34,8 +34,9 @@ const classNames = twx({
         },
     }),
     editableFieldset: () => ({
-        root: 'bg-panel grid grid-cols-[30%_1fr] rounded p-8 shadow',
+        root: 'bg-panel grid grid-cols-[30%_1fr] gap-8 rounded p-8 shadow',
         title: 'mb-8 text-lg font-semibold leading-none text-slate-700',
+        description: 'text-slate-600',
         actions: 'flex justify-end gap-2 border-t border-slate-200 pt-4',
     }),
     editableFormField: () => ({
@@ -43,9 +44,12 @@ const classNames = twx({
         label: 'flex items-center font-semibold leading-none',
         field: 'flex min-h-10 items-center',
     }),
-    emptyMessage: () => ({
-        root: 'relative mx-auto mt-4 w-full max-w-xl rounded bg-white py-16 text-center text-slate-500 shadow before:pointer-events-none before:absolute before:inset-2 before:border-2 before:border-dashed',
-        title: 'mb-2 text-xl font-semibold leading-none',
+    emptyMessage: (props) => ({
+        root: tw('relative mx-auto mt-4 w-full max-w-2xl p-16 text-center text-slate-500', props?.isMinimal
+            ? null
+            : 'rounded bg-white shadow before:pointer-events-none before:absolute before:inset-2 before:border-2 before:border-dashed'),
+        title: 'mb-2 text-pretty text-xl font-semibold leading-tight',
+        description: 'text-pretty',
         action: 'mt-6 flex justify-center',
     }),
     dropdown: () => ({
@@ -69,7 +73,7 @@ const classNames = twx({
         label: tw('flex font-semibold leading-none', props?.isEditable ? 'items-center' : 'mb-2 justify-between'),
         details: 'mb-2 text-xs font-normal leading-none text-slate-500',
         optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
-        error: 'mt-2 flex items-center gap-2 text-red-700 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/error.svg)]',
+        error: tw('mt-2 flex items-center gap-2 text-red-700 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/error.svg)]', props?.isEditable ? 'col-start-2' : ''),
     }),
     imageInput: () => ({
         root: 'h-64 rounded border border-slate-300 bg-slate-50 p-8',
@@ -90,6 +94,9 @@ const classNames = twx({
         root: 'flex flex-col gap-2',
         row: 'grid grid-cols-[1fr_auto] has-[>_button]:gap-2',
     }),
+    objectInput: () => ({
+        root: 'flex flex-col gap-2',
+    }),
     passwordInput: () => ({
         action: {
             default: 'mr-2 h-6 w-6 overflow-hidden bg-[url(/admin/images/eye.svg)] bg-no-repeat indent-12',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqrzro/admin",
-  "version": "2.1.0-bz.15",
+  "version": "2.1.0-bz.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",