@omnifyjp/ui 0.5.3 → 1.0.1

package/dist/components/calendar-toolbar.js

@@ -0,0 +1,54 @@
+import { ToggleGroup, ToggleGroupItem } from '../chunk-ZPMXRW2A.js';
+import '../chunk-NU56GKGM.js';
+import { Button } from '../chunk-55E7D2HR.js';
+import '../chunk-DGPY4WP3.js';
+import { format } from 'date-fns';
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultLabels = {
+  today: "Today",
+  month: "Month",
+  week: "Week",
+  day: "Day",
+  createEvent: "Create Event"
+};
+function CalendarToolbar({
+  currentDate,
+  view,
+  onViewChange,
+  onPrev,
+  onNext,
+  onToday,
+  onCreateEvent,
+  labels: labelsProp,
+  titleFormat: titleFormatProp
+}) {
+  const labels = { ...defaultLabels, ...labelsProp };
+  const titleFormat = titleFormatProp ?? (view === "day" ? "EEEE, MMMM d, yyyy" : "MMMM yyyy");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 flex-wrap", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: onToday, children: labels.today }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "w-8 h-8", onClick: onPrev, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "w-8 h-8", onClick: onNext, children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" }) })
+      ] }),
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: format(currentDate, titleFormat) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(ToggleGroup, { type: "single", value: view, onValueChange: (val) => val && onViewChange(val), children: [
+        /* @__PURE__ */ jsx(ToggleGroupItem, { value: "month", size: "sm", children: labels.month }),
+        /* @__PURE__ */ jsx(ToggleGroupItem, { value: "week", size: "sm", children: labels.week }),
+        /* @__PURE__ */ jsx(ToggleGroupItem, { value: "day", size: "sm", children: labels.day })
+      ] }),
+      onCreateEvent && /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: onCreateEvent, children: [
+        /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
+        labels.createEvent
+      ] })
+    ] })
+  ] });
+}
+
+export { CalendarToolbar };
+//# sourceMappingURL=calendar-toolbar.js.map
+//# sourceMappingURL=calendar-toolbar.js.map

package/dist/components/calendar-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/calendar-toolbar.tsx"],"names":[],"mappings":";;;;;;;;AAsBA,IAAM,aAAA,GAAiD;AAAA,EACrD,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EACP,IAAA,EAAM,MAAA;AAAA,EACN,GAAA,EAAK,KAAA;AAAA,EACL,WAAA,EAAa;AACf,CAAA;AAyCO,SAAS,eAAA,CAAgB;AAAA,EAC9B,WAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA,EAAQ,UAAA;AAAA,EACR,WAAA,EAAa;AACf,CAAA,EAAyB;AACvB,EAAA,MAAM,MAAA,GAAS,EAAE,GAAG,aAAA,EAAe,GAAG,UAAA,EAAW;AAEjD,EAAA,MAAM,WAAA,GAAc,eAAA,KAAoB,IAAA,KAAS,KAAA,GAC7C,oBAAA,GACA,WAAA,CAAA;AAEJ,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAQ,SAAA,EAAU,IAAA,EAAK,MAAK,OAAA,EAAS,OAAA,EAC1C,iBAAO,KAAA,EACV,CAAA;AAAA,sBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,IAAA,EAAK,MAAA,EAAO,SAAA,EAAU,SAAA,EAAU,OAAA,EAAS,MAAA,EAC/D,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,WAAU,CAAA,EACnC,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,OAAA,EAAQ,MAAK,MAAA,EAAO,SAAA,EAAU,SAAA,EAAU,OAAA,EAAS,MAAA,EAC/D,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,WAAU,CAAA,EACpC;AAAA,OAAA,EACF,CAAA;AAAA,0BACC,IAAA,EAAA,EAAG,SAAA,EAAU,yBAAyB,QAAA,EAAA,MAAA,CAAO,WAAA,EAAa,WAAW,CAAA,EAAE;AAAA,KAAA,EAC1E,CAAA;AAAA,oBAEA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAK,QAAA,EAAS,KAAA,EAAO,IAAA,EAAM,eAAe,CAAA,GAAA,KAAO,GAAA,IAAO,YAAA,CAAa,GAAmB,CAAA,EACnG,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAgB,KAAA,EAAM,OAAA,EAAQ,IAAA,EAAK,IAAA,EAAM,iBAAO,KAAA,EAAM,CAAA;AAAA,4BACtD,eAAA,EAAA,EAAgB,KAAA,EAAM,QAAO,IAAA,EAAK,IAAA,EAAM,iBAAO,IAAA,EAAK,CAAA;AAAA,4BACpD,eAAA,EAAA,EAAgB,KAAA,EAAM,OAAM,IAAA,EAAK,IAAA,EAAM,iBAAO,GAAA,EAAI;AAAA,OAAA,EACrD,CAAA;AAAA,MACC,iCACC,IAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,SAAS,aAAA,EACzB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,SAAA,EAAU,CAAA;AAAA,QACzB,MAAA,CAAO;AAAA,OAAA,EACV;AAAA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ","file":"calendar-toolbar.js","sourcesContent":["import { format } from 'date-fns';\nimport { ChevronLeft, ChevronRight, Plus } from 'lucide-react';\nimport { Button } from './button';\nimport { ToggleGroup, ToggleGroupItem } from './toggle-group';\n\n/** Supported calendar view modes. */\nexport type CalendarView = 'month' | 'week' | 'day';\n\n/** Localizable labels for the calendar toolbar. All have English defaults. */\nexport interface CalendarToolbarLabels {\n  /** Label for the \"Today\" button. */\n  today?: string;\n  /** Label for the \"Month\" view toggle. */\n  month?: string;\n  /** Label for the \"Week\" view toggle. */\n  week?: string;\n  /** Label for the \"Day\" view toggle. */\n  day?: string;\n  /** Label for the \"Create Event\" button. */\n  createEvent?: string;\n}\n\nconst defaultLabels: Required<CalendarToolbarLabels> = {\n  today: 'Today',\n  month: 'Month',\n  week: 'Week',\n  day: 'Day',\n  createEvent: 'Create Event',\n};\n\nexport interface CalendarToolbarProps {\n  /** The date currently being viewed. Used for the title display. */\n  currentDate: Date;\n  /** The active calendar view mode. */\n  view: CalendarView;\n  /** Callback when the user switches between month/week/day views. */\n  onViewChange: (view: CalendarView) => void;\n  /** Navigate to the previous period. */\n  onPrev: () => void;\n  /** Navigate to the next period. */\n  onNext: () => void;\n  /** Navigate to today. */\n  onToday: () => void;\n  /** Optional callback for the \"Create Event\" button. Button is hidden when omitted. */\n  onCreateEvent?: () => void;\n  /** Localizable UI labels with English defaults. */\n  labels?: CalendarToolbarLabels;\n  /** date-fns format string for the title. Defaults to `\"MMMM yyyy\"` or `\"EEEE, MMMM d, yyyy\"` for day view. */\n  titleFormat?: string;\n}\n\n/**\n * Toolbar for calendar views with navigation controls (prev/next/today),\n * view mode toggle (month/week/day), and an optional \"Create Event\" button.\n * Locale-agnostic via the `labels` prop.\n *\n * @example\n * ```tsx\n * <CalendarToolbar\n *   currentDate={currentDate}\n *   view=\"month\"\n *   onViewChange={setView}\n *   onPrev={handlePrev}\n *   onNext={handleNext}\n *   onToday={handleToday}\n *   onCreateEvent={() => setDialogOpen(true)}\n * />\n * ```\n */\nexport function CalendarToolbar({\n  currentDate,\n  view,\n  onViewChange,\n  onPrev,\n  onNext,\n  onToday,\n  onCreateEvent,\n  labels: labelsProp,\n  titleFormat: titleFormatProp,\n}: CalendarToolbarProps) {\n  const labels = { ...defaultLabels, ...labelsProp };\n\n  const titleFormat = titleFormatProp ?? (view === 'day'\n    ? 'EEEE, MMMM d, yyyy'\n    : 'MMMM yyyy');\n\n  return (\n    <div className=\"flex items-center justify-between gap-4 flex-wrap\">\n      <div className=\"flex items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" onClick={onToday}>\n          {labels.today}\n        </Button>\n        <div className=\"flex items-center\">\n          <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\" onClick={onPrev}>\n            <ChevronLeft className=\"w-4 h-4\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" className=\"w-8 h-8\" onClick={onNext}>\n            <ChevronRight className=\"w-4 h-4\" />\n          </Button>\n        </div>\n        <h2 className=\"text-lg font-semibold\">{format(currentDate, titleFormat)}</h2>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <ToggleGroup type=\"single\" value={view} onValueChange={val => val && onViewChange(val as CalendarView)}>\n          <ToggleGroupItem value=\"month\" size=\"sm\">{labels.month}</ToggleGroupItem>\n          <ToggleGroupItem value=\"week\" size=\"sm\">{labels.week}</ToggleGroupItem>\n          <ToggleGroupItem value=\"day\" size=\"sm\">{labels.day}</ToggleGroupItem>\n        </ToggleGroup>\n        {onCreateEvent && (\n          <Button size=\"sm\" onClick={onCreateEvent}>\n            <Plus className=\"w-4 h-4\" />\n            {labels.createEvent}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/components/calendar.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DayPicker } from 'react-day-picker';
+
+/**
+ * Date picker calendar built on `react-day-picker` v9. Supports single, multiple,
+ * and range selection modes. Styled with Shadcn UI conventions.
+ *
+ * @param showOutsideDays - Whether to show days from adjacent months. Defaults to `true`.
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = useState<Date | undefined>();
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * ```
+ */
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: React.ComponentProps<typeof DayPicker>): react_jsx_runtime.JSX.Element;
+
+export { Calendar };

package/dist/components/calendar.js

@@ -0,0 +1,5 @@
+export { Calendar } from '../chunk-QB3UWRZH.js';
+import '../chunk-55E7D2HR.js';
+import '../chunk-DGPY4WP3.js';
+//# sourceMappingURL=calendar.js.map
+//# sourceMappingURL=calendar.js.map

package/dist/components/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"calendar.js"}

package/dist/components/card.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * Styled card container with header, title, description, action, content, and footer sub-components.
+ *
+ * Uses density tokens (`px-card`, `pt-card`, `pb-card`, `gap-card`) for consistent
+ * internal spacing that adapts to the design system.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Notifications</CardTitle>
+ *     <CardDescription>You have 3 unread messages.</CardDescription>
+ *     <CardAction>
+ *       <Button variant="outline">Mark all read</Button>
+ *     </CardAction>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Your recent activity will appear here.</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>View all</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card header section. Lays out title, description, and optional action in a grid. */
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card title rendered as an `<h4>` element. */
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card description text displayed in muted foreground color. */
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card action slot positioned at the top-right of `CardHeader`. Place buttons or menus here. */
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card content area with horizontal padding. Bottom padding applied when last child. */
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Card footer with horizontal layout. Typically used for action buttons. */
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/components/card.js

@@ -0,0 +1,4 @@
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../chunk-Z2QAABLM.js';
+import '../chunk-DGPY4WP3.js';
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"card.js"}

package/dist/components/carousel.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../lib/types.js';
+
+type CarouselApi = ReturnType<typeof useEmblaCarousel>[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    /** Embla Carousel options (e.g., `{ loop: true, align: "start" }`). */
+    opts?: CarouselOptions;
+    /** Embla Carousel plugins (e.g., Autoplay, ClassNames). */
+    plugins?: CarouselPlugin;
+    /** Scroll axis direction. Defaults to `"horizontal"`. */
+    orientation?: "horizontal" | "vertical";
+    /** Callback to receive the Embla API instance for external control. */
+    setApi?: (api: CarouselApi) => void;
+};
+/**
+ * Carousel/slider component powered by Embla Carousel.
+ *
+ * Provides a context for child components (`CarouselContent`, `CarouselItem`,
+ * `CarouselPrevious`, `CarouselNext`). Supports horizontal/vertical orientation,
+ * keyboard navigation (arrow keys), and plugin extensibility.
+ *
+ * @example
+ * ```tsx
+ * <Carousel opts={{ loop: true }}>
+ *   <CarouselContent>
+ *     <CarouselItem>Slide 1</CarouselItem>
+ *     <CarouselItem>Slide 2</CarouselItem>
+ *     <CarouselItem>Slide 3</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />
+ *   <CarouselNext />
+ * </Carousel>
+ * ```
+ */
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): react_jsx_runtime.JSX.Element;
+/** Scrollable container for `CarouselItem` elements. Manages the overflow viewport. */
+declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Individual slide within the carousel. Defaults to full-width (`basis-full`). */
+declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/** Navigation button to scroll to the previous slide. Automatically disabled when at the beginning. */
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+/** Navigation button to scroll to the next slide. Automatically disabled when at the end. */
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };

package/dist/components/carousel.js

@@ -0,0 +1,5 @@
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '../chunk-2TUWDXAC.js';
+import '../chunk-55E7D2HR.js';
+import '../chunk-DGPY4WP3.js';
+//# sourceMappingURL=carousel.js.map
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"carousel.js"}

package/dist/components/chart.d.ts

@@ -0,0 +1,125 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+/**
+ * Configuration object for chart data series. Each key maps to a data series
+ * and defines its label, optional icon, and color (either a single color or
+ * per-theme colors).
+ *
+ * @example
+ * ```tsx
+ * const config: ChartConfig = {
+ *   revenue: { label: "Revenue", color: "var(--color-blue-500)" },
+ *   expenses: { label: "Expenses", theme: { light: "#ef4444", dark: "#f87171" } },
+ * };
+ * ```
+ */
+type ChartConfig = {
+    [k in string]: {
+        /** Display label for this data series. */
+        label?: React.ReactNode;
+        /** Optional icon component displayed in the legend. */
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never; /** Per-theme color mapping (light/dark). */
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+/**
+ * Wrapper that provides chart configuration context, injects theme-aware CSS
+ * custom properties for data series colors, and renders a Recharts
+ * `ResponsiveContainer`.
+ *
+ * @param config - Chart configuration mapping data keys to labels, icons, and colors.
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer config={{ revenue: { label: "Revenue", color: "#3b82f6" } }}>
+ *   <BarChart data={data}>
+ *     <Bar dataKey="revenue" fill="var(--color-revenue)" />
+ *   </BarChart>
+ * </ChartContainer>
+ * ```
+ */
+declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+    /** Chart configuration mapping data keys to labels, icons, and colors. */
+    config: ChartConfig;
+    /** Recharts chart element (e.g. BarChart, LineChart). */
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}): react_jsx_runtime.JSX.Element;
+/** Injects a `<style>` tag with CSS custom properties for chart colors, scoped to the chart container. */
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => react_jsx_runtime.JSX.Element | null;
+/** Re-export of Recharts Tooltip for use with ChartTooltipContent. */
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+/**
+ * Styled tooltip content for use inside `<ChartTooltip content={<ChartTooltipContent />} />`.
+ * Renders data series with color indicators, labels from ChartConfig, and formatted values.
+ *
+ * @param indicator - Shape of the color indicator: `"dot"`, `"line"`, or `"dashed"`.
+ * @param hideLabel - Whether to hide the tooltip header label.
+ * @param hideIndicator - Whether to hide the color indicator.
+ * @param nameKey - Data key to resolve series name from the payload.
+ * @param labelKey - Data key to resolve the tooltip header label from config.
+ */
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<"div"> & {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: string | number;
+        dataKey?: string;
+        color?: string;
+        fill?: string;
+        payload?: Record<string, unknown>;
+        [key: string]: unknown;
+    }>;
+    label?: string;
+    labelClassName?: string;
+    labelFormatter?: (label: unknown, payload: Array<Record<string, unknown>>) => React.ReactNode;
+    formatter?: (value: unknown, name: string, item: Record<string, unknown>, index: number, payload: unknown) => React.ReactNode;
+    color?: string;
+    /** Whether to hide the tooltip header label. */
+    hideLabel?: boolean;
+    /** Whether to hide the color indicator next to each series. */
+    hideIndicator?: boolean;
+    /** Shape of the color indicator. Defaults to `"dot"`. */
+    indicator?: "line" | "dot" | "dashed";
+    /** Data key used to resolve the series name from payload. */
+    nameKey?: string;
+    /** Data key used to resolve the header label from config. */
+    labelKey?: string;
+}): react_jsx_runtime.JSX.Element | null;
+/** Re-export of Recharts Legend for use with ChartLegendContent. */
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+/**
+ * Styled legend content for use inside `<ChartLegend content={<ChartLegendContent />} />`.
+ * Renders a horizontal list of series labels with color indicators or custom icons from ChartConfig.
+ *
+ * @param hideIcon - Whether to hide the color dot / custom icon.
+ * @param nameKey - Data key to resolve the series name from payload.
+ */
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    payload?: Array<{
+        value?: string;
+        dataKey?: string;
+        color?: string;
+        [key: string]: unknown;
+    }>;
+    verticalAlign?: "top" | "bottom" | "middle";
+    /** Whether to hide the color indicator or custom icon. */
+    hideIcon?: boolean;
+    /** Data key used to resolve the series name from payload. */
+    nameKey?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };

package/dist/components/chart.js

@@ -0,0 +1,239 @@
+import { cn } from '../chunk-DGPY4WP3.js';
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var THEMES = { light: "", dark: ".dark" };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { children })
+      ]
+    }
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config2]) => config2.theme || config2.color
+  );
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            const color = itemConfig.theme?.[theme] || itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey
+  ]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload?.fill || item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                itemConfig?.icon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                      {
+                        "h-2.5 w-2.5": indicator === "dot",
+                        "w-1": indicator === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                        "my-0.5": nestLabel && indicator === "dashed"
+                      }
+                    ),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
+                      ] }),
+                      item.value && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString() })
+                    ]
+                  }
+                )
+              ] })
+            },
+            item.dataKey
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      ),
+      children: payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            ),
+            children: [
+              itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: item.color
+                  }
+                }
+              ),
+              itemConfig?.label
+            ]
+          },
+          item.value
+        );
+      })
+    }
+  );
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/chart.tsx"],"names":["config"],"mappings":"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","file":"chart.js","sourcesContent":["import * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\n\nimport { cn } from \"../lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\n/**\n * Configuration object for chart data series. Each key maps to a data series\n * and defines its label, optional icon, and color (either a single color or\n * per-theme colors).\n *\n * @example\n * ```tsx\n * const config: ChartConfig = {\n *   revenue: { label: \"Revenue\", color: \"var(--color-blue-500)\" },\n *   expenses: { label: \"Expenses\", theme: { light: \"#ef4444\", dark: \"#f87171\" } },\n * };\n * ```\n */\nexport type ChartConfig = {\n  [k in string]: {\n    /** Display label for this data series. */\n    label?: React.ReactNode;\n    /** Optional icon component displayed in the legend. */\n    icon?: React.ComponentType;\n  } & (\n    | { /** Single color used across all themes. */ color?: string; theme?: never }\n    | { color?: never; /** Per-theme color mapping (light/dark). */ theme: Record<keyof typeof THEMES, string> }\n  );\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\n/**\n * Hook to access the chart configuration from the nearest ChartContainer.\n * Must be used within a {@link ChartContainer}.\n *\n * @throws If used outside of a ChartContainer.\n */\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\");\n  }\n\n  return context;\n}\n\n/**\n * Wrapper that provides chart configuration context, injects theme-aware CSS\n * custom properties for data series colors, and renders a Recharts\n * `ResponsiveContainer`.\n *\n * @param config - Chart configuration mapping data keys to labels, icons, and colors.\n *\n * @example\n * ```tsx\n * <ChartContainer config={{ revenue: { label: \"Revenue\", color: \"#3b82f6\" } }}>\n *   <BarChart data={data}>\n *     <Bar dataKey=\"revenue\" fill=\"var(--color-revenue)\" />\n *   </BarChart>\n * </ChartContainer>\n * ```\n */\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Chart configuration mapping data keys to labels, icons, and colors. */\n  config: ChartConfig;\n  /** Recharts chart element (e.g. BarChart, LineChart). */\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"];\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\n/** Injects a `<style>` tag with CSS custom properties for chart colors, scoped to the chart container. */\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color,\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join(\"\\n\")}\n}\n`,\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  );\n};\n\n/** Re-export of Recharts Tooltip for use with ChartTooltipContent. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Styled tooltip content for use inside `<ChartTooltip content={<ChartTooltipContent />} />`.\n * Renders data series with color indicators, labels from ChartConfig, and formatted values.\n *\n * @param indicator - Shape of the color indicator: `\"dot\"`, `\"line\"`, or `\"dashed\"`.\n * @param hideLabel - Whether to hide the tooltip header label.\n * @param hideIndicator - Whether to hide the color indicator.\n * @param nameKey - Data key to resolve series name from the payload.\n * @param labelKey - Data key to resolve the tooltip header label from config.\n */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<\"div\"> & {\n    active?: boolean;\n    payload?: Array<{\n      name?: string;\n      value?: string | number;\n      dataKey?: string;\n      color?: string;\n      fill?: string;\n      payload?: Record<string, unknown>;\n      [key: string]: unknown;\n    }>;\n    label?: string;\n    labelClassName?: string;\n    labelFormatter?: (label: unknown, payload: Array<Record<string, unknown>>) => React.ReactNode;\n    formatter?: (value: unknown, name: string, item: Record<string, unknown>, index: number, payload: unknown) => React.ReactNode;\n    color?: string;\n    /** Whether to hide the tooltip header label. */\n    hideLabel?: boolean;\n    /** Whether to hide the color indicator next to each series. */\n    hideIndicator?: boolean;\n    /** Shape of the color indicator. Defaults to `\"dot\"`. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Data key used to resolve the series name from payload. */\n    nameKey?: string;\n    /** Data key used to resolve the header label from config. */\n    labelKey?: string;\n  }) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || (item.payload?.fill as string) || item.color;\n\n          return (\n            <div\n              key={item.dataKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\",\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                formatter(item.value, item.name, item, index, item.payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\n                          \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                          {\n                            \"h-2.5 w-2.5\": indicator === \"dot\",\n                            \"w-1\": indicator === \"line\",\n                            \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                              indicator === \"dashed\",\n                            \"my-0.5\": nestLabel && indicator === \"dashed\",\n                          },\n                        )}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor,\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\n                      \"flex flex-1 justify-between leading-none\",\n                      nestLabel ? \"items-end\" : \"items-center\",\n                    )}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">\n                        {itemConfig?.label || item.name}\n                      </span>\n                    </div>\n                    {item.value && (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString()}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/** Re-export of Recharts Legend for use with ChartLegendContent. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\n/**\n * Styled legend content for use inside `<ChartLegend content={<ChartLegendContent />} />`.\n * Renders a horizontal list of series labels with color indicators or custom icons from ChartConfig.\n *\n * @param hideIcon - Whether to hide the color dot / custom icon.\n * @param nameKey - Data key to resolve the series name from payload.\n */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> & {\n    payload?: Array<{\n      value?: string;\n      dataKey?: string;\n      color?: string;\n      [key: string]: unknown;\n    }>;\n    verticalAlign?: \"top\" | \"bottom\" | \"middle\";\n    /** Whether to hide the color indicator or custom icon. */\n    hideIcon?: boolean;\n    /** Data key used to resolve the series name from payload. */\n    nameKey?: string;\n  }) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className,\n      )}\n    >\n      {payload.map((item) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n        return (\n          <div\n            key={item.value}\n            className={cn(\n              \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\",\n            )}\n          >\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color,\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string,\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};"]}