@neynar/ui 0.1.3 → 0.2.1

package/docs/llm/components/typography.md

@@ -1,97 +1,26 @@
 # Typography Components
 
 ## Typography
-Consistent text styling with semantic variants and accessibility features.
-
-```tsx
-import { Typography } from "@neynar/ui"
-
-// Basic usage with semantic variants
-<Typography variant="heading" as="h1">
-  Main Page Title
-</Typography>
-
-<Typography variant="subheading" as="h2">
-  Section Header
-</Typography>
-
-<Typography variant="body">
-  Standard paragraph text content with proper line height and spacing.
-</Typography>
-
-<Typography variant="bodyEmphasized">
-  Emphasized text for important information.
-</Typography>
-
-// Color and styling options
-<Typography variant="body" color="muted">
-  Secondary information in muted color
-</Typography>
-
-<Typography variant="details" color="destructive">
-  Error or warning text
-</Typography>
-
-// Form field labels
-<Typography variant="field" as="label" htmlFor="email">
-  Email Address
-</Typography>
 
-// Code snippets
-<Typography variant="code" as="code">
-  const example = "Hello, world!";
-</Typography>
-
-// Table content
-<Typography variant="tableHeader" as="th">
-  Column Header
-</Typography>
-
-<Typography variant="tableCell" as="td">
-  Cell content
-</Typography>
-
-// Microcopy for fine print
-<Typography variant="microcopy" color="muted">
-  Terms and conditions apply
-</Typography>
-
-// Advanced styling
-<Typography 
-  variant="body" 
-  color="accent" 
-  italic 
-  underline 
-  align="center"
->
-  Styled text with multiple options
-</Typography>
-
-// Truncated text
-<Typography variant="body" truncate className="max-w-xs">
-  Long text that will be truncated with ellipsis
-</Typography>
-
-// Screen reader only content
-<Typography variant="details" srOnly>
-  Additional context for accessibility
-</Typography>
-```
+Consistent text styling with semantic variants and accessibility features.
 
 ### Typography Design System
 
 The Typography component uses a carefully designed font scale that maps to your design system:
 
-- **heading** (20px) - Main page and section titles
-- **subheading** (17px) - Secondary headings for subsections
-- **body** (14px) - Standard content text 
-- **bodyEmphasized** (14px) - Important content with medium weight
-- **details** (12px) - Smaller text for descriptions
-- **field** (17px) - Form field labels
-- **code** (17px) - Monospace text for code
-- **microcopy** (10px) - Fine print and captions
-- **tableCell** (17px) - Table cell content
-- **tableHeader** (17px) - Table headers with emphasis
+- **microcopy** (10px / 1.2)
+- **detail** (13px / 1.2)
+- **body** (15px / 1.1)
+- **bodyBlog** (17px / 1.5)
+- **paragraphLead** (17px 1.2)
+- **eyebrow** (20px / 1.2)
+- **subHeadline** (22px / 1.2)
+- **headline** (36px / 1.2)
+- **sectionTitle** (45px / 1.4)
+- **pageTitle** (56px / 1.4)
+- **displayTitle** (72px / 1.1)
+- **heroTitle** (90px 1.1)
+- **code** (15px / 1.2)
 
 ### Accessibility Features
 
@@ -106,6 +35,7 @@ The Typography component uses a carefully designed font scale that maps to your
 The Typography system includes semantic HTML components for better accessibility and developer experience:
 
 ### H1-H6 (Headings)
+
 ```tsx
 import { H1, H2, H3, H4, H5, H6 } from "@neynar/ui"
 
@@ -116,6 +46,7 @@ import { H1, H2, H3, H4, H5, H6 } from "@neynar/ui"
 ```
 
 ### P (Paragraph)
+
 ```tsx
 import { P } from "@neynar/ui"
 
@@ -124,6 +55,7 @@ import { P } from "@neynar/ui"
 ```
 
 ### A (Anchor/Link)
+
 ```tsx
 import { A } from "@neynar/ui"
 
@@ -142,6 +74,7 @@ import { A } from "@neynar/ui"
 ```
 
 ### Other Semantic Elements
+
 ```tsx
 import { Span, Code, Small, Strong, Lead, Blockquote } from "@neynar/ui"
 
@@ -156,6 +89,7 @@ import { Span, Code, Small, Strong, Lead, Blockquote } from "@neynar/ui"
 ## Framework Integration
 
 ### Next.js Link Integration
+
 ```tsx
 // Create a custom Link component
 import Link from "next/link";
@@ -170,10 +104,13 @@ function AppLink({ href, children, ...props }) {
 }
 
 // Usage
-<AppLink href="/about" variant="subheading">About Us</AppLink>
+<AppLink href="/about" variant="subheading">
+  About Us
+</AppLink>;
 ```
 
 ### React Router Integration
+
 ```tsx
 // Custom Link for React Router
 import { Link } from "react-router-dom";
@@ -188,7 +125,74 @@ function AppLink({ to, children, ...props }) {
 }
 
 // Usage
-<AppLink to="/contact" color="accent">Contact</AppLink>
+<AppLink to="/contact" color="accent">
+  Contact
+</AppLink>;
+```
+
+### Typography Component
+
+Only use as a last resort if none of the other components apply
+
+```tsx
+import { Typography } from "@neynar/ui"
+
+// Basic usage with semantic variants
+<Typography variant="heroTitle" as="h1">
+  Main Page Title
+</Typography>
+
+<Typography variant="pageTitle" as="h2">
+  Section Header
+</Typography>
+
+<Typography variant="body">
+  Standard paragraph text content with proper line height and spacing.
+</Typography>
+
+<Typography variant="body" weight="bold">
+  Emphasized text for important information.
+</Typography>
+
+// Color and styling options
+<Typography variant="body" color="muted">
+  Secondary information in muted color
+</Typography>
+
+<Typography variant="detail" color="destructive">
+  Error or warning text
+</Typography>
+
+// Form field labels
+<Typography variant="detail" as="label" htmlFor="email">
+  Email Address
+</Typography>
+
+// Microcopy for fine print
+<Typography variant="microcopy" color="muted">
+  Terms and conditions apply
+</Typography>
+
+// Advanced styling
+<Typography
+  variant="body"
+  color="accent"
+  italic
+  underline
+  align="center"
+>
+  Styled text with multiple options
+</Typography>
+
+// Truncated text
+<Typography variant="body" truncate className="max-w-xs">
+  Long text that will be truncated with ellipsis
+</Typography>
+
+// Screen reader only content
+<Typography variant="details" srOnly>
+  Additional context for accessibility
+</Typography>
 ```
 
 ### Performance Notes
@@ -196,4 +200,4 @@ function AppLink({ to, children, ...props }) {
 - Uses CSS custom properties for consistent theming
 - Leverages Tailwind's default font scale for optimal bundle size
 - Supports tree-shaking when used with selective imports
-- Semantic components improve SEO and accessibility
+- Semantic components improve SEO and accessibility

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.1.3",
+  "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/components/ui/stack.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
  * Spacing options for Stack component using Tailwind CSS spacing scale
  *
  * Maps to Tailwind spacing utilities:
+ * - 0 = 0rem (0px) - No spacing
  * - 1 = 0.25rem (4px) - Ultra-tight spacing for dense layouts
  * - 2 = 0.5rem (8px) - Tight spacing for compact components
  * - 3 = 0.75rem (12px) - Close spacing for related items
@@ -13,7 +14,7 @@ import { cn } from "@/lib/utils";
  * - 8 = 2rem (32px) - Wide spacing for distinct content areas
  * - 12 = 3rem (48px) - Extra-wide spacing for major layout divisions
  */
-type StackSpacing = 1 | 2 | 3 | 4 | 6 | 8 | 12;
+type StackSpacing = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12;
 
 /**
  * Layout direction options for Stack component
@@ -49,6 +50,7 @@ type StackDocsProps = React.HTMLAttributes<HTMLDivElement> & {
    * rem values for predictable visual hierarchy.
    *
    * **Spacing Guidelines:**
+   * - Use `0` for no spacing, good for typography and inline elements
    * - Use `1-2` for tightly related items (button groups, form fields)
    * - Use `3-4` for standard component spacing (default recommended)
    * - Use `6-8` for section separation and content areas
@@ -475,6 +477,7 @@ const Stack = React.forwardRef<
       className={cn(
         direction === "vertical" ? "flex flex-col" : "flex flex-row",
         {
+          "space-y-0": direction === "vertical" && spacing === 0,
           "space-y-1": direction === "vertical" && spacing === 1,
           "space-y-2": direction === "vertical" && spacing === 2,
           "space-y-3": direction === "vertical" && spacing === 3,
@@ -482,6 +485,7 @@ const Stack = React.forwardRef<
           "space-y-6": direction === "vertical" && spacing === 6,
           "space-y-8": direction === "vertical" && spacing === 8,
           "space-y-12": direction === "vertical" && spacing === 12,
+          "space-x-0": direction === "horizontal" && spacing === 0,
           "space-x-1": direction === "horizontal" && spacing === 1,
           "space-x-2": direction === "horizontal" && spacing === 2,
           "space-x-3": direction === "horizontal" && spacing === 3,