@vuu-ui/vuu-ui-controls 0.8.81 → 0.8.82

package/cjs/calendar/Calendar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var calendarCss = ".saltCalendar {\n  width: min-content;\n}\n\n.saltCalendar .saltIcon {\n  display: inline-block;\n}\n";
+var calendarCss = ".saltCalendar {\n  width: min-content;\n  background: var(--salt-container-primary-background);\n  padding: var(--salt-spacing-100);\n}\n";
 
 module.exports = calendarCss;
 //# sourceMappingURL=Calendar.css.js.map

package/cjs/calendar/Calendar.js

@@ -2,8 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var CalendarCarousel = require('./internal/CalendarCarousel.js');
@@ -11,25 +9,34 @@ var CalendarContext = require('./internal/CalendarContext.js');
 var CalendarNavigation = require('./internal/CalendarNavigation.js');
 var CalendarWeekHeader = require('./internal/CalendarWeekHeader.js');
 var useCalendar = require('./useCalendar.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var date = require('@internationalized/date');
 var Calendar$1 = require('./Calendar.css.js');
+var utils = require('./internal/utils.js');
 
 const withBaseName = core.makePrefixer("saltCalendar");
 const Calendar = React.forwardRef(
   function Calendar2(props, ref) {
+    const {
+      className,
+      id,
+      renderDayContents,
+      hideYearDropdown,
+      TooltipProps,
+      borderedDropdown,
+      ...rest
+    } = props;
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-calendar",
       css: Calendar$1,
       window: targetWindow
     });
-    const {
-      className,
-      renderDayContents,
+    const { state, helpers } = useCalendar.useCalendar({
       hideYearDropdown,
-      TooltipProps,
       ...rest
-    } = props;
-    const { state, helpers } = useCalendar.useCalendar({ hideYearDropdown, ...rest });
+    });
     const { setCalendarFocused } = helpers;
     const handleFocus = React.useCallback(() => {
       setCalendarFocused(true);
@@ -37,6 +44,10 @@ const Calendar = React.forwardRef(
     const handleBlur = React.useCallback(() => {
       setCalendarFocused(false);
     }, [setCalendarFocused]);
+    const calendarLabel = new date.DateFormatter(utils.getCurrentLocale(), {
+      month: "long",
+      year: "numeric"
+    }).format(state.visibleMonth.toDate(date.getLocalTimeZone()));
     return /* @__PURE__ */ jsxRuntime.jsx(
       CalendarContext.CalendarContext.Provider,
       {
@@ -48,10 +59,18 @@ const Calendar = React.forwardRef(
           "div",
           {
             className: cx.clsx(withBaseName(), className),
+            id,
             role: "application",
+            "aria-label": calendarLabel,
             ref,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(CalendarNavigation.CalendarNavigation, { hideYearDropdown }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                CalendarNavigation.CalendarNavigation,
+                {
+                  borderedDropdown,
+                  hideYearDropdown
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(CalendarWeekHeader.CalendarWeekHeader, {}),
               /* @__PURE__ */ jsxRuntime.jsx(
                 CalendarCarousel.CalendarCarousel,

package/cjs/calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useCallback } from \"react\";\nimport {\n  CalendarCarousel,\n  CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  CalendarNavigation,\n  CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport { useCalendar, useCalendarProps } from \"./useCalendar\";\n\nimport calendarCss from \"./Calendar.css\";\n\nexport type CalendarProps = useCalendarProps & {\n  className?: string;\n  renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n  hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n  TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n  hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n\n    const {\n      className,\n      renderDayContents,\n      hideYearDropdown,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const { state, helpers } = useCalendar({ hideYearDropdown, ...rest });\n\n    const { setCalendarFocused } = helpers;\n\n    const handleFocus = useCallback(() => {\n      setCalendarFocused(true);\n    }, [setCalendarFocused]);\n\n    const handleBlur = useCallback(() => {\n      setCalendarFocused(false);\n    }, [setCalendarFocused]);\n\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          role=\"application\"\n          ref={ref}\n        >\n          <CalendarNavigation hideYearDropdown={hideYearDropdown} />\n          <CalendarWeekHeader />\n          <CalendarCarousel\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            renderDayContents={renderDayContents}\n            TooltipProps={TooltipProps}\n          />\n        </div>\n      </CalendarContext.Provider>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Calendar","useWindow","useComponentCssInjection","calendarCss","useCalendar","useCallback","jsx","CalendarContext","jsxs","clsx","CalendarNavigation","CalendarWeekHeader","CalendarCarousel"],"mappings":";;;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,EAAE,OAAO,OAAQ,EAAA,GAAIC,wBAAY,EAAE,gBAAA,EAAkB,GAAG,IAAA,EAAM,CAAA,CAAA;AAEpE,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAaA,kBAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IACE,uBAAAC,cAAA;AAAA,MAACC,+BAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA,OAAA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAC,OAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,IAAK,EAAA,aAAA;AAAA,YACL,GAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAH,cAAA,CAACI,yCAAmB,gBAAoC,EAAA,CAAA;AAAA,6CACvDC,qCAAmB,EAAA,EAAA,CAAA;AAAA,8BACpBL,cAAA;AAAA,gBAACM,iCAAA;AAAA,gBAAA;AAAA,kBACC,OAAS,EAAA,WAAA;AAAA,kBACT,MAAQ,EAAA,UAAA;AAAA,kBACR,iBAAA;AAAA,kBACA,YAAA;AAAA,iBAAA;AAAA,eACF;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Calendar.js","sources":["../../src/calendar/Calendar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useCallback } from \"react\";\nimport {\n  CalendarCarousel,\n  type CalendarCarouselProps,\n} from \"./internal/CalendarCarousel\";\nimport { CalendarContext } from \"./internal/CalendarContext\";\nimport {\n  CalendarNavigation,\n  type CalendarNavigationProps,\n} from \"./internal/CalendarNavigation\";\nimport { CalendarWeekHeader } from \"./internal/CalendarWeekHeader\";\nimport { useCalendar, type useCalendarProps } from \"./useCalendar\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { DateFormatter, getLocalTimeZone } from \"@internationalized/date\";\nimport calendarCss from \"./Calendar.css\";\nimport { getCurrentLocale } from \"./internal/utils\";\n\nexport type CalendarProps = useCalendarProps & {\n  className?: string;\n  id?: string;\n  renderDayContents?: CalendarCarouselProps[\"renderDayContents\"];\n  hideYearDropdown?: CalendarNavigationProps[\"hideYearDropdown\"];\n  borderedDropdown?: CalendarNavigationProps[\"borderedDropdown\"];\n  TooltipProps?: CalendarCarouselProps[\"TooltipProps\"];\n  hideOutOfRangeDates?: CalendarCarouselProps[\"hideOutOfRangeDates\"];\n};\n\nconst withBaseName = makePrefixer(\"saltCalendar\");\n\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(\n  function Calendar(props, ref) {\n    const {\n      className,\n      id,\n      renderDayContents,\n      hideYearDropdown,\n      TooltipProps,\n      borderedDropdown,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar\",\n      css: calendarCss,\n      window: targetWindow,\n    });\n\n    const { state, helpers } = useCalendar({\n      hideYearDropdown,\n      ...rest,\n    });\n\n    const { setCalendarFocused } = helpers;\n\n    const handleFocus = useCallback(() => {\n      setCalendarFocused(true);\n    }, [setCalendarFocused]);\n\n    const handleBlur = useCallback(() => {\n      setCalendarFocused(false);\n    }, [setCalendarFocused]);\n\n    const calendarLabel = new DateFormatter(getCurrentLocale(), {\n      month: \"long\",\n      year: \"numeric\",\n    }).format(state.visibleMonth.toDate(getLocalTimeZone()));\n    return (\n      <CalendarContext.Provider\n        value={{\n          state,\n          helpers,\n        }}\n      >\n        <div\n          className={clsx(withBaseName(), className)}\n          id={id}\n          role=\"application\"\n          aria-label={calendarLabel}\n          ref={ref}\n        >\n          <CalendarNavigation\n            borderedDropdown={borderedDropdown}\n            hideYearDropdown={hideYearDropdown}\n          />\n          <CalendarWeekHeader />\n          <CalendarCarousel\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            renderDayContents={renderDayContents}\n            TooltipProps={TooltipProps}\n          />\n        </div>\n      </CalendarContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Calendar","useWindow","useComponentCssInjection","calendarCss","useCalendar","useCallback","DateFormatter","getCurrentLocale","getLocalTimeZone","jsx","CalendarContext","jsxs","clsx","CalendarNavigation","CalendarWeekHeader","CalendarCarousel"],"mappings":";;;;;;;;;;;;;;;;;AAgCA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAC5B,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,EAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,eAAA;AAAA,MACR,GAAK,EAAAC,UAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,OAAQ,EAAA,GAAIC,uBAAY,CAAA;AAAA,MACrC,gBAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,IAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,MAAA,kBAAA,CAAmB,IAAI,CAAA,CAAA;AAAA,KACzB,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAM,MAAA,UAAA,GAAaA,kBAAY,MAAM;AACnC,MAAA,kBAAA,CAAmB,KAAK,CAAA,CAAA;AAAA,KAC1B,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA,IAAIC,kBAAc,CAAAC,sBAAA,EAAoB,EAAA;AAAA,MAC1D,KAAO,EAAA,MAAA;AAAA,MACP,IAAM,EAAA,SAAA;AAAA,KACP,EAAE,MAAO,CAAA,KAAA,CAAM,aAAa,MAAO,CAAAC,qBAAA,EAAkB,CAAC,CAAA,CAAA;AACvD,IACE,uBAAAC,cAAA;AAAA,MAACC,+BAAgB,CAAA,QAAA;AAAA,MAAhB;AAAA,QACC,KAAO,EAAA;AAAA,UACL,KAAA;AAAA,UACA,OAAA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAC,OAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,YACzC,EAAA;AAAA,YACA,IAAK,EAAA,aAAA;AAAA,YACL,YAAY,EAAA,aAAA;AAAA,YACZ,GAAA;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAH,cAAA;AAAA,gBAACI,qCAAA;AAAA,gBAAA;AAAA,kBACC,gBAAA;AAAA,kBACA,gBAAA;AAAA,iBAAA;AAAA,eACF;AAAA,6CACCC,qCAAmB,EAAA,EAAA,CAAA;AAAA,8BACpBL,cAAA;AAAA,gBAACM,iCAAA;AAAA,gBAAA;AAAA,kBACC,OAAS,EAAA,WAAA;AAAA,kBACT,MAAQ,EAAA,UAAA;AAAA,kBACR,iBAAA;AAAA,kBACA,YAAA;AAAA,iBAAA;AAAA,eACF;AAAA,aAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/calendar/internal/CalendarCarousel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var calendarCarouselCss = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n\n.saltCalendarCarousel-shouldAnimate {\n  transition: transform 200ms ease-in-out;\n}\n";
+var calendarCarouselCss = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n";
 
 module.exports = calendarCarouselCss;
 //# sourceMappingURL=CalendarCarousel.css.js.map

package/cjs/calendar/internal/CalendarCarousel.js

@@ -3,25 +3,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var date = require('@internationalized/date');
 var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window$1 = require('@salt-ds/window');
 var React = require('react');
 var CalendarContext = require('./CalendarContext.js');
 var CalendarMonth = require('./CalendarMonth.js');
-var utils = require('./utils.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var CalendarCarousel$1 = require('./CalendarCarousel.css.js');
+var utils = require('./utils.js');
 
 function getMonths(month) {
   return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
 }
-function usePreviousMonth(visibleMonth) {
-  const previous = core.usePrevious(visibleMonth, [utils.formatDate(visibleMonth)]);
-  return previous ?? date.today(date.getLocalTimeZone());
-}
 const withBaseName = core.makePrefixer("saltCalendarCarousel");
 const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref) {
   const { ...rest } = props;
-  const targetWindow = window$1.useWindow();
+  const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-calendar-carousel",
     css: CalendarCarousel$1,
@@ -33,17 +29,9 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
   const containerRef = React.useRef(null);
   const diffIndex = (a, b) => utils.monthDiff(a, b);
   const { current: baseIndex } = React.useRef(visibleMonth);
-  const previousVisibleMonth = usePreviousMonth(visibleMonth);
-  core.useIsomorphicLayoutEffect(() => {
-    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
-      containerRef.current?.classList.remove(withBaseName("shouldAnimate"));
-    } else {
-      containerRef.current?.classList.add(withBaseName("shouldAnimate"));
-    }
-  }, [utils.formatDate(visibleMonth), utils.formatDate(previousVisibleMonth)]);
   core.useIsomorphicLayoutEffect(() => {
     if (containerRef.current) {
-      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
+      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
     }
   });
   const [months, setMonths] = React.useState(() => getMonths(visibleMonth));
@@ -54,24 +42,14 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
       });
       return oldMonths.concat(newMonths);
     });
-    const finishTransition = () => {
-      setMonths(getMonths(visibleMonth));
-    };
-    const container = containerRef.current;
-    if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
-      container?.addEventListener("transitionend", finishTransition);
-      return () => {
-        container?.removeEventListener("transitionend", finishTransition);
-      };
-    } else {
-      finishTransition();
-    }
+    setMonths(getMonths(visibleMonth));
     return void 0;
   }, [utils.formatDate(visibleMonth)]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: withBaseName(),
+      tabIndex: -1,
       style: {
         overflowX: "hidden",
         position: "relative"
@@ -82,10 +60,10 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
         {
           className: withBaseName("slide"),
           style: {
-            transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
+            transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
           },
           "aria-hidden": index !== 1 ? "true" : void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, { isVisible: index === 1, ...rest, date })
+          children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, { ...rest, date })
         },
         utils.formatDate(date)
       )) })

package/cjs/calendar/internal/CalendarCarousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCarousel.js","sources":["../../../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import {\n  DateValue,\n  getLocalTimeZone,\n  isSameMonth,\n  today,\n} from \"@internationalized/date\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  usePrevious,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport { formatDate, monthDiff } from \"./utils\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nfunction usePreviousMonth(visibleMonth: DateValue) {\n  const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);\n\n  return previous ?? today(getLocalTimeZone());\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n  HTMLDivElement,\n  CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n  const { ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-carousel\",\n    css: calendarCarouselCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { visibleMonth },\n  } = useCalendarContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n  const { current: baseIndex } = useRef(visibleMonth);\n  const previousVisibleMonth = usePreviousMonth(visibleMonth);\n\n  useIsomorphicLayoutEffect(() => {\n    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {\n      containerRef.current?.classList.remove(withBaseName(\"shouldAnimate\"));\n    } else {\n      containerRef.current?.classList.add(withBaseName(\"shouldAnimate\"));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.style.transform = `translate3d(${\n        diffIndex(baseIndex, visibleMonth) * 100\n      }%, 0, 0)`;\n    }\n  });\n\n  const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n  useEffect(() => {\n    setMonths((oldMonths) => {\n      const newMonths = getMonths(visibleMonth).filter((month) => {\n        return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n      });\n\n      return oldMonths.concat(newMonths);\n    });\n    const finishTransition = () => {\n      setMonths(getMonths(visibleMonth));\n    };\n    const container = containerRef.current;\n\n    if (\n      container &&\n      parseFloat(window.getComputedStyle(container).transitionDuration) > 0\n    ) {\n      container?.addEventListener(\"transitionend\", finishTransition);\n\n      return () => {\n        container?.removeEventListener(\"transitionend\", finishTransition);\n      };\n    } else {\n      finishTransition();\n    }\n\n    return undefined;\n  }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className={withBaseName()}\n      style={{\n        overflowX: \"hidden\",\n        position: \"relative\",\n      }}\n      ref={ref}\n    >\n      <div className={withBaseName(\"track\")} ref={containerRef}>\n        {months.map((date, index) => (\n          <div\n            key={formatDate(date)}\n            className={withBaseName(\"slide\")}\n            style={{\n              transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`,\n            }}\n            aria-hidden={index !== 1 ? \"true\" : undefined}\n          >\n            <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["usePrevious","formatDate","today","getLocalTimeZone","makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","jsx","CalendarMonth"],"mappings":"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"}
+{"version":3,"file":"CalendarCarousel.js","sources":["../../../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { type DateValue, isSameMonth } from \"@internationalized/date\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { CalendarMonth, type CalendarMonthProps } from \"./CalendarMonth\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n  HTMLDivElement,\n  CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n  const { ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-carousel\",\n    css: calendarCarouselCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { visibleMonth },\n  } = useCalendarContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n  const { current: baseIndex } = useRef(visibleMonth);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.style.transform = `translate3d(${\n        diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n      }%, 0, 0)`;\n    }\n  });\n\n  const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: uses formatData to change visibleMonth into string\n  useEffect(() => {\n    setMonths((oldMonths) => {\n      const newMonths = getMonths(visibleMonth).filter((month) => {\n        return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n      });\n\n      return oldMonths.concat(newMonths);\n    });\n    setMonths(getMonths(visibleMonth));\n    return undefined;\n  }, [formatDate(visibleMonth)]);\n\n  return (\n    <div\n      className={withBaseName()}\n      tabIndex={-1} // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739\n      style={{\n        overflowX: \"hidden\",\n        position: \"relative\",\n      }}\n      ref={ref}\n    >\n      <div className={withBaseName(\"track\")} ref={containerRef}>\n        {months.map((date, index) => (\n          <div\n            key={formatDate(date)}\n            className={withBaseName(\"slide\")}\n            style={{\n              transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n            }}\n            aria-hidden={index !== 1 ? \"true\" : undefined}\n          >\n            <CalendarMonth {...rest} date={date} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","formatDate","jsx","CalendarMonth"],"mappings":"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"}

package/cjs/calendar/internal/CalendarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarContext.js","sources":["../../../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ntype CalendarState = {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n};\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
+{"version":3,"file":"CalendarContext.js","sources":["../../../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { useCalendar } from \"../useCalendar\";\n\ninterface CalendarState {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n}\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/cjs/calendar/internal/CalendarDay.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var calendarDayCss = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var calendarDayCss = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay-outOfRange:hover {\n  color: var(--salt-content-primary-foreground);\n}\n.saltCalendarDay-outOfRange .saltCalendarDay-today {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {\n  background: var(--salt-content-secondary-foreground);\n}\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltCalendarDay-selected {\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n\n  border-top-left-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selectedEnd {\n  border-top-right-radius: var(--salt-palette-corner-weak, 0);\n  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before,\n.saltCalendarDay-highlighted:hover:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-accent-background);\n  position: absolute;\n}\n\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover,\n.saltCalendarDay-outOfRange .saltCalendarDay-today:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-accent-borderColor);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 
 module.exports = calendarDayCss;
 //# sourceMappingURL=CalendarDay.css.js.map

package/cjs/calendar/internal/CalendarDay.js

@@ -2,19 +2,18 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var useCalendarDay = require('../useCalendarDay.js');
-var utils = require('./utils.js');
 var CalendarDay$1 = require('./CalendarDay.css.js');
+var utils = require('./utils.js');
 
 const withBaseName = core.makePrefixer("saltCalendarDay");
 const CalendarDay = React.forwardRef(
   function CalendarDay2(props, ref) {
-    const { className, day, renderDayContents, month, TooltipProps: TooltipProps2, ...rest } = props;
+    const { className, day, renderDayContents, month, TooltipProps, ...rest } = props;
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-calendar-day",
@@ -22,56 +21,60 @@ const CalendarDay = React.forwardRef(
       window: targetWindow
     });
     const dayRef = React.useRef(null);
-    const forkedRef = core.useForkRef(ref, dayRef);
-    const { status, dayProps, unselectableReason } = useCalendarDay.useCalendarDay(
+    const buttonRef = core.useForkRef(ref, dayRef);
+    const { status, dayProps, unselectableReason, highlightedReason } = useCalendarDay.useCalendarDay(
       {
         date: day,
         month
       },
       dayRef
     );
-    const { outOfRange, today, unselectable, hidden } = status;
+    const { outOfRange, today, unselectable, highlighted, hidden, disabled } = status;
     return /* @__PURE__ */ jsxRuntime.jsx(
       core.Tooltip,
       {
         hideIcon: true,
-        status: "error",
-        content: unselectableReason,
-        disabled: !unselectableReason,
+        status: unselectableReason ? "error" : "info",
+        content: unselectableReason || highlightedReason || "Date is out of range",
+        disabled: !unselectableReason && !highlightedReason,
         placement: "top",
-        enterDelay: 300,
-        ...TooltipProps2,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
+        enterDelay: 0,
+        leaveDelay: 0,
+        ...TooltipProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            "aria-label": utils.formatDate(day),
+            "aria-label": utils.formatDate(day, {
+              day: "2-digit",
+              month: "long",
+              year: "numeric"
+            }),
+            disabled,
+            type: "button",
             ...dayProps,
-            ref: forkedRef,
+            ref: buttonRef,
             ...rest,
             className: cx.clsx(
               withBaseName(),
               {
                 [withBaseName("hidden")]: hidden,
                 [withBaseName("outOfRange")]: outOfRange,
-                [withBaseName("today")]: today,
+                [withBaseName("disabled")]: disabled,
                 [withBaseName("unselectable")]: !!unselectable,
-                [withBaseName("unselectableLow")]: unselectable === "low",
-                [withBaseName("unselectableMedium")]: unselectable === "medium"
+                [withBaseName("highlighted")]: !!highlighted
               },
               dayProps.className,
               className
             ),
-            children: [
-              unselectable === "medium" && /* @__PURE__ */ jsxRuntime.jsx(
-                icons.CloseIcon,
-                {
-                  "aria-hidden": true,
-                  "aria-label": void 0,
-                  className: withBaseName("blockedIcon")
-                }
-              ),
-              renderDayContents ? renderDayContents(day, status) : utils.formatDate(day, { day: "numeric" })
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cx.clsx(withBaseName("content"), {
+                  [withBaseName("today")]: today
+                }),
+                children: renderDayContents ? renderDayContents(day, status) : utils.formatDate(day, { day: "numeric" })
+              }
+            )
           }
         )
       }

package/cjs/calendar/internal/CalendarDay.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarDay.js","sources":["../../../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport { formatDate } from \"./utils\";\n\nimport calendarDayCss from \"./CalendarDay.css\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-day\",\n      css: calendarDayCss,\n      window: targetWindow,\n    });\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const forkedRef = useForkRef(ref, dayRef);\n\n    const { status, dayProps, unselectableReason } = useCalendarDay(\n      {\n        date: day,\n        month,\n      },\n      dayRef\n    );\n    const { outOfRange, today, unselectable, hidden } = status;\n\n    return (\n      <Tooltip\n        hideIcon\n        status=\"error\"\n        content={unselectableReason}\n        disabled={!unselectableReason}\n        placement=\"top\"\n        enterDelay={300}\n        {...TooltipProps}\n      >\n        <button\n          aria-label={formatDate(day)}\n          {...dayProps}\n          ref={forkedRef}\n          {...rest}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"hidden\")]: hidden,\n              [withBaseName(\"outOfRange\")]: outOfRange,\n              [withBaseName(\"today\")]: today,\n              [withBaseName(\"unselectable\")]: !!unselectable,\n              [withBaseName(\"unselectableLow\")]: unselectable === \"low\",\n              [withBaseName(\"unselectableMedium\")]: unselectable === \"medium\",\n            },\n            dayProps.className,\n            className\n          )}\n        >\n          {unselectable === \"medium\" && (\n            <CloseIcon\n              aria-hidden\n              aria-label={undefined}\n              className={withBaseName(\"blockedIcon\")}\n            />\n          )}\n\n          {renderDayContents\n            ? renderDayContents(day, status)\n            : formatDate(day, { day: \"numeric\" })}\n        </button>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useWindow","useComponentCssInjection","calendarDayCss","useRef","useForkRef","useCalendarDay","jsx","Tooltip","jsxs","formatDate","clsx","CloseIcon"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAc,GAAG,IAAA,EACjE,GAAA,KAAA,CAAA;AAEF,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AAExC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAuB,GAAAC,6BAAA;AAAA,MAC/C;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,EAAE,UAAA,EAAY,KAAO,EAAA,YAAA,EAAc,QAAW,GAAA,MAAA,CAAA;AAEpD,IACE,uBAAAC,cAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAA,IAAA;AAAA,QACR,MAAO,EAAA,OAAA;AAAA,QACP,OAAS,EAAA,kBAAA;AAAA,QACT,UAAU,CAAC,kBAAA;AAAA,QACX,SAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA,GAAA;AAAA,QACX,GAAGR,aAAAA;AAAA,QAEJ,QAAA,kBAAAS,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,YAAA,EAAYC,iBAAW,GAAG,CAAA;AAAA,YACzB,GAAG,QAAA;AAAA,YACJ,GAAK,EAAA,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YACJ,SAAW,EAAAC,OAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb;AAAA,gBACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,gBAC1B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,UAAA;AAAA,gBAC9B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,KAAA;AAAA,gBACzB,CAAC,YAAa,CAAA,cAAc,CAAC,GAAG,CAAC,CAAC,YAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,YAAiB,KAAA,KAAA;AAAA,gBACpD,CAAC,YAAA,CAAa,oBAAoB,CAAC,GAAG,YAAiB,KAAA,QAAA;AAAA,eACzD;AAAA,cACA,QAAS,CAAA,SAAA;AAAA,cACT,SAAA;AAAA,aACF;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,YAAA,KAAiB,QAChB,oBAAAJ,cAAA;AAAA,gBAACK,eAAA;AAAA,gBAAA;AAAA,kBACC,aAAW,EAAA,IAAA;AAAA,kBACX,YAAY,EAAA,KAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,iBAAA;AAAA,eACvC;AAAA,cAGD,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7BF,iBAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACxC;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CalendarDay.js","sources":["../../../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport {\n  Tooltip,\n  type TooltipProps,\n  makePrefixer,\n  useForkRef,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  type ReactElement,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { type DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n  extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  day: DateValue;\n  formatDate?: DateFormatter;\n  renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n  status?: DayStatus;\n  month: DateValue;\n  TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n  function CalendarDay(props, ref) {\n    const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n      props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-day\",\n      css: calendarDayCss,\n      window: targetWindow,\n    });\n\n    const dayRef = useRef<HTMLButtonElement>(null);\n    const buttonRef = useForkRef(ref, dayRef);\n    const { status, dayProps, unselectableReason, highlightedReason } =\n      useCalendarDay(\n        {\n          date: day,\n          month,\n        },\n        dayRef,\n      );\n    const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n      status;\n\n    return (\n      <Tooltip\n        hideIcon\n        status={unselectableReason ? \"error\" : \"info\"}\n        content={\n          unselectableReason || highlightedReason || \"Date is out of range\"\n        }\n        disabled={!unselectableReason && !highlightedReason}\n        placement=\"top\"\n        enterDelay={0} // --salt-duration-instant\n        leaveDelay={0} // --salt-duration-instant\n        {...TooltipProps}\n      >\n        <button\n          aria-label={formatDate(day, {\n            day: \"2-digit\",\n            month: \"long\",\n            year: \"numeric\",\n          })}\n          disabled={disabled}\n          type=\"button\"\n          {...dayProps}\n          ref={buttonRef}\n          {...rest}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"hidden\")]: hidden,\n              [withBaseName(\"outOfRange\")]: outOfRange,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"unselectable\")]: !!unselectable,\n              [withBaseName(\"highlighted\")]: !!highlighted,\n            },\n            dayProps.className,\n            className,\n          )}\n        >\n          <span\n            className={clsx(withBaseName(\"content\"), {\n              [withBaseName(\"today\")]: today,\n            })}\n          >\n            {renderDayContents\n              ? renderDayContents(day, status)\n              : formatDate(day, { day: \"numeric\" })}\n          </span>\n        </button>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","useWindow","useComponentCssInjection","calendarDayCss","useRef","useForkRef","useCalendarDay","jsx","Tooltip","formatDate","clsx"],"mappings":"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"}

package/cjs/calendar/internal/CalendarMonth.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var calendarMonthCss = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  text-align: center;\n}\n";
+var calendarMonthCss = ".saltCalendarMonth-dateGrid {\n  display: grid;\n  gap: var(--salt-size-border);\n  grid-template-columns: repeat(7, var(--salt-size-base));\n  grid-template-rows: repeat(6, var(--salt-size-base));\n  text-align: center;\n  margin: var(--salt-size-border);\n}\n";
 
 module.exports = calendarMonthCss;
 //# sourceMappingURL=CalendarMonth.css.js.map

package/cjs/calendar/internal/CalendarMonth.js

@@ -2,13 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
-var CalendarContext = require('./CalendarContext.js');
 var CalendarDay = require('./CalendarDay.js');
 var utils = require('./utils.js');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var CalendarContext = require('./CalendarContext.js');
 var CalendarMonth$1 = require('./CalendarMonth.css.js');
 
 const withBaseName = core.makePrefixer("saltCalendarMonth");
@@ -17,8 +17,6 @@ const CalendarMonth = React.forwardRef(
     const {
       className,
       date,
-      hideOutOfRangeDates,
-      isVisible,
       renderDayContents,
       onMouseLeave,
       TooltipProps,

package/cjs/calendar/internal/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonth.js","sources":["../../../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import { DateValue } from \"@internationalized/date\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithRef,\n  forwardRef,\n  MouseEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport { CalendarDay, CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  isVisible?: boolean;\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      hideOutOfRangeDates,\n      isVisible,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-month\",\n      css: calendarMonthCss,\n      window: targetWindow,\n    });\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\n    const handleMouseLeave = (event: SyntheticEvent) => {\n      setHoveredDate(event, null);\n      onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        onMouseLeave={handleMouseLeave}\n        {...rest}\n      >\n        <div\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CalendarMonth","useWindow","useComponentCssInjection","calendarMonthCss","generateVisibleDays","useCalendarContext","jsx","clsx","CalendarDay","formatDate"],"mappings":";;;;;;;;;;;;;AAyBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,mBAAA;AAAA,MACA,SAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAOC,0BAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxBC,kCAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAA,YAAA,GAAe,KAAmC,CAAA,CAAA;AAAA,KACpD,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,OAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,YAAc,EAAA,gBAAA;AAAA,QACb,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAY,EAAA,kBAAA;AAAA,YACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,cACE,uBAAAA,cAAA;AAAA,gBAACE,uBAAA;AAAA,gBAAA;AAAA,kBAEC,KAAK,GAAI,CAAA,IAAA;AAAA,kBACT,iBAAA;AAAA,kBACA,KAAO,EAAA,IAAA;AAAA,kBACP,YAAA;AAAA,iBAAA;AAAA,gBAJKC,gBAAA,CAAW,IAAI,IAAI,CAAA;AAAA,eAK1B,CAAA;AAAA,aAEH,CAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"CalendarMonth.js","sources":["../../../src/calendar/internal/CalendarMonth.tsx"],"sourcesContent":["import type { DateValue } from \"@internationalized/date\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type SyntheticEvent,\n  forwardRef,\n} from \"react\";\nimport { CalendarDay, type CalendarDayProps } from \"./CalendarDay\";\nimport { formatDate, generateVisibleDays } from \"./utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useCalendarContext } from \"./CalendarContext\";\nimport calendarMonthCss from \"./CalendarMonth.css\";\n\nexport interface CalendarMonthProps extends ComponentPropsWithRef<\"div\"> {\n  date: DateValue;\n  hideOutOfRangeDates?: boolean;\n  renderDayContents?: CalendarDayProps[\"renderDayContents\"];\n  TooltipProps?: CalendarDayProps[\"TooltipProps\"];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarMonth\");\n\nexport const CalendarMonth = forwardRef<HTMLDivElement, CalendarMonthProps>(\n  function CalendarMonth(props, ref) {\n    const {\n      className,\n      date,\n      renderDayContents,\n      onMouseLeave,\n      TooltipProps,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-calendar-month\",\n      css: calendarMonthCss,\n      window: targetWindow,\n    });\n\n    const days = generateVisibleDays(date);\n    const {\n      helpers: { setHoveredDate },\n    } = useCalendarContext();\n\n    const handleMouseLeave = (event: SyntheticEvent) => {\n      setHoveredDate(event, null);\n      onMouseLeave?.(event as MouseEvent<HTMLDivElement>);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        onMouseLeave={handleMouseLeave}\n        {...rest}\n      >\n        <div\n          data-testid=\"CalendarDateGrid\"\n          className={withBaseName(\"dateGrid\")}\n        >\n          {days.map((day) => {\n            return (\n              <CalendarDay\n                key={formatDate(day.date)}\n                day={day.date}\n                renderDayContents={renderDayContents}\n                month={date}\n                TooltipProps={TooltipProps}\n              />\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CalendarMonth","useWindow","useComponentCssInjection","calendarMonthCss","generateVisibleDays","useCalendarContext","jsx","clsx","CalendarDay","formatDate"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,IAAA,GAAOC,0BAAoB,IAAI,CAAA,CAAA;AACrC,IAAM,MAAA;AAAA,MACJ,OAAA,EAAS,EAAE,cAAe,EAAA;AAAA,QACxBC,kCAAmB,EAAA,CAAA;AAEvB,IAAM,MAAA,gBAAA,GAAmB,CAAC,KAA0B,KAAA;AAClD,MAAA,cAAA,CAAe,OAAO,IAAI,CAAA,CAAA;AAC1B,MAAA,YAAA,GAAe,KAAmC,CAAA,CAAA;AAAA,KACpD,CAAA;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,OAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,YAAc,EAAA,gBAAA;AAAA,QACb,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAAD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAY,EAAA,kBAAA;AAAA,YACZ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YAEjC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,cACE,uBAAAA,cAAA;AAAA,gBAACE,uBAAA;AAAA,gBAAA;AAAA,kBAEC,KAAK,GAAI,CAAA,IAAA;AAAA,kBACT,iBAAA;AAAA,kBACA,KAAO,EAAA,IAAA;AAAA,kBACP,YAAA;AAAA,iBAAA;AAAA,gBAJKC,gBAAA,CAAW,IAAI,IAAI,CAAA;AAAA,eAK1B,CAAA;AAAA,aAEH,CAAA;AAAA,WAAA;AAAA,SACH;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/cjs/calendar/internal/CalendarNavigation.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var calendarNavigationCss = ".saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto min-content;\n  padding-bottom: var(--salt-spacing-100);\n  grid-gap: 0;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n  grid-gap: var(--salt-spacing-300);\n}\n\n.saltCalendarNavigation-dropdowns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: var(--salt-spacing-100);\n}\n";
+var calendarNavigationCss = ".saltCalendarNavigation {\n  display: grid;\n  grid-template-columns: min-content auto min-content;\n  padding-bottom: var(--salt-spacing-100);\n  grid-gap: 0;\n  align-items: center;\n  box-sizing: border-box;\n}\n\n.saltCalendarNavigation-hideYearDropdown {\n  grid-template-columns: min-content auto min-content;\n  grid-gap: var(--salt-spacing-300);\n}\n\n.saltCalendarNavigation-dropdowns {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: var(--salt-spacing-100);\n}\n";
 
 module.exports = calendarNavigationCss;
 //# sourceMappingURL=CalendarNavigation.css.js.map

package/cjs/calendar/internal/CalendarNavigation.js

@@ -1,16 +1,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var cx = require('clsx');
+var React = require('react');
 var CalendarContext = require('./CalendarContext.js');
-var CalendarNavigation$1 = require('./CalendarNavigation.css.js');
 var date = require('@internationalized/date');
-var utils = require('./utils.js');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var CalendarNavigation$1 = require('./CalendarNavigation.css.js');
+var utils = require('./utils.js');
 
 const withBaseName = core.makePrefixer("saltCalendarNavigation");
 function useCalendarNavigation() {
@@ -94,6 +94,7 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
     MonthDropdownProps,
     YearDropdownProps,
     hideYearDropdown,
+    borderedDropdown,
     ...rest
   } = props;
   const targetWindow = window.useWindow();
@@ -110,7 +111,6 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
     years,
     canNavigateNext,
     canNavigatePrevious,
-    visibleMonth,
     selectedMonth,
     selectedYear,
     isOutsideAllowedMonths
@@ -159,14 +159,7 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
                 variant: "secondary",
                 onClick: handleNavigatePrevious,
                 focusableWhenDisabled: true,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  icons.ChevronLeftIcon,
-                  {
-                    "aria-label": `Previous Month, ${utils.formatDate(
-                      visibleMonth.subtract({ months: 1 })
-                    )}`
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, { "aria-label": "Previous Month" })
               }
             )
           }
@@ -175,6 +168,7 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
           /* @__PURE__ */ jsxRuntime.jsx(
             core.Dropdown,
             {
+              bordered: borderedDropdown,
               "aria-label": "Month Dropdown",
               selected: selectedMonth ? [selectedMonth] : [],
               value: formatMonth(selectedMonth),
@@ -199,6 +193,7 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
               selected: selectedYear ? [selectedYear] : [],
               value: formatYear(selectedYear),
               onSelectionChange: handleYearSelect,
+              bordered: borderedDropdown,
               ...YearDropdownProps,
               children: years.map((year) => /* @__PURE__ */ jsxRuntime.jsx(
                 OptionWithTooltip,
@@ -227,14 +222,7 @@ const CalendarNavigation = React.forwardRef(function CalendarNavigation2(props,
                 variant: "secondary",
                 onClick: handleNavigateNext,
                 focusableWhenDisabled: true,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  icons.ChevronRightIcon,
-                  {
-                    "aria-label": `Next Month, ${utils.formatDate(
-                      visibleMonth.add({ months: 1 })
-                    )}`
-                  }
-                )
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, { "aria-label": "Next Month" })
               }
             )
           }