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

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

@@ -1,7 +1,8 @@
-import type { AdminConfig } from '../../utility/interfaces';
+import type { AdminConfig, User } from '../../utility/interfaces';
 interface AdminAppLayoutProps {
     readonly children: React.ReactNode;
     readonly config?: AdminConfig;
+    readonly userFn?: () => Promise<User>;
 }
-declare function AdminAppLayout({ children, config }: AdminAppLayoutProps): React.ReactElement;
+declare function AdminAppLayout({ children, config, userFn }: AdminAppLayoutProps): React.ReactElement;
 export default AdminAppLayout;

package/dist/components/AdminAppLayout/index.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense } from 'react';
 import { Link } from '@sqrzro/ui/components';
 import { AppNavigation } from '@sqrzro/ui/navigation';
-function AdminAppLayout({ children, config }) {
-    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("main", { className: "@container mb-10 block flex flex-1 flex-col", children: children })] }));
+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 })] }));
 }
 export default AdminAppLayout;

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

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

package/dist/components/AdminLayout/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Page } from '@sqrzro/ui/components';
+import AdminPageComponent from '../AdminPageComponent';
+function AdminLayout(props) {
+    return (_jsx(Page, { ...props, children: props.layoutProps.children, pageProps: props.layoutProps, template: (templateProps) => _jsx(AdminPageComponent, { ...templateProps }) }));
+}
+export default AdminLayout;

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

@@ -1,6 +1,4 @@
-interface AdminPageProps {
-    readonly children: React.ReactNode;
-    readonly title: string;
-}
-declare function AdminPage({ children, title }: AdminPageProps): React.ReactElement;
+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;
 export default AdminPage;

package/dist/components/AdminPage/index.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { Container } from '@sqrzro/ui/components';
-function AdminPage({ children, title }) {
-    return (_jsxs(Fragment, { children: [_jsx("header", { className: "bg-slate-800 pb-16 text-white", children: _jsx(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" })] }) }) }), _jsx(Container, { children: _jsx("div", { className: "@container -mt-16 flex flex-col gap-8", children: children }) })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Page } from '@sqrzro/ui/components';
+import AdminPageComponent from '../AdminPageComponent';
+function AdminPage(props) {
+    return (_jsx(Page, { ...props, template: (templateProps) => _jsx(AdminPageComponent, { ...templateProps }) }));
 }
 export default AdminPage;

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

@@ -0,0 +1,8 @@
+import { NavigationObject } from '@sqrzro/ui/navigation';
+interface AdminPageComponentProps {
+    children: React.ReactNode;
+    tabs: NavigationObject[] | null;
+    title: React.ReactNode;
+}
+declare function AdminPageComponent({ children, tabs, title, }: Readonly<AdminPageComponentProps>): React.ReactElement;
+export default AdminPageComponent;

package/dist/components/AdminPageComponent/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) })] }));
+}
+export default AdminPageComponent;

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

@@ -0,0 +1,6 @@
+import type { User } from '../../utility/interfaces';
+interface MePanelProps {
+    readonly userFn?: () => Promise<User>;
+}
+declare function MePanel({ userFn }: MePanelProps): Promise<React.ReactElement | null>;
+export default MePanel;

package/dist/components/MePanel/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogoutButton } from '@sqrzro/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" })] }));
+}
+export default MePanel;

package/dist/config.js

@@ -1,5 +1,10 @@
-import { twx } from '@sqrzro/ui/styles';
+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',
@@ -21,15 +26,41 @@ const classNames = twx({
     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: 'show row-start-2 mx-auto flex w-full max-w-lg flex-col gap-6 rounded bg-white p-6 shadow-xl',
+        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',
@@ -45,10 +76,54 @@ const classNames = twx({
         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',

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './utility/interfaces';
 export { default as classNames } from './config';
 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 AdminRootLayout } from './components/AdminRootLayout';

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from './utility/interfaces';
 export { default as classNames } from './config';
 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 AdminRootLayout } from './components/AdminRootLayout';

package/dist/utility/interfaces.d.ts

@@ -6,3 +6,7 @@ export interface AdminConfig {
     };
     navigation: NavigationObject[];
 }
+export interface User {
+    id: string;
+    name: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0-alpha.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -9,10 +9,11 @@
     "dist/**/*"
   ],
   "dependencies": {
-    "next": "^16.0.8",
-    "react": "^19.2.1",
+    "next": "^16.1.6",
+    "react": "^19.2.4",
     "react-dom": "^19.2.1",
-    "@sqrzro/ui": "^4.0.0-alpha.0"
+    "@sqrzro/ui": "^4.0.0-alpha.5",
+    "@sqrzro/auth": "^4.0.0-alpha.5"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
@@ -22,7 +23,7 @@
     "rimraf": "^6.1.2",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3",
-    "@sqrzro/prettier-config": "^4.0.0-alpha.0"
+    "@sqrzro/prettier-config": "^4.0.0-alpha.1"
   },
   "scripts": {
     "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias",