import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { DayPicker } from "react-day-picker";
import { ChevronRight, ChevronLeft } from "lucide-react";
/* empty css                                                */
import { cn } from "../../lib/utils.js";
import { Button } from "../Button/button.js";
const DateGrid = React.forwardRef(function DateGrid2({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}, _ref) {
  return /* @__PURE__ */ jsx(
    DayPicker,
    {
      showOutsideDays,
      navLayout: "around",
      className: cn("p-3", className),
      classNames: {
        months: "flex flex-col sm:flex-row gap-4",
        // Month:relative 讓 prev/next 按鈕 absolute 定位到 month 右上/左上(navLayout="around")
        month: "flex flex-col relative",
        // Month caption:單行置中 h-field-xs,prev/next 按鈕 absolute 從兩側貼齊
        month_caption: "flex items-center justify-center h-field-xs mb-3",
        caption_label: "text-body font-medium",
        // ── Prev/Next button(canonical 2026-05-03 v6,user audit fix)──
        // RDP 把這 className apply 到 <Button> 本身(不是 wrapper),所以用 className 直接套
        // 定位類(absolute top/left/right-0)。muted 色透過 Button override 內部加,不用 [&>button] 黑魔法。
        button_previous: "absolute top-0 left-0 z-[1]",
        button_next: "absolute top-0 right-0 z-[1]",
        // ── Grid layout(canonical 2026-05-03 v7,純 table-native)──
        // RDP v9 month_grid = <table>。v6 試 grid 在 tr 上但 break border-spacing(grid 蓋掉
        // table-row layout)。乾淨修:**純 table layout** + `border-spacing-1`(4px H+V,table-native)。
        // 所有 cells 自動同寬同高(td 的 w/h-field-sm),無 grid hack。
        month_grid: "border-separate border-spacing-1",
        weekdays: "",
        // thead default
        weekday: cn(
          // text-foreground + font-medium 對齊 DS 一致設計語言(2026-05-03 user audit):
          // weekday 列標跟 caption「April 2026」同視覺權重(都屬 calendar header 區),
          // 不弱化(撤銷 v3 fg-secondary 的 mistake)。對齊 icon-only Button 預設 neutral-9 一致。
          "text-foreground text-body font-medium",
          "h-7 align-middle text-center"
        ),
        week: "",
        // tr default
        // Cell **就是** button 容器(28×28 @ md / 32×32 @ lg),`relative` 讓 before pseudo 定位
        // ── h-field-sm 對齊 user spec(28×28 @ md)— v3 用 h-field-md (32×32) 是錯的
        day: cn(
          "h-field-sm w-[var(--field-height-sm)] p-0 text-center relative"
        ),
        day_button: cn(
          // absolute inset-0 = 完全填滿 cell(naked button,無 inset 4px 空隙)
          // z-[1] 讓 button 疊在 range track `before:` pseudo 之上
          "absolute inset-0 z-[1] flex items-center justify-center",
          "font-normal text-body rounded-full transition-colors",
          // Hover 藍圈 1.5px(對齊 Apple HIG / Ant `@benchmark-unverified` visual ring measurement)— ring 在 button 之上 + 透明 bg 不擋 range track
          "hover:ring-[1.5px] hover:ring-primary hover:bg-transparent",
          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        ),
        // today:藍色 underline bar 貼近數字
        today: cn(
          "[&>button]:after:content-['']",
          "[&>button]:after:absolute",
          "[&>button]:after:bottom-[5px] [&>button]:after:left-1/2 [&>button]:after:-translate-x-1/2",
          "[&>button]:after:w-[40%] [&>button]:after:h-[1.5px] [&>button]:after:rounded-full",
          "[&>button]:after:bg-primary",
          // today + selected:bar 切 on-emphasis(白)
          "[&[data-selected=true]>button]:after:bg-on-emphasis"
        ),
        outside: "[&>button]:text-fg-muted",
        // Selected(single 或 range 端點):button 藍底白字圓
        selected: cn(
          "[&>button]:bg-primary [&>button]:text-on-emphasis",
          "[&>button]:hover:bg-primary-hover [&>button]:hover:ring-0"
        ),
        disabled: cn(
          "[&>button]:bg-disabled [&>button]:text-fg-disabled [&>button]:cursor-not-allowed",
          "[&>button]:hover:ring-0 [&>button]:hover:bg-disabled"
        ),
        // ── Range track(canonical 2026-05-03 v6,Ant stadium pattern)──
        // v5 用 pseudo 矩形蓋全 cell 修「白色破圖」,但新副作用:button 圓比矩形小,4 個
        // corner triangle 區域 pseudo grey 凸出圓外(user 2026-05-03 抓到「凸出去」)。
        // 對齊 Ant 實證(`cell-range-start::before { border-radius: 9999px 0 0 9999px }`):
        // rangeStart pseudo 加 `rounded-l-full` → pseudo 變「左半圓 + 右矩形」stadium
        // 左半圓 EXACTLY OVERLAY button 圓的左半圓(同 center,同 radius 14)→ 邊界無縫
        // 右側矩形 bridge 2px to middle → 跟 middle pseudo 連續
        // Cell 的 top-left + bottom-left corner triangle:pseudo 不蓋 + button 不蓋 →
        // popover white 顯露(乾淨 breathing,跟 outside-of-range cells 一致視覺)
        range_start: cn(
          "before:content-[''] before:absolute before:inset-y-0",
          "before:left-0 before:-right-[2px]",
          "before:bg-neutral-selected before:pointer-events-none",
          "before:rounded-l-full"
          // ← stadium 左半圓 matches button 圓的左半弧
        ),
        range_end: cn(
          "before:content-[''] before:absolute before:inset-y-0",
          "before:-left-[2px] before:right-0",
          "before:bg-neutral-selected before:pointer-events-none",
          "before:rounded-r-full"
          // ← 鏡像
        ),
        range_middle: cn(
          "before:content-[''] before:absolute before:inset-y-0 before:-inset-x-[2px]",
          "before:bg-neutral-selected before:pointer-events-none",
          // button 透明顯露 track,但 hover ring 仍顯示
          "[&>button]:!bg-transparent [&>button]:!text-foreground"
        ),
        hidden: "invisible",
        ...classNames
      },
      components: {
        // ── Prev/Next nav(canonical 2026-05-03 v9,DS 一致設計語言)──
        // User 2026-05-03 audit:「icon-only Button icon 都用 neutral-9,只有 dismiss 用 45%」
        // → chevron 不是 dismiss,**走 Button 預設 text-foreground**(neutral-9 85%),
        // 不開新 tier 自打嘴(撤銷 v6-v8 用 fg-muted override 的 mistake)。
        // RDP v9 `PreviousMonthButton / NextMonthButton` override(node_modules/react-day-picker/dist/esm/components/Nav.js)
        // ⚠️ children: _ 必丟棄(RDP 把 <Chevron> 當 children 傳 → 跟 Button startIcon 重疊變 double chevron)
        PreviousMonthButton: ({ className: className2, children: _children, ...props2 }) => /* @__PURE__ */ jsx(
          Button,
          {
            variant: "text",
            size: "xs",
            iconOnly: true,
            startIcon: ChevronLeft,
            "aria-label": "上一個月",
            className: className2,
            ...props2
          }
        ),
        NextMonthButton: ({ className: className2, children: _children, ...props2 }) => /* @__PURE__ */ jsx(
          Button,
          {
            variant: "text",
            size: "xs",
            iconOnly: true,
            startIcon: ChevronRight,
            "aria-label": "下一個月",
            className: className2,
            ...props2
          }
        )
      },
      ...props
    }
  );
});
DateGrid.displayName = "DateGrid";
const dateGridMeta = {
  component: "DateGrid",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-disabled", "bg-neutral-selected", "bg-on-emphasis", "bg-primary", "bg-primary-hover", "bg-transparent"],
    fg: ["text-fg-disabled", "text-fg-muted", "text-foreground", "text-on-emphasis"],
    ring: ["ring-primary", "ring-ring"]
  }
};
export {
  DateGrid,
  dateGridMeta
};
//# sourceMappingURL=date-grid.js.map
