@cntyclub/ui-react 0.1.0

package/src/components/ui/badge-group.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowRightIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const badgeGroupVariants = cva(
+  "relative inline-flex max-w-full shrink-0 items-center gap-2 whitespace-nowrap border border-transparent font-medium text-sm outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background sm:text-xs [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button,a&]:cursor-pointer [button,a&]:pointer-coarse:after:absolute [button,a&]:pointer-coarse:after:size-full [button,a&]:pointer-coarse:after:min-h-11 [button,a&]:pointer-coarse:after:min-w-11",
+  {
+    compoundVariants: [
+      {
+        className: "bg-secondary text-secondary-foreground",
+        color: "gray",
+        variant: "pill",
+      },
+      {
+        className: "bg-brand/12 text-sidebar-primary dark:bg-brand/20",
+        color: "brand",
+        variant: "pill",
+      },
+      {
+        className:
+          "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+        color: "error",
+        variant: "pill",
+      },
+      {
+        className: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+        color: "warning",
+        variant: "pill",
+      },
+      {
+        className: "bg-success/8 text-success-foreground dark:bg-success/16",
+        color: "success",
+        variant: "pill",
+      },
+    ],
+    defaultVariants: {
+      align: "leading",
+      color: "gray",
+      variant: "pill",
+    },
+    variants: {
+      align: {
+        leading: "p-1 pe-2.5",
+        trailing: "p-1 ps-3",
+      },
+      color: {
+        brand: "",
+        error: "",
+        gray: "",
+        success: "",
+        warning: "",
+      },
+      variant: {
+        modern:
+          "rounded-[10px] border-input bg-background text-foreground shadow-xs dark:bg-input/32",
+        pill: "rounded-full",
+      },
+    },
+  },
+);
+
+type BadgeGroupColor = NonNullable<
+  VariantProps<typeof badgeGroupVariants>["color"]
+>;
+
+/** Ring tint of the inner pill badge, per color. */
+const pillBadgeRing: Record<BadgeGroupColor, string> = {
+  brand: "ring-brand/48",
+  error: "ring-destructive/32",
+  gray: "ring-border",
+  success: "ring-success/32",
+  warning: "ring-warning/40",
+};
+
+/** Status dot of the inner modern badge, per color. */
+const modernBadgeDot: Record<BadgeGroupColor, string> = {
+  brand: "bg-brand",
+  error: "bg-destructive",
+  gray: "bg-muted-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+};
+
+interface BadgeGroupProps
+  extends Omit<useRender.ComponentProps<"span">, "color"> {
+  /** `pill` is a tonal, fully-rounded chip; `modern` is a bordered card-style chip with a status dot. */
+  variant?: VariantProps<typeof badgeGroupVariants>["variant"];
+  color?: BadgeGroupColor;
+  /** Which side of the message the inner badge sits on. */
+  align?: VariantProps<typeof badgeGroupVariants>["align"];
+  /** Short label rendered inside the inner badge. */
+  badge: React.ReactNode;
+  /** Arrow shown after the message (leading) or inside the badge (trailing). Pass `null` to hide. */
+  icon?: React.ReactNode;
+}
+
+function BadgeGroup({
+  className,
+  variant = "pill",
+  color = "gray",
+  align = "leading",
+  badge,
+  icon,
+  children,
+  render,
+  ...props
+}: BadgeGroupProps) {
+  const arrow =
+    icon === null ? null : (icon ?? <ArrowRightIcon className="rtl:-scale-x-100" />);
+
+  const innerBadge = (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center gap-1.5 bg-background px-2.5 py-0.5",
+        variant === "modern"
+          ? "rounded-md border border-input shadow-xs dark:bg-input/32"
+          : cn("rounded-full ring-1 ring-inset", pillBadgeRing[color]),
+        align === "trailing" && "pe-2",
+      )}
+      data-slot="badge-group-badge"
+    >
+      {variant === "modern" ? (
+        <span
+          className={cn("size-1.5 rounded-full", modernBadgeDot[color])}
+          data-slot="badge-group-dot"
+        />
+      ) : null}
+      {badge}
+      {align === "trailing" ? arrow : null}
+    </span>
+  );
+
+  const defaultProps = {
+    className: cn(badgeGroupVariants({ align, className, color, variant })),
+    "data-slot": "badge-group",
+    children: (
+      <>
+        {align === "leading" ? innerBadge : null}
+        <span className="truncate" data-slot="badge-group-text">
+          {children}
+        </span>
+        {align === "leading" ? arrow : innerBadge}
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+export { BadgeGroup, badgeGroupVariants };

package/src/components/ui/badge.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const badgeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button,a&]:cursor-pointer [button,a&]:pointer-coarse:after:absolute [button,a&]:pointer-coarse:after:size-full [button,a&]:pointer-coarse:after:min-h-11 [button,a&]:pointer-coarse:after:min-w-11",
+  {
+    compoundVariants: [
+      { className: "rounded-sm", shape: "default", size: ["default", "lg"] },
+      {
+        className: "rounded-[calc(var(--radius-sm)-2px)]",
+        shape: "default",
+        size: "sm",
+      },
+    ],
+    defaultVariants: {
+      shape: "default",
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      shape: {
+        default: "",
+        pill: "rounded-full",
+      },
+      size: {
+        default:
+          "h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs",
+        lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm",
+        sm: "h-5 min-w-5 px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]",
+      },
+      variant: {
+        default:
+          "bg-primary text-primary-foreground [button,a&]:hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white [button,a&]:hover:bg-destructive/90",
+        error:
+          "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+        info: "bg-info/8 text-info-foreground dark:bg-info/16",
+        modern:
+          "border-input bg-background text-foreground shadow-xs dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+        outline:
+          "border-input bg-background text-foreground dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+        secondary:
+          "bg-secondary text-secondary-foreground [button,a&]:hover:bg-secondary/90",
+        success: "bg-success/8 text-success-foreground dark:bg-success/16",
+        warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+      },
+    },
+  },
+);
+
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  size?: VariantProps<typeof badgeVariants>["size"];
+  shape?: VariantProps<typeof badgeVariants>["shape"];
+}
+
+function Badge({
+  className,
+  variant,
+  size,
+  shape,
+  render,
+  ...props
+}: BadgeProps) {
+  const defaultProps = {
+    className: cn(badgeVariants({ className, shape, size, variant })),
+    "data-slot": "badge",
+  };
+
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(defaultProps, props),
+    render,
+  });
+}
+
+/** A small status dot. Inherits the badge's text color; recolor via className. */
+function BadgeDot({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "size-1.5 shrink-0 rounded-full bg-current sm:size-[5px]",
+        className,
+      )}
+      data-slot="badge-dot"
+      {...props}
+    />
+  );
+}
+
+/** A tiny round avatar image sized to sit inside a badge. */
+function BadgeAvatar({ alt, className, ...props }: React.ComponentProps<"img">) {
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt}
+      className={cn(
+        "size-4 shrink-0 rounded-full object-cover sm:size-3.5",
+        className,
+      )}
+      data-slot="badge-avatar"
+      {...props}
+    />
+  );
+}
+
+/** A round country flag. `country` is an ISO 3166-1 alpha-2 code (e.g. "AU"). */
+function BadgeFlag({
+  alt,
+  className,
+  country,
+  src,
+  ...props
+}: React.ComponentProps<"img"> & { country?: string }) {
+  return (
+    // biome-ignore lint/a11y/useAltText: alt forwarded via props
+    <img
+      alt={alt ?? country}
+      className={cn(
+        "size-4 shrink-0 rounded-full object-cover sm:size-3.5",
+        className,
+      )}
+      data-slot="badge-flag"
+      src={
+        src ??
+        (country
+          ? `https://hatscripts.github.io/circle-flags/flags/${country.toLowerCase()}.svg`
+          : undefined)
+      }
+      {...props}
+    />
+  );
+}
+
+/** A small remove button for dismissible badges. Renders an X by default. */
+function BadgeCloseButton({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  return (
+    <button
+      className={cn(
+        "-me-px inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full text-current opacity-64 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+        className,
+      )}
+      data-slot="badge-close-button"
+      type="button"
+      {...props}
+    >
+      {children ?? <XIcon className="pointer-events-none" />}
+    </button>
+  );
+}
+
+export {
+  Badge,
+  BadgeDot,
+  BadgeAvatar,
+  BadgeFlag,
+  BadgeCloseButton,
+  badgeVariants,
+};

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      className={cn(
+        "wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5",
+        className,
+      )}
+      data-slot="breadcrumb-list"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn("inline-flex items-center gap-1.5", className)}
+      data-slot="breadcrumb-item"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  const defaultProps = {
+    className: cn("transition-colors hover:text-foreground", className),
+    "data-slot": "breadcrumb-link",
+  };
+
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(defaultProps, props),
+    render,
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    // biome-ignore lint(a11y/useFocusableInteractive): known
+    <span
+      aria-current="page"
+      aria-disabled="true"
+      className={cn("font-normal text-foreground", className)}
+      data-slot="breadcrumb-page"
+      role="link"
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      aria-hidden="true"
+      className={cn("opacity-80 [&>svg]:size-4", className)}
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden="true"
+      className={className}
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const buttonVariants = cva(
+  "[&_svg]:-mx-0.5 [&_img]:-mx-0.5 [&_picture]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-[box-shadow,filter] duration-100 [:active:not(:disabled)]:brightness-95 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_img:not([class*='opacity-'])]:opacity-80 [&_picture:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 [&_img:not([class*='size-'])]:size-4.5 [&_picture:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 sm:[&_img:not([class*='size-'])]:size-4 sm:[&_picture:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_img]:pointer-events-none [&_picture]:pointer-events-none [&_svg]:shrink-0 [&_img]:shrink-0 [&_picture]:shrink-0",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+        icon: "size-9 sm:size-8",
+        "icon-lg": "size-10 sm:size-9",
+        "icon-sm": "size-8 sm:size-7",
+        "icon-xl":
+          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 [&_img:not([class*='size-'])]:size-5 [&_picture:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5 sm:[&_img:not([class*='size-'])]:size-4.5 sm:[&_picture:not([class*='size-'])]:size-4.5",
+        "icon-xs":
+          "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 not-in-data-[slot=input-group]:[&_img:not([class*='size-'])]:size-4 not-in-data-[slot=input-group]:[&_picture:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5 sm:not-in-data-[slot=input-group]:[&_img:not([class*='size-'])]:size-3.5 sm:not-in-data-[slot=input-group]:[&_picture:not([class*='size-'])]:size-3.5",
+        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 [&_img:not([class*='size-'])]:size-5 [&_picture:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5 sm:[&_img:not([class*='size-'])]:size-4.5 sm:[&_picture:not([class*='size-'])]:size-4.5",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 [&_img:not([class*='size-'])]:size-4 [&_picture:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 sm:[&_img:not([class*='size-'])]:size-3.5 sm:[&_picture:not([class*='size-'])]:size-3.5",
+      },
+      variant: {
+        default:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
+        destructive:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-destructive/90",
+        "destructive-outline":
+          "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
+        "destructive-ghost":
+          "border-transparent text-destructive-foreground data-pressed:bg-destructive/8 [:hover,[data-pressed]]:bg-destructive/8",
+        ghost:
+          "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
+        link: "border-transparent pointer-coarse:underline pointer-coarse:underline-offset-4 pointer-fine:after:absolute pointer-fine:after:inset-x-3 pointer-fine:after:bottom-1.5 pointer-fine:after:h-px pointer-fine:after:origin-right pointer-fine:after:scale-x-0 pointer-fine:after:bg-current pointer-fine:after:transition-transform pointer-fine:after:duration-300 pointer-fine:after:ease-out pointer-fine:hover:after:origin-left pointer-fine:hover:after:scale-x-100 pointer-fine:data-pressed:after:origin-left pointer-fine:data-pressed:after:scale-x-100",
+        "link-muted":
+          "border-transparent text-muted-foreground transition-[box-shadow,filter,color] [:hover,[data-pressed]]:text-foreground pointer-coarse:underline pointer-coarse:underline-offset-4 pointer-fine:after:absolute pointer-fine:after:inset-x-3 pointer-fine:after:bottom-1.5 pointer-fine:after:h-px pointer-fine:after:origin-right pointer-fine:after:scale-x-0 pointer-fine:after:bg-current pointer-fine:after:transition-transform pointer-fine:after:duration-300 pointer-fine:after:ease-out pointer-fine:hover:after:origin-left pointer-fine:hover:after:scale-x-100 pointer-fine:data-pressed:after:origin-left pointer-fine:data-pressed:after:scale-x-100",
+        outline:
+          "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
+      },
+    },
+  },
+);
+
+export interface ButtonProps extends useRender.ComponentProps<"button"> {
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+}
+
+function Button({ className, variant, size, render, ...props }: ButtonProps) {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    className: cn(buttonVariants({ className, size, variant })),
+    "data-slot": "button",
+    type: typeValue,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export { Button, buttonVariants };

package/src/components/ui/calendar.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+} from "lucide-react";
+import type * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../../lib/utils/css";
+
+const buttonClassNames =
+  "relative flex size-(--cell-size) text-base sm:text-sm items-center justify-center rounded-lg text-foreground not-in-data-selected:hover:bg-accent disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  components: userComponents,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  const defaultClassNames = {
+    button_next: buttonClassNames,
+    button_previous: buttonClassNames,
+    caption_label:
+      "text-base sm:text-sm font-medium flex items-center gap-2 h-full",
+    day: "size-(--cell-size) text-sm py-px",
+    day_button: cn(
+      buttonClassNames,
+      "in-[[data-selected]:not(.range-middle)]:transition-[color,background-color,border-radius,box-shadow] in-data-disabled:pointer-events-none focus-visible:z-1 in-data-selected:bg-primary in-data-selected:text-primary-foreground in-data-disabled:text-muted-foreground/70 in-data-disabled:line-through in-data-outside:text-muted-foreground/70 in-data-selected:in-data-outside:text-primary-foreground outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] in-[.range-start:not(.range-end)]:rounded-e-none in-[.range-end:not(.range-start)]:rounded-s-none in-[.range-middle]:rounded-none in-[.range-middle]:in-data-selected:bg-accent in-[.range-middle]:in-data-selected:text-foreground",
+    ),
+    dropdown: "absolute bg-popover inset-0 opacity-0",
+    dropdown_root:
+      "relative has-focus:border-ring has-focus:ring-ring/50 has-focus:ring-[3px] border border-input shadow-xs/5 rounded-lg px-[calc(--spacing(3)-1px)] h-9 sm:h-8 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-me-1",
+    dropdowns:
+      "w-full flex items-center text-base sm:text-sm justify-center h-(--cell-size) gap-1.5 *:[span]:font-medium",
+    hidden: "invisible",
+    month: "w-full",
+    month_caption:
+      "relative mx-(--cell-size) px-1 mb-1 flex h-(--cell-size) items-center justify-center z-2",
+    months: "relative flex flex-col sm:flex-row gap-2",
+    nav: "absolute top-0 flex w-full justify-between z-1",
+    outside:
+      "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",
+    range_end: "range-end",
+    range_middle: "range-middle",
+    range_start: "range-start",
+    today:
+      "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-1 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+    week_number:
+      "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/70",
+    weekday:
+      "size-(--cell-size) p-0 text-xs font-medium text-muted-foreground/70",
+  };
+  const mergedClassNames: typeof defaultClassNames = Object.keys(
+    defaultClassNames,
+  ).reduce(
+    (acc, key) => {
+      const userClass = classNames?.[key as keyof typeof classNames];
+      const baseClass =
+        defaultClassNames[key as keyof typeof defaultClassNames];
+
+      acc[key as keyof typeof defaultClassNames] = userClass
+        ? cn(baseClass, userClass)
+        : baseClass;
+
+      return acc;
+    },
+    { ...defaultClassNames } as typeof defaultClassNames,
+  );
+
+  const defaultComponents = {
+    Chevron: ({
+      className,
+      orientation,
+      ...props
+    }: {
+      className?: string;
+      orientation?: "left" | "right" | "up" | "down";
+    }) => {
+      if (orientation === "left") {
+        return (
+          <ChevronLeftIcon
+            className={cn(className, "rtl:rotate-180")}
+            {...props}
+            aria-hidden="true"
+          />
+        );
+      }
+
+      if (orientation === "right") {
+        return (
+          <ChevronRightIcon
+            className={cn(className, "rtl:rotate-180")}
+            {...props}
+            aria-hidden="true"
+          />
+        );
+      }
+
+      return (
+        <ChevronsUpDownIcon
+          className={className}
+          {...props}
+          aria-hidden="true"
+        />
+      );
+    },
+  };
+
+  const mergedComponents = {
+    ...defaultComponents,
+    ...userComponents,
+  };
+
+  return (
+    <DayPicker
+      className={cn(
+        "w-fit [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)]",
+        className,
+      )}
+      classNames={mergedClassNames}
+      components={mergedComponents}
+      data-slot="calendar"
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+      }}
+      mode="single"
+      showOutsideDays={showOutsideDays}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };