@neynar/ui 0.1.2 → 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/llm-docs/a.llm.md

@@ -0,0 +1,145 @@
+# A
+
+**Type**: component
+
+A - Anchor component for interactive text links Semantic anchor element for links with built-in hover states and accessibility features. Uses "body" variant with underline and smooth color transitions.
+
+## JSX Usage
+
+```jsx
+import { A } from '@neynar/ui';
+
+<A
+  variant={value}
+  color={value}
+  align={value}
+  transform={value}
+  weight={value}
+  htmlFor="value"
+  asChild={true}
+  italic={true}
+  underline={true}
+  strikethrough={true}
+  truncate={true}
+  srOnly={true}
+  href="value"
+  className="value"
+>
+  {/* Your content here */}
+</A>
+```
+
+## Component Props
+
+### variant
+- **Type**: `| "heading"
+    | "subheading"
+    | "body"
+    | "bodyEmphasized"
+    | "details"
+    | "field"
+    | "code"
+    | "microcopy"
+    | "tableCell"
+    | "tableHeader"`
+- **Required**: No
+- **Description**: No description available
+
+### color
+- **Type**: `| "default"
+    | "muted"
+    | "accent"
+    | "destructive"
+    | "success"
+    | "warning"`
+- **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
+
+### href
+- **Type**: `string`
+- **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
+
+## Examples
+
+```tsx
+// External link
+<A href="https://neynar.com" target="_blank" rel="noopener noreferrer">
+  Visit Neynar Website
+</A>
+// Internal navigation
+<A href="/dashboard" color="accent">
+  Go to Dashboard
+</A>
+// Composition with Next.js Link
+<A asChild>
+  <Link href="/about">
+    Learn More About Us
+  </Link>
+</A>
+// In paragraph text
+<P>
+  For more information, <A href="/docs">check our documentation</A> or
+  contact support.
+</P>
+```

package/llm-docs/accordion-content.llm.md

@@ -0,0 +1,67 @@
+# AccordionContent
+
+**Type**: component
+
+AccordionContent - Collapsible content area of an accordion item The expandable content section that is revealed or hidden when the associated AccordionTrigger is activated. Features smooth height-based animations using Tailwind CSS keyframes and supports any React content including complex layouts.
+
+## JSX Usage
+
+```jsx
+import { AccordionContent } from '@neynar/ui';
+
+<AccordionContent
+  className="value"
+  forceMount={value}
+>
+  {/* Your content here */}
+</AccordionContent>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple text content
+<AccordionContent>
+  <p>This content is revealed when the accordion is expanded.</p>
+  <p>It can contain any React components or HTML elements.</p>
+</AccordionContent>
+```
+### Example 2
+```tsx
+// Rich content with components
+<AccordionContent>
+  <div className="space-y-4">
+    <Alert>
+      <InfoIcon className="h-4 w-4" />
+      <AlertTitle>Important Note</AlertTitle>
+      <AlertDescription>This is highlighted information.</AlertDescription>
+    </Alert>
+    <Button variant="outline">Take Action</Button>
+  </div>
+</AccordionContent>
+```
+### Example 3
+```tsx
+// Content with custom padding
+<AccordionContent className="pt-6 pb-6">
+  Content with extra vertical padding for better spacing.
+</AccordionContent>
+```

package/llm-docs/accordion-item.llm.md

@@ -0,0 +1,61 @@
+# AccordionItem
+
+**Type**: component
+
+AccordionItem - Individual collapsible panel within an accordion A container component that wraps a single accordion section consisting of a trigger and collapsible content. Each item requires a unique value prop for identification and state management. Provides consistent spacing and border styling.
+
+## JSX Usage
+
+```jsx
+import { AccordionItem } from '@neynar/ui';
+
+<AccordionItem
+  value="value"
+  disabled={true}
+  className="value"
+>
+  {/* Your content here */}
+</AccordionItem>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **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
+
+## Examples
+
+### Example 1
+```tsx
+<AccordionItem value="settings">
+  <AccordionTrigger>Account Settings</AccordionTrigger>
+  <AccordionContent>
+    <p>Manage your account preferences and security settings.</p>
+  </AccordionContent>
+</AccordionItem>
+```
+### Example 2
+```tsx
+// With custom styling
+<AccordionItem value="custom" className="border-l-4 border-blue-500">
+  <AccordionTrigger>Custom Styled Item</AccordionTrigger>
+  <AccordionContent>Content with custom left border</AccordionContent>
+</AccordionItem>
+```

package/llm-docs/accordion-trigger.llm.md

@@ -0,0 +1,69 @@
+# AccordionTrigger
+
+**Type**: component
+
+AccordionTrigger - Clickable header that toggles accordion content visibility An interactive button element that users click or activate via keyboard to expand or collapse the associated accordion content. Features a rotating chevron icon for visual state indication and supports both text and custom content.
+
+## JSX Usage
+
+```jsx
+import { AccordionTrigger } from '@neynar/ui';
+
+<AccordionTrigger
+  className="value"
+  disabled={true}
+  asChild={true}
+>
+  {/* Your content here */}
+</AccordionTrigger>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple text trigger
+<AccordionTrigger>
+  Click to expand this section
+</AccordionTrigger>
+```
+### Example 2
+```tsx
+// With icon and custom styling
+<AccordionTrigger className="text-lg font-semibold">
+  <User className="mr-2 h-4 w-4" />
+  User Profile Settings
+</AccordionTrigger>
+```
+### Example 3
+```tsx
+// With complex content
+<AccordionTrigger>
+  <div className="flex items-center justify-between w-full">
+    <span>Section Title</span>
+    <Badge variant="secondary">5 items</Badge>
+  </div>
+</AccordionTrigger>
+```

package/llm-docs/accordion.llm.md

@@ -0,0 +1,88 @@
+# Accordion
+
+**Type**: component
+
+Accordion - Collapsible content panels for organizing information A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI Accordion primitives with optimized animations and accessibility. Supports both single and multiple expanded items simultaneously based on the type prop.
+
+## JSX Usage
+
+```jsx
+import { Accordion } from '@neynar/ui';
+
+<Accordion
+  disabled={true}
+  orientation={value}
+  dir={value}
+  className="value"
+>
+  {/* Your content here */}
+</Accordion>
+```
+
+## Component Props
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **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
+
+## Examples
+
+### Example 1
+```tsx
+// Basic single accordion (only one item can be open)
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+### Example 2
+```tsx
+// Multiple accordion (multiple items can be open)
+<Accordion type="multiple">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section 1</AccordionTrigger>
+    <AccordionContent>Content for section 1</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Section 2</AccordionTrigger>
+    <AccordionContent>Content for section 2</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+### Example 3
+```tsx
+// FAQ-style accordion with default open state
+<Accordion type="single" collapsible defaultValue="faq-1">
+  <AccordionItem value="faq-1">
+    <AccordionTrigger>How do I get started?</AccordionTrigger>
+    <AccordionContent>
+      Follow our quick start guide to set up your first project.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```