@codefast/ui 0.3.10 → 0.3.11-canary.0

package/dist/components/card.js

@@ -2,21 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import { cn } from "@codefast/tailwind-variants";
 function Card({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('bg-card text-card-foreground flex flex-col gap-6 overflow-auto rounded-xl border py-6 shadow-sm', className),
+        className: cn("flex flex-col gap-6 overflow-auto rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className),
         "data-slot": "card",
         ...props
     });
 }
 function CardHeader({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className),
+        className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
         "data-slot": "card-header",
         ...props
     });
 }
 function CardTitle({ children, className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('leading-none font-semibold', className),
+        className: cn("leading-none font-semibold", className),
         "data-slot": "card-title",
         ...props,
         children: children
@@ -24,28 +24,28 @@ function CardTitle({ children, className, ...props }) {
 }
 function CardDescription({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('text-muted-foreground text-sm', className),
+        className: cn("text-sm text-muted-foreground", className),
         "data-slot": "card-description",
         ...props
     });
 }
 function CardContent({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('px-6', className),
+        className: cn("px-6", className),
         "data-slot": "card-content",
         ...props
     });
 }
 function CardFooter({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('flex items-center px-6 [.border-t]:pt-6', className),
+        className: cn("flex items-center px-6 [.border-t]:pt-6", className),
         "data-slot": "card-footer",
         ...props
     });
 }
 function CardAction({ className, ...props }) {
     return /*#__PURE__*/ jsx("div", {
-        className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className),
+        className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
         "data-slot": "card-action",
         ...props
     });

package/dist/components/carousel.cjs

@@ -49,13 +49,13 @@ var external_embla_carousel_react_default = /*#__PURE__*/ __webpack_require__.n(
 const external_lucide_react_namespaceObject = require("lucide-react");
 const external_react_namespaceObject = require("react");
 const external_button_cjs_namespaceObject = require("./button.cjs");
-const CAROUSEL_NAME = 'Carousel';
+const CAROUSEL_NAME = "Carousel";
 const [createCarouselContext, createCarouselScope] = (0, react_context_namespaceObject.createContextScope)(CAROUSEL_NAME);
 const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
 function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }) {
     const [carouselRef, api] = external_embla_carousel_react_default()({
         ...opts,
-        axis: 'vertical' === orientation ? 'y' : 'x'
+        axis: "vertical" === orientation ? "y" : "x"
     }, plugins);
     const [canScrollPrevious, setCanScrollPrevious] = (0, external_react_namespaceObject.useState)(false);
     const [canScrollNext, setCanScrollNext] = (0, external_react_namespaceObject.useState)(false);
@@ -75,10 +75,10 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         api
     ]);
     const handleKeyDown = (0, external_react_namespaceObject.useCallback)((event)=>{
-        if ('ArrowLeft' === event.key) {
+        if ("ArrowLeft" === event.key) {
             event.preventDefault();
             scrollPrevious();
-        } else if ('ArrowRight' === event.key) {
+        } else if ("ArrowRight" === event.key) {
             event.preventDefault();
             scrollNext();
         }
@@ -98,10 +98,10 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         queueMicrotask(()=>{
             onSelect(api);
         });
-        api.on('reInit', onSelect);
-        api.on('select', onSelect);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
         return ()=>{
-            api.off('select', onSelect);
+            api.off("select", onSelect);
         };
     }, [
         api,
@@ -113,12 +113,12 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         canScrollPrev: canScrollPrevious,
         carouselRef: carouselRef,
         opts: opts,
-        orientation: orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
         scope: __scopeCarousel,
         scrollNext: scrollNext,
         scrollPrev: scrollPrevious,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, tailwind_variants_namespaceObject.cn)('relative', className),
+            className: (0, tailwind_variants_namespaceObject.cn)("relative", className),
             "data-slot": "carousel",
             onKeyDownCapture: handleKeyDown,
             ...props,
@@ -126,36 +126,36 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         })
     });
 }
-const CAROUSEL_CONTENT_NAME = 'CarouselContent';
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
 function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
     const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: carouselRef,
-        className: (0, tailwind_variants_namespaceObject.cn)('overflow-hidden', classNames?.wrapper),
+        className: (0, tailwind_variants_namespaceObject.cn)("overflow-hidden", classNames?.wrapper),
         "data-slot": "carousel-content",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, tailwind_variants_namespaceObject.cn)('flex', 'horizontal' === orientation ? '-ml-4' : '-mt-4 flex-col', classNames?.content, className),
+            className: (0, tailwind_variants_namespaceObject.cn)("flex", "horizontal" === orientation ? "-ml-4" : "-mt-4 flex-col", classNames?.content, className),
             ...props
         })
     });
 }
-const CAROUSEL_ITEM_NAME = 'CarouselItem';
+const CAROUSEL_ITEM_NAME = "CarouselItem";
 function CarouselItem({ __scopeCarousel, className, ...props }) {
     const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "aria-roledescription": "slide",
-        className: (0, tailwind_variants_namespaceObject.cn)('min-w-0 shrink-0 grow-0 basis-full', 'horizontal' === orientation ? 'pl-4' : 'pt-4', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("min-w-0 shrink-0 grow-0 basis-full", "horizontal" === orientation ? "pl-4" : "pt-4", className),
         "data-slot": "carousel-item",
         role: "group",
         ...props
     });
 }
-const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
-function CarouselPrevious({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+function CarouselPrevious({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
     const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
         "aria-label": "Previous slide",
-        className: (0, tailwind_variants_namespaceObject.cn)('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("absolute size-8 shadow-none", "horizontal" === orientation ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
         "data-slot": "carousel-previous",
         disabled: !canScrollPrev,
         size: size,
@@ -171,12 +171,12 @@ function CarouselPrevious({ __scopeCarousel, className, size = 'icon', variant =
         ]
     });
 }
-const CAROUSEL_NEXT_NAME = 'CarouselNext';
-function CarouselNext({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+function CarouselNext({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
     const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
         "aria-label": "Next slide",
-        className: (0, tailwind_variants_namespaceObject.cn)('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("absolute size-8 shadow-none", "horizontal" === orientation ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
         "data-slot": "carousel-next",
         disabled: !canScrollNext,
         size: size,

package/dist/components/carousel.d.ts

@@ -1,8 +1,8 @@
-import type { Scope } from '@radix-ui/react-context';
-import type { UseEmblaCarouselType } from 'embla-carousel-react';
-import type { ComponentProps, JSX } from 'react';
-import useEmblaCarousel from 'embla-carousel-react';
-import { Button } from './button';
+import type { Scope } from "@radix-ui/react-context";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type { ComponentProps, JSX } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { Button } from "./button";
 type ScopedProps<P> = P & {
     __scopeCarousel?: Scope;
 };
@@ -13,25 +13,25 @@ type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 interface BaseCarouselProps {
     opts?: CarouselOptions;
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: "horizontal" | "vertical";
     plugins?: CarouselPlugin;
     setApi?: (api: CarouselApi) => void;
 }
-interface CarouselProps extends BaseCarouselProps, ComponentProps<'div'> {
+interface CarouselProps extends BaseCarouselProps, ComponentProps<"div"> {
 }
 declare function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }: ScopedProps<CarouselProps>): JSX.Element;
-interface CarouselContentProps extends ComponentProps<'div'> {
+interface CarouselContentProps extends ComponentProps<"div"> {
     classNames?: {
         content?: string;
         wrapper?: string;
     };
 }
 declare function CarouselContent({ __scopeCarousel, className, classNames, ...props }: ScopedProps<CarouselContentProps>): JSX.Element;
-type CarouselItemProps = ComponentProps<'div'>;
+type CarouselItemProps = ComponentProps<"div">;
 declare function CarouselItem({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>): JSX.Element;
 type CarouselPreviousProps = ComponentProps<typeof Button>;
 declare function CarouselPrevious({ __scopeCarousel, className, size, variant, ...props }: ScopedProps<CarouselPreviousProps>): JSX.Element;
 type CarouselNextProps = ComponentProps<typeof Button>;
 declare function CarouselNext({ __scopeCarousel, className, size, variant, ...props }: ScopedProps<CarouselNextProps>): JSX.Element;
 export type { CarouselApi, CarouselContentProps, CarouselItemProps, CarouselNextProps, CarouselPreviousProps, CarouselProps, };
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope };
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, createCarouselScope, };

package/dist/components/carousel.js

@@ -6,13 +6,13 @@ import embla_carousel_react from "embla-carousel-react";
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "./button.js";
-const CAROUSEL_NAME = 'Carousel';
+const CAROUSEL_NAME = "Carousel";
 const [createCarouselContext, createCarouselScope] = createContextScope(CAROUSEL_NAME);
 const [CarouselContextProvider, useCarouselContext] = createCarouselContext(CAROUSEL_NAME);
 function Carousel({ __scopeCarousel, children, className, opts, orientation, plugins, setApi, ...props }) {
     const [carouselRef, api] = embla_carousel_react({
         ...opts,
-        axis: 'vertical' === orientation ? 'y' : 'x'
+        axis: "vertical" === orientation ? "y" : "x"
     }, plugins);
     const [canScrollPrevious, setCanScrollPrevious] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);
@@ -32,10 +32,10 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         api
     ]);
     const handleKeyDown = useCallback((event)=>{
-        if ('ArrowLeft' === event.key) {
+        if ("ArrowLeft" === event.key) {
             event.preventDefault();
             scrollPrevious();
-        } else if ('ArrowRight' === event.key) {
+        } else if ("ArrowRight" === event.key) {
             event.preventDefault();
             scrollNext();
         }
@@ -55,10 +55,10 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         queueMicrotask(()=>{
             onSelect(api);
         });
-        api.on('reInit', onSelect);
-        api.on('select', onSelect);
+        api.on("reInit", onSelect);
+        api.on("select", onSelect);
         return ()=>{
-            api.off('select', onSelect);
+            api.off("select", onSelect);
         };
     }, [
         api,
@@ -70,12 +70,12 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         canScrollPrev: canScrollPrevious,
         carouselRef: carouselRef,
         opts: opts,
-        orientation: orientation ?? (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+        orientation: orientation ?? (opts?.axis === "y" ? "vertical" : "horizontal"),
         scope: __scopeCarousel,
         scrollNext: scrollNext,
         scrollPrev: scrollPrevious,
         children: /*#__PURE__*/ jsx("div", {
-            className: cn('relative', className),
+            className: cn("relative", className),
             "data-slot": "carousel",
             onKeyDownCapture: handleKeyDown,
             ...props,
@@ -83,36 +83,36 @@ function Carousel({ __scopeCarousel, children, className, opts, orientation, plu
         })
     });
 }
-const CAROUSEL_CONTENT_NAME = 'CarouselContent';
+const CAROUSEL_CONTENT_NAME = "CarouselContent";
 function CarouselContent({ __scopeCarousel, className, classNames, ...props }) {
     const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
     return /*#__PURE__*/ jsx("div", {
         ref: carouselRef,
-        className: cn('overflow-hidden', classNames?.wrapper),
+        className: cn("overflow-hidden", classNames?.wrapper),
         "data-slot": "carousel-content",
         children: /*#__PURE__*/ jsx("div", {
-            className: cn('flex', 'horizontal' === orientation ? '-ml-4' : '-mt-4 flex-col', classNames?.content, className),
+            className: cn("flex", "horizontal" === orientation ? "-ml-4" : "-mt-4 flex-col", classNames?.content, className),
             ...props
         })
     });
 }
-const CAROUSEL_ITEM_NAME = 'CarouselItem';
+const CAROUSEL_ITEM_NAME = "CarouselItem";
 function CarouselItem({ __scopeCarousel, className, ...props }) {
     const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
     return /*#__PURE__*/ jsx("div", {
         "aria-roledescription": "slide",
-        className: cn('min-w-0 shrink-0 grow-0 basis-full', 'horizontal' === orientation ? 'pl-4' : 'pt-4', className),
+        className: cn("min-w-0 shrink-0 grow-0 basis-full", "horizontal" === orientation ? "pl-4" : "pt-4", className),
         "data-slot": "carousel-item",
         role: "group",
         ...props
     });
 }
-const CAROUSEL_PREVIOUS_NAME = 'CarouselPrevious';
-function CarouselPrevious({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+const CAROUSEL_PREVIOUS_NAME = "CarouselPrevious";
+function CarouselPrevious({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
     const { canScrollPrev, orientation, scrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
     return /*#__PURE__*/ jsxs(Button, {
         "aria-label": "Previous slide",
-        className: cn('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        className: cn("absolute size-8 shadow-none", "horizontal" === orientation ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
         "data-slot": "carousel-previous",
         disabled: !canScrollPrev,
         size: size,
@@ -128,12 +128,12 @@ function CarouselPrevious({ __scopeCarousel, className, size = 'icon', variant =
         ]
     });
 }
-const CAROUSEL_NEXT_NAME = 'CarouselNext';
-function CarouselNext({ __scopeCarousel, className, size = 'icon', variant = 'outline', ...props }) {
+const CAROUSEL_NEXT_NAME = "CarouselNext";
+function CarouselNext({ __scopeCarousel, className, size = "icon", variant = "outline", ...props }) {
     const { canScrollNext, orientation, scrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
     return /*#__PURE__*/ jsxs(Button, {
         "aria-label": "Next slide",
-        className: cn('absolute size-8 shadow-none', 'horizontal' === orientation ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90', className),
+        className: cn("absolute size-8 shadow-none", "horizontal" === orientation ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
         "data-slot": "carousel-next",
         disabled: !canScrollNext,
         size: size,

package/dist/components/chart.cjs

@@ -39,10 +39,10 @@ const react_context_namespaceObject = require("@radix-ui/react-context");
 const external_react_namespaceObject = require("react");
 const external_recharts_namespaceObject = require("recharts");
 const THEMES = {
-    dark: '.dark',
-    light: ''
+    dark: ".dark",
+    light: ""
 };
-const CHART_PROVIDER_NAME = 'ChartProvider';
+const CHART_PROVIDER_NAME = "ChartProvider";
 const [createChartContext, createChartScope] = (0, react_context_namespaceObject.createContextScope)(CHART_PROVIDER_NAME);
 const [ChartContextProvider, useChartContext] = createChartContext(CHART_PROVIDER_NAME);
 function ChartContainer({ __scopeChart, children, className, config, id, ...props }) {
@@ -52,7 +52,7 @@ function ChartContainer({ __scopeChart, children, className, config, id, ...prop
         config: config,
         scope: __scopeChart,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-            className: (0, tailwind_variants_namespaceObject.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),
+            className: (0, tailwind_variants_namespaceObject.cn)("flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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 [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
             "data-chart": chartId,
             "data-slot": "chart",
             ...props,
@@ -78,22 +78,22 @@ function ChartStyle({ config, id }) {
     });
 }
 const ChartTooltip = external_recharts_namespaceObject.Tooltip;
-const CHART_TOOLTIP_CONTENT_NAME = 'ChartTooltipContent';
-function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = 'dot', label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
+const CHART_TOOLTIP_CONTENT_NAME = "ChartTooltipContent";
+function ChartTooltipContent({ __scopeChart, active, className, color, formatter, hideIndicator = false, hideLabel = false, indicator = "dot", label, labelClassName, labelFormatter, labelKey, nameKey, payload = [] }) {
     const { config } = useChartContext(CHART_TOOLTIP_CONTENT_NAME, __scopeChart);
     const tooltipLabel = (0, external_react_namespaceObject.useMemo)(()=>{
         if (hideLabel || 0 === payload.length) return null;
         const [item] = payload;
-        const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? 'value');
+        const key = safeToString(labelKey ?? item.dataKey ?? item.name ?? "value");
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
-        const value = labelKey || 'string' != typeof label ? itemConfig?.label : label in config ? config[label].label ?? label : label;
+        const value = labelKey || "string" != typeof label ? itemConfig?.label : label in config ? config[label].label ?? label : label;
         if (labelFormatter) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, tailwind_variants_namespaceObject.cn)('font-medium', labelClassName),
+            className: (0, tailwind_variants_namespaceObject.cn)("font-medium", labelClassName),
             children: labelFormatter(value, payload)
         });
         if (!value) return null;
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-            className: (0, tailwind_variants_namespaceObject.cn)('font-medium', labelClassName),
+            className: (0, tailwind_variants_namespaceObject.cn)("font-medium", labelClassName),
             children: value
         });
     }, [
@@ -106,37 +106,37 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
         labelKey
     ]);
     if (!active || 0 === payload.length) return null;
-    const nestLabel = 1 === payload.length && 'dot' !== indicator;
+    const nestLabel = 1 === payload.length && "dot" !== indicator;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-        className: (0, tailwind_variants_namespaceObject.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),
+        className: (0, tailwind_variants_namespaceObject.cn)("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
         children: [
             nestLabel ? null : tooltipLabel,
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "grid gap-1.5",
                 children: payload.map((item, index)=>{
-                    const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? 'value');
+                    const key = safeToString(nameKey ?? item.name ?? item.dataKey ?? "value");
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-                    const indicatorColor = color ?? (isRecord(item.payload) && 'fill' in item.payload && 'string' == typeof item.payload.fill ? item.payload.fill : void 0) ?? item.color;
+                    const indicatorColor = color ?? (isRecord(item.payload) && "fill" in item.payload && "string" == typeof item.payload.fill ? item.payload.fill : void 0) ?? item.color;
                     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: (0, tailwind_variants_namespaceObject.cn)('[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5', 'dot' === indicator && 'items-center'),
+                        className: (0, tailwind_variants_namespaceObject.cn)("flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5 [&>svg]:text-muted-foreground", "dot" === indicator && "items-center"),
                         children: formatter && void 0 !== item.value && item.name ? formatter(item.value, item.name, item, index, [
                             item
                         ]) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
                             children: [
                                 itemConfig?.icon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                    className: (0, tailwind_variants_namespaceObject.cn)('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {
-                                        'h-2.5 w-2.5': 'dot' === indicator,
-                                        'my-0.5': nestLabel && 'dashed' === indicator,
-                                        'border-1.5 w-0 border-dashed bg-transparent': 'dashed' === indicator,
-                                        'w-1': 'line' === indicator
+                                    className: (0, tailwind_variants_namespaceObject.cn)("shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": "dot" === indicator,
+                                        "my-0.5": nestLabel && "dashed" === indicator,
+                                        "border-1.5 w-0 border-dashed bg-transparent": "dashed" === indicator,
+                                        "w-1": "line" === indicator
                                     }),
                                     style: {
-                                        '--color-bg': indicatorColor,
-                                        '--color-border': indicatorColor
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor
                                     }
                                 }),
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                                    className: (0, tailwind_variants_namespaceObject.cn)('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center'),
+                                    className: (0, tailwind_variants_namespaceObject.cn)("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
                                     children: [
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                             className: "grid gap-1.5",
@@ -149,8 +149,8 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
                                             ]
                                         }),
                                         null != item.value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                            className: "text-foreground font-mono font-medium tabular-nums",
-                                            children: 'number' == typeof item.value ? item.value.toLocaleString() : safeToString(item.value)
+                                            className: "font-mono font-medium text-foreground tabular-nums",
+                                            children: "number" == typeof item.value ? item.value.toLocaleString() : safeToString(item.value)
                                         })
                                     ]
                                 })
@@ -163,19 +163,19 @@ function ChartTooltipContent({ __scopeChart, active, className, color, formatter
     });
 }
 const ChartLegend = external_recharts_namespaceObject.Legend;
-const CHART_LEGEND_CONTENT_NAME = 'ChartLegendContent';
-function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = 'bottom' }) {
+const CHART_LEGEND_CONTENT_NAME = "ChartLegendContent";
+function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey, payload, verticalAlign = "bottom" }) {
     const { config } = useChartContext(CHART_LEGEND_CONTENT_NAME, __scopeChart);
     if (!payload?.length) return null;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: (0, tailwind_variants_namespaceObject.cn)('flex items-center justify-center gap-4', 'top' === verticalAlign ? 'pb-3' : 'pt-3', className),
+        className: (0, tailwind_variants_namespaceObject.cn)("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
         children: payload.map((item)=>{
-            let key = 'value';
+            let key = "value";
             if (nameKey) key = nameKey;
             else if (null != item.dataKey) key = safeToString(item.dataKey);
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                className: (0, tailwind_variants_namespaceObject.cn)('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3'),
+                className: (0, tailwind_variants_namespaceObject.cn)("flex items-center gap-1.5 [&>svg]:size-3 [&>svg]:text-muted-foreground"),
                 children: [
                     itemConfig?.icon && !hideIcon ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(itemConfig.icon, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                         className: "size-2 shrink-0 rounded-md",
@@ -185,27 +185,27 @@ function ChartLegendContent({ __scopeChart, className, hideIcon = false, nameKey
                     }),
                     itemConfig?.label
                 ]
-            }, nameKey ? safeToString(itemConfig?.color ?? '') : safeToString(item.value ?? ''));
+            }, nameKey ? safeToString(itemConfig?.color ?? "") : safeToString(item.value ?? ""));
         })
     });
 }
 function isRecord(value) {
-    return 'object' == typeof value && null !== value;
+    return "object" == typeof value && null !== value;
 }
 function getStringValue(record, key) {
     if (key in record) {
         const value = record[key];
-        return 'string' == typeof value ? value : void 0;
+        return "string" == typeof value ? value : void 0;
     }
 }
 function safeToString(value) {
-    if ('string' == typeof value) return value;
-    if ('number' == typeof value) return value.toString();
-    if (null == value) return '';
-    if ('boolean' == typeof value) return value.toString();
-    if ('bigint' == typeof value) return value.toString();
-    if ('symbol' == typeof value) return value.toString();
-    return '';
+    if ("string" == typeof value) return value;
+    if ("number" == typeof value) return value.toString();
+    if (null == value) return "";
+    if ("boolean" == typeof value) return value.toString();
+    if ("bigint" == typeof value) return value.toString();
+    if ("symbol" == typeof value) return value.toString();
+    return "";
 }
 function getPayloadConfigFromPayload(config, payload, key) {
     if (!isRecord(payload)) return;
@@ -224,11 +224,11 @@ function generateCssVariable(key, itemConfig, theme) {
     return color ? `  --color-${key}: ${color};` : null;
 }
 function generateThemeStyles(theme, prefix, id, colorConfig) {
-    const cssVariables = colorConfig.map(([key, itemConfig])=>generateCssVariable(key, itemConfig, theme)).filter(Boolean).join('\n');
+    const cssVariables = colorConfig.map(([key, itemConfig])=>generateCssVariable(key, itemConfig, theme)).filter(Boolean).join("\n");
     return `${prefix} [data-chart=${id}] {\n${cssVariables}\n}`;
 }
 function generateChartStyles(id, colorConfig) {
-    return Object.entries(THEMES).map(([theme, prefix])=>generateThemeStyles(theme, prefix, id, colorConfig)).join('\n\n');
+    return Object.entries(THEMES).map(([theme, prefix])=>generateThemeStyles(theme, prefix, id, colorConfig)).join("\n\n");
 }
 exports.ChartContainer = __webpack_exports__.ChartContainer;
 exports.ChartLegend = __webpack_exports__.ChartLegend;

package/dist/components/chart.d.ts

@@ -1,7 +1,8 @@
-import type { Scope } from '@radix-ui/react-context';
-import type { ComponentProps, ComponentType, JSX, ReactNode } from 'react';
-import type { NameType, Payload, ValueType } from 'recharts/types/component/DefaultTooltipContent';
-import * as RechartsPrimitive from 'recharts';
+import type { Scope } from "@radix-ui/react-context";
+import type { ComponentProps, ComponentType, JSX, ReactNode } from "react";
+import type { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { TooltipContentProps, TooltipProps } from "recharts";
+import * as RechartsPrimitive from "recharts";
 type ExtractProps<T> = T extends (props: infer P) => ReactNode ? P : never;
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
 declare const THEMES: {
@@ -22,8 +23,8 @@ type ScopedProps<P> = P & {
     __scopeChart?: Scope;
 };
 declare const createChartScope: import("@radix-ui/react-context").CreateScope;
-interface ChartContainerProps extends ComponentProps<'div'> {
-    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+interface ChartContainerProps extends ComponentProps<"div"> {
+    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
     config: ChartConfig;
 }
 declare function ChartContainer({ __scopeChart, children, className, config, id, ...props }: ScopedProps<ChartContainerProps>): JSX.Element;
@@ -32,12 +33,12 @@ interface ChartStyleProps {
     id: string;
 }
 declare function ChartStyle({ config, id }: ChartStyleProps): ReactNode;
-type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>;
+type ChartTooltipProps<TValue extends ValueType, TName extends NameType> = TooltipProps<TValue, TName>;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<ExtractProps<ComponentProps<typeof RechartsPrimitive.Tooltip<TValue, TName>>['content']>, 'accessibilityLayer' | 'active' | 'activeIndex' | 'coordinate' | 'payload'>, 'payload'> & {
+type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType> = Omit<MakeOptional<TooltipContentProps<TValue, TName>, "accessibilityLayer" | "active" | "activeIndex" | "coordinate" | "payload">, "payload"> & {
     hideIndicator?: boolean;
     hideLabel?: boolean;
-    indicator?: 'dashed' | 'dot' | 'line';
+    indicator?: "dashed" | "dot" | "line";
     labelKey?: string;
     nameKey?: string;
     color?: string | undefined;
@@ -46,8 +47,8 @@ type ChartTooltipContentProps<TValue extends ValueType, TName extends NameType>
 };
 declare function ChartTooltipContent<TValue extends ValueType, TName extends NameType>({ __scopeChart, active, className, color, formatter, hideIndicator, hideLabel, indicator, label, labelClassName, labelFormatter, labelKey, nameKey, payload, }: ScopedProps<ChartTooltipContentProps<TValue, TName>>): ReactNode;
 type ChartLegendProps = ComponentProps<typeof RechartsPrimitive.Legend>;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-type ChartLegendContentProps = ComponentProps<'div'> & ExtractProps<RechartsPrimitive.LegendProps['content']> & {
+declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+type ChartLegendContentProps = ComponentProps<"div"> & ExtractProps<RechartsPrimitive.LegendProps["content"]> & {
     hideIcon?: boolean;
     nameKey?: string;
 };