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

2026-08-10 15:59:48 +08:00
parent 8d4f80f2f1
commit 7f99ac5027
13 changed files with 590 additions and 44 deletions
@@ -24,6 +24,7 @@ import {
 function useActiveRoutePath() {
  const matchRoute = useMatchRoute()
  if (matchRoute({ to: "/selection", fuzzy: true })) return "/selection"
+  if (matchRoute({ to: "/components", fuzzy: true })) return "/components"
  if (matchRoute({ to: "/", fuzzy: false })) return "/"
  return "/"
 }
@@ -2,6 +2,7 @@ import {
  BarChart3,
  BrainCircuit,
  ClipboardCheck,
+  Component,
  LayoutDashboard,
  type LucideIcon,
 } from "lucide-react"
@@ -45,9 +46,16 @@ export const primaryNavigation: readonly NavigationItem[] = [
    icon: BrainCircuit,
    availability: "available",
  },
+  {
+    id: "components",
+    label: "组件预览",
+    to: "/components",
+    icon: Component,
+    availability: "available",
+  },
 ] as const

-export const mobileNavigationMaxItems = 4
+export const mobileNavigationMaxItems = 5

 export const mobilePrimaryNavigation: readonly NavigationItem[] =
  primaryNavigation.slice(0, mobileNavigationMaxItems)
@@ -71,4 +79,9 @@ export const routePresentation: Record<string, RoutePresentation> = {
    breadcrumb: "研究工作台",
    title: "知行 B1 执行结果",
  },
+  "/components": {
+    id: "components",
+    breadcrumb: "研究工作台",
+    title: "组件预览",
+  },
 }
@@ -0,0 +1,72 @@
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { ComponentsPreviewPage } from "./components-preview-page"
+
+describe("ComponentsPreviewPage", () => {
+  it("previews and updates the shared select", async () => {
+    render(<ComponentsPreviewPage />)
+
+    const select = screen.getByRole("combobox", { name: "信号分类" })
+    expect(select).toHaveTextContent("全部信号")
+
+    fireEvent.click(select)
+    const option = await screen.findByRole("option", { name: "超卖类" })
+    fireEvent.pointerDown(option, { pointerType: "mouse" })
+    fireEvent.click(option)
+
+    expect(select).toHaveTextContent("超卖类")
+    expect(screen.getByRole("status", { name: "当前选择" })).toHaveTextContent(
+      "当前选择：超卖类",
+    )
+  })
+
+  it("previews date picker selection and clearing", async () => {
+    render(<ComponentsPreviewPage />)
+
+    const selectedDatePicker = screen.getByRole("button", {
+      name: "已选择日期",
+    })
+    expect(selectedDatePicker).toHaveTextContent("2026-08-07")
+
+    fireEvent.click(selectedDatePicker)
+    const popover = document.querySelector(
+      '[data-slot="popover-content"]',
+    ) as HTMLElement
+    expect(popover).toBeInTheDocument()
+    const calendar = within(popover).getByRole("grid", { name: /2026年8月/ })
+    const day = within(calendar).getByRole("button", { name: /2026年8月8日/ })
+    fireEvent.click(day)
+
+    expect(selectedDatePicker).toHaveTextContent("2026-08-08")
+    fireEvent.click(screen.getByRole("button", { name: "清空已选择日期" }))
+    expect(selectedDatePicker).toHaveTextContent("选择日期")
+  })
+
+  it("previews popover open and close behavior", async () => {
+    render(<ComponentsPreviewPage />)
+
+    const trigger = screen.getByRole("button", { name: "打开交互说明" })
+    expect(trigger).toHaveAttribute("aria-expanded", "false")
+
+    fireEvent.click(trigger)
+    const popup = await screen.findByText("弹层已打开")
+    expect(popup).toBeInTheDocument()
+    expect(trigger).toHaveAttribute("aria-expanded", "true")
+
+    fireEvent.click(screen.getByRole("button", { name: "关闭弹层" }))
+    expect(screen.queryByText("弹层已打开")).not.toBeInTheDocument()
+    expect(trigger).toHaveAttribute("aria-expanded", "false")
+  })
+
+  it("shows disabled and loading states", () => {
+    render(<ComponentsPreviewPage />)
+
+    expect(screen.getByRole("button", { name: "禁用状态" })).toBeDisabled()
+    expect(screen.getByRole("button", { name: "禁用日期" })).toBeDisabled()
+    expect(
+      screen.getByRole("button", { name: "清空已选择日期" }),
+    ).not.toBeDisabled()
+    expect(document.querySelectorAll('[data-slot="skeleton"]')).toHaveLength(2)
+  })
+})
@@ -0,0 +1,286 @@
+import { format } from "date-fns"
+import { useState, type ReactNode } from "react"
+
+import { PageLayout } from "@/app/layout/page-layout"
+import { Badge } from "@/shared/ui/badge"
+import { Button } from "@/shared/ui/button"
+import { Calendar } from "@/shared/ui/calendar"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/ui/card"
+import { DatePicker } from "@/shared/ui/date-picker"
+import { Input } from "@/shared/ui/input"
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/ui/popover"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select"
+import { Separator } from "@/shared/ui/separator"
+import { Skeleton } from "@/shared/ui/skeleton"
+
+const signalTypeOptions = [
+  { label: "全部信号", value: "all" },
+  { label: "原始 B1", value: "original" },
+  { label: "超卖类", value: "oversold" },
+] as const
+
+export function ComponentsPreviewPage() {
+  const [signalType, setSignalType] = useState("all")
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    () => new Date(2026, 7, 7),
+  )
+  const [calendarDate, setCalendarDate] = useState<Date | undefined>(
+    () => new Date(2026, 7, 7),
+  )
+  const [popoverOpen, setPopoverOpen] = useState(false)
+  const signalTypeLabel =
+    signalTypeOptions.find((option) => option.value === signalType)?.label ??
+    "全部信号"
+
+  return (
+    <PageLayout>
+      <div className="mx-auto w-full max-w-6xl space-y-6">
+        <header className="space-y-2">
+          <p className="text-xs font-medium tracking-[0.12em] text-muted-foreground uppercase">
+            Shared UI
+          </p>
+          <h1 className="text-2xl font-semibold tracking-tight">组件预览</h1>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            集中查看项目 shared/ui 的视觉
+            token、尺寸和交互状态。这里的示例都是真实组件，后续新增组件可以直接在本页补充验证。
+          </p>
+        </header>
+
+        <div className="grid gap-4 lg:grid-cols-2">
+          <PreviewCard
+            description="保留项目主题色，同时提供清晰的 hover、focus 和 disabled 状态。"
+            title="Button & Badge"
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <Button>主要操作</Button>
+              <Button variant="outline">次要操作</Button>
+              <Button variant="secondary">辅助操作</Button>
+              <Button variant="ghost">幽灵按钮</Button>
+              <Button disabled>禁用状态</Button>
+            </div>
+            <Separator className="my-4" />
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge>已完成</Badge>
+              <Badge variant="outline">待确认</Badge>
+              <Badge variant="destructive">失败</Badge>
+            </div>
+          </PreviewCard>
+
+          <PreviewCard
+            description="Select 使用 Base UI 的弹层和键盘语义，字段值由页面状态控制。"
+            title="Select & Input"
+          >
+            <div className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <label className="text-sm font-medium" htmlFor="preview-search">
+                  搜索输入
+                </label>
+                <Input id="preview-search" placeholder="搜索股票代码或名称" />
+              </div>
+              <div className="space-y-2">
+                <label
+                  className="text-sm font-medium"
+                  id="preview-signal-label"
+                >
+                  信号分类
+                </label>
+                <Select
+                  items={signalTypeOptions}
+                  onValueChange={(value) => setSignalType(value ?? "all")}
+                  value={signalType}
+                >
+                  <SelectTrigger
+                    aria-labelledby="preview-signal-label"
+                    className="w-full"
+                  >
+                    <SelectValue placeholder="选择信号分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {signalTypeOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <p
+              aria-label="当前选择"
+              className="mt-4 text-sm text-muted-foreground"
+              role="status"
+            >
+              当前选择：
+              <span className="font-medium text-foreground">
+                {signalTypeLabel}
+              </span>
+            </p>
+          </PreviewCard>
+
+          <PreviewCard
+            className="lg:col-span-2"
+            description="DatePicker 采用官方示例的文本触发器、右侧下拉指示和 w-auto 日历弹层；主题色仍由项目 token 提供。"
+            title="DatePicker & Calendar"
+          >
+            <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_auto]">
+              <div className="space-y-5">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <label
+                      className="text-sm font-medium"
+                      htmlFor="preview-date"
+                    >
+                      已选择日期
+                    </label>
+                    <DatePicker
+                      aria-label="已选择日期"
+                      className="w-full max-w-[212px]"
+                      id="preview-date"
+                      onChange={setSelectedDate}
+                      value={selectedDate}
+                    />
+                    <p className="text-xs text-muted-foreground">
+                      {selectedDate
+                        ? `值：${format(selectedDate, "yyyy-MM-dd")}`
+                        : "尚未选择日期"}
+                    </p>
+                  </div>
+                  <div className="space-y-2">
+                    <span className="block text-sm font-medium">
+                      空值与禁用态
+                    </span>
+                    <DatePicker
+                      aria-label="空值日期"
+                      className="w-full max-w-[212px]"
+                      placeholder="选择目标日期"
+                    />
+                    <DatePicker
+                      aria-label="禁用日期"
+                      className="w-full max-w-[212px]"
+                      disabled
+                      placeholder="日期不可用"
+                    />
+                    <Button
+                      className="mt-1"
+                      disabled={!selectedDate}
+                      onClick={() => setSelectedDate(undefined)}
+                      size="sm"
+                      variant="outline"
+                    >
+                      清空已选择日期
+                    </Button>
+                  </div>
+                </div>
+                <div className="rounded-lg border border-dashed border-border bg-muted/30 p-3 text-sm text-muted-foreground">
+                  交互提示：打开日期弹层后，可以使用方向键移动、Enter
+                  选择、Escape 关闭；月份切换按钮与日期按钮都保留可见焦点。
+                </div>
+              </div>
+              <div className="rounded-xl border border-border bg-background p-2">
+                <Calendar
+                  aria-label="日历组件示例"
+                  defaultMonth={calendarDate}
+                  mode="single"
+                  onSelect={setCalendarDate}
+                  selected={calendarDate}
+                />
+              </div>
+            </div>
+          </PreviewCard>
+
+          <PreviewCard
+            description="Popover 负责定位、外部点击关闭、Escape 关闭和触发器焦点恢复。"
+            title="Popover"
+          >
+            <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+              <PopoverTrigger
+                render={
+                  <Button aria-expanded={popoverOpen} variant="outline" />
+                }
+              >
+                打开交互说明
+              </PopoverTrigger>
+              <PopoverContent align="start" className="w-80">
+                <div className="space-y-3">
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium">弹层已打开</p>
+                    <p className="text-sm text-muted-foreground">
+                      这里可以承载筛选提示、轻量编辑或上下文信息。
+                    </p>
+                  </div>
+                  <PopoverClose render={<Button size="sm" variant="outline" />}>
+                    关闭弹层
+                  </PopoverClose>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <p
+              aria-label="弹层状态"
+              className="mt-4 text-sm text-muted-foreground"
+              role="status"
+            >
+              当前状态：{popoverOpen ? "已打开" : "已关闭"}
+            </p>
+          </PreviewCard>
+
+          <PreviewCard
+            description="基础容器和反馈状态也在同一处展示，便于发现尺寸和间距不一致。"
+            title="Surface & Feedback"
+          >
+            <div className="space-y-3">
+              <div className="flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm">
+                <span>数据同步状态</span>
+                <Badge>正常</Badge>
+              </div>
+              <Separator />
+              <Skeleton className="h-4 w-2/3" />
+              <Skeleton className="h-8 w-full" />
+            </div>
+          </PreviewCard>
+        </div>
+      </div>
+    </PageLayout>
+  )
+}
+
+function PreviewCard({
+  children,
+  className,
+  description,
+  title,
+}: {
+  children: ReactNode
+  className?: string
+  description: string
+  title: string
+}) {
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-base">{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+    </Card>
+  )
+}
@@ -247,7 +247,7 @@ function ExecutionToolbar({
 }: ExecutionToolbarProps) {
  return (
    <div className="w-full space-y-1.5">
-      <div className="grid gap-1.5 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] sm:items-end">
+      <div className="grid gap-1.5 sm:grid-cols-[13.25rem_13.25rem_auto] sm:items-end">
        <div className="space-y-1 text-xs font-medium">
          <span className="block">目标交易日</span>
          <DatePicker
@@ -1,6 +1,7 @@
 import { createRootRoute, createRoute, Outlet } from "@tanstack/react-router"

 import { AppLayout } from "@/app/layout/app-layout"
+import { ComponentsPreviewPage } from "@/features/components/pages/components-preview-page"
 import { HomePage } from "@/features/home/pages/home-page"
 import {
  selectionCategoryFilters,
@@ -47,6 +48,12 @@ const selectionRoute = createRoute({
  component: SelectionResultsPage,
 })

+const componentsRoute = createRoute({
+  getParentRoute: () => workspaceRoute,
+  path: "/components",
+  component: ComponentsPreviewPage,
+})
+
 export const routeTree = rootRoute.addChildren([
-  workspaceRoute.addChildren([indexRoute, selectionRoute]),
+  workspaceRoute.addChildren([indexRoute, selectionRoute, componentsRoute]),
 ])
@@ -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 }
@@ -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"
@@ -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"
      >
@@ -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>