@neynar/ui 0.3.1 → 0.4.0

package/src/styles/globals.css

@@ -142,27 +142,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-
-  /* Override Tailwind's default fontSize scale to match design system */
-  --text-xs: 0.625rem; /* 10px - Microcopy */
-  --text-sm: 0.8125rem; /* 13px - Details */
-  --text-base: 0.9375rem; /* 15px - Body */
-  --text-lg: 1.0625rem; /* 17px - Paragraph Lead, Blog Body */
-  --text-xl: 1.25rem; /* 20px - Headings */
-  --text-2xl: 1.375rem; /* 22px - Paragraph Lead, Blog Body */
-  --text-3xl: 2.25rem; /* 36px - Headline */
-  --text-4xl: 2.8125rem; /* 45px - Section Title */
-  --text-5xl: 3.5rem; /* 56px - Page Title */
-  --text-6xl: 4.5rem; /* 72px - Display Title */
-  --text-7xl: 5.625rem; /* 90px - Hero Title */
-  /* --text-8xl: 6.75rem; */
-  /* --text-9xl: 8.25rem; */
-
-  /* --leading-tight: 1.1; */
-  --leading-snug: 1.1;
-  --leading-normal: 1.2;
-  --leading-relaxed: 1.4;
-  --leading-loose: 1.5;
 }
 
 @layer base {

package/.llm/a.llm.md

@@ -1,131 +0,0 @@
-# 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**: `TypographyVariant`
-- **Required**: No
-- **Description**: No description available
-
-### color
-- **Type**: `TypographyColor`
-- **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/h1.llm.md

@@ -1,108 +0,0 @@
-# H1
-
-**Type**: component
-
-H1 - Primary page heading component The main heading for a page or major section. Uses the "displayTitle" variant with h1 semantic element. Should be used once per page for proper document outline and SEO.
-
-## JSX Usage
-
-```jsx
-import { H1 } from '@neynar/ui';
-
-<H1
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</H1>
-```
-
-## Component Props
-
-### color
-- **Type**: `TypographyColor`
-- **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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Page title
-<H1>Welcome to Neynar Platform</H1>
-// With color variant
-<H1 color="muted">Draft: Article Title</H1>
-// With custom styling
-<H1 align="center" className="mb-8">
-  Centered Page Heading
-</H1>
-```

package/.llm/h2.llm.md

@@ -1,108 +0,0 @@
-# H2
-
-**Type**: component
-
-H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the "sectionTitle" variant with h2 semantic element. Essential for creating proper document hierarchy.
-
-## JSX Usage
-
-```jsx
-import { H2 } from '@neynar/ui';
-
-<H2
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</H2>
-```
-
-## Component Props
-
-### color
-- **Type**: `TypographyColor`
-- **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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Section heading
-<H2>Getting Started</H2>
-// With accent color
-<H2 color="accent">Featured Content</H2>
-// With additional styling
-<H2 weight="bold" className="border-b pb-2">
-  Section with Border
-</H2>
-```

package/.llm/h3.llm.md

@@ -1,106 +0,0 @@
-# H3
-
-**Type**: component
-
-H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the "headline" variant with h3 semantic element for consistent visual hierarchy.
-
-## JSX Usage
-
-```jsx
-import { H3 } from '@neynar/ui';
-
-<H3
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</H3>
-```
-
-## Component Props
-
-### color
-- **Type**: `TypographyColor`
-- **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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Subsection heading
-<H3>Installation Guide</H3>
-// In a card or content block
-<H3 color="muted" className="mb-3">
-  Optional Configuration
-</H3>
-```

package/.llm/h4.llm.md

@@ -1,104 +0,0 @@
-# H4
-
-**Type**: component
-
-H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses "subHeadline" variant with h4 semantic element for subtle but distinct hierarchy.
-
-## JSX Usage
-
-```jsx
-import { H4 } from '@neynar/ui';
-
-<H4
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</H4>
-```
-
-## Component Props
-
-### color
-- **Type**: `TypographyColor`
-- **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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Minor section heading
-<H4>Configuration Options</H4>
-// In detailed documentation
-<H4 color="muted">Advanced Settings</H4>
-```

package/.llm/h5.llm.md

@@ -1,105 +0,0 @@
-# H5
-
-**Type**: component
-
-H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses "eyebrow" variant with h5 semantic element.
-
-## JSX Usage
-
-```jsx
-import { H5 } from '@neynar/ui';
-
-<H5
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</H5>
-```
-
-## Component Props
-
-### color
-- **Type**: `TypographyColor`
-- **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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Small section heading
-<H5>Error Codes</H5>
-// In lists or detailed breakdowns
-<H5 weight="semibold">Step 1: Setup</H5>
-```
-/