umtandClaude Fable 5.1
b22c440139
- pnpm workspace: apps/{web,server}, packages/{contracts,db,domain,adapters,tasks,agent,testkit}
- server: Hono + zod-openapi, API Key auth with scopes, redacting pino logger, SSE event bus with replay, worker heartbeat
- db: Kysely + pg, file migrator, 0001_init (settings/api_key/audit_event/outbox_event)
- web: React Router 7 SPA console shell with 12 workspace placeholders, uhd_web tokens/ui/guard scripts
- docs: ADR-001 (Node over Deno), dev runbook, design system rules
Co-Authored-By: Claude Fable 5.1 <[email protected]>
48 lines
2.3 KiB
TypeScript
48 lines
2.3 KiB
TypeScript
import { zhCN } from "date-fns/locale";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import { DayPicker, type DayPickerProps } from "react-day-picker";
|
|
|
|
import { cn } from "~/lib/utils";
|
|
|
|
// 日历(react-day-picker v10)的玻璃族皮肤:全部走语义 token + 玻璃 hover
|
|
// 语言(中性灰纱、选中 primary 药丸 + 顶部内高光、今日描边)。键盘导航
|
|
// 与 aria 由 DayPicker 自带。默认中文 locale。
|
|
export function Calendar({ className, classNames, ...props }: DayPickerProps) {
|
|
return (
|
|
<DayPicker
|
|
locale={zhCN}
|
|
showOutsideDays
|
|
className={cn("p-3 select-none", className)}
|
|
classNames={{
|
|
months: "relative flex flex-col",
|
|
month: "space-y-2.5",
|
|
nav: "absolute inset-x-0 top-0 z-10 flex items-center justify-between",
|
|
button_previous:
|
|
"inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
|
|
button_next:
|
|
"inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
|
|
month_caption: "flex h-8 items-center justify-center",
|
|
caption_label: "text-sm font-semibold text-foreground",
|
|
month_grid: "w-full border-collapse",
|
|
weekdays: "flex",
|
|
weekday: "w-9 pb-1 text-center text-label font-medium text-muted-foreground/80",
|
|
week: "mt-1 flex",
|
|
day: "p-0",
|
|
day_button:
|
|
"inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-sm font-medium tabular-nums text-foreground/85 transition-colors hover:bg-foreground/[0.06] hover:text-foreground",
|
|
selected: "[&>button]:pill-selected [&>button]:rounded-full",
|
|
today: "[&>button]:border [&>button]:border-primary/35",
|
|
outside: "[&>button]:text-muted-foreground/45",
|
|
disabled: "[&>button]:pointer-events-none [&>button]:opacity-30",
|
|
hidden: "invisible",
|
|
...classNames,
|
|
}}
|
|
components={{
|
|
Chevron: ({ orientation }) =>
|
|
orientation === "left" ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />,
|
|
}}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|