shadcn-packaged 2025.4.14 → 2025.6.16-1

package/ui/alert.jsx

@@ -1,21 +1,24 @@
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
-const alertVariants = cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", {
+const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
     variants: {
         variant: {
-            default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            default: "bg-card text-card-foreground",
+            destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
         },
     },
     defaultVariants: {
         variant: "default",
     },
 });
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props}/>));
-Alert.displayName = "Alert";
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (<h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}/>));
-AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props}/>));
-AlertDescription.displayName = "AlertDescription";
+function Alert({ className, variant, ...props }) {
+    return (<div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props}/>);
+}
+function AlertTitle({ className, ...props }) {
+    return (<div data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)} {...props}/>);
+}
+function AlertDescription({ className, ...props }) {
+    return (<div data-slot="alert-description" className={cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className)} {...props}/>);
+}
 export { Alert, AlertTitle, AlertDescription };

package/ui/aspect-ratio.d.ts

@@ -1,3 +1,3 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react").JSX.Element;
 export { AspectRatio };

package/ui/aspect-ratio.jsx

@@ -1,4 +1,6 @@
 "use client";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-const AspectRatio = AspectRatioPrimitive.Root;
+function AspectRatio({ ...props }) {
+    return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props}/>;
+}
 export { AspectRatio };

package/ui/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element;
 export { Avatar, AvatarImage, AvatarFallback };

package/ui/avatar.jsx

@@ -2,10 +2,13 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../lib/utils";
-const Avatar = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Root ref={ref} className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...props}/>));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props}/>));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (<AvatarPrimitive.Fallback ref={ref} className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)} {...props}/>));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+function Avatar({ className, ...props }) {
+    return (<AvatarPrimitive.Root data-slot="avatar" className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)} {...props}/>);
+}
+function AvatarImage({ className, ...props }) {
+    return (<AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full", className)} {...props}/>);
+}
+function AvatarFallback({ className, ...props }) {
+    return (<AvatarPrimitive.Fallback data-slot="avatar-fallback" className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)} {...props}/>);
+}
 export { Avatar, AvatarImage, AvatarFallback };

package/ui/badge.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: {
     variant?: "default" | "outline" | "destructive" | "secondary";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
-}
-declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
 export { Badge, badgeVariants };

package/ui/badge.jsx

@@ -1,20 +1,22 @@
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
-const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
     variants: {
         variant: {
-            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-            outline: "text-foreground",
+            default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         },
     },
     defaultVariants: {
         variant: "default",
     },
 });
-function Badge({ className, variant, ...props }) {
-    return (<div className={cn(badgeVariants({ variant }), className)} {...props}/>);
+function Badge({ className, variant, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "span";
+    return (<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props}/>);
 }
 export { Badge, badgeVariants };

package/ui/breadcrumb.d.ts

@@ -1,19 +1,11 @@
 import * as React from "react";
-declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    separator?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
-declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
     asChild?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>>;
-declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const BreadcrumbSeparator: {
-    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-    displayName: string;
-};
-declare const BreadcrumbEllipsis: {
-    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-    displayName: string;
-};
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/ui/breadcrumb.jsx

@@ -2,26 +2,31 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/utils";
-const Breadcrumb = React.forwardRef(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props}/>);
-Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (<ol ref={ref} className={cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className)} {...props}/>));
-BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (<li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props}/>));
-BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+function Breadcrumb({ ...props }) {
+    return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props}/>;
+}
+function BreadcrumbList({ className, ...props }) {
+    return (<ol data-slot="breadcrumb-list" className={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)} {...props}/>);
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (<li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props}/>);
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
     const Comp = asChild ? Slot : "a";
-    return (<Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props}/>);
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (<span ref={ref} role="link" aria-disabled="true" aria-current="page" className={cn("font-normal text-foreground", className)} {...props}/>));
-BreadcrumbPage.displayName = "BreadcrumbPage";
-const BreadcrumbSeparator = ({ children, className, ...props }) => (<li role="presentation" aria-hidden="true" className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} {...props}>
-    {children ?? <ChevronRight />}
-  </li>);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-const BreadcrumbEllipsis = ({ className, ...props }) => (<span role="presentation" aria-hidden="true" className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
-    <MoreHorizontal className="h-4 w-4"/>
-    <span className="sr-only">More</span>
-  </span>);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+    return (<Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props}/>);
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn("text-foreground font-normal", className)} {...props}/>);
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+      {children ?? <ChevronRight />}
+    </li>);
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn("flex size-9 items-center justify-center", className)} {...props}>
+      <MoreHorizontal className="size-4"/>
+      <span className="sr-only">More</span>
+    </span>);
+}
 export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/ui/button.d.ts

@@ -4,8 +4,7 @@ declare const buttonVariants: (props?: {
     variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost";
     size?: "default" | "icon" | "sm" | "lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+}): React.JSX.Element;
 export { Button, buttonVariants };

package/ui/button.jsx

@@ -2,21 +2,21 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils";
-const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
             link: "text-primary underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-10 px-4 py-2",
-            sm: "h-9 rounded-md px-3",
-            lg: "h-11 rounded-md px-8",
-            icon: "h-10 w-10",
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
         },
     },
     defaultVariants: {
@@ -24,9 +24,8 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
         size: "default",
     },
 });
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+function Button({ className, variant, size, asChild = false, ...props }) {
     const Comp = asChild ? Slot : "button";
-    return (<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}/>);
-});
-Button.displayName = "Button";
+    return (<Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props}/>);
+}
 export { Button, buttonVariants };

package/ui/calendar.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { DayPicker } from "react-day-picker";
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
-declare namespace Calendar {
-    var displayName: string;
-}
-export { Calendar };
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "../ui/button";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/ui/calendar.jsx

@@ -1,37 +1,77 @@
 "use client";
 import * as React from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker } from "react-day-picker";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "lucide-react";
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { cn } from "../lib/utils";
-import { buttonVariants } from "../ui/button";
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
-    return (<DayPicker showOutsideDays={showOutsideDays} className={cn("p-3", className)} classNames={{
-            months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-            month: "space-y-4",
-            caption: "flex justify-center pt-1 relative items-center",
-            caption_label: "text-sm font-medium",
-            nav: "space-x-1 flex items-center",
-            nav_button: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"),
-            nav_button_previous: "absolute left-1",
-            nav_button_next: "absolute right-1",
-            table: "w-full border-collapse space-y-1",
-            head_row: "flex",
-            head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-            row: "flex w-full mt-2",
-            cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-            day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
-            day_range_end: "day-range-end",
-            day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-            day_today: "bg-accent text-accent-foreground",
-            day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-            day_disabled: "text-muted-foreground opacity-50",
-            day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-            day_hidden: "invisible",
+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={{
+            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 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),
+            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),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("rounded-r-md bg-accent", 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),
+            hidden: cn("invisible", defaultClassNames.hidden),
             ...classNames,
         }} components={{
-            IconLeft: ({ className, ...props }) => (<ChevronLeft className={cn("h-4 w-4", className)} {...props}/>),
-            IconRight: ({ className, ...props }) => (<ChevronRight className={cn("h-4 w-4", className)} {...props}/>),
+            Root: ({ className, rootRef, ...props }) => {
+                return (<div data-slot="calendar" ref={rootRef} className={cn(className)} {...props}/>);
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (<ChevronLeftIcon className={cn("size-4", className)} {...props}/>);
+                }
+                if (orientation === "right") {
+                    return (<ChevronRightIcon className={cn("size-4", className)} {...props}/>);
+                }
+                return (<ChevronDownIcon className={cn("size-4", className)} {...props}/>);
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return (<td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>);
+            },
+            ...components,
         }} {...props}/>);
 }
-Calendar.displayName = "Calendar";
-export { Calendar };
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    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}/>);
+}
+export { Calendar, CalendarDayButton };

package/ui/card.d.ts

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

package/ui/card.jsx

@@ -1,15 +1,24 @@
 import * as React from "react";
 import { cn } from "../lib/utils";
-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 };
+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, };

package/ui/carousel.d.ts

@@ -1,5 +1,6 @@
 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];
@@ -10,9 +11,9 @@ type CarouselProps = {
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<import("../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>>;
+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;
 export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };