reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Calendar/Calendar.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const Calendar: React.FC<T.Props>;
 export default Calendar;

package/dist/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import CalendarControlled from "./CalendarControlled";
-import CalendarUncontrolled from "./CalendarUncontrolled";
+import CalendarControlled from "./CalendarControlled.js";
+import CalendarUncontrolled from "./CalendarUncontrolled.js";
 const Calendar = (props) => {
     if (props.value !== undefined)
         return _jsx(CalendarControlled, { ...props });

package/dist/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{padding:var(--rs-unit-x0-5);isolation:isolate;cursor:pointer}.cell:empty{cursor:default}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:var(--rs-color-background-neutral-highlighted-faded)}}.cell.--active .cell-button{color:var(--rs-color-on-background-primary);background-color:var(--rs-color-background-primary)}.cell.--active.--selection-range .cell-button{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--active:not(.--selection-range) .cell-button{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell.--active:not(.--selection-range) .cell-button:before{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color}.cell.--selection-start+.cell.--selection-end .cell-button:before{background-color:var(--rs-color-background-primary)}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-start-end-radius:0;border-end-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-start-start-radius:0;border-end-start-radius:0}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);text-align:center;position:relative;z-index:10}.cell-button[disabled]{color:var(--rs-color-foreground-disabled)!important;background-color:transparent!important}.cell-button:before{content:"";position:absolute;inset-block:0;width:var(--rs-unit-x1);inset-inline-start:calc(var(--rs-unit-x1) * -1);z-index:-10}
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{padding:var(--rs-unit-x0-5);isolation:isolate;cursor:pointer}.cell:empty{cursor:default}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:var(--rs-color-background-neutral-highlighted-faded)}}.cell.--today .cell-button{font-weight:var(--rs-font-weight-bold)}.cell.--active .cell-button{color:var(--rs-color-on-background-primary);background-color:var(--rs-color-background-primary)}.cell.--active.--selection-range .cell-button{color:var(--rs-color-foreground-neutral);background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--active:not(.--selection-range) .cell-button{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell.--active:not(.--selection-range) .cell-button:before{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color}.cell.--selection-start+.cell.--selection-end .cell-button:before{background-color:var(--rs-color-background-primary)}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:var(--rs-color-background-neutral-highlighted-faded)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-start-end-radius:0;border-end-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-start-start-radius:0;border-end-start-radius:0}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);text-align:center;position:relative;z-index:10}.cell-button[disabled]{color:var(--rs-color-foreground-disabled)!important;background-color:transparent!important}.cell-button:before{content:"";position:absolute;inset-block:0;width:var(--rs-unit-x1);inset-inline-start:calc(var(--rs-unit-x1) * -1);z-index:-10}

package/dist/components/Calendar/Calendar.utils.d.ts

@@ -1,4 +1,4 @@
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 /**
  * Return the ISO date format without the timezones adjustemnts
  */

package/dist/components/Calendar/CalendarControlled.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarControlled: React.FC<T.ControlledProps & T.BaseProps>;
 export default CalendarControlled;

package/dist/components/Calendar/CalendarControlled.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import View from "../../components/View";
-import { onNextFrame } from "../../utilities/animation";
-import { applyNavigationBounds, setMonthTo, setMonthToNext, setMonthToPrevious, setYearToNext, setYearToPrevious, } from "./Calendar.utils";
-import CalendarControls from "./CalendarControls";
-import CalendarMonth from "./CalendarMonth";
-import CalendarYear from "./CalendarYear";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation";
+import View from "../../components/View/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { applyNavigationBounds, setMonthTo, setMonthToNext, setMonthToPrevious, setYearToNext, setYearToPrevious, } from "./Calendar.utils.js";
+import CalendarControls from "./CalendarControls.js";
+import CalendarMonth from "./CalendarMonth.js";
+import CalendarYear from "./CalendarYear.js";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
 const CalendarControlled = (props) => {
     const { value, onChange, defaultMonth, month, onMonthChange, min, max, range, firstWeekDay, selectedDates, disabledDates, monthsToRender = 1, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, renderDateValue, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");

package/dist/components/Calendar/CalendarControls.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarControls: React.FC<T.ControlsProps>;
 export default CalendarControls;

package/dist/components/Calendar/CalendarControls.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Button from "../../components/Button";
-import Hidden from "../../components/Hidden";
-import HiddenVisually from "../../components/HiddenVisually";
-import Text from "../../components/Text";
-import View from "../../components/View";
-import { onNextFrame } from "../../utilities/animation";
-import IconChevronLeft from "../../icons/ChevronLeft";
-import IconChevronRight from "../../icons/ChevronRight";
+import Button from "../../components/Button/index.js";
+import Hidden from "../../components/Hidden/index.js";
+import HiddenVisually from "../../components/HiddenVisually/index.js";
+import Text from "../../components/Text/index.js";
+import View from "../../components/View/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import s from "./Calendar.module.css";
 const CalendarControls = (props) => {
     const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, hidePrevious, hideNext, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;

package/dist/components/Calendar/CalendarDate.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarDate: React.FC<T.DateProps>;
 export default CalendarDate;

package/dist/components/Calendar/CalendarDate.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import { getLocalISODate } from "./Calendar.utils";
+import Actionable from "../../components/Actionable/index.js";
+import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
 const CalendarDate = (props) => {
     const { date, isoDate, startValue, endValue, disabled: passedDisabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, disabledDates, renderAriaLabel, renderSlot, renderValue, } = props;
@@ -14,6 +14,7 @@ const CalendarDate = (props) => {
     const isEndValue = Boolean(isoDate && !!isoEndValue && isoDate === isoEndValue);
     const isAfterStartValue = Boolean(isoDate && isoStartValue && isoDate > isoStartValue);
     const isBeforeEndValue = Boolean(isoDate && isoEndValue && isoDate < isoEndValue);
+    const isToday = isoDate === getLocalISODate({ date: new Date() });
     const isInHoveredRange = Boolean(hoveredDate && !endValue && hoveredDate > date);
     const isInSelectedDates = !!selectedDates?.some((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
     const disabled = passedDisabled ||
@@ -37,6 +38,7 @@ const CalendarDate = (props) => {
     }
     const dateClassNames = classNames([
         s.cell,
+        isToday && s["--today"],
         selection && s["--active"],
         selection && s[`--selection-${selection}`],
     ]);
@@ -80,6 +82,7 @@ const CalendarDate = (props) => {
                     ? renderAriaLabel({ date })
                     : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
                 "aria-checked": !!selection,
+                "aria-current": isToday ? "date" : undefined,
                 "data-rs-date": getLocalISODate({ date }),
                 onFocus: handleFocus,
                 onBlur: handleBlur,

package/dist/components/Calendar/CalendarMonth.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarMonth: React.FC<T.MonthProps>;
 export default CalendarMonth;

package/dist/components/Calendar/CalendarMonth.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils";
-import CalendarDate from "./CalendarDate";
+import { getLocalISODate, getMonthWeeks, getWeekdayNames, isDateFocusable } from "./Calendar.utils.js";
+import CalendarDate from "./CalendarDate.js";
 import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
     const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, disabledDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, renderDateValue, } = props;

package/dist/components/Calendar/CalendarUncontrolled.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarUncontrolled: React.FC<T.UncontrolledProps & T.BaseProps>;
 export default CalendarUncontrolled;

package/dist/components/Calendar/CalendarUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import CalendarControlled from "./CalendarControlled";
+import CalendarControlled from "./CalendarControlled.js";
 const CalendarUncontrolled = (props) => {
     const { onChange, defaultValue, range, ...controlledProps } = props;
     const [value, setValue] = React.useState(defaultValue || null);

package/dist/components/Calendar/CalendarYear.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Calendar.types";
+import type * as T from "./Calendar.types.js";
 declare const CalendarYear: React.FC<T.YearProps>;
 export default CalendarYear;

package/dist/components/Calendar/CalendarYear.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Actionable from "../../components/Actionable";
-import { onNextFrame } from "../../utilities/animation";
-import { getMonthNames } from "./Calendar.utils";
+import Actionable from "../../components/Actionable/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { getMonthNames } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
 const MONTHS_PER_ROW = 3;
 const CalendarYear = (props) => {

package/dist/components/Calendar/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Calendar";
-export type { Props as CalendarProps } from "./Calendar.types";
+export { default } from "./Calendar.js";
+export type { Props as CalendarProps } from "./Calendar.types.js";

package/dist/components/Calendar/index.js

@@ -1 +1 @@
-export { default } from "./Calendar";
+export { default } from "./Calendar.js";

package/dist/components/Calendar/tests/Calendar.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { type Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Calendar").CalendarProps>;
+    component: import("react").FC<import("../../../components/Calendar/index.js").CalendarProps>;
     parameters: {
         iframe: {
             url: string;
@@ -11,6 +11,7 @@ declare const _default: {
 };
 export default _default;
 export declare const base: StoryObj;
+export declare const today: StoryObj;
 export declare const month: StoryObj<{
     handleDefaultMonthChange: Mock;
     handleMonthChange: Mock;