@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/empty-state.llm.md

@@ -1,174 +0,0 @@
-# EmptyState
-
-**Type**: component
-
-EmptyState - Displays empty or no-data states with consistent UX patterns A comprehensive component for handling empty states across applications. Provides a standardized way to communicate when content is unavailable, data is missing, or initial setup is required. Built with accessibility-first principles and follows established empty state design patterns to guide users toward resolution. **Common Use Cases:** - Search results with no matches - Empty lists, tables, or dashboards - Inbox or notification centers with no items - Data visualization with no data - Onboarding states for new users - Error recovery scenarios **Component Structure:** The component follows a top-down visual hierarchy: Icon → Title → Description → Action. All elements except the title are optional, allowing for flexible implementation across different contexts while maintaining visual consistency.
-
-## JSX Usage
-
-```jsx
-import { EmptyState } from '@neynar/ui';
-
-<EmptyState
-  title="value"
-  description="value"
-  icon={value}
-  action={() => {}}
-  className="value"
->
-  {/* Your content here */}
-</EmptyState>
-```
-
-## Component Props
-
-### title
-- **Type**: `string`
-- **Required**: Yes
-- **Description**: No description available
-
-### description
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### icon
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### action
-- **Type**: `{
-    /**
-     * Text label for the action button
-     *
-     * Should be specific and action-oriented rather than generic.
-     * @example "Create your first post", "Import data", "Try again"
-     */
-    label: string;
-
-    /**
-     * Click handler function executed when the action button is pressed
-     *
-     * Called when the user activates the button via click or keyboard interaction.
-     * Should handle the primary action to resolve the empty state.
-     */
-    onClick: () => void;
-  }`
-- **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
-// Minimal empty state with just title
-<EmptyState title="No notifications" />
-```
-### Example 2
-```tsx
-// Search results empty state
-import { Search } from 'lucide-react';
-<EmptyState
-  icon={<Search className="w-12 h-12" />}
-  title="No results found"
-  description="Try adjusting your search terms or filters"
-  action={{
-    label: "Clear filters",
-    onClick: () => resetFilters()
-  }}
-/>
-```
-### Example 3
-```tsx
-// Inbox empty state with call-to-action
-import { Inbox, Plus } from 'lucide-react';
-<EmptyState
-  icon={<Inbox className="w-16 h-16" />}
-  title="Your inbox is empty"
-  description="New messages and notifications will appear here"
-  action={{
-    label: "Compose message",
-    onClick: () => openComposer()
-  }}
-/>
-```
-### Example 4
-```tsx
-// Data dashboard empty state with custom styling
-import { BarChart3, TrendingUp } from 'lucide-react';
-<EmptyState
-  className="min-h-[400px] bg-gradient-to-br from-muted/20 to-muted/10 rounded-lg border border-dashed border-muted-foreground/20"
-  icon={<BarChart3 className="w-14 h-14 opacity-60" />}
-  title="No analytics data"
-  description="Connect your data source or import historical data to view insights"
-  action={{
-    label: "Connect data source",
-    onClick: () => showDataSourceModal()
-  }}
-/>
-```
-### Example 5
-```tsx
-// File manager empty state
-import { FolderOpen, Upload } from 'lucide-react';
-<EmptyState
-  icon={<FolderOpen className="w-12 h-12" />}
-  title="This folder is empty"
-  description="Drag and drop files here or use the upload button"
-  action={{
-    label: "Upload files",
-    onClick: () => triggerFileUpload()
-  }}
-/>
-```
-### Example 6
-```tsx
-// Error recovery empty state
-import { AlertTriangle, RefreshCw } from 'lucide-react';
-<EmptyState
-  icon={<AlertTriangle className="w-12 h-12 text-destructive" />}
-  title="Failed to load data"
-  description="There was a problem loading your content. Please try again."
-  action={{
-    label: "Retry",
-    onClick: () => refetchData()
-  }}
-/>
-```
-### Example 7
-```tsx
-// Team members empty state with multiple actions
-import { Users, UserPlus, Mail } from 'lucide-react';
-function TeamEmptyState() {
-  return (
-    <div className="space-y-4">
-      <EmptyState
-        icon={<Users className="w-16 h-16" />}
-        title="No team members yet"
-        description="Invite colleagues to collaborate on projects"
-        action={{
-          label: "Invite members",
-          onClick: () => openInviteModal()
-        }}
-      />
-      <div className="flex justify-center gap-2">
-        <Button variant="outline" size="sm" onClick={() => importFromCsv()}>
-          <Mail className="w-4 h-4 mr-2" />
-          Import from CSV
-        </Button>
-      </div>
-    </div>
-  );
-}
-```

package/llm-docs/h1.llm.md

@@ -1,113 +0,0 @@
-# H1
-
-**Type**: component
-
-H1 - Primary page heading component The main heading for a page or major section. Uses the "heading" 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**: `| "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
-// 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-docs/h2.llm.md

@@ -1,113 +0,0 @@
-# H2
-
-**Type**: component
-
-H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the "subheading" 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**: `| "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
-// 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-docs/h3.llm.md

@@ -1,111 +0,0 @@
-# H3
-
-**Type**: component
-
-H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the "subheading" 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**: `| "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
-// Subsection heading
-<H3>Installation Guide</H3>
-// In a card or content block
-<H3 color="muted" className="mb-3">
-  Optional Configuration
-</H3>
-```

package/llm-docs/h4.llm.md

@@ -1,109 +0,0 @@
-# H4
-
-**Type**: component
-
-H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses "bodyEmphasized" 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**: `| "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
-// Minor section heading
-<H4>Configuration Options</H4>
-// In detailed documentation
-<H4 color="muted">Advanced Settings</H4>
-```