feat: add badge card avatar alert and progress

2026-03-19 17:24:22 +08:00
parent 063179933c
commit cb15b46b0c
23 changed files with 1342 additions and 0 deletions
@@ -0,0 +1,42 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+import { badgeVariants } from "./badge.variants";
+import { cn } from "../lib/cn";
+import type { VariantProps } from "../lib/cva";
+import { createDataAttributes, createSlot, type AsChildProp } from "../lib/contracts";
+
+export type BadgeProps = React.ComponentPropsWithoutRef<"span"> &
+  AsChildProp &
+  VariantProps<typeof badgeVariants>;
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  {
+    asChild = false,
+    children,
+    className,
+    size,
+    tone,
+    variant,
+    ...props
+  },
+  ref
+) {
+  const Component = asChild ? Slot : "span";
+
+  return (
+    <Component
+      {...props}
+      {...createSlot("root")}
+      {...createDataAttributes({
+        size,
+        tone,
+        variant
+      })}
+      className={cn(badgeVariants({ size, tone, variant }), className)}
+      ref={ref}
+    >
+      {asChild ? <Slottable>{children}</Slottable> : <span {...createSlot("label")}>{children}</span>}
+    </Component>
+  );
+});