@codefast/ui 0.0.38 → 0.0.40

package/src/react/alert-dialog.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialog
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+const AlertDialog = AlertDialogPrimitive.Root;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTrigger
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogContent
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Content>;
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
+
+const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPrimitive.Portal>
+  ),
+);
+
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogHeader
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element {
+  return <div className={cn("flex flex-col space-y-2 text-center", "sm:text-left", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogFooter
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element {
+  return <div className={cn("flex flex-col-reverse gap-2", "sm:flex-row sm:justify-end", className)} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogTitle
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogTitleElement = React.ElementRef<typeof AlertDialogPrimitive.Title>;
+type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
+
+const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+  ),
+);
+
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogDescription
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogDescriptionElement = React.ElementRef<typeof AlertDialogPrimitive.Description>;
+type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
+
+const AlertDialogDescription = React.forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Description ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  ),
+);
+
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogAction
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimitive.Action>;
+type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
+
+const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Action ref={ref} className={buttonVariants({ className })} {...props} />
+  ),
+);
+
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDialogCancel
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimitive.Cancel>;
+type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
+
+const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPrimitive.Cancel ref={ref} className={buttonVariants({ variant: "outline", className })} {...props} />
+  ),
+);
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  type AlertDialogProps,
+  type AlertDialogTriggerProps,
+  type AlertDialogContentProps,
+  type AlertDialogHeaderProps,
+  type AlertDialogFooterProps,
+  type AlertDialogTitleProps,
+  type AlertDialogDescriptionProps,
+  type AlertDialogActionProps,
+  type AlertDialogCancelProps,
+};

package/src/react/alert.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { type VariantProps } from "cva";
+import { cn, cva } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Alert
+ * -------------------------------------------------------------------------- */
+
+const alertVariants = cva({
+  base: "[&>svg+div]:-translate-y-0.75 relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  variants: {
+    variant: {
+      default: "bg-background text-foreground [&>svg]:text-foreground",
+      destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type AlertVariantsProps = VariantProps<typeof alertVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Alert
+ * -------------------------------------------------------------------------- */
+
+type AlertElement = HTMLDivElement;
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & AlertVariantsProps;
+
+const Alert = React.forwardRef<AlertElement, AlertProps>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={alertVariants({ variant, className })} {...props} />
+));
+
+Alert.displayName = "Alert";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertTitle
+ * -------------------------------------------------------------------------- */
+
+type AlertTitleElement = HTMLHeadingElement;
+type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+const AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>(({ children, className, ...props }, ref) => (
+  <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props}>
+    {children}
+  </h5>
+));
+
+AlertTitle.displayName = "AlertTitle";
+
+/* -----------------------------------------------------------------------------
+ * Component: AlertDescription
+ * -------------------------------------------------------------------------- */
+
+type AlertDescriptionElement = HTMLDivElement;
+type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+
+const AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+
+AlertDescription.displayName = "AlertDescription";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Alert, AlertTitle, AlertDescription, type AlertProps, type AlertTitleProps, type AlertDescriptionProps };

package/src/react/avatar.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Avatar
+ * -------------------------------------------------------------------------- */
+
+type AvatarElement = React.ElementRef<typeof AvatarPrimitive.Root>;
+type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
+
+const Avatar = React.forwardRef<AvatarElement, AvatarProps>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarImage
+ * -------------------------------------------------------------------------- */
+
+type AvatarImageElement = React.ElementRef<typeof AvatarPrimitive.Image>;
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+
+const AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square size-full", className)} {...props} />
+));
+
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Component: AvatarFallback
+ * -------------------------------------------------------------------------- */
+
+type AvatarFallbackElement = React.ElementRef<typeof AvatarPrimitive.Fallback>;
+type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
+
+const AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+    {...props}
+  />
+));
+
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Avatar, AvatarImage, AvatarFallback, type AvatarProps, type AvatarImageProps, type AvatarFallbackProps };

package/src/react/badge.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { type VariantProps } from "cva";
+import { cva } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Badge
+ * -------------------------------------------------------------------------- */
+
+const badgeVariants = cva({
+  base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground border-transparent shadow",
+      secondary: "bg-secondary text-secondary-foreground border-transparent",
+      destructive: "bg-destructive text-destructive-foreground border-transparent shadow",
+      outline: "text-foreground",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+type BadgeVariantsProps = VariantProps<typeof badgeVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Badge
+ * -------------------------------------------------------------------------- */
+
+type BadgeProps = React.HTMLAttributes<HTMLDivElement> & BadgeVariantsProps;
+
+function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element {
+  return <div className={badgeVariants({ variant, className })} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Badge, type BadgeProps };

package/src/react/breadcrumb.tsx

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Breadcrumb
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbElement = HTMLElement;
+
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  separator?: React.ReactNode;
+}
+
+const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, ref) => (
+  <nav ref={ref} aria-label="breadcrumb" {...props} />
+));
+
+Breadcrumb.displayName = "Breadcrumb";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbList
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbListElement = HTMLOListElement;
+type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
+
+const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+
+BreadcrumbList.displayName = "BreadcrumbList";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbItem
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbItemElement = HTMLLIElement;
+type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
+
+const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+));
+
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbLink
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbLinkElement = HTMLAnchorElement;
+
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  asChild?: boolean;
+}
+
+const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
+  ({ asChild, className, ...props }, ref) => {
+    const Component = asChild ? Slot : "a";
+
+    return <Component ref={ref} className={cn("transition", "hover:text-foreground", className)} {...props} />;
+  },
+);
+
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbPage
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbPageElement = HTMLSpanElement;
+type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
+
+const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("text-foreground font-normal", className)}
+    {...props}
+  />
+));
+
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbSeparator
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbSeparatorProps = React.LiHTMLAttributes<HTMLLIElement>;
+
+function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): React.JSX.Element {
+  return (
+    <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: BreadcrumbEllipsis
+ * -------------------------------------------------------------------------- */
+
+type BreadcrumbEllipsisProps = React.HTMLAttributes<HTMLSpanElement>;
+
+function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): React.JSX.Element {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-4 items-center justify-center", className)}
+      {...props}
+    >
+      <DotsHorizontalIcon className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  type BreadcrumbProps,
+  type BreadcrumbListProps,
+  type BreadcrumbItemProps,
+  type BreadcrumbLinkProps,
+  type BreadcrumbPageProps,
+  type BreadcrumbSeparatorProps,
+  type BreadcrumbEllipsisProps,
+};

package/src/react/button.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import { Fragment } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps } from "cva";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { cva } from "../lib/utils";
+import { Spinner } from "./spinner";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Button
+ * -------------------------------------------------------------------------- */
+
+const buttonVariants = cva({
+  base: "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
+      destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline",
+      outline: "border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
+    },
+    size: {
+      default: "h-10 px-4",
+      xs: "h-8 px-2",
+      sm: "h-9 px-3",
+      lg: "h-11 px-8",
+      icon: "size-10",
+      "icon-xs": "size-8",
+      "icon-sm": "size-9",
+      "icon-lg": "size-11",
+    },
+    loading: {
+      true: "relative",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+    loading: false,
+  },
+});
+
+type ButtonVariantsProps = VariantProps<typeof buttonVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+type ButtonElement = HTMLButtonElement;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<ButtonElement, ButtonProps>(
+  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
+    const Component = asChild ? Slot : "button";
+    const ComponentLoading = asChild ? "span" : Fragment;
+    const disabled = loading || props.disabled;
+
+    return (
+      <Component
+        ref={ref}
+        type={asChild ? undefined : "button"}
+        className={buttonVariants({ variant, size, loading, className })}
+        {...props}
+        disabled={disabled}
+      >
+        {loading ? (
+          <ComponentLoading>
+            <span aria-hidden className="invisible contents">
+              {children}
+            </span>
+            <VisuallyHidden>{children}</VisuallyHidden>
+            <span className="absolute inset-0 flex items-center justify-center">
+              <Spinner />
+            </span>
+          </ComponentLoading>
+        ) : (
+          children
+        )}
+      </Component>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };

package/src/react/calendar.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+import { type DateRange, DayPicker, type DayPickerProps, type StyledComponent } from "react-day-picker";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+/* -----------------------------------------------------------------------------
+ * Component: Calendar
+ * -------------------------------------------------------------------------- */
+
+function ChevronLeft({ children: _, ...props }: StyledComponent): React.JSX.Element {
+  return <ChevronLeftIcon className="size-4" {...props} />;
+}
+
+function ChevronRight({ children: _, ...props }: StyledComponent): React.JSX.Element {
+  return <ChevronRightIcon className="size-4" {...props} />;
+}
+
+type CalendarProps = DayPickerProps;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps): React.JSX.Element {
+  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: buttonVariants({
+          variant: "outline",
+          className: "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        }),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-xs",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-start)]:rounded-l-md [&:has(>.day-range-end)]:rounded-r-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: buttonVariants({
+          variant: "ghost",
+          className: "size-9 p-0 font-normal aria-selected:opacity-100",
+        }),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ChevronLeft,
+        IconRight: ChevronRight,
+      }}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Calendar, type CalendarProps, type DateRange };