@sarunyu/system-one 4.9.4 → 4.9.6

package/dist/index.cjs

@@ -63,19 +63,17 @@ const roundedLabelClass = {
   lg: "rounded-lg",
   xl: "rounded-lg"
 };
+const heightClass = {
+  xs: "h-[26px]",
+  sm: "h-[28px]",
+  md: "h-8",
+  // 32px
+  lg: "h-9",
+  // 36px
+  xl: "h-10"
+  // 40px
+};
 function getPaddingClasses(size, hasLeft, hasRight) {
-  const pyMap = {
-    xs: "py-1",
-    // 4px
-    sm: "py-1",
-    // 4px
-    md: "py-1.5",
-    // 6px
-    lg: "py-2",
-    // 8px
-    xl: "py-2.5"
-    // 10px
-  };
   const pxMap = {
     xs: { l: "pl-1.5", r: "pr-1.5" },
     // 6px
@@ -97,8 +95,7 @@ function getPaddingClasses(size, hasLeft, hasRight) {
   };
   return [
     hasLeft ? reducedMap[size].l : pxMap[size].l,
-    hasRight ? reducedMap[size].r : pxMap[size].r,
-    pyMap[size]
+    hasRight ? reducedMap[size].r : pxMap[size].r
   ];
 }
 const iconSizeSpec = {
@@ -112,17 +109,17 @@ function getVariantClasses(variant, isDisabled) {
   if (isDisabled) {
     if (variant === "outline" || variant === "outline-black")
       return "bg-disabled-bg text-disabled border border-border-disabled cursor-not-allowed";
-    return "bg-disabled-bg text-disabled cursor-not-allowed";
+    return "bg-disabled-bg text-disabled border border-transparent cursor-not-allowed";
   }
   if (variant === "outline")
     return "bg-background text-primary-action border border-border hover:bg-hover-bg active:bg-disabled-bg";
   if (variant === "plain")
-    return "bg-transparent text-primary-action hover:bg-hover-bg active:bg-disabled-bg";
+    return "bg-transparent text-primary-action border border-transparent hover:bg-hover-bg active:bg-disabled-bg";
   if (variant === "outline-black")
     return "bg-background text-foreground border border-border hover:bg-hover-bg";
   if (variant === "plain-black")
-    return "bg-transparent text-foreground hover:bg-hover-bg";
-  return "bg-primary-action text-on-primary-action hover:bg-primary-action-hover active:bg-primary-action-active";
+    return "bg-transparent text-foreground border border-transparent hover:bg-hover-bg";
+  return "bg-primary-action text-on-primary-action border border-transparent hover:bg-primary-action-hover active:bg-primary-action-active";
 }
 const Button = React.forwardRef(function Button2({
   size = "md",
@@ -204,9 +201,9 @@ const Button = React.forwardRef(function Button2({
       className: cn(
         baseClasses,
         roundedLabelClass[labelSize],
+        heightClass[labelSize],
         paddingParts[0],
         paddingParts[1],
-        paddingParts[2],
         hasLeft || hasRight ? gapClass[labelSize] : void 0,
         variantClasses,
         cursorClass,
@@ -1668,21 +1665,22 @@ const NAV_BTN_CLASS = cn(
   "p-0 outline-none"
 );
 function CustomCaption({
-  displayMonth,
+  calendarMonth,
   displayIndex
 }) {
-  const { goToMonth, previousMonth, nextMonth, displayMonths } = reactDayPicker.useNavigation();
+  const { goToMonth, previousMonth, nextMonth, months } = reactDayPicker.useDayPicker();
   const isDrawerRange = React.useContext(DrawerRangeCtx);
   const { disabledYears = [] } = React.useContext(DisabledDatesCtx);
   const [view, setView] = React.useState("days");
+  const displayMonth = calendarMonth.date;
   const [pickerYear, setPickerYear] = React.useState(
     displayMonth.getFullYear()
   );
   const [yearRangeStart, setYearRangeStart] = React.useState(
     Math.floor(displayMonth.getFullYear() / 12) * 12
   );
-  const isFirst = displayMonths[0].getTime() === displayMonth.getTime();
-  const isLast = displayMonths[displayMonths.length - 1].getTime() === displayMonth.getTime();
+  const isFirst = months[0].date.getTime() === displayMonth.getTime();
+  const isLast = months[months.length - 1].date.getTime() === displayMonth.getTime();
   const idx = displayIndex ?? 0;
   const handlePrevYear = () => {
     const d = new Date(displayMonth);
@@ -1951,77 +1949,99 @@ function CustomCaption({
 const DAY_PICKER_CLASSES = {
   months: "flex flex-col sm:flex-row sm:gap-6",
   month: "space-y-2 relative",
-  caption: "flex justify-center pt-1 relative items-center mb-2",
+  month_caption: "flex justify-center pt-1 relative items-center mb-2",
   caption_label: "text-[14px] leading-[20px] text-foreground",
   nav: "hidden",
-  nav_button: cn(
-    "h-[28px] w-[28px] inline-flex items-center justify-center",
-    "rounded-[6px] bg-transparent border border-border cursor-pointer",
-    "text-muted-foreground hover:bg-disabled-bg transition-colors duration-100",
-    "p-0 outline-none"
-  ),
-  nav_button_previous: "absolute left-1",
-  nav_button_next: "absolute right-1",
-  table: "w-full border-collapse",
-  head_row: "flex",
-  head_cell: "w-[36px] h-[32px] inline-flex items-center justify-center text-[12px] text-disabled font-normal",
-  row: "flex w-full mt-1",
-  cell: cn(
+  button_previous: "absolute left-1",
+  button_next: "absolute right-1",
+  month_grid: "w-full border-collapse",
+  weekdays: "flex",
+  weekday: "w-[36px] h-[32px] inline-flex items-center justify-center text-[12px] text-disabled font-normal",
+  week: "flex w-full mt-1",
+  // In v9 modifier classes (range_start, range_end, etc.) are placed on the
+  // outer `day` wrapper element. We use semantic marker class names so both
+  // the wrapper and button can reference them.
+  day: cn(
     "h-[36px] w-[36px] text-center p-0 relative overflow-hidden",
-    "[&:has(.day-range-middle)]:bg-range-bg",
-    "[&:has(.day-range-start)]:bg-range-bg",
-    "[&:has(.day-range-end)]:bg-range-bg",
-    "[&:has(.day-range-start)]:rounded-l-[6px]",
-    "[&:has(.day-range-end)]:rounded-r-[6px]",
-    "[&:first-child:has(.day-range-middle)]:rounded-l-[6px]",
-    "[&:last-child:has(.day-range-middle)]:rounded-r-[6px]",
-    "[&:first-child:has(.day-range-end)]:rounded-l-[6px]",
-    "[&:last-child:has(.day-range-start)]:rounded-r-[6px]",
+    // Range band background on the wrapper
+    "[&.is-range-middle]:bg-range-bg",
+    "[&.is-range-start]:bg-range-bg",
+    "[&.is-range-end]:bg-range-bg",
+    "[&.is-range-start]:rounded-l-[6px]",
+    "[&.is-range-end]:rounded-r-[6px]",
+    "[&:first-child.is-range-middle]:rounded-l-[6px]",
+    "[&:last-child.is-range-middle]:rounded-r-[6px]",
+    "[&:first-child.is-range-end]:rounded-l-[6px]",
+    "[&:last-child.is-range-start]:rounded-r-[6px]",
     "focus-within:relative focus-within:z-20"
   ),
-  day: cn(
+  day_button: cn(
     "h-[36px] w-[36px] inline-flex items-center justify-center",
     "text-[14px] text-foreground rounded-[6px]",
     "border-0 bg-transparent cursor-pointer",
     "hover:bg-disabled-bg transition-colors duration-100",
-    "outline-none aria-selected:opacity-100 p-0"
+    "outline-none p-0",
+    // Selected (single mode)
+    "[.is-selected_&]:!bg-primary-action [.is-selected_&]:!text-on-primary-action [.is-selected_&]:!rounded-[6px]",
+    // Range start button styling
+    "[.is-range-start_&]:!bg-primary-action [.is-range-start_&]:!text-on-primary-action [.is-range-start_&]:!rounded-l-[6px] [.is-range-start_&]:!rounded-r-none",
+    // Range end button styling
+    "[.is-range-end_&]:!bg-primary-action [.is-range-end_&]:!text-on-primary-action [.is-range-end_&]:!rounded-r-[6px] [.is-range-end_&]:!rounded-l-none",
+    // Range middle button styling
+    "[.is-range-middle_&]:!bg-range-bg [.is-range-middle_&]:!text-range-text [.is-range-middle_&]:!rounded-none",
+    // Today (when not selected)
+    "[.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)_&]:!bg-primary-action-light [.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)_&]:!text-foreground",
+    // Outside days
+    "[.is-outside_&]:text-disabled [.is-outside_&]:opacity-50",
+    "[.is-outside.is-selected_&]:!bg-transparent [.is-outside.is-selected_&]:!opacity-30",
+    // Disabled days
+    "[.is-disabled_&]:text-disabled [.is-disabled_&]:opacity-50 [.is-disabled_&]:cursor-not-allowed"
   ),
-  day_range_start: "day-range-start !bg-primary-action !text-on-primary-action !rounded-l-[6px] !rounded-r-none",
-  day_range_end: "day-range-end !bg-primary-action !text-on-primary-action !rounded-r-[6px] !rounded-l-none",
-  day_selected: "!bg-primary-action text-on-primary-action hover:!bg-primary-action focus:!bg-primary-action rounded-[6px]",
-  day_today: "[&:not([aria-selected=true])]:!bg-primary-action-light [&:not([aria-selected=true])]:text-foreground rounded-[6px]",
-  day_outside: "day-outside text-disabled opacity-50 aria-selected:bg-transparent aria-selected:opacity-30",
-  day_disabled: "text-disabled opacity-50 cursor-not-allowed",
-  day_range_middle: "day-range-middle !bg-range-bg !text-range-text !rounded-none",
-  day_hidden: "invisible"
+  // Modifier classes applied to the `day` wrapper in v9
+  selected: "is-selected",
+  range_start: "is-range-start",
+  range_end: "is-range-end",
+  range_middle: "is-range-middle",
+  today: "is-today",
+  outside: "is-outside",
+  disabled: "is-disabled",
+  hidden: "invisible"
 };
 const DRAWER_DAY_PICKER_CLASSES = {
   ...DAY_PICKER_CLASSES,
   months: "flex flex-col gap-6 w-full",
   month: "space-y-2 relative w-full",
-  table: "w-full border-collapse table-fixed",
-  head_row: "flex w-full",
-  head_cell: "flex-1 h-[40px] inline-flex items-center justify-center text-[13px] text-disabled font-normal",
-  row: "flex w-full mt-1",
-  cell: cn(
+  month_grid: "w-full border-collapse table-fixed",
+  weekdays: "flex w-full",
+  weekday: "flex-1 h-[40px] inline-flex items-center justify-center text-[13px] text-disabled font-normal",
+  week: "flex w-full mt-1",
+  day: cn(
     "h-[44px] flex-1 text-center p-0 relative overflow-hidden",
-    "[&:has(.day-range-middle)]:bg-range-bg",
-    "[&:has(.day-range-start)]:bg-range-bg",
-    "[&:has(.day-range-end)]:bg-range-bg",
-    "[&:has(.day-range-start)]:rounded-l-[8px]",
-    "[&:has(.day-range-end)]:rounded-r-[8px]",
-    "[&:first-child:has(.day-range-middle)]:rounded-l-[8px]",
-    "[&:last-child:has(.day-range-middle)]:rounded-r-[8px]",
-    "[&:first-child:has(.day-range-end)]:rounded-l-[8px]",
-    "[&:last-child:has(.day-range-start)]:rounded-r-[8px]",
+    "[&.is-range-middle]:bg-range-bg",
+    "[&.is-range-start]:bg-range-bg",
+    "[&.is-range-end]:bg-range-bg",
+    "[&.is-range-start]:rounded-l-[8px]",
+    "[&.is-range-end]:rounded-r-[8px]",
+    "[&:first-child.is-range-middle]:rounded-l-[8px]",
+    "[&:last-child.is-range-middle]:rounded-r-[8px]",
+    "[&:first-child.is-range-end]:rounded-l-[8px]",
+    "[&:last-child.is-range-start]:rounded-r-[8px]",
     "focus-within:relative focus-within:z-20"
   ),
-  day: cn(
+  day_button: cn(
     "h-[44px] w-full inline-flex items-center justify-center",
     "text-[16px] text-foreground rounded-[8px]",
     "border-0 bg-transparent cursor-pointer",
     "hover:bg-disabled-bg transition-colors duration-100",
-    "outline-none aria-selected:opacity-100 p-0"
+    "outline-none p-0",
+    "[.is-selected_&]:!bg-primary-action [.is-selected_&]:!text-on-primary-action [.is-selected_&]:!rounded-[8px]",
+    "[.is-range-start_&]:!bg-primary-action [.is-range-start_&]:!text-on-primary-action [.is-range-start_&]:!rounded-l-[8px] [.is-range-start_&]:!rounded-r-none",
+    "[.is-range-end_&]:!bg-primary-action [.is-range-end_&]:!text-on-primary-action [.is-range-end_&]:!rounded-r-[8px] [.is-range-end_&]:!rounded-l-none",
+    "[.is-range-middle_&]:!bg-range-bg [.is-range-middle_&]:!text-range-text [.is-range-middle_&]:!rounded-none",
+    "[.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)_&]:!bg-primary-action-light [.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end)_&]:!text-foreground",
+    "[.is-outside_&]:text-disabled [.is-outside_&]:opacity-50",
+    "[.is-outside.is-selected_&]:!bg-transparent [.is-outside.is-selected_&]:!opacity-30",
+    "[.is-disabled_&]:text-disabled [.is-disabled_&]:opacity-50 [.is-disabled_&]:cursor-not-allowed"
   )
 };
 const DATE_ITEM_H = 40;
@@ -2489,7 +2509,7 @@ const DateInput = React.forwardRef(
         formatters: {
           formatWeekdayName: (date) => THAI_WEEKDAYS[date.getDay()]
         },
-        components: { Caption: CustomCaption }
+        components: { MonthCaption: CustomCaption }
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       reactDayPicker.DayPicker,
@@ -2503,7 +2523,7 @@ const DateInput = React.forwardRef(
         formatters: {
           formatWeekdayName: (date) => THAI_WEEKDAYS[date.getDay()]
         },
-        components: { Caption: CustomCaption }
+        components: { MonthCaption: CustomCaption }
       }
     );
     const calendarContent = /* @__PURE__ */ jsxRuntime.jsx(DisabledDatesCtx.Provider, { value: { disabledYears }, children: pickerInner });