@yimingliao/cms 0.0.84 → 0.0.86

package/dist/client/index.d.ts

@@ -1,4 +1,4 @@
-import { R as Result, S as SuccessResult, d as ErrorResult, g as AdminFull, D as DeviceInfo } 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,23 +353,49 @@ 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;
 };
+declare function Button$1({ className, variant, size, asChild, ...props }: ButtonProps$1): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps extends ShadcnButtonProps, UIStates {
+declare function Card({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): react_jsx_runtime.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+    size?: "sm" | "icon-sm" | "xs" | "icon-xs" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button$1>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+declare function Spinner({ className, ...props }: ComponentProps<"svg">): react_jsx_runtime.JSX.Element;
+
+declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+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;
 
-declare function AuthForm({ title, children, className, ...props }: ComponentProps<"form"> & {
-    title: string;
-}): 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 const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-export { AdminProvider, AuthForm, Button, type ButtonProps, Form, type ShowToastOption, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };
+export { AdminProvider, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Form, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputProps, type ShowToastOption, Spinner, Textarea, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -2,7 +2,7 @@ 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 * as React2 from 'react';
+import * as React6 from 'react';
 import { createContext, useState, useContext, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -308,7 +308,7 @@ var buttonVariants = cva(
     }
   }
 );
-function ShadCnButton({
+function Button({
   className,
   variant,
   size,
@@ -325,51 +325,6 @@ function ShadCnButton({
     }
   );
 }
-function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Loader2Icon,
-    {
-      role: "status",
-      "aria-label": "Loading",
-      className: cn("size-4 animate-spin", className),
-      ...props
-    }
-  );
-}
-function Button({
-  icon,
-  href,
-  openNewTab = false,
-  // processing states
-  isDisabled = false,
-  isLoading = false,
-  // base
-  children,
-  ...props
-}) {
-  const router = useRouter();
-  const handleClick = () => {
-    if (!href) return;
-    if (openNewTab) {
-      window.open(href, "_blank");
-    } else {
-      router.push(href);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    ShadCnButton,
-    {
-      type: props.type ?? "button",
-      disabled: isDisabled || isLoading,
-      onClick: props.onClick ?? handleClick,
-      ...props,
-      children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && React2.createElement(icon),
-        children
-      ] })
-    }
-  );
-}
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -406,6 +361,29 @@ function CardTitle({ className, ...props }) {
     }
   );
 }
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function CardContent({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -416,16 +394,259 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function AuthForm({
-  title,
-  children,
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      ...props
+    }
+  );
+}
+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 Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        // "min-h-16",
+        // "field-sizing-content",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        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(Form, { className: cn("mx-auto mt-14 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 }) })
-  ] }) });
+  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
+    }
+  );
+}
+var inputGroupButtonVariants = 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 InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      "data-size": size,
+      variant,
+      className: cn(inputGroupButtonVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function InputGroupText({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+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 InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      "data-slot": "input-group-control",
+      className: cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Loader2Icon,
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      ...props
+    }
+  );
+}
+function Button2({
+  icon,
+  href,
+  openNewTab = false,
+  // ui states
+  isDisabled = false,
+  isLoading = false,
+  // base
+  children,
+  ...props
+}) {
+  const router = useRouter();
+  const handleClick = () => {
+    if (!href) return;
+    if (openNewTab) {
+      window.open(href, "_blank");
+    } else {
+      router.push(href);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: props.type ?? "button",
+      disabled: isDisabled || isLoading,
+      onClick: props.onClick ?? handleClick,
+      ...props,
+      children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && React6.createElement(icon),
+        children
+      ] })
+    }
+  );
+}
+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
+  ] });
 }
 
-export { AdminProvider, AuthForm, Button, Form, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };
+export { AdminProvider, Button2 as Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Form, Input2 as Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Spinner, Textarea, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };

package/package.json

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