@neynar/ui 0.3.0 → 0.3.1

package/.llm/chart-config.llm.md

@@ -0,0 +1,71 @@
+# ChartConfig
+
+**Type**: type
+
+Configuration object for chart data series Defines labels, colors, and icons for chart data series with support for both static colors and theme-aware color definitions. Each series can have either a static color or theme-specific colors for light/dark modes. This configuration drives both visual styling and accessibility features throughout the chart ecosystem.
+
+## Type Definition
+
+```typescript
+import { ChartConfig } from '@neynar/ui';
+
+type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+}
+```
+
+## Examples
+
+### Example 1
+```tsx
+// Static color configuration with icon
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "hsl(var(--chart-1))",
+    icon: DollarSignIcon,
+  },
+} satisfies ChartConfig
+```
+### Example 2
+```tsx
+// Theme-aware color configuration for dark/light modes
+const chartConfig = {
+  users: {
+    label: "Active Users",
+    theme: {
+      light: "#0ea5e9",
+      dark: "#0284c7",
+    },
+  },
+} satisfies ChartConfig
+```
+### Example 3
+```tsx
+// Complex configuration with multiple series
+const chartConfig = {
+  desktop: {
+    label: "Desktop Users",
+    color: "var(--chart-1)",
+    icon: MonitorIcon,
+  },
+  mobile: {
+    label: "Mobile Users",
+    color: "var(--chart-2)",
+    icon: SmartphoneIcon,
+  },
+  revenue: {
+    label: "Revenue ($)",
+    theme: {
+      light: "#059669",
+      dark: "#10b981",
+    },
+  },
+} satisfies ChartConfig
+```

package/.llm/chart-container.llm.md

@@ -0,0 +1,148 @@
+# ChartContainer
+
+**Type**: component
+
+Container component for Recharts charts with theming and configuration The ChartContainer provides a responsive wrapper for Recharts components with automatic theming, color management, and configuration. It generates CSS custom properties for chart colors, handles dark mode support, and applies consistent styling across all chart types. Built on the shadcn/ui design system with Recharts as the underlying charting library.
+
+## JSX Usage
+
+```jsx
+import { ChartContainer } from '@neynar/ui';
+
+<ChartContainer
+  config={value}
+  id="value"
+  className="value"
+  style={value}
+  "aria-label"="value"
+  "aria-describedby"="value"
+>
+  {/* Your content here */}
+</ChartContainer>
+```
+
+## Component Props
+
+### config
+- **Type**: `ChartConfig`
+- **Required**: Yes
+- **Description**: No description available
+
+### children
+- **Type**: `React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]`
+- **Required**: Yes
+- **Description**: No description available
+
+### id
+- **Type**: `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
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic line chart with accessibility and tooltips
+const chartData = [
+  { month: "Jan", revenue: 2000, profit: 400 },
+  { month: "Feb", revenue: 2400, profit: 600 },
+  { month: "Mar", revenue: 3200, profit: 900 },
+]
+const chartConfig = {
+  revenue: {
+    label: "Revenue",
+    color: "hsl(var(--chart-1))",
+  },
+  profit: {
+    label: "Profit",
+    color: "hsl(var(--chart-2))",
+  },
+} satisfies ChartConfig
+<ChartContainer config={chartConfig} className="min-h-[300px]">
+  <LineChart data={chartData} accessibilityLayer>
+    <CartesianGrid strokeDasharray="3 3" />
+    <XAxis dataKey="month" />
+    <YAxis />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Line
+      type="monotone"
+      dataKey="revenue"
+      stroke="var(--color-revenue)"
+      strokeWidth={2}
+    />
+    <Line
+      type="monotone"
+      dataKey="profit"
+      stroke="var(--color-profit)"
+      strokeWidth={2}
+    />
+  </LineChart>
+</ChartContainer>
+```
+### Example 2
+```tsx
+// Bar chart with theme-aware colors and custom formatting
+<ChartContainer
+  config={{
+    sales: {
+      label: "Sales",
+      theme: {
+        light: "#0ea5e9",
+        dark: "#0284c7",
+      },
+    },
+  }}
+  className="h-[400px]"
+>
+  <BarChart data={data} accessibilityLayer>
+    <XAxis dataKey="month" />
+    <YAxis tickFormatter={(value) => `$${value.toLocaleString()}`} />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
+  </BarChart>
+</ChartContainer>
+```
+### Example 3
+```tsx
+// Pie chart with legend and icons for device breakdown
+<ChartContainer config={{
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+    icon: MonitorIcon,
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+    icon: SmartphoneIcon,
+  },
+}}>
+  <PieChart>
+    <Pie data={data} dataKey="value" nameKey="device" />
+    <ChartTooltip content={<ChartTooltipContent />} />
+    <ChartLegend content={<ChartLegendContent />} />
+  </PieChart>
+</ChartContainer>
+```

package/.llm/chart-legend-content.llm.md

@@ -0,0 +1,85 @@
+# ChartLegendContent
+
+**Type**: component
+
+Custom legend content component for charts Provides a styled legend that displays chart series with colors and labels from the chart configuration. Supports icon display, custom positioning, and automatic theming integration.
+
+## JSX Usage
+
+```jsx
+import { ChartLegendContent } from '@neynar/ui';
+
+<ChartLegendContent
+  hideIcon={true}
+  nameKey="value"
+  payload={value}
+  verticalAlign={value}
+  className="value"
+/>
+```
+
+## Component Props
+
+### hideIcon
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### nameKey
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### payload
+- **Type**: `Array<{
+    value: string;
+    type?: string;
+    color?: string;
+    dataKey?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any;
+  }>`
+- **Required**: No
+- **Description**: No description available
+
+### verticalAlign
+- **Type**: `"top" | "middle" | "bottom"`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic legend with default settings
+<ChartLegend content={<ChartLegendContent />} />
+```
+### Example 2
+```tsx
+// Legend positioned at top without icons
+<ChartLegend
+  content={
+    <ChartLegendContent
+      verticalAlign="top"
+      hideIcon={true}
+    />
+  }
+/>
+```
+### Example 3
+```tsx
+// Legend with custom name key
+<ChartLegend
+  content={
+    <ChartLegendContent
+      nameKey="category"
+      className="justify-start"
+    />
+  }
+/>
+```

package/.llm/chart-legend.llm.md

@@ -0,0 +1,144 @@
+# ChartLegend
+
+**Type**: component
+
+Legend component for charts Re-export of Recharts Legend component with support for custom content. Use with ChartLegendContent for consistent styling and theming integration.
+
+## JSX Usage
+
+```jsx
+import { ChartLegend } from '@neynar/ui';
+
+<ChartLegend
+  content={value}
+  payload={value}
+  align={value}
+  verticalAlign={value}
+  height={0}
+  width={0}
+  wrapperStyle={value}
+  wrapperClassName="value"
+  layout={value}
+  iconSize={0}
+  iconType={value}
+  margin={value}
+  onClick={handleClick}
+  onMouseEnter={handleMouseEnter}
+  onMouseLeave={handleMouseLeave}
+  formatter={() => {}}
+/>
+```
+
+## Component Props
+
+### content
+- **Type**: `React.ComponentType<any> | React.ReactElement`
+- **Required**: No
+- **Description**: No description available
+
+### payload
+- **Type**: `Array<{
+    value: string;
+    type?: string;
+    color?: string;
+    dataKey?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    payload?: any;
+  }>`
+- **Required**: No
+- **Description**: No description available
+
+### align
+- **Type**: `"left" | "center" | "right"`
+- **Required**: No
+- **Description**: No description available
+
+### verticalAlign
+- **Type**: `"top" | "middle" | "bottom"`
+- **Required**: No
+- **Description**: No description available
+
+### height
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### width
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### wrapperStyle
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### wrapperClassName
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### layout
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### iconSize
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### iconType
+- **Type**: `| "line"
+    | "rect"
+    | "circle"
+    | "cross"
+    | "diamond"
+    | "square"
+    | "star"
+    | "triangle"
+    | "wye"`
+- **Required**: No
+- **Description**: No description available
+
+### margin
+- **Type**: `{ top?: number; right?: number; bottom?: number; left?: number }`
+- **Required**: No
+- **Description**: No description available
+
+### onClick
+- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onMouseEnter
+- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onMouseLeave
+- **Type**: `(data: any, index: number, event: React.MouseEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### formatter
+- **Type**: `(value: any, entry: any, index: number) => React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic legend
+<ChartLegend content={<ChartLegendContent />} />
+```
+### Example 2
+```tsx
+// Legend positioned at top
+<ChartLegend
+  content={<ChartLegendContent />}
+  verticalAlign="top"
+  height={36}
+/>
+```

package/.llm/chart-style.llm.md

@@ -0,0 +1,28 @@
+# ChartStyle
+
+**Type**: component
+
+Internal component that generates CSS custom properties for chart colors Creates CSS variables based on the chart configuration to enable theme-aware coloring. Generates variables for both light and dark themes when theme configurations are provided, or uses static colors when available.
+
+## JSX Usage
+
+```jsx
+import { ChartStyle } from '@neynar/ui';
+
+<ChartStyle
+  id={value}
+  config={value}
+/>
+```
+
+## Component Props
+
+### id
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### config
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available

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

@@ -0,0 +1,149 @@
+# ChartTooltipContent
+
+**Type**: component
+
+Custom tooltip content component for charts Provides a styled tooltip that displays chart data with proper formatting, colors, and labels from the chart configuration. Supports multiple indicator styles, custom formatters, and automatic theming integration.
+
+## JSX Usage
+
+```jsx
+import { ChartTooltipContent } from '@neynar/ui';
+
+<ChartTooltipContent
+  hideLabel={true}
+  hideIndicator={true}
+  indicator={value}
+  nameKey="value"
+  labelKey="value"
+  active={true}
+  payload={[]}
+  className="value"
+  label={value}
+  formatter={() => {}}
+  labelFormatter={[]}
+  labelClassName="value"
+  color="value"
+/>
+```
+
+## Component Props
+
+### hideLabel
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### hideIndicator
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### indicator
+- **Type**: `"line" | "dot" | "dashed"`
+- **Required**: No
+- **Description**: No description available
+
+### nameKey
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### labelKey
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### active
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### payload
+- **Type**: `any[]`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### label
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### formatter
+- **Type**: `(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    name: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: any,
+  ) => [React.ReactNode, React.ReactNode] | React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### labelFormatter
+- **Type**: `(label: any, payload: any[]) => React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### labelClassName
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### color
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic tooltip with default styling
+<ChartTooltip content={<ChartTooltipContent />} />
+```
+### Example 2
+```tsx
+// Tooltip with custom value formatter
+<ChartTooltip
+  content={
+    <ChartTooltipContent
+      formatter={(value, name) => [
+        `$${value.toLocaleString()}`,
+        name.toUpperCase()
+      ]}
+    />
+  }
+/>
+```
+### Example 3
+```tsx
+// Tooltip with line indicator and custom label
+<ChartTooltip
+  content={
+    <ChartTooltipContent
+      indicator="line"
+      labelFormatter={(label) => `Week of ${label}`}
+      hideLabel={false}
+    />
+  }
+/>
+```
+### Example 4
+```tsx
+// Tooltip with dashed indicator and no icons
+<ChartTooltip
+  content={
+    <ChartTooltipContent
+      indicator="dashed"
+      hideIndicator={false}
+      nameKey="category"
+    />
+  }
+/>
+```