@neynar/ui 0.2.1 → 0.3.0

package/llm-docs/tooltip-trigger.llm.md

@@ -1,70 +0,0 @@
-# TooltipTrigger
-
-**Type**: component
-
-TooltipTrigger - The element that triggers the tooltip display Wraps the element that will show the tooltip on hover or focus. Use the `asChild` prop to merge props with the child element rather than rendering an additional wrapper element. Essential for maintaining semantic meaning and avoiding unnecessary DOM nesting. The trigger automatically handles all interaction events including mouse hover, touch interactions, keyboard focus, and blur events. It preserves the original element's accessibility properties while adding tooltip functionality.
-
-## JSX Usage
-
-```jsx
-import { TooltipTrigger } from '@neynar/ui';
-
-<TooltipTrigger
-  asChild={true}
->
-  {/* Your content here */}
-</TooltipTrigger>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic trigger with button
-<TooltipTrigger asChild>
-  <Button>Hover me</Button>
-</TooltipTrigger>
-```
-### Example 2
-```tsx
-// With icon button
-<TooltipTrigger asChild>
-  <Button variant="ghost" size="icon">
-    <Settings className="h-4 w-4" />
-  </Button>
-</TooltipTrigger>
-```
-### Example 3
-```tsx
-// With disabled element (requires wrapper for pointer events)
-<TooltipTrigger asChild>
-  <span className="inline-block cursor-not-allowed">
-    <Button disabled>Disabled Action</Button>
-  </span>
-</TooltipTrigger>
-```
-### Example 4
-```tsx
-// With custom element
-<TooltipTrigger asChild>
-  <div
-    role="button"
-    tabIndex={0}
-    className="cursor-pointer p-2 rounded hover:bg-gray-100"
-  >
-    Custom trigger element
-  </div>
-</TooltipTrigger>
-```

package/llm-docs/tooltip.llm.md

@@ -1,129 +0,0 @@
-# Tooltip
-
-**Type**: component
-
-Tooltip - Display contextual information on hover or focus A versatile tooltip component built on Radix UI primitives that provides contextual information when users hover over or focus on an element. Perfect for displaying help text, definitions, or additional context without cluttering the interface. Automatically wraps content in a TooltipProvider for convenience. The tooltip supports both controlled and uncontrolled usage patterns, with intelligent positioning, collision detection, and smooth animations. Built with accessibility as a priority, including proper ARIA attributes and keyboard navigation support.
-
-## JSX Usage
-
-```jsx
-import { Tooltip } from '@neynar/ui';
-
-<Tooltip
-  defaultOpen={true}
-  open={true}
-  onOpenChange={handleOpenChange}
-  delayDuration={0}
-  disableHoverableContent={true}
->
-  {/* Your content here */}
-</Tooltip>
-```
-
-## Component Props
-
-### defaultOpen
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### open
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onOpenChange
-- **Type**: `(open: boolean) => void`
-- **Required**: No
-- **Description**: No description available
-
-### delayDuration
-- **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
-// Basic tooltip
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button variant="outline">Hover me</Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>This is a helpful tooltip</p>
-  </TooltipContent>
-</Tooltip>
-```
-### Example 2
-```tsx
-// Icon button with tooltip
-import { Info } from "lucide-react"
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button variant="ghost" size="icon">
-      <Info className="h-4 w-4" />
-    </Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>Additional information</p>
-  </TooltipContent>
-</Tooltip>
-```
-### Example 3
-```tsx
-// Controlled tooltip with custom delay
-const [open, setOpen] = useState(false)
-<Tooltip
-  open={open}
-  onOpenChange={setOpen}
-  delayDuration={300}
->
-  <TooltipTrigger asChild>
-    <Button onClick={() => setOpen(!open)}>Toggle</Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>Controlled tooltip state</p>
-  </TooltipContent>
-</Tooltip>
-```
-### Example 4
-```tsx
-// Disabled element with tooltip (requires wrapper)
-<Tooltip>
-  <TooltipTrigger asChild>
-    <span className="inline-block">
-      <Button disabled>Disabled Action</Button>
-    </span>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>You need to complete setup first</p>
-  </TooltipContent>
-</Tooltip>
-```
-### Example 5
-```tsx
-// Positioned tooltip with rich content
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Badge variant="secondary">API Key</Badge>
-  </TooltipTrigger>
-  <TooltipContent side="right" className="max-w-[250px]">
-    <div className="space-y-1">
-      <p className="font-medium">API Authentication</p>
-      <p className="text-xs">Your key is used to authenticate requests</p>
-    </div>
-  </TooltipContent>
-</Tooltip>
-```

package/llm-docs/typography.llm.md

@@ -1,175 +0,0 @@
-# Typography
-
-**Type**: component
-
-Typography - Comprehensive text styling component for consistent design system implementation A flexible typography component that provides semantic text variants, color options, and accessibility features. Built with class-variance-authority (CVA) for type-safe variant management and supports both semantic HTML elements and composition patterns via Radix UI Slot. Designed to handle all text styling needs across the application with consistent visual hierarchy and accessibility compliance.
-
-## JSX Usage
-
-```jsx
-import { Typography } from '@neynar/ui';
-
-<Typography
-  variant={value}
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  as={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</Typography>
-```
-
-## 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
-
-### as
-- **Type**: `React.ElementType`
-- **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
-
-### Example 1
-```tsx
-// Basic heading with semantic HTML
-<Typography variant="heading" as="h1">
-  Welcome to Neynar
-</Typography>
-// Body text with color variant
-<Typography variant="body" color="muted">
-  This is secondary body text with reduced visual prominence.
-</Typography>
-// Code snippet with proper semantics
-<Typography variant="code" as="code">
-  const message = "Hello, world!";
-</Typography>
-```
-### Example 2
-```tsx
-// Advanced styling with multiple variants
-<Typography
-  variant="subheading"
-  color="accent"
-  align="center"
-  weight="semibold"
-  italic
-  underline
-  className="mb-4"
->
-  Styled Subheading with Multiple Variants
-</Typography>
-// Truncated text for constrained layouts
-<Typography variant="body" truncate className="max-w-xs">
-  This is a very long text that will be truncated with ellipsis when it exceeds the container width
-</Typography>
-```
-### Example 3
-```tsx
-// Accessibility features
-<Typography variant="details" srOnly>
-  Additional context for screen readers only
-</Typography>
-// Form label with proper association
-<Typography variant="field" as="label" htmlFor="email-input">
-  Email Address
-</Typography>
-// Composition with asChild for complex structures
-<Typography variant="body" asChild>
-  <a href="/about" className="hover:underline">
-    Learn more about our platform
-  </a>
-</Typography>
-```

package/llm-docs/use-carousel.llm.md

@@ -1,55 +0,0 @@
-# useCarousel
-
-**Type**: hook
-
-Hook to access carousel context and controls Must be used within a Carousel component. Provides access to the carousel API and navigation methods for building custom carousel interactions.
-
-## API Surface
-
-```typescript
-import { useCarousel } from '@neynar/ui';
-
-export function useCarousel(): ReturnType<typeof useCarousel> { ... }
-```
-
-## Returns
-
-**Return Type**: `ReturnType<typeof useCarousel>`
-
-
-**Description**: Carousel context containing API, navigation controls, and state
-## Usage
-
-```typescript
-import { useCarousel } from '@neynar/ui';
-
-const result = useCarousel();
-```
-
-## Examples
-
-```tsx
-function CarouselDots() {
-  const { api, scrollNext, canScrollNext } = useCarousel();
-  const [current, setCurrent] = useState(0);
-  useEffect(() => {
-    if (!api) return;
-    setCurrent(api.selectedScrollSnap());
-    api.on('select', () => setCurrent(api.selectedScrollSnap()));
-  }, [api]);
-  return (
-    <div className="flex gap-2">
-      {Array.from({ length: 5 }).map((_, i) => (
-        <button
-          key={i}
-          className={current === i ? "active" : ""}
-          onClick={() => api?.scrollTo(i)}
-        />
-      ))}
-    </div>
-  );
-}
-```
-## Throws
-
-- Error when used outside of Carousel component

package/llm-docs/use-command-state.llm.md

@@ -1,32 +0,0 @@
-# useCmdk
-
-**Type**: hook
-
-Run a selector against the store state.
-
-## API Surface
-
-```typescript
-import { useCmdk } from '@neynar/ui';
-
-export function useCmdk(selector: (state: State) => T): T { ... }
-```
-
-## Parameters
-
-### selector
-- **Type**: `(state: State) => T`
-- **Required**: Yes
-- **Description**: No description available
-## Returns
-
-**Return Type**: `T`
-
-
-## Usage
-
-```typescript
-import { useCmdk } from '@neynar/ui';
-
-const result = useCmdk(() => {});
-```

package/llm-docs/use-is-mobile.llm.md

@@ -1,73 +0,0 @@
-# useIsMobile
-
-**Type**: hook
-
-Hook for detecting mobile viewport width based on Tailwind CSS breakpoints A React hook that monitors viewport width and returns true when the width is less than 768px (Tailwind's `md` breakpoint). This hook provides a consistent way to conditionally render mobile and desktop layouts, following the same responsive patterns used throughout the shadcn/ui ecosystem. The hook uses `window.matchMedia` for efficient viewport monitoring and properly handles server-side rendering by returning `false` initially, then updating on the client side.
-
-## API Surface
-
-```typescript
-import { useIsMobile } from '@neynar/ui';
-
-export function useIsMobile(): ReturnType<typeof useIsMobile> { ... }
-```
-
-## Returns
-
-**Return Type**: `ReturnType<typeof useIsMobile>`
-
-
-**Description**: `true` if viewport width is less than 768px, `false` otherwise
-## Usage
-
-```typescript
-import { useIsMobile } from '@neynar/ui';
-
-const result = useIsMobile();
-```
-
-## Examples
-
-### Example 1
-Basic responsive layout switching
-```tsx
-function ResponsiveComponent() {
-  const isMobile = useIsMobile();
-  
-  return (
-    <div>
-      {isMobile ? (
-        <MobileLayout />
-      ) : (
-        <DesktopLayout />
-      )}
-    </div>
-  );
-}
-```
-### Example 2
-Conditional navigation rendering
-```tsx
-function Navigation() {
-  const isMobile = useIsMobile();
-  
-  if (isMobile) {
-    return <Sheet><MobileNavContent /></Sheet>;
-  }
-  
-  return <NavigationMenu><DesktopNavContent /></NavigationMenu>;
-}
-```
-### Example 3
-Responsive component behavior within forms
-```tsx
-function SearchDialog() {
-  const isMobile = useIsMobile();
-  
-  if (isMobile) {
-    return <Drawer><SearchForm /></Drawer>;
-  }
-  
-  return <Dialog><SearchForm /></Dialog>;
-}
-```

package/llm-docs/use-sidebar.llm.md

@@ -1,61 +0,0 @@
-# useSidebar
-
-**Type**: hook
-
-Hook to access sidebar state and control functions Provides access to the sidebar's state management including expanded/collapsed states, mobile-specific behavior, and toggle functions. This hook must be used within a SidebarProvider component tree to function properly.
-
-## API Surface
-
-```typescript
-import { useSidebar } from '@neynar/ui';
-
-export function useSidebar(): ReturnType<typeof useSidebar> { ... }
-```
-
-## Returns
-
-**Return Type**: `ReturnType<typeof useSidebar>`
-
-
-**Description**: Object containing sidebar state and control functions:
-- `state`: "expanded" | "collapsed" - Current sidebar state
-- `open`: boolean - Whether sidebar is open (desktop)
-- `setOpen`: (open: boolean) => void - Function to control sidebar open state
-- `openMobile`: boolean - Whether sidebar is open on mobile
-- `setOpenMobile`: (open: boolean) => void - Function to control mobile sidebar state
-- `isMobile`: boolean - Whether current viewport is considered mobile
-- `toggleSidebar`: () => void - Function to toggle sidebar state
-## Usage
-
-```typescript
-import { useSidebar } from '@neynar/ui';
-
-const result = useSidebar();
-```
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage for toggle button
-function ToggleButton() {
-  const { state, toggleSidebar } = useSidebar()
-  return (
-    <button onClick={toggleSidebar}>
-      {state === "expanded" ? "Collapse" : "Expand"}
-    </button>
-  )
-}
-```
-### Example 2
-```tsx
-// Conditional rendering based on state
-function ConditionalContent() {
-  const { state, isMobile } = useSidebar()
-  if (isMobile) return <MobileOnlyContent />
-  return state === "expanded" ? <FullContent /> : <CompactContent />
-}
-```
-## Throws
-
-- When used outside of SidebarProvider context