@neynar/ui 0.2.1 → 0.3.0

package/llm-docs/h5.llm.md

@@ -1,110 +0,0 @@
-# H5
-
-**Type**: component
-
-H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses "bodyEmphasized" 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**: `| "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
-
-### 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>
-```
-/

package/llm-docs/h6.llm.md

@@ -1,110 +0,0 @@
-# H6
-
-**Type**: component
-
-H6 - Smallest heading component for minimal emphasis The smallest semantic heading level. Uses "details" variant with h6 element for minimal but semantic emphasis.
-
-## JSX Usage
-
-```jsx
-import { H6 } from '@neynar/ui';
-
-<H6
-  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 */}
-</H6>
-```
-
-## Component Props
-
-### 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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Smallest heading
-<H6>Notes and Disclaimers</H6>
-// In deeply nested content
-<H6 color="muted">Technical Details</H6>
-```
-/

package/llm-docs/hover-card-content.llm.md

@@ -1,167 +0,0 @@
-# HoverCardContent
-
-**Type**: component
-
-HoverCardContent - Floating content container with intelligent positioning and animations The content area that appears when the trigger is hovered. Features built-in animations, intelligent positioning to avoid viewport boundaries, and customizable alignment options. Automatically portaled to prevent z-index and overflow issues, with smooth fade and scale transitions that respect user motion preferences. The content supports rich layouts including text, images, buttons, and complex components. Positioning is automatically calculated based on available space, with collision detection to ensure the content remains visible within the viewport.
-
-## JSX Usage
-
-```jsx
-import { HoverCardContent } from '@neynar/ui';
-
-<HoverCardContent
-  side={value}
-  sideOffset={0}
-  align={value}
-  alignOffset={0}
-  avoidCollisions={true}
-  collisionBoundary={value}
-  collisionPadding={value}
-  sticky={value}
-  hideWhenDetached={true}
-  forceMount={value}
-  asChild={true}
-  className="value"
->
-  {/* Your content here */}
-</HoverCardContent>
-```
-
-## Component Props
-
-### side
-- **Type**: `"top" | "right" | "bottom" | "left"`
-- **Required**: No
-- **Description**: No description available
-
-### sideOffset
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### align
-- **Type**: `"start" | "center" | "end"`
-- **Required**: No
-- **Description**: No description available
-
-### alignOffset
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### avoidCollisions
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### collisionBoundary
-- **Type**: `Element | null | Array<Element | null>`
-- **Required**: No
-- **Description**: No description available
-
-### collisionPadding
-- **Type**: `| number
-    | Partial<Record<"top" | "right" | "bottom" | "left", number>>`
-- **Required**: No
-- **Description**: No description available
-
-### sticky
-- **Type**: `"partial" | "always"`
-- **Required**: No
-- **Description**: No description available
-
-### hideWhenDetached
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### forceMount
-- **Type**: `true`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **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
-// Simple text content
-<HoverCardContent>
-  <p>This is a simple hover card with text content.</p>
-</HoverCardContent>
-```
-### Example 2
-```tsx
-// Positioned above the trigger with custom alignment
-<HoverCardContent side="top" align="start" sideOffset={8}>
-  <div className="text-sm">
-    Content appears above the trigger, aligned to the start edge
-  </div>
-</HoverCardContent>
-```
-### Example 3
-```tsx
-// Rich content with custom width and complex layout
-<HoverCardContent className="w-80">
-  <div className="space-y-3">
-    <div className="flex items-center gap-3">
-      <Avatar className="h-12 w-12">
-        <AvatarImage src="/avatar.jpg" />
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>
-      <div>
-        <h4 className="font-semibold">John Doe</h4>
-        <p className="text-sm text-muted-foreground">Software Engineer</p>
-      </div>
-    </div>
-    <Separator />
-    <div className="grid grid-cols-2 gap-4 text-sm">
-      <div>
-        <p className="font-medium">Repositories</p>
-        <p className="text-muted-foreground">42</p>
-      </div>
-      <div>
-        <p className="font-medium">Followers</p>
-        <p className="text-muted-foreground">1.2k</p>
-      </div>
-    </div>
-  </div>
-</HoverCardContent>
-```
-### Example 4
-```tsx
-// Interactive content with buttons
-<HoverCardContent>
-  <div className="space-y-3">
-    <h4 className="font-semibold">Quick Actions</h4>
-    <div className="flex flex-col gap-2">
-      <Button size="sm" variant="ghost" className="justify-start">
-        <EditIcon className="mr-2 h-4 w-4" />
-        Edit Details
-      </Button>
-      <Button size="sm" variant="ghost" className="justify-start">
-        <ShareIcon className="mr-2 h-4 w-4" />
-        Share Profile
-      </Button>
-      <Button size="sm" variant="ghost" className="justify-start">
-        <SettingsIcon className="mr-2 h-4 w-4" />
-        Settings
-      </Button>
-    </div>
-  </div>
-</HoverCardContent>
-```

package/llm-docs/hover-card-trigger.llm.md

@@ -1,65 +0,0 @@
-# HoverCardTrigger
-
-**Type**: component
-
-HoverCardTrigger - Interactive element that activates the hover card on mouse hover The trigger component that users hover over to reveal the hover card content. Can wrap any element or render as its child using the asChild prop. Automatically manages hover detection and integrates with the parent HoverCard's timing configuration. When using asChild, the trigger merges its props with the immediate child element, allowing for seamless integration with buttons, links, or any other interactive elements.
-
-## JSX Usage
-
-```jsx
-import { HoverCardTrigger } from '@neynar/ui';
-
-<HoverCardTrigger
-  asChild={true}
-  className="value"
->
-  {/* Your content here */}
-</HoverCardTrigger>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic trigger with text
-<HoverCardTrigger>
-  <span className="text-blue-600 cursor-pointer">Hover for details</span>
-</HoverCardTrigger>
-```
-### Example 2
-```tsx
-// Using asChild with a button
-<HoverCardTrigger asChild>
-  <Button variant="outline">User Profile</Button>
-</HoverCardTrigger>
-```
-### Example 3
-```tsx
-// With a link element
-<HoverCardTrigger asChild>
-  <a href="/profile/john" className="font-medium hover:underline">
-### Example 4
-```tsx
-// Complex trigger with icon
-<HoverCardTrigger className="inline-flex items-center gap-2">
-  <UserIcon className="h-4 w-4" />
-  <span>View Profile</span>
-</HoverCardTrigger>
-```

package/llm-docs/hover-card.llm.md

@@ -1,121 +0,0 @@
-# HoverCard
-
-**Type**: component
-
-HoverCard - Preview content that appears on hover for rich contextual information A floating card component that reveals rich content when users hover over a trigger element. Designed specifically for sighted users to preview content available behind links without requiring navigation. Built on Radix UI primitives with smooth animations and intelligent positioning to avoid viewport boundaries. Perfect for user profiles, repository information, link previews, tooltips with complex content, and any contextual details that enhance the user experience without interrupting their current workflow.
-
-## JSX Usage
-
-```jsx
-import { HoverCard } from '@neynar/ui';
-
-<HoverCard
-  defaultOpen={true}
-  open={true}
-  onValueChange={handleValueChange}
-  openDelay={0}
-  closeDelay={0}
->
-  {/* Your content here */}
-</HoverCard>
-```
-
-## Component Props
-
-### defaultOpen
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### open
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onValueChange
-- **Type**: `(open: boolean) => void`
-- **Required**: No
-- **Description**: No description available
-
-### openDelay
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### closeDelay
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic user profile hover card
-<HoverCard>
-  <HoverCardTrigger asChild>
-    <Button variant="link">
-### Example 2
-```tsx
-// With custom positioning and delays
-<HoverCard openDelay={500} closeDelay={200}>
-  <HoverCardTrigger asChild>
-    <Button>Hover me</Button>
-  </HoverCardTrigger>
-  <HoverCardContent side="top" align="start">
-    Content appears above with custom alignment
-  </HoverCardContent>
-</HoverCard>
-```
-### Example 3
-```tsx
-// Interactive hover card with buttons
-<HoverCard>
-  <HoverCardTrigger asChild>
-    <Button variant="ghost">Quick Actions</Button>
-  </HoverCardTrigger>
-  <HoverCardContent>
-    <div className="space-y-2">
-      <h4 className="font-semibold">Available Actions</h4>
-      <div className="flex flex-col gap-1">
-        <Button size="sm" variant="ghost">Edit Profile</Button>
-        <Button size="sm" variant="ghost">View Analytics</Button>
-        <Button size="sm" variant="ghost">Manage Settings</Button>
-      </div>
-    </div>
-  </HoverCardContent>
-</HoverCard>
-```
-### Example 4
-```tsx
-// Link preview with rich content
-<HoverCard openDelay={300}>
-  <HoverCardTrigger asChild>
-    <a href="/article/123" className="text-blue-600 hover:underline">
-      Advanced React Patterns
-    </a>
-  </HoverCardTrigger>
-  <HoverCardContent className="w-96">
-    <div className="space-y-3">
-      <img src="/article-thumbnail.jpg" className="rounded w-full h-32 object-cover" />
-      <div>
-        <h4 className="font-semibold">Advanced React Patterns</h4>
-        <p className="text-sm text-muted-foreground">
-          Learn modern React patterns including render props, compound components,
-          and advanced hook compositions for scalable applications.
-        </p>
-        <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
-          <span>12 min read</span>
-          <span>•</span>
-          <span>Published Mar 15, 2024</span>
-        </div>
-      </div>
-    </div>
-  </HoverCardContent>
-</HoverCard>
-```