@neynar/ui 0.3.1 → 0.4.0

package/.llm/blockquote.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-Blockquote - Quoted text component for citations and excerpts Semantic blockquote element for extended quotations, testimonials, and excerpts. Features italic styling and left border for visual distinction.
+Blockquote - Quoted text component Semantic blockquote element for extended quotations and excerpts. Features italic styling and left border for visual distinction. Defaults to blockquote element.
 
 ## JSX Usage
 
@@ -10,17 +10,7 @@ Blockquote - Quoted text component for citations and excerpts Semantic blockquot
 import { Blockquote } from '@neynar/ui';
 
 <Blockquote
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
+  as={value}
   className="value"
 >
   {/* Your content here */}
@@ -29,70 +19,20 @@ import { Blockquote } from '@neynar/ui';
 
 ## Component Props
 
-### color
-- **Type**: `TypographyColor`
+### as
+- **Type**: `React.ElementType`
 - **Required**: No
-- **Description**: No description available
-
-### align
-- **Type**: `"left" | "center" | "right" | "justify"`
-- **Required**: No
-- **Description**: No description available
-
-### transform
-- **Type**: `"uppercase" | "lowercase" | "capitalize"`
-- **Required**: No
-- **Description**: No description available
-
-### weight
-- **Type**: `"normal" | "medium" | "semibold" | "bold"`
-- **Required**: No
-- **Description**: No description available
-
-### htmlFor
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### italic
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### underline
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### strikethrough
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### truncate
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### srOnly
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
+- **Description**: HTML element to render
 
 ### className
 - **Type**: `string`
 - **Required**: No
-- **Description**: No description available
+- **Description**: Additional Tailwind classes
 
 ### children
 - **Type**: `React.ReactNode`
 - **Required**: No
-- **Description**: No description available
+- **Description**: Content to render
 
 ## Examples
 
@@ -103,15 +43,13 @@ import { Blockquote } from '@neynar/ui';
 </Blockquote>
 // With attribution
 <div>
-  <Blockquote className="mb-2">
-    "Building great products requires deep understanding of user needs
-    and technical excellence in equal measure."
+  <Blockquote>
+    "Building great products requires deep understanding of user needs."
   </Blockquote>
-  <Small>— Product Engineering Team</Small>
+  <Caption className="mt-2">— Product Team</Caption>
 </div>
-// Customer testimonial
-<Blockquote color="muted" className="bg-muted/50 p-4 rounded-lg">
-  "Neynar's APIs have transformed how we build social features.
-  The developer experience is exceptional."
+// Custom styling
+<Blockquote className="bg-muted/50 p-4 rounded-lg">
+  Customer testimonial or feedback.
 </Blockquote>
 ```

package/.llm/body-text-large.llm.md

@@ -0,0 +1,49 @@
+# BodyTextLarge
+
+**Type**: component
+
+BodyTextLarge - Emphasized body text component Larger body text for lead paragraphs and emphasized content. Uses text-lg (18px) with relaxed line height. Defaults to p element.
+
+## JSX Usage
+
+```jsx
+import { BodyTextLarge } from '@neynar/ui';
+
+<BodyTextLarge
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</BodyTextLarge>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Lead paragraph
+<BodyTextLarge>
+  This is a lead paragraph that introduces the main content.
+</BodyTextLarge>
+// Emphasized content
+<BodyTextLarge className="font-medium text-accent">
+  Important announcement text.
+</BodyTextLarge>
+```
+/

package/.llm/body-text-small.llm.md

@@ -0,0 +1,49 @@
+# BodyTextSmall
+
+**Type**: component
+
+BodyTextSmall - De-emphasized body text component Smaller body text for less prominent content. Uses text-sm (14px) with normal line height. Defaults to p element.
+
+## JSX Usage
+
+```jsx
+import { BodyTextSmall } from '@neynar/ui';
+
+<BodyTextSmall
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</BodyTextSmall>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Small body text
+<BodyTextSmall>
+  This is smaller, less prominent body text.
+</BodyTextSmall>
+// Helper text
+<BodyTextSmall className="text-muted-foreground">
+  Additional context or helper information.
+</BodyTextSmall>
+```
+/

package/.llm/body-text.llm.md

@@ -0,0 +1,52 @@
+# BodyText
+
+**Type**: component
+
+BodyText - Primary paragraph text component Standard paragraph element for readable body text. Uses text-base (16px) with relaxed line height for optimal readability. Defaults to p element.
+
+## JSX Usage
+
+```jsx
+import { BodyText } from '@neynar/ui';
+
+<BodyText
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</BodyText>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Default usage
+<BodyText>
+  This is standard body text that provides information to the user.
+</BodyText>
+// With custom styling
+<BodyText className="text-muted-foreground">
+  Secondary information with reduced visual prominence.
+</BodyText>
+// As different element
+<BodyText as="div">
+  Body text in a div container.
+</BodyText>
+```

package/.llm/caption.llm.md

@@ -0,0 +1,48 @@
+# Caption
+
+**Type**: component
+
+Caption - Small supplementary text component Small text for metadata, timestamps, and supplementary information. Uses text-sm (14px) with muted color. Defaults to span element for inline usage.
+
+## JSX Usage
+
+```jsx
+import { Caption } from '@neynar/ui';
+
+<Caption
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</Caption>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Timestamp
+<Caption>Last updated 2 minutes ago</Caption>
+// Image caption
+<Caption>Figure 1: System architecture diagram</Caption>
+// Metadata
+<Caption className="block mt-2">
+  Created by John Doe on Jan 15, 2025
+</Caption>
+```

package/.llm/code.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-Code - Inline code component for technical content Semantic code element for inline code snippets, variable names, and technical references. Uses monospace font and "code" variant for clear distinction from regular text.
+Code - Inline code component Monospace text for inline code snippets and technical references. Uses text-sm with monospace font and subtle background. Defaults to code element.
 
 ## JSX Usage
 
@@ -10,17 +10,7 @@ Code - Inline code component for technical content Semantic code element for inl
 import { Code } from '@neynar/ui';
 
 <Code
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
+  as={value}
   className="value"
 >
   {/* Your content here */}
@@ -29,75 +19,27 @@ import { Code } from '@neynar/ui';
 
 ## Component Props
 
-### color
-- **Type**: `TypographyColor`
+### as
+- **Type**: `React.ElementType`
 - **Required**: No
-- **Description**: No description available
-
-### align
-- **Type**: `"left" | "center" | "right" | "justify"`
-- **Required**: No
-- **Description**: No description available
-
-### transform
-- **Type**: `"uppercase" | "lowercase" | "capitalize"`
-- **Required**: No
-- **Description**: No description available
-
-### weight
-- **Type**: `"normal" | "medium" | "semibold" | "bold"`
-- **Required**: No
-- **Description**: No description available
-
-### htmlFor
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### italic
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### underline
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### strikethrough
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### truncate
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### srOnly
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
+- **Description**: HTML element to render
 
 ### className
 - **Type**: `string`
 - **Required**: No
-- **Description**: No description available
+- **Description**: Additional Tailwind classes
 
 ### children
 - **Type**: `React.ReactNode`
 - **Required**: No
-- **Description**: No description available
+- **Description**: Content to render
 
 ## Examples
 
 ```tsx
-// Inline code snippet
+// Inline code
 <Code>const message = "Hello, world!";</Code>
+// Variable reference
+<p>Set the <Code>API_KEY</Code> environment variable.</p>
 // Terminal command
-<Code color="muted">npm install
+<Code className="bg-accent">npm install

package/.llm/overline.llm.md

@@ -0,0 +1,51 @@
+# Overline
+
+**Type**: component
+
+Overline - Small uppercase label component Small uppercase text for category tags and eyebrow labels. Uses text-xs (12px) with uppercase transformation and wide tracking. Defaults to span element.
+
+## JSX Usage
+
+```jsx
+import { Overline } from '@neynar/ui';
+
+<Overline
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</Overline>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Category label
+<Overline>Featured</Overline>
+// Section eyebrow
+<Overline className="text-accent-foreground">
+  New Feature
+</Overline>
+// Tag
+<Overline className="bg-accent px-2 py-1 rounded">
+  Beta
+</Overline>
+```
+/

package/.llm/page-title.llm.md

@@ -0,0 +1,52 @@
+# PageTitle
+
+**Type**: component
+
+PageTitle - Primary page heading component The main heading for a page, typically used once per page. Uses text-3xl (30px) which is appropriate for web application page titles. Defaults to h1 element.
+
+## JSX Usage
+
+```jsx
+import { PageTitle } from '@neynar/ui';
+
+<PageTitle
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</PageTitle>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes (e.g., "text-4xl text-accent")
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Default usage
+<PageTitle>User Dashboard</PageTitle>
+// With custom styling
+<PageTitle className="text-4xl text-accent">
+  Custom Styled Title
+</PageTitle>
+// As different element
+<PageTitle as="h2">Section Title as H2</PageTitle>
+// Responsive sizing
+<PageTitle className="text-2xl md:text-3xl lg:text-4xl">
+  Responsive Title
+</PageTitle>
+```