@neynar/ui 0.3.0 → 0.3.1

package/.llm/small.llm.md

@@ -0,0 +1,110 @@
+# 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**: `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
+// 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/span.llm.md

@@ -0,0 +1,118 @@
+# 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**: `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
+
+### 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/spinner.llm.md

@@ -0,0 +1,182 @@
+# Spinner
+
+**Type**: component
+
+Spinner - Loading indicator with animated rotation A circular loading spinner built on the Lucide React Loader2 icon with smooth rotation animation. Provides visual feedback to users during asynchronous operations such as data fetching, form submissions, or content loading. The spinner is highly customizable through CSS classes and supports all standard SVG props for size, color, and styling.
+
+## JSX Usage
+
+```jsx
+import { Spinner } from '@neynar/ui';
+
+<Spinner
+  className="value"
+  color="value"
+  size={value}
+  strokeWidth={value}
+  "aria-label"="value"
+  role="value"
+  "aria-hidden"={value}
+  "aria-describedby"="value"
+  "aria-live"={value}
+  "aria-busy"={true}
+  style={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### color
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `number | string`
+- **Required**: No
+- **Description**: No description available
+
+### strokeWidth
+- **Type**: `number | string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### role
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-hidden"
+- **Type**: `boolean | "false" | "true"`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-live"
+- **Type**: `"off" | "polite" | "assertive"`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-busy"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic loading spinner with default size (16px)
+<Spinner />
+// Custom size using Tailwind size utilities
+<Spinner className="size-6" />
+<Spinner className="size-8" />
+<Spinner className="size-12" />
+// Custom color using text color classes
+<Spinner className="text-primary" />
+<Spinner className="text-destructive" />
+<Spinner className="text-muted-foreground" />
+```
+### Example 2
+```tsx
+// In loading buttons
+import { Button } from "./button";
+<Button disabled>
+  <Spinner className="mr-2 size-4" />
+  Loading...
+</Button>
+<Button variant="outline" disabled>
+  <Spinner className="mr-2 size-4" />
+  Processing
+</Button>
+// Icon-only loading button
+<Button size="icon" disabled aria-label="Loading">
+  <Spinner className="size-4" />
+</Button>
+```
+### Example 3
+```tsx
+// Full-page loading state
+<div className="flex min-h-screen items-center justify-center">
+  <div className="text-center space-y-4">
+    <Spinner className="size-12 mx-auto" />
+    <p className="text-muted-foreground">Loading your dashboard...</p>
+  </div>
+</div>
+// Card loading state
+<div className="border rounded-lg p-8 flex flex-col items-center gap-3">
+  <Spinner className="size-8" />
+  <p className="text-sm text-muted-foreground">Fetching data...</p>
+</div>
+// Inline loading with text
+<p className="flex items-center gap-2 text-sm">
+  <Spinner className="size-4" />
+  Syncing your data...
+</p>
+```
+### Example 4
+```tsx
+// Custom animation speed
+// Slow rotation
+<Spinner className="animate-[spin_2s_linear_infinite]" />
+// Fast rotation
+<Spinner className="animate-[spin_0.5s_linear_infinite]" />
+// Custom size and color combination
+<Spinner
+  className="size-6 text-blue-500"
+  strokeWidth={3}
+/>
+// With background overlay
+<div className="relative">
+  <div className="absolute inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center rounded-lg">
+    <Spinner className="size-8" />
+  </div>
+  <div>Your content here</div>
+</div>
+```
+### Example 5
+```tsx
+// Conditional rendering with loading state
+function DataDisplay() {
+  const [isLoading, setIsLoading] = React.useState(true);
+  return (
+    <div className="space-y-4">
+      {isLoading ? (
+        <div className="flex justify-center p-8">
+          <Spinner className="size-6" />
+        </div>
+      ) : (
+        <div>Loaded content here</div>
+      )}
+    </div>
+  );
+}
+// With aria-live region for screen reader announcements
+<div aria-live="polite" aria-atomic="true">
+  {isLoading && (
+    <div className="flex items-center gap-2">
+      <Spinner className="size-4" />
+      <span>Loading content, please wait...</span>
+    </div>
+  )}
+</div>
+```

package/.llm/stack.llm.md

@@ -0,0 +1,28 @@
+# 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/strong.llm.md

@@ -0,0 +1,110 @@
+# 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**: `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
+// 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/switch.llm.md

@@ -0,0 +1,76 @@
+# 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/table-body.llm.md

@@ -0,0 +1,36 @@
+# 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/table-caption.llm.md

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