@yimingliao/cms 0.0.83 → 0.0.85

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-import { R as Result, S as SuccessResult, d as ErrorResult, g as AdminFull } from '../types-BGsFazJr.js';
+import { z as Translation, R as Result, S as SuccessResult, d as ErrorResult, g as AdminFull, D as DeviceInfo } from '../types-BGsFazJr.js';
 import { Logger } from 'logry';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
@@ -28,6 +28,17 @@ interface UIStates {
     isDisabled?: boolean;
     isError?: boolean;
 }
+interface FormContext<T> {
+    formData?: T;
+    setFormData?: React$1.Dispatch<React$1.SetStateAction<T>>;
+}
+interface FieldContext {
+    fieldName?: string;
+    translations?: Translation[];
+    errors?: string[];
+}
+interface FormFieldController<T = Record<string, unknown>> extends UIStates, FormContext<T>, FieldContext {
+}
 
 interface FetchContext {
     input: string;
@@ -342,17 +353,27 @@ declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "success" | "destructive" | "outline" | "secondary" | "ghost" | "warning" | null | undefined;
     size?: "lg" | "sm" | "default" | "icon" | "icon-sm" | "icon-lg" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type ShadcnButtonProps = React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+type ButtonProps$1 = React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 };
 
-interface ButtonProps extends ShadcnButtonProps, UIStates {
+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;
 
+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 AuthForm({ title, children, className, ...props }: ComponentProps<"form"> & {
+    title: string;
+}): react_jsx_runtime.JSX.Element;
+
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { AdminProvider, Button, type ButtonProps, Form, type ShowToastOption, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin };
+declare function useDeviceInfo(): DeviceInfo | null;
+
+export { AdminProvider, AuthForm, Button, type ButtonProps, Form, Input, type InputProps, type ShowToastOption, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -6,6 +6,7 @@ import * as React2 from 'react';
 import { createContext, useState, useContext, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { UAParser } from 'ua-parser-js';
 import { useRouter } from 'next/navigation';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -244,6 +245,27 @@ function createAdminInitializer({
 var cn = (...inputs) => {
   return twMerge(clsx(inputs));
 };
+function useDeviceInfo() {
+  const [deviceInfo, setDeviceInfo] = useState(null);
+  useEffect(() => {
+    const parser = new UAParser(navigator.userAgent);
+    const result = parser.getResult();
+    setDeviceInfo({
+      deviceType: result.device.type || "desktop",
+      platform: result.os.name || "Unknown",
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      language: navigator.language,
+      screenResolution: {
+        width: window.screen.width,
+        height: window.screen.height
+      },
+      browser: result.browser.name || "Unknown",
+      browserVersion: result.browser.version || "",
+      userAgent: navigator.userAgent
+    });
+  }, []);
+  return deviceInfo;
+}
 function Form({
   onSubmit,
   className,
@@ -286,7 +308,7 @@ var buttonVariants = cva(
     }
   }
 );
-function ShadCnButton({
+function Button({
   className,
   variant,
   size,
@@ -314,18 +336,17 @@ function Spinner({ className, ...props }) {
     }
   );
 }
-function Button({
+function Button2({
   icon,
   href,
   openNewTab = false,
-  // processing states
+  // ui states
   isDisabled = false,
   isLoading = false,
   // base
   children,
   ...props
 }) {
-  isDisabled = isDisabled || isLoading;
   const router = useRouter();
   const handleClick = () => {
     if (!href) return;
@@ -336,10 +357,10 @@ function Button({
     }
   };
   return /* @__PURE__ */ jsx(
-    ShadCnButton,
+    Button,
     {
       type: props.type ?? "button",
-      disabled: isDisabled,
+      disabled: isDisabled || isLoading,
       onClick: props.onClick ?? handleClick,
       ...props,
       children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -349,5 +370,200 @@ function Button({
     }
   );
 }
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function InputGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "input-group",
+      role: "group",
+      className: cn(
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 min-w-0 has-[>textarea]:h-auto",
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+      }
+    },
+    defaultVariants: {
+      align: "inline-start"
+    }
+  }
+);
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "input-group-addon",
+      "data-align": align,
+      className: cn(inputGroupAddonVariants({ align }), className),
+      onClick: (e) => {
+        if (e.target.closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      },
+      ...props
+    }
+  );
+}
+cva(
+  "text-sm shadow-none flex gap-2 items-center",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+      }
+    },
+    defaultVariants: {
+      size: "xs"
+    }
+  }
+);
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Input2({
+  // 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 Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+function AuthForm({
+  title,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Form, { className: cn("mx-auto mt-20 w-96", className), ...props, children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { className: "mx-auto", children: title }) }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "relative flex flex-col gap-6", children }) })
+  ] }) });
+}
 
-export { AdminProvider, Button, Form, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin };
+export { AdminProvider, AuthForm, Button2 as Button, Form, Input2 as Input, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.83",
+  "version": "0.0.85",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",
@@ -47,7 +47,6 @@
     "@radix-ui/react-slot": "^1.2.4",
     "argon2": "^0.44.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "jsonwebtoken": "^9.0.3",
     "keyv": "^5.6.0",
     "logry": "^2.1.6",
@@ -55,7 +54,7 @@
     "mime-types": "^3.0.2",
     "nodemailer": "^8.0.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
+    "ua-parser-js": "^2.0.9",
     "ulid": "^3.0.2"
   },
   "devDependencies": {
@@ -68,6 +67,7 @@
     "@types/nodemailer": "^7.0.11",
     "@types/react": "^19.2.14",
     "@types/ssh2-sftp-client": "^9.0.6",
+    "clsx": "^2.1.1",
     "eslint": "^9",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
@@ -82,6 +82,7 @@
     "next": "^16.1.6",
     "prisma": "6.5.0",
     "react": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.1",