@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/carousel.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import ChevronLeft from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import ChevronRight from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const onSelect = React.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-previous",
+      variant,
+      size,
+      className: cn(
+        "rounded-full absolute touch-manipulation",
+        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeft, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon-sm",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "carousel-next",
+      variant,
+      size,
+      className: cn(
+        "rounded-full absolute touch-manipulation",
+        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronRight, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/ui/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":["../../../src/components/ui/carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = React.ComponentProps<\"div\"> & {\n  /** Embla carousel options (loop, align, slidesToScroll, etc.) */\n  opts?: CarouselOptions;\n  /** Embla carousel plugins */\n  plugins?: CarouselPlugin;\n  /** Carousel scroll direction. @default \"horizontal\" */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Callback to receive the carousel API instance for programmatic control */\n  setApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0];\n  api: ReturnType<typeof useEmblaCarousel>[1];\n  scrollPrev: () => void;\n  scrollNext: () => void;\n  canScrollPrev: boolean;\n  canScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\n/**\n * Hook to access carousel context. Must be used within a Carousel component.\n */\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext);\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\");\n  }\n\n  return context;\n}\n\n/**\n * Carousel root component. Provides context and manages scroll state.\n * Supports both horizontal and vertical orientations with keyboard navigation.\n */\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins,\n  );\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false);\n  const [canScrollNext, setCanScrollNext] = React.useState(false);\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return;\n    setCanScrollPrev(api.canScrollPrev());\n    setCanScrollNext(api.canScrollNext());\n  }, []);\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev();\n  }, [api]);\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext();\n  }, [api]);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  React.useEffect(() => {\n    if (!api || !setApi) return;\n    setApi(api);\n  }, [api, setApi]);\n\n  React.useEffect(() => {\n    if (!api) return;\n    onSelect(api);\n    api.on(\"reInit\", onSelect);\n    api.on(\"select\", onSelect);\n\n    return () => {\n      api?.off(\"select\", onSelect);\n    };\n  }, [api, onSelect]);\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  );\n}\n\ntype CarouselContentProps = React.ComponentProps<\"div\">;\n\n/**\n * Container for carousel items. Handles overflow and flex layout.\n */\nfunction CarouselContent({ className, ...props }: CarouselContentProps) {\n  const { carouselRef, orientation } = useCarousel();\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\ntype CarouselItemProps = React.ComponentProps<\"div\">;\n\n/**\n * Individual carousel slide. Use `basis-*` classes to control items per view.\n */\nfunction CarouselItem({ className, ...props }: CarouselItemProps) {\n  const { orientation } = useCarousel();\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype CarouselPreviousProps = React.ComponentProps<typeof Button>;\n\n/**\n * Button to navigate to previous slide. Automatically disabled when at start (unless loop is enabled).\n */\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: CarouselPreviousProps) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  );\n}\n\ntype CarouselNextProps = React.ComponentProps<typeof Button>;\n\n/**\n * Button to navigate to next slide. Automatically disabled when at end (unless loop is enabled).\n */\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon-sm\",\n  ...props\n}: CarouselNextProps) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel();\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"rounded-full absolute touch-manipulation\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ChevronRightIcon />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  );\n}\n\nexport {\n  type CarouselApi,\n  type CarouselProps,\n  type CarouselContentProps,\n  type CarouselItemProps,\n  type CarouselPreviousProps,\n  type CarouselNextProps,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n  useCarousel,\n};\n"],"names":[],"mappings":";;;;;;;;AAoCA;AAKA;AACE;AAEA;AACE;AAAgE;AAGlE;AACF;AAMA;AAAkB;AACF;AACd;AACA;AACA;AACA;AACA;AAEF;AACE;AAA2B;AACzB;AACK;AACwC;AAAA;AAE7C;AAEF;AACA;AAEA;AACE;AACA;AACA;AAAoC;AAGtC;AACE;AAAK;AAGP;AACE;AAAK;AAGP;AAA4B;AAExB;AACE;AACA;AAAA;AAEA;AACA;AAAA;AACF;AACF;AACuB;AAGzB;AACE;AACA;AAAU;AAGZ;AACE;AACA;AACA;AACA;AAEA;AACE;AAA2B;AAC7B;AAGF;AACE;AAAiB;AAAhB;AACQ;AACL;AACA;AACA;AAEoD;AACpD;AACA;AACA;AACA;AAAA;AAGF;AAAC;AAAA;AACmB;AACiB;AAC9B;AACgB;AACX;AACN;AAEH;AAAA;AAAA;AACH;AAGN;AAOA;AACE;AAEA;AACE;AAAC;AAAA;AACM;AACK;AACA;AAEV;AAAC;AAAA;AACY;AACT;AACyC;AACzC;AAAA;AAEE;AAAA;AAAA;AACN;AAGN;AAOA;AACE;AAEA;AACE;AAAC;AAAA;AACM;AACgB;AACX;AACC;AACT;AACwC;AACxC;AAAA;AAEE;AAAA;AAGV;AAOA;AAA0B;AACxB;AACU;AACH;AAET;AACE;AAEA;AACE;AAAC;AAAA;AACW;AACV;AACA;AACW;AACT;AAGI;AACJ;AAAA;AAES;AACF;AACL;AAEJ;AAAiB;AACuB;AAAA;AAAA;AAG9C;AAOA;AAAsB;AACpB;AACU;AACH;AAET;AACE;AAEA;AACE;AAAC;AAAA;AACW;AACV;AACA;AACW;AACT;AAGI;AACJ;AAAA;AAES;AACF;AACL;AAEJ;AAAkB;AACkB;AAAA;AAAA;AAG1C;;;;;;;;;"}

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

@@ -5,69 +5,14 @@ declare const THEMES: {
     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
+ * Configuration object for chart series, defining labels, colors, and icons.
+ * Supports both single colors and theme-aware color mappings for light/dark modes.
  */
 export type ChartConfig = {
     [k in string]: {
+        /** Label for the series displayed in tooltips and legends */
         label?: React.ReactNode;
+        /** Optional icon component to display alongside the series */
         icon?: React.ComponentType;
     } & ({
         color?: string;
@@ -77,366 +22,52 @@ export type ChartConfig = {
         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
-     */
+type ChartContainerProps = React.ComponentProps<"div"> & {
+    /** Chart configuration defining series labels, colors, and icons */
     config: ChartConfig;
-    /**
-     * Recharts component(s) to render
-     */
+    /** Recharts chart component (LineChart, BarChart, AreaChart, PieChart, etc.) */
     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
+ * Root container for Recharts visualizations with theming and configuration.
+ * Provides responsive container, theme-aware CSS variables, and chart context.
  */
-declare function ChartStyle({ id, config }: {
+declare function ChartContainer({ id, className, children, config, ...props }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+declare const 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
- */
+}) => import("react/jsx-runtime").JSX.Element | null;
+/** Re-export of Recharts Tooltip component for positioning and visibility */
 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
-     */
+type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    /** Hide the tooltip label (typically the x-axis value) */
     hideLabel?: boolean;
-    /**
-     * Whether to hide the color indicator
-     * @default false
-     */
+    /** Hide the color indicator for each series */
     hideIndicator?: boolean;
-    /**
-     * Style of the color indicator
-     * @default "dot"
-     */
+    /** Indicator style for series items. @default "dot" */
     indicator?: "line" | "dot" | "dashed";
-    /**
-     * Key to use for the name in payload
-     */
+    /** Key to use for series names, overrides default dataKey */
     nameKey?: string;
-    /**
-     * Key to use for the label in payload
-     */
+    /** Key to use for tooltip label, overrides default */
     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
+ * Customizable tooltip content for charts with series indicators and formatting.
+ * Automatically styled with theme colors from ChartConfig.
  */
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+/** Re-export of Recharts Legend component for positioning */
 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
-     */
+type ChartLegendContentProps = React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    /** Hide series icons, showing only color squares. @default false */
     hideIcon?: boolean;
-    /**
-     * Key to use for the name in payload
-     */
+    /** Key to use for series names in legend */
     nameKey?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };
+};
+/**
+ * Customizable legend content for charts showing all series with icons or colors.
+ * Automatically styled with theme colors from ChartConfig.
+ */
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: ChartLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, type ChartContainerProps, type ChartTooltipContentProps, type ChartLegendContentProps, };
 //# sourceMappingURL=chart.d.ts.map