@yimingliao/cms 0.0.96 → 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;
@@ -419,7 +420,12 @@ declare function MainFields({ className, children, ...props }: ComponentProps<"d
 
 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;
+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
@@ -497,4 +503,4 @@ declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-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 };
+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

@@ -306,6 +306,7 @@ function Input({
   isDisabled = false,
   isError = false,
   // base
+  className,
   children,
   ...props
 }) {
@@ -319,6 +320,7 @@ function Input({
           if (!setFormData || !fieldName) return;
           setFormData((p) => ({ ...p, [fieldName]: e.target.value }));
         },
+        className: cn("h-10", className),
         ...props
       }
     ),
@@ -731,7 +733,9 @@ function SideFields({
     }
   );
 }
-function PasswordInput({ ...props }) {
+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,
@@ -744,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 = {
@@ -1221,4 +1295,4 @@ function createChangePasswordPage({
   };
 }
 
-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 };
+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.96",
+  "version": "0.0.97",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",