@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/small.llm.md

@@ -1,115 +0,0 @@
-# Small
-
-**Type**: component
-
-Small - Fine print component for supplementary information Semantic small element for fine print, disclaimers, timestamps, and supplementary information. Uses "microcopy" variant for reduced visual prominence while maintaining readability.
-
-## JSX Usage
-
-```jsx
-import { Small } from '@neynar/ui';
-
-<Small
-  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 */}
-</Small>
-```
-
-## 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
-// Legal disclaimer
-<Small>Terms and conditions apply. See details for more information.</Small>
-// Timestamp or metadata
-<Small color="muted">Last updated 2 minutes ago</Small>
-// Copyright notice
-<Small className="text-center">
-  © 2024 Neynar. All rights reserved.
-</Small>
-// Form help text
-<Small color="muted">Password must be at least 8 characters long.</Small>
-```

package/llm-docs/span.llm.md

@@ -1,132 +0,0 @@
-# Span
-
-**Type**: component
-
-Span - Inline text component for text fragments and styling Generic inline element for styling text fragments within other content. Supports all typography variants while maintaining inline display behavior.
-
-## JSX Usage
-
-```jsx
-import { Span } from '@neynar/ui';
-
-<Span
-  variant={value}
-  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 */}
-</Span>
-```
-
-## 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
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Inline text styling
-<p>
-  Regular text with <Span color="accent" weight="semibold">highlighted</Span> content
-</p>
-// Small inline details
-<Span variant="details" color="muted">
-  Updated 5 minutes ago
-</Span>
-// Inline code reference
-<Span variant="code" className="bg-muted px-1 rounded">
-  onClick
-</Span>
-```

package/llm-docs/stack.llm.md

@@ -1,28 +0,0 @@
-# Stack
-
-**Type**: component
-
-Stack - A flexible layout component for consistent spacing between elements Stack is a fundamental layout primitive that arranges child elements in either vertical or horizontal direction with consistent spacing. Built on flexbox principles, it provides a clean, declarative API for common layout patterns without requiring custom CSS or complex flex configurations. **Core Features:** - Consistent spacing using Tailwind's design system - Flexible direction control (vertical/horizontal) - Zero-config flexbox layouts with predictable behavior - Composable with other UI components and layout utilities - Full accessibility support with semantic HTML structure - TypeScript-first with comprehensive prop validation **Common Use Cases:** - Form layouts with consistent field spacing - Button groups and action bars - Content sections with uniform gaps - Navigation lists and menu structures - Card layouts and dashboard grids - Page sections and content hierarchy - Responsive component layouts **Design System Integration:** Stack integrates seamlessly with design systems by providing consistent spacing that aligns with Tailwind's spacing scale. This ensures visual harmony across your application and reduces the need for custom spacing utilities in most common layout scenarios.
-
-## JSX Usage
-
-```jsx
-import { Stack } from '@neynar/ui';
-
-<Stack
-  spacing={value}
-  direction={value}
-/>
-```
-
-## Component Props
-
-### spacing
-- **Type**: `StackSpacing`
-- **Required**: No
-- **Description**: No description available
-
-### direction
-- **Type**: `StackDirection`
-- **Required**: No
-- **Description**: No description available

package/llm-docs/strong.llm.md

@@ -1,115 +0,0 @@
-# Strong
-
-**Type**: component
-
-Strong - Emphasized text component for important content Semantic strong element for text that needs strong emphasis or importance. Uses "bodyEmphasized" variant with strong semantic meaning.
-
-## JSX Usage
-
-```jsx
-import { Strong } from '@neynar/ui';
-
-<Strong
-  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 */}
-</Strong>
-```
-
-## 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
-// Important information
-<Strong>Important: This action cannot be undone.</Strong>
-// Critical warning
-<Strong color="destructive">Error: Invalid credentials provided.</Strong>
-// In body text
-<p>
-  Make sure to <Strong>save your changes</Strong> before leaving the page.
-</p>
-// Success message
-<Strong color="success">Account created successfully!</Strong>
-```

package/llm-docs/switch.llm.md

@@ -1,76 +0,0 @@
-# Switch
-
-**Type**: component
-
-Switch - Binary toggle control for on/off states A versatile toggle switch component built on Radix UI Switch primitive that provides an accessible way to toggle between on/off states. Commonly used for settings, preferences, and feature toggles that have immediate effects. Built with Radix UI Switch primitive and styled with Tailwind CSS to ensure consistent visual appearance across light and dark themes. The component automatically handles state management, accessibility, keyboard navigation, and form integration.
-
-## JSX Usage
-
-```jsx
-import { Switch } from '@neynar/ui';
-
-<Switch
-  checked={true}
-  defaultChecked={true}
-  onCheckedChange={handleCheckedChange}
-  disabled={true}
-  required={true}
-  name="value"
-  value="value"
-  id="value"
-  asChild={true}
-  className="value"
-/>
-```
-
-## Component Props
-
-### checked
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### defaultChecked
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onCheckedChange
-- **Type**: `(checked: boolean) => void`
-- **Required**: No
-- **Description**: No description available
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### required
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### name
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available

package/llm-docs/table-body.llm.md

@@ -1,36 +0,0 @@
-# TableBody
-
-**Type**: component
-
-TableBody - Container for table data rows Main content area of the table containing all data rows. Applies border styling where the last row has no bottom border. Contains TableRow components with TableCell elements.
-
-## JSX Usage
-
-```jsx
-import { TableBody } from '@neynar/ui';
-
-<TableBody
-  className="value"
->
-  {/* Your content here */}
-</TableBody>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-<TableBody>
-  <TableRow>
-    <TableCell>

package/llm-docs/table-caption.llm.md

@@ -1,48 +0,0 @@
-# TableCaption
-
-**Type**: component
-
-TableCaption - Table caption for describing table content and context Provides a description, title, or additional context for the table. Displayed with muted styling and proper spacing. Essential for accessibility as screen readers announce the caption to provide table context.
-
-## JSX Usage
-
-```jsx
-import { TableCaption } from '@neynar/ui';
-
-<TableCaption
-  className="value"
->
-  {/* Your content here */}
-</TableCaption>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-<Table>
-  <TableCaption>Recent casts from your network</TableCaption>
-  <TableHeader>...</TableHeader>
-  <TableBody>...</TableBody>
-</Table>
-// Caption with additional context
-<Table>
-  <TableCaption>
-    Channel analytics for the last 30 days.
-    Data updated every hour.
-  </TableCaption>
-  <TableHeader>...</TableHeader>
-  <TableBody>...</TableBody>
-</Table>
-```

package/llm-docs/table-cell.llm.md

@@ -1,53 +0,0 @@
-# TableCell
-
-**Type**: component
-
-TableCell - Table data cell component for content display Used for data cells within table rows with consistent padding and alignment. Supports custom styling, truncation, and special handling for interactive elements like checkboxes and buttons.
-
-## JSX Usage
-
-```jsx
-import { TableCell } from '@neynar/ui';
-
-<TableCell
-  className="value"
-  colSpan={0}
-  rowSpan={0}
-  headers="value"
->
-  {/* Your content here */}
-</TableCell>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### colSpan
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### rowSpan
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### headers
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Basic data cells
-<TableCell>

package/llm-docs/table-footer.llm.md

@@ -1,41 +0,0 @@
-# TableFooter
-
-**Type**: component
-
-TableFooter - Container for table footer rows Used for summary rows, totals, or additional table information. Styled with a muted background and top border to distinguish from data rows. Typically contains aggregated data or table-wide information.
-
-## JSX Usage
-
-```jsx
-import { TableFooter } from '@neynar/ui';
-
-<TableFooter
-  className="value"
->
-  {/* Your content here */}
-</TableFooter>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-<TableFooter>
-  <TableRow>
-    <TableCell>Total Users</TableCell>
-    <TableCell>15,767</TableCell>
-    <TableCell className="text-right">+9.25%</TableCell>
-  </TableRow>
-</TableFooter>
-```