@meta-1/design 0.0.172 → 0.0.173

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.172",
+  "version": "0.0.173",
   "keywords": [
     "easykit",
     "design",

package/src/assets/style/theme.css

@@ -29,6 +29,8 @@
   --color-error-foreground: var(--error-foreground);
   --color-warning: var(--warning);
   --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -66,6 +68,8 @@
     --error-foreground: rgba(245, 63, 63, 1);
     --warning: rgba(255, 247, 232, 1);
     --warning-foreground: rgba(255, 125, 0, 1);
+    --info: rgba(232, 243, 255, 1);
+    --info-foreground: rgba(37, 99, 235, 1);
     --muted: hsl(0 0% 96.1%);
     --muted-foreground: hsl(0 0% 45.1%);
     --accent: hsl(0 0% 96.1%);
@@ -101,12 +105,14 @@
     --popover-foreground: hsl(0 0% 98%);
     --primary: rgba(68, 133, 105, 1);
     --primary-foreground: rgba(255, 255, 255, 1);
-    --success: rgba(232, 255, 234, 1);
-    --success-foreground: rgba(0, 180, 42, 1);
-    --error: rgba(255, 236, 232, 1);
-    --error-foreground: rgba(245, 63, 63, 1);
-    --warning: rgba(255, 247, 232, 1);
-    --warning-foreground: rgba(255, 125, 0, 1);
+    --success: rgba(20, 83, 45, 0.2);
+    --success-foreground: rgba(74, 222, 128, 1);
+    --error: rgba(127, 29, 29, 0.2);
+    --error-foreground: rgba(252, 165, 165, 1);
+    --warning: rgba(120, 53, 15, 0.2);
+    --warning-foreground: rgba(251, 191, 36, 1);
+    --info: rgba(30, 58, 138, 0.2);
+    --info-foreground: rgba(147, 197, 253, 1);
     --secondary: hsl(0 0% 14.9%);
     --secondary-foreground: hsl(0 0% 98%);
     --muted: hsl(0 0% 14.9%);

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

@@ -3,13 +3,16 @@ import type { ComponentProps, ReactNode } from "react";
 import { cn } from "@meta-1/design/lib";
 import { Alert as UIAlert, AlertDescription as UIAlertDescription, AlertTitle as UIAlertTitle } from "../../ui/alert";
 
-export type AlertProps = ComponentProps<typeof UIAlert> & {
+export type AlertVariant = "default" | "destructive" | "success" | "error" | "warning" | "info";
+
+export type AlertProps = Omit<ComponentProps<typeof UIAlert>, "variant"> & {
   title?: ReactNode;
   description?: ReactNode;
   icon?: ReactNode;
   children?: ReactNode;
   titleClassName?: string;
   descriptionClassName?: string;
+  variant?: AlertVariant;
 };
 
 export const Alert = (props: AlertProps) => {
@@ -20,19 +23,30 @@ export const Alert = (props: AlertProps) => {
     children: childrenProp,
     titleClassName,
     descriptionClassName,
-    variant,
+    variant = "default",
     ...rest
   } = props;
 
   let className = props.className;
   const children = childrenProp || description;
 
-  if (variant === "destructive") {
-    className = cn("border-destructive/20 bg-destructive/10 text-destructive", className);
-  }
+  // 根据 variant 设置样式
+  const variantStyles: Record<AlertVariant, string> = {
+    default: "",
+    destructive: "border-destructive/20 bg-destructive/10 text-destructive",
+    success: "border-success-foreground/20 bg-success text-success-foreground",
+    error: "border-error-foreground/20 bg-error text-error-foreground",
+    warning: "border-warning-foreground/20 bg-warning text-warning-foreground",
+    info: "border-info-foreground/20 bg-info text-info-foreground",
+  };
+
+  className = cn(variantStyles[variant], className);
+
+  // 只有 default 和 destructive 传给 UIAlert，其他的我们自己处理样式
+  const uiVariant = variant === "destructive" ? "destructive" : "default";
 
   return (
-    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={variant}>
+    <UIAlert {...rest} className={cn("flex gap-2", className)} variant={uiVariant}>
       {icon}
       <div className="flex flex-1 flex-col gap-2">
         {title && <UIAlertTitle className={titleClassName}>{title}</UIAlertTitle>}

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

@@ -55,10 +55,16 @@ export const Dialog: FC<DialogProps> = (props) => {
           <DialogTitle className={cn(!title && "sr-only")}>{title || "Dialog"}</DialogTitle>
           {description ? <DialogDescription>{description}</DialogDescription> : null}
         </DialogHeader>
-        <div className="min-h-0 flex-1 overflow-auto px-6">{props.children}</div>
+        <div className={cn("min-h-0 flex-1 overflow-auto px-6", !footer && "pb-6")}>{props.children}</div>
         {footer ? <DialogFooter>{footer}</DialogFooter> : null}
         {loading ? (
-          <div className={cn("absolute top-0 right-0 bottom-0 left-0 bg-white/50", "flex items-center justify-center")}>
+          <div
+            className={cn(
+              "absolute top-0 right-0 bottom-0 left-0 rounded-lg",
+              "bg-background/80 backdrop-blur-sm",
+              "flex items-center justify-center",
+            )}
+          >
             <Spin />
           </div>
         ) : null}

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

@@ -5,16 +5,40 @@ export const useMessage = () => {
   return useMemo(() => {
     return {
       success: (message?: ReactNode, options?: ExternalToast) => {
-        toast.success(message, options);
+        toast.success(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-success-foreground/20 bg-success/80 text-success-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       error: (message?: ReactNode, options?: ExternalToast) => {
-        toast.error(message, options);
+        toast.error(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-error-foreground/20 bg-error/80 text-error-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       warning: (message?: ReactNode, options?: ExternalToast) => {
-        toast.warning(message, options);
+        toast.warning(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-warning-foreground/20 bg-warning/80 text-warning-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
       info: (message?: ReactNode, options?: ExternalToast) => {
-        toast.info(message, options);
+        toast.info(message, {
+          unstyled: true,
+          ...options,
+          className:
+            "group w-full max-w-sm border-info-foreground/20 bg-info/80 text-info-foreground rounded-lg border px-4 py-3 shadow-lg flex items-start gap-3 backdrop-blur-sm overflow-hidden",
+          descriptionClassName: "text-sm truncate",
+        });
       },
     };
   }, []);