shadcn-packaged 2025.8.18 → 2025.9.1

package/ui/calendar.jsx

@@ -6,33 +6,33 @@ import { cn } from "../lib/utils";
 import { Button, buttonVariants } from "../ui/button";
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    return (<DayPicker showOutsideDays={showOutsideDays} className={cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className)} captionLayout={captionLayout} formatters={{
+    return (<DayPicker showOutsideDays={showOutsideDays} className={cn("bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className)} captionLayout={captionLayout} formatters={{
             formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
             ...formatters,
         }} classNames={{
             root: cn("w-fit", defaultClassNames.root),
-            months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
-            month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
-            nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
-            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
-            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
-            month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
-            dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
-            dropdown_root: cn("relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
-            dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+            months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]", defaultClassNames.month_caption),
+            dropdowns: cn("flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn("has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border", defaultClassNames.dropdown_root),
+            dropdown: cn("bg-popover absolute inset-0 opacity-0", defaultClassNames.dropdown),
             caption_label: cn("select-none font-medium", captionLayout === "label"
                 ? "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),
+                : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5", defaultClassNames.caption_label),
             table: "w-full border-collapse",
             weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
-            week: cn("flex w-full mt-2", defaultClassNames.week),
-            week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
-            week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
-            day: cn("relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", defaultClassNames.day),
-            range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+            weekday: cn("text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal", defaultClassNames.weekday),
+            week: cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn("w-[--cell-size] select-none", defaultClassNames.week_number_header),
+            week_number: cn("text-muted-foreground select-none text-[0.8rem]", defaultClassNames.week_number),
+            day: cn("group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md", defaultClassNames.day),
+            range_start: cn("bg-accent rounded-l-md", defaultClassNames.range_start),
             range_middle: cn("rounded-none", defaultClassNames.range_middle),
-            range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+            range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
             today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
             outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
             disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
@@ -54,7 +54,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             DayButton: CalendarDayButton,
             WeekNumber: ({ children, ...props }) => {
                 return (<td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
                 {children}
               </div>
             </td>);
@@ -72,6 +72,6 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
     return (<Button ref={ref} variant="ghost" size="icon" data-day={day.date.toLocaleDateString()} data-selected-single={modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle} data-range-start={modifiers.range_start} data-range-end={modifiers.range_end} data-range-middle={modifiers.range_middle} 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-[3px] 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)} {...props}/>);
+            !modifiers.range_middle} data-range-start={modifiers.range_start} data-range-end={modifiers.range_end} data-range-middle={modifiers.range_middle} 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 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className)} {...props}/>);
 }
 export { Calendar, CalendarDayButton };

package/ui/card.d.ts

@@ -1,9 +1,8 @@
 import * as React from "react";
-declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+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/ui/card.jsx

@@ -1,24 +1,15 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
-function Card({ className, ...props }) {
-    return (<div data-slot="card" className={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)} {...props}/>);
-}
-function CardHeader({ className, ...props }) {
-    return (<div data-slot="card-header" 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)} {...props}/>);
-}
-function CardTitle({ className, ...props }) {
-    return (<div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props}/>);
-}
-function CardDescription({ className, ...props }) {
-    return (<div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props}/>);
-}
-function CardAction({ className, ...props }) {
-    return (<div data-slot="card-action" className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)} {...props}/>);
-}
-function CardContent({ className, ...props }) {
-    return (<div data-slot="card-content" className={cn("px-6", className)} {...props}/>);
-}
-function CardFooter({ className, ...props }) {
-    return (<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props}/>);
-}
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };
+const Card = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props}/>));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props}/>));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props}/>));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props}/>));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props}/>));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props}/>));
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/ui/carousel.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-import { Button } from "../ui/button";
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -11,9 +10,9 @@ type CarouselProps = {
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
-declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+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("../ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<import("../ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/ui/carousel.jsx

@@ -12,7 +12,7 @@ function useCarousel() {
     }
     return context;
 }
-function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+const Carousel = React.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = useEmblaCarousel({
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
@@ -20,8 +20,9 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
     const [canScrollPrev, setCanScrollPrev] = React.useState(false);
     const [canScrollNext, setCanScrollNext] = React.useState(false);
     const onSelect = React.useCallback((api) => {
-        if (!api)
+        if (!api) {
             return;
+        }
         setCanScrollPrev(api.canScrollPrev());
         setCanScrollNext(api.canScrollNext());
     }, []);
@@ -42,13 +43,15 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
         }
     }, [scrollPrev, scrollNext]);
     React.useEffect(() => {
-        if (!api || !setApi)
+        if (!api || !setApi) {
             return;
+        }
         setApi(api);
     }, [api, setApi]);
     React.useEffect(() => {
-        if (!api)
+        if (!api) {
             return;
+        }
         onSelect(api);
         api.on("reInit", onSelect);
         api.on("select", onSelect);
@@ -66,37 +69,42 @@ function Carousel({ orientation = "horizontal", opts, setApi, plugins, className
             canScrollPrev,
             canScrollNext,
         }}>
-      <div onKeyDownCapture={handleKeyDown} className={cn("relative", className)} role="region" aria-roledescription="carousel" data-slot="carousel" {...props}>
-        {children}
-      </div>
-    </CarouselContext.Provider>);
-}
-function CarouselContent({ className, ...props }) {
+        <div ref={ref} onKeyDownCapture={handleKeyDown} className={cn("relative", className)} role="region" aria-roledescription="carousel" {...props}>
+          {children}
+        </div>
+      </CarouselContext.Provider>);
+});
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
     const { carouselRef, orientation } = useCarousel();
-    return (<div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
-      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props}/>
+    return (<div ref={carouselRef} className="overflow-hidden">
+      <div ref={ref} className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props}/>
     </div>);
-}
-function CarouselItem({ className, ...props }) {
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
     const { orientation } = useCarousel();
-    return (<div role="group" aria-roledescription="slide" data-slot="carousel-item" className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)} {...props}/>);
-}
-function CarouselPrevious({ className, variant = "outline", size = "icon", ...props }) {
+    return (<div ref={ref} role="group" aria-roledescription="slide" className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)} {...props}/>);
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-    return (<Button data-slot="carousel-previous" variant={variant} size={size} className={cn("absolute size-8 rounded-full", orientation === "horizontal"
-            ? "top-1/2 -left-12 -translate-y-1/2"
+    return (<Button ref={ref} variant={variant} size={size} className={cn("absolute  h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
             : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className)} disabled={!canScrollPrev} onClick={scrollPrev} {...props}>
-      <ArrowLeft />
+      <ArrowLeft className="h-4 w-4"/>
       <span className="sr-only">Previous slide</span>
     </Button>);
-}
-function CarouselNext({ className, variant = "outline", size = "icon", ...props }) {
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
-    return (<Button data-slot="carousel-next" variant={variant} size={size} className={cn("absolute size-8 rounded-full", orientation === "horizontal"
-            ? "top-1/2 -right-12 -translate-y-1/2"
+    return (<Button ref={ref} variant={variant} size={size} className={cn("absolute h-8 w-8 rounded-full", orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
             : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className)} disabled={!canScrollNext} onClick={scrollNext} {...props}>
-      <ArrowRight />
+      <ArrowRight className="h-4 w-4"/>
       <span className="sr-only">Next slide</span>
     </Button>);
-}
+});
+CarouselNext.displayName = "CarouselNext";
 export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };

package/ui/chart.d.ts

@@ -16,25 +16,47 @@ export type ChartConfig = {
         theme: Record<keyof typeof THEMES, string>;
     });
 };
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
 }) => React.JSX.Element;
 declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+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>;
+    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>>;
+    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;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "verticalAlign" | "payload"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/ui/chart.jsx

@@ -12,18 +12,19 @@ function useChart() {
     }
     return context;
 }
-function ChartContainer({ id, className, children, config, ...props }) {
+const ChartContainer = React.forwardRef(({ id, className, children, config, ...props }, ref) => {
     const uniqueId = React.useId();
     const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
     return (<ChartContext.Provider value={{ config }}>
-      <div data-slot="chart" data-chart={chartId} className={cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className)} {...props}>
+      <div data-chart={chartId} ref={ref} className={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-none [&_.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[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", className)} {...props}>
         <ChartStyle id={chartId} config={config}/>
         <RechartsPrimitive.ResponsiveContainer>
           {children}
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>);
-}
+});
+ChartContainer.displayName = "Chart";
 const ChartStyle = ({ id, config }) => {
     const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
     if (!colorConfig.length) {
@@ -46,7 +47,7 @@ ${colorConfig
         }}/>);
 };
 const ChartTooltip = RechartsPrimitive.Tooltip;
-function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+const ChartTooltipContent = React.forwardRef(({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }, ref) => {
     const { config } = useChart();
     const tooltipLabel = React.useMemo(() => {
         if (hideLabel || !payload?.length) {
@@ -60,8 +61,8 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
             : itemConfig?.label;
         if (labelFormatter) {
             return (<div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>);
+            {labelFormatter(value, payload)}
+          </div>);
         }
         if (!value) {
             return null;
@@ -80,16 +81,16 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
         return null;
     }
     const nestLabel = payload.length === 1 && indicator !== "dot";
-    return (<div className={cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className)}>
-      {!nestLabel ? tooltipLabel : null}
-      <div className="grid gap-1.5">
-        {payload.map((item, index) => {
+    return (<div ref={ref} className={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)}>
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             const indicatorColor = color || item.payload.fill || item.color;
-            return (<div key={item.dataKey} className={cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center")}>
-              {formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (<>
-                  {itemConfig?.icon ? (<itemConfig.icon />) : (!hideIndicator && (<div className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+            return (<div key={item.dataKey} className={cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center")}>
+                {formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (<>
+                    {itemConfig?.icon ? (<itemConfig.icon />) : (!hideIndicator && (<div className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
                             "h-2.5 w-2.5": indicator === "dot",
                             "w-1": indicator === "line",
                             "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
@@ -98,42 +99,44 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                             "--color-bg": indicatorColor,
                             "--color-border": indicatorColor,
                         }}/>))}
-                  <div className={cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center")}>
-                    <div className="grid gap-1.5">
-                      {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
-                        {itemConfig?.label || item.name}
-                      </span>
+                    <div className={cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center")}>
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (<span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>)}
                     </div>
-                    {item.value && (<span className="text-foreground font-mono font-medium tabular-nums">
-                        {item.value.toLocaleString()}
-                      </span>)}
-                  </div>
-                </>)}
-            </div>);
+                  </>)}
+              </div>);
         })}
-      </div>
-    </div>);
-}
+        </div>
+      </div>);
+});
+ChartTooltipContent.displayName = "ChartTooltip";
 const ChartLegend = RechartsPrimitive.Legend;
-function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+const ChartLegendContent = React.forwardRef(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
     const { config } = useChart();
     if (!payload?.length) {
         return null;
     }
-    return (<div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
-      {payload.map((item) => {
+    return (<div ref={ref} className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>
+        {payload.map((item) => {
             const key = `${nameKey || item.dataKey || "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            return (<div key={item.value} className={cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3")}>
-            {itemConfig?.icon && !hideIcon ? (<itemConfig.icon />) : (<div className="h-2 w-2 shrink-0 rounded-[2px]" style={{
+            return (<div key={item.value} className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}>
+              {itemConfig?.icon && !hideIcon ? (<itemConfig.icon />) : (<div className="h-2 w-2 shrink-0 rounded-[2px]" style={{
                         backgroundColor: item.color,
                     }}/>)}
-            {itemConfig?.label}
-          </div>);
+              {itemConfig?.label}
+            </div>);
         })}
-    </div>);
-}
+      </div>);
+});
+ChartLegendContent.displayName = "ChartLegend";
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(config, payload, key) {
     if (typeof payload !== "object" || payload === null) {

package/ui/checkbox.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };

package/ui/checkbox.jsx

@@ -1,13 +1,12 @@
 "use client";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { Check } from "lucide-react";
 import { cn } from "../lib/utils";
-function Checkbox({ className, ...props }) {
-    return (<CheckboxPrimitive.Root data-slot="checkbox" className={cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className)} {...props}>
-      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="flex items-center justify-center text-current transition-none">
-        <CheckIcon className="size-3.5"/>
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>);
-}
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => (<CheckboxPrimitive.Root ref={ref} className={cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className)} {...props}>
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4"/>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

package/ui/collapsible.d.ts

@@ -1,5 +1,5 @@
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
-declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react").JSX.Element;
-declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/ui/collapsible.jsx

@@ -1,12 +1,6 @@
 "use client";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-function Collapsible({ ...props }) {
-    return <CollapsiblePrimitive.Root data-slot="collapsible" {...props}/>;
-}
-function CollapsibleTrigger({ ...props }) {
-    return (<CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props}/>);
-}
-function CollapsibleContent({ ...props }) {
-    return (<CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props}/>);
-}
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };