@yimingliao/cms 0.0.86 → 0.0.88

package/dist/chunk-OQGJBZXQ.js

@@ -0,0 +1,358 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { useState, useEffect } from 'react';
+import { UAParser } from 'ua-parser-js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+import { Loader2Icon } from 'lucide-react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+// src/client/applications/ui/utils.ts
+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;
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+        xs: "h-7 rounded-md px-2 text-xs has-[>svg]:px-2 gap-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+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 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",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+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(
+    "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 Label({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Spinner, Textarea, cn, useDeviceInfo };

package/dist/client/index.d.ts

@@ -6,10 +6,9 @@ import * as _tanstack_query_core from '@tanstack/query-core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { c as createVerifyAction } from '../create-verify-action-DBwWOXPO.js';
 import * as React$1 from 'react';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode, HTMLAttributes } from 'react';
+import { L as LabelProps, B as ButtonProps$1 } from '../label-BF4qxS03.js';
 import { LucideIcon } from 'lucide-react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
 import { ClassValue } from 'clsx';
 import '../types-J25u1G6t.js';
 import '../types-0oS1A2K5.js';
@@ -22,6 +21,9 @@ import 'nodemailer';
 import 'intor';
 import 'keyv';
 import 'zod/v4/core';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '@radix-ui/react-label';
 
 interface UIStates {
     isLoading?: boolean;
@@ -349,39 +351,21 @@ declare function createAdminInitializer({ useAdmin, useQuery, verifyAction, }: {
 
 declare function Form({ onSubmit, className, ...props }: ComponentProps<"form">): react_jsx_runtime.JSX.Element;
 
-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 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;
-
-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;
+interface FieldProps extends LabelProps {
+    label: ReactNode;
+    isRequired?: boolean;
+    hint?: ReactNode;
+    labelChildren?: ReactNode;
+    children: ReactNode;
+}
+declare function Field({ label, isRequired, hint, labelChildren, children, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
 
-declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+interface FieldBodyProps extends HTMLAttributes<HTMLDivElement>, UIStates {
+    isEmpty?: boolean;
+    backgroundClassName?: string;
+    childrenClassName?: string;
+}
+declare function FieldBody({ isLoading, isDisabled, isEmpty, className, backgroundClassName, childrenClassName, children, ...props }: FieldBodyProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1, UIStates {
     icon?: LucideIcon;
@@ -394,8 +378,10 @@ interface InputProps<T = Record<string, unknown>> extends ComponentProps<"input"
 }
 declare function Input<T>({ fieldName, setFormData, isLoading, isDisabled, isError, children, ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
 
+declare function PasswordInput<T>({ ...props }: InputProps<T>): react_jsx_runtime.JSX.Element;
+
 declare const cn: (...inputs: ClassValue[]) => string;
 
 declare function useDeviceInfo(): DeviceInfo | null;
 
-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 };
+export { AdminProvider, Button, type ButtonProps, Field, FieldBody, Form, Input, type InputProps, PasswordInput, type ShowToastOption, cn, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin, useDeviceInfo };

package/dist/client/index.js

@@ -1,16 +1,14 @@
+import { cn, Label, Spinner, Button, InputGroup, InputGroupAddon, InputGroupInput, InputGroupButton } from '../chunk-OQGJBZXQ.js';
+export { cn, useDeviceInfo } from '../chunk-OQGJBZXQ.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 * as React6 from 'react';
+import * as React 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 { Asterisk, Eye, EyeOff } from 'lucide-react';
+import { useTranslator } from 'intor/react';
 import { useRouter } from 'next/navigation';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import { Loader2Icon } from 'lucide-react';
 
 // src/client/infrastructure/fetch/smart-fetch.ts
 function createSmartFetch({
@@ -242,30 +240,6 @@ function createAdminInitializer({
     return null;
   };
 }
-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,
@@ -278,311 +252,78 @@ function Form({
   };
   return /* @__PURE__ */ jsx("form", { className: cn(className), onSubmit: handleSubmit, ...props });
 }
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40 dark:bg-success/60",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40 dark:bg-warning/60"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-        xs: "h-7 rounded-md px-2 text-xs has-[>svg]:px-2 gap-1"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
+function Field({
+  label,
+  isRequired = false,
+  hint,
+  labelChildren,
+  children,
   ...props
 }) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-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 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",
-    {
-      "data-slot": "card-content",
-      className: cn("px-6", className),
-      ...props
-    }
-  );
-}
-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
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: "grid w-full items-center gap-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(Label, { className: "flex gap-1 truncate", ...props, children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx(Asterisk, { className: "text-destructive size-3" }),
+        hint && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: hint })
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: labelChildren })
+    ] }),
+    children
+  ] });
 }
-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({
+function FieldBody({
+  // ui states
+  isLoading = false,
+  isDisabled = false,
+  isEmpty = false,
+  // base
   className,
-  align = "inline-start",
+  backgroundClassName,
+  childrenClassName,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const { t } = useTranslator();
+  return /* @__PURE__ */ jsxs(
     "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
+        className,
+        "relative",
+        "min-h-9 w-full min-w-0",
+        "flex items-center",
+        "text-sm"
       ),
-      ...props
-    }
-  );
-}
-function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Loader2Icon,
-    {
-      role: "status",
-      "aria-label": "Loading",
-      className: cn("size-4 animate-spin", className),
-      ...props
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute size-full",
+              "dark:bg-input/30 bg-foreground/2 rounded-md",
+              backgroundClassName
+            )
+          }
+        ),
+        isLoading && /* @__PURE__ */ jsx("div", { className: "px-3", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        !isLoading && (!children || isEmpty) && /* @__PURE__ */ jsx("div", { className: "flex-center h-9 px-3 opacity-50", children: /* @__PURE__ */ jsx("p", { className: "opacity-50", children: t("ui.no-data.text") }) }),
+        !isLoading && children && !isEmpty && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative size-full",
+              "flex items-center gap-3",
+              "px-3 py-2",
+              "break-all",
+              (isDisabled || isLoading) && "opacity-50",
+              childrenClassName
+            ),
+            children
+          }
+        )
+      ]
     }
   );
 }
@@ -614,13 +355,13 @@ function Button2({
       onClick: props.onClick ?? handleClick,
       ...props,
       children: isLoading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && React6.createElement(icon),
+        icon && React.createElement(icon),
         children
       ] })
     }
   );
 }
-function Input2({
+function Input({
   // form context
   fieldName,
   setFormData,
@@ -648,5 +389,18 @@ function Input2({
     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,
+    {
+      "aria-label": showPassword ? "Hide password" : "Show password",
+      title: showPassword ? "Hide password" : "Show password",
+      size: "icon-xs",
+      onClick: () => setShowPassword((prev) => !prev),
+      children: showPassword ? /* @__PURE__ */ jsx(Eye, {}) : /* @__PURE__ */ jsx(EyeOff, {})
+    }
+  ) }) });
+}
 
-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 };
+export { AdminProvider, Button2 as Button, Field, FieldBody, Form, Input, PasswordInput, createAdminInitializer, createRequestInterceptor, createResponseInterceptor, createSmartFetch, createUseCommand, createUseQuery, handleToast, useAdmin };

package/dist/client/shadcn/index.d.ts

@@ -0,0 +1,37 @@
+import { a as Button } from '../../label-BF4qxS03.js';
+export { B as ButtonProps, b as Label, L as LabelProps } from '../../label-BF4qxS03.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import '@radix-ui/react-label';
+
+declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+
+declare function InputGroup({ className, ...props }: React.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.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.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.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.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Spinner, Textarea };

package/dist/client/shadcn/index.js

@@ -0,0 +1 @@
+export { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Spinner, Textarea } from '../../chunk-OQGJBZXQ.js';

package/dist/label-BF4qxS03.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+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 ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+};
+declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root>;
+declare function Label({ className, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
+
+export { type ButtonProps as B, type LabelProps as L, Button as a, Label as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yimingliao/cms",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "author": "Yiming Liao",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,11 @@
       "import": "./dist/client/index.js",
       "require": "./dist/client/index.js"
     },
+    "./client/shadcn": {
+      "types": "./dist/client/shadcn/index.d.ts",
+      "import": "./dist/client/shadcn/index.js",
+      "require": "./dist/client/shadcn/index.js"
+    },
     "./server": {
       "types": "./dist/server/index.d.ts",
       "import": "./dist/server/index.js",
@@ -44,6 +49,7 @@
   },
   "dependencies": {
     "@keyv/redis": "^5.1.6",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "argon2": "^0.44.0",
     "class-variance-authority": "^0.7.1",
@@ -80,6 +86,8 @@
     "intor": "^2.5.0",
     "knip": "^5.86.0",
     "next": "^16.1.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "prisma": "6.5.0",
     "react": "^19.2.4",
     "tailwind-merge": "^3.5.0",