@meta-1/design 0.0.174 → 0.0.176

package/package.json

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

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

@@ -0,0 +1,42 @@
+import type * as React from "react";
+
+import { Badge as UIBadge } from "@meta-1/design/components/ui/badge";
+import { cn } from "@meta-1/design/lib";
+
+export type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "error"
+  | "warning"
+  | "info";
+
+export type BadgeProps = Omit<React.ComponentProps<typeof UIBadge>, "variant"> & {
+  variant?: BadgeVariant;
+};
+
+export const Badge = ({ variant = "default", className, ...props }: BadgeProps) => {
+  // 扩展的场景色样式
+  const variantStyles: Partial<Record<BadgeVariant, string>> = {
+    success: "border-transparent bg-success text-success-foreground",
+    error: "border-transparent bg-error text-error-foreground",
+    warning: "border-transparent bg-warning text-warning-foreground",
+    info: "border-transparent bg-info text-info-foreground",
+  };
+
+  // 扩展场景使用 default variant，并添加自定义样式
+  if (variant && ["success", "error", "warning", "info"].includes(variant)) {
+    return <UIBadge {...props} className={cn(variantStyles[variant], className)} variant="default" />;
+  }
+
+  // 原生 variant 直接传递
+  return (
+    <UIBadge
+      {...props}
+      className={className}
+      variant={variant as "default" | "secondary" | "destructive" | "outline"}
+    />
+  );
+};

package/src/components/uix/data-table/index.tsx

@@ -514,8 +514,8 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
             {renderTableBody()}
           </Table>
         )}
-        <div className={cn("py-4", !mounted && "invisible")}>
-          {showPagination && (
+        {showPagination ? (
+          <div className={cn("py-4", !mounted && "invisible")}>
             <Pagination
               {...(pagination as PaginationProps)}
               onChange={(page: number) => {
@@ -525,8 +525,8 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
                 load?.({ size, page: 1 });
               }}
             />
-          )}
-        </div>
+          </div>
+        ) : null}
         {loading || !mounted ? (
           <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-white/50">
             <Spin />

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

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

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

@@ -196,8 +196,8 @@ export const Pagination: FC<PaginationProps> = (props) => {
   };
 
   return (
-    <div className="flex items-center justify-center space-x-6">
-      <ShadcnPagination>
+    <div className="flex items-center justify-center">
+      <ShadcnPagination className="flex items-center justify-center gap-md">
         {/* 总数信息 */}
         {showTotal ? (
           <div className="flex items-center space-x-2 text-muted-foreground text-sm">

package/src/index.ts

@@ -8,7 +8,6 @@ export {
   InputOTPSeparator,
   InputOTPSlot,
 } from "@meta-1/design/components/ui/input-otp";
-export { Badge } from "./components/ui/badge";
 export {
   Breadcrumb,
   BreadcrumbItem,
@@ -104,6 +103,8 @@ export type { ConfirmProps } from "./components/uix/alert-dialog";
 export { useAlert } from "./components/uix/alert-dialog";
 export type { AvatarProps } from "./components/uix/avatar";
 export { Avatar } from "./components/uix/avatar";
+export type { BadgeProps } from "./components/uix/badge";
+export { Badge } from "./components/uix/badge";
 export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./components/uix/breadcrumbs";
 export { Breadcrumbs, BreadcrumbsItem } from "./components/uix/breadcrumbs";
 export type { BroadcastChannelProviderProps } from "./components/uix/broadcast-channel-context";