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

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

@@ -0,0 +1,4 @@
+import type { AuthProps } from '@sqrzro/auth';
+type AdminAuthProps = Omit<AuthProps, 'classNameProps' | 'classNames'>;
+declare function AdminAuth(props: AdminAuthProps): React.ReactElement;
+export default AdminAuth;

package/dist/components/AdminAuth/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Auth } from '@sqrzro/auth';
+import { twx } from '@sqrzro/ui/styles';
+const authClassNames = twx({
+    actions: 'mt-2 w-full',
+    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',
+});
+function AdminAuth(props) {
+    return _jsx(Auth, { classNames: authClassNames, ...props });
+}
+export default AdminAuth;

package/dist/config.js

@@ -1,9 +1,7 @@
-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';
+import { twx } from '@sqrzro/ui/styles';
 const classNames = twx({
     actionList: {
-        root: tw('flex items-center gap-2 [&_li]:first:mr-auto'),
+        root: 'flex items-center gap-2 [&_li]:first:mr-auto',
     },
     appNavigation: {
         root: 'h-full pl-6',
@@ -11,15 +9,18 @@ const classNames = twx({
         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',
+            states: {
+                isHighlighted: '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',
+            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',
+            },
         },
         icon: '-ml-1.5 h-4 w-4',
     },
@@ -29,7 +30,7 @@ const classNames = twx({
     dropdown: {
         item: {
             default: 'block border-b border-slate-100 p-3 text-sm text-slate-700',
-            selected: 'bg-slate-100',
+            states: { isSelected: 'bg-slate-100' },
         },
     },
     editableForm: {
@@ -55,12 +56,19 @@ 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',
     },
+    list: {
+        root: 'flex flex-col gap-4',
+    },
     listItem: {
-        root: { default: 'bg-red-500' },
+        root: 'rounded bg-white p-4 shadow',
+        title: 'text-base font-semibold',
+    },
+    listItemMeta: {
+        root: 'mt-1.5 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',
-        panel: `${showOpen} row-start-2 mx-auto flex w-full max-w-lg flex-col gap-6 rounded bg-white p-6 shadow-xl`,
+        panel: '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',
@@ -71,43 +79,42 @@ const classNames = twx({
         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',
+            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',
     },
     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}`,
+            default: 'show-closed z-20 my-1.5 w-full rounded border border-slate-300 bg-white text-slate-700 shadow-md',
+            states: { isFocused: 'show-open' },
         },
     },
     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',
+        root: 'bg-slate-50 font-sans text-sm text-slate-800',
     },
     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',
+            states: { isError: 'border-red-500' },
         },
         label: 'block leading-none',
-        meta: 'mt-1.5 block text-xs leading-none text-slate-500',
+        details: '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'),
+        root: 'flex gap-4',
+        control: 'relative h-6 w-10 flex-none',
         input: {
-            default: tw('block h-full w-full cursor-pointer rounded-full transition-colors', 'bg-slate-300'),
-            checked: tw('bg-primary'),
+            default: 'block h-full w-full cursor-pointer rounded-full bg-slate-300 transition-colors',
+            states: { isChecked: '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'),
+            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',
+        // 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',
@@ -121,13 +128,13 @@ const classNames = twx({
         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',
+            states: { isHighlighted: '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',
+            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',

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 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';

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 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';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/admin",
   "type": "module",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -12,8 +12,8 @@
     "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"
+    "@sqrzro/auth": "^4.0.0-alpha.9",
+    "@sqrzro/ui": "^4.0.0-alpha.15"
   },
   "devDependencies": {
     "@types/react": "^19.2.7",