@meta-1/design 0.0.199 → 0.0.200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.199",
+  "version": "0.0.200",
   "keywords": [
     "easykit",
     "design",
@@ -47,6 +47,8 @@
     "@radix-ui/react-toast": "1.2.2",
     "@radix-ui/react-tooltip": "1.1.4",
     "@tanstack/react-table": "8.20.5",
+    "ag-grid-community": "34.3.1",
+    "ag-grid-react": "34.3.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",

package/src/assets/locales/en-us.ts

@@ -71,4 +71,8 @@ export default {
   Empty: {
     text: "No data",
   },
+  Command: {
+    empty: "No results found.",
+    searchPlaceholder: "Type a command or search...",
+  },
 };

package/src/assets/locales/zh-cn.ts

@@ -71,4 +71,8 @@ export default {
   Empty: {
     text: "暂无数据",
   },
+  Command: {
+    empty: "未找到结果",
+    searchPlaceholder: "输入命令或搜索...",
+  },
 };

package/src/assets/locales/zh-tw.ts

@@ -71,4 +71,8 @@ export default {
   Empty: {
     text: "暫無數據",
   },
+  Command: {
+    empty: "未找到結果",
+    searchPlaceholder: "輸入命令或搜尋...",
+  },
 };

package/src/assets/style/theme.css

@@ -48,6 +48,77 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-action-hover: var(--action-hover);
+
+  --radius-default: 4px;
+  --gap-default: 0.5rem;
+
+  /* Button */
+  --radius-button: var(--radius-default);
+  --padding-button: 0.75rem;
+  --spacing-button: 2rem;
+
+  /* Alert */
+  --radius-alert: var(--radius-default);
+  --padding-alert: 0.75rem;
+  --gap-alert: var(--gap-default);
+
+  /* Dialog */
+  --radius-dialog: var(--radius-default);
+  --padding-dialog: 1rem;
+  --gap-dialog: 1rem;
+
+  /* Badge */
+  --radius-badge: var(--radius-default);
+  --padding-badge: var(--padding-badge-y) var(--padding-badge-x);
+  --padding-badge-x: 0.3rem;
+  --padding-badge-y: 0.1rem;
+
+  /* Card */
+  --radius-card: var(--radius-default);
+  --padding-card: 1rem;
+  --gap-card: var(--gap-default);
+
+  /* Select */
+  --radius-select: var(--radius-default);
+  --padding-select: 0.5rem;
+  --spacing-select: 2rem;
+
+  /* Popover */
+  --radius-popover: var(--radius-default);
+  --padding-popover: 0.25rem;
+
+  /* Command */
+  --radius-command: var(--radius-default);
+  --padding-command: 0.375rem;
+
+  /* Calendar */
+  --radius-calendar: var(--radius-default);
+  --padding-calendar: 0.5rem;
+  --gap-calendar: var(--gap-default);
+
+  /* Button */
+  --radius-input: var(--radius-default);
+  --padding-input: 0.5rem;
+  --spacing-input: 2rem;
+
+  /* Tabs */
+  --radius-tabs-title: var(--radius-default);
+  --spacing-tabs-title: 2rem;
+
+  /* Message */
+  --radius-message: var(--radius-default);
+  --padding-message: var(--padding-message-y) var(--padding-message-x);
+  --padding-message-x: 0.75rem;
+  --padding-message-y: 0.5rem;
+
+  /* Sheet */
+  --radius-sheet: var(--radius-default);
+  --padding-sheet: 1rem;
+  --gap-sheet: 1rem;
+
+  /* Tooltip */
+  --radius-tooltip: var(--radius-default);
+  --padding-tooltip: 0.5rem;
 }
 
 @layer base {
@@ -156,24 +227,4 @@
       display: inline-block;
     }
   }
-}
-
-@utility action-effect {
-  @apply hover:bg-[var(--action-hover)] hover:text-primary;
-  @apply focus:bg-[var(--action-hover)] focus:border-[var(--border)] focus:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
-  @apply dark:focus:border-[var(--sidebar-border)] dark:focus:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
-}
-
-@utility action-effect-active {
-  @apply active:bg-[var(--action-hover)] active:border-[var(--border)] active:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
-  @apply dark:active:border-[var(--sidebar-border)] dark:active:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
-}
-
-@utility action-active {
-  @apply text-primary bg-[var(--action-hover)];
-}
-
-@utility action-effect-disabled {
-  @apply opacity-50 cursor-not-allowed focus:bg-transparent active:bg-transparent focus:shadow-none active:shadow-none focus:border-transparent active:border-transparent;
-  @apply hover:bg-transparent;
-}
+}

package/src/components/ui/button.tsx

@@ -1,26 +1,28 @@
-import type * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@meta-1/design/lib/utils";
+import { cn } from "@meta-1/design/lib"
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "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:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+          "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:border-input dark:bg-input/30 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",
+          "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",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        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",
@@ -31,22 +33,30 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 function Button({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   asChild = false,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : "button"
 
-  return <Comp className={cn(buttonVariants({ variant, size, className }))} data-slot="button" {...props} />;
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

package/src/components/uix/action/index.tsx

@@ -1,5 +1,7 @@
 import type { FC, HTMLAttributes, PropsWithChildren } from "react";
-import classNames from "classnames";
+import "./style.css";
+
+import { cn } from "@meta-1/design";
 
 export type ActionProps = PropsWithChildren<HTMLAttributes<HTMLButtonElement>> & {
   theme?: "dark" | "light";
@@ -14,11 +16,11 @@ export const Action: FC<ActionProps> = (props) => {
   const elProps = {
     ...rest,
     disabled,
-    className: classNames(
-      "p-2 flex justify-center items-center rounded-sm border border-transparent border-solid focus-visible:outline-none",
+    className: cn(
+      "flex h-button items-center justify-center rounded-button border border-transparent border-solid px-button font-medium text-sm focus-visible:outline-none",
       theme === "light" && "hover:bg-white/20",
-      theme === "light" && "focus:bg-white/30 focus:border-white/30",
-      theme === "light" && "active:bg-white/30 active:border-white/30",
+      theme === "light" && "focus:border-white/30 focus:bg-white/30",
+      theme === "light" && "active:border-white/30 active:bg-white/30",
       theme === "dark" && "action-effect action-effect-active",
       active && theme === "light" && "bg-white/20",
       active && theme === "dark" && "action-active",

package/src/components/uix/action/style.css

@@ -0,0 +1,21 @@
+@import "../../../assets/style/theme.css";
+
+@utility action-effect {
+  @apply hover:bg-[var(--action-hover)] hover:text-primary;
+  @apply focus:bg-[var(--action-hover)] focus:border-[var(--border)] focus:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
+  @apply dark:focus:border-[var(--sidebar-border)] dark:focus:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
+}
+
+@utility action-effect-active {
+  @apply active:bg-[var(--action-hover)] active:border-[var(--border)] active:shadow-[0_0_0_1px_var(--card),0_0_0_3px_var(--primary)];
+  @apply dark:active:border-[var(--sidebar-border)] dark:active:shadow-[0_0_0_1px_var(--secondary),0_0_0_3px_var(--primary)];
+}
+
+@utility action-active {
+  @apply text-primary bg-[var(--action-hover)];
+}
+
+@utility action-effect-disabled {
+  @apply opacity-50 cursor-not-allowed focus:bg-transparent active:bg-transparent focus:shadow-none active:shadow-none focus:border-transparent active:border-transparent;
+  @apply hover:bg-transparent;
+}

package/src/components/uix/alert/index.tsx

@@ -20,7 +20,7 @@ export const Alert = (props: AlertProps) => {
     title,
     description,
     icon,
-    children: childrenProp,
+    children,
     titleClassName,
     descriptionClassName,
     variant = "default",
@@ -28,7 +28,6 @@ export const Alert = (props: AlertProps) => {
   } = props;
 
   let className = props.className;
-  const children = childrenProp || description;
 
   // 根据 variant 设置样式
   const variantStyles: Record<AlertVariant, string> = {
@@ -46,11 +45,12 @@ export const Alert = (props: AlertProps) => {
   const uiVariant = variant === "destructive" ? "destructive" : "default";
 
   return (
-    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={uiVariant}>
+    <UIAlert {...rest} className={cn("flex gap-alert rounded-alert p-alert", className)} variant={uiVariant}>
       {icon}
-      <div className="flex flex-1 flex-col gap-2">
+      <div className="flex flex-1 flex-col gap-alert">
         {title && <UIAlertTitle className={titleClassName}>{title}</UIAlertTitle>}
-        {children && <UIAlertDescription className={descriptionClassName}>{children}</UIAlertDescription>}
+        {description && <UIAlertDescription className={descriptionClassName}>{description}</UIAlertDescription>}
+        {children}
       </div>
     </UIAlert>
   );

package/src/components/uix/alert-dialog/index.tsx

@@ -25,33 +25,55 @@ export interface ConfirmProps {
   confirmLoading?: boolean;
 }
 
-const AlertDialog: FC<ConfirmProps> = (props) => {
-  const { description, title, onOk, onCancel } = props;
+export interface AlertDialogProps {
+  title: ReactNode;
+  description: ReactNode;
+  okText?: string;
+  // biome-ignore lint/suspicious/noConfusingVoidType: <onOk>
+  onOk?: () => boolean | void | Promise<boolean | void>;
+  open?: boolean;
+  confirmLoading?: boolean;
+}
+
+interface InternalAlertDialogProps extends ConfirmProps {
+  showCancel?: boolean;
+  onClose?: () => void;
+}
+
+const AlertDialog: FC<InternalAlertDialogProps> = (props) => {
+  const { description, title, onOk, onCancel, showCancel = true, onClose } = props;
 
   const config = useContext(UIXContext);
-  const okText = props.okText || get(config.locale, "Alert.okText");
+  const okText = props.okText || get(config.locale, "Alert.okText") || "确定";
   const cancelText = props.cancelText || get(config.locale, "Alert.cancelText");
 
   const [open, setOpen] = useState(props.open);
   const [loading, setLoading] = useState(false);
 
+  const handleClose = () => {
+    setOpen(false);
+    onClose?.();
+  };
+
   return (
     <UIAlertDialog {...props} open={open}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
+      <AlertDialogContent className="gap-dialog rounded-dialog p-dialog">
+        <AlertDialogHeader className="gap-dialog">
           <AlertDialogTitle>{title}</AlertDialogTitle>
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <Button
-            onClick={() => {
-              setOpen(false);
-              onCancel?.();
-            }}
-            variant="outline"
-          >
-            {cancelText}
-          </Button>
+          {showCancel && (
+            <Button
+              onClick={() => {
+                setOpen(false);
+                onCancel?.();
+              }}
+              variant="outline"
+            >
+              {cancelText}
+            </Button>
+          )}
           <Button
             loading={loading}
             onClick={async () => {
@@ -70,7 +92,7 @@ const AlertDialog: FC<ConfirmProps> = (props) => {
               }
               setLoading(false);
               if (value) {
-                setOpen(false);
+                handleClose();
               }
             }}
           >
@@ -102,7 +124,25 @@ export const useAlert = () => {
           close();
           props.onCancel?.();
         };
-        root = ReactDOMRender(<AlertDialog {...props} onCancel={onCancel} open={true} />, div);
+        root = ReactDOMRender(
+          <AlertDialog {...props} onCancel={onCancel} onClose={close} open={true} showCancel={true} />,
+          div,
+        );
+      },
+      alert: (props: AlertDialogProps) => {
+        // biome-ignore lint/suspicious/noExplicitAny: <root>
+        let root: any;
+        const div = document.createElement("div");
+        document.body.appendChild(div);
+        const close = () => {
+          setTimeout(() => {
+            root = root?._unmount();
+            if (div.parentNode) {
+              div.parentNode.removeChild(div);
+            }
+          }, 200);
+        };
+        root = ReactDOMRender(<AlertDialog {...props} onClose={close} open={true} showCancel={false} />, div);
       },
     };
   }, []);

package/src/components/uix/badge/index.tsx

@@ -28,14 +28,20 @@ export const Badge = ({ variant = "default", className, ...props }: BadgeProps)
 
   // 扩展场景使用 default variant，并添加自定义样式
   if (variant && ["success", "error", "warning", "info"].includes(variant)) {
-    return <UIBadge {...props} className={cn(variantStyles[variant], className)} variant="default" />;
+    return (
+      <UIBadge
+        {...props}
+        className={cn("rounded-badge p-badge", variantStyles[variant], className)}
+        variant="default"
+      />
+    );
   }
 
   // 原生 variant 直接传递
   return (
     <UIBadge
       {...props}
-      className={className}
+      className={cn("rounded-badge p-badge", className)}
       variant={variant as "default" | "secondary" | "destructive" | "outline"}
     />
   );

package/src/components/uix/button/index.tsx

@@ -1,13 +1,14 @@
-import { forwardRef } from "react";
+import { ComponentProps, forwardRef } from "react";
+import { VariantProps } from "class-variance-authority";
 
 import { Button as UIButton } from "@meta-1/design/components/ui/button";
 import { Spin } from "@meta-1/design/components/uix/spin";
 import { cn } from "@meta-1/design/lib";
 
-export interface ButtonProps extends React.ComponentProps<typeof UIButton> {
-  loading?: boolean;
+export type ButtonProps = Omit<ComponentProps<typeof UIButton>, "size"> & {
   long?: boolean;
-}
+  loading?: boolean;
+};
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {
   const { loading = false, long = false, disabled = false, className, ...rest } = props;
@@ -16,9 +17,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, forward
   return (
     <UIButton
       {...rest}
-      className={cn("gap-0.5", className, long ? "w-full" : null)}
+      className={cn("h-button rounded-button px-button", "gap-0.5", className, long ? "w-full" : null)}
       disabled={loading || disabled}
       ref={elementRef}
+      size={"none" as VariantProps<typeof UIButton>["size"]}
     >
       {loading ? <Spin /> : null}
       {props.children}

package/src/components/uix/card/index.tsx

@@ -19,9 +19,12 @@ export const Card: FC<CardProps> = (props) => {
   const { title = "", description = "", className, contentClassName, footer, shadow = false, actions } = props;
 
   return (
-    <UICard className={classNames(shadow ? null : "shadow-none", className)} onClick={props.onClick}>
+    <UICard
+      className={classNames("gap-card rounded-card py-card", shadow ? null : "shadow-none", className)}
+      onClick={props.onClick}
+    >
       {title || description ? (
-        <CardHeader className="pb-0">
+        <CardHeader className="px-card pb-0">
           {title ? (
             <div className="flex items-center justify-between">
               <CardTitle>{title}</CardTitle>
@@ -31,8 +34,8 @@ export const Card: FC<CardProps> = (props) => {
           {description ? <CardDescription>{description}</CardDescription> : null}
         </CardHeader>
       ) : null}
-      <CardContent className={cn("px-6", contentClassName)}>{props.children}</CardContent>
-      {footer ? <CardFooter>{footer}</CardFooter> : null}
+      <CardContent className={cn("px-card", contentClassName)}>{props.children}</CardContent>
+      {footer ? <CardFooter className="px-card">{footer}</CardFooter> : null}
     </UICard>
   );
 };

package/src/components/uix/checkbox-group/index.tsx

@@ -36,8 +36,7 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = forwardRef((props, _ref) =>
   };
 
   return (
-    <div className={classNames("-m-2 flex flex-wrap items-center justify-start space-x-2 space-y-2", className)}>
-      <span />
+    <div className={classNames("flex flex-wrap items-center justify-start gap-2", className)}>
       {options.map((option) => {
         const id = `checkbox-group-${option.value}`;
         const isDisabled = disabled || option.disabled;
@@ -49,12 +48,12 @@ export const CheckboxGroup: FC<CheckboxGroupProps> = forwardRef((props, _ref) =>
           >
             <Checkbox
               checked={checkedValues.includes(option.value)}
-              className={checkboxClassName}
+              className={classNames("shrink-0", checkboxClassName)}
               disabled={isDisabled}
               id={id}
               onCheckedChange={(checked: boolean) => onCheckedChange(option.value, checked)}
             />
-            <span>{option.label}</span>
+            <span className="leading-none">{option.label}</span>
           </label>
         );
       })}