@yimingliao/cms 0.0.98 → 0.0.100

package/dist/client/index.d.ts

@@ -6,7 +6,7 @@ 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 { ReactNode, ComponentProps, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentProps, HTMLAttributes, InputHTMLAttributes, Dispatch, SetStateAction } from 'react';
 import { LucideIcon } from 'lucide-react';
 import { B as ButtonProps$1, L as LabelProps } from '../label-BF4qxS03.js';
 import { ClassValue } from 'clsx';
@@ -368,9 +368,14 @@ interface ButtonProps extends ButtonProps$1, UIStates {
 }
 declare function Button({ icon, href, openNewTab, isDisabled, isLoading, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-interface InputProps<T extends FormData = FormData> extends ComponentProps<"input">, FormFieldController<T> {
+interface ReturnButtonProps extends ButtonProps {
+    useIcon?: boolean;
+    useConfirm?: boolean;
+    replace?: boolean;
+    pushToParent?: boolean;
+    replaceParent?: boolean;
 }
-declare function Input<T extends FormData = FormData>({ fieldName, setFormData, isLoading, isDisabled, isError, className, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+declare function ReturnButton({ icon, useIcon, useConfirm, href, replace, pushToParent, replaceParent, className, children, ...props }: ReturnButtonProps): react_jsx_runtime.JSX.Element;
 
 interface PageHeaderProps {
     titleProps?: PageHeaderTitleProps;
@@ -420,6 +425,11 @@ declare function MainFields({ className, children, ...props }: ComponentProps<"d
 
 declare function SideFields({ className, children, ...props }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
+interface InputProps<T extends FormData = FormData> extends ComponentProps<"input">, FormFieldController<T> {
+    inputGroupClassName?: string;
+}
+declare function Input<T extends FormData = FormData>({ fieldName, setFormData, isLoading, isDisabled, isError, className, inputGroupClassName, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+
 declare function PasswordInput<T extends FormData = FormData>({ ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps<T extends FormData = FormData> extends InputHTMLAttributes<HTMLInputElement>, FormFieldController<T> {
@@ -427,6 +437,22 @@ interface CheckboxProps<T extends FormData = FormData> extends InputHTMLAttribut
 }
 declare function Checkbox<T extends FormData = FormData>({ fieldName, formData, setFormData, isLoading, isDisabled, isDisplay, className, ...props }: CheckboxProps<T>): react_jsx_runtime.JSX.Element;
 
+interface TextareaProps<T extends FormData = FormData> extends ComponentProps<"textarea">, FormFieldController<T> {
+}
+declare function Textarea<T extends FormData = FormData>({ fieldName, setFormData, isLoading, isDisabled, isError, ...props }: TextareaProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ArrayInputProps<T extends FormData = FormData> extends ComponentProps<"textarea">, FormFieldController<T> {
+    isResizable?: boolean;
+    errors: string[];
+}
+declare function ArrayInput<T extends FormData = FormData>({ formData, fieldName, setFormData, isLoading, isDisabled, isResizable, errors, placeholder, ...props }: ArrayInputProps<T>): react_jsx_runtime.JSX.Element;
+
+interface SearchInputProps extends InputProps {
+    searchString: string;
+    setSearchString: Dispatch<SetStateAction<string>>;
+}
+declare function SearchInput({ searchString, setSearchString, isLoading, isDisabled, ...props }: SearchInputProps): react_jsx_runtime.JSX.Element;
+
 /**
  * [Auth] sign-in
  *
@@ -503,4 +529,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, Button, type ButtonProps, Checkbox, 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 };
+export { AdminProvider, ArrayInput, Button, type ButtonProps, Checkbox, Field, FieldBody, FieldsContainer, Form, Input, type InputProps, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, type ShowToastOption, SideFields, Textarea, 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 { Button, Spinner, InputGroup, InputGroupAddon, InputGroupInput, cn, Separator, Label, InputGroupButton, useDeviceInfo, Card, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, useParentPathname, isConfirm } from '../chunk-FLKUBNE4.js';
+import { Button, Spinner, useParentPathname, cn, Separator, Label, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton, Textarea, useDeviceInfo, Card, CardHeader, CardTitle, CardContent, useCountdown, CardDescription, 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 { createContext, useState, useContext, useEffect, createElement, useRef } from '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 { Undo2, Files, Asterisk, Eye, EyeOff, CircleX, CirclePlus, Search, Mail, Trash2, CopyCheck, CopyX, FileSymlink, FileX, FilePlus, FilePen, File, FileStack, FolderSearch, Lock, FolderCog, FileSpreadsheet } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 
@@ -297,36 +297,6 @@ function Button2({
     }
   );
 }
-function Input({
-  // form context
-  fieldName,
-  setFormData,
-  // ui states
-  isLoading = false,
-  isDisabled = false,
-  isError = false,
-  // base
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(InputGroup, { "data-disabled": isDisabled || isLoading, className: "h-10", 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 ReturnButton({
   icon,
   useIcon = true,
@@ -733,6 +703,44 @@ function SideFields({
     }
   );
 }
+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
 }) {
@@ -818,6 +826,163 @@ function Checkbox({
     }
   );
 }
+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, {}) })
+    }
+  ) });
+}
 
 // src/constants/keys/auth.ts
 var AUTH_KEYS = {
@@ -1295,4 +1460,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, Button2 as Button, Checkbox, Field, FieldBody, FieldsContainer, Form, Input, MainFields, PageHeader, PasswordInput, SideFields, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+export { AdminProvider, ArrayInput, Button2 as Button, Checkbox, Field, FieldBody, FieldsContainer, Form, Input, MainFields, PageHeader, PasswordInput, ReturnButton, SearchInput, SideFields, Textarea2 as Textarea, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.98",
+  "version": "0.0.100",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",