feat(shared-ui): 对齐官方控件并增加组件预览

zhixing-web/src/shared/ui/calendar.tsx

@@ -1,7 +1,14 @@
+import * as React from "react"
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react"
-import { DayPicker, type DayPickerProps } from "react-day-picker"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButtonProps,
+  type DayPickerProps,
+} from "react-day-picker"
 import { zhCN } from "react-day-picker/locale"
 
+import { Button } from "@/shared/ui/button"
 import { cn } from "@/shared/ui/utils"
 
 function Calendar({
@@ -10,36 +17,94 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }: DayPickerProps) {
+  const defaultClassNames = getDefaultClassNames()
+
   return (
     <DayPicker
-      className={cn("p-3", className)}
+      className={cn(
+        "group/calendar w-fit bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:2.25rem]",
+        className,
+      )}
       classNames={{
-        months: "flex flex-col gap-4 sm:flex-row",
-        month: "flex w-full flex-col gap-4",
-        month_caption: "flex items-center justify-center pt-1",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        button_previous:
-          "absolute left-1 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-        button_next:
-          "absolute right-1 inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-        month_grid: "w-full border-collapse",
-        weekdays: "flex",
-        weekday:
-          "w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground",
-        week: "mt-2 flex w-full",
-        day: "relative size-9 p-0 text-center text-sm [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-muted/50 [&:has([aria-selected])]:bg-muted first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day_button:
-          "inline-flex size-9 items-center justify-center rounded-md p-0 font-normal outline-none hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-selected:bg-primary aria-selected:text-primary-foreground",
-        range_start: "day-range-start rounded-l-md bg-muted",
-        range_middle: "rounded-none bg-muted",
-        range_end: "day-range-end rounded-r-md bg-muted",
-        selected: "rounded-md bg-primary text-primary-foreground",
-        today: "bg-muted text-foreground",
-        outside:
-          "day-outside text-muted-foreground opacity-50 aria-selected:bg-muted/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        disabled: "text-muted-foreground opacity-50",
-        hidden: "invisible",
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months,
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          "size-(--cell-size) p-0 select-none",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          "size-(--cell-size) p-0 select-none",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        caption_label: cn(
+          "select-none text-sm font-medium",
+          defaultClassNames.caption_label,
+        ),
+        dropdowns: cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-3 has-focus:ring-ring/50",
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        day: cn(
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none",
+          defaultClassNames.day,
+        ),
+        day_button: cn(
+          "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+          defaultClassNames.day_button,
+        ),
+        range_start: cn(
+          "day-range-start rounded-(--cell-radius) bg-muted",
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn(
+          "rounded-none bg-muted",
+          defaultClassNames.range_middle,
+        ),
+        range_end: cn(
+          "day-range-end rounded-(--cell-radius) bg-muted",
+          defaultClassNames.range_end,
+        ),
+        selected: cn(
+          "rounded-(--cell-radius) bg-muted",
+          defaultClassNames.selected,
+        ),
+        today: cn(
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          "text-muted-foreground opacity-50 data-[selected=true]:text-muted-foreground data-[selected=true]:opacity-30",
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled,
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
@@ -60,6 +125,7 @@ function Calendar({
             />
           )
         },
+        DayButton: CalendarDayButton,
       }}
       locale={zhCN}
       showOutsideDays={showOutsideDays}
@@ -68,4 +134,44 @@ function Calendar({
   )
 }
 
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: DayButtonProps) {
+  const ref = React.useRef<HTMLButtonElement>(null)
+  const defaultClassNames = getDefaultClassNames()
+
+  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(
+        "relative z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-(--cell-radius) data-[range-middle=true]:rounded-none data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day_button,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
 export { Calendar }

zhixing-web/src/shared/ui/date-picker.tsx

@@ -1,11 +1,12 @@
 import { format } from "date-fns"
-import { CalendarDays } from "lucide-react"
+import { ChevronDown } from "lucide-react"
 import { useState } from "react"
 import type { ComponentProps } from "react"
 
 import { Button } from "@/shared/ui/button"
 import { Calendar } from "@/shared/ui/calendar"
 import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover"
+import { cn } from "@/shared/ui/utils"
 
 export interface DatePickerProps extends Omit<
   ComponentProps<typeof Button>,
@@ -41,15 +42,18 @@ export function DatePicker({
             data-slot="date-picker-trigger"
             disabled={disabled}
             variant="outline"
-            className={className}
+            className={cn(
+              "justify-between text-left font-normal data-[empty=true]:text-muted-foreground",
+              className,
+            )}
             {...props}
           />
         }
       >
-        <CalendarDays aria-hidden="true" data-icon="inline-start" />
         {value ? format(value, "yyyy-MM-dd") : <span>{placeholder}</span>}
+        <ChevronDown aria-hidden="true" data-icon="inline-end" />
       </PopoverTrigger>
-      <PopoverContent align="start" className="w-auto p-0">
+      <PopoverContent align="start" className="w-auto overflow-hidden p-0">
         <Calendar
           defaultMonth={value}
           mode="single"

zhixing-web/src/shared/ui/popover.tsx

@@ -12,19 +12,25 @@ function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
 
 function PopoverContent({
   align = "center",
+  alignOffset = 0,
   className,
   children,
+  side = "bottom",
   sideOffset = 4,
   ...props
 }: PopoverPrimitive.Popup.Props & {
   align?: PopoverPrimitive.Positioner.Props["align"]
-  sideOffset?: number
+  alignOffset?: PopoverPrimitive.Positioner.Props["alignOffset"]
+  side?: PopoverPrimitive.Positioner.Props["side"]
+  sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"]
 }) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
         data-slot="popover-positioner"
         align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
         className="z-50 outline-none"
       >

zhixing-web/src/shared/ui/select.tsx

@@ -75,24 +75,37 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
 }
 
 function SelectContent({
+  align = "center",
+  alignItemWithTrigger = true,
+  alignOffset = 0,
   className,
   children,
+  side = "bottom",
   sideOffset = 4,
   ...props
 }: SelectPrimitive.Popup.Props & {
-  sideOffset?: number
+  align?: SelectPrimitive.Positioner.Props["align"]
+  alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"]
+  alignOffset?: SelectPrimitive.Positioner.Props["alignOffset"]
+  side?: SelectPrimitive.Positioner.Props["side"]
+  sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"]
 }) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
         data-slot="select-positioner"
+        align={align}
+        alignItemWithTrigger={alignItemWithTrigger}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className="z-50 outline-none"
+        className="isolate z-50"
       >
         <SelectPrimitive.Popup
           data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "relative z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "relative z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-card text-card-foreground shadow-lg ring-1 ring-foreground/10 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[align-trigger=true]:animate-none",
             className,
           )}
           {...props}
@@ -100,7 +113,7 @@ function SelectContent({
           <SelectScrollUpButton />
           <SelectPrimitive.List
             data-slot="select-list"
-            className="max-h-72 overflow-y-auto p-1"
+            className="max-h-(--available-height) overflow-y-auto p-1"
           >
             {children}
           </SelectPrimitive.List>