@sqrzro/admin 4.0.0-alpha.2 → 4.0.0-alpha.20

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

@@ -1,8 +1,14 @@
-import type { AdminConfig, User } from '../../utility/interfaces';
+import { NavigationObject } from '@sqrzro/ui/navigation';
+import type { User } from '../../utility/interfaces';
 interface AdminAppLayoutProps {
     readonly children: React.ReactNode;
-    readonly config?: AdminConfig;
+    readonly logo?: React.ReactNode;
+    readonly navigation?: NavigationObject[];
+    readonly site?: {
+        name: string;
+        url: string;
+    };
     readonly userFn?: () => Promise<User>;
 }
-declare function AdminAppLayout({ children, config, userFn }: AdminAppLayoutProps): React.ReactElement;
+declare function AdminAppLayout({ children, logo, navigation, site, userFn, }: AdminAppLayoutProps): React.ReactElement;
 export default AdminAppLayout;

package/dist/components/AdminAppLayout/index.js

@@ -3,7 +3,7 @@ import { Suspense } from 'react';
 import { Link } from '@sqrzro/ui/components';
 import { AppNavigation } from '@sqrzro/ui/navigation';
 import MePanel from '../MePanel';
-function AdminAppLayout({ children, config, userFn }) {
-    return (_jsxs("div", { className: "flex flex-1 flex-col", children: [_jsx("header", { className: "bg-slate-800", children: _jsxs("div", { className: "flex h-16 items-center border-b border-slate-700 px-4", children: [_jsx(Link, { className: "h-9 w-9", href: "/", children: _jsx("span", { className: "sr-only", children: config?.app.name }) }), _jsx(AppNavigation, { data: config?.navigation || [] }), _jsx(Suspense, { children: _jsx(MePanel, { userFn: userFn }) })] }) }), _jsx("main", { className: "@container mb-10 block flex flex-1 flex-col", children: children })] }));
+function AdminAppLayout({ children, logo, navigation, site, userFn, }) {
+    return (_jsxs("div", { className: "flex flex-1 flex-col", children: [_jsx("header", { className: "relative bg-slate-800 shadow-lg", children: _jsxs("div", { className: "flex h-16 items-center border-b border-slate-700 px-4", children: [_jsxs(Link, { className: "h-9 w-9", href: "/", children: [logo, _jsx("span", { className: "sr-only", children: site?.name })] }), _jsx(AppNavigation, { data: navigation || [] }), _jsx(Suspense, { children: _jsx(MePanel, { userFn: userFn }) })] }) }), _jsx("main", { className: "mb-10 flex flex-1 flex-col", children: children })] }));
 }
 export default AdminAppLayout;

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

@@ -1,7 +1,8 @@
 import type { PageProps } from '@sqrzro/ui/components';
 import { NextLayoutProps } from '@sqrzro/ui/utility';
-export type AdminLayoutProps<T> = Omit<PageProps<T>, 'children' | 'pageProps' | 'template'> & {
+type Fn = (...args: any[]) => Promise<any>;
+export type AdminLayoutProps<T extends Fn | undefined = undefined> = Omit<PageProps<T>, 'children' | 'pageProps' | 'template'> & {
     readonly layoutProps: NextLayoutProps;
 };
-declare function AdminLayout<T>(props: Readonly<AdminLayoutProps<T>>): React.ReactElement;
+declare function AdminLayout<T extends Fn | undefined = undefined>(props: Readonly<AdminLayoutProps<T>>): React.ReactElement;
 export default AdminLayout;

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

@@ -1,4 +1,5 @@
 import type { PageProps } from '@sqrzro/ui/components';
-export type AdminPageProps<T> = Omit<PageProps<T>, 'template'>;
-declare function AdminPage<T>(props: Readonly<AdminPageProps<T>>): React.ReactElement;
+type Fn = (...args: any[]) => Promise<any>;
+export type AdminPageProps<T extends Fn | undefined = undefined> = Omit<PageProps<T>, 'template'>;
+declare function AdminPage<T extends Fn | undefined = undefined>(props: Readonly<AdminPageProps<T>>): React.ReactElement;
 export default AdminPage;

package/dist/components/AdminPageComponent/index.js

@@ -3,6 +3,6 @@ import { Fragment } from 'react';
 import { Container } from '@sqrzro/ui/components';
 import { Tabs } from '@sqrzro/ui/navigation';
 function AdminPageComponent({ children, tabs, title, }) {
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-slate-800 pb-16 text-white", children: _jsxs(Container, { children: [_jsxs("div", { className: "flex items-center justify-between py-10", children: [_jsx("h1", { className: "flex min-h-10 items-center text-3xl font-semibold", children: title }), _jsx("div", { className: "flex gap-2", id: "page-actions" })] }), tabs ? _jsx(Tabs, { data: tabs }) : null] }) }), _jsx(Container, { children: _jsx("div", { className: "@container -mt-16 flex flex-col gap-8", children: children }) })] }));
+    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-linear-to-b from-slate-700 to-slate-800 pb-16 text-white", children: _jsxs(Container, { children: [_jsxs("div", { className: "flex items-center justify-between py-10", children: [_jsx("h1", { className: "flex min-h-10 items-center text-3xl font-semibold", children: title }), _jsx("div", { className: "flex gap-2", id: "page-actions" })] }), tabs ? _jsx(Tabs, { data: tabs }) : null] }) }), _jsx(Container, { children: _jsx("div", { className: "-mt-16 flex flex-col gap-8 [&>.page-content-block]:relative [&>.page-content-block]:before:absolute [&>.page-content-block]:before:bottom-full [&>.page-content-block]:before:left-[calc(50%-50vw)] [&>.page-content-block]:before:-z-10 [&>.page-content-block]:before:-mb-16 [&>.page-content-block]:before:h-96 [&>.page-content-block]:before:w-screen [&>.page-content-block]:before:bg-slate-800 [&>.page-content-block~.page-content-block]:before:content-none", children: children }) })] }));
 }
 export default AdminPageComponent;

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

@@ -0,0 +1,7 @@
+interface AdminPanelProps {
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AdminPanel({ actions, children, title }: AdminPanelProps): React.ReactElement;
+export default AdminPanel;

package/dist/components/AdminPanel/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function AdminPanel({ actions, children, title }) {
+    return (_jsxs("section", { className: "page-content-block rounded bg-white p-6 shadow", children: [title ? (_jsxs("header", { className: "-mt-6 mb-6 flex h-16 items-center justify-between border-b border-slate-200", children: [_jsx("h3", { className: "text-lg font-semibold leading-none", children: title }), actions] })) : null, _jsx("div", { className: "flex flex-col gap-6", children: children })] }));
+}
+export default AdminPanel;

package/dist/components/AdminRootLayout/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RootLayout } from '@sqrzro/ui/components';
-import classNameConfig from '../../config';
+import { AppBody } from '@sqrzro/ui/components';
+import AdminUIProvider from '../AdminUIProvider';
 function AdminRootLayout({ children }) {
-    return _jsx(RootLayout, { classNameConfig: classNameConfig, children: children });
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: "overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800 has-[[data-modal][open]]:overflow-hidden", children: _jsx(AdminUIProvider, { children: _jsx(AppBody, { children: children }) }) }) }));
 }
 export default AdminRootLayout;

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

@@ -0,0 +1,4 @@
+declare function AdminUIProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export default AdminUIProvider;

package/dist/components/AdminUIProvider/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { UIProvider } from '@sqrzro/ui/styles';
+import classNameConfig from '../../styles/classnames';
+import iconConfig from '../../styles/icons';
+function AdminUIProvider({ children }) {
+    return (_jsx(UIProvider, { data: { classNames: classNameConfig, icons: iconConfig }, children: children }));
+}
+export default AdminUIProvider;

package/dist/components/MePanel/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogoutButton } from '@sqrzro/auth';
+import { LogoutButton } from '@sqrzro/addon-auth';
 async function MePanel({ userFn }) {
     const user = await userFn?.();
     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("div", { className: "text-xs text-slate-300", children: _jsx(LogoutButton, {}) })] }), _jsx("div", { className: "h-9 w-9 flex-none rounded-full border-4 border-slate-500" })] }));

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export * from './utility/interfaces';
-export { default as classNames } from './config';
+export { default as classNameConfig } from './styles/classnames';
 export { default as AdminAppLayout } from './components/AdminAppLayout';
 export { default as AdminLayout } from './components/AdminLayout';
 export { default as AdminPage } from './components/AdminPage';
 export { default as AdminPageActions } from './components/AdminPageActions';
+export { default as AdminPanel } from './components/AdminPanel';
 export { default as AdminRootLayout } from './components/AdminRootLayout';

package/dist/index.js

@@ -1,7 +1,8 @@
 export * from './utility/interfaces';
-export { default as classNames } from './config';
+export { default as classNameConfig } from './styles/classnames';
 export { default as AdminAppLayout } from './components/AdminAppLayout';
 export { default as AdminLayout } from './components/AdminLayout';
 export { default as AdminPage } from './components/AdminPage';
 export { default as AdminPageActions } from './components/AdminPageActions';
+export { default as AdminPanel } from './components/AdminPanel';
 export { default as AdminRootLayout } from './components/AdminRootLayout';

package/dist/styles/classnames.d.ts

@@ -0,0 +1,4 @@
+import { WithAuthClassNames } from '@sqrzro/addon-auth';
+import type { UIClassNames } from '@sqrzro/ui/styles';
+declare const classNameConfig: WithAuthClassNames<UIClassNames>;
+export default classNameConfig;

package/dist/styles/classnames.js

@@ -0,0 +1,336 @@
+import { twx } from '@sqrzro/ui/styles';
+const classNameConfig = twx({
+    actionList: {
+        root: 'flex items-center gap-2 [&_li]:first:mr-auto',
+    },
+    appNavigation: {
+        root: 'h-full pl-6',
+        list: 'flex h-full items-center gap-4',
+        item: { default: 'relative h-full' },
+        link: {
+            default: 'relative flex h-full items-center px-1 font-semibold text-white/80 hover:text-white',
+            states: {
+                isHighlighted: 'before:bg-primary text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1',
+            },
+        },
+        icon: {
+            default: 'ml-1.5 h-4 w-4 rounded-full bg-slate-600 text-slate-100 transition-all ease-in-out',
+            states: { isSelected: 'rotate-180' },
+        },
+    },
+    auth: {
+        actions: 'mt-2 w-full',
+        content: 'flex flex-col gap-4',
+        footer: 'mt-2 text-center',
+        form: 'flex flex-col gap-6',
+        link: 'text-link font-semibold',
+        logo: 'row-start-2 mx-auto mx-auto flex h-12 w-32 w-48 items-end',
+        panel: 'row-start-3 flex w-screen max-w-sm flex-col gap-6 rounded-lg bg-white p-6 py-8 shadow-lg',
+        root: 'grid flex-1 grid-rows-[1fr_auto_auto_3fr] justify-center gap-8 bg-slate-800',
+        title: 'mb-1 text-center text-lg font-semibold leading-none',
+    },
+    badge: {
+        root: {
+            default: 'inline-flex items-center gap-1.5 rounded-full bg-slate-100 bg-gradient-to-br px-2 py-1 text-xs font-medium text-slate-600',
+            props: {
+                isDanger: 'border-red-300 from-red-100 to-red-200 text-red-700',
+                isError: 'border-red-300 from-red-100 to-red-200 text-red-700',
+                isInfo: 'border-sky-300 from-sky-100 to-sky-200 text-sky-700',
+                isSuccess: 'border-green-300 from-green-100 to-green-200 text-green-700',
+                isWarning: 'border-yellow-300 from-yellow-100 to-yellow-200 text-yellow-700',
+            },
+        },
+        dot: {
+            default: 'h-1.5 w-1.5 fill-slate-400',
+            props: {
+                isDanger: 'fill-red-400',
+                isError: 'fill-red-400',
+                isInfo: 'fill-sky-400',
+                isWarning: 'fill-yellow-400',
+                isSuccess: 'fill-green-400',
+            },
+        },
+    },
+    button: {
+        root: {
+            default: 'h-10 rounded border border-slate-300 bg-white px-5 text-sm text-slate-600',
+            props: {
+                isDanger: 'border-red-500 bg-white text-red-500',
+                isOnDark: 'border-slate-400 bg-transparent text-white hover:bg-white/10',
+                isPrimary: 'bg-button-bg hover:bg-button-bg-hover text-button-text border-none font-semibold shadow-sm transition-colors',
+            },
+        },
+        icon: '-ml-1.5 h-4 w-4',
+    },
+    calendar: {
+        root: 'p-4 pb-3 text-sm text-slate-600',
+        header: 'relative mb-4 flex items-center justify-between',
+        title: 'absolute left-1/2 -translate-x-1/2 text-sm font-semibold',
+        navigation: 'h-6 w-6 rounded-full bg-slate-400 text-slate-100 hover:bg-slate-500',
+        month: 'w-full table-fixed',
+        head: 'pb-2 text-center text-xs text-slate-400',
+        day: 'border border-slate-200 py-1',
+        control: {
+            default: 'mx-auto block h-8 w-full',
+            props: {
+                isSelected: 'bg-primary w-8 rounded-full text-white',
+                isInRange: 'bg-primary w-full text-white',
+                isStart: 'bg-primary ml-1 w-[calc(100%-.25rem)] rounded-l-full text-white [&_span]:-ml-1',
+                isEnd: 'bg-primary mx-0 w-[calc(100%-.25rem)] rounded-r-full text-white [&_span]:ml-1',
+            },
+        },
+    },
+    container: {
+        root: 'mx-auto w-full max-w-6xl px-8',
+    },
+    csvInput: {
+        root: 'w-full rounded border border-slate-300 bg-slate-50 p-8',
+        icon: {
+            default: 'mx-auto mb-3 block h-10 w-10 rounded-full text-slate-400',
+            states: { isHighlighted: 'text-green-500' },
+        },
+        title: 'mb-1 font-semibold',
+        description: 'mb-2 text-xs italic text-slate-700',
+    },
+    dropdown: {
+        item: {
+            default: 'flex flex-col items-start justify-center gap-1.5 border-b border-slate-100 p-3',
+            states: { isSelected: 'bg-slate-100' },
+        },
+        details: 'text-xs leading-none text-slate-500',
+    },
+    editableForm: {
+        root: 'page-content-block grid grid-cols-[25%_1fr] gap-20 rounded bg-white 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: {
+        root: 'grid grid-cols-[30%_1fr] gap-x-4 border-t border-slate-200 py-4',
+        label: 'flex items-center font-semibold',
+        field: 'col-start-2 flex min-h-10 items-center overflow-hidden',
+    },
+    emptyMessage: {
+        root: 'page-content-block relative mx-auto flex w-full max-w-2xl flex-col gap-4 rounded bg-white p-16 text-center text-slate-500 shadow',
+        icon: {
+            default: 'mx-auto -mt-2 block block h-12 w-12 text-slate-300',
+            props: { isError: 'text-error' },
+        },
+        title: {
+            default: 'text-pretty text-xl font-semibold leading-tight',
+            props: { isError: 'text-error' },
+        },
+        description: 'text-pretty text-sm',
+        action: 'mt-2 flex justify-center',
+    },
+    filterBar: {
+        root: 'flex flex-wrap gap-2',
+    },
+    filterClear: {
+        root: 'absolute right-0 top-0 z-20 flex h-full w-8 select-none items-center justify-center',
+        icon: 'h-5 w-5 text-slate-100',
+    },
+    filterItem: {
+        root: {
+            default: 'relative inline-flex h-8 items-center gap-2 rounded-full border border-dashed border-slate-400 px-5 text-xs text-slate-300 text-white transition-all',
+            props: {
+                isFocused: 'border-solid border-slate-400 bg-slate-700 pr-9',
+                isHighlighted: 'bg-slate-700',
+            },
+        },
+        value: 'border-l border-l-slate-300 pl-2 font-semibold',
+    },
+    filterPanel: {
+        root: { default: 'min-w-56', props: { isLarge: 'min-w-96' } },
+        title: 'flex items-center gap-2 border-b border-slate-300 p-3 text-sm font-semibold',
+        footer: 'p-3',
+    },
+    filterSearch: {
+        icon: 'pointer-events-none absolute left-2 top-0 z-10 flex h-full items-center',
+        input: 'h-8 w-56 rounded-full border border-slate-400 pl-7 pr-3 text-xs text-white placeholder:text-slate-300',
+    },
+    form: {
+        root: 'flex flex-col gap-6',
+    },
+    formField: {
+        root: {
+            default: '',
+            props: {
+                isEditable: 'grid grid-cols-[30%_1fr] gap-x-4 border-t border-slate-200 py-4',
+            },
+        },
+        label: {
+            default: 'mb-2 flex justify-between font-semibold leading-none',
+            props: { isEditable: 'mb-0 items-center' },
+        },
+        details: 'mb-2 text-xs font-normal text-slate-500',
+        optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
+        error: {
+            default: 'text-error mt-2 flex items-start gap-1.5',
+            props: { isEditable: 'col-start-2' },
+        },
+    },
+    infoPanel: {
+        root: {
+            default: 'flex w-full gap-2 rounded border bg-gradient-to-br p-4 text-left',
+            props: {
+                isDanger: 'border-red-300 from-red-100 to-red-200 text-red-700',
+                isError: 'border-red-300 from-red-100 to-red-200 text-red-700',
+                isInfo: 'border-sky-300 from-sky-100 to-sky-200 text-sky-700',
+                isSuccess: 'border-green-300 from-green-100 to-green-200 text-green-700',
+                isWarning: 'border-yellow-300 from-yellow-100 to-yellow-200 text-yellow-700',
+            },
+        },
+    },
+    list: {
+        root: {
+            default: 'page-content-block flex flex-col gap-4',
+            props: { isMinimal: 'gap-0 border-t border-slate-200' },
+        },
+    },
+    listItem: {
+        root: {
+            default: 'rounded bg-white p-4 shadow',
+            props: {
+                isMinimal: 'border-b border-slate-200 pl-0 shadow-none',
+                isSelected: 'bg-primary/5',
+            },
+        },
+        actions: 'flex items-center justify-end pl-4',
+        primary: 'flex flex-col items-start gap-2',
+        secondary: 'flex flex-col items-end gap-1',
+        select: 'flex items-center px-4',
+        title: 'text-base font-semibold',
+    },
+    listItemMeta: {
+        root: 'flex flex-wrap items-center gap-x-4 gap-y-1 text-slate-500',
+    },
+    menu: {
+        link: 'block min-w-36 whitespace-nowrap border-b border-slate-100 p-3 pr-5 text-left text-sm text-slate-700',
+    },
+    modal: {
+        root: 'starting:open:backdrop:opacity-0 py-16 backdrop:bg-slate-700/50 backdrop:transition-all backdrop:duration-500 open:backdrop:opacity-100',
+        panel: 'show show-open row-start-2 mx-auto flex w-full max-w-lg flex-col gap-6 rounded bg-white p-6 shadow-xl',
+        content: 'flex flex-col gap-6 [&_p]:text-pretty',
+        icon: 'text-slate-400',
+        title: 'flex items-center gap-2 border-b border-slate-200 pb-6 text-lg font-semibold',
+        actions: 'border-t border-slate-200 pt-6',
+    },
+    pagination: {
+        root: 'mx-auto flex w-full justify-between',
+        list: 'mx-auto flex flex-row items-center gap-1',
+        link: {
+            default: 'inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md border border-transparent text-sm font-medium hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-30',
+            states: { isHighlighted: 'border-slate-200 bg-white shadow-sm' },
+        },
+        gap: 'flex h-9 w-9 items-center justify-center text-xs text-slate-400',
+        navigation: 'inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium hover:bg-slate-100',
+    },
+    passwordComplexity: {
+        root: {
+            default: 'mt-2 rounded border border-slate-300 p-3',
+            props: { isValid: 'border-green-400 bg-green-50' },
+        },
+        list: 'flex flex-col gap-1',
+        item: {
+            default: 'flex items-center gap-2 text-slate-400',
+            props: { isValid: 'text-green-600' },
+        },
+        icon: { default: 'h-5 w-5 text-slate-400', props: { isValid: 'text-green-600' } },
+    },
+    passwordInput: {
+        action: 'absolute inset-y-0 right-0 flex items-center px-3',
+        icon: 'h-6 w-6 overflow-hidden bg-no-repeat indent-12 text-slate-700',
+    },
+    popover: {
+        root: {
+            default: 'show z-20 my-1 min-w-full rounded border border-slate-300 bg-white text-slate-700 shadow',
+            states: { isFocused: 'show-open' },
+        },
+    },
+    reference: {
+        root: { default: 'inline-flex items-center gap-2', props: { isTitle: 'gap-4' } },
+        reference: {
+            default: 'rounded bg-slate-200 px-2 py-1 text-[70%] font-semibold',
+            props: { isTitle: 'border border-slate-400 bg-transparent text-[60%] text-white' },
+        },
+    },
+    summary: {
+        root: 'relative grid gap-6',
+        item: 'relative rounded border border-slate-500 p-4 font-semibold text-white',
+        label: 'text-slate-300',
+        value: 'flex min-h-8 items-center text-2xl',
+    },
+    staticTextInput: {
+        root: {
+            default: 'text-md flex min-h-10 flex-col items-start justify-center gap-1.5 rounded border border-slate-300 bg-white p-3',
+            states: { isError: 'border-red-500' },
+        },
+        label: 'block leading-none',
+        details: 'block text-xs leading-none text-slate-500',
+        placeholder: 'block leading-none text-slate-400',
+        icon: 'mr-2 h-4 w-4 rounded-full bg-slate-500 text-white',
+        clear: 'mr-2 h-4 w-4 flex-none rounded-full border border-slate-500 text-slate-600',
+    },
+    switch: {
+        root: 'flex gap-4',
+        control: 'relative h-6 w-10 flex-none',
+        input: {
+            default: 'block h-full w-full cursor-pointer rounded-full bg-slate-300 transition-colors',
+            states: { isChecked: 'bg-primary' },
+        },
+        icon: {
+            default: 'pointer-events-none absolute left-1 top-1/2 h-4 w-4 -translate-y-1/2 translate-x-0 transform rounded-full bg-white shadow-md transition-transform duration-100',
+            states: { isChecked: 'translate-x-full' },
+        },
+        // label: 'flex min-h-6 flex-col justify-center',
+        // details: 'mt-1 block text-xs text-slate-500',
+    },
+    table: {
+        root: 'page-content-block rounded bg-white p-6 shadow',
+        row: {
+            default: 'bg-slate-50 odd:bg-slate-100',
+            props: { isSelected: 'bg-primary/10 odd:bg-primary/10' },
+        },
+        head: 'p-4 pt-0 text-left font-semibold leading-none',
+        cell: 'p-4',
+        actions: 'flex items-center justify-end',
+    },
+    tabs: {
+        root: '-mt-4 mb-8 border-b border-slate-700',
+        list: 'flex gap-4',
+        link: {
+            default: 'block border-b-4 border-transparent px-1 pb-2 font-semibold opacity-80 hover:opacity-100',
+            states: { isHighlighted: 'border-primary opacity-100' },
+        },
+    },
+    textArea: {
+        root: {
+            default: 'text-md focus:border-primary max-h-48 min-h-10 rounded border border-slate-300 px-3 py-2 placeholder-slate-400',
+            states: { isError: 'border-red-500' },
+        },
+    },
+    textInput: {
+        root: {
+            default: 'text-md focus:border-primary h-10 rounded border border-slate-300 px-3 placeholder-slate-400',
+            states: { isError: 'border-red-500' },
+        },
+        prefix: {
+            default: 'peer-focus:border-primary relative -mr-1 rounded-l border border-slate-300 bg-white px-3 text-sm text-slate-600',
+        },
+        suffix: {
+            default: 'peer-focus:border-primary relative -ml-1 rounded-r border border-slate-300 bg-white px-3 text-sm text-slate-600',
+        },
+        loading: 'text-slate-400',
+    },
+    toast: {
+        root: {
+            default: 'show show-open left-1/2 top-24 -translate-x-1/2 translate-y-5 rounded border px-4 py-2',
+            props: {
+                isSuccess: 'border-green-300 bg-green-100 text-green-700',
+                isError: 'border-red-300 bg-red-100 text-red-700',
+            },
+        },
+    },
+});
+export default classNameConfig;

package/dist/styles/icons.d.ts

@@ -0,0 +1,3 @@
+import { UIIcons } from '@sqrzro/ui/styles';
+declare const iconConfig: UIIcons;
+export default iconConfig;

package/dist/styles/icons.js

@@ -0,0 +1,18 @@
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, XMarkIcon, } from '@heroicons/react/16/solid';
+import { ArrowUpTrayIcon, CheckCircleIcon, ExclamationCircleIcon, XCircleIcon, } from '@heroicons/react/24/outline';
+const iconConfig = {
+    'appNavigation.menu': ChevronDownIcon,
+    'calendar.next': ChevronRightIcon,
+    'calendar.previous': ChevronLeftIcon,
+    'csvInput.success': CheckCircleIcon,
+    'csvInput.upload': ArrowUpTrayIcon,
+    'dropdown.control': ChevronDownIcon,
+    'filter.clear': XCircleIcon,
+    'formField.error': ExclamationCircleIcon,
+    'passwordComplexity.invalid': XCircleIcon,
+    'passwordComplexity.valid': CheckCircleIcon,
+    'passwordInput.visible': EyeIcon,
+    'passwordInput.hidden': EyeSlashIcon,
+    'staticTextInput.clear': XMarkIcon,
+};
+export default iconConfig;

package/dist/styles/styles.css

@@ -0,0 +1,3 @@
+@theme {
+    --color-primary: var(--color-teal-600);
+}

package/dist/utility/interfaces.d.ts

@@ -1,11 +1,3 @@
-import { NavigationObject } from 'node_modules/@sqrzro/ui/dist/navigation/interfaces';
-export interface AdminConfig {
-    app: {
-        name: string;
-        url: string;
-    };
-    navigation: NavigationObject[];
-}
 export interface User {
     id: string;
     name: string;

package/package.json

@@ -1,33 +1,47 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.20",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "default": "./dist/styles/styles.css"
+    }
+  },
   "files": [
     "dist/**/*"
   ],
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
-    "react-dom": "^19.2.1",
-    "@sqrzro/ui": "^4.0.0-alpha.5",
-    "@sqrzro/auth": "^4.0.0-alpha.5"
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.1",
+    "@sqrzro/addon-auth": "^4.0.0-alpha.10",
+    "@sqrzro/ui": "^4.0.0-alpha.48"
   },
   "devDependencies": {
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
-    "prettier": "^3.7.4",
-    "rimraf": "^6.1.2",
+    "cpx": "^1.5.0",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3",
-    "@sqrzro/prettier-config": "^4.0.0-alpha.1"
+    "@sqrzro/prettier-config": "^4.0.0-alpha.5"
   },
   "scripts": {
-    "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias",
+    "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias && pnpm build:css",
+    "build:css": "cpx \"./src/**/*.css\" ./dist",
     "clean": "rimraf ./dist",
-    "dev": "(concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")"
+    "dev": "pnpm build:css && (concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc-alias -w\")",
+    "prettier": "prettier --write \"**/*.(cjs|cts|js|jsx|mjs|mts|ts|tsx)\""
   }
 }

package/dist/config.d.ts

@@ -1,3 +0,0 @@
-import type { RegisteredClassNames } from '@sqrzro/ui/styles';
-declare const classNames: RegisteredClassNames;
-export default classNames;

package/dist/config.js

@@ -1,141 +0,0 @@
-import { tw, twx } from '@sqrzro/ui/styles';
-const showClosed = 'transition-discrete transition-all duration-100 invisible opacity-0 ease-in-out scale-90';
-const showOpen = 'starting:opacity-0 starting:scale-90 visible opacity-100 scale-100';
-const classNames = twx({
-    actionList: {
-        root: tw('flex items-center gap-2 [&_li]:first:mr-auto'),
-    },
-    appNavigation: {
-        root: 'h-full pl-6',
-        list: 'flex h-full items-center gap-4',
-        item: { default: 'relative h-full' },
-        link: {
-            default: 'relative flex h-full items-center px-1 font-semibold text-white/80 hover:text-white',
-            highlighted: 'before:bg-primary text-white before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1',
-        },
-    },
-    button: {
-        root: {
-            danger: 'border-red-500 bg-white text-red-500',
-            default: 'h-10 rounded border border-slate-300 bg-white px-5 text-sm text-slate-600',
-            primary: 'bg-button-bg hover:bg-button-bg-hover text-button-text border-none font-semibold transition-colors',
-            link: 'text-link h-auto w-auto border-0 bg-transparent p-0',
-        },
-        icon: '-ml-1.5 h-4 w-4',
-    },
-    container: {
-        root: 'mx-auto w-full max-w-6xl px-8',
-    },
-    dropdown: {
-        item: {
-            default: 'block border-b border-slate-100 p-3 text-sm text-slate-700',
-            selected: 'bg-slate-100',
-        },
-    },
-    editableForm: {
-        root: 'grid grid-cols-[25%_1fr] gap-20 rounded bg-white 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: {
-        root: 'grid grid-cols-[30%_1fr] gap-x-4 border-t border-slate-200 py-4',
-        label: 'flex items-center font-semibold',
-        field: 'col-start-2 flex min-h-10 items-center overflow-hidden',
-    },
-    filterBar: {
-        root: 'bg-red-500',
-    },
-    form: {
-        root: 'flex flex-col gap-6',
-    },
-    formField: {
-        label: 'mb-2 flex justify-between font-semibold leading-none',
-        details: 'mb-2 text-xs font-normal text-slate-500',
-        optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
-        error: 'text-error mt-2 flex items-start gap-1.5 before:mt-0.5 before:h-4 before:w-4 before:flex-none before:rounded-full before:bg-[url(/admin/images/danger.svg)] before:bg-contain',
-    },
-    listItem: {
-        root: { default: 'bg-red-500' },
-    },
-    modal: {
-        root: 'starting:open:backdrop:opacity-0 py-16 backdrop:bg-slate-700/50 backdrop:transition-all backdrop:duration-500 open:backdrop:opacity-100',
-        panel: `${showOpen} row-start-2 mx-auto flex w-full max-w-lg flex-col gap-6 rounded bg-white p-6 shadow-xl`,
-        content: 'flex flex-col gap-6 [&_p]:text-pretty',
-        icon: 'text-slate-400',
-        title: 'flex items-center gap-2 border-b border-slate-200 pb-6 text-lg font-semibold',
-        actions: 'border-t border-slate-200 pt-6',
-    },
-    pagination: {
-        root: 'mx-auto flex w-full justify-between',
-        list: 'mx-auto flex flex-row items-center gap-1',
-        link: {
-            default: 'inline-flex h-9 w-9 items-center justify-center whitespace-nowrap rounded-md border border-transparent text-sm font-medium hover:bg-slate-100 disabled:pointer-events-none disabled:opacity-30',
-            highlighted: 'border-slate-200 bg-white shadow-sm',
-        },
-        gap: 'flex h-9 w-9 items-center justify-center text-xs text-slate-400',
-        navigation: 'inline-flex h-9 items-center justify-center gap-1 whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium hover:bg-slate-100',
-    },
-    popover: {
-        root: {
-            default: `${showClosed} z-20 my-1.5 w-full rounded border border-slate-300 bg-white text-slate-700 shadow-md`,
-            focused: `${showOpen}`,
-        },
-    },
-    rootLayout: {
-        root: 'overflow-x-hidden overflow-y-scroll bg-slate-50 font-sans text-sm text-slate-800 has-[[data-modal][open]]:overflow-hidden',
-        content: 'flex min-h-screen flex-col',
-    },
-    staticTextInput: {
-        root: {
-            default: 'text-md flex min-h-10 flex-col justify-center rounded border border-slate-300 bg-white p-3',
-            error: 'border-red-500',
-        },
-        label: 'block leading-none',
-        meta: 'mt-1.5 block text-xs leading-none text-slate-500',
-        placeholder: 'block leading-none text-slate-400',
-    },
-    switch: {
-        root: tw('flex', 'gap-4'),
-        control: tw('relative flex-none', 'h-6 w-10'),
-        input: {
-            default: tw('block h-full w-full cursor-pointer rounded-full transition-colors', 'bg-slate-300'),
-            checked: tw('bg-primary'),
-        },
-        icon: {
-            default: tw('pointer-events-none absolute top-1/2 -translate-y-1/2 translate-x-0 transform rounded-full transition-transform duration-100', 'left-1 h-4 w-4 bg-white shadow-md'),
-            checked: tw('translate-x-full'),
-        },
-        label: 'flex min-h-6 flex-col justify-center',
-        details: 'mt-1 block text-xs text-slate-500',
-    },
-    table: {
-        root: 'rounded bg-white p-8 shadow',
-        row: {
-            default: 'odd:bg-slate-100',
-        },
-        cell: 'p-4',
-    },
-    tabs: {
-        root: '-mt-4 mb-8 border-b border-slate-700',
-        list: 'flex gap-4',
-        link: {
-            default: 'block border-b-4 border-transparent px-1 pb-2 font-semibold opacity-80 hover:opacity-100',
-            highlighted: 'border-primary opacity-100',
-        },
-    },
-    textInput: {
-        root: {
-            default: 'text-md focus:border-primary h-10 rounded border border-slate-300 px-3 placeholder-slate-400',
-            error: 'border-red-500',
-        },
-        prefix: {
-            default: 'peer-focus:border-primary relative -mr-1 rounded-l border border-slate-300 bg-white px-3 text-sm text-slate-600',
-        },
-        suffix: {
-            default: 'peer-focus:border-primary relative -ml-1 rounded-r border border-slate-300 bg-white px-3 text-sm text-slate-600',
-        },
-        loading: 'text-slate-400',
-    },
-});
-export default classNames;