@neynar/ui 0.1.3 → 0.2.0

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/package.json

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

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,