@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/cjs/components/DatePicker/Common.cjs

@@ -1,11 +1,13 @@
+require("./Common.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
 const react = require('react');
 const calendar = require('@h6s/calendar');
+const cva = require('../../lib/cva.cjs');
+const Common_module = require('./Common.module.css.cjs');
 const utils = require('./utils.cjs');
 const date = require('../../utils/date.cjs');
 const InputWrapper = require('../InputWrapper/index.cjs');
@@ -14,35 +16,57 @@ const Container = require('../Container/index.cjs');
 const Text = require('../Text/index.cjs');
 const Dropdown = require('../Dropdown/index.cjs');
 const IconButton = require('../IconButton/index.cjs');
+const classVarianceAuthority = require('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 = styledComponents.styled(InputWrapper.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 = classVarianceAuthority.cva(Common_module.default["highlighted-input-wrapper"], {
+  variants: {
+    fillWidth: { true: Common_module.default["highlighted-input-wrapper_fill-width"] },
+    active: { true: Common_module.default["highlighted-input-wrapper_active"] }
+  }
+});
+const dateTableCellVariants = classVarianceAuthority.cva(Common_module.default["date-table-cell"], {
+  variants: {
+    muted: { true: Common_module.default["date-table-cell_muted"] },
+    disabled: { true: Common_module.default["date-table-cell_disabled"] },
+    selected: { true: Common_module.default["date-table-cell_selected"] },
+    present: { true: Common_module.default["date-table-cell_present"] }
+  }
+});
+const gridCellVariants = classVarianceAuthority.cva(Common_module.default["grid-cell"], {
+  variants: {
+    active: { true: Common_module.default["grid-cell_active"] },
+    present: { true: Common_module.default["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__ */ jsxRuntime.jsx(
+  InputWrapper.InputWrapper,
+  {
+    error,
+    disabled,
+    id,
+    className: cva.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);
@@ -67,11 +91,33 @@ const DatePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = react.useId();
-  const formattedSelectedDate = formatPartialDate(timezone, selectedDate, partialYear, partialMonth);
-  return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputElement, { $hasStartContent: true, "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
-  ] });
+  const formattedSelectedDate = formatPartialDate(
+    timezone,
+    selectedDate,
+    partialYear,
+    partialMonth
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      disabled,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputWrapper.InputElement,
+          {
+            $hasStartContent: true,
+            "data-testid": "datepicker-input",
+            placeholder,
+            readOnly: true,
+            value: formattedSelectedDate
+          }
+        )
+      ]
+    }
+  );
 };
 const DateRangePickerInput = ({
   isActive,
@@ -83,7 +129,14 @@ const DateRangePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = react.useId();
-  let formattedValue = /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", component: "span", children: placeholder ?? "" });
+  let formattedValue = /* @__PURE__ */ jsxRuntime.jsx(
+    Text.Text,
+    {
+      color: "muted",
+      component: "span",
+      children: placeholder ?? ""
+    }
+  );
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -96,14 +149,37 @@ const DateRangePickerInput = ({
       formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         utils.formatSelectedDate(timezone, selectedStartDate),
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", component: "span", children: "– end date" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Text.Text,
+          {
+            color: "muted",
+            component: "span",
+            children: "– end date"
+          }
+        )
       ] });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputElement, { $hasStartContent: true, as: "div", "data-testid": "daterangepicker-input", children: formattedValue })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      disabled,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputWrapper.InputElement,
+          {
+            $hasStartContent: true,
+            as: "div",
+            "data-testid": "daterangepicker-input",
+            children: formattedValue
+          }
+        )
+      ]
+    }
+  );
 };
 const DateTimeRangePickerInput = ({
   isActive,
@@ -116,13 +192,23 @@ const DateTimeRangePickerInput = ({
   timezone = "system"
 }) => {
   const defaultId = react.useId();
-  const formatDateTime = react.useCallback((date) => {
-    if (shouldShowSeconds) {
-      return utils.formatSelectedDateTimeWithSeconds(timezone, date);
+  const formatDateTime = react.useCallback(
+    (date) => {
+      if (shouldShowSeconds) {
+        return utils.formatSelectedDateTimeWithSeconds(timezone, date);
+      }
+      return utils.formatSelectedDateTime(timezone, date);
+    },
+    [shouldShowSeconds, timezone]
+  );
+  let formattedValue = /* @__PURE__ */ jsxRuntime.jsx(
+    Text.Text,
+    {
+      color: "muted",
+      component: "span",
+      children: placeholder ?? ""
     }
-    return utils.formatSelectedDateTime(timezone, date);
-  }, [shouldShowSeconds, timezone]);
-  let formattedValue = /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", component: "span", children: placeholder ?? "" });
+  );
   if (selectedStartDate) {
     if (selectedEndDate) {
       formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -135,15 +221,29 @@ const DateTimeRangePickerInput = ({
       formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
         formatDateTime(selectedStartDate).replace("AM", "am").replace("PM", "pm"),
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", component: "span", children: "– end date" })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Text.Text,
+          {
+            color: "muted",
+            component: "span",
+            children: "– end date"
+          }
+        )
       ] });
     }
   } else if (selectedEndDate) {
     formattedValue = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Text.Text, { color: "muted", component: "span", children: [
-        "start date –",
-        " "
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Text.Text,
+        {
+          color: "muted",
+          component: "span",
+          children: [
+            "start date –",
+            " "
+          ]
+        }
+      ),
       formatDateTime(selectedEndDate).replace("AM", "am").replace("PM", "pm")
     ] });
   }
@@ -151,156 +251,126 @@ const DateTimeRangePickerInput = ({
     startDate: selectedStartDate,
     endDate: selectedEndDate
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, $width: "max-content", disabled, error: startDateIsAfterEndDate, id: id ?? defaultId, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputElement, { $hasStartContent: true, as: "div", "data-testid": "datetimepicker-input", children: formattedValue })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    HighlightedInputWrapper,
+    {
+      isActive,
+      fillWidth: true,
+      disabled,
+      error: startDateIsAfterEndDate,
+      id: id ?? defaultId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InputWrapper.InputStartContent, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "calendar" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          InputWrapper.InputElement,
+          {
+            $hasStartContent: true,
+            as: "div",
+            "data-testid": "datetimepicker-input",
+            children: formattedValue
+          }
+        )
+      ]
+    }
+  );
 };
-const DatePickerContainer = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1m6g9rm-1"
-})(["background:", ";"], ({
-  theme
-}) => theme.click.datePicker.dateOption.color.background.default);
-const ClickableTitle = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.styled(GridContainer).withConfig({
-  componentId: "sc-1m6g9rm-5"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridMonths.columns, viewGridMonths.rows);
-const YearsGrid = styledComponents.styled(GridContainer).withConfig({
-  componentId: "sc-1m6g9rm-6"
-})(["grid-template-columns:repeat(", ",1fr);grid-template-rows:repeat(", ",1fr);"], viewGridYears.columns, viewGridYears.rows);
-const GridCell = styledComponents.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 = react.forwardRef(
+  ({
+    isCurrentMonth,
+    isDisabled,
+    isSelected,
+    isPresent,
+    className,
+    children,
+    onClick,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    role,
+    tabIndex,
+    "aria-label": ariaLabel
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cva.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__ */ jsxRuntime.jsx(
+  Dropdown.Dropdown.Item,
+  {
+    onClick,
+    "data-testid": dataTestId,
+    className: cva.cn(Common_module.default["styled-dropdown-item"], className),
+    children
+  }
+);
+const monthAbbreviations = date.getMonthNames("short");
+const PickerNavControl = react.forwardRef(
+  ({
+    className,
+    icon,
+    onClick,
+    onKeyDown,
+    size,
+    type,
+    tabIndex,
+    "data-testid": dataTestId
+  }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    IconButton.IconButton,
+    {
+      ref,
+      icon,
+      onClick,
+      onKeyDown,
+      size,
+      type,
+      tabIndex,
+      "data-testid": dataTestId,
+      className: cva.cn(Common_module.default["picker-nav-control"], className)
     }
-
-    &:focus-visible {
-      outline: none;
-      border-color: ${theme.click.datePicker.dateOption.color.stroke.hover};
+  )
+);
+PickerNavControl.displayName = "PickerNavControl";
+const EmptyDateSelectNav = react.forwardRef(
+  ({ className, icon, onKeyDown, size, type, tabIndex, "data-testid": dataTestId }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    PickerNavControl,
+    {
+      ref,
+      icon,
+      onKeyDown,
+      size,
+      type,
+      tabIndex,
+      "data-testid": dataTestId,
+      className: cva.cn(Common_module.default["empty-date-select-nav"], className)
     }
-  `);
-const DateTable = styledComponents.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 = styledComponents.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 = styledComponents.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 = styledComponents.styled(Dropdown.Dropdown.Item).withConfig({
-  componentId: "sc-1m6g9rm-11"
-})(["box-sizing:content-box;min-height:24px;"]);
-const monthAbbreviations = date.getMonthNames("short");
-const PickerNavControl = styledComponents.styled(IconButton.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 = styledComponents.styled(PickerNavControl).withConfig({
-  componentId: "sc-1m6g9rm-13"
-})(["visibility:hidden;pointer-events:none;"]);
+  )
+);
+EmptyDateSelectNav.displayName = "EmptyDateSelectNav";
 const DateSelectNav = ({
   id,
   icon,
@@ -312,9 +382,32 @@ const DateSelectNav = ({
   buttonRef
 }) => {
   if (view === date.MONTHS) {
-    return /* @__PURE__ */ jsxRuntime.jsx(EmptyDateSelectNav, { ref: buttonRef, "data-testid": id, icon, size, type: "ghost", tabIndex, onKeyDown });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyDateSelectNav,
+      {
+        ref: buttonRef,
+        "data-testid": id,
+        icon,
+        size,
+        type: "ghost",
+        tabIndex,
+        onKeyDown
+      }
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(PickerNavControl, { ref: buttonRef, "data-testid": id, icon, onClick, onKeyDown, size, type: "ghost", tabIndex });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PickerNavControl,
+    {
+      ref: buttonRef,
+      "data-testid": id,
+      icon,
+      onClick,
+      onKeyDown,
+      size,
+      type: "ghost",
+      tabIndex
+    }
+  );
 };
 const CalendarRenderer = ({
   calendarOptions = {},
@@ -324,19 +417,14 @@ const CalendarRenderer = ({
   onMonthSelect,
   selectedDate,
   timezone = "system",
+  className,
   ...props
 }) => {
   const shiftedCalendarOptions = calendarOptions.defaultDate instanceof Date ? {
     ...calendarOptions,
     defaultDate: utils.shiftToTimezone(calendarOptions.defaultDate, timezone)
   } : calendarOptions;
-  const {
-    body,
-    headers,
-    month,
-    navigation,
-    year
-  } = calendar.useCalendar({
+  const { body, headers, month, navigation, year } = calendar.useCalendar({
     defaultWeekStart: 1,
     ...shiftedCalendarOptions
   });
@@ -396,84 +484,96 @@ const CalendarRenderer = ({
       validRefs[prevValidIndex]?.focus();
     }
   }, []);
-  const onYearSelection = react.useCallback((yearValue) => {
-    setSelectedYear(yearValue);
-    setView(date.MONTHS);
-    onYearSelect?.(yearValue);
-  }, [onYearSelect]);
-  const onMonthSelection = react.useCallback((monthIndex) => {
-    const finalYear = typeof selectedYear === "number" ? selectedYear : year;
-    const newDate = new Date(finalYear, monthIndex, 1);
-    navigation.setDate(newDate);
-    onMonthSelect?.(finalYear, monthIndex);
-    setView(date.DAYS);
-    setSelectedYear(null);
-    setYearOffset(0);
-  }, [selectedYear, year, navigation, onMonthSelect]);
-  const onMonthGridKeyDown = react.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 = react.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 = react.useCallback(
+    (yearValue) => {
+      setSelectedYear(yearValue);
+      setView(date.MONTHS);
+      onYearSelect?.(yearValue);
+    },
+    [onYearSelect]
+  );
+  const onMonthSelection = react.useCallback(
+    (monthIndex) => {
+      const finalYear = typeof selectedYear === "number" ? selectedYear : year;
+      const newDate = new Date(finalYear, monthIndex, 1);
+      navigation.setDate(newDate);
+      onMonthSelect?.(finalYear, monthIndex);
+      setView(date.DAYS);
+      setSelectedYear(null);
+      setYearOffset(0);
+    },
+    [selectedYear, year, navigation, onMonthSelect]
+  );
+  const onMonthGridKeyDown = react.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 = react.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);
@@ -493,18 +593,48 @@ const CalendarRenderer = ({
     const shiftedSelected = selectedDate ? utils.shiftToTimezone(selectedDate, timezone) : void 0;
     const selectedMonth = shiftedSelected?.getMonth();
     const selectedYear2 = shiftedSelected?.getFullYear();
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cva.cn(Common_module.default["grid-container"], Common_module.default["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__ */ jsxRuntime.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 = [];
@@ -514,18 +644,46 @@ const CalendarRenderer = ({
     for (let i = -yearsOffset; i <= yearsOffset; i++) {
       years.push(baseYear + i);
     }
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cva.cn(Common_module.default["grid-container"], Common_module.default["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__ */ jsxRuntime.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 === date.MONTHS) {
@@ -535,37 +693,95 @@ const CalendarRenderer = ({
       return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: date.DAYS_IN_WEEK, children: renderYearsGrid() }) }) });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekdays.map(({
-        key,
-        value: date
-      }) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: utils.formatWeekday("system", date) }, key);
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekdays.map(({ key, value: date }) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "th",
+          {
+            className: Common_module.default["date-table-header"],
+            children: utils.formatWeekday("system", date)
+          },
+          key
+        );
       }) }) }),
       /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: children(body) })
     ] });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DateSelectNav, { id: "calendar-previous-month", icon: "chevron-left", onClick: onPreviousClick, onKeyDown: onHeaderNavKeyDown, view, tabIndex: view === date.MONTHS ? -1 : 0, buttonRef: (el) => {
-        if (view !== date.MONTHS) {
-          headerNavRefs.current[0] = el;
-        } else {
-          headerNavRefs.current[0] = null;
-        }
-      } }),
-      view === date.DAYS && allowYearMonthSelection ? /* @__PURE__ */ jsxRuntime.jsx(ClickableTitle, { type: "button", ref: (el) => {
-        headerNavRefs.current[1] = el;
-      }, onClick: onTitleClick, onKeyDown: onHeaderNavKeyDown, "data-testid": "calendar-title", tabIndex: 0, children: getHeaderTitle(view) }) : /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: getHeaderTitle(view) }),
-      /* @__PURE__ */ jsxRuntime.jsx(DateSelectNav, { id: "calendar-next-month", icon: "chevron-right", onClick: onNextClick, onKeyDown: onHeaderNavKeyDown, view, tabIndex: view === date.MONTHS ? -1 : 0, buttonRef: (el) => {
-        if (view !== date.MONTHS) {
-          headerNavRefs.current[2] = el;
-        } else {
-          headerNavRefs.current[2] = null;
-        }
-      } })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(DateTable, { children: renderTableContent() })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Container.Container,
+    {
+      "data-testid": "datepicker-calendar-container",
+      isResponsive: false,
+      fillWidth: false,
+      orientation: "vertical",
+      padding: "sm",
+      ...props,
+      className: cva.cn(Common_module.default["date-picker-container"], className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Container.Container,
+          {
+            isResponsive: false,
+            justifyContent: "space-between",
+            orientation: "horizontal",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DateSelectNav,
+                {
+                  id: "calendar-previous-month",
+                  icon: "chevron-left",
+                  onClick: onPreviousClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  view,
+                  tabIndex: view === date.MONTHS ? -1 : 0,
+                  buttonRef: (el) => {
+                    if (view !== date.MONTHS) {
+                      headerNavRefs.current[0] = el;
+                    } else {
+                      headerNavRefs.current[0] = null;
+                    }
+                  }
+                }
+              ),
+              view === date.DAYS && allowYearMonthSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: Common_module.default["clickable-title"],
+                  ref: (el) => {
+                    headerNavRefs.current[1] = el;
+                  },
+                  onClick: onTitleClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  "data-testid": "calendar-title",
+                  tabIndex: 0,
+                  children: getHeaderTitle(view)
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Common_module.default["unselectable-title"], children: getHeaderTitle(view) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DateSelectNav,
+                {
+                  id: "calendar-next-month",
+                  icon: "chevron-right",
+                  onClick: onNextClick,
+                  onKeyDown: onHeaderNavKeyDown,
+                  view,
+                  tabIndex: view === date.MONTHS ? -1 : 0,
+                  buttonRef: (el) => {
+                    if (view !== date.MONTHS) {
+                      headerNavRefs.current[2] = el;
+                    } else {
+                      headerNavRefs.current[2] = null;
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("table", { className: Common_module.default["date-table"], children: renderTableContent() })
+      ]
+    }
+  );
 };
 
 exports.CalendarRenderer = CalendarRenderer;