@codefast/ui 0.3.10 → 0.3.11-canary.1

package/dist/components/calendar.js

@@ -5,41 +5,41 @@ import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react
 import { useEffect, useRef } from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { Button, buttonVariants } from "./button.js";
-function Calendar({ buttonVariant = 'ghost', captionLayout = 'label', className, classNames, components, formatters, showOutsideDays = true, ...props }) {
+function Calendar({ buttonVariant = "ghost", captionLayout = "label", className, classNames, components, formatters, showOutsideDays = true, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     return /*#__PURE__*/ jsx(DayPicker, {
         captionLayout: captionLayout,
-        className: cn('bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', 'rtl:**:[.rdp-button_next>svg]:rotate-180', 'rtl:**:[.rdp-button_previous>svg]:rotate-180', className),
+        className: cn("group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", "rtl:**:[.rdp-button_next>svg]:rotate-180", "rtl:**:[.rdp-button_previous>svg]:rotate-180", className),
         classNames: {
             button_next: cn(buttonVariants({
                 variant: buttonVariant
-            }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next),
+            }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
             button_previous: cn(buttonVariants({
                 variant: buttonVariant
-            }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous),
-            caption_label: cn('select-none font-medium', 'label' === captionLayout ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label),
-            day: cn('relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', props.showWeekNumber ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-md' : '[&:first-child[data-selected=true]_button]:rounded-l-md', defaultClassNames.day),
-            disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-            dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
-            dropdown_root: cn('relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-3 rounded-md', defaultClassNames.dropdown_root),
-            dropdowns: cn('w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns),
-            hidden: cn('invisible', defaultClassNames.hidden),
-            month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
-            month_caption: cn('flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption),
-            months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
-            nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
-            outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
-            range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
-            range_middle: cn('rounded-none', defaultClassNames.range_middle),
-            range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
-            root: cn('w-fit', defaultClassNames.root),
-            table: 'w-full border-collapse',
-            today: cn('bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today),
-            week: cn('flex w-full mt-2', defaultClassNames.week),
-            week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
-            week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
-            weekday: cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday),
-            weekdays: cn('flex', defaultClassNames.weekdays),
+            }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+            caption_label: cn("font-medium select-none", "label" === captionLayout ? "text-sm" : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+            day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+            dropdown_root: cn("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+            dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+            root: cn("w-fit", defaultClassNames.root),
+            table: "w-full border-collapse",
+            today: cn("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+            weekday: cn("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            weekdays: cn("flex", defaultClassNames.weekdays),
             ...classNames
         },
         components: {
@@ -50,8 +50,8 @@ function Calendar({ buttonVariant = 'ghost', captionLayout = 'label', className,
             ...components
         },
         formatters: {
-            formatMonthDropdown: (date)=>date.toLocaleString('default', {
-                    month: 'short'
+            formatMonthDropdown: (date)=>date.toLocaleString("default", {
+                    month: "short"
                 }),
             ...formatters
         },
@@ -60,16 +60,16 @@ function Calendar({ buttonVariant = 'ghost', captionLayout = 'label', className,
     });
 }
 function CalendarChevron({ className, orientation, ...props }) {
-    if ('left' === orientation) return /*#__PURE__*/ jsx(ChevronLeftIcon, {
-        className: cn('size-4', className),
+    if ("left" === orientation) return /*#__PURE__*/ jsx(ChevronLeftIcon, {
+        className: cn("size-4", className),
         ...props
     });
-    if ('right' === orientation) return /*#__PURE__*/ jsx(ChevronRightIcon, {
-        className: cn('size-4', className),
+    if ("right" === orientation) return /*#__PURE__*/ jsx(ChevronRightIcon, {
+        className: cn("size-4", className),
         ...props
     });
     return /*#__PURE__*/ jsx(ChevronDownIcon, {
-        className: cn('size-4', className),
+        className: cn("size-4", className),
         ...props
     });
 }
@@ -100,7 +100,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     ]);
     return /*#__PURE__*/ jsx(Button, {
         ref: ref,
-        className: cn('data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-3 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className),
+        className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-3 group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
         "data-day": day.date.toLocaleDateString(),
         "data-range-end": modifiers.range_end,
         "data-range-middle": modifiers.range_middle,

package/dist/components/card.d.ts

@@ -1,17 +1,17 @@
-import type { ComponentProps, JSX } from 'react';
-type CardProps = ComponentProps<'div'>;
+import type { ComponentProps, JSX } from "react";
+type CardProps = ComponentProps<"div">;
 declare function Card({ className, ...props }: CardProps): JSX.Element;
-type CardHeaderProps = ComponentProps<'div'>;
+type CardHeaderProps = ComponentProps<"div">;
 declare function CardHeader({ className, ...props }: CardHeaderProps): JSX.Element;
-type CardTitleProps = ComponentProps<'div'>;
+type CardTitleProps = ComponentProps<"div">;
 declare function CardTitle({ children, className, ...props }: CardTitleProps): JSX.Element;
-type CardDescriptionProps = ComponentProps<'div'>;
+type CardDescriptionProps = ComponentProps<"div">;
 declare function CardDescription({ className, ...props }: CardDescriptionProps): JSX.Element;
-type CardContentProps = ComponentProps<'div'>;
+type CardContentProps = ComponentProps<"div">;
 declare function CardContent({ className, ...props }: CardContentProps): JSX.Element;
-type CardFooterProps = ComponentProps<'div'>;
+type CardFooterProps = ComponentProps<"div">;
 declare function CardFooter({ className, ...props }: CardFooterProps): JSX.Element;
-type CardActionProps = ComponentProps<'div'>;
+type CardActionProps = ComponentProps<"div">;
 declare function CardAction({ className, ...props }: CardActionProps): JSX.Element;
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
 export type { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, };

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.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.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;
 };