dsh-plugin-image-workbench 0.0.0-stage → 1.1.5

package/vendor/chatgpt2api/source/web/src/components/top-nav.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Menu } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+
+import { HeaderActions } from "@/components/header-actions";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import webConfig from "@/constants/common-env";
+import { fetchThirdPartyApps, type ThirdPartyAppsSettings } from "@/lib/api";
+import { getValidatedAuthSession } from "@/lib/auth-session";
+import { cn } from "@/lib/utils";
+import { clearStoredAuthSession, type StoredAuthSession } from "@/store/auth";
+
+const adminNavItems = [
+  { href: "/image", label: "生图" },
+  { href: "/accounts", label: "号池管理" },
+  { href: "/image-manager", label: "图片管理" },
+  { href: "/logs", label: "日志管理" },
+  { href: "/debug", label: "调试" },
+  { href: "/settings", label: "设置" },
+];
+
+const userNavItems = [{ href: "/image", label: "画图" }];
+
+function buildThirdPartyHref(appUrl: string, baseUrl: string, apiKey: string) {
+  const url = appUrl.trim();
+  try {
+    const target = new URL(url);
+    target.searchParams.set("apiKey", apiKey);
+    target.searchParams.set("baseUrl", baseUrl);
+    return target.toString();
+  } catch {
+    return `${url}${url.includes("?") ? "&" : "?"}apiKey=${encodeURIComponent(apiKey)}&baseUrl=${encodeURIComponent(baseUrl)}`;
+  }
+}
+
+export function TopNav() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [session, setSession] = useState<StoredAuthSession | null | undefined>(undefined);
+  const [thirdPartyApps, setThirdPartyApps] = useState<ThirdPartyAppsSettings | null>(null);
+  const [isCanvasDialogOpen, setIsCanvasDialogOpen] = useState(false);
+
+  useEffect(() => {
+    let active = true;
+
+    const load = async () => {
+      if (pathname === "/login") {
+        if (!active) {
+          return;
+        }
+        setSession(null);
+        return;
+      }
+
+      const storedSession = await getValidatedAuthSession();
+      if (!active) {
+        return;
+      }
+      setSession(storedSession);
+    };
+
+    void load();
+    return () => {
+      active = false;
+    };
+  }, [pathname]);
+
+  useEffect(() => {
+    if (!session) {
+      setThirdPartyApps(null);
+      return;
+    }
+    let active = true;
+    const load = async () => {
+      try {
+        const data = await fetchThirdPartyApps();
+        if (active) {
+          setThirdPartyApps(data.third_party_apps);
+        }
+      } catch {
+        if (active) {
+          setThirdPartyApps(null);
+        }
+      }
+    };
+    const reload = () => void load();
+
+    void load();
+    window.addEventListener("third-party-apps-updated", reload);
+    return () => {
+      active = false;
+      window.removeEventListener("third-party-apps-updated", reload);
+    };
+  }, [session]);
+
+  const handleLogout = async () => {
+    await clearStoredAuthSession();
+    router.replace("/login");
+  };
+
+  if (pathname === "/login" || session === undefined || !session) {
+    return null;
+  }
+
+  const navItems = session.role === "admin" ? adminNavItems : userNavItems;
+  const roleLabel = session.role === "admin" ? "管理员" : "普通用户";
+  const displayName = session.name.trim() || roleLabel;
+  const baseUrl = webConfig.apiUrl.replace(/\/$/, "") || window.location.origin;
+  const canvas = thirdPartyApps?.infinite_canvas;
+  const canvasHref = canvas?.enabled && canvas.url.trim() ? buildThirdPartyHref(canvas.url, baseUrl, session.key) : "";
+  const canvasDisplayHref = canvasHref ? decodeURIComponent(canvasHref) : "";
+
+  const handleCanvasOpen = () => {
+    if (!canvasHref) {
+      return;
+    }
+    setIsCanvasDialogOpen(true);
+  };
+
+  const confirmCanvasOpen = () => {
+    if (canvasHref) {
+      window.open(canvasHref, "_blank", "noopener,noreferrer");
+    }
+    setIsCanvasDialogOpen(false);
+  };
+
+  return (
+    <>
+      <header className="border-b border-stone-100/50 dark:border-white/10">
+        <div className="flex min-h-12 flex-col gap-1 px-3 py-2 sm:h-12 sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-6 sm:py-0">
+          <div className="flex items-center justify-between gap-2 sm:justify-start sm:gap-3">
+            <Sheet>
+              <SheetTrigger className="inline-flex size-8 items-center justify-center text-stone-700 transition hover:text-stone-950 sm:hidden dark:text-stone-200 dark:hover:text-white">
+                <Menu className="size-4" />
+                <span className="sr-only">打开导航</span>
+              </SheetTrigger>
+              <SheetContent side="left">
+                <SheetHeader>
+                  <SheetTitle>chatgpt2api</SheetTitle>
+                  <span className="text-xs text-stone-500 dark:text-stone-400">{roleLabel} · {displayName}</span>
+                </SheetHeader>
+                <nav className="mt-8 flex flex-col gap-1">
+                  {canvasHref ? (
+                    <SheetClose asChild>
+                      <button
+                        type="button"
+                        className="flex items-center rounded-xl px-3 py-2.5 text-left text-sm font-medium text-stone-600 transition hover:bg-stone-100 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-white/10 dark:hover:text-white"
+                        onClick={handleCanvasOpen}
+                      >
+                        无限画布
+                      </button>
+                    </SheetClose>
+                  ) : null}
+                  {navItems.map((item) => {
+                    const active = pathname === item.href;
+                    const className = cn(
+                      "flex items-center rounded-xl px-3 py-2.5 text-sm font-medium transition",
+                      active ? "bg-stone-950 text-white dark:bg-white dark:text-stone-950" : "text-stone-600 hover:bg-stone-100 hover:text-stone-950 dark:text-stone-300 dark:hover:bg-white/10 dark:hover:text-white",
+                    );
+                    return (
+                      <SheetClose asChild key={item.href}>
+                        <Link href={item.href} className={className}>{item.label}</Link>
+                      </SheetClose>
+                    );
+                  })}
+                </nav>
+                <SheetFooter>
+                  <button
+                    type="button"
+                    className="rounded-xl border border-stone-200 px-3 py-2.5 text-left text-sm font-medium text-stone-500 transition hover:text-stone-950 dark:border-white/10 dark:text-stone-300 dark:hover:text-white"
+                    onClick={() => void handleLogout()}
+                  >
+                    退出
+                  </button>
+                </SheetFooter>
+              </SheetContent>
+            </Sheet>
+            <Link
+              href="/image"
+              className="shrink-0 py-1 text-[15px] font-bold tracking-tight text-stone-950 transition hover:text-stone-700 dark:text-stone-50 dark:hover:text-white"
+            >
+              chatgpt2api
+            </Link>
+            <HeaderActions className="ml-auto sm:hidden" showGithubText={false} />
+          </div>
+          <nav className="hide-scrollbar -mx-1 hidden min-w-0 flex-1 gap-1 overflow-x-auto px-1 sm:mx-0 sm:flex sm:justify-center sm:gap-8 sm:overflow-visible sm:px-0">
+            {canvasHref ? (
+              <button
+                type="button"
+                onClick={handleCanvasOpen}
+                className="relative shrink-0 whitespace-nowrap rounded-full px-2.5 py-1 text-[13px] font-medium text-stone-500 transition hover:text-stone-900 sm:rounded-none sm:px-0 sm:text-[15px] dark:text-stone-400 dark:hover:text-stone-100"
+              >
+                无限画布
+              </button>
+            ) : null}
+            {navItems.map((item) => {
+              const active = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={cn(
+                    "relative shrink-0 whitespace-nowrap rounded-full px-2.5 py-1 text-[13px] font-medium transition sm:rounded-none sm:px-0 sm:text-[15px]",
+                    active
+                      ? "bg-stone-950 text-white sm:bg-transparent sm:font-semibold sm:text-stone-950 dark:bg-white dark:text-stone-950 dark:sm:bg-transparent dark:sm:text-white"
+                      : "text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100",
+                  )}
+                >
+                  {item.label}
+                  {active ? <span className="absolute inset-x-0 -bottom-[1px] hidden h-0.5 bg-stone-950 dark:bg-white sm:block" /> : null}
+                </Link>
+              );
+            })}
+          </nav>
+          <div className="hidden items-center justify-end gap-2 sm:flex sm:gap-3">
+            <HeaderActions />
+            <span className="hidden rounded-md bg-stone-100 px-2 py-1 text-[10px] font-medium text-stone-500 dark:bg-white/8 dark:text-stone-300 sm:inline-block sm:text-[11px]">
+              {roleLabel} · {displayName}
+            </span>
+            <button
+              type="button"
+              className="py-1 text-xs text-stone-400 transition hover:text-stone-700 dark:text-stone-500 dark:hover:text-stone-200 sm:text-sm"
+              onClick={() => void handleLogout()}
+            >
+              退出
+            </button>
+          </div>
+        </div>
+      </header>
+      <Dialog open={isCanvasDialogOpen} onOpenChange={setIsCanvasDialogOpen}>
+        <DialogContent showCloseButton={false} className="rounded-2xl p-6">
+          <DialogHeader className="gap-2">
+            <DialogTitle>跳转到三方应用</DialogTitle>
+            <DialogDescription className="text-sm leading-6">
+              该入口仅供个人测试使用，建议自行本机部署后再长期使用。跳转地址会默认带上本项目地址和当前密钥，用于自动填充连接信息；如果不放心，可以取消后手动前往应用并自行输入。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <div className="text-xs font-medium text-stone-500">完整跳转地址</div>
+            <div className="max-h-28 overflow-auto break-all rounded-xl border border-stone-200 bg-stone-50 px-3 py-2 font-mono text-xs leading-5 text-stone-700">
+              {canvasDisplayHref}
+            </div>
+          </div>
+          <DialogFooter className="pt-2">
+            <DialogClose asChild>
+              <Button type="button" variant="outline" className="rounded-xl border-stone-200 bg-white text-stone-700">
+                取消
+              </Button>
+            </DialogClose>
+            <Button type="button" className="rounded-xl bg-stone-950 text-white hover:bg-stone-800" onClick={confirmCanvasOpen}>
+              继续跳转
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/vendor/chatgpt2api/source/web/src/components/ui/animated-theme-toggler.tsx

@@ -0,0 +1,256 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Moon, Sun } from "lucide-react"
+import { flushSync } from "react-dom"
+
+import { cn } from "@/lib/utils"
+
+export type TransitionVariant =
+  | "circle"
+  | "square"
+  | "triangle"
+  | "diamond"
+  | "hexagon"
+  | "rectangle"
+  | "star"
+
+interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"button"> {
+  duration?: number
+  variant?: TransitionVariant
+  /** When true, the transition expands from the viewport center instead of the button center. */
+  fromCenter?: boolean
+}
+
+function polygonCollapsed(cx: number, cy: number, vertexCount: number): string {
+  const pairs = Array.from(
+    { length: vertexCount },
+    () => `${cx}px ${cy}px`
+  ).join(", ")
+  return `polygon(${pairs})`
+}
+
+function getThemeTransitionClipPaths(
+  variant: TransitionVariant,
+  cx: number,
+  cy: number,
+  maxRadius: number,
+  viewportWidth: number,
+  viewportHeight: number
+): [string, string] {
+  switch (variant) {
+    case "circle":
+      return [
+        `circle(0px at ${cx}px ${cy}px)`,
+        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
+      ]
+    case "square": {
+      const halfW = Math.max(cx, viewportWidth - cx)
+      const halfH = Math.max(cy, viewportHeight - cy)
+      const halfSide = Math.max(halfW, halfH) * 1.05
+      const end = [
+        `${cx - halfSide}px ${cy - halfSide}px`,
+        `${cx + halfSide}px ${cy - halfSide}px`,
+        `${cx + halfSide}px ${cy + halfSide}px`,
+        `${cx - halfSide}px ${cy + halfSide}px`,
+      ].join(", ")
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
+    }
+    case "triangle": {
+      const scale = maxRadius * 2.2
+      const dx = (Math.sqrt(3) / 2) * scale
+      const verts = [
+        `${cx}px ${cy - scale}px`,
+        `${cx + dx}px ${cy + 0.5 * scale}px`,
+        `${cx - dx}px ${cy + 0.5 * scale}px`,
+      ].join(", ")
+      return [polygonCollapsed(cx, cy, 3), `polygon(${verts})`]
+    }
+    case "diamond": {
+      // Slightly larger than the view-transition circle radius so axis-aligned coverage matches the circle reveal.
+      const R = maxRadius * Math.SQRT2
+      const end = [
+        `${cx}px ${cy - R}px`,
+        `${cx + R}px ${cy}px`,
+        `${cx}px ${cy + R}px`,
+        `${cx - R}px ${cy}px`,
+      ].join(", ")
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
+    }
+    case "hexagon": {
+      const R = maxRadius * Math.SQRT2
+      const verts: string[] = []
+      for (let i = 0; i < 6; i++) {
+        const a = -Math.PI / 2 + (i * Math.PI) / 3
+        verts.push(`${cx + R * Math.cos(a)}px ${cy + R * Math.sin(a)}px`)
+      }
+      return [polygonCollapsed(cx, cy, 6), `polygon(${verts.join(", ")})`]
+    }
+    case "rectangle": {
+      const halfW = Math.max(cx, viewportWidth - cx)
+      const halfH = Math.max(cy, viewportHeight - cy)
+      const end = [
+        `${cx - halfW}px ${cy - halfH}px`,
+        `${cx + halfW}px ${cy - halfH}px`,
+        `${cx + halfW}px ${cy + halfH}px`,
+        `${cx - halfW}px ${cy + halfH}px`,
+      ].join(", ")
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
+    }
+    case "star": {
+      // Small overscan so the last frames never leave a 1px seam before the transition group ends.
+      const R = maxRadius * Math.SQRT2 * 1.03
+      const innerRatio = 0.42
+      const starPolygon = (radius: number) => {
+        const verts: string[] = []
+        for (let i = 0; i < 5; i++) {
+          const outerA = -Math.PI / 2 + (i * 2 * Math.PI) / 5
+          verts.push(
+            `${cx + radius * Math.cos(outerA)}px ${cy + radius * Math.sin(outerA)}px`
+          )
+          const innerA = outerA + Math.PI / 5
+          verts.push(
+            `${cx + radius * innerRatio * Math.cos(innerA)}px ${cy + radius * innerRatio * Math.sin(innerA)}px`
+          )
+        }
+        return `polygon(${verts.join(", ")})`
+      }
+      const startR = Math.max(2, R * 0.025)
+      return [starPolygon(startR), starPolygon(R)]
+    }
+    default:
+      return [
+        `circle(0px at ${cx}px ${cy}px)`,
+        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
+      ]
+  }
+}
+
+export const AnimatedThemeToggler = ({
+  className,
+  duration = 400,
+  variant,
+  fromCenter = false,
+  ...props
+}: AnimatedThemeTogglerProps) => {
+  const shape = variant ?? "circle"
+  const [isDark, setIsDark] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const updateTheme = () => {
+      setIsDark(document.documentElement.classList.contains("dark"))
+    }
+
+    updateTheme()
+
+    const observer = new MutationObserver(updateTheme)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+
+    return () => observer.disconnect()
+  }, [])
+
+  const toggleTheme = useCallback(() => {
+    const button = buttonRef.current
+    if (!button) return
+
+    const viewportWidth = window.visualViewport?.width ?? window.innerWidth
+    const viewportHeight = window.visualViewport?.height ?? window.innerHeight
+
+    let x: number
+    let y: number
+    if (fromCenter) {
+      x = viewportWidth / 2
+      y = viewportHeight / 2
+    } else {
+      const { top, left, width, height } = button.getBoundingClientRect()
+      x = left + width / 2
+      y = top + height / 2
+    }
+
+    const maxRadius = Math.hypot(
+      Math.max(x, viewportWidth - x),
+      Math.max(y, viewportHeight - y)
+    )
+
+    const applyTheme = () => {
+      const newTheme = !isDark
+      setIsDark(newTheme)
+      document.documentElement.classList.toggle("dark")
+      document.documentElement.style.colorScheme = newTheme ? "dark" : "light"
+      localStorage.setItem("chatgpt2api-theme", newTheme ? "dark" : "light")
+    }
+
+    if (typeof document.startViewTransition !== "function") {
+      applyTheme()
+      return
+    }
+
+    const clipPath = getThemeTransitionClipPaths(
+      shape,
+      x,
+      y,
+      maxRadius,
+      viewportWidth,
+      viewportHeight
+    )
+
+    const root = document.documentElement
+    root.dataset.magicuiThemeVt = "active"
+    root.style.setProperty(
+      "--magicui-theme-toggle-vt-duration",
+      `${duration}ms`
+    )
+    // Pin the collapsed clip-path via CSS so Firefox does not paint the new
+    // theme unclipped between snapshot and the ready.then() JS animation.
+    root.style.setProperty("--magicui-theme-vt-clip-from", clipPath[0])
+    const cleanup = () => {
+      delete root.dataset.magicuiThemeVt
+      root.style.removeProperty("--magicui-theme-toggle-vt-duration")
+      root.style.removeProperty("--magicui-theme-vt-clip-from")
+    }
+
+    const transition = document.startViewTransition(() => {
+      flushSync(applyTheme)
+    })
+    if (typeof transition?.finished?.finally === "function") {
+      transition.finished.finally(cleanup)
+    } else {
+      cleanup()
+    }
+
+    const ready = transition?.ready
+    if (ready && typeof ready.then === "function") {
+      ready.then(() => {
+        document.documentElement.animate(
+          {
+            clipPath,
+          },
+          {
+            duration,
+            // Star: linear avoids easing overshoot that fights polygon interpolation at t→1; VT group duration is synced above.
+            easing: shape === "star" ? "linear" : "ease-in-out",
+            fill: "forwards",
+            pseudoElement: "::view-transition-new(root)",
+          }
+        )
+      })
+    }
+  }, [shape, fromCenter, duration, isDark])
+
+  return (
+    <button
+      type="button"
+      ref={buttonRef}
+      onClick={toggleTheme}
+      className={cn(className)}
+      {...props}
+    >
+      {isDark ? <Sun /> : <Moon />}
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  )
+}

package/vendor/chatgpt2api/source/web/src/components/ui/badge.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { cva, type VariantProps } 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-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/10 text-primary",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border bg-background text-foreground",
+        success:
+          "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300",
+        warning:
+          "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-950/30 dark:text-amber-300",
+        danger:
+          "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800 dark:bg-rose-950/30 dark:text-rose-300",
+        info: "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950/30 dark:text-sky-300",
+        violet:
+          "border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-800 dark:bg-violet-950/30 dark:text-violet-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/vendor/chatgpt2api/source/web/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } 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 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 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-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: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/vendor/chatgpt2api/source/web/src/components/ui/calendar.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-1 text-sm", className)}
+      classNames={{
+        months: "flex flex-col gap-4 sm:flex-row",
+        month: "relative",
+        month_caption: "flex h-9 items-center justify-center font-medium",
+        nav: "absolute inset-x-2 top-2 flex items-center justify-between",
+        button_previous: "inline-flex size-8 items-center justify-center rounded-lg hover:bg-stone-100",
+        button_next: "inline-flex size-8 items-center justify-center rounded-lg hover:bg-stone-100",
+        weekdays: "mt-2 grid grid-cols-7 text-xs text-stone-400",
+        weekday: "flex h-8 items-center justify-center font-normal",
+        week: "grid grid-cols-7",
+        day: "size-9 p-0 text-center",
+        day_button: "size-9 rounded-lg text-sm transition hover:bg-stone-100",
+        today: "font-semibold text-stone-950",
+        selected: "[&_button]:bg-stone-950 [&_button]:text-white [&_button]:hover:bg-stone-800",
+        outside: "text-stone-300",
+        disabled: "text-stone-300 opacity-50",
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === "left" ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };