@sqrzro/admin 2.1.0-bz.17 → 2.1.0-bz.19

package/dist/styles/config.js

@@ -27,14 +27,38 @@ const classNames = twx({
         control: 'h-6 w-6 rounded-full border border-slate-300',
         previous: '-order-1',
     }),
+    checkboxInput: (props) => ({
+        root: tw('flex', props?.isInline ? 'gap-6' : 'flex-col gap-2'),
+        icon: {
+            default: 'h-5 w-5 rounded border border-slate-300',
+            checked: 'border-primary bg-primary relative before:absolute before:inset-0.5 before:bg-[url(/admin/images/check-white.svg)] before:bg-contain',
+        },
+        label: 'flex min-h-5 items-center pl-2',
+    }),
     codeInput: () => ({
         input: {
             default: 'focus:border-primary h-10 rounded border border-slate-300 text-center',
             error: 'border-red-500',
         },
     }),
+    definitionList: () => ({
+        root: 'flex flex-col gap-4',
+        row: 'relative border-b border-slate-200 pb-4',
+        term: 'pb-1 text-slate-500',
+    }),
+    dropdown: () => ({
+        list: 'overflow-hidden rounded',
+        item: {
+            default: 'block border-b border-slate-100 p-3 text-sm text-slate-700',
+            selected: 'bg-slate-100',
+        },
+        title: 'block leading-none',
+        meta: 'mt-1.5 block text-xs leading-none text-slate-500',
+        icon: 'mr-2 h-5 w-5 bg-[url(/admin/images/chevron.svg)] bg-contain bg-center bg-no-repeat',
+        clear: 'mr-2 h-4 w-4 bg-[url(/admin/images/close.svg)] bg-contain bg-center bg-no-repeat',
+    }),
     editableFieldset: () => ({
-        root: 'bg-panel grid grid-cols-[30%_1fr] gap-8 rounded p-8 shadow',
+        root: 'bg-panel grid grid-cols-[25%_1fr] gap-20 rounded 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',
@@ -45,18 +69,13 @@ const classNames = twx({
         field: 'flex min-h-10 items-center',
     }),
     emptyMessage: (props) => ({
-        root: tw('relative mx-auto mt-4 w-full max-w-2xl p-16 text-center text-slate-500', props?.isMinimal
+        root: tw('@md:p-16 relative mx-auto mt-4 w-full max-w-2xl p-4 text-center text-slate-500', props?.isMinimal
             ? null
             : 'rounded bg-white shadow before:pointer-events-none before:absolute before:inset-2 before:border-2 before:border-dashed'),
-        title: 'mb-2 text-pretty text-xl font-semibold leading-tight',
-        description: 'text-pretty',
+        title: '@md:text-xl mb-2 text-pretty font-semibold leading-tight',
+        description: '@md:text-sm text-pretty text-xs',
         action: 'mt-6 flex justify-center',
     }),
-    dropdown: () => ({
-        item: { default: 'block p-3 text-sm text-slate-700', selected: 'bg-slate-100' },
-        title: 'block leading-none',
-        meta: 'mt-0.5 block text-xs leading-none text-slate-500',
-    }),
     fieldset: () => ({
         root: 'rounded bg-white p-8 shadow',
         title: 'mb-8 text-lg font-semibold leading-none text-slate-700',
@@ -66,14 +85,13 @@ const classNames = twx({
     }),
     formField: (props) => ({
         root: {
-            default: props?.isEditable
-                ? 'grid grid-cols-[25%_1fr] border-t border-slate-200 py-4'
-                : '',
+            default: tw(props?.isEditable ? 'grid grid-cols-[25%_1fr] border-t border-slate-200 py-4' : ''),
         },
         label: tw('flex font-semibold leading-none', props?.isEditable ? 'items-center' : 'mb-2 justify-between'),
-        details: 'mb-2 text-xs font-normal leading-none text-slate-500',
+        field: tw(props?.isEditable ? 'flex min-h-10 flex-col justify-center' : ''),
+        details: tw('text-xs font-normal text-slate-500', props?.isEditable ? 'col-start-2 row-start-2 mt-2' : 'mb-2'),
         optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
-        error: tw('mt-2 flex items-center gap-2 text-red-700 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/error.svg)]', props?.isEditable ? 'col-start-2' : ''),
+        error: tw('mt-2 flex items-center gap-1.5 text-red-600 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/danger.svg)] before:bg-contain', props?.isEditable ? 'col-start-2' : ''),
     }),
     imageInput: () => ({
         root: 'h-64 rounded border border-slate-300 bg-slate-50 p-8',
@@ -82,16 +100,20 @@ const classNames = twx({
         description: 'text-xs italic text-slate-700',
     }),
     inputPanel: () => ({
-        root: 'show mt-1 origin-top rounded border border-slate-300 bg-white shadow-md',
+        root: 'show my-1 origin-top rounded border border-slate-300 bg-white shadow-md',
+    }),
+    loadingModal: () => ({
+        root: 'open:backdrop:fade py-16 backdrop:bg-slate-700/50 backdrop:backdrop-blur-sm',
+        panel: 'text-center text-lg font-semibold text-white',
     }),
     modal: () => ({
         root: 'open:backdrop:fade py-16 backdrop:bg-slate-700/50 backdrop:backdrop-blur-sm',
         panel: 'show bg-panel row-start-2 mx-auto w-full max-w-lg rounded p-6 text-left shadow-xl',
         title: 'mb-6 text-lg font-semibold',
-        actions: 'flex justify-end',
+        actions: 'flex justify-end border-t border-slate-200 pt-6',
     }),
     multiInput: () => ({
-        root: 'flex flex-col gap-2',
+        root: 'flex flex-col gap-2 pt-2',
         row: 'grid grid-cols-[1fr_auto] has-[>_button]:gap-2',
     }),
     objectInput: () => ({
@@ -103,24 +125,35 @@ const classNames = twx({
             selected: 'bg-bottom',
         },
     }),
+    radioInput: (props) => ({
+        root: tw('flex', props?.isInline ? 'gap-6' : 'flex-col gap-2'),
+        icon: {
+            default: 'h-5 w-5 rounded border border-slate-300',
+            checked: 'border-primary bg-primary relative before:absolute before:inset-0.5 before:bg-[url(/admin/images/check-white.svg)] before:bg-contain',
+        },
+        label: 'flex min-h-5 items-center pl-2',
+    }),
     staticTextInput: () => ({
         root: {
-            default: 'text-md h-10 rounded border border-slate-300 bg-white px-3',
+            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 block text-xs leading-none text-slate-500',
+        placeholder: 'block leading-none text-slate-500',
     }),
     switch: () => ({
         root: 'flex gap-4',
         input: {
             default: 'h-6 w-10 flex-none cursor-pointer rounded-full bg-slate-300 p-1 transition-colors',
-            checked: 'bg-green-500',
+            checked: 'bg-primary',
         },
         control: {
             default: 'h-4 w-4 translate-x-0 transform rounded-full bg-white shadow-md transition-transform',
             checked: 'translate-x-full',
         },
-        label: 'font-semibold',
-        details: 'block text-xs text-slate-500',
+        label: 'block flex min-h-6 flex-col justify-center',
+        details: 'mt-1 block text-xs text-slate-500',
     }),
     textArea: () => ({
         root: {
@@ -136,6 +169,9 @@ const classNames = twx({
             default: 'text-md focus:border-primary h-10 rounded border border-slate-300 px-3',
             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',
+        },
     }),
     toast: () => ({
         root: {

package/dist/styles/tailwind.d.ts

@@ -6,5 +6,5 @@ interface Theme {
         primary: string;
     }>;
 }
-declare function config(resolves: string[], customization?: Theme): Record<string, unknown>;
+declare function config(resolves: string[], customization: Theme, plugins: unknown[]): Record<string, unknown>;
 export default config;

package/dist/styles/tailwind.js

@@ -1,6 +1,6 @@
 import path from 'path';
-import plugin from 'tailwindcss/plugin';
-function config(resolves, customization) {
+import plugin from 'tailwindcss/plugin'; // eslint-disable-line import/no-extraneous-dependencies
+function config(resolves, customization, plugins) {
     return {
         content: [
             './app/**/*.tsx',
@@ -24,6 +24,7 @@ function config(resolves, customization) {
             },
         },
         plugins: [
+            ...plugins,
             plugin(({ addBase, addUtilities, theme }) => {
                 addBase({
                     body: {
@@ -38,6 +39,9 @@ function config(resolves, customization) {
                     'body.dark': {
                         '--color-panel': theme('colors.gray.700'),
                     },
+                    strong: {
+                        fontWeight: theme('fontWeight.semibold'),
+                    },
                 });
                 addUtilities({
                     '@keyframes show': {

package/package.json

@@ -1,28 +1,35 @@
 {
   "name": "@sqrzro/admin",
-  "version": "2.1.0-bz.17",
+  "type": "module",
+  "version": "2.1.0-bz.19",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
+  "exports": {
+    ".": "./dist/index.js",
+    "./postcss": "./postcss.cjs",
+    "./tailwind": "./tailwind.cjs"
+  },
   "files": [
-    "dist",
-    "postcss.js",
-    "tailwind.js",
+    "dist/**/*",
+    "postcss.cjs",
+    "tailwind.cjs",
     "tailwind.d.ts"
   ],
   "dependencies": {
     "@sqrzro/components": "bz",
     "@sqrzro/hooks": "bz",
     "@sqrzro/interfaces": "bz",
-    "next": "^14.1.3",
-    "react": "18.3.0-canary-98b8359f6-20240223",
-    "react-dom": "18.3.0-canary-98b8359f6-20240223"
+    "@sqrzro/utility": "bz",
+    "next": "^14.1.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@sqrzro/eslint-plugin": "bz",
     "@sqrzro/prettier-config": "bz",
     "@sqrzro/tailwind-plugin": "bz",
@@ -34,6 +41,7 @@
     "@storybook/react": "^7.6.17",
     "@storybook/react-webpack5": "7.0.7",
     "@storybook/testing-library": "^0.1.0",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -41,7 +49,8 @@
     "@types/bcrypt": "^5.0.2",
     "@types/jest": "^29.5.12",
     "@types/node": "18.14.6",
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.24",
     "babel-loader": "^8.3.0",
     "concurrently": "^7.6.0",
     "eslint": "^8.57.0",
@@ -50,13 +59,15 @@
     "prettier": "^3.2.5",
     "rimraf": "^4.4.1",
     "storybook": "^7.6.17",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.4.2"
+    "tailwindcss": "^3.4.3",
+    "tslib": "^2.6.2",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.4"
   },
   "scripts": {
-    "build": "pnpm clean && tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json",
     "clean": "rimraf ./dist",
-    "dev": "tsc -p tsconfig.build.json -w",
+    "dev": "pnpm build --watch",
     "docs": "storybook dev -p 6006",
     "lint": "tsc --noEmit && eslint \"./src/**/*.tsx\" \"./src/**/*.ts\"",
     "prettier": "prettier --write \"./src/**/*.tsx\" \"./src/**/*.ts\"",

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export type IconType = 'danger' | 'error' | 'info' | 'success' | 'warning';
-declare const icons: Record<IconType, () => React.ReactElement>;
-export interface IconProps {
-    type?: keyof typeof icons;
-}
-declare function Icon({ type }: Readonly<IconProps>): React.ReactElement | null;
-export default Icon;

package/dist/components/Icon/index.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import ErrorIcon from '../../icons/ErrorIcon';
-import InfoIcon from '../../icons/InfoIcon';
-import SuccessIcon from '../../icons/SuccessIcon';
-import WarningIcon from '../../icons/WarningIcon';
-const icons = {
-    danger: ErrorIcon,
-    error: ErrorIcon,
-    info: InfoIcon,
-    success: SuccessIcon,
-    warning: WarningIcon,
-};
-function Icon({ type }) {
-    if (!type) {
-        return null;
-    }
-    const IconComponent = icons[type];
-    if (!IconComponent) {
-        return null;
-    }
-    return _jsx(IconComponent, {});
-}
-export default Icon;

package/dist/icons/ErrorIcon/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function ErrorIcon(): React.ReactElement;
-export default ErrorIcon;

package/dist/icons/ErrorIcon/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function ErrorIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 text-red-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z", fillRule: "evenodd" }) }));
-}
-export default ErrorIcon;

package/dist/icons/InfoIcon/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function InfoIcon(): React.ReactElement;
-export default InfoIcon;

package/dist/icons/InfoIcon/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function InfoIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { clipRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z", fillRule: "evenodd" }) }));
-}
-export default InfoIcon;

package/dist/icons/SuccessIcon/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function SuccessIcon(): React.ReactElement;
-export default SuccessIcon;

package/dist/icons/SuccessIcon/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function SuccessIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 text-green-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { clipRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z", fillRule: "evenodd" }) }));
-}
-export default SuccessIcon;

package/dist/icons/WarningIcon/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function WarningIcon(): React.ReactElement;
-export default WarningIcon;

package/dist/icons/WarningIcon/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-function WarningIcon() {
-    return (_jsx("svg", { "aria-hidden": "true", className: "h-5 w-5 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { clipRule: "evenodd", d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z", fillRule: "evenodd" }) }));
-}
-export default WarningIcon;

package/dist/services/LayoutService.d.ts

@@ -1,7 +0,0 @@
-import type { SerializedErrorable } from '@sqrzro/interfaces';
-type Layout = 'sidebar' | 'topbar';
-export declare function getLayout(): Promise<string>;
-export declare function submitLayoutForm(formData: {
-    layout: Layout;
-}): Promise<SerializedErrorable<boolean>>;
-export {};