@neynar/ui 0.3.0 → 0.3.1

package/.llm/theme.llm.md

@@ -0,0 +1,14 @@
+# Theme
+
+**Type**: component
+
+Theme - Prevents flash of unstyled content (FOUC) during theme initialization A critical component that prevents the flash of incorrect theme styling by applying the user's preferred theme before the page renders. This component should be placed once at the root of your application, ideally in the document head or at the very beginning of the body. The component works by injecting a small inline script that: 1. Reads the stored theme preference from cookies 2. Detects system theme preference if set to "system" 3. Applies the appropriate theme class and color scheme immediately 4. Executes synchronously before first paint to prevent FOUC Built as a zero-configuration component that requires no props or setup. Simply drop it into your application's root layout and it will handle theme initialization automatically.
+
+## JSX Usage
+
+```jsx
+import { Theme } from '@neynar/ui';
+
+<Theme
+/>
+```

package/.llm/toast.llm.md

@@ -0,0 +1,32 @@
+# toast
+
+**Type**: function
+
+toast function
+
+## API Surface
+
+```typescript
+import { toast } from '@neynar/ui';
+
+export const toast: ((message: titleT, data?: ExternalToast) => string | number) & {
+    success: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+    info: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+    warning: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+    error: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+    custom: (jsx: (id: number | string) => React.ReactElement, data?: ExternalToast) => string | number;
+    message: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+    promise: <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => (string & {
+        unwrap: () => Promise<ToastData>;
+    }) | (number & {
+        unwrap: () => Promise<ToastData>;
+    }) | {
+        unwrap: () => Promise<ToastData>;
+    };
+    dismiss: (id?: number | string) => string | number;
+    loading: (message: titleT | React.ReactNode, data?: ExternalToast) => string | number;
+} & {
+    getHistory: () => (ToastT | ToastToDismiss)[];
+    getToasts: () => (ToastT | ToastToDismiss)[];
+}
+```

package/.llm/toaster.llm.md

@@ -0,0 +1,193 @@
+# Toaster
+
+**Type**: component
+
+Toast notification container component built on Sonner A feature-rich toast component that provides beautiful, accessible notifications with seamless theme integration and extensive customization options. Built on the popular Sonner library with enhanced theming that automatically synchronizes with the application's theme system using the useTheme hook. This component serves as the central toast container and should be placed once in your application root. It manages the display, positioning, and lifecycle of all toast notifications throughout your application. **Key Features:** - **Automatic theme synchronization** - Integrates with useTheme for consistent styling - **Flexible positioning** - Six different positions with smart stacking - **Rich accessibility** - Full keyboard navigation and screen reader support - **Promise integration** - Built-in loading/success/error states for async operations - **Gesture support** - Touch-friendly swipe-to-dismiss with configurable directions - **Performance optimized** - Efficient rendering with configurable limits - **Customizable styling** - Comprehensive theming and custom icon support
+
+## JSX Usage
+
+```jsx
+import { Toaster } from '@neynar/ui';
+
+<Toaster
+  invert={true}
+  theme={value}
+  position={value}
+  hotkey={[]}
+  richColors={true}
+  expand={true}
+  duration={0}
+  gap={0}
+  visibleToasts={0}
+  closeButton={true}
+  toastOptions={value}
+  className="value"
+  style={value}
+  offset={value}
+  mobileOffset={value}
+  dir={value}
+  swipeDirections={[]}
+  icons={value}
+  containerAriaLabel="value"
+/>
+```
+
+## Component Props
+
+### invert
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### theme
+- **Type**: `"light" | "dark" | "system"`
+- **Required**: No
+- **Description**: No description available
+
+### position
+- **Type**: `| "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+    | "top-center"
+    | "bottom-center"`
+- **Required**: No
+- **Description**: No description available
+
+### hotkey
+- **Type**: `string[]`
+- **Required**: No
+- **Description**: No description available
+
+### richColors
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### expand
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### duration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### gap
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### visibleToasts
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### closeButton
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### toastOptions
+- **Type**: `{
+    /** Additional CSS classes for toast elements */
+    className?: string;
+    /** Show close button for individual toasts @default false */
+    closeButton?: boolean;
+    /** CSS classes for description text */
+    descriptionClassName?: string;
+    /** Inline styles for toast container */
+    style?: React.CSSProperties;
+    /** Styles for cancel button */
+    cancelButtonStyle?: React.CSSProperties;
+    /** Styles for action button */
+    actionButtonStyle?: React.CSSProperties;
+    /** Duration before auto-dismiss in milliseconds */
+    duration?: number;
+    /** Remove default styling to allow full custom styling @default false */
+    unstyled?: boolean;
+    /** CSS class overrides for specific toast elements */
+    classNames?: {
+      toast?: string;
+      title?: string;
+      description?: string;
+      loader?: string;
+      closeButton?: string;
+      cancelButton?: string;
+      actionButton?: string;
+      success?: string;
+      error?: string;
+      info?: string;
+      warning?: string;
+      loading?: string;
+      default?: string;
+      content?: string;
+      icon?: string;
+    };
+    /** Accessible label for close button */
+    closeButtonAriaLabel?: string;
+  }`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### offset
+- **Type**: `| string
+    | number
+    | {
+        top?: string | number;
+        right?: string | number;
+        bottom?: string | number;
+        left?: string | number;
+      }`
+- **Required**: No
+- **Description**: No description available
+
+### mobileOffset
+- **Type**: `| string
+    | number
+    | {
+        top?: string | number;
+        right?: string | number;
+        bottom?: string | number;
+        left?: string | number;
+      }`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"rtl" | "ltr" | "auto"`
+- **Required**: No
+- **Description**: No description available
+
+### swipeDirections
+- **Type**: `("top" | "right" | "bottom" | "left")[]`
+- **Required**: No
+- **Description**: No description available
+
+### icons
+- **Type**: `{
+    success?: React.ReactNode;
+    info?: React.ReactNode;
+    warning?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+    close?: React.ReactNode;
+  }`
+- **Required**: No
+- **Description**: No description available
+
+### containerAriaLabel
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available

package/.llm/toggle-group-item.llm.md

@@ -0,0 +1,59 @@
+# ToggleGroupItem
+
+**Type**: component
+
+Toggle Group Item - Individual selectable item within a ToggleGroup Represents a single toggleable option within a ToggleGroup component. Each item automatically inherits variant and size styling from the parent ToggleGroup context through React Context, but these can be overridden for specific styling needs. Supports flexible content including icons, text, or mixed combinations. The component participates in the parent ToggleGroup's keyboard navigation and selection behavior, with proper ARIA attributes for accessibility. Focus management and selection state are handled automatically by the Radix UI primitive.
+
+## JSX Usage
+
+```jsx
+import { ToggleGroupItem } from '@neynar/ui';
+
+<ToggleGroupItem
+  className="value"
+  value="value"
+  disabled={true}
+  variant={value}
+  size={value}
+  asChild={true}
+>
+  {/* Your content here */}
+</ToggleGroupItem>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### variant
+- **Type**: `"default" | "outline"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"sm" | "default" | "lg"`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available

package/.llm/toggle-group.llm.md

@@ -0,0 +1,101 @@
+# ToggleGroup
+
+**Type**: component
+
+Toggle Group - A group of toggle buttons with single or multiple selection ToggleGroup provides a way to group related toggle buttons together, allowing users to select from a set of mutually exclusive options (single selection) or independent options (multiple selection). Built on Radix UI Toggle Group primitive with enhanced styling through CVA variants and full accessibility support including keyboard navigation. The component supports both controlled and uncontrolled usage patterns, with automatic focus management and roving tabindex behavior. Visual variants are inherited by all child items but can be overridden per item if needed.
+
+## JSX Usage
+
+```jsx
+import { ToggleGroup } from '@neynar/ui';
+
+<ToggleGroup
+  className="value"
+  type={value}
+  variant={value}
+  size={value}
+  defaultValue={[]}
+  value={[]}
+  onValueChange={handleValueChange}
+  disabled={true}
+  rovingFocus={true}
+  orientation={value}
+  dir={value}
+  loop={true}
+  asChild={true}
+>
+  {/* Your content here */}
+</ToggleGroup>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `"single" | "multiple"`
+- **Required**: Yes
+- **Description**: No description available
+
+### variant
+- **Type**: `"default" | "outline"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"sm" | "default" | "lg"`
+- **Required**: No
+- **Description**: No description available
+
+### defaultValue
+- **Type**: `string | string[]`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string | string[]`
+- **Required**: No
+- **Description**: No description available
+
+### onValueChange
+- **Type**: `(value: string | string[]) => void`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### rovingFocus
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### loop
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available

package/.llm/toggle.llm.md

@@ -0,0 +1,40 @@
+# Toggle
+
+**Type**: component
+
+A two-state button that can be either on or off The Toggle component provides an accessible button with on/off state functionality. Built on Radix UI Toggle primitives with customizable variants and sizes. Perfect for text formatting controls, feature toggles, and any binary state controls. Automatically manages ARIA attributes and provides keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { Toggle } from '@neynar/ui';
+
+<Toggle
+  className={value}
+  variant={value}
+  size={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### variant
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### size
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available

package/.llm/tooltip-content.llm.md

@@ -0,0 +1,185 @@
+# TooltipContent
+
+**Type**: component
+
+TooltipContent - The floating tooltip content container Contains the content displayed in the tooltip popup. Automatically positioned relative to the trigger element with intelligent collision detection to ensure the tooltip stays within the viewport. Includes smooth animations and an arrow pointer for visual connection to the trigger. The content component handles complex positioning logic, including collision detection, viewport boundaries, and responsive positioning. It supports rich content including text, images, and interactive elements while maintaining accessibility standards.
+
+## JSX Usage
+
+```jsx
+import { TooltipContent } from '@neynar/ui';
+
+<TooltipContent
+  asChild={true}
+  "aria-label"="value"
+  onEscapeKeyDown={handleEscapeKeyDown}
+  onPointerDownOutside={handlePointerDownOutside}
+  forceMount={true}
+  side={value}
+  sideOffset={0}
+  align={value}
+  alignOffset={0}
+  avoidCollisions={true}
+  collisionBoundary={[]}
+  collisionPadding={value}
+  arrowPadding={0}
+  sticky={value}
+  hideWhenDetached={true}
+  className="value"
+>
+  {/* Your content here */}
+</TooltipContent>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onPointerDownOutside
+- **Type**: `(event: PointerEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### 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 | Element[]`
+- **Required**: No
+- **Description**: No description available
+
+### collisionPadding
+- **Type**: `| number
+    | { top?: number; right?: number; bottom?: number; left?: number }`
+- **Required**: No
+- **Description**: No description available
+
+### arrowPadding
+- **Type**: `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
+
+### 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 tooltip
+<TooltipContent>
+  <p>This is helpful information</p>
+</TooltipContent>
+```
+### Example 2
+```tsx
+// Positioned tooltip with custom offset
+<TooltipContent
+  side="left"
+  sideOffset={12}
+  align="start"
+  alignOffset={-4}
+>
+  <p>Precisely positioned tooltip</p>
+</TooltipContent>
+```
+### Example 3
+```tsx
+// Rich content with custom styling
+<TooltipContent className="max-w-[320px] p-4">
+  <div className="space-y-2">
+    <div className="flex items-center gap-2">
+      <InfoIcon className="h-4 w-4 text-blue-500" />
+      <p className="font-semibold">Pro Feature</p>
+    </div>
+    <p className="text-sm text-gray-600">
+      This feature is available in Pro plans. Upgrade to unlock
+      advanced functionality and premium support.
+    </p>
+    <Button size="sm" className="mt-2">Upgrade Now</Button>
+  </div>
+</TooltipContent>
+```
+### Example 4
+```tsx
+// Tooltip with collision boundary
+<TooltipContent
+  collisionPadding={{ top: 10, bottom: 10 }}
+  hideWhenDetached
+  sticky="always"
+>
+  <p>Stays within safe boundaries</p>
+</TooltipContent>
+```
+### Example 5
+```tsx
+// Controlled tooltip with escape handling
+<TooltipContent
+  onEscapeKeyDown={(e) => {
+    console.log('Tooltip dismissed with Escape');
+    // Custom handling if needed
+  }}
+  onPointerDownOutside={(e) => {
+    console.log('Clicked outside tooltip');
+  }}
+>
+  <p>Interactive tooltip with event handlers</p>
+</TooltipContent>
+```

package/.llm/tooltip-provider.llm.md

@@ -0,0 +1,68 @@
+# TooltipProvider
+
+**Type**: component
+
+TooltipProvider - Global context provider for tooltip functionality Wraps your application or component tree to enable tooltip functionality. Controls global tooltip behavior such as delay duration before showing tooltips. Required for tooltip components to function properly across your app. The provider manages global settings that affect all tooltips within its tree, including timing behavior and accessibility features. Individual tooltips can override these settings as needed.
+
+## JSX Usage
+
+```jsx
+import { TooltipProvider } from '@neynar/ui';
+
+<TooltipProvider
+  delayDuration={0}
+  skipDelayDuration={0}
+  disableHoverableContent={true}
+>
+  {/* Your content here */}
+</TooltipProvider>
+```
+
+## Component Props
+
+### delayDuration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### skipDelayDuration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### disableHoverableContent
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Wrap your entire app
+<TooltipProvider>
+  <App />
+</TooltipProvider>
+```
+### Example 2
+```tsx
+// With custom delay and skip behavior
+<TooltipProvider
+  delayDuration={500}
+  skipDelayDuration={200}
+>
+  <MyComponent />
+</TooltipProvider>
+```
+### Example 3
+```tsx
+// Disable hoverable content for stricter accessibility
+<TooltipProvider disableHoverableContent>
+  <Form />
+</TooltipProvider>
+```