@neynar/ui 0.3.0 → 0.3.1

package/.llm/calendar.llm.md

@@ -0,0 +1,340 @@
+# Calendar
+
+**Type**: component
+
+Calendar - A comprehensive date selection calendar component A fully-featured calendar component built on react-day-picker that provides intuitive date selection with extensive customization options. Supports single dates, date ranges, multiple dates, and custom validation rules with built-in accessibility features. Built on the powerful react-day-picker library, this component provides a complete calendar interface with advanced features like custom formatters, modifiers, disabled dates, localization, and extensive styling options.
+
+## JSX Usage
+
+```jsx
+import { Calendar } from '@neynar/ui';
+
+<Calendar
+  mode={value}
+  selected={[]}
+  onSelect={handleSelect}
+  buttonVariant={value}
+  captionLayout={value}
+  showOutsideDays={true}
+  numberOfMonths={0}
+  showWeekNumber={true}
+  ISOWeek={true}
+  fixedWeeks={true}
+  disabled={[]}
+  highlighted={[]}
+  defaultMonth={value}
+  month={value}
+  onMonthChange={handleMonthChange}
+  startMonth={value}
+  endMonth={value}
+  fromYear={0}
+  toYear={0}
+  disableNavigation={true}
+  hideNavigation={true}
+  animate={true}
+  weekStartsOn={value}
+  firstWeekContainsDate={value}
+  locale={value}
+  dir={value}
+  onDayClick={handleDayClick}
+  onDayMouseEnter={handleDayMouseEnter}
+  onDayMouseLeave={handleDayMouseLeave}
+  onDayKeyDown={handleDayKeyDown}
+  onWeekNumberClick={handleWeekNumberClick}
+  formatters={() => {}}
+  classNames={value}
+  components={value}
+  footer={value}
+  modifiers={[]}
+  className="value"
+  style={value}
+/>
+```
+
+## Component Props
+
+### mode
+- **Type**: `"single" | "multiple" | "range" | "none"`
+- **Required**: No
+- **Description**: No description available
+
+### selected
+- **Type**: `Date | Date[] | DateRange | undefined`
+- **Required**: No
+- **Description**: No description available
+
+### onSelect
+- **Type**: `(value: Date | Date[] | DateRange | undefined) => void`
+- **Required**: No
+- **Description**: No description available
+
+### buttonVariant
+- **Type**: `| "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link"`
+- **Required**: No
+- **Description**: No description available
+
+### captionLayout
+- **Type**: `"buttons" | "dropdown" | "dropdown-buttons"`
+- **Required**: No
+- **Description**: No description available
+
+### showOutsideDays
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### numberOfMonths
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### showWeekNumber
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### ISOWeek
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### fixedWeeks
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `Matcher | Matcher[]`
+- **Required**: No
+- **Description**: No description available
+
+### highlighted
+- **Type**: `Matcher | Matcher[]`
+- **Required**: No
+- **Description**: No description available
+
+### defaultMonth
+- **Type**: `Date`
+- **Required**: No
+- **Description**: No description available
+
+### month
+- **Type**: `Date`
+- **Required**: No
+- **Description**: No description available
+
+### onMonthChange
+- **Type**: `(month: Date) => void`
+- **Required**: No
+- **Description**: No description available
+
+### startMonth
+- **Type**: `Date`
+- **Required**: No
+- **Description**: No description available
+
+### endMonth
+- **Type**: `Date`
+- **Required**: No
+- **Description**: No description available
+
+### fromYear
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### toYear
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### disableNavigation
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### hideNavigation
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### animate
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### weekStartsOn
+- **Type**: `0 | 1 | 2 | 3 | 4 | 5 | 6`
+- **Required**: No
+- **Description**: No description available
+
+### firstWeekContainsDate
+- **Type**: `1 | 4`
+- **Required**: No
+- **Description**: No description available
+
+### locale
+- **Type**: `Locale`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### onDayClick
+- **Type**: `(day: Date, modifiers: Record<string, boolean>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onDayMouseEnter
+- **Type**: `(day: Date, modifiers: Record<string, boolean>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onDayMouseLeave
+- **Type**: `(day: Date, modifiers: Record<string, boolean>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onDayKeyDown
+- **Type**: `(
+    day: Date,
+    key: string,
+    modifiers: Record<string, boolean>,
+  ) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onWeekNumberClick
+- **Type**: `(weekNumber: number, dates: Date[]) => void`
+- **Required**: No
+- **Description**: No description available
+
+### formatters
+- **Type**: `{
+    /** Format individual day numbers */
+    formatDay?: (date: Date) => string;
+    /** Format month caption (header) */
+    formatMonthCaption?: (date: Date) => string;
+    /** Format week numbers */
+    formatWeekNumber?: (weekNumber: number) => string;
+    /** Format weekday names in header */
+    formatWeekdayName?: (date: Date) => string;
+    /** Format year in dropdown */
+    formatYearDropdown?: (date: Date) => string;
+    /** Format month in dropdown */
+    formatMonthDropdown?: (date: Date) => string;
+  }`
+- **Required**: No
+- **Description**: No description available
+
+### classNames
+- **Type**: `{
+    /** Root calendar container */
+    root?: string;
+    /** Months container */
+    months?: string;
+    /** Individual month container */
+    month?: string;
+    /** Month caption/header */
+    month_caption?: string;
+    /** Navigation container */
+    nav?: string;
+    /** Previous month button */
+    button_previous?: string;
+    /** Next month button */
+    button_next?: string;
+    /** Month/year dropdowns container */
+    dropdowns?: string;
+    /** Individual dropdown */
+    dropdown?: string;
+    /** Weekdays header row */
+    weekdays?: string;
+    /** Individual weekday header */
+    weekday?: string;
+    /** Week row container */
+    week?: string;
+    /** Week number cell */
+    week_number?: string;
+    /** Individual day cell */
+    day?: string;
+    /** Selected day(s) */
+    selected?: string;
+    /** Today's date */
+    today?: string;
+    /** Disabled days */
+    disabled?: string;
+    /** Days outside current month */
+    outside?: string;
+    /** Range start day */
+    range_start?: string;
+    /** Range end day */
+    range_end?: string;
+    /** Days in middle of range */
+    range_middle?: string;
+    /** Hidden days */
+    hidden?: string;
+  }`
+- **Required**: No
+- **Description**: No description available
+
+### components
+- **Type**: `{
+    /** Root calendar container component */
+    Root?: React.ComponentType<
+      React.ComponentProps<"div"> & { rootRef?: React.Ref<HTMLDivElement> }
+    >;
+    /** Month caption component */
+    MonthCaption?: React.ComponentType<{ displayMonth: Date }>;
+    /** Navigation chevron icons */
+    Chevron?: React.ComponentType<
+      React.ComponentProps<"svg"> & {
+        orientation?: "left" | "right" | "up" | "down";
+      }
+    >;
+    /** Individual day button */
+    DayButton?: React.ComponentType<React.ComponentProps<typeof DayButton>>;
+    /** Day content (number/text inside day) */
+    DayContent?: React.ComponentType<{ date: Date }>;
+    /** Dropdown select components */
+    Dropdown?: React.ComponentType<React.ComponentProps<"select">>;
+    /** Week number component */
+    WeekNumber?: React.ComponentType<
+      React.ComponentProps<"td"> & { children: React.ReactNode }
+    >;
+    /** Footer component */
+    Footer?: React.ComponentType<{ children: React.ReactNode }>;
+    /** Weekdays header */
+    Weekdays?: React.ComponentType<React.ComponentProps<"tr">>;
+    /** Week row component */
+    Week?: React.ComponentType<React.ComponentProps<"tr">>;
+  }`
+- **Required**: No
+- **Description**: No description available
+
+### footer
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### modifiers
+- **Type**: `Record<string, Matcher | Matcher[]>`
+- **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

package/.llm/card-action.llm.md

@@ -0,0 +1,64 @@
+# CardAction
+
+**Type**: component
+
+CardAction - Container for card header actions Positioned to the right of the card header using CSS Grid positioning. Typically contains icon buttons, badges, or dropdown menus for card-specific actions. Automatically positioned when used within CardHeader. Grid positioning: - `col-start-2`: Places in second column - `row-span-2`: Spans both title and description rows - `row-start-1`: Starts from first row - `self-start justify-self-end`: Aligns to top-right
+
+## JSX Usage
+
+```jsx
+import { CardAction } from '@neynar/ui';
+
+<CardAction
+  className="value"
+>
+  {/* Your content here */}
+</CardAction>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+<CardAction>
+  <Button variant="ghost" size="icon">
+    <MoreHorizontal className="size-4" />
+  </Button>
+</CardAction>
+```
+### Example 2
+```tsx
+// With badge
+<CardAction>
+  <Badge variant="secondary">New</Badge>
+</CardAction>
+```
+### Example 3
+```tsx
+// With dropdown menu
+<CardAction>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant="ghost" size="icon">
+        <MoreHorizontal className="size-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem>Edit</DropdownMenuItem>
+      <DropdownMenuItem>Delete</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</CardAction>
+```

package/.llm/card-content.llm.md

@@ -0,0 +1,48 @@
+# CardContent
+
+**Type**: component
+
+CardContent - Main content area of a card Contains the primary content for the card. Automatically applies horizontal padding to maintain consistent spacing with other card sections. Can contain any type of content including text, images, forms, or other components.
+
+## JSX Usage
+
+```jsx
+import { CardContent } from '@neynar/ui';
+
+<CardContent
+  className="value"
+>
+  {/* Your content here */}
+</CardContent>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+<CardContent>
+  <p>Your main content goes here.</p>
+</CardContent>
+```
+### Example 2
+```tsx
+// With custom spacing
+<CardContent className="py-4">
+  <div className="space-y-4">
+    <p>Multiple content elements</p>
+    <Button>Action button</Button>
+  </div>
+</CardContent>
+```

package/.llm/card-description.llm.md

@@ -0,0 +1,46 @@
+# CardDescription
+
+**Type**: component
+
+CardDescription - Supplementary description text for a card Provides additional context or details about the card content. Styled with muted foreground color and smaller text size to create visual hierarchy below the CardTitle.
+
+## JSX Usage
+
+```jsx
+import { CardDescription } from '@neynar/ui';
+
+<CardDescription
+  className="value"
+>
+  {/* Your content here */}
+</CardDescription>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+<CardDescription>
+  View and manage your dashboard settings
+</CardDescription>
+```
+### Example 2
+```tsx
+// Multi-line description
+<CardDescription>
+  This card contains important information about your account.
+  Review the details and take action if needed.
+</CardDescription>
+```

package/.llm/card-footer.llm.md

@@ -0,0 +1,56 @@
+# CardFooter
+
+**Type**: component
+
+CardFooter - Footer area of a card, typically for actions Positioned at the bottom of the card and commonly used for action buttons, supplementary information, or navigation elements. Uses flexbox layout with automatic alignment of items. Can be styled with border-top when visual separation from content is needed.
+
+## JSX Usage
+
+```jsx
+import { CardFooter } from '@neynar/ui';
+
+<CardFooter
+  className="value"
+>
+  {/* Your content here */}
+</CardFooter>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic footer with actions
+<CardFooter>
+  <Button variant="outline">Cancel</Button>
+  <Button>Save</Button>
+</CardFooter>
+```
+### Example 2
+```tsx
+// Footer with gap for better spacing
+<CardFooter className="gap-2">
+  <Button variant="outline" className="flex-1">Cancel</Button>
+  <Button className="flex-1">Confirm</Button>
+</CardFooter>
+```
+### Example 3
+```tsx
+// Footer with supplementary info
+<CardFooter className="justify-between">
+  <span className="text-sm text-muted-foreground">Last updated 2 days ago</span>
+  <Button size="sm">Edit</Button>
+</CardFooter>
+```

package/.llm/card-header.llm.md

@@ -0,0 +1,53 @@
+# CardHeader
+
+**Type**: component
+
+CardHeader - Container for card header content Groups the card title, description, and optional action button. Automatically handles grid layout when CardAction is present, positioning the action to the right while allowing title and description to span the remaining space. Uses CSS Grid with container queries for responsive behavior: - Default: Single column layout for title and description - With CardAction: Two-column grid with action positioned top-right - Auto-adjusts spacing with gap utilities
+
+## JSX Usage
+
+```jsx
+import { CardHeader } from '@neynar/ui';
+
+<CardHeader
+  className="value"
+>
+  {/* Your content here */}
+</CardHeader>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic header with title and description
+<CardHeader>
+  <CardTitle>Dashboard Overview</CardTitle>
+  <CardDescription>View your analytics and metrics</CardDescription>
+</CardHeader>
+```
+### Example 2
+```tsx
+// Header with action button
+<CardHeader>
+  <CardTitle>Settings</CardTitle>
+  <CardDescription>Manage your preferences</CardDescription>
+  <CardAction>
+    <Button variant="ghost" size="icon">
+      <MoreHorizontal className="size-4" />
+    </Button>
+  </CardAction>
+</CardHeader>
+```

package/.llm/card-title.llm.md

@@ -0,0 +1,43 @@
+# CardTitle
+
+**Type**: component
+
+CardTitle - The main title of a card Renders the primary heading for a card. Should be used within CardHeader to maintain proper semantic structure and visual hierarchy. Uses semibold font weight and leading-none for compact appearance.
+
+## JSX Usage
+
+```jsx
+import { CardTitle } from '@neynar/ui';
+
+<CardTitle
+  className="value"
+>
+  {/* Your content here */}
+</CardTitle>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+<CardTitle>Dashboard Overview</CardTitle>
+```
+### Example 2
+```tsx
+// With custom styling
+<CardTitle className="text-lg text-primary">
+  Featured Product
+</CardTitle>
+```