@choice-ui/react 1.3.10

package/dist/esm/components/calendar/src/month-calendar/tv.js

@@ -0,0 +1,324 @@
+import { tcv } from "../../../../shared/utils/tcx/tcx.js";
+const MonthCalendarTv = tcv({
+  slots: {
+    // 容器
+    container: "select-none",
+    // 头部
+    header: "grid items-center pt-2 pr-1 pl-3",
+    headerWrapper: "flex h-6 items-center",
+    title: "flex-1 truncate font-strong",
+    // 星期标题区域
+    weekdaysContainer: "grid gap-0 px-2 text-center",
+    weekday: "flex h-8 items-center justify-center text-body-small",
+    // 日期网格
+    daysGrid: "grid gap-0 px-2 pb-2",
+    // 日期单元格
+    day: [
+      "relative aspect-square w-full rounded-md",
+      "flex items-center justify-center",
+      "cursor-default select-none",
+      "border border-transparent",
+      "before:absolute before:z-0 before:content-['']",
+      "after:absolute after:z-1 after:content-['']"
+    ],
+    // 日期数字
+    dayNumber: "relative z-2",
+    weekNumber: "flex aspect-square items-center justify-center text-body-small",
+    emptyDay: ""
+  },
+  variants: {
+    // 是否在当前月
+    inMonth: {
+      false: {}
+    },
+    showWeekNumbers: {
+      true: {
+        header: "grid-cols-8",
+        daysGrid: "grid-cols-8",
+        weekdaysContainer: "grid-cols-8",
+        headerWrapper: "col-span-7"
+      },
+      false: {
+        header: "grid-cols-7",
+        daysGrid: "grid-cols-7",
+        weekdaysContainer: "grid-cols-7",
+        headerWrapper: "col-span-full"
+      }
+    },
+    // 是否选中
+    selected: {
+      true: {}
+    },
+    // 是否在选中范围内
+    inRange: {
+      true: {
+        day: "before:-inset-x-px before:inset-y-0.25"
+      }
+    },
+    // 是否在悬停范围内（范围选择的预览）
+    inHoverRange: {
+      true: {
+        day: "before:-inset-x-px before:inset-y-0.25"
+      }
+    },
+    // 是否为范围内第一个
+    isFirstInRange: {
+      true: {}
+    },
+    // 是否为范围内最后一个
+    isLastInRange: {
+      true: {}
+    },
+    // 是否为悬停范围内第一个
+    isFirstInHoverRange: {
+      true: {}
+    },
+    // 是否为悬停范围内最后一个
+    isLastInHoverRange: {
+      true: {}
+    },
+    // 是否为范围内行首
+    isFirstInRow: {
+      true: {}
+    },
+    // 是否为范围内行尾
+    isLastInRow: {
+      true: {}
+    },
+    // 是否为今天
+    today: {
+      true: {
+        day: "text-on-accent-foreground after:bg-danger-background after:inset-0.5 after:rounded-md"
+      }
+    },
+    // 是否高亮
+    highlighted: {
+      true: {
+        day: "after:border-selected-boundary after:inset-0.5 after:rounded-md after:border"
+      }
+    },
+    // 是否禁用
+    disabled: {
+      true: {},
+      false: {}
+    },
+    // 是否显示当月外的日期
+    showOutsideDays: {
+      false: {}
+    },
+    selectionMode: {
+      single: {},
+      multiple: {},
+      range: {}
+    },
+    variant: {
+      default: {
+        container: "bg-default-background",
+        weekdaysContainer: "text-secondary-foreground",
+        weekNumber: "text-secondary-foreground"
+      },
+      dark: {
+        container: "bg-menu-background text-white",
+        weekdaysContainer: "text-white/40",
+        weekNumber: "text-white/40"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      inMonth: false,
+      today: false,
+      variant: "default",
+      className: { day: "text-disabled-foreground" }
+    },
+    {
+      inMonth: false,
+      today: false,
+      variant: "dark",
+      className: { day: "text-white/40" }
+    },
+    {
+      inMonth: false,
+      showOutsideDays: false,
+      className: { day: "invisible" }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: false,
+      className: {
+        day: "after:inset-0 after:rounded-md"
+      }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: false,
+      variant: "default",
+      className: {
+        day: "after:bg-selected-background"
+      }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: false,
+      variant: "dark",
+      className: {
+        day: "after:bg-gray-600"
+      }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: true,
+      className: {
+        day: "after:ring-accent-background"
+      }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: true,
+      variant: "default",
+      className: {
+        day: "after:ring-offset-default-background after:ring-1 after:ring-offset-1"
+      }
+    },
+    {
+      selectionMode: ["single", "multiple"],
+      selected: true,
+      today: true,
+      variant: "dark",
+      className: {
+        day: "after:ring-2 after:ring-gray-600"
+      }
+    },
+    // Hover
+    {
+      disabled: false,
+      inRange: false,
+      inHoverRange: false,
+      className: {
+        day: "before:inset-0 before:rounded-md"
+      }
+    },
+    {
+      disabled: false,
+      inRange: false,
+      inHoverRange: false,
+      variant: "default",
+      className: {
+        day: "hover:before:bg-secondary-background"
+      }
+    },
+    {
+      disabled: false,
+      inRange: false,
+      inHoverRange: false,
+      variant: "dark",
+      className: {
+        day: "hover:before:bg-gray-700"
+      }
+    },
+    {
+      inHoverRange: true,
+      variant: "default",
+      className: {
+        day: "before:bg-secondary-background"
+      }
+    },
+    {
+      inRange: true,
+      inHoverRange: false,
+      variant: "default",
+      className: {
+        day: "before:bg-selected-background"
+      }
+    },
+    {
+      inHoverRange: true,
+      variant: "dark",
+      className: {
+        day: "before:bg-gray-600"
+      }
+    },
+    {
+      inRange: true,
+      inHoverRange: false,
+      variant: "dark",
+      className: {
+        day: "before:bg-accent-background/20"
+      }
+    },
+    // Rounded
+    {
+      isFirstInRow: true,
+      className: { day: "before:rounded-l-md" }
+    },
+    {
+      isLastInRow: true,
+      className: { day: "before:rounded-r-md" }
+    },
+    {
+      isFirstInRange: true,
+      isFirstInHoverRange: true,
+      inHoverRange: true,
+      className: { day: "before:rounded-l-md" }
+    },
+    {
+      isLastInRange: true,
+      isLastInHoverRange: true,
+      inHoverRange: true,
+      className: { day: "before:rounded-r-md" }
+    },
+    {
+      isFirstInRange: true,
+      inHoverRange: false,
+      className: { day: "before:rounded-l-md" }
+    },
+    {
+      isLastInRange: true,
+      inHoverRange: false,
+      className: { day: "before:rounded-r-md" }
+    },
+    {
+      isFirstInHoverRange: true,
+      className: { day: "before:rounded-l-md" }
+    },
+    {
+      isLastInHoverRange: true,
+      className: { day: "before:rounded-r-md" }
+    },
+    // Disabled
+    {
+      disabled: true,
+      variant: "default",
+      className: { day: "text-disabled-foreground" }
+    },
+    {
+      disabled: true,
+      variant: "dark",
+      className: { day: "text-white/20" }
+    }
+  ],
+  // 默认变体
+  defaultVariants: {
+    inMonth: true,
+    showWeekNumbers: false,
+    disabled: false,
+    showOutsideDays: true,
+    selected: false,
+    today: false,
+    highlighted: false,
+    inRange: false,
+    inHoverRange: false,
+    isFirstInRange: false,
+    isLastInRange: false,
+    selectionMode: "single",
+    variant: "default"
+  }
+});
+export {
+  MonthCalendarTv
+};

package/dist/esm/components/calendar/src/quarter-calendar/quarter-calendar-cell.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { QuarterCalendarTv } from "./tv.js";
+import { formatQuarter } from "../utils/quarter.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const QuarterCalendarCell = forwardRef(
+  (props, ref) => {
+    const { className, onClick, quarterItem, variant = "default" } = props;
+    const tv = QuarterCalendarTv({ variant });
+    const handleClick = useEventCallback(() => {
+      if (quarterItem.isDisabled) return;
+      onClick(quarterItem.quarter);
+    });
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: tcx(className),
+        disabled: quarterItem.isDisabled,
+        onClick: handleClick,
+        "aria-label": formatQuarter(quarterItem.quarter),
+        "aria-pressed": quarterItem.isSelected,
+        "data-testid": `${quarterItem.quarter.year}-Q${quarterItem.quarter.quarter}`,
+        "data-selected": quarterItem.isSelected,
+        "data-current": quarterItem.isCurrent,
+        "data-disabled": quarterItem.isDisabled,
+        "data-in-range": quarterItem.isInRange,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: tv.quarterTitle(), children: quarterItem.quarter.label }),
+          /* @__PURE__ */ jsx("div", { className: tv.monthsList(), children: quarterItem.quarter.months.map((month, index) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: tv.monthItem(),
+              children: month
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+QuarterCalendarCell.displayName = "QuarterCalendarCell";
+export {
+  QuarterCalendarCell
+};

package/dist/esm/components/calendar/src/quarter-calendar/quarter-calendar-header.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../icon-button/dist/index.js";
+import { Undo, ChevronLeftSmall, ChevronRightSmall } from "@choiceform/icons-react";
+import { format } from "date-fns";
+import { forwardRef } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { QuarterCalendarTv } from "./tv.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const QuarterCalendarHeader = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      currentYear,
+      currentYearContainsToday,
+      handleNext,
+      handlePrevious,
+      handleToday,
+      isNextDisabled,
+      isPrevDisabled,
+      variant = "default"
+    } = props;
+    const tv = QuarterCalendarTv({ variant });
+    const handleTodayClick = useEventCallback(() => {
+      handleToday();
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: tcx(tv.header(), className),
+        "data-testid": "quarter-calendar-header",
+        children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: tv.title(),
+              "data-testid": "year-title",
+              children: format(currentYear, "yyyy")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: tv.navigation(),
+              "data-testid": "quarter-navigation",
+              children: [
+                currentYearContainsToday ? null : /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant,
+                    onClick: handleTodayClick,
+                    "aria-label": "Back to current year",
+                    "data-testid": "today-button",
+                    children: /* @__PURE__ */ jsx(Undo, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant,
+                    onClick: handlePrevious,
+                    disabled: isPrevDisabled,
+                    "aria-label": "Previous year",
+                    "data-testid": "prev-button",
+                    children: /* @__PURE__ */ jsx(ChevronLeftSmall, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    variant,
+                    onClick: handleNext,
+                    disabled: isNextDisabled,
+                    "aria-label": "Next year",
+                    "data-testid": "next-button",
+                    children: /* @__PURE__ */ jsx(ChevronRightSmall, {})
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+QuarterCalendarHeader.displayName = "QuarterCalendarHeader";
+export {
+  QuarterCalendarHeader
+};

package/dist/esm/components/calendar/src/quarter-calendar/quarter-calendar.js

@@ -0,0 +1,180 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { enUS } from "date-fns/locale";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { resolveLocale } from "../utils/locale.js";
+import { QuarterCalendarCell } from "./quarter-calendar-cell.js";
+import { QuarterCalendarHeader } from "./quarter-calendar-header.js";
+import { QuarterCalendarTv } from "./tv.js";
+import { quarterUtils, getCurrentQuarter, getYearQuarters, isQuarterEqual } from "../utils/quarter.js";
+import { useMergedValue } from "../../../../shared/hooks/use-merged-value/use-merged-value.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const QuarterCalendar = forwardRef((props, ref) => {
+  const {
+    value,
+    currentYear: propCurrentYear,
+    onChange,
+    onNavigate,
+    className,
+    children,
+    minYear,
+    maxYear,
+    disabledQuarters = [],
+    disabled = false,
+    readOnly = false,
+    startYear: propStartYear,
+    locale = enUS,
+    variant = "default",
+    defaultValue
+  } = props;
+  const handleQuarterChange = useCallback(
+    (quarter) => {
+      onChange == null ? void 0 : onChange(quarter ?? null);
+    },
+    [onChange]
+  );
+  const [selectedQuarter, setSelectedQuarter] = useMergedValue({
+    value,
+    defaultValue,
+    onChange: handleQuarterChange
+  });
+  const safeLocale = resolveLocale(locale);
+  const currentYearNum = useMemo(() => {
+    const extracted = quarterUtils.extractYear(propCurrentYear);
+    return extracted ?? quarterUtils.getCurrentYear();
+  }, [propCurrentYear]);
+  const yearConstraints = useMemo(
+    () => ({
+      min: quarterUtils.extractYear(minYear),
+      max: quarterUtils.extractYear(maxYear),
+      disabled: disabledQuarters
+    }),
+    [minYear, maxYear, disabledQuarters]
+  );
+  const [internalYear, setInternalYear] = useState(() => {
+    const propStart = quarterUtils.extractYear(propStartYear);
+    return propStart ?? currentYearNum;
+  });
+  const displayYear = quarterUtils.extractYear(propStartYear) ?? internalYear;
+  const actualCurrentQuarter = useMemo(() => {
+    return getCurrentQuarter(void 0, safeLocale);
+  }, [safeLocale]);
+  const quarters = useMemo(() => {
+    const yearQuarters = getYearQuarters(displayYear, safeLocale);
+    return yearQuarters.map((quarter) => {
+      const isSelected = selectedQuarter ? isQuarterEqual(selectedQuarter, quarter) : false;
+      const isCurrent = isQuarterEqual(actualCurrentQuarter, quarter);
+      const isInRange = quarterUtils.isYearInRange(
+        quarter.year,
+        yearConstraints.min,
+        yearConstraints.max
+      );
+      const isDisabled = disabled || yearConstraints.disabled.some(
+        (dq) => dq.quarter === quarter.quarter && dq.year === quarter.year
+      ) || !isInRange;
+      return {
+        quarter,
+        isSelected,
+        isCurrent,
+        isDisabled,
+        isInRange
+      };
+    });
+  }, [displayYear, safeLocale, selectedQuarter, actualCurrentQuarter, disabled, yearConstraints]);
+  const handleQuarterSelect = useEventCallback((quarter) => {
+    if (disabled || readOnly) return;
+    const quarterItem = quarters.find((q) => isQuarterEqual(q.quarter, quarter));
+    if (quarterItem == null ? void 0 : quarterItem.isDisabled) return;
+    setSelectedQuarter(quarter);
+  });
+  const navigateYear = useCallback(
+    (direction) => {
+      if (disabled) return;
+      const offset = direction === "prev" ? -1 : 1;
+      const newYear = displayYear + offset;
+      if (direction === "prev" && yearConstraints.min !== void 0) {
+        if (newYear < yearConstraints.min) return;
+      }
+      if (direction === "next" && yearConstraints.max !== void 0) {
+        if (newYear > yearConstraints.max) return;
+      }
+      onNavigate == null ? void 0 : onNavigate(direction, newYear);
+      if (propStartYear === void 0) {
+        setInternalYear(newYear);
+      }
+    },
+    [disabled, displayYear, yearConstraints, onNavigate, propStartYear]
+  );
+  const handlePrevious = useEventCallback(() => navigateYear("prev"));
+  const handleNext = useEventCallback(() => navigateYear("next"));
+  const handleToday = useEventCallback(() => {
+    const todayYear = quarterUtils.getCurrentYear();
+    const todayQuarter = getCurrentQuarter(void 0, safeLocale);
+    setInternalYear(todayYear);
+    setSelectedQuarter(todayQuarter);
+  });
+  const navigationState = useMemo(() => {
+    if (disabled) return { isPrevDisabled: true, isNextDisabled: true };
+    const isPrevDisabled = yearConstraints.min !== void 0 && displayYear <= yearConstraints.min;
+    const isNextDisabled = yearConstraints.max !== void 0 && displayYear >= yearConstraints.max;
+    return { isPrevDisabled, isNextDisabled };
+  }, [disabled, yearConstraints, displayYear]);
+  const displayInfo = useMemo(() => {
+    const todayYear = quarterUtils.getCurrentYear();
+    const currentYearContainsToday = displayYear === todayYear;
+    return {
+      currentYearContainsToday
+    };
+  }, [displayYear]);
+  const tv = QuarterCalendarTv({ variant });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: tcx(tv.container(), className),
+      "data-testid": "quarter-calendar",
+      children: [
+        /* @__PURE__ */ jsx(
+          QuarterCalendarHeader,
+          {
+            currentYear: displayYear,
+            currentYearContainsToday: displayInfo.currentYearContainsToday,
+            handleNext,
+            handlePrevious,
+            handleToday,
+            isNextDisabled: navigationState.isNextDisabled,
+            isPrevDisabled: navigationState.isPrevDisabled,
+            variant
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: tv.quartersGrid(),
+            "data-testid": "quarters-grid",
+            children: quarters.map((quarterItem) => /* @__PURE__ */ jsx(
+              QuarterCalendarCell,
+              {
+                className: tv.quarterCell({
+                  selected: quarterItem.isSelected,
+                  current: quarterItem.isCurrent,
+                  disabled: quarterItem.isDisabled,
+                  inRange: quarterItem.isInRange
+                }),
+                quarterItem,
+                onClick: handleQuarterSelect,
+                variant
+              },
+              `${quarterItem.quarter.year}-${quarterItem.quarter.quarter}`
+            ))
+          }
+        ),
+        children
+      ]
+    }
+  );
+});
+QuarterCalendar.displayName = "QuarterCalendar";
+export {
+  QuarterCalendar
+};