@neynar/ui 0.1.1

package/dist/components/ui/chart.d.ts

@@ -0,0 +1,442 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * // Static color configuration with icon
+ * const chartConfig = {
+ *   revenue: {
+ *     label: "Revenue",
+ *     color: "hsl(var(--chart-1))",
+ *     icon: DollarSignIcon,
+ *   },
+ * } satisfies ChartConfig
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Theme-aware color configuration for dark/light modes
+ * const chartConfig = {
+ *   users: {
+ *     label: "Active Users",
+ *     theme: {
+ *       light: "#0ea5e9",
+ *       dark: "#0284c7",
+ *     },
+ *   },
+ * } satisfies ChartConfig
+ * ```
+ *
+ * @example
+ * ```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
+ * ```
+ *
+ * @since 1.0.0
+ */
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```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
+ * ```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
+ * ```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>
+ * ```
+ *
+ * @accessibility
+ * **Core Accessibility Features:**
+ * - Responsive container adapts to screen size automatically
+ * - Theme-aware color system designed for WCAG contrast compliance
+ * - Supports Recharts' `accessibilityLayer` prop for keyboard navigation
+ * - High contrast colors available in both light and dark themes
+ * - Semantic HTML structure for screen reader compatibility
+ *
+ * **Important Accessibility Notes:**
+ * - Always include `accessibilityLayer` prop on Recharts components for keyboard access
+ * - Consider adding `aria-label` or `title` attributes for chart context
+ * - Ensure color is not the only way to distinguish data (use patterns, labels, or icons)
+ * - Test with screen readers as automatic data announcement may be limited
+ * - Provide alternative data representations (tables, text summaries) for complex charts
+ *
+ * **Keyboard Navigation:**
+ * - Arrow keys navigate between data points when `accessibilityLayer` is enabled
+ * - Tab key moves focus to interactive chart elements
+ * - Screen reader users should be provided with data summaries or alternative formats
+ *
+ * @performance
+ * - Use appropriate chart types for data size (avoid complex charts with large datasets)
+ * - Consider virtualization for charts with many data points
+ * - CSS variables are generated only for configured colors to minimize style overhead
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/chart} shadcn/ui Chart documentation
+ * @see {@link https://recharts.org/en-US/api} Recharts API documentation
+ * @see {@link ChartTooltip} Tooltip component for interactive data display
+ * @see {@link ChartLegend} Legend component for series identification
+ * @see {@link useChart} Hook to access chart configuration
+ * @since 1.0.0
+ */
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * Chart configuration defining series labels and colors
+     */
+    config: ChartConfig;
+    /**
+     * Recharts component(s) to render
+     */
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @component
+ * @internal
+ * @param id - Unique identifier for the chart instance
+ * @param config - Chart configuration with color definitions
+ * @since 1.0.0
+ */
+declare function ChartStyle({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Tooltip component for charts
+ *
+ * Re-export of Recharts Tooltip component with support for custom content.
+ * Use with ChartTooltipContent for consistent styling and theming integration.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <ChartTooltip content={<ChartTooltipContent />} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip with custom positioning
+ * <ChartTooltip
+ *   content={<ChartTooltipContent />}
+ *   cursor={false}
+ *   position={{ x: 10, y: 10 }}
+ * />
+ * ```
+ *
+ * @see {@link ChartTooltipContent} Custom tooltip content component
+ * @since 1.0.0
+ */
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic tooltip with default styling
+ * <ChartTooltip content={<ChartTooltipContent />} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip with custom value formatter
+ * <ChartTooltip
+ *   content={
+ *     <ChartTooltipContent
+ *       formatter={(value, name) => [
+ *         `$${value.toLocaleString()}`,
+ *         name.toUpperCase()
+ *       ]}
+ *     />
+ *   }
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip with line indicator and custom label
+ * <ChartTooltip
+ *   content={
+ *     <ChartTooltipContent
+ *       indicator="line"
+ *       labelFormatter={(label) => `Week of ${label}`}
+ *       hideLabel={false}
+ *     />
+ *   }
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Tooltip with dashed indicator and no icons
+ * <ChartTooltip
+ *   content={
+ *     <ChartTooltipContent
+ *       indicator="dashed"
+ *       hideIndicator={false}
+ *       nameKey="category"
+ *     />
+ *   }
+ * />
+ * ```
+ *
+ * @accessibility
+ * - High contrast colors for visibility in both themes
+ * - Proper semantic markup for screen readers
+ * - Formatted numbers with locale-aware display
+ * - Clear visual indicators for data series
+ *
+ * @since 1.0.0
+ */
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    /**
+     * Whether to hide the label
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Whether to hide the color indicator
+     * @default false
+     */
+    hideIndicator?: boolean;
+    /**
+     * Style of the color indicator
+     * @default "dot"
+     */
+    indicator?: "line" | "dot" | "dashed";
+    /**
+     * Key to use for the name in payload
+     */
+    nameKey?: string;
+    /**
+     * Key to use for the label in payload
+     */
+    labelKey?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Legend component for charts
+ *
+ * Re-export of Recharts Legend component with support for custom content.
+ * Use with ChartLegendContent for consistent styling and theming integration.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic legend
+ * <ChartLegend content={<ChartLegendContent />} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Legend positioned at top
+ * <ChartLegend
+ *   content={<ChartLegendContent />}
+ *   verticalAlign="top"
+ *   height={36}
+ * />
+ * ```
+ *
+ * @see {@link ChartLegendContent} Custom legend content component
+ * @since 1.0.0
+ */
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+/**
+ * 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.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic legend with default settings
+ * <ChartLegend content={<ChartLegendContent />} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Legend positioned at top without icons
+ * <ChartLegend
+ *   content={
+ *     <ChartLegendContent
+ *       verticalAlign="top"
+ *       hideIcon={true}
+ *     />
+ *   }
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Legend with custom name key
+ * <ChartLegend
+ *   content={
+ *     <ChartLegendContent
+ *       nameKey="category"
+ *       className="justify-start"
+ *     />
+ *   }
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Semantic markup for screen readers
+ * - Color indicators with clear labels
+ * - Proper contrast ratios for visibility
+ * - Logical tab order for keyboard navigation
+ *
+ * @since 1.0.0
+ */
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    /**
+     * Whether to hide series icons
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Key to use for the name in payload
+     */
+    nameKey?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/ui/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/ui/chart.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+/**
+ * A versatile checkbox component for binary and multi-selection interfaces
+ *
+ * Built on Radix UI Checkbox primitive, this component provides a fully accessible
+ * checkbox with support for controlled/uncontrolled states, indeterminate state,
+ * and comprehensive form integration. Features consistent styling with the design
+ * system and proper keyboard navigation.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <div className="flex items-center space-x-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">Accept terms and conditions</Label>
+ * </div>
+ * ```
+ *
+ * @example Controlled checkbox with state management
+ * ```tsx
+ * const [checked, setChecked] = useState(false);
+ *
+ * <div className="flex items-center space-x-2">
+ *   <Checkbox
+ *     id="notifications"
+ *     checked={checked}
+ *     onCheckedChange={setChecked}
+ *   />
+ *   <Label htmlFor="notifications">Send me notifications</Label>
+ * </div>
+ * ```
+ *
+ * @example Indeterminate state for parent-child relationships
+ * ```tsx
+ * const [parentState, setParentState] = useState("indeterminate");
+ *
+ * <Checkbox
+ *   checked={parentState}
+ *   onCheckedChange={(checked) => {
+ *     setParentState(checked);
+ *     // Update child checkboxes accordingly
+ *   }}
+ * />
+ * ```
+ *
+ * @example Form integration with multiple selections
+ * ```tsx
+ * const [preferences, setPreferences] = useState([]);
+ *
+ * {options.map((option) => (
+ *   <div key={option.id} className="flex items-center space-x-2">
+ *     <Checkbox
+ *       id={option.id}
+ *       name="preferences"
+ *       value={option.value}
+ *       checked={preferences.includes(option.id)}
+ *       onCheckedChange={(checked) => {
+ *         setPreferences(prev =>
+ *           checked
+ *             ? [...prev, option.id]
+ *             : prev.filter(id => id !== option.id)
+ *         );
+ *       }}
+ *     />
+ *     <Label htmlFor={option.id}>{option.label}</Label>
+ *   </div>
+ * ))}
+ * ```
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/checkbox} for design patterns
+ * @since 1.0.0
+ * @see {@link Label} for accessible labeling
+ * @see {@link Switch} for boolean toggles
+ * @see {@link RadioGroup} for single selection scenarios
+ *
+ * @param className - Additional CSS classes to apply to the checkbox
+ * @param checked - Controlled checked state (boolean | "indeterminate")
+ * @param defaultChecked - Default checked state for uncontrolled usage
+ * @param onCheckedChange - Callback when the checked state changes
+ * @param disabled - Whether the checkbox is disabled
+ * @param required - Whether the checkbox is required for form validation
+ * @param name - Form field name for form submission
+ * @param value - Form field value for form submission
+ * @param id - Unique identifier, used with Label htmlFor attribute
+ */
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/ui/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAK9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAkBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}