@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/carousel.mjs

@@ -0,0 +1,217 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+const CarouselContext = createContext({
+  current: 0,
+  total: 0,
+  prev: () => {
+  },
+  next: () => {
+  },
+  goTo: () => {
+  },
+  direction: "right",
+  orientation: "horizontal"
+});
+function useCarouselContext() {
+  return useContext(CarouselContext);
+}
+function ChevronLeftIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+    }
+  );
+}
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+const Carousel = forwardRef(
+  function Carousel2({
+    items,
+    defaultIndex = 0,
+    index: controlledIndex,
+    onIndexChange,
+    orientation = "horizontal",
+    autoplay = false,
+    autoplayInterval = 3e3,
+    loop = true,
+    showArrows = true,
+    showDots = true,
+    className,
+    itemClassName
+  }, ref) {
+    const shouldReduce = useReducedMotion();
+    const [internalIndex, setInternalIndex] = useState(defaultIndex);
+    const [direction, setDirection] = useState("right");
+    const autoplayRef = useRef(null);
+    const current = controlledIndex !== void 0 ? controlledIndex : internalIndex;
+    const total = items.length;
+    const goTo = useCallback(
+      (i, dir) => {
+        const next2 = loop ? (i % total + total) % total : Math.max(0, Math.min(total - 1, i));
+        const resolvedDir = dir ?? (next2 > current ? "right" : "left");
+        setDirection(resolvedDir);
+        if (controlledIndex === void 0) setInternalIndex(next2);
+        onIndexChange?.(next2);
+      },
+      [current, total, loop, controlledIndex, onIndexChange]
+    );
+    const prev = useCallback(() => goTo(current - 1, "left"), [current, goTo]);
+    const next = useCallback(() => goTo(current + 1, "right"), [current, goTo]);
+    useEffect(() => {
+      if (!autoplay) return;
+      autoplayRef.current = setInterval(next, autoplayInterval);
+      return () => {
+        if (autoplayRef.current) clearInterval(autoplayRef.current);
+      };
+    }, [autoplay, autoplayInterval, next]);
+    const isHorizontal = orientation === "horizontal";
+    const slideVariants = {
+      initial: shouldReduce ? { opacity: 0 } : {
+        opacity: 0,
+        x: isHorizontal ? direction === "right" ? "100%" : "-100%" : 0,
+        y: !isHorizontal ? direction === "right" ? "100%" : "-100%" : 0
+      },
+      animate: { opacity: 1, x: 0, y: 0 },
+      exit: shouldReduce ? { opacity: 0 } : {
+        opacity: 0,
+        x: isHorizontal ? direction === "right" ? "-100%" : "100%" : 0,
+        y: !isHorizontal ? direction === "right" ? "-100%" : "100%" : 0
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: { current, total, prev, next, goTo, direction, orientation },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            className: cn("relative overflow-hidden rounded-lg", className),
+            "data-ds": "",
+            "data-ds-component": "carousel",
+            "data-ds-orientation": orientation,
+            role: "region",
+            "aria-roledescription": "carousel",
+            "aria-label": "Content carousel",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, custom: direction, children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  className: cn("w-full", itemClassName),
+                  variants: slideVariants,
+                  initial: "initial",
+                  animate: "animate",
+                  exit: "exit",
+                  transition: { duration: 0.35, ease: [0.4, 0, 0.2, 1] },
+                  "aria-roledescription": "slide",
+                  "aria-label": `Slide ${current + 1} of ${total}`,
+                  "data-ds-animated": "",
+                  children: items[current]
+                },
+                current
+              ) }) }),
+              showArrows && total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: prev,
+                    disabled: !loop && current === 0,
+                    className: cn(
+                      "absolute left-3 top-1/2 -translate-y-1/2 z-10",
+                      "inline-flex items-center justify-center size-9 rounded-full",
+                      "bg-background/90 border border-border shadow-sm",
+                      "text-foreground hover:bg-background",
+                      "transition-colors duration-fast",
+                      "disabled:opacity-30 disabled:pointer-events-none",
+                      focusRingClasses
+                    ),
+                    "aria-label": "Previous slide",
+                    children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: next,
+                    disabled: !loop && current === total - 1,
+                    className: cn(
+                      "absolute right-3 top-1/2 -translate-y-1/2 z-10",
+                      "inline-flex items-center justify-center size-9 rounded-full",
+                      "bg-background/90 border border-border shadow-sm",
+                      "text-foreground hover:bg-background",
+                      "transition-colors duration-fast",
+                      "disabled:opacity-30 disabled:pointer-events-none",
+                      focusRingClasses
+                    ),
+                    "aria-label": "Next slide",
+                    children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+                  }
+                )
+              ] }),
+              showDots && total > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-0 right-0 flex justify-center gap-1.5 z-10", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => goTo(i),
+                  "aria-label": `Go to slide ${i + 1}`,
+                  "aria-current": i === current ? "true" : void 0,
+                  className: cn(
+                    "rounded-full transition-all duration-fast",
+                    "bg-background/80 hover:bg-background",
+                    i === current ? "w-4 h-2" : "size-2 opacity-60 hover:opacity-100",
+                    focusRingClasses
+                  )
+                },
+                `slide-${i}`
+              )) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+export {
+  Carousel,
+  useCarouselContext
+};

package/dist/components/chart.cjs

@@ -0,0 +1,122 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var chart_exports = {};
+__export(chart_exports, {
+  ChartContainer: () => ChartContainer,
+  ChartTooltipContent: () => ChartTooltipContent,
+  chartColors: () => chartColors
+});
+module.exports = __toCommonJS(chart_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_react = require("react");
+const chartColors = [
+  "var(--primary)",
+  "var(--info)",
+  "var(--success)",
+  "var(--warning)",
+  "var(--danger)",
+  "var(--secondary)",
+  "var(--muted-foreground)",
+  "oklch(0.65 0.15 250)",
+  // sky
+  "oklch(0.65 0.15 160)",
+  // emerald
+  "oklch(0.65 0.15 30)"
+  // amber
+];
+const ChartContainer = (0, import_react.forwardRef)(
+  function ChartContainer2({
+    title,
+    description,
+    height = 350,
+    children,
+    footer,
+    loading = false,
+    loadingIndicator,
+    emptyContent,
+    className
+  }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "rounded-lg border border-border bg-background p-4",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "chart",
+        children: [
+          (title || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 space-y-1", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-base font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative", style: { height }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: loadingIndicator ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "size-6 animate-spin rounded-full border-2 border-border border-t-primary" }) }) : emptyContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", children: emptyContent }) : children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 border-t border-border pt-3 text-sm text-muted-foreground", children: footer })
+        ]
+      }
+    );
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+function ChartTooltipContent({
+  label,
+  payload,
+  active,
+  formatter,
+  className
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "rounded-lg border border-border bg-background px-3 py-2 shadow-lg",
+        "text-sm",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium text-foreground mb-1", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-0.5", children: payload.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: "size-2.5 rounded-full shrink-0",
+              style: { backgroundColor: entry.color ?? entry.fill }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-muted-foreground", children: [
+            entry.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium text-foreground ml-auto tabular-nums", children: formatter ? formatter(entry.value, entry.name) : entry.value })
+        ] }, entry.name)) })
+      ]
+    }
+  );
+}
+ChartTooltipContent.displayName = "ChartTooltipContent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChartContainer,
+  ChartTooltipContent,
+  chartColors
+});

package/dist/components/chart.d.cts

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChartContainerProps {
+    /** Chart title. */
+    title?: string;
+    /** Chart description/subtitle. */
+    description?: string;
+    /** Chart height in pixels. @default 350 */
+    height?: number;
+    /** The Recharts chart component(s) to render. */
+    children: ReactNode;
+    /** Footer content (e.g., legend, notes). */
+    footer?: ReactNode;
+    /** Whether data is loading. @default false */
+    loading?: boolean;
+    /** Custom loading indicator. */
+    loadingIndicator?: ReactNode;
+    /** Content to show when chart has no data. */
+    emptyContent?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Design system chart colors. Use these as `fill` or `stroke` values
+ * in Recharts components for consistent theming.
+ *
+ * @example
+ * ```tsx
+ * <Bar dataKey="revenue" fill={chartColors[0]} />
+ * <Bar dataKey="expenses" fill={chartColors[1]} />
+ * ```
+ */
+declare const chartColors: readonly ["var(--primary)", "var(--info)", "var(--success)", "var(--warning)", "var(--danger)", "var(--secondary)", "var(--muted-foreground)", "oklch(0.65 0.15 250)", "oklch(0.65 0.15 160)", "oklch(0.65 0.15 30)"];
+/**
+ * `ChartContainer` — a card wrapper for Recharts charts with DS styling.
+ *
+ * Place your Recharts `<BarChart>`, `<LineChart>`, `<PieChart>`, etc.
+ * as children. The container provides a responsive wrapper, title, and
+ * optional footer.
+ *
+ * **Important**: This component does NOT bundle Recharts. You must install
+ * `recharts` separately as a peer dependency.
+ *
+ * @example
+ * ```tsx
+ * import { ChartContainer, chartColors } from "@work-rjkashyap/unified-ui/components";
+ * import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
+ *
+ * <ChartContainer title="Monthly Revenue" description="Last 6 months">
+ *   <ResponsiveContainer width="100%" height="100%">
+ *     <BarChart data={data}>
+ *       <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} />
+ *       <YAxis stroke="var(--muted-foreground)" fontSize={12} />
+ *       <Tooltip
+ *         contentStyle={{
+ *           background: "var(--background)",
+ *           border: "1px solid var(--border)",
+ *           borderRadius: "var(--radius-md)",
+ *           fontSize: 13,
+ *         }}
+ *       />
+ *       <Bar dataKey="revenue" fill={chartColors[0]} radius={[4, 4, 0, 0]} />
+ *     </BarChart>
+ *   </ResponsiveContainer>
+ * </ChartContainer>
+ * ```
+ */
+declare const ChartContainer: react.ForwardRefExoticComponent<ChartContainerProps & react.RefAttributes<HTMLDivElement>>;
+interface ChartTooltipContentProps {
+    /** Label for the tooltip header. */
+    label?: string;
+    /** Payload from Recharts tooltip. */
+    payload?: Array<{
+        name: string;
+        value: number | string;
+        color?: string;
+        fill?: string;
+    }>;
+    /** Whether the tooltip is active. */
+    active?: boolean;
+    /** Custom formatter for values. */
+    formatter?: (value: number | string, name: string) => string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * `ChartTooltipContent` — a pre-styled tooltip content component for Recharts.
+ *
+ * Use as the `content` prop of Recharts' `<Tooltip>`:
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content={<ChartTooltipContent />} />
+ * ```
+ */
+declare function ChartTooltipContent({ label, payload, active, formatter, className, }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ChartTooltipContent {
+    var displayName: string;
+}
+
+export { ChartContainer, type ChartContainerProps, ChartTooltipContent, type ChartTooltipContentProps, chartColors };

package/dist/components/chart.d.ts

@@ -0,0 +1,103 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChartContainerProps {
+    /** Chart title. */
+    title?: string;
+    /** Chart description/subtitle. */
+    description?: string;
+    /** Chart height in pixels. @default 350 */
+    height?: number;
+    /** The Recharts chart component(s) to render. */
+    children: ReactNode;
+    /** Footer content (e.g., legend, notes). */
+    footer?: ReactNode;
+    /** Whether data is loading. @default false */
+    loading?: boolean;
+    /** Custom loading indicator. */
+    loadingIndicator?: ReactNode;
+    /** Content to show when chart has no data. */
+    emptyContent?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Design system chart colors. Use these as `fill` or `stroke` values
+ * in Recharts components for consistent theming.
+ *
+ * @example
+ * ```tsx
+ * <Bar dataKey="revenue" fill={chartColors[0]} />
+ * <Bar dataKey="expenses" fill={chartColors[1]} />
+ * ```
+ */
+declare const chartColors: readonly ["var(--primary)", "var(--info)", "var(--success)", "var(--warning)", "var(--danger)", "var(--secondary)", "var(--muted-foreground)", "oklch(0.65 0.15 250)", "oklch(0.65 0.15 160)", "oklch(0.65 0.15 30)"];
+/**
+ * `ChartContainer` — a card wrapper for Recharts charts with DS styling.
+ *
+ * Place your Recharts `<BarChart>`, `<LineChart>`, `<PieChart>`, etc.
+ * as children. The container provides a responsive wrapper, title, and
+ * optional footer.
+ *
+ * **Important**: This component does NOT bundle Recharts. You must install
+ * `recharts` separately as a peer dependency.
+ *
+ * @example
+ * ```tsx
+ * import { ChartContainer, chartColors } from "@work-rjkashyap/unified-ui/components";
+ * import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";
+ *
+ * <ChartContainer title="Monthly Revenue" description="Last 6 months">
+ *   <ResponsiveContainer width="100%" height="100%">
+ *     <BarChart data={data}>
+ *       <XAxis dataKey="month" stroke="var(--muted-foreground)" fontSize={12} />
+ *       <YAxis stroke="var(--muted-foreground)" fontSize={12} />
+ *       <Tooltip
+ *         contentStyle={{
+ *           background: "var(--background)",
+ *           border: "1px solid var(--border)",
+ *           borderRadius: "var(--radius-md)",
+ *           fontSize: 13,
+ *         }}
+ *       />
+ *       <Bar dataKey="revenue" fill={chartColors[0]} radius={[4, 4, 0, 0]} />
+ *     </BarChart>
+ *   </ResponsiveContainer>
+ * </ChartContainer>
+ * ```
+ */
+declare const ChartContainer: react.ForwardRefExoticComponent<ChartContainerProps & react.RefAttributes<HTMLDivElement>>;
+interface ChartTooltipContentProps {
+    /** Label for the tooltip header. */
+    label?: string;
+    /** Payload from Recharts tooltip. */
+    payload?: Array<{
+        name: string;
+        value: number | string;
+        color?: string;
+        fill?: string;
+    }>;
+    /** Whether the tooltip is active. */
+    active?: boolean;
+    /** Custom formatter for values. */
+    formatter?: (value: number | string, name: string) => string;
+    /** Additional class names. */
+    className?: string;
+}
+/**
+ * `ChartTooltipContent` — a pre-styled tooltip content component for Recharts.
+ *
+ * Use as the `content` prop of Recharts' `<Tooltip>`:
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content={<ChartTooltipContent />} />
+ * ```
+ */
+declare function ChartTooltipContent({ label, payload, active, formatter, className, }: ChartTooltipContentProps): react_jsx_runtime.JSX.Element | null;
+declare namespace ChartTooltipContent {
+    var displayName: string;
+}
+
+export { ChartContainer, type ChartContainerProps, ChartTooltipContent, type ChartTooltipContentProps, chartColors };

package/dist/components/chart.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { forwardRef } from "react";
+const chartColors = [
+  "var(--primary)",
+  "var(--info)",
+  "var(--success)",
+  "var(--warning)",
+  "var(--danger)",
+  "var(--secondary)",
+  "var(--muted-foreground)",
+  "oklch(0.65 0.15 250)",
+  // sky
+  "oklch(0.65 0.15 160)",
+  // emerald
+  "oklch(0.65 0.15 30)"
+  // amber
+];
+const ChartContainer = forwardRef(
+  function ChartContainer2({
+    title,
+    description,
+    height = 350,
+    children,
+    footer,
+    loading = false,
+    loadingIndicator,
+    emptyContent,
+    className
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-border bg-background p-4",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "chart",
+        children: [
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-1", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "relative", style: { height }, children: loading ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: loadingIndicator ?? /* @__PURE__ */ jsx("div", { className: "size-6 animate-spin rounded-full border-2 border-border border-t-primary" }) }) : emptyContent ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", children: emptyContent }) : children }),
+          footer && /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-border pt-3 text-sm text-muted-foreground", children: footer })
+        ]
+      }
+    );
+  }
+);
+ChartContainer.displayName = "ChartContainer";
+function ChartTooltipContent({
+  label,
+  payload,
+  active,
+  formatter,
+  className
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-background px-3 py-2 shadow-lg",
+        "text-sm",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx("p", { className: "font-medium text-foreground mb-1", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: payload.map((entry) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "size-2.5 rounded-full shrink-0",
+              style: { backgroundColor: entry.color ?? entry.fill }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            entry.name,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground ml-auto tabular-nums", children: formatter ? formatter(entry.value, entry.name) : entry.value })
+        ] }, entry.name)) })
+      ]
+    }
+  );
+}
+ChartTooltipContent.displayName = "ChartTooltipContent";
+export {
+  ChartContainer,
+  ChartTooltipContent,
+  chartColors
+};