@neynar/ui 0.2.0 → 0.2.1

package/llm-docs/badge.llm.md

@@ -7,35 +7,35 @@ Badge - Versatile status indicator component for labels, counts, and notificatio
 ## JSX Usage
 
 ```jsx
-import { Badge } from '@neynar/ui';
+import { Badge } from "@neynar/ui";
 
-<Badge
-  variant={value}
-  className="value"
-  asChild={true}
->
+<Badge variant={value} className="value" asChild={true}>
   {/* Your content here */}
-</Badge>
+</Badge>;
 ```
 
 ## Component Props
 
 ### variant
-- **Type**: `"default" | "secondary" | "destructive" | "outline"`
+
+- **Type**: `"default" | "secondary" | "destructive" | "success" | "warning" | "info" | "outline"`
 - **Required**: No
 - **Description**: No description available
 
 ### className
+
 - **Type**: `string`
 - **Required**: No
 - **Description**: No description available
 
 ### children
+
 - **Type**: `React.ReactNode`
 - **Required**: No
 - **Description**: No description available
 
 ### asChild
+
 - **Type**: `boolean`
 - **Required**: No
 - **Description**: No description available
@@ -43,14 +43,20 @@ import { Badge } from '@neynar/ui';
 ## Examples
 
 ### Example 1
+
 ```tsx
 // Basic status badges
 <Badge>New</Badge>
 <Badge variant="secondary">Draft</Badge>
 <Badge variant="destructive">Error</Badge>
+<Badge variant="success">Success</Badge>
+<Badge variant="warning">Warning</Badge>
+<Badge variant="info">Info</Badge>
 <Badge variant="outline">Pending</Badge>
 ```
+
 ### Example 2
+
 ```tsx
 // Badge with icon content
 import { Check, AlertTriangle } from "lucide-react";
@@ -63,7 +69,9 @@ import { Check, AlertTriangle } from "lucide-react";
   Failed
 </Badge>
 ```
+
 ### Example 3
+
 ```tsx
 // Notification count badge
 <div className="relative inline-block">
@@ -73,7 +81,9 @@ import { Check, AlertTriangle } from "lucide-react";
   </Badge>
 </div>
 ```
+
 ### Example 4
+
 ```tsx
 // Interactive badge as link using asChild
 import Link from "next/link";
@@ -81,9 +91,11 @@ import Link from "next/link";
   <Link href="/notifications" className="cursor-pointer">
     3 new messages
   </Link>
-</Badge>
+</Badge>;
 ```
+
 ### Example 5
+
 ```tsx
 // Interactive badge as button
 <Badge asChild>
@@ -92,7 +104,9 @@ import Link from "next/link";
   </button>
 </Badge>
 ```
+
 ### Example 6
+
 ```tsx
 // Removable tag badge with close button
 <Badge className="pr-1 gap-1">
@@ -105,4 +119,4 @@ import Link from "next/link";
     <X className="h-3 w-3" />
   </button>
 </Badge>
-```
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neynar/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "author": "Neynar Inc.",
   "description": "React UI component library built on shadcn/ui and Tailwind CSS",

package/src/components/ui/badge.tsx

@@ -23,6 +23,9 @@ import { cn } from "@/lib/utils";
  * @variant default - Primary brand color badge for important status indicators and primary actions
  * @variant secondary - Muted background badge for supplementary information and low-priority labels
  * @variant destructive - Error/warning badge for critical states, failures, and urgent attention
+ * @variant success - Success badge for positive states, successes, and positive attention
+ * @variant warning - Warning badge for warning states, warnings, and negative attention
+ * @variant info - Info badge for informational states, information, and neutral attention
  * @variant outline - Subtle border-only badge for minimal emphasis and subtle labeling
  *
  * @param props - Variant configuration object
@@ -43,7 +46,7 @@ import { cn } from "@/lib/utils";
  * ```
  */
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-bold w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
@@ -52,7 +55,12 @@ const badgeVariants = cva(
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        success:
+          "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90",
+        warning:
+          "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
+        info: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90",
         outline:
           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
@@ -70,7 +78,14 @@ const badgeVariants = cva(
 // eslint-disable-next-line unused-imports/no-unused-vars
 type BadgeDocsProps = {
   /** The visual variant of the badge that determines its color scheme and emphasis level */
-  variant?: "default" | "secondary" | "destructive" | "outline";
+  variant?:
+    | "default"
+    | "secondary"
+    | "destructive"
+    | "success"
+    | "warning"
+    | "info"
+    | "outline";
   /** Additional CSS classes to apply to the badge for custom styling */
   className?: string;
   /** Content to display inside the badge (text, icons, or React components) */
@@ -100,6 +115,9 @@ type BadgeDocsProps = {
  * <Badge>New</Badge>
  * <Badge variant="secondary">Draft</Badge>
  * <Badge variant="destructive">Error</Badge>
+ * <Badge variant="success">Success</Badge>
+ * <Badge variant="warning">Warning</Badge>
+ * <Badge variant="info">Info</Badge>
  * <Badge variant="outline">Pending</Badge>
  * ```
  *

package/src/styles/globals.css

@@ -34,6 +34,8 @@
   --success-foreground: oklch(from #ffffff l c h); /* White text on success */
   --warning: oklch(from #f59e0b l c h); /* Warning/Orange */
   --warning-foreground: oklch(from #ffffff l c h); /* White text on warning */
+  --info: oklch(from #1976d2 l c h); /* Info/Blue */
+  --info-foreground: oklch(from #ffffff l c h); /* White text on info */
   --border: oklch(from #dddddd l c h); /* Borders/Muted */
   --input: oklch(from #ffffff l c h); /* Surface/Field */
   --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
@@ -82,9 +84,11 @@
     from #ffffff l c h
   ); /* Text/UI/White (fixed) */
   --success: oklch(from #22c55e l c h); /* Success/Green Dark */
-  --success-foreground: oklch(from #ffffff l c h); /* White text on success */
+  --success-foreground: oklch(from #272d26 l c h); /* White text on success */
   --warning: oklch(from #fbbf24 l c h); /* Warning/Orange Dark */
   --warning-foreground: oklch(from #000000 l c h); /* Black text on warning */
+  --info: oklch(from #1976d2 l c h); /* Info/Blue Dark */
+  --info-foreground: oklch(from #ffffff l c h); /* White text on info */
   --border: oklch(from #444444 l c h); /* Borders/Muted Dark */
   --input: oklch(from #222222 l c h); /* Surface/Field Dark */
   --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */