@neynar/ui 0.1.2 → 0.2.0

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

@@ -0,0 +1,174 @@
+# 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

@@ -0,0 +1,113 @@
+# 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

@@ -0,0 +1,113 @@
+# 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

@@ -0,0 +1,111 @@
+# 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

@@ -0,0 +1,109 @@
+# 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>
+```