@yimingliao/cms 0.0.115 → 0.0.117

package/dist/client/index.js

@@ -1,5 +1,5 @@
-import { cn, useSidebar, Sidebar, Skeleton, SidebarInset, SIDEBAR_WIDTH, SidebarGroup, SidebarMenu, Collapsible, SidebarMenuItem, SidebarMenuButton, Separator, CollapsibleTrigger, SidebarMenuAction, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, Button, Spinner, useParentPathname, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, PAGE_HEADER_HEIGHT, Label, FORM_MIDDLE_GAP_WIDTH, FORM_SIDE_FIELDS_WIDTH, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, Card, useDeviceInfo, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, NAVBAR_HEIGHT, isConfirm, Avatar, AvatarImage, AvatarFallback, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup } from '../chunk-WU47KNJR.js';
-export { NAVBAR_HEIGHT, PAGE_HEADER_HEIGHT, SIDEBAR_WIDTH, Sidebar, SidebarContent, SidebarInset, SidebarProvider, cn, useDeviceInfo, useSidebar } from '../chunk-WU47KNJR.js';
+import { cn, useSidebar, Sidebar, Skeleton, SidebarInset, SIDEBAR_WIDTH, SidebarGroup, SidebarMenu, Collapsible, SidebarMenuItem, SidebarMenuButton, Separator, CollapsibleTrigger, SidebarMenuAction, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, Button, Spinner, useParentPathname, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, PAGE_HEADER_HEIGHT, InputGroup, InputGroupAddon, Textarea, InputGroupInput, InputGroupButton, Label, FORM_MIDDLE_GAP_WIDTH, FORM_SIDE_FIELDS_WIDTH, Card, useDeviceInfo, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, NAVBAR_HEIGHT, isConfirm, Avatar, AvatarImage, AvatarFallback, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, Pagination, PaginationContent, PaginationItem, PaginationPrevious, PaginationLink, PaginationEllipsis, PaginationNext, Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem } from '../chunk-7YMYPMIB.js';
+export { NAVBAR_HEIGHT, PAGE_HEADER_HEIGHT, SIDEBAR_WIDTH, Sidebar, SidebarContent, SidebarInset, SidebarProvider, cn, useDeviceInfo, useSidebar } from '../chunk-7YMYPMIB.js';
 import { ensureArray, findTranslation, joinUrl } from '../chunk-VSV6SQWC.js';
 import { toast } from 'sonner';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -7,7 +7,7 @@ import { useMutation, useQuery } from '@tanstack/react-query';
 import { createContext, useState, useContext, useEffect, createElement, useRef } from 'react';
 import { ThemeProvider as ThemeProvider$1, useTheme } from 'next-themes';
 import { useTranslator } from 'intor/react';
-import { ChevronRight, Undo2, SidebarIcon, House, SquareArrowOutUpRight, Languages, LogOut, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Sun, Moon, TvMinimal, UserCircle, ChevronsUpDown, PenLine, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Archive, Binary, MapPinCheckInside, Star, CircleMinus } from 'lucide-react';
+import { ChevronRight, Undo2, SidebarIcon, House, SquareArrowOutUpRight, Languages, LogOut, Files, CircleX, CirclePlus, Eye, EyeOff, Search, Asterisk, Mail, Sun, Moon, TvMinimal, UserCircle, ChevronsUpDown, PenLine, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet, Archive, Binary, MapPinCheckInside, Star, CircleMinus } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Link as Link$1 } from 'intor/next';
@@ -956,119 +956,598 @@ function PageHeader(props) {
     /* @__PURE__ */ jsx(Separator, {})
   ] });
 }
-function Form({
-  onSubmit,
-  className,
+function Textarea2({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  // base
   ...props
 }) {
-  const handleSubmit = (e) => {
-    if (!onSubmit) return;
-    e.preventDefault();
-    void onSubmit(e);
+  isDisabled = isDisabled || isLoading;
+  const textareaRef = useRef(null);
+  const resetHeight = (element) => {
+    element.style.height = "40px";
+    element.style.height = `${element.scrollHeight + 2}px`;
   };
-  return /* @__PURE__ */ jsx("form", { className: cn(className), onSubmit: handleSubmit, ...props });
+  useEffect(() => {
+    if (!textareaRef.current) return;
+    resetHeight(textareaRef.current);
+  }, [props.value, isLoading]);
+  return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(InputGroup, { "data-disabled": isDisabled, className: "h-10", children: /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ref: textareaRef,
+      disabled: isDisabled,
+      "aria-invalid": isError,
+      value: isLoading ? "" : props.value,
+      onChange: (e) => {
+        resetHeight(e.target);
+        if (!setFormData || !fieldName) return;
+        setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
+      },
+      ...props
+    }
+  ) });
 }
-function Field({
-  label,
-  isRequired = false,
-  hint,
-  labelChildren,
-  children,
+function ArrayInput({
+  // form context
+  formData,
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isResizable = false,
+  errors,
+  // base
+  placeholder = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center gap-3", children: [
-    /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsxs(Label, { className: "flex gap-1 truncate", ...props, children: [
-        label,
-        isRequired && /* @__PURE__ */ jsx(Asterisk, { className: "text-destructive size-3" }),
-        hint && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-2 text-xs", children: hint })
+  isDisabled = isDisabled || isLoading;
+  const rawValue = formData?.[fieldName ?? ""];
+  const values = Array.isArray(rawValue) && rawValue.length > 0 ? rawValue.map(String) : [""];
+  const errorIndexes = new Set(
+    errors.filter((e) => e.startsWith(fieldName ?? "")).map((e) => e.split(".").pop()).map(Number)
+  );
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => {
+    const isError = errorIndexes.has(index);
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-10 pl-0.5 text-center text-sm opacity-50", children: Array.isArray(rawValue) && rawValue.length === 0 ? "0" : index + 1 }),
+        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
       ] }),
-      /* @__PURE__ */ jsx("span", { children: labelChildren })
-    ] }),
-    children
-  ] });
+      /* @__PURE__ */ jsx(
+        Textarea2,
+        {
+          disabled: isDisabled,
+          placeholder: isLoading ? "" : placeholder,
+          value,
+          onChange: (e) => {
+            if (!setFormData || !fieldName) return;
+            const copy = [...values];
+            copy[index] = e.target.value;
+            setFormData((p) => ({ ...p, [fieldName]: copy }));
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !isResizable) {
+              e.preventDefault();
+            }
+          },
+          isError,
+          className: cn("pr-20 pl-13", !isResizable && "resize-none"),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-1 right-1 gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "outline",
+            type: "button",
+            size: "icon-sm",
+            className: "rounded-sm",
+            onClick: () => {
+              if (!setFormData || !fieldName) return;
+              const copy = values.filter((_, i) => i !== index);
+              setFormData((p) => ({ ...p, [fieldName]: copy }));
+            },
+            children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button2,
+          {
+            variant: "outline",
+            type: "button",
+            size: "icon-sm",
+            className: "rounded-sm",
+            onClick: () => {
+              if (!setFormData || !fieldName) return;
+              const copy = [...values];
+              copy.splice(index + 1, 0, "");
+              setFormData((p) => ({ ...p, [fieldName]: copy }));
+            },
+            children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
+          }
+        )
+      ] })
+    ] }, index);
+  }) });
 }
-function FieldBody({
+function Checkbox({
+  // form context
+  fieldName,
+  formData,
+  setFormData,
   // ui states
   isLoading = false,
   isDisabled = false,
-  isEmpty = false,
   // base
-  className,
-  backgroundClassName,
-  childrenClassName,
-  children,
+  isDisplay = false,
+  className = "",
   ...props
 }) {
-  const { t } = useTranslator();
+  isDisabled = isDisabled || isLoading || isDisplay;
+  const isChecked = !!formData?.[fieldName ?? ""];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         className,
-        "relative",
-        "min-h-9 w-full min-w-0",
-        "flex items-center",
-        "text-sm"
+        "group relative",
+        "h-6 w-12 min-w-12",
+        "p-1",
+        "rounded-full",
+        "overflow-hidden",
+        "shadow-inner",
+        !isChecked || isLoading ? "bg-secondary" : "bg-success",
+        "transition"
       ),
-      ...props,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "absolute size-full",
-              "dark:bg-input/30 bg-foreground/2 rounded-md",
-              backgroundClassName
+              "size-4",
+              "rounded-full",
+              "bg-white",
+              "shadow",
+              isChecked && "translate-x-6",
+              isLoading && "opacity-0",
+              !isDisabled && "group-hover:scale-95 group-active:scale-90",
+              "duration-200"
             )
           }
         ),
-        isLoading && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        !isLoading && (!children || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-9 px-3 opacity-50", children: /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.no-data.text") }) }),
-        !isLoading && children && !isEmpty && /* @__PURE__ */ jsx(
-          "div",
+        isLoading && /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        /* @__PURE__ */ jsx(
+          "input",
           {
+            type: "checkbox",
+            onChange: (e) => {
+              if (!setFormData || !fieldName) return;
+              setFormData((p) => ({ ...p, [fieldName]: e.target.checked }));
+            },
+            checked: isChecked,
+            disabled: isDisabled,
             className: cn(
-              "relative size-full",
-              "flex items-center gap-3",
-              "px-3 py-2",
-              "break-all",
-              (isDisabled || isLoading) && "opacity-50",
-              childrenClassName
+              "absolute top-0 left-0",
+              "h-full w-full",
+              "rounded-full",
+              "opacity-0",
+              isDisabled ? "cursor-not-allowed" : "cursor-pointer"
             ),
-            children
+            ...props
           }
         )
       ]
     }
   );
 }
-function FieldsContainer({
-  className = "",
+function Input({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isError = false,
+  // base
+  className,
+  inputGroupClassName,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsxs(
+    InputGroup,
     {
-      className: cn("relative flex w-full", className),
-      style: { gap: FORM_MIDDLE_GAP_WIDTH },
-      ...props,
-      children
+      "data-disabled": isDisabled || isLoading,
+      className: cn("h-10", inputGroupClassName),
+      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 }));
+            },
+            className: cn("h-10", className),
+            ...props
+          }
+        ),
+        children
+      ]
     }
   );
 }
-function MainFields({
-  className,
-  children,
+function PasswordInput({
   ...props
 }) {
-  const sideWidth = FORM_SIDE_FIELDS_WIDTH + FORM_MIDDLE_GAP_WIDTH;
-  return /* @__PURE__ */ jsx(
-    "div",
+  const [showPassword, setShowPassword] = useState(false);
+  return /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", ...props, children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+    InputGroupButton,
     {
-      className: cn("relative", "flex flex-1 flex-col gap-6", className),
-      style: { maxWidth: `calc(100% - ${sideWidth}px)` },
+      "aria-label": showPassword ? "Hide password" : "Show password",
+      title: showPassword ? "Hide password" : "Show password",
+      size: "icon-xs",
+      onClick: () => setShowPassword((prev) => !prev),
+      children: showPassword ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, {})
+    }
+  ) }) });
+}
+function SearchInput({
+  searchString = "",
+  setSearchString,
+  isLoading = false,
+  isDisabled = false,
+  ...props
+}) {
+  const { t } = useTranslator();
+  const isComposingRef = useRef(false);
+  const [inputValue, setInputValue] = useState(searchString);
+  const handleCompositionEnd = (e) => {
+    isComposingRef.current = false;
+    setInputValue(e.currentTarget.value);
+    setSearchString(e.currentTarget.value);
+  };
+  const handleChange = (e) => {
+    setInputValue(e.target.value);
+    if (!isComposingRef.current) setSearchString(e.target.value);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "relative size-full", children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      isDisabled,
+      placeholder: isLoading ? "" : t("ui.search.text"),
+      autoComplete: "off",
+      value: inputValue,
+      onChange: handleChange,
+      onCompositionStart: () => isComposingRef.current = true,
+      onCompositionEnd: handleCompositionEnd,
+      className: "w-full pr-9",
+      ...props,
+      children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Search, {}) })
+    }
+  ) });
+}
+function Select2({
+  // form context
+  fieldName,
+  setFormData,
+  // ui states
+  isDisabled = false,
+  isLoading = false,
+  // base
+  placeholder,
+  label,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      onValueChange: (value) => {
+        if (!setFormData || !fieldName) return;
+        setFormData((p) => ({ ...p, [fieldName]: value }));
+      },
+      disabled: isDisabled || isLoading,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            className: cn("w-full", className),
+            disabled: isDisabled || isLoading,
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsxs(SelectGroup, { children: [
+          label && /* @__PURE__ */ jsx(SelectLabel, { children: label }),
+          children
+        ] }) })
+      ]
+    }
+  );
+}
+function Option({
+  value,
+  isDisabled = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SelectItem, { value, disabled: isDisabled, children });
+}
+function PageSizeSelector({
+  pageSize,
+  setPageSize,
+  setPage
+}) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-52 items-center gap-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm whitespace-nowrap", children: t("ui.layout.item-list-container.items-per-page.text") }),
+    /* @__PURE__ */ jsxs(
+      Select2,
+      {
+        value: String(pageSize),
+        onValueChange: (value) => {
+          setPageSize(Number(value ?? 20));
+          setPage(1);
+        },
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(Option, { value: String(20), children: "20" }),
+          /* @__PURE__ */ jsx(Option, { value: String(40), children: "40" }),
+          /* @__PURE__ */ jsx(Option, { value: String(80), children: "80" })
+        ]
+      }
+    )
+  ] });
+}
+function Pagination2({
+  page,
+  setPage,
+  pageSize,
+  total = 0
+}) {
+  const totalPages = Math.ceil(total / pageSize);
+  const isFirst = page === 1;
+  const isLastPage = page === totalPages;
+  const handlePrev = () => {
+    if (isFirst) return;
+    setPage((prev) => prev - 1);
+  };
+  const handleNext = () => {
+    if (isLastPage) return;
+    setPage((prev) => prev + 1);
+  };
+  const siblingsCount = 2;
+  let startPage = Math.max(2, page - siblingsCount);
+  let endPage = Math.min(totalPages - 1, page + siblingsCount);
+  if (page - siblingsCount < 2) {
+    endPage = Math.min(totalPages - 1, endPage + (2 - (page - siblingsCount)));
+  }
+  if (page + siblingsCount > totalPages - 1) {
+    startPage = Math.max(
+      2,
+      startPage - (page + siblingsCount - (totalPages - 1))
+    );
+  }
+  const pages = [];
+  for (let i = startPage; i <= endPage; i++) {
+    pages.push(i);
+  }
+  const isAtFirstPage = page === 1;
+  const isAtLastPage = page === totalPages;
+  return /* @__PURE__ */ jsx(Pagination, { className: "flex-1", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { disabled: isAtFirstPage, onClick: handlePrev }) }),
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationLink,
+      {
+        isActive: page === 1,
+        disabled: isAtFirstPage,
+        onClick: () => setPage(1),
+        children: "1"
+      }
+    ) }),
+    startPage > 2 && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }),
+    pages.map((p) => {
+      const isThisPage = page === p;
+      return /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, { isActive: isThisPage, onClick: () => setPage(p), children: p }) }, p);
+    }),
+    endPage < totalPages - 1 && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }),
+    totalPages > 1 && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationLink,
+      {
+        isActive: page === totalPages,
+        disabled: isAtLastPage,
+        onClick: () => setPage(totalPages),
+        children: totalPages
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+      PaginationNext,
+      {
+        disabled: isAtLastPage || totalPages <= 1,
+        onClick: handleNext
+      }
+    ) })
+  ] }) });
+}
+function ListCardsContainer({
+  // pagination
+  page,
+  setPage,
+  pageSize,
+  setPageSize,
+  total,
+  // search string
+  searchString,
+  setSearchString,
+  // ui states
+  isFetching,
+  // base
+  children,
+  headerChildren
+}) {
+  const { t } = useTranslator();
+  const isNotFound = total === 0;
+  useEffect(() => {
+    setPage(1);
+  }, [searchString, setPage]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      headerChildren,
+      /* @__PURE__ */ jsx("div", { className: "ml-auto w-64", children: /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          searchString,
+          setSearchString,
+          isLoading: isFetching
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-[88%] flex-1 overflow-y-auto", children: isFetching ? /* @__PURE__ */ jsx(Spinner, {}) : isNotFound ? /* @__PURE__ */ jsx("p", { className: "text-sm opacity-50", children: t("ui.no-data.text") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-52" }),
+      /* @__PURE__ */ jsx(
+        Pagination2,
+        {
+          page,
+          setPage,
+          pageSize,
+          total
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PageSizeSelector,
+        {
+          pageSize,
+          setPageSize,
+          setPage
+        }
+      )
+    ] })
+  ] });
+}
+function Form({
+  onSubmit,
+  className,
+  ...props
+}) {
+  const handleSubmit = (e) => {
+    if (!onSubmit) return;
+    e.preventDefault();
+    void onSubmit(e);
+  };
+  return /* @__PURE__ */ jsx("form", { className: cn(className), onSubmit: handleSubmit, ...props });
+}
+function Field({
+  label,
+  isRequired = false,
+  hint,
+  labelChildren,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(Label, { className: "flex gap-1 truncate", ...props, children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx(Asterisk, { className: "text-destructive size-3" }),
+        hint && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground ml-2 text-xs", children: hint })
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: labelChildren })
+    ] }),
+    children
+  ] });
+}
+function FieldBody({
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isEmpty = false,
+  // base
+  className,
+  backgroundClassName,
+  childrenClassName,
+  children,
+  ...props
+}) {
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        className,
+        "relative",
+        "min-h-9 w-full min-w-0",
+        "flex items-center",
+        "text-sm"
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute size-full",
+              "dark:bg-input/30 bg-foreground/2 rounded-md",
+              backgroundClassName
+            )
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        !isLoading && (!children || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-9 px-3 opacity-50", children: /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.no-data.text") }) }),
+        !isLoading && children && !isEmpty && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative size-full",
+              "flex items-center gap-3",
+              "px-3 py-2",
+              "break-all",
+              (isDisabled || isLoading) && "opacity-50",
+              childrenClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldsContainer({
+  className = "",
+  children,
+  ...props
+}) {
+  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(
+    "div",
+    {
+      className: cn("relative", "flex flex-1 flex-col gap-6", className),
+      style: { maxWidth: `calc(100% - ${sideWidth}px)` },
       ...props,
       children
     }
@@ -1188,286 +1667,6 @@ function ExpandableList({
     }
   );
 }
-function Input({
-  // form context
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isError = false,
-  // base
-  className,
-  inputGroupClassName,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      "data-disabled": isDisabled || isLoading,
-      className: cn("h-10", inputGroupClassName),
-      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 }));
-            },
-            className: cn("h-10", className),
-            ...props
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-function PasswordInput({
-  ...props
-}) {
-  const [showPassword, setShowPassword] = useState(false);
-  return /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", ...props, children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
-    InputGroupButton,
-    {
-      "aria-label": showPassword ? "Hide password" : "Show password",
-      title: showPassword ? "Hide password" : "Show password",
-      size: "icon-xs",
-      onClick: () => setShowPassword((prev) => !prev),
-      children: showPassword ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, {})
-    }
-  ) }) });
-}
-function Checkbox({
-  // form context
-  fieldName,
-  formData,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  // base
-  isDisplay = false,
-  className = "",
-  ...props
-}) {
-  isDisabled = isDisabled || isLoading || isDisplay;
-  const isChecked = !!formData?.[fieldName ?? ""];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        className,
-        "group relative",
-        "h-6 w-12 min-w-12",
-        "p-1",
-        "rounded-full",
-        "overflow-hidden",
-        "shadow-inner",
-        !isChecked || isLoading ? "bg-secondary" : "bg-success",
-        "transition"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "size-4",
-              "rounded-full",
-              "bg-white",
-              "shadow",
-              isChecked && "translate-x-6",
-              isLoading && "opacity-0",
-              !isDisabled && "group-hover:scale-95 group-active:scale-90",
-              "duration-200"
-            )
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsx("span", { className: "absolute top-1 left-1", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            onChange: (e) => {
-              if (!setFormData || !fieldName) return;
-              setFormData((p) => ({ ...p, [fieldName]: e.target.checked }));
-            },
-            checked: isChecked,
-            disabled: isDisabled,
-            className: cn(
-              "absolute top-0 left-0",
-              "h-full w-full",
-              "rounded-full",
-              "opacity-0",
-              isDisabled ? "cursor-not-allowed" : "cursor-pointer"
-            ),
-            ...props
-          }
-        )
-      ]
-    }
-  );
-}
-function Textarea2({
-  // form context
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isError = false,
-  // base
-  ...props
-}) {
-  isDisabled = isDisabled || isLoading;
-  const textareaRef = useRef(null);
-  const resetHeight = (element) => {
-    element.style.height = "40px";
-    element.style.height = `${element.scrollHeight + 2}px`;
-  };
-  useEffect(() => {
-    if (!textareaRef.current) return;
-    resetHeight(textareaRef.current);
-  }, [props.value, isLoading]);
-  return /* @__PURE__ */ jsx(Fragment, { children: isLoading ? /* @__PURE__ */ jsx(InputGroup, { "data-disabled": isDisabled, className: "h-10", children: /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Spinner, {}) }) }) : /* @__PURE__ */ jsx(
-    Textarea,
-    {
-      ref: textareaRef,
-      disabled: isDisabled,
-      "aria-invalid": isError,
-      value: isLoading ? "" : props.value,
-      onChange: (e) => {
-        resetHeight(e.target);
-        if (!setFormData || !fieldName) return;
-        setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
-      },
-      ...props
-    }
-  ) });
-}
-function ArrayInput({
-  // form context
-  formData,
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isResizable = false,
-  errors,
-  // base
-  placeholder = "",
-  ...props
-}) {
-  isDisabled = isDisabled || isLoading;
-  const rawValue = formData?.[fieldName ?? ""];
-  const values = Array.isArray(rawValue) && rawValue.length > 0 ? rawValue.map(String) : [""];
-  const errorIndexes = new Set(
-    errors.filter((e) => e.startsWith(fieldName ?? "")).map((e) => e.split(".").pop()).map(Number)
-  );
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: values.map((value, index) => {
-    const isError = errorIndexes.has(index);
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-0 left-0 z-10 h-full", children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-10 pl-0.5 text-center text-sm opacity-50", children: Array.isArray(rawValue) && rawValue.length === 0 ? "0" : index + 1 }),
-        /* @__PURE__ */ jsx(Separator, { orientation: "vertical" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Textarea2,
-        {
-          disabled: isDisabled,
-          placeholder: isLoading ? "" : placeholder,
-          value,
-          onChange: (e) => {
-            if (!setFormData || !fieldName) return;
-            const copy = [...values];
-            copy[index] = e.target.value;
-            setFormData((p) => ({ ...p, [fieldName]: copy }));
-          },
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && !isResizable) {
-              e.preventDefault();
-            }
-          },
-          isError,
-          className: cn("pr-20 pl-13", !isResizable && "resize-none"),
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-center absolute top-1 right-1 gap-1", children: [
-        /* @__PURE__ */ jsx(
-          Button2,
-          {
-            variant: "outline",
-            type: "button",
-            size: "icon-sm",
-            className: "rounded-sm",
-            onClick: () => {
-              if (!setFormData || !fieldName) return;
-              const copy = values.filter((_, i) => i !== index);
-              setFormData((p) => ({ ...p, [fieldName]: copy }));
-            },
-            children: /* @__PURE__ */ jsx(CircleX, { className: "text-destructive" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button2,
-          {
-            variant: "outline",
-            type: "button",
-            size: "icon-sm",
-            className: "rounded-sm",
-            onClick: () => {
-              if (!setFormData || !fieldName) return;
-              const copy = [...values];
-              copy.splice(index + 1, 0, "");
-              setFormData((p) => ({ ...p, [fieldName]: copy }));
-            },
-            children: /* @__PURE__ */ jsx(CirclePlus, { className: "text-success" })
-          }
-        )
-      ] })
-    ] }, index);
-  }) });
-}
-function SearchInput({
-  searchString = "",
-  setSearchString,
-  isLoading = false,
-  isDisabled = false,
-  ...props
-}) {
-  const { t } = useTranslator();
-  const isComposingRef = useRef(false);
-  const [inputValue, setInputValue] = useState(searchString);
-  const handleCompositionEnd = (e) => {
-    isComposingRef.current = false;
-    setInputValue(e.currentTarget.value);
-    setSearchString(e.currentTarget.value);
-  };
-  const handleChange = (e) => {
-    setInputValue(e.target.value);
-    if (!isComposingRef.current) setSearchString(e.target.value);
-  };
-  return /* @__PURE__ */ jsx("div", { className: "relative size-full", children: /* @__PURE__ */ jsx(
-    Input,
-    {
-      isDisabled,
-      placeholder: isLoading ? "" : t("ui.search.text"),
-      autoComplete: "off",
-      value: inputValue,
-      onChange: handleChange,
-      onCompositionStart: () => isComposingRef.current = true,
-      onCompositionEnd: handleCompositionEnd,
-      className: "w-full pr-9",
-      ...props,
-      children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsx(Search, {}) })
-    }
-  ) });
-}
 function IndexField({
   existingIndexes,
   availableIndex = 1,
@@ -2318,4 +2517,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, ContentContainer, LayoutSkeleton as ContentSkeleton, ControlFields, Field, FieldBody, FieldsContainer, Form, IndexField, Input, MainFields, NavMain, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, SlugField, Textarea2 as Textarea, ThemeProvider, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createI18nSelector, createNavbar, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSignOutButton, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, ContentContainer, ControlFields, Field, FieldBody, FieldsContainer, Form, IndexField, Input, LayoutSkeleton, ListCardsContainer, MainFields, NavMain, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, SlugField, Textarea2 as Textarea, ThemeProvider, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createI18nSelector, createNavbar, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSignOutButton, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };