@oneplatformdev/ui 0.0.1-beta.11

package/ButtonIcon/buttonIconVariants.mjs

@@ -0,0 +1,139 @@
+import { cva as r } from "class-variance-authority";
+const e = r(
+  "aspect-square inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        contained: "border shadow",
+        outlined: "border bg-transparent hover:shadow-sm",
+        ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline bg-transparent hover:bg-transparent"
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        error: "",
+        success: "",
+        disabled: "contrast-50"
+      },
+      size: {
+        sm: "w-8 h-8 rounded-sm text-xs [&_svg]:size-4",
+        md: "w-9 h-9 px-4 rounded-md [&_svg]:size-5",
+        lg: "w-10 h-10 rounded-md [&_svg]:size-6",
+        icon: "h-9 w-9 [&_svg]:size-5 rounded-sm"
+      },
+      disabled: {
+        true: "cursor-not-allowed contrast-50",
+        false: "cursor-pointer"
+      },
+      rounded: {
+        true: "rounded-full",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // contained
+      {
+        variant: "contained",
+        color: "primary",
+        disabled: !1,
+        className: "bg-typography-primary border-typography-primary text-white dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
+      },
+      {
+        variant: "contained",
+        color: "secondary",
+        disabled: !1,
+        className: "bg-gray-2 border-gray-2 text-typography-primary dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary"
+      },
+      {
+        variant: "contained",
+        color: "error",
+        disabled: !1,
+        className: "bg-typography-error/90 border-typography-error/90 text-white dark:bg-typography-error/80 dark:border-typography-error/80 dark:text-typography-primary"
+      },
+      {
+        variant: "contained",
+        color: "success",
+        disabled: !1,
+        className: "bg-typography-success/90 border-typography-success/90 text-white dark:bg-typography-success/80 dark:border-typography-success/80 dark:text-typography-primary"
+      },
+      // outlined
+      {
+        variant: "outlined",
+        color: "primary",
+        disabled: !1,
+        className: "border-typography-primary text-typography-primary hover:bg-typography-primary/15"
+      },
+      {
+        variant: "outlined",
+        color: "secondary",
+        disabled: !1,
+        className: "border-border text-typography-secondary hover:bg-border-border/15"
+      },
+      {
+        variant: "outlined",
+        color: "error",
+        disabled: !1,
+        className: "border-typography-error text-typography-error hover:bg-typography-error/15"
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        disabled: !1,
+        className: "border-typography-success text-typography-success hover:bg-typography-success/15"
+      },
+      // link - ghost
+      {
+        variant: ["link", "ghost"],
+        color: "primary",
+        className: "text-typography-primary"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "secondary",
+        className: "text-typography-secondary"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "success",
+        className: "text-typography-success"
+      },
+      {
+        variant: ["link", "ghost"],
+        color: "error",
+        className: "text-typography-error"
+      },
+      // ghost
+      {
+        variant: "ghost",
+        color: "primary",
+        className: "hover:bg-typography-primary/15"
+      },
+      {
+        variant: "ghost",
+        color: "secondary",
+        className: "hover:bg-typography-secondary/15"
+      },
+      {
+        variant: "ghost",
+        color: "success",
+        className: "hover:bg-typography-success/15"
+      },
+      {
+        variant: "ghost",
+        color: "error",
+        className: "hover:bg-typography-error/15"
+      }
+    ],
+    defaultVariants: {
+      variant: "contained",
+      size: "md",
+      color: "primary",
+      disabled: !1,
+      rounded: !1
+    }
+  }
+);
+export {
+  e as buttonIconVariants
+};

package/ButtonIcon/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonIcon as default, ButtonIcon } from './ButtonIcon';
+export * from './buttonIconVariants';
+export type * from './ButtonIcon.types';

package/ButtonIcon/index.mjs

@@ -0,0 +1,7 @@
+import { ButtonIcon as n, ButtonIcon as r } from "./ButtonIcon.mjs";
+import { buttonIconVariants as u } from "./buttonIconVariants.mjs";
+export {
+  n as ButtonIcon,
+  u as buttonIconVariants,
+  r as default
+};

package/ButtonIcon/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Calendar/Calendar.d.ts

@@ -0,0 +1,8 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from "react";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/Calendar/Calendar.mjs

@@ -0,0 +1,63 @@
+import { jsx as r } from "react/jsx-runtime";
+import { ChevronLeft as i, ChevronRight as l } from "lucide-react";
+import { DayPicker as m } from "react-day-picker";
+import { cn as e } from "@oneplatformdev/utils";
+import "../Button/Button.mjs";
+import { buttonVariants as o } from "../Button/buttonVariants.mjs";
+function u({
+  className: n,
+  classNames: s,
+  showOutsideDays: c = !0,
+  ...d
+}) {
+  return /* @__PURE__ */ r(
+    m,
+    {
+      showOutsideDays: c,
+      className: e("p-3", n),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: e(
+          o({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: e(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          d.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: e(
+          o({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...s
+      },
+      components: {
+        IconLeft: ({ className: a, ...t }) => /* @__PURE__ */ r(i, { className: e("h-4 w-4", a), ...t }),
+        IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(l, { className: e("h-4 w-4", a), ...t })
+      },
+      ...d
+    }
+  );
+}
+u.displayName = "Calendar";
+export {
+  u as Calendar
+};

package/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from './Calendar';

package/Calendar/index.mjs

@@ -0,0 +1,4 @@
+import { Calendar as e } from "./Calendar.mjs";
+export {
+  e as Calendar
+};

package/Calendar/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/Card/Card.mjs

@@ -0,0 +1,61 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as t } from "@oneplatformdev/utils";
+const s = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      a
+    ),
+    ...e
+  }
+));
+s.displayName = "Card";
+const i = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t("flex flex-col space-y-1.5 p-6", a),
+    ...e
+  }
+));
+i.displayName = "CardHeader";
+const c = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t("font-semibold leading-none tracking-tight", a),
+    ...e
+  }
+));
+c.displayName = "CardTitle";
+const m = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t("text-sm text-muted-foreground", a),
+    ...e
+  }
+));
+m.displayName = "CardDescription";
+const n = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d("div", { ref: r, className: t("p-6 pt-0", a), ...e }));
+n.displayName = "CardContent";
+const f = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ d(
+  "div",
+  {
+    ref: r,
+    className: t("flex items-center p-6 pt-0", a),
+    ...e
+  }
+));
+f.displayName = "CardFooter";
+export {
+  s as Card,
+  n as CardContent,
+  m as CardDescription,
+  f as CardFooter,
+  i as CardHeader,
+  c as CardTitle
+};

package/Card/index.d.ts

@@ -0,0 +1 @@
+export * from './Card';

package/Card/index.mjs

@@ -0,0 +1,9 @@
+import { Card as d, CardContent as e, CardDescription as C, CardFooter as o, CardHeader as t, CardTitle as i } from "./Card.mjs";
+export {
+  d as Card,
+  e as CardContent,
+  C as CardDescription,
+  o as CardFooter,
+  t as CardHeader,
+  i as CardTitle
+};

package/Card/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Carousel/Carousel.d.ts

@@ -0,0 +1,18 @@
+import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
+import * as React from "react";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import('../Button').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import('../Button').ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/Carousel/Carousel.mjs

@@ -0,0 +1,168 @@
+import { jsx as s, jsxs as x } from "react/jsx-runtime";
+import * as r from "react";
+import k from "embla-carousel-react";
+import { ArrowLeft as z, ArrowRight as g } from "lucide-react";
+import { cn as m } from "@oneplatformdev/utils";
+import { Button as w } from "../Button/Button.mjs";
+import "../Button/buttonVariants.mjs";
+const v = r.createContext(null);
+function C() {
+  const o = r.useContext(v);
+  if (!o)
+    throw new Error("useCarousel must be used within a <Carousel />");
+  return o;
+}
+const D = r.forwardRef(
+  ({
+    orientation: o = "horizontal",
+    opts: l,
+    setApi: t,
+    plugins: a,
+    className: c,
+    children: i,
+    ...u
+  }, f) => {
+    const [y, e] = k(
+      {
+        ...l,
+        axis: o === "horizontal" ? "x" : "y"
+      },
+      a
+    ), [b, p] = r.useState(!1), [P, S] = r.useState(!1), d = r.useCallback((n) => {
+      n && (p(n.canScrollPrev()), S(n.canScrollNext()));
+    }, []), h = r.useCallback(() => {
+      e == null || e.scrollPrev();
+    }, [e]), N = r.useCallback(() => {
+      e == null || e.scrollNext();
+    }, [e]), R = r.useCallback(
+      (n) => {
+        n.key === "ArrowLeft" ? (n.preventDefault(), h()) : n.key === "ArrowRight" && (n.preventDefault(), N());
+      },
+      [h, N]
+    );
+    return r.useEffect(() => {
+      !e || !t || t(e);
+    }, [e, t]), r.useEffect(() => {
+      if (e)
+        return d(e), e.on("reInit", d), e.on("select", d), () => {
+          e == null || e.off("select", d);
+        };
+    }, [e, d]), /* @__PURE__ */ s(
+      v.Provider,
+      {
+        value: {
+          carouselRef: y,
+          api: e,
+          opts: l,
+          orientation: o || ((l == null ? void 0 : l.axis) === "y" ? "vertical" : "horizontal"),
+          scrollPrev: h,
+          scrollNext: N,
+          canScrollPrev: b,
+          canScrollNext: P
+        },
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ref: f,
+            onKeyDownCapture: R,
+            className: m("relative", c),
+            role: "region",
+            "aria-roledescription": "carousel",
+            ...u,
+            children: i
+          }
+        )
+      }
+    );
+  }
+);
+D.displayName = "Carousel";
+const E = r.forwardRef(({ className: o, ...l }, t) => {
+  const { carouselRef: a, orientation: c } = C();
+  return /* @__PURE__ */ s("div", { ref: a, className: "overflow-hidden", children: /* @__PURE__ */ s(
+    "div",
+    {
+      ref: t,
+      className: m(
+        "flex",
+        c === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        o
+      ),
+      ...l
+    }
+  ) });
+});
+E.displayName = "CarouselContent";
+const I = r.forwardRef(({ className: o, ...l }, t) => {
+  const { orientation: a } = C();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: t,
+      role: "group",
+      "aria-roledescription": "slide",
+      className: m(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        a === "horizontal" ? "pl-4" : "pt-4",
+        o
+      ),
+      ...l
+    }
+  );
+});
+I.displayName = "CarouselItem";
+const j = r.forwardRef(({ className: o, variant: l = "outline", size: t = "icon", ...a }, c) => {
+  const { orientation: i, scrollPrev: u, canScrollPrev: f } = C();
+  return /* @__PURE__ */ x(
+    w,
+    {
+      ref: c,
+      variant: l,
+      size: t,
+      className: m(
+        "absolute  h-8 w-8 rounded-full",
+        i === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        o
+      ),
+      disabled: !f,
+      onClick: u,
+      ...a,
+      children: [
+        /* @__PURE__ */ s(z, { className: "h-4 w-4" }),
+        /* @__PURE__ */ s("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+});
+j.displayName = "CarouselPrevious";
+const A = r.forwardRef(({ className: o, variant: l = "outline", size: t = "icon", ...a }, c) => {
+  const { orientation: i, scrollNext: u, canScrollNext: f } = C();
+  return /* @__PURE__ */ x(
+    w,
+    {
+      ref: c,
+      variant: l,
+      size: t,
+      className: m(
+        "absolute h-8 w-8 rounded-full",
+        i === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        o
+      ),
+      disabled: !f,
+      onClick: u,
+      ...a,
+      children: [
+        /* @__PURE__ */ s(g, { className: "h-4 w-4" }),
+        /* @__PURE__ */ s("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+});
+A.displayName = "CarouselNext";
+export {
+  D as Carousel,
+  E as CarouselContent,
+  I as CarouselItem,
+  A as CarouselNext,
+  j as CarouselPrevious
+};

package/Carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './Carousel';

package/Carousel/index.mjs

@@ -0,0 +1,8 @@
+import { Carousel as r, CarouselContent as s, CarouselItem as u, CarouselNext as C, CarouselPrevious as a } from "./Carousel.mjs";
+export {
+  r as Carousel,
+  s as CarouselContent,
+  u as CarouselItem,
+  C as CarouselNext,
+  a as CarouselPrevious
+};

package/Carousel/package.json

@@ -0,0 +1,7 @@
+{
+  "sideEffects": false,
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "default": "./index.mjs",
+  "types": "./index.d.ts"
+}

package/Chart/Chart.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType> & {
+    accessibilityLayer?: boolean;
+    active?: boolean | undefined;
+    includeHidden?: boolean | undefined;
+    allowEscapeViewBox?: import('recharts/types/util/types').AllowInDimension;
+    animationDuration?: import('recharts/types/util/types').AnimationDuration;
+    animationEasing?: import('recharts/types/util/types').AnimationTiming;
+    content?: import('recharts/types/component/Tooltip').ContentType<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType> | undefined;
+    coordinate?: Partial<import('recharts/types/util/types').Coordinate>;
+    cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
+    filterNull?: boolean;
+    defaultIndex?: number;
+    isAnimationActive?: boolean;
+    offset?: number;
+    payloadUniqBy?: import('recharts/types/util/payload/getUniqPayload').UniqueOption<import('recharts/types/component/DefaultTooltipContent').Payload<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType>> | undefined;
+    position?: Partial<import('recharts/types/util/types').Coordinate>;
+    reverseDirection?: import('recharts/types/util/types').AllowInDimension;
+    shared?: boolean;
+    trigger?: "hover" | "click";
+    useTranslate3d?: boolean;
+    viewBox?: import('recharts/types/util/types').CartesianViewBox;
+    wrapperStyle?: React.CSSProperties;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };