@sqrzro/admin 4.0.0-alpha.13 → 4.0.0-alpha.16

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: "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 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?.site.name })] }), _jsx(AppNavigation, { data: config?.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/AdminRootLayout/index.js

@@ -1,9 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { RootLayout } from '@sqrzro/ui/components';
-import { registerClassNames } from '@sqrzro/ui/styles';
-import classNameConfig from '../../styles/config';
-registerClassNames(classNameConfig);
+import { AppBody } from '@sqrzro/ui/components';
+import AdminUIProvider from '../AdminUIProvider';
 function AdminRootLayout({ children }) {
-    return _jsx(RootLayout, { 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/index.d.ts

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

package/dist/index.js

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

package/dist/styles/{config.d.ts → classnames.d.ts}

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

package/dist/styles/{config.js → classnames.js}

@@ -1,5 +1,5 @@
 import { twx } from '@sqrzro/ui/styles';
-const classNames = twx({
+const classNameConfig = twx({
     actionList: {
         root: 'flex items-center gap-2 [&_li]:first:mr-auto',
     },
@@ -13,9 +13,14 @@ const classNames = twx({
                 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',
@@ -52,20 +57,36 @@ const classNames = twx({
             props: {
                 isDanger: 'border-red-500 bg-white text-red-500',
                 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-teal-500 from-teal-300 to-teal-400 font-semibold text-slate-800 shadow-sm transition-colors',
+                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',
-        day: { default: '', props: { isHighlighted: 'bg-red-200', isSelected: 'bg-blue-200' } },
-        control: 'h-4 w-4 rounded bg-red-200',
+        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: '-ml-px h-8 w-[calc(100%+2px)]',
+            props: { isHighlighted: 'bg-primary/30', isSelected: 'bg-primary/40' },
+        },
     },
     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: 'block border-b border-slate-100 p-3 text-sm text-slate-700',
@@ -107,14 +128,14 @@ const classNames = twx({
         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-10',
+                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: 'min-w-56',
+        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',
     },
@@ -126,7 +147,16 @@ const classNames = twx({
         root: 'flex flex-col gap-6',
     },
     formField: {
-        label: 'mb-2 flex justify-between font-semibold leading-none',
+        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: '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',
@@ -167,7 +197,7 @@ const classNames = twx({
         root: 'flex flex-wrap items-center gap-x-4 gap-y-1 text-slate-500',
     },
     menu: {
-        link: 'block min-w-36 border-b border-slate-100 p-3 text-left text-sm text-slate-700',
+        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',
@@ -187,12 +217,21 @@ 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',
     },
+    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: {
-            default: 'h-6 w-6 overflow-hidden bg-red-500 bg-no-repeat indent-12',
-            states: { isSelected: 'bg-green-500' },
-        },
+        icon: 'h-6 w-6 overflow-hidden bg-no-repeat indent-12 text-slate-700',
     },
     popover: {
         root: {
@@ -201,15 +240,12 @@ const classNames = twx({
         },
     },
     reference: {
-        root: { default: 'flex items-center gap-2', props: { isTitle: 'gap-4' } },
+        root: { default: 'inline-flex items-center gap-2', props: { isTitle: 'gap-4' } },
         reference: {
-            default: 'rounded bg-slate-200 px-2 py-1 text-[70%]',
+            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' },
         },
     },
-    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',
@@ -224,6 +260,8 @@ const classNames = twx({
         label: 'block leading-none',
         details: 'mt-1.5 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',
@@ -276,5 +314,14 @@ const classNames = twx({
         },
         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 classNames;
+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,17 @@
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, EyeIcon, EyeSlashIcon, XMarkIcon, } from '@heroicons/react/16/solid';
+import { ArrowUpTrayIcon, CheckCircleIcon, 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,
+    'passwordComplexity.invalid': XCircleIcon,
+    'passwordComplexity.valid': CheckCircleIcon,
+    'passwordInput.visible': EyeIcon,
+    'passwordInput.hidden': EyeSlashIcon,
+    'staticTextInput.clear': XMarkIcon,
+};
+export default iconConfig;

package/dist/utility/interfaces.d.ts

@@ -1,9 +1,6 @@
+import { AppConfig } from '@sqrzro/config';
 import type { NavigationObject } from '@sqrzro/ui/navigation';
-export interface AdminConfig {
-    app: {
-        name: string;
-        url: string;
-    };
+export interface AdminConfig extends AppConfig {
     navigation: NavigationObject[];
 }
 export interface User {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "4.0.0-alpha.13",
+  "version": "4.0.0-alpha.16",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -18,12 +18,14 @@
     "dist/**/*"
   ],
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tailwindcss": "^4.2.1",
-    "@sqrzro/addon-auth": "^4.0.0-alpha.3",
-    "@sqrzro/ui": "^4.0.0-alpha.38"
+    "@sqrzro/addon-auth": "^4.0.0-alpha.6",
+    "@sqrzro/config": "^4.0.0-alpha.3",
+    "@sqrzro/ui": "^4.0.0-alpha.41"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",