@sqrzro/admin 4.0.0-alpha.6 → 4.0.0-alpha.8

package/dist/components/AdminAppLayout/index.js

@@ -4,6 +4,6 @@ import { Link } from '@sqrzro/ui/components';
 import { AppNavigation } from '@sqrzro/ui/navigation';
 import MePanel from '../MePanel';
 function AdminAppLayout({ children, config, logo, 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: [_jsxs(Link, { className: "h-9 w-9", href: "/", children: [logo, _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 })] }));
+    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: config?.app.name })] }), _jsx(AppNavigation, { data: config?.navigation || [] }), _jsx(Suspense, { children: _jsx(MePanel, { userFn: userFn }) })] }) }), _jsx("main", { className: "mb-10 block 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,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RootLayout } from '@sqrzro/ui/components';
-import classNameConfig from '../../config';
+import classNameConfig from '../../styles/config';
 function AdminRootLayout({ children }) {
     return _jsx(RootLayout, { classNameConfig: classNameConfig, children: children });
 }

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export * from './utility/interfaces';
-export { default as classNames } from './config';
+export { default as classNames } from './styles/config';
 export { default as AdminAppLayout } from './components/AdminAppLayout';
 export { default as AdminAuth } from './components/AdminAuth';
 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,8 +1,9 @@
 export * from './utility/interfaces';
-export { default as classNames } from './config';
+export { default as classNames } from './styles/config';
 export { default as AdminAppLayout } from './components/AdminAppLayout';
 export { default as AdminAuth } from './components/AdminAuth';
 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/{config.js → styles/config.js}

@@ -14,12 +14,35 @@ const classNames = twx({
             },
         },
     },
+    badge: {
+        root: {
+            default: 'inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600',
+            props: {
+                isDanger: 'bg-red-100 text-red-700',
+                isError: 'bg-red-100 text-red-700',
+                isInfo: 'bg-sky-100 text-sky-700',
+                isWarning: 'bg-yellow-100 text-yellow-700',
+                isSuccess: 'bg-green-100 text-green-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',
-                isPrimary: 'bg-button-bg hover:bg-button-bg-hover text-button-text border-none font-semibold transition-colors',
+                isOnDark: 'border-slate-400 bg-transparent text-white hover:bg-white/10',
+                isPrimary: 'bg-linear-to-b hover:bg-button-bg-hover border border-none border-fuchsia-500 from-fuchsia-300 to-fuchsia-400 font-semibold text-slate-700 shadow-sm transition-colors',
             },
         },
         icon: '-ml-1.5 h-4 w-4',
@@ -34,7 +57,7 @@ const classNames = twx({
         },
     },
     editableForm: {
-        root: 'grid grid-cols-[25%_1fr] gap-20 rounded bg-white p-8 shadow',
+        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',
@@ -56,15 +79,33 @@ const classNames = twx({
         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',
     },
+    infoPanel: {
+        root: {
+            default: 'flex w-full gap-2 rounded p-4 text-left',
+            props: {
+                isDanger: 'bg-red-100 text-red-700',
+                isError: 'bg-red-100 text-red-700',
+                isInfo: 'bg-sky-100 text-sky-700',
+                isSuccess: 'bg-green-100 text-green-700',
+                isWarning: 'border border-yellow-300 bg-gradient-to-br from-yellow-100 to-yellow-200 text-yellow-700',
+            },
+        },
+    },
     list: {
-        root: 'flex flex-col gap-4',
+        root: {
+            default: 'page-content-block flex flex-col gap-4',
+            props: { isMinimal: 'gap-0 border-t border-slate-200' },
+        },
     },
     listItem: {
-        root: 'rounded bg-white p-4 shadow',
+        root: {
+            default: 'rounded bg-white p-4 shadow',
+            props: { isMinimal: 'border-b border-slate-200 px-0 shadow-none' },
+        },
         title: 'text-base font-semibold',
     },
     listItemMeta: {
-        root: 'mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-slate-500',
+        root: 'mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-slate-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',
@@ -100,6 +141,12 @@ const classNames = twx({
     rootLayout: {
         root: 'bg-slate-50 font-sans text-sm text-slate-800',
     },
+    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 justify-center rounded border border-slate-300 bg-white p-3',
@@ -124,7 +171,7 @@ const classNames = twx({
         // details: 'mt-1 block text-xs text-slate-500',
     },
     table: {
-        root: 'rounded bg-white p-8 shadow',
+        root: 'page-content-block rounded bg-white p-8 shadow',
         row: {
             default: 'odd:bg-slate-100',
         },

package/dist/styles/styles.css

@@ -0,0 +1,5 @@
+@import "@sqrzro/ui/styles.css";
+
+@theme {
+    --color-primary: var(--color-teal-600);
+}

package/dist/utility/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { NavigationObject } from 'node_modules/@sqrzro/ui/dist/navigation/interfaces';
+import type { NavigationObject } from '@sqrzro/ui/navigation';
 export interface AdminConfig {
     app: {
         name: string;

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.8",
   "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/**/*"
   ],
@@ -12,13 +21,15 @@
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.1",
+    "tailwindcss": "^4.2.1",
     "@sqrzro/auth": "^4.0.0-alpha.11",
-    "@sqrzro/ui": "^4.0.0-alpha.20"
+    "@sqrzro/ui": "^4.0.0-alpha.26"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
+    "cpx": "^1.5.0",
     "prettier": "^3.7.4",
     "rimraf": "^6.1.2",
     "tsc-alias": "^1.8.16",
@@ -26,8 +37,9 @@
     "@sqrzro/prettier-config": "^4.0.0-alpha.1"
   },
   "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\")"
   }
 }