@yimingliao/cms 0.0.94 → 0.0.96

package/dist/{chunk-BVWT2DIB.js → chunk-FLKUBNE4.js}

@@ -1,12 +1,14 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { useState, useRef, useCallback, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 import { UAParser } from 'ua-parser-js';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 import { Loader2Icon } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 // src/client/applications/ui/utils.ts
 var cn = (...inputs) => {
@@ -42,6 +44,17 @@ var useCountdown = (initialTime) => {
   }, [isCounting]);
   return { timeLeft, isCounting, startCountdown };
 };
+var useParentPathname = () => {
+  const pathname = usePathname();
+  if (pathname === "/") return "/";
+  const index = pathname.lastIndexOf("/");
+  return index <= 0 ? "/" : pathname.slice(0, index);
+};
+
+// src/client/applications/ui/is-confirm.ts
+var isConfirm = (t, key = "ui.dialog.confirm.text") => {
+  return confirm(t(key));
+};
 function useDeviceInfo() {
   const [deviceInfo, setDeviceInfo] = useState(null);
   useEffect(() => {
@@ -384,5 +397,25 @@ function Label({ className, ...props }) {
     }
   );
 }
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
 
-export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Spinner, Textarea, cn, useCountdown, useDeviceInfo };
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Separator, Spinner, Textarea, cn, isConfirm, useCountdown, useDeviceInfo, useParentPathname };

package/dist/client/index.d.ts

@@ -6,9 +6,9 @@ import * as _tanstack_query_core from '@tanstack/query-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { c as createVerifyAction, a as createSignInAction, b as createVerifyEmailAction, d as createEmailUnverifiedAction, e as createForgotPasswordAction, f as createResetPasswordAction, g as createChangePasswordAction } from '../create-reset-password-action-D6aTuuqO.js';
 import * as React$1 from 'react';
-import { ComponentProps, ReactNode, HTMLAttributes } from 'react';
-import { L as LabelProps, B as ButtonProps$1 } from '../label-BF4qxS03.js';
+import { ReactNode, ComponentProps, HTMLAttributes } from 'react';
 import { LucideIcon } from 'lucide-react';
+import { B as ButtonProps$1, L as LabelProps } from '../label-BF4qxS03.js';
 import { ClassValue } from 'clsx';
 import 'zod';
 import 'zod/v4/core';
@@ -26,18 +26,18 @@ import 'class-variance-authority';
 import '@radix-ui/react-label';
 
 interface UIStates {
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    isError?: boolean;
+    isLoading?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    isError?: boolean | undefined;
 }
 interface FormContext<T> {
-    formData?: T;
-    setFormData?: React$1.Dispatch<React$1.SetStateAction<T>>;
+    formData?: T | undefined;
+    setFormData?: React$1.Dispatch<React$1.SetStateAction<T>> | undefined;
 }
 interface FieldContext {
-    fieldName?: string;
-    translations?: Translation[];
-    errors?: string[];
+    fieldName?: string | undefined;
+    translations?: Translation[] | undefined;
+    errors?: string[] | undefined;
 }
 interface FormFieldController<T = Record<string, unknown>> extends UIStates, FormContext<T>, FieldContext {
 }
@@ -349,6 +349,52 @@ declare function createAdminInitializer({ useAdmin, useQuery, verifyAction, }: {
     verifyAction: ReturnType<typeof createVerifyAction>;
 }): () => null;
 
+interface PageHeaderTitleProps {
+    icon?: LucideIcon;
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+    leftChildren?: ReactNode;
+    className?: string;
+}
+
+type Variant = "default" | "index" | "create" | "show" | "edit" | "batch" | "batch-create" | "trash";
+
+interface ButtonProps extends ButtonProps$1, UIStates {
+    icon?: LucideIcon | undefined;
+    href?: string | undefined;
+    openNewTab?: boolean | undefined;
+}
+declare function Button({ icon, href, openNewTab, isDisabled, isLoading, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps<T = Record<string, unknown>> extends ComponentProps<"input">, FormFieldController<T> {
+}
+declare function Input<T>({ fieldName, setFormData, isLoading, isDisabled, isError, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderProps {
+    titleProps?: PageHeaderTitleProps;
+    leftChildren?: ReactNode;
+    rightChildren?: ReactNode;
+    variant?: Variant;
+    returnButtonProps?: ButtonProps;
+    createButtonProps?: ButtonProps;
+    createCategoryButtonProps?: ButtonProps;
+    editButtonProps?: ButtonProps;
+    showButtonProps?: ButtonProps;
+    settingButtonProps?: ButtonProps;
+    batchButtonProps?: ButtonProps;
+    destroyButtonProps?: ButtonProps;
+    restoreButtonProps?: ButtonProps;
+    isLocked?: boolean;
+    isDisabled?: boolean;
+    isNotFound?: boolean;
+    batchCreateButtonHref?: string;
+    selectAllFn?: () => void;
+    cancelAllFn?: () => void;
+    showTopicSettingButton?: boolean;
+}
+declare function PageHeader(props: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
 declare function Form({ onSubmit, className, ...props }: ComponentProps<"form">): react_jsx_runtime.JSX.Element;
 
 interface FieldProps extends LabelProps {
@@ -367,16 +413,11 @@ interface FieldBodyProps extends HTMLAttributes<HTMLDivElement>, UIStates {
 }
 declare function FieldBody({ isLoading, isDisabled, isEmpty, className, backgroundClassName, childrenClassName, children, ...props }: FieldBodyProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends ButtonProps$1, UIStates {
-    icon?: LucideIcon;
-    href?: string;
-    openNewTab?: boolean;
-}
-declare function Button({ icon, href, openNewTab, isDisabled, isLoading, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function FieldsContainer({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
-interface InputProps<T = Record<string, unknown>> extends ComponentProps<"input">, FormFieldController<T> {
-}
-declare function Input<T>({ fieldName, setFormData, isLoading, isDisabled, isError, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+declare function MainFields({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function SideFields({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare function PasswordInput<T>({ ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
 
@@ -456,4 +497,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, Button, type ButtonProps, Field, FieldBody, Form, Input, type InputProps, PasswordInput, type ShowToastOption, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };
+export { AdminProvider, Button, type ButtonProps, Field, FieldBody, FieldsContainer, Form, Input, type InputProps, MainFields, PageHeader, PasswordInput, type ShowToastOption, SideFields, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -1,12 +1,12 @@
-import { cn, Label, Spinner, Button, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, useDeviceInfo, Card, CardHeader, CardTitle, CardContent, useCountdown, CardDescription } from '../chunk-BVWT2DIB.js';
-export { cn, useDeviceInfo } from '../chunk-BVWT2DIB.js';
+import { Button, Spinner, InputGroup, InputGroupAddon, InputGroupInput, cn, Separator, Label, InputGroupButton, useDeviceInfo, Card, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, useParentPathname, isConfirm } from '../chunk-FLKUBNE4.js';
+export { cn, useDeviceInfo } from '../chunk-FLKUBNE4.js';
 import { ensureArray } from '../chunk-OAENV763.js';
 import { toast } from 'sonner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createContext, useState, useContext, useEffect, createElement } from 'react';
-import { Asterisk, Eye, EyeOff, Mail } from 'lucide-react';
 import { useTranslator } from 'intor/react';
+import { Files, Asterisk, Eye, EyeOff, Mail, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Undo2 } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 
@@ -240,6 +240,364 @@ function createAdminInitializer({
     return null;
   };
 }
+
+// src/client/interfaces/styles/constants.ts
+var PAGE_HEADER_HEIGHT = 56;
+var FORM_SIDE_FIELDS_WIDTH = 320;
+var FORM_MIDDLE_GAP_WIDTH = 24;
+function PageHeaderTitle({
+  icon,
+  title,
+  subtitle,
+  children,
+  leftChildren,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", className), children: [
+    leftChildren,
+    icon && createElement(icon),
+    /* @__PURE__ */ jsxs("div", { className: "flex-center w-fit gap-3 whitespace-nowrap", children: [
+      subtitle && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: subtitle }),
+      /* @__PURE__ */ jsx("p", { className: "scroll-m-20 text-xl font-semibold tracking-tight", children: title })
+    ] }),
+    children
+  ] });
+}
+function Button2({
+  icon,
+  href,
+  openNewTab = false,
+  // ui states
+  isDisabled = false,
+  isLoading = false,
+  // base
+  children,
+  ...props
+}) {
+  const router = useRouter();
+  const handleClick = () => {
+    if (!href) return;
+    if (openNewTab) {
+      window.open(href, "_blank");
+    } else {
+      router.push(href);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: props.type ?? "button",
+      disabled: isDisabled || isLoading,
+      onClick: props.onClick ?? handleClick,
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && createElement(icon),
+        children
+      ] })
+    }
+  );
+}
+function Input({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  // base
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(InputGroup, { "data-disabled": isDisabled || isLoading, children: [
+    isLoading ? /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
+      InputGroupInput,
+      {
+        disabled: isDisabled || isLoading,
+        "aria-invalid": isError,
+        onChange: (e) => {
+          if (!setFormData || !fieldName) return;
+          setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
+        },
+        ...props
+      }
+    ),
+    children
+  ] });
+}
+function ReturnButton({
+  icon,
+  useIcon = true,
+  // use in create/edit page
+  useConfirm = false,
+  // navigation
+  href,
+  replace = false,
+  pushToParent = false,
+  replaceParent = false,
+  // base
+  className,
+  children,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const router = useRouter();
+  const parentPath = useParentPathname();
+  const handelClick = () => {
+    if (useConfirm) {
+      if (!isConfirm(t)) return;
+    }
+    if (href) {
+      return replace ? router.replace(href) : router.push(href);
+    }
+    if (replaceParent) {
+      return router.replace(parentPath);
+    }
+    if (pushToParent) {
+      return router.push(parentPath);
+    }
+    router.back();
+  };
+  return /* @__PURE__ */ jsx(
+    Button2,
+    {
+      variant: "outline",
+      size: "sm",
+      icon: useIcon ? icon || Undo2 : void 0,
+      onClick: handelClick,
+      className,
+      ...props,
+      children: children ?? t("ui.button.return.text")
+    }
+  );
+}
+function createIndexPreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: Files,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        props.settingButtonProps && props.showTopicSettingButton && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            ...props.settingButtonProps,
+            variant: "outline",
+            icon: FolderCog,
+            isDisabled: props.settingButtonProps.isDisabled ?? props.isDisabled,
+            children: `${t("ui.button.setting.text")} ${t("resources.topic.text")}`
+          }
+        ),
+        props.createCategoryButtonProps && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            ...props.createCategoryButtonProps,
+            variant: "success",
+            icon: FileSpreadsheet,
+            isDisabled: props.createCategoryButtonProps.isDisabled ?? props.isDisabled,
+            children: t("ui.button.create.text")
+          }
+        ),
+        props.createButtonProps && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "success",
+            icon: FilePlus,
+            ...props.createButtonProps,
+            children: t("ui.button.create.text")
+          }
+        )
+      ] })
+    },
+    right: props.batchButtonProps && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Button2, { variant: "outline", icon: FileStack, ...props.batchButtonProps, children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("ui.button.batch.text") }) }) })
+  };
+}
+function createBatchPreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true, ...props.returnButtonProps, children: t("ui.button.exit-batch-mode.text") }) }),
+    titleProps: {
+      icon: FilePen,
+      subtitle: t("ui.page-header.batch.subtitle.text"),
+      children: /* @__PURE__ */ jsx(
+        Button2,
+        {
+          variant: "success",
+          href: props.batchCreateButtonHref,
+          icon: FilePlus,
+          children: t("ui.button.batch-create.text")
+        }
+      )
+    },
+    right: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button2, { size: "icon", variant: "outline", onClick: props.selectAllFn, children: /* @__PURE__ */ jsx(CopyCheck, {}) }),
+      /* @__PURE__ */ jsx(Button2, { size: "icon", variant: "outline", onClick: props.cancelAllFn, children: /* @__PURE__ */ jsx(CopyX, {}) }),
+      /* @__PURE__ */ jsx(
+        Button2,
+        {
+          ...props.destroyButtonProps,
+          variant: "destructive",
+          icon: FileX,
+          children: t("ui.button.destroy.text")
+        }
+      )
+    ] })
+  };
+}
+function createBatchCreatePreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: FilePlus,
+      subtitle: t("ui.page-header.batch-create.subtitle.text")
+    }
+  };
+}
+function createCreatePreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: FilePlus,
+      subtitle: t("ui.page-header.create.subtitle.text")
+    }
+  };
+}
+function createEditPreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { useConfirm: true, replaceParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: FilePen,
+      subtitle: t("ui.page-header.edit.subtitle.text")
+    }
+  };
+}
+function createShowPreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: File,
+      children: !props.isNotFound && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        props.showButtonProps && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            ...props.showButtonProps,
+            variant: "outline",
+            icon: FolderSearch,
+            isDisabled: props.showButtonProps.isDisabled || props.isDisabled,
+            children: `${t("ui.button.show.text")} ${t("resources.related.text")}`
+          }
+        ),
+        props.editButtonProps && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            ...props.editButtonProps,
+            variant: "warning",
+            icon: FilePen,
+            isDisabled: props.editButtonProps.isDisabled || props.isDisabled,
+            children: t("ui.button.edit.text")
+          }
+        ),
+        props.destroyButtonProps && /* @__PURE__ */ jsx(
+          Button2,
+          {
+            ...props.destroyButtonProps,
+            variant: "destructive",
+            icon: FileX,
+            isDisabled: props.destroyButtonProps.isDisabled || props.isDisabled,
+            children: t("ui.button.destroy.text")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Lock,
+          {
+            className: cn(
+              props.isLocked && !props.isDisabled ? "opacity-100" : "opacity-0"
+            )
+          }
+        )
+      ] })
+    },
+    right: props.batchButtonProps && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Button2, { variant: "outline", icon: FileStack, ...props.batchButtonProps, children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("ui.button.batch.text") }) }) })
+  };
+}
+function createTrashPreset(ctx) {
+  const { props, t } = ctx;
+  return {
+    left: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ReturnButton, { pushToParent: true, ...props.returnButtonProps }) }),
+    titleProps: {
+      icon: Trash2,
+      title: t("main.trash.text")
+    },
+    right: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button2, { size: "icon", variant: "outline", onClick: props.selectAllFn, children: /* @__PURE__ */ jsx(CopyCheck, {}) }),
+      /* @__PURE__ */ jsx(Button2, { size: "icon", variant: "outline", onClick: props.cancelAllFn, children: /* @__PURE__ */ jsx(CopyX, {}) }),
+      /* @__PURE__ */ jsx(
+        Button2,
+        {
+          ...props.restoreButtonProps,
+          variant: "success",
+          icon: FileSymlink,
+          children: t("ui.button.restore.text")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button2,
+        {
+          ...props.destroyButtonProps,
+          variant: "destructive",
+          icon: FileX,
+          children: t("ui.button.destroy.text")
+        }
+      )
+    ] })
+  };
+}
+var PRESET_BUILDERS = {
+  default: () => ({ titleProps: { icon: Files } }),
+  index: createIndexPreset,
+  create: createCreatePreset,
+  show: createShowPreset,
+  edit: createEditPreset,
+  batch: createBatchPreset,
+  "batch-create": createBatchCreatePreset,
+  trash: createTrashPreset
+};
+function PageHeader(props) {
+  const { t } = useTranslator();
+  const variant = props.variant ?? "default";
+  const isDefault = variant === "default";
+  const preset = PRESET_BUILDERS[variant]({ props, t });
+  const left = props.leftChildren ?? preset.left;
+  const resolvedTitleProps = { ...preset.titleProps, ...props.titleProps };
+  const right = props.rightChildren ?? preset.right;
+  return /* @__PURE__ */ jsxs("div", { style: { height: PAGE_HEADER_HEIGHT }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative h-full px-6",
+          "flex items-center justify-between gap-3"
+        ),
+        children: [
+          !isDefault && left && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: left }),
+          /* @__PURE__ */ jsx(
+            PageHeaderTitle,
+            {
+              className: cn(!isDefault && "absolute left-1/2 -translate-x-1/2"),
+              ...resolvedTitleProps
+            }
+          ),
+          right && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-3", children: right })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Separator, {})
+  ] });
+}
 function Form({
   onSubmit,
   className,
@@ -327,67 +685,51 @@ function FieldBody({
     }
   );
 }
-function Button2({
-  icon,
-  href,
-  openNewTab = false,
-  // ui states
-  isDisabled = false,
-  isLoading = false,
-  // base
+function FieldsContainer({
+  className = "",
   children,
   ...props
 }) {
-  const router = useRouter();
-  const handleClick = () => {
-    if (!href) return;
-    if (openNewTab) {
-      window.open(href, "_blank");
-    } else {
-      router.push(href);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative flex w-full", className),
+      style: { gap: FORM_MIDDLE_GAP_WIDTH },
+      ...props,
+      children
     }
-  };
+  );
+}
+function MainFields({
+  className,
+  children,
+  ...props
+}) {
+  const sideWidth = FORM_SIDE_FIELDS_WIDTH + FORM_MIDDLE_GAP_WIDTH;
   return /* @__PURE__ */ jsx(
-    Button,
+    "div",
     {
-      type: props.type ?? "button",
-      disabled: isDisabled || isLoading,
-      onClick: props.onClick ?? handleClick,
+      className: cn("relative", "flex flex-1 flex-col gap-6", className),
+      style: { maxWidth: `calc(100% - ${sideWidth}px)` },
       ...props,
-      children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && createElement(icon),
-        children
-      ] })
+      children
     }
   );
 }
-function Input({
-  // form context
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isError = false,
-  // base
+function SideFields({
+  className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(InputGroup, { "data-disabled": isDisabled || isLoading, children: [
-    isLoading ? /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
-      InputGroupInput,
-      {
-        disabled: isDisabled || isLoading,
-        "aria-invalid": isError,
-        onChange: (e) => {
-          if (!setFormData || !fieldName) return;
-          setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
-        },
-        ...props
-      }
-    ),
-    children
-  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative", "min-h-full", className),
+      style: { width: `${FORM_SIDE_FIELDS_WIDTH}px` },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("sticky top-24", "flex flex-col gap-6"), children })
+    }
+  );
 }
 function PasswordInput({ ...props }) {
   const [showPassword, setShowPassword] = useState(false);
@@ -879,4 +1221,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, Button2 as Button, Field, FieldBody, Form, Input, PasswordInput, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+export { AdminProvider, Button2 as Button, Field, FieldBody, FieldsContainer, Form, Input, MainFields, PageHeader, PasswordInput, SideFields, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };

package/dist/client/shadcn/index.d.ts

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ComponentProps } from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import '@radix-ui/react-label';
 
 declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
@@ -34,4 +35,6 @@ declare function Spinner({ className, ...props }: ComponentProps<"svg">): react_
 
 declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
-export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Spinner, Textarea };
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Separator, Spinner, Textarea };

package/dist/client/shadcn/index.js

@@ -1 +1 @@
-export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Spinner, Textarea } from '../../chunk-BVWT2DIB.js';
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Separator, Spinner, Textarea } from '../../chunk-FLKUBNE4.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.94",
+  "version": "0.0.96",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",
@@ -50,6 +50,7 @@
   "dependencies": {
     "@keyv/redis": "^5.1.6",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "argon2": "^0.44.0",
     "class-variance-authority": "^0.7.1",