@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/esm/components/DatePicker/Common.js

@@ -1,7 +1,9 @@
+import "./Common.css";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
-import { useId, useState, useRef, useEffect, useCallback } from 'react';
+import { useId, useState, useRef, useEffect, useCallback, forwardRef } from 'react';
 import { useCalendar } from '@h6s/calendar';
+import { cn } from '../../lib/cva.js';
+import styles from './Common.module.css.js';
 import { shiftToTimezone, formatSelectedDate, formatSelectedDateTimeWithSeconds, formatSelectedDateTime, dateRangeIsValid, formatDateHeader, formatWeekday } from './utils.js';
 import { DAYS, YEARS, MONTHS, DAYS_IN_WEEK, getMonthNames } from '../../utils/date.js';
 import { InputStartContent, InputElement, InputWrapper } from '../InputWrapper/index.js';
@@ -10,35 +12,57 @@ import { Container } from '../Container/index.js';
 import { Text } from '../Text/index.js';
 import { Dropdown } from '../Dropdown/index.js';
 import { IconButton } from '../IconButton/index.js';
+import { cva } from 'class-variance-authority';
 
-const explicitWidth = "250px";
 const viewGridMonths = {
-  columns: 4,
-  rows: 3
-};
+  columns: 4};
 const viewGridYears = {
   columns: 3,
   rows: 3
 };
 const totalYears = viewGridYears.columns * viewGridYears.rows;
 const yearsOffset = Math.floor(totalYears / 2);
-const HighlightedInputWrapper = styled(InputWrapper).withConfig({
-  componentId: "sc-1m6g9rm-0"
-})(["", "}"], ({
-  $isActive,
-  $width,
-  error,
-  theme
-}) => {
-  let borderColor = $isActive ? theme.click.datePicker.dateOption.color.stroke.active : theme.click.field.color.stroke.default;
-  if (error) {
-    borderColor = theme.click.field.color.stroke.error;
+const highlightedInputWrapperVariants = cva(styles["highlighted-input-wrapper"], {
+  variants: {
+    fillWidth: { true: styles["highlighted-input-wrapper_fill-width"] },
+    active: { true: styles["highlighted-input-wrapper_active"] }
+  }
+});
+const dateTableCellVariants = cva(styles["date-table-cell"], {
+  variants: {
+    muted: { true: styles["date-table-cell_muted"] },
+    disabled: { true: styles["date-table-cell_disabled"] },
+    selected: { true: styles["date-table-cell_selected"] },
+    present: { true: styles["date-table-cell_present"] }
+  }
+});
+const gridCellVariants = cva(styles["grid-cell"], {
+  variants: {
+    active: { true: styles["grid-cell_active"] },
+    present: { true: styles["grid-cell_present"] }
   }
-  return `border: ${theme.click.datePicker.dateOption.stroke} solid ${borderColor};
-    width: ${$width ? $width : explicitWidth};
-    ${$width && `min-width: ${explicitWidth};`}
-    `;
 });
+const HighlightedInputWrapper = ({
+  isActive,
+  error,
+  fillWidth,
+  disabled,
+  id,
+  children,
+  className
+}) => /* @__PURE__ */ jsx(
+  InputWrapper,
+  {
+    error,
+    disabled,
+    id,
+    className: cn(
+      highlightedInputWrapperVariants({ fillWidth, active: isActive && !error }),
+      className
+    ),
+    children
+  }
+);
 const formatPartialDate = (timezone, selectedDate, partialYear, partialMonth) => {
   if (typeof partialYear === "number" && typeof partialMonth === "number") {
     const date = timezone === "UTC" ? new Date(Date.UTC(partialYear, partialMonth, 1)) : new Date(partialYear, partialMonth, 1);
@@ -63,11 +87,33 @@ const DatePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = useId();
-  const formattedSelectedDate = formatPartialDate(timezone, selectedDate, partialYear, partialMonth);
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
-    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
+  const formattedSelectedDate = formatPartialDate(
+    timezone,
+    selectedDate,
+    partialYear,
+    partialMonth
+  );
+  return /* @__PURE__ */ jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      disabled,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+        /* @__PURE__ */ jsx(
+          InputElement,
+          {
+            $hasStartContent: true,
+            "data-testid": "datepicker-input",
+            placeholder,
+            readOnly: true,
+            value: formattedSelectedDate
+          }
+        )
+      ]
+    }
+  );
 };
 const DateRangePickerInput = ({
   isActive,
@@ -79,7 +125,14 @@ const DateRangePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = useId();
-  let formattedValue = /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
+  let formattedValue = /* @__PURE__ */ jsx(
+    Text,
+    {
+      color: "muted",
+      component: "span",
+      children: placeholder ?? ""
+    }
+  );
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
@@ -92,14 +145,37 @@ const DateRangePickerInput = ({
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
         formatSelectedDate(timezone, selectedStartDate),
         " ",
-        /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: "– end date" })
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: "muted",
+            component: "span",
+            children: "– end date"
+          }
+        )
       ] });
     }
   }
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
-    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, as: "div", "data-testid": "daterangepicker-input", children: formattedValue })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      disabled,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+        /* @__PURE__ */ jsx(
+          InputElement,
+          {
+            $hasStartContent: true,
+            as: "div",
+            "data-testid": "daterangepicker-input",
+            children: formattedValue
+          }
+        )
+      ]
+    }
+  );
 };
 const DateTimeRangePickerInput = ({
   isActive,
@@ -112,13 +188,23 @@ const DateTimeRangePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = useId();
-  const formatDateTime = useCallback((date) => {
-    if (shouldShowSeconds) {
-      return formatSelectedDateTimeWithSeconds(timezone, date);
+  const formatDateTime = useCallback(
+    (date) => {
+      if (shouldShowSeconds) {
+        return formatSelectedDateTimeWithSeconds(timezone, date);
+      }
+      return formatSelectedDateTime(timezone, date);
+    },
+    [shouldShowSeconds, timezone]
+  );
+  let formattedValue = /* @__PURE__ */ jsx(
+    Text,
+    {
+      color: "muted",
+      component: "span",
+      children: placeholder ?? ""
     }
-    return formatSelectedDateTime(timezone, date);
-  }, [shouldShowSeconds, timezone]);
-  let formattedValue = /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: placeholder ?? "" });
+  );
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
@@ -131,15 +217,29 @@ const DateTimeRangePickerInput = ({
       formattedValue = /* @__PURE__ */ jsxs("span", { children: [
         formatDateTime(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
         " ",
-        /* @__PURE__ */ jsx(Text, { color: "muted", component: "span", children: "– end date" })
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: "muted",
+            component: "span",
+            children: "– end date"
+          }
+        )
       ] });
     }
   } else if (selectedEndDate) {
     formattedValue = /* @__PURE__ */ jsxs("span", { children: [
-      /* @__PURE__ */ jsxs(Text, { color: "muted", component: "span", children: [
-        "start date –",
-        " "
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          color: "muted",
+          component: "span",
+          children: [
+            "start date –",
+            " "
+          ]
+        }
+      ),
       formatDateTime(selectedEndDate).replace("AM", "am").replace("PM", "pm")
     ] });
   }
@@ -147,156 +247,126 @@ const DateTimeRangePickerInput = ({
     startDate: selectedStartDate,
     endDate: selectedEndDate
   });
-  return /* @__PURE__ */ jsxs(HighlightedInputWrapper, { $isActive: isActive, $width: "max-content", disabled, error: startDateIsAfterEndDate, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
-    /* @__PURE__ */ jsx(InputElement, { $hasStartContent: true, as: "div", "data-testid": "datetimepicker-input", children: formattedValue })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      fillWidth: true,
+      disabled,
+      error: startDateIsAfterEndDate,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsx(InputStartContent, { children: /* @__PURE__ */ jsx(SvgImage, { name: "calendar" }) }),
+        /* @__PURE__ */ jsx(
+          InputElement,
+          {
+            $hasStartContent: true,
+            as: "div",
+            "data-testid": "datetimepicker-input",
+            children: formattedValue
+          }
+        )
+      ]
+    }
+  );
 };
-const DatePickerContainer = styled(Container).withConfig({
-  componentId: "sc-1m6g9rm-1"
-})(["background:", ";"], ({
-  theme
-}) => theme.click.datePicker.dateOption.color.background.default);
-const ClickableTitle = styled.button.withConfig({
-  componentId: "sc-1m6g9rm-2"
-})(["background:transparent;border:1px solid transparent;cursor:pointer;outline:none;padding:0.25rem 0.5rem;user-select:none;", ";&:hover{background:", ";}&:focus,&:focus-visible{border-color:", ";}"], ({
-  theme
-}) => `
-    border-radius: ${theme.click.datePicker.dateOption.radii.default};
-    color: ${theme.click.datePicker.color.title.default};
-    font: ${theme.click.datePicker.typography.title.default};
-  `, ({
-  theme
-}) => theme.click.datePicker.dateOption.color.background.hover, ({
-  theme
-}) => theme.click.datePicker.dateOption.color.stroke.hover);
-const UnselectableTitle = styled.h2.withConfig({
-  componentId: "sc-1m6g9rm-3"
-})(["margin:0;padding:0;user-select:none;", ""], ({
-  theme
-}) => `
-    color: ${theme.click.datePicker.color.title.default};
-    font: ${theme.click.datePicker.typography.title.default};
-  `);
-const GridContainer = styled.div.withConfig({
-  componentId: "sc-1m6g9rm-4"
-})(["display:grid;padding:0.25rem 0 0;", ""], ({
-  theme
-}) => `
-    gap: calc(${theme.click.datePicker.space.gap} * 2);
-  `);
-const MonthsGrid = styled(GridContainer).withConfig({
-  componentId: "sc-1m6g9rm-5"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridMonths.columns, viewGridMonths.rows);
-const YearsGrid = styled(GridContainer).withConfig({
-  componentId: "sc-1m6g9rm-6"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridYears.columns, viewGridYears.rows);
-const GridCell = styled.button.withConfig({
-  componentId: "sc-1m6g9rm-7"
-})(["align-items:center;cursor:pointer;display:flex;justify-content:center;min-height:26px;padding:8px 4px;text-align:center;", " ", " ", " ", ""], ({
-  theme
-}) => `
-    background: ${theme.click.datePicker.dateOption.color.background.default};
-    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};
-    border-radius: ${theme.click.datePicker.dateOption.radii.default};
-    color: ${theme.click.datePicker.dateOption.color.label.default};
-    font: ${theme.click.datePicker.dateOption.typography.label.default};
-  `, ({
-  $isActive,
-  theme
-}) => $isActive && `
-    background: ${theme.click.datePicker.dateOption.color.background.active};
-    color: ${theme.click.datePicker.dateOption.color.label.active};
-  `, ({
-  $isActive,
-  $isPresent,
-  theme
-}) => $isPresent && !$isActive && `background: ${theme.click.datePicker.dateOption.color.background.range};`, ({
-  theme
-}) => `
-    &:hover {
-      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};
+const DateTableCell = forwardRef(
+  ({
+    isCurrentMonth,
+    isDisabled,
+    isSelected,
+    isPresent,
+    className,
+    children,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    role,
+    tabIndex,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsx(
+    "td",
+    {
+      ref,
+      className: cn(
+        dateTableCellVariants({
+          muted: !isCurrentMonth || isDisabled,
+          disabled: isDisabled,
+          selected: isSelected,
+          present: isPresent && !isSelected
+        }),
+        className
+      ),
+      onClick,
+      onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
+      role,
+      tabIndex,
+      "aria-label": ariaLabel,
+      children
     }
-
-    &:focus {
-      outline: none;
-      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};
+  )
+);
+DateTableCell.displayName = "DateTableCell";
+const StyledDropdownItem = ({
+  className,
+  children,
+  onClick,
+  "data-testid": dataTestId
+}) => /* @__PURE__ */ jsx(
+  Dropdown.Item,
+  {
+    onClick,
+    "data-testid": dataTestId,
+    className: cn(styles["styled-dropdown-item"], className),
+    children
+  }
+);
+const monthAbbreviations = getMonthNames("short");
+const PickerNavControl = forwardRef(
+  ({
+    className,
+    icon,
+    onClick,
+    onKeyDown,
+    size,
+    type,
+    tabIndex,
+    "data-testid": dataTestId
+  }, ref) => /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ref,
+      icon,
+      onClick,
+      onKeyDown,
+      size,
+      type,
+      tabIndex,
+      "data-testid": dataTestId,
+      className: cn(styles["picker-nav-control"], className)
     }
-
-    &:focus-visible {
-      outline: none;
-      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};
+  )
+);
+PickerNavControl.displayName = "PickerNavControl";
+const EmptyDateSelectNav = forwardRef(
+  ({ className, icon, onKeyDown, size, type, tabIndex, "data-testid": dataTestId }, ref) => /* @__PURE__ */ jsx(
+    PickerNavControl,
+    {
+      ref,
+      icon,
+      onKeyDown,
+      size,
+      type,
+      tabIndex,
+      "data-testid": dataTestId,
+      className: cn(styles["empty-date-select-nav"], className)
     }
-  `);
-const DateTable = styled.table.withConfig({
-  componentId: "sc-1m6g9rm-8"
-})(["border-collapse:separate;border-spacing:0;font:", ";table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{padding:4px;}"], ({
-  theme
-}) => theme.typography.styles.product.text.normal.md, explicitWidth, ({
-  theme
-}) => theme.click.datePicker.dateOption.size.height);
-const DateTableHeader = styled.th.withConfig({
-  componentId: "sc-1m6g9rm-9"
-})(["", " width:14%;"], ({
-  theme
-}) => `
-    color: ${theme.click.datePicker.color.daytitle.default};
-    font: ${theme.click.datePicker.typography.daytitle.default};
-  `);
-const DateTableCell = styled.td.withConfig({
-  componentId: "sc-1m6g9rm-10"
-})(["", " ", " ", " ", " text-align:center;outline:none;&:hover{", ";}&:focus{", ";}&:focus-visible{", ";}"], ({
-  theme
-}) => `
-    border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default};
-    border-radius: ${theme.click.datePicker.dateOption.radii.default};
-    font: ${theme.click.datePicker.dateOption.typography.label.default};
-  `, ({
-  $isCurrentMonth,
-  $isDisabled,
-  theme
-}) => (!$isCurrentMonth || $isDisabled) && `
-    color: ${theme.click.datePicker.dateOption.color.label.disabled};
-    font: ${theme.click.datePicker.dateOption.typography.label.disabled};
-  `, ({
-  $isSelected,
-  theme
-}) => $isSelected && `
-      background: ${theme.click.datePicker.dateOption.color.background.active} !important;
-      color: ${theme.click.datePicker.dateOption.color.label.active};
-    `, ({
-  $isSelected,
-  $isPresent,
-  theme
-}) => $isPresent && !$isSelected && `background: ${theme.click.datePicker.dateOption.color.background.range};`, ({
-  $isDisabled,
-  $isPresent,
-  theme
-}) => `border: ${theme.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme.click.datePicker.dateOption.color.stroke.disabled : theme.click.datePicker.dateOption.color.stroke.hover};
-      background: ${$isPresent ? theme.click.datePicker.dateOption.color.background.range : ""};
-      border-radius: ${theme.click.datePicker.dateOption.radii.default};`, ({
-  $isDisabled,
-  theme
-}) => `outline: none;
-      border: ${theme.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme.click.datePicker.dateOption.color.stroke.disabled : theme.click.datePicker.dateOption.color.stroke.hover};`, ({
-  $isDisabled,
-  theme
-}) => `outline: none;
-      border: ${theme.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme.click.datePicker.dateOption.color.stroke.disabled : theme.click.datePicker.dateOption.color.stroke.hover};`);
-const StyledDropdownItem = styled(Dropdown.Item).withConfig({
-  componentId: "sc-1m6g9rm-11"
-})(["box-sizing:content-box;min-height:24px;"]);
-const monthAbbreviations = getMonthNames("short");
-const PickerNavControl = styled(IconButton).withConfig({
-  componentId: "sc-1m6g9rm-12"
-})(["&&{&:focus,&:focus-visible{outline:none;border:", " solid ", ";}}"], ({
-  theme
-}) => theme.click.datePicker.dateOption.stroke, ({
-  theme
-}) => theme.click.datePicker.dateOption.color.stroke.hover);
-const EmptyDateSelectNav = styled(PickerNavControl).withConfig({
-  componentId: "sc-1m6g9rm-13"
-})(["visibility:hidden;pointer-events:none;"]);
+  )
+);
+EmptyDateSelectNav.displayName = "EmptyDateSelectNav";
 const DateSelectNav = ({
   id,
   icon,
@@ -308,9 +378,32 @@ const DateSelectNav = ({
   buttonRef
 }) => {
   if (view === MONTHS) {
-    return /* @__PURE__ */ jsx(EmptyDateSelectNav, { ref: buttonRef, "data-testid": id, icon, size, type: "ghost", tabIndex, onKeyDown });
+    return /* @__PURE__ */ jsx(
+      EmptyDateSelectNav,
+      {
+        ref: buttonRef,
+        "data-testid": id,
+        icon,
+        size,
+        type: "ghost",
+        tabIndex,
+        onKeyDown
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(PickerNavControl, { ref: buttonRef, "data-testid": id, icon, onClick, onKeyDown, size, type: "ghost", tabIndex });
+  return /* @__PURE__ */ jsx(
+    PickerNavControl,
+    {
+      ref: buttonRef,
+      "data-testid": id,
+      icon,
+      onClick,
+      onKeyDown,
+      size,
+      type: "ghost",
+      tabIndex
+    }
+  );
 };
 const CalendarRenderer = ({
   calendarOptions = {},
@@ -320,19 +413,14 @@ const CalendarRenderer = ({
   onMonthSelect,
   selectedDate,
   timezone = "system",
+  className,
   ...props
 }) => {
   const shiftedCalendarOptions = calendarOptions.defaultDate instanceof Date ? {
     ...calendarOptions,
     defaultDate: shiftToTimezone(calendarOptions.defaultDate, timezone)
   } : calendarOptions;
-  const {
-    body,
-    headers,
-    month,
-    navigation,
-    year
-  } = useCalendar({
+  const { body, headers, month, navigation, year } = useCalendar({
     defaultWeekStart: 1,
     ...shiftedCalendarOptions
   });
@@ -392,84 +480,96 @@ const CalendarRenderer = ({
       validRefs[prevValidIndex]?.focus();
     }
   }, []);
-  const onYearSelection = useCallback((yearValue) => {
-    setSelectedYear(yearValue);
-    setView(MONTHS);
-    onYearSelect?.(yearValue);
-  }, [onYearSelect]);
-  const onMonthSelection = useCallback((monthIndex) => {
-    const finalYear = typeof selectedYear === "number" ? selectedYear : year;
-    const newDate = new Date(finalYear, monthIndex, 1);
-    navigation.setDate(newDate);
-    onMonthSelect?.(finalYear, monthIndex);
-    setView(DAYS);
-    setSelectedYear(null);
-    setYearOffset(0);
-  }, [selectedYear, year, navigation, onMonthSelect]);
-  const onMonthGridKeyDown = useCallback((event, index) => {
-    const columns = viewGridMonths.columns;
-    const totalItems = 12;
-    let newIndex = index;
-    switch (event.key) {
-      case "ArrowRight":
-        event.preventDefault();
-        newIndex = (index + 1) % totalItems;
-        break;
-      case "ArrowLeft":
-        event.preventDefault();
-        newIndex = (index - 1 + totalItems) % totalItems;
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        newIndex = (index + columns) % totalItems;
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        newIndex = (index - columns + totalItems) % totalItems;
-        break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        onMonthSelection(index);
-        return;
-      default:
-        return;
-    }
-    setFocusedMonthIndex(newIndex);
-    monthGridRef.current[newIndex]?.focus();
-  }, [onMonthSelection]);
-  const onYearGridKeyDown = useCallback((event, index, yearValue) => {
-    const columns = viewGridYears.columns;
-    const totalItems = totalYears;
-    let newIndex = index;
-    switch (event.key) {
-      case "ArrowRight":
-        event.preventDefault();
-        newIndex = (index + 1) % totalItems;
-        break;
-      case "ArrowLeft":
-        event.preventDefault();
-        newIndex = (index - 1 + totalItems) % totalItems;
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        newIndex = (index + columns) % totalItems;
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        newIndex = (index - columns + totalItems) % totalItems;
-        break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        onYearSelection(yearValue);
-        return;
-      default:
-        return;
-    }
-    setFocusedYearIndex(newIndex);
-    yearGridRef.current[newIndex]?.focus();
-  }, [onYearSelection]);
+  const onYearSelection = useCallback(
+    (yearValue) => {
+      setSelectedYear(yearValue);
+      setView(MONTHS);
+      onYearSelect?.(yearValue);
+    },
+    [onYearSelect]
+  );
+  const onMonthSelection = useCallback(
+    (monthIndex) => {
+      const finalYear = typeof selectedYear === "number" ? selectedYear : year;
+      const newDate = new Date(finalYear, monthIndex, 1);
+      navigation.setDate(newDate);
+      onMonthSelect?.(finalYear, monthIndex);
+      setView(DAYS);
+      setSelectedYear(null);
+      setYearOffset(0);
+    },
+    [selectedYear, year, navigation, onMonthSelect]
+  );
+  const onMonthGridKeyDown = useCallback(
+    (event, index) => {
+      const columns = viewGridMonths.columns;
+      const totalItems = 12;
+      let newIndex = index;
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          newIndex = (index + 1) % totalItems;
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          newIndex = (index - 1 + totalItems) % totalItems;
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          newIndex = (index + columns) % totalItems;
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          newIndex = (index - columns + totalItems) % totalItems;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          onMonthSelection(index);
+          return;
+        default:
+          return;
+      }
+      setFocusedMonthIndex(newIndex);
+      monthGridRef.current[newIndex]?.focus();
+    },
+    [onMonthSelection]
+  );
+  const onYearGridKeyDown = useCallback(
+    (event, index, yearValue) => {
+      const columns = viewGridYears.columns;
+      const totalItems = totalYears;
+      let newIndex = index;
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          newIndex = (index + 1) % totalItems;
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          newIndex = (index - 1 + totalItems) % totalItems;
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          newIndex = (index + columns) % totalItems;
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          newIndex = (index - columns + totalItems) % totalItems;
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          onYearSelection(yearValue);
+          return;
+        default:
+          return;
+      }
+      setFocusedYearIndex(newIndex);
+      yearGridRef.current[newIndex]?.focus();
+    },
+    [onYearSelection]
+  );
   const headerDate = /* @__PURE__ */ new Date();
   headerDate.setMonth(month);
   headerDate.setFullYear(year);
@@ -489,18 +589,48 @@ const CalendarRenderer = ({
     const shiftedSelected = selectedDate ? shiftToTimezone(selectedDate, timezone) : void 0;
     const selectedMonth = shiftedSelected?.getMonth();
     const selectedYear2 = shiftedSelected?.getFullYear();
-    return /* @__PURE__ */ jsx(MonthsGrid, { "data-testid": "months-grid", role: "grid", "aria-label": "Select month", children: monthAbbreviations.map((month2, index) => {
-      const handleKeyDown = (event) => {
-        onMonthGridKeyDown(event, index);
-      };
-      const handleClick = () => {
-        onMonthSelection(index);
-      };
-      const ref = (element) => {
-        monthGridRef.current[index] = element;
-      };
-      return /* @__PURE__ */ jsx(GridCell, { type: "button", ref, $isActive: selectedDate && index === selectedMonth && year === selectedYear2, $isPresent: index === thisMonth && year === thisYear, onClick: handleClick, onKeyDown: handleKeyDown, "data-testid": `month-cell-${index}`, tabIndex: index === focusedMonthIndex ? 0 : -1, "aria-label": month2, children: month2 }, month2);
-    }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(styles["grid-container"], styles["months-grid"]),
+        "data-testid": "months-grid",
+        role: "grid",
+        "aria-label": "Select month",
+        children: monthAbbreviations.map((month2, index) => {
+          const handleKeyDown = (event) => {
+            onMonthGridKeyDown(event, index);
+          };
+          const handleClick = () => {
+            onMonthSelection(index);
+          };
+          const ref = (element) => {
+            monthGridRef.current[index] = element;
+          };
+          const isActive = Boolean(
+            selectedDate && index === selectedMonth && year === selectedYear2
+          );
+          const isPresent = index === thisMonth && year === thisYear;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref,
+              className: gridCellVariants({
+                active: isActive,
+                present: isPresent && !isActive
+              }),
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              "data-testid": `month-cell-${index}`,
+              tabIndex: index === focusedMonthIndex ? 0 : -1,
+              "aria-label": month2,
+              children: month2
+            },
+            month2
+          );
+        })
+      }
+    );
   };
   const renderYearsGrid = () => {
     const years = [];
@@ -510,18 +640,46 @@ const CalendarRenderer = ({
     for (let i = -yearsOffset; i <= yearsOffset; i++) {
       years.push(baseYear + i);
     }
-    return /* @__PURE__ */ jsx(YearsGrid, { "data-testid": "years-grid", role: "grid", "aria-label": "Select year", children: years.map((currentYear, index) => {
-      const ref = (element) => {
-        yearGridRef.current[index] = element;
-      };
-      const handleClick = () => {
-        onYearSelection(currentYear);
-      };
-      const handleKeyDown = (event) => {
-        onYearGridKeyDown(event, index, currentYear);
-      };
-      return /* @__PURE__ */ jsx(GridCell, { type: "button", ref, $isActive: selectedDate && currentYear === selectedYear2, $isPresent: currentYear === thisYear, onClick: handleClick, onKeyDown: handleKeyDown, "data-testid": `year-cell-${currentYear}`, tabIndex: index === focusedYearIndex ? 0 : -1, "aria-label": String(currentYear), children: currentYear }, currentYear);
-    }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(styles["grid-container"], styles["years-grid"]),
+        "data-testid": "years-grid",
+        role: "grid",
+        "aria-label": "Select year",
+        children: years.map((currentYear, index) => {
+          const ref = (element) => {
+            yearGridRef.current[index] = element;
+          };
+          const handleClick = () => {
+            onYearSelection(currentYear);
+          };
+          const handleKeyDown = (event) => {
+            onYearGridKeyDown(event, index, currentYear);
+          };
+          const isActive = Boolean(selectedDate && currentYear === selectedYear2);
+          const isPresent = currentYear === thisYear;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              ref,
+              className: gridCellVariants({
+                active: isActive,
+                present: isPresent && !isActive
+              }),
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              "data-testid": `year-cell-${currentYear}`,
+              tabIndex: index === focusedYearIndex ? 0 : -1,
+              "aria-label": String(currentYear),
+              children: currentYear
+            },
+            currentYear
+          );
+        })
+      }
+    );
   };
   const renderTableContent = () => {
     if (view === MONTHS) {
@@ -531,37 +689,95 @@ const CalendarRenderer = ({
       return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: DAYS_IN_WEEK, children: renderYearsGrid() }) }) });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: headers.weekdays.map(({
-        key,
-        value: date
-      }) => {
-        return /* @__PURE__ */ jsx(DateTableHeader, { children: formatWeekday("system", date) }, key);
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: headers.weekdays.map(({ key, value: date }) => {
+        return /* @__PURE__ */ jsx(
+          "th",
+          {
+            className: styles["date-table-header"],
+            children: formatWeekday("system", date)
+          },
+          key
+        );
       }) }) }),
       /* @__PURE__ */ jsx("tbody", { children: children(body) })
     ] });
   };
-  return /* @__PURE__ */ jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
-    /* @__PURE__ */ jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
-      /* @__PURE__ */ jsx(DateSelectNav, { id: "calendar-previous-month", icon: "chevron-left", onClick: onPreviousClick, onKeyDown: onHeaderNavKeyDown, view, tabIndex: view === MONTHS ? -1 : 0, buttonRef: (el) => {
-        if (view !== MONTHS) {
-          headerNavRefs.current[0] = el;
-        } else {
-          headerNavRefs.current[0] = null;
-        }
-      } }),
-      view === DAYS && allowYearMonthSelection ? /* @__PURE__ */ jsx(ClickableTitle, { type: "button", ref: (el) => {
-        headerNavRefs.current[1] = el;
-      }, onClick: onTitleClick, onKeyDown: onHeaderNavKeyDown, "data-testid": "calendar-title", tabIndex: 0, children: getHeaderTitle(view) }) : /* @__PURE__ */ jsx(UnselectableTitle, { children: getHeaderTitle(view) }),
-      /* @__PURE__ */ jsx(DateSelectNav, { id: "calendar-next-month", icon: "chevron-right", onClick: onNextClick, onKeyDown: onHeaderNavKeyDown, view, tabIndex: view === MONTHS ? -1 : 0, buttonRef: (el) => {
-        if (view !== MONTHS) {
-          headerNavRefs.current[2] = el;
-        } else {
-          headerNavRefs.current[2] = null;
-        }
-      } })
-    ] }),
-    /* @__PURE__ */ jsx(DateTable, { children: renderTableContent() })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      "data-testid": "datepicker-calendar-container",
+      isResponsive: false,
+      fillWidth: false,
+      orientation: "vertical",
+      padding: "sm",
+      ...props,
+      className: cn(styles["date-picker-container"], className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Container,
+          {
+            isResponsive: false,
+            justifyContent: "space-between",
+            orientation: "horizontal",
+            children: [
+              /* @__PURE__ */ jsx(
+                DateSelectNav,
+                {
+                  id: "calendar-previous-month",
+                  icon: "chevron-left",
+                  onClick: onPreviousClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  view,
+                  tabIndex: view === MONTHS ? -1 : 0,
+                  buttonRef: (el) => {
+                    if (view !== MONTHS) {
+                      headerNavRefs.current[0] = el;
+                    } else {
+                      headerNavRefs.current[0] = null;
+                    }
+                  }
+                }
+              ),
+              view === DAYS && allowYearMonthSelection ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles["clickable-title"],
+                  ref: (el) => {
+                    headerNavRefs.current[1] = el;
+                  },
+                  onClick: onTitleClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  "data-testid": "calendar-title",
+                  tabIndex: 0,
+                  children: getHeaderTitle(view)
+                }
+              ) : /* @__PURE__ */ jsx("h2", { className: styles["unselectable-title"], children: getHeaderTitle(view) }),
+              /* @__PURE__ */ jsx(
+                DateSelectNav,
+                {
+                  id: "calendar-next-month",
+                  icon: "chevron-right",
+                  onClick: onNextClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  view,
+                  tabIndex: view === MONTHS ? -1 : 0,
+                  buttonRef: (el) => {
+                    if (view !== MONTHS) {
+                      headerNavRefs.current[2] = el;
+                    } else {
+                      headerNavRefs.current[2] = null;
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("table", { className: styles["date-table"], children: renderTableContent() })
+      ]
+    }
+  );
 };
 
 export { CalendarRenderer, DatePickerInput, DateRangePickerInput, DateTableCell, DateTimeRangePickerInput, StyledDropdownItem };