@yimingliao/cms 0.0.95 → 0.0.97

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 } from 'react';
+import { ReactNode, ComponentProps, HTMLAttributes, InputHTMLAttributes } from 'react';
 import { LucideIcon } from 'lucide-react';
 import { B as ButtonProps$1, L as LabelProps } from '../label-BF4qxS03.js';
 import { ClassValue } from 'clsx';
@@ -30,7 +30,8 @@ interface UIStates {
     isDisabled?: boolean | undefined;
     isError?: boolean | undefined;
 }
-interface FormContext<T> {
+type FormData = Record<string, unknown>;
+interface FormContext<T extends FormData = FormData> {
     formData?: T | undefined;
     setFormData?: React$1.Dispatch<React$1.SetStateAction<T>> | undefined;
 }
@@ -39,7 +40,7 @@ interface FieldContext {
     translations?: Translation[] | undefined;
     errors?: string[] | undefined;
 }
-interface FormFieldController<T = Record<string, unknown>> extends UIStates, FormContext<T>, FieldContext {
+interface FormFieldController<T extends FormData = FormData> extends UIStates, FormContext<T>, FieldContext {
 }
 
 interface FetchContext {
@@ -367,9 +368,9 @@ 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 = Record<string, unknown>> extends ComponentProps<"input">, FormFieldController<T> {
+interface InputProps<T extends FormData = FormData> 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 Input<T extends FormData = FormData>({ fieldName, setFormData, isLoading, isDisabled, isError, className, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
 
 interface PageHeaderProps {
     titleProps?: PageHeaderTitleProps;
@@ -413,7 +414,18 @@ interface FieldBodyProps extends HTMLAttributes<HTMLDivElement>, UIStates {
 }
 declare function FieldBody({ isLoading, isDisabled, isEmpty, className, backgroundClassName, childrenClassName, children, ...props }: FieldBodyProps): react_jsx_runtime.JSX.Element;
 
-declare function PasswordInput<T>({ ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+declare function FieldsContainer({ className, children, ...props }: ComponentProps<"div">): 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 extends FormData = FormData>({ ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps<T extends FormData = FormData> extends InputHTMLAttributes<HTMLInputElement>, FormFieldController<T> {
+    isDisplay?: boolean;
+}
+declare function Checkbox<T extends FormData = FormData>({ fieldName, formData, setFormData, isLoading, isDisabled, isDisplay, className, ...props }: CheckboxProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * [Auth] sign-in
@@ -491,4 +503,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, Button, type ButtonProps, Field, FieldBody, Form, Input, type InputProps, PageHeader, PasswordInput, type ShowToastOption, cn, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin, useDeviceInfo };
+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 };

package/dist/client/index.js

@@ -243,6 +243,8 @@ function createAdminInitializer({
 
 // 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,
@@ -304,6 +306,7 @@ function Input({
   isDisabled = false,
   isError = false,
   // base
+  className,
   children,
   ...props
 }) {
@@ -317,6 +320,7 @@ function Input({
           if (!setFormData || !fieldName) return;
           setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
         },
+        className: cn("h-10", className),
         ...props
       }
     ),
@@ -683,7 +687,55 @@ function FieldBody({
     }
   );
 }
-function PasswordInput({ ...props }) {
+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
+    }
+  );
+}
+function SideFields({
+  className,
+  children,
+  ...props
+}) {
+  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);
   return /* @__PURE__ */ jsx(Input, { type: showPassword ? "text" : "password", ...props, children: /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
     InputGroupButton,
@@ -696,6 +748,76 @@ function PasswordInput({ ...props }) {
     }
   ) }) });
 }
+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",
+              "transition"
+            )
+          }
+        ),
+        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
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/constants/keys/auth.ts
 var AUTH_KEYS = {
@@ -1173,4 +1295,4 @@ function createChangePasswordPage({
   };
 }
 
-export { AdminProvider, Button2 as Button, Field, FieldBody, Form, Input, PageHeader, PasswordInput, createAdminInitializer, createChangePasswordPage, createEmailUnverifiedPage, createForgotPasswordPage, createRequestInterceptor, createResetPasswordPage, createResponseInterceptor, createSignInPage, createSmartFetch, createUseCommand, createUseQuery, createVerifyEmailPage, handleToast, useAdmin };
+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 };

package/package.json

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