@cube-dev/ui-kit 0.161.0 → 0.163.0

package/dist/components/other/Calendar/Calendar.js

@@ -1,30 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
-import { _Title } from "../../content/Title.js";
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
-import { Space } from "../../layout/Space.js";
-import { LeftIcon } from "../../../icons/LeftIcon.js";
-import { RightIcon } from "../../../icons/RightIcon.js";
-import { Button } from "../../actions/index.js";
-import { CalendarGrid } from "./CalendarGrid.js";
-import { tasty } from "@tenphi/tasty";
+import { CalendarPanel } from "./CalendarPanel.js";
 import { forwardRef, useImperativeHandle, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useCalendar, useLocale } from "react-aria";
 import { createDOMRef } from "@react-spectrum/utils";
 import { useCalendarState } from "react-stately";
 import { createCalendar, startOfWeek, toCalendarDate } from "@internationalized/date";
 
 //#region src/components/other/Calendar/Calendar.tsx
-const CalendarElement = tasty({ styles: {
-	padding: "1x",
-	gap: "1x"
-} });
-const CalendarHeaderElement = tasty({ styles: {
-	display: "flex",
-	placeContent: "center space-between",
-	placeItems: "center",
-	gap: "1.5x"
-} });
 function Calendar(props, ref) {
 	props = useProviderProps(props);
 	let { locale } = useLocale();
@@ -49,30 +33,16 @@ function Calendar(props, ref) {
 			end: start.add({ days: 6 })
 		};
 	}
-	return /* @__PURE__ */ jsxs(CalendarElement, {
-		...calendarProps,
-		children: [/* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(_Title, {
-			level: 6,
-			preset: "h6",
-			children: title
-		}), /* @__PURE__ */ jsxs(Space, {
-			gap: ".5x",
-			children: [/* @__PURE__ */ jsx(Button, {
-				"data-popover-keep": true,
-				size: "xsmall",
-				...prevButtonProps,
-				icon: /* @__PURE__ */ jsx(LeftIcon, {})
-			}), /* @__PURE__ */ jsx(Button, {
-				"data-popover-keep": true,
-				size: "xsmall",
-				...nextButtonProps,
-				icon: /* @__PURE__ */ jsx(RightIcon, {})
-			})]
-		})] }), /* @__PURE__ */ jsx(CalendarGrid, {
-			state,
-			selectedRange,
-			pickerMode: props.pickerMode
-		})]
+	return /* @__PURE__ */ jsx(CalendarPanel, {
+		elementRef: domRef,
+		state,
+		title,
+		calendarProps,
+		prevButtonProps,
+		nextButtonProps,
+		hasMonthYearNavigation: props.hasMonthYearNavigation,
+		selectedRange,
+		pickerMode: props.pickerMode
 	});
 }
 const _Calendar = forwardRef(Calendar);

package/dist/components/other/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/Calendar.tsx"],"sourcesContent":["import {\n  createCalendar,\n  startOfWeek,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { tasty } from '@tenphi/tasty';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaCalendarProps,\n  DateValue,\n  useCalendar,\n  useLocale,\n} from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { useProviderProps } from '../../../provider';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarGrid } from './CalendarGrid';\n\nconst CalendarElement = tasty({\n  styles: {\n    padding: '1x',\n    gap: '1x',\n  },\n});\n\nconst CalendarHeaderElement = tasty({\n  styles: {\n    display: 'flex',\n    placeContent: 'center space-between',\n    placeItems: 'center',\n    gap: '1.5x',\n  },\n});\n\nexport interface CubeCalendarProps extends AriaCalendarProps<DateValue> {\n  selectedRange?: {\n    start: DateValue;\n    end: DateValue;\n  };\n  /**\n   * When set to `week`, the grid shows a leading week-number column and\n   * highlights the whole week that the selected value belongs to.\n   */\n  pickerMode?: 'day' | 'week';\n}\n\nfunction Calendar(props: CubeCalendarProps, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(\n    props,\n    state,\n  );\n\n  let selectedRange = props.selectedRange;\n  if (props.pickerMode === 'week' && state.value) {\n    let start = startOfWeek(toCalendarDate(state.value), locale);\n    selectedRange = { start, end: start.add({ days: 6 }) };\n  }\n\n  return (\n    <CalendarElement {...calendarProps}>\n      <CalendarHeaderElement>\n        <Title level={6} preset=\"h6\">\n          {title}\n        </Title>\n        <Space gap=\".5x\">\n          <Button\n            data-popover-keep\n            size=\"xsmall\"\n            {...prevButtonProps}\n            icon={<LeftIcon />}\n          />\n          <Button\n            data-popover-keep\n            size=\"xsmall\"\n            {...nextButtonProps}\n            icon={<RightIcon />}\n          />\n        </Space>\n      </CalendarHeaderElement>\n      <CalendarGrid\n        state={state}\n        selectedRange={selectedRange}\n        pickerMode={props.pickerMode}\n      />\n    </CalendarElement>\n  );\n}\n\nconst _Calendar = forwardRef(Calendar);\n\n_Calendar.displayName = 'Calendar';\n\nexport { _Calendar as Calendar };\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,kBAAkB,MAAM,EAC5B,QAAQ;CACN,SAAS;CACT,KAAK;CACN,EACF,CAAC;AAEF,MAAM,wBAAwB,MAAM,EAClC,QAAQ;CACN,SAAS;CACT,cAAc;CACd,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAcF,SAAS,SAAS,OAA0B,KAAgC;AAC1E,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,iBAAiB;EAC3B,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UAAU,YAC/D,OACA,MACD;CAED,IAAI,gBAAgB,MAAM;AAC1B,KAAI,MAAM,eAAe,UAAU,MAAM,OAAO;EAC9C,IAAI,QAAQ,YAAY,eAAe,MAAM,MAAM,EAAE,OAAO;AAC5D,kBAAgB;GAAE;GAAO,KAAK,MAAM,IAAI,EAAE,MAAM,GAAG,CAAC;GAAE;;AAGxD,QACE,qBAAC;EAAgB,GAAI;aACnB,qBAAC,oCACC,oBAACA;GAAM,OAAO;GAAG,QAAO;aACrB;IACK,EACR,qBAAC;GAAM,KAAI;cACT,oBAAC;IACC;IACA,MAAK;IACL,GAAI;IACJ,MAAM,oBAAC,aAAW;KAClB,EACF,oBAAC;IACC;IACA,MAAK;IACL,GAAI;IACJ,MAAM,oBAAC,cAAY;KACnB;IACI,IACc,EACxB,oBAAC;GACQ;GACQ;GACf,YAAY,MAAM;IAClB;GACc;;AAItB,MAAM,YAAY,WAAW,SAAS;AAEtC,UAAU,cAAc"}
+{"version":3,"file":"Calendar.js","names":[],"sources":["../../../../src/components/other/Calendar/Calendar.tsx"],"sourcesContent":["import {\n  createCalendar,\n  startOfWeek,\n  toCalendarDate,\n} from '@internationalized/date';\nimport { createDOMRef } from '@react-spectrum/utils';\nimport { FocusableRef } from '@react-types/shared';\nimport { forwardRef, useImperativeHandle, useRef } from 'react';\nimport {\n  AriaCalendarProps,\n  DateValue,\n  useCalendar,\n  useLocale,\n} from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { useProviderProps } from '../../../provider';\n\nimport { CalendarPanel } from './CalendarPanel';\nimport { CalendarCoreProps, CalendarValueProps } from './types';\n\nexport interface CubeCalendarProps\n  extends AriaCalendarProps<DateValue>,\n    CalendarCoreProps,\n    CalendarValueProps {\n  /** Highlights a range that lives outside the calendar's own state. */\n  selectedRange?: {\n    start: DateValue;\n    end: DateValue;\n  };\n  /**\n   * When set to `week`, the grid shows a leading week-number column and\n   * highlights the whole week that the selected value belongs to.\n   */\n  pickerMode?: 'day' | 'week';\n}\n\nfunction Calendar(props: CubeCalendarProps, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n\n  let { locale } = useLocale();\n  let state = useCalendarState({\n    ...props,\n    locale,\n    createCalendar,\n  });\n\n  let domRef = useRef(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      state.setFocused(true);\n    },\n  }));\n\n  let { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(\n    props,\n    state,\n  );\n\n  let selectedRange = props.selectedRange;\n  if (props.pickerMode === 'week' && state.value) {\n    let start = startOfWeek(toCalendarDate(state.value), locale);\n    selectedRange = { start, end: start.add({ days: 6 }) };\n  }\n\n  return (\n    <CalendarPanel\n      elementRef={domRef}\n      state={state}\n      title={title}\n      calendarProps={calendarProps}\n      prevButtonProps={prevButtonProps}\n      nextButtonProps={nextButtonProps}\n      hasMonthYearNavigation={props.hasMonthYearNavigation}\n      selectedRange={selectedRange}\n      pickerMode={props.pickerMode}\n    />\n  );\n}\n\nconst _Calendar = forwardRef(Calendar);\n\n_Calendar.displayName = 'Calendar';\n\nexport { _Calendar as Calendar };\n"],"mappings":";;;;;;;;;;;AAqCA,SAAS,SAAS,OAA0B,KAAgC;AAC1E,SAAQ,iBAAiB,MAAM;CAE/B,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,QAAQ,iBAAiB;EAC3B,GAAG;EACH;EACA;EACD,CAAC;CAEF,IAAI,SAAS,OAAO,KAAK;AACzB,qBAAoB,YAAY;EAC9B,GAAG,aAAa,OAAO;EACvB,QAAQ;AACN,SAAM,WAAW,KAAK;;EAEzB,EAAE;CAEH,IAAI,EAAE,eAAe,iBAAiB,iBAAiB,UAAU,YAC/D,OACA,MACD;CAED,IAAI,gBAAgB,MAAM;AAC1B,KAAI,MAAM,eAAe,UAAU,MAAM,OAAO;EAC9C,IAAI,QAAQ,YAAY,eAAe,MAAM,MAAM,EAAE,OAAO;AAC5D,kBAAgB;GAAE;GAAO,KAAK,MAAM,IAAI,EAAE,MAAM,GAAG,CAAC;GAAE;;AAGxD,QACE,oBAAC;EACC,YAAY;EACL;EACA;EACQ;EACE;EACA;EACjB,wBAAwB,MAAM;EACf;EACf,YAAY,MAAM;GAClB;;AAIN,MAAM,YAAY,WAAW,SAAS;AAEtC,UAAU,cAAc"}

package/dist/components/other/Calendar/CalendarCell.js

@@ -1,14 +1,15 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+import { CALENDAR_CELL_STYLES } from "./styled.js";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { useCalendarCell } from "react-aria";
+import { isSameDay } from "@internationalized/date";
 
 //#region src/components/other/Calendar/CalendarCell.tsx
 const CalendarCellElement = tasty({
 	as: "td",
 	styles: {
-		preset: "t3m",
 		margin: 0,
 		padding: "2bw right bottom"
 	}
@@ -16,46 +17,25 @@ const CalendarCellElement = tasty({
 const CalendarButtonElement = tasty({
 	"data-popover-keep": true,
 	styles: {
-		display: "grid",
-		placeItems: "center",
+		...CALENDAR_CELL_STYLES,
 		width: "3x",
-		height: "3x",
-		fill: {
-			"": "#primary.0",
-			":hover": "#primary.16",
-			rangeHover: "#primary.16",
-			pressed: "#primary.10",
-			selected: "#primary",
-			"selected & :hover": "#primary-text",
-			"selected & pressed": "#primary",
-			"disabled | unavailable": "#primary.0"
-		},
-		color: {
-			"": "#dark",
-			selected: "#white",
-			"disabled | unavailable": "#dark.30"
-		},
-		outline: {
-			"": "1bw #primary-text.0",
-			focused: "1bw #primary-text"
-		},
-		outlineOffset: .5,
-		radius: true,
-		cursor: "$pointer"
+		height: "3x"
 	}
 });
-function CalendarCell({ state, selectedRange, date, rangeHover }) {
+function CalendarCell(props) {
+	let { state, selectedRange, date, today, rangeHover } = props;
 	let ref = useRef(null);
 	let { cellProps, buttonProps, isSelected, isPressed, isFocused, isInvalid, isOutsideVisibleRange, isDisabled, isUnavailable, formattedDate } = useCalendarCell({ date }, state, ref);
-	const isFinalSelected = selectedRange ? date.compare(selectedRange.start) >= 0 && date.compare(selectedRange.end) <= 0 : isSelected;
+	const isFinalSelected = !isOutsideVisibleRange && (selectedRange ? date.compare(selectedRange.start) >= 0 && date.compare(selectedRange.end) <= 0 : isSelected);
 	return /* @__PURE__ */ jsx(CalendarCellElement, {
 		...cellProps,
 		children: /* @__PURE__ */ jsx(CalendarButtonElement, {
 			...buttonProps,
 			ref,
-			hidden: isOutsideVisibleRange,
 			mods: {
 				selected: isFinalSelected,
+				current: !!today && !isOutsideVisibleRange && isSameDay(date, today),
+				outside: isOutsideVisibleRange,
 				rangeHover: rangeHover && !isFinalSelected,
 				pressed: isPressed,
 				focused: isFocused,

package/dist/components/other/Calendar/CalendarCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCell.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarCell.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\n\nconst CalendarCellElement = tasty({\n  as: 'td',\n  styles: {\n    preset: 't3m',\n    margin: 0,\n    padding: '2bw right bottom',\n  },\n});\n\nconst CalendarButtonElement = tasty({\n  'data-popover-keep': true,\n  styles: {\n    display: 'grid',\n    placeItems: 'center',\n    width: '3x',\n    height: '3x',\n    fill: {\n      '': '#primary.0',\n      ':hover': '#primary.16',\n      rangeHover: '#primary.16',\n      pressed: '#primary.10',\n\n      selected: '#primary',\n      'selected & :hover': '#primary-text',\n      'selected & pressed': '#primary',\n\n      'disabled | unavailable': '#primary.0',\n    },\n    color: {\n      '': '#dark',\n      selected: '#white',\n      'disabled | unavailable': '#dark.30',\n    },\n    outline: {\n      '': '1bw #primary-text.0',\n      focused: '1bw #primary-text',\n    },\n    outlineOffset: 0.5,\n    radius: true,\n    cursor: '$pointer',\n  },\n});\n\nexport function CalendarCell({ state, selectedRange, date, rangeHover }) {\n  let ref = useRef(null);\n  let {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isPressed,\n    isFocused,\n    isInvalid,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    formattedDate,\n  } = useCalendarCell({ date }, state, ref);\n\n  const isFinalSelected = selectedRange\n    ? date.compare(selectedRange.start) >= 0 &&\n      date.compare(selectedRange.end) <= 0\n    : isSelected;\n\n  return (\n    <CalendarCellElement {...cellProps}>\n      <CalendarButtonElement\n        {...buttonProps}\n        ref={ref}\n        hidden={isOutsideVisibleRange}\n        mods={{\n          selected: isFinalSelected,\n          rangeHover: rangeHover && !isFinalSelected,\n          pressed: isPressed,\n          focused: isFocused,\n          invalid: isInvalid,\n          disabled: isDisabled,\n          unavailable: isUnavailable,\n        }}\n      >\n        {formattedDate}\n      </CalendarButtonElement>\n    </CalendarCellElement>\n  );\n}\n"],"mappings":";;;;;;;AAIA,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,qBAAqB;CACrB,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,OAAO;EACP,QAAQ;EACR,MAAM;GACJ,IAAI;GACJ,UAAU;GACV,YAAY;GACZ,SAAS;GAET,UAAU;GACV,qBAAqB;GACrB,sBAAsB;GAEtB,0BAA0B;GAC3B;EACD,OAAO;GACL,IAAI;GACJ,UAAU;GACV,0BAA0B;GAC3B;EACD,SAAS;GACP,IAAI;GACJ,SAAS;GACV;EACD,eAAe;EACf,QAAQ;EACR,QAAQ;EACT;CACF,CAAC;AAEF,SAAgB,aAAa,EAAE,OAAO,eAAe,MAAM,cAAc;CACvE,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EACF,WACA,aACA,YACA,WACA,WACA,WACA,uBACA,YACA,eACA,kBACE,gBAAgB,EAAE,MAAM,EAAE,OAAO,IAAI;CAEzC,MAAM,kBAAkB,gBACpB,KAAK,QAAQ,cAAc,MAAM,IAAI,KACrC,KAAK,QAAQ,cAAc,IAAI,IAAI,IACnC;AAEJ,QACE,oBAAC;EAAoB,GAAI;YACvB,oBAAC;GACC,GAAI;GACC;GACL,QAAQ;GACR,MAAM;IACJ,UAAU;IACV,YAAY,cAAc,CAAC;IAC3B,SAAS;IACT,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACd;aAEA;IACqB;GACJ"}
+{"version":3,"file":"CalendarCell.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarCell.tsx"],"sourcesContent":["import { CalendarDate, isSameDay } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useRef } from 'react';\nimport { DateValue, useCalendarCell } from 'react-aria';\nimport { CalendarState, RangeCalendarState } from 'react-stately';\n\nimport { CALENDAR_CELL_STYLES } from './styled';\n\nconst CalendarCellElement = tasty({\n  as: 'td',\n  styles: {\n    margin: 0,\n    padding: '2bw right bottom',\n  },\n});\n\nconst CalendarButtonElement = tasty({\n  'data-popover-keep': true,\n  styles: {\n    ...CALENDAR_CELL_STYLES,\n    width: '3x',\n    height: '3x',\n  },\n});\n\nexport interface CubeCalendarCellProps {\n  state: CalendarState | RangeCalendarState;\n  date: CalendarDate;\n  /** Today, expressed in the calendar system of the grid. */\n  today?: CalendarDate;\n  /** Explicit range highlight, used when the range lives outside the state. */\n  selectedRange?: { start: DateValue; end: DateValue };\n  /** Whether the whole row is highlighted (week picker mode). */\n  rangeHover?: boolean;\n}\n\nexport function CalendarCell(props: CubeCalendarCellProps) {\n  let { state, selectedRange, date, today, rangeHover } = props;\n  let ref = useRef(null);\n  let {\n    cellProps,\n    buttonProps,\n    isSelected,\n    isPressed,\n    isFocused,\n    isInvalid,\n    isOutsideVisibleRange,\n    isDisabled,\n    isUnavailable,\n    formattedDate,\n  } = useCalendarCell({ date }, state, ref);\n\n  const isFinalSelected =\n    !isOutsideVisibleRange &&\n    (selectedRange\n      ? date.compare(selectedRange.start) >= 0 &&\n        date.compare(selectedRange.end) <= 0\n      : isSelected);\n\n  return (\n    <CalendarCellElement {...cellProps}>\n      <CalendarButtonElement\n        {...buttonProps}\n        ref={ref}\n        mods={{\n          selected: isFinalSelected,\n          current: !!today && !isOutsideVisibleRange && isSameDay(date, today),\n          outside: isOutsideVisibleRange,\n          rangeHover: rangeHover && !isFinalSelected,\n          pressed: isPressed,\n          focused: isFocused,\n          invalid: isInvalid,\n          disabled: isDisabled,\n          unavailable: isUnavailable,\n        }}\n      >\n        {formattedDate}\n      </CalendarButtonElement>\n    </CalendarCellElement>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;EACN,QAAQ;EACR,SAAS;EACV;CACF,CAAC;AAEF,MAAM,wBAAwB,MAAM;CAClC,qBAAqB;CACrB,QAAQ;EACN,GAAG;EACH,OAAO;EACP,QAAQ;EACT;CACF,CAAC;AAaF,SAAgB,aAAa,OAA8B;CACzD,IAAI,EAAE,OAAO,eAAe,MAAM,OAAO,eAAe;CACxD,IAAI,MAAM,OAAO,KAAK;CACtB,IAAI,EACF,WACA,aACA,YACA,WACA,WACA,WACA,uBACA,YACA,eACA,kBACE,gBAAgB,EAAE,MAAM,EAAE,OAAO,IAAI;CAEzC,MAAM,kBACJ,CAAC,0BACA,gBACG,KAAK,QAAQ,cAAc,MAAM,IAAI,KACrC,KAAK,QAAQ,cAAc,IAAI,IAAI,IACnC;AAEN,QACE,oBAAC;EAAoB,GAAI;YACvB,oBAAC;GACC,GAAI;GACC;GACL,MAAM;IACJ,UAAU;IACV,SAAS,CAAC,CAAC,SAAS,CAAC,yBAAyB,UAAU,MAAM,MAAM;IACpE,SAAS;IACT,YAAY,cAAc,CAAC;IAC3B,SAAS;IACT,SAAS;IACT,SAAS;IACT,UAAU;IACV,aAAa;IACd;aAEA;IACqB;GACJ"}

package/dist/components/other/Calendar/CalendarGrid.js

@@ -1,17 +1,18 @@
-/** @license MIT | @cube-dev/ui-kit v0.161.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
 import { getWeekNumber } from "../../fields/DatePicker/period.js";
 import { CalendarCell } from "./CalendarCell.js";
 import { tasty } from "@tenphi/tasty";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCalendarGrid, useLocale } from "react-aria";
-import { getWeeksInMonth } from "@internationalized/date";
+import { getWeeksInMonth, toCalendar, today } from "@internationalized/date";
 
 //#region src/components/other/Calendar/CalendarGrid.tsx
 const TableElement = tasty({
 	as: "table",
 	styles: {
 		borderCollapse: "collapse",
+		borderSpacing: 0,
 		HeadRow: { color: "#dark-04" },
 		WeekNumber: {
 			preset: "t3m",
@@ -21,11 +22,13 @@ const TableElement = tasty({
 		}
 	}
 });
-function CalendarGrid({ state, pickerMode = "day", ...props }) {
+function CalendarGrid(props) {
+	let { state, selectedRange, pickerMode = "day" } = props;
 	let { locale } = useLocale();
 	let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);
 	let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
 	let showWeekNumbers = pickerMode === "week";
+	let today$1 = useMemo(() => toCalendar(today(state.timeZone), state.visibleRange.start.calendar), [state.timeZone, state.visibleRange.start.calendar]);
 	let [hoveredWeek, setHoveredWeek] = useState(null);
 	return /* @__PURE__ */ jsxs(TableElement, {
 		...gridProps,
@@ -53,7 +56,8 @@ function CalendarGrid({ state, pickerMode = "day", ...props }) {
 					}), datesInWeek.map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
 						state,
 						date,
-						selectedRange: props.selectedRange,
+						today: today$1,
+						selectedRange,
 						rangeHover: isRowHovered
 					}, i) : /* @__PURE__ */ jsx("td", {}, i))]
 				}, weekIndex);

package/dist/components/other/Calendar/CalendarGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarGrid.js","names":[],"sources":["../../../../src/components/other/Calendar/CalendarGrid.tsx"],"sourcesContent":["import { getWeeksInMonth } from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useState } from 'react';\nimport { useCalendarGrid, useLocale } from 'react-aria';\n\nimport { getWeekNumber } from '../../fields/DatePicker/period';\n\nimport { CalendarCell } from './CalendarCell';\n\nconst TableElement = tasty({\n  as: 'table',\n  styles: {\n    borderCollapse: 'collapse',\n\n    HeadRow: {\n      color: '#dark-04',\n    },\n\n    WeekNumber: {\n      preset: 't3m',\n      color: '#dark-04',\n      textAlign: 'center',\n      padding: '0 1x',\n    },\n  },\n});\n\nexport function CalendarGrid({ state, pickerMode = 'day', ...props }) {\n  let { locale } = useLocale();\n  let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n  // Get the number of weeks in the month, so we can render the proper number of rows.\n  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n  let showWeekNumbers = pickerMode === 'week';\n\n  // In week mode, hovering any day highlights the whole week row.\n  let [hoveredWeek, setHoveredWeek] = useState<number | null>(null);\n\n  return (\n    <TableElement {...gridProps}>\n      <thead data-element=\"Head\" {...headerProps}>\n        <tr data-element=\"HeadRow\">\n          {showWeekNumbers && <th aria-hidden=\"true\" />}\n          {weekDays.map((day, index) => (\n            <th key={index}>{day}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody data-element=\"Body\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          let datesInWeek = state.getDatesInWeek(weekIndex);\n          let firstDate = datesInWeek.find(Boolean);\n          let isRowHovered = showWeekNumbers && hoveredWeek === weekIndex;\n\n          return (\n            <tr\n              key={weekIndex}\n              data-element=\"Row\"\n              onMouseEnter={\n                showWeekNumbers ? () => setHoveredWeek(weekIndex) : undefined\n              }\n              onMouseLeave={\n                showWeekNumbers ? () => setHoveredWeek(null) : undefined\n              }\n            >\n              {showWeekNumbers && (\n                <td data-element=\"WeekNumber\" aria-hidden=\"true\">\n                  {firstDate ? getWeekNumber(firstDate, locale) : ''}\n                </td>\n              )}\n              {datesInWeek.map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    selectedRange={props.selectedRange}\n                    rangeHover={isRowHovered}\n                  />\n                ) : (\n                  <td key={i} />\n                ),\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </TableElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,gBAAgB;EAEhB,SAAS,EACP,OAAO,YACR;EAED,YAAY;GACV,QAAQ;GACR,OAAO;GACP,WAAW;GACX,SAAS;GACV;EACF;CACF,CAAC;AAEF,SAAgB,aAAa,EAAE,OAAO,aAAa,OAAO,GAAG,SAAS;CACpE,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,EAAE,WAAW,aAAa,aAAa,gBAAgB,OAAO,MAAM;CAGxE,IAAI,eAAe,gBAAgB,MAAM,aAAa,OAAO,OAAO;CACpE,IAAI,kBAAkB,eAAe;CAGrC,IAAI,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEjE,QACE,qBAAC;EAAa,GAAI;aAChB,oBAAC;GAAM,gBAAa;GAAO,GAAI;aAC7B,qBAAC;IAAG,gBAAa;eACd,mBAAmB,oBAAC,QAAG,eAAY,SAAS,EAC5C,SAAS,KAAK,KAAK,UAClB,oBAAC,kBAAgB,OAAR,MAAiB,CAC1B;KACC;IACC,EACR,oBAAC;GAAM,gBAAa;aACjB,CAAC,GAAG,IAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,cAAc;IACtD,IAAI,cAAc,MAAM,eAAe,UAAU;IACjD,IAAI,YAAY,YAAY,KAAK,QAAQ;IACzC,IAAI,eAAe,mBAAmB,gBAAgB;AAEtD,WACE,qBAAC;KAEC,gBAAa;KACb,cACE,wBAAwB,eAAe,UAAU,GAAG;KAEtD,cACE,wBAAwB,eAAe,KAAK,GAAG;gBAGhD,mBACC,oBAAC;MAAG,gBAAa;MAAa,eAAY;gBACvC,YAAY,cAAc,WAAW,OAAO,GAAG;OAC7C,EAEN,YAAY,KAAK,MAAM,MACtB,OACE,oBAAC;MAEQ;MACD;MACN,eAAe,MAAM;MACrB,YAAY;QAJP,EAKL,GAEF,oBAAC,UAAQ,EAAK,CAEjB;OA1BI,UA2BF;KAEP;IACI;GACK"}
+{"version":3,"file":"CalendarGrid.js","names":["today","getToday"],"sources":["../../../../src/components/other/Calendar/CalendarGrid.tsx"],"sourcesContent":["import {\n  today as getToday,\n  getWeeksInMonth,\n  toCalendar,\n} from '@internationalized/date';\nimport { tasty } from '@tenphi/tasty';\nimport { useMemo, useState } from 'react';\nimport { DateValue, useCalendarGrid, useLocale } from 'react-aria';\nimport { CalendarState, RangeCalendarState } from 'react-stately';\n\nimport { getWeekNumber } from '../../fields/DatePicker/period';\n\nimport { CalendarCell } from './CalendarCell';\n\nconst TableElement = tasty({\n  as: 'table',\n  styles: {\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n\n    HeadRow: {\n      color: '#dark-04',\n    },\n\n    WeekNumber: {\n      preset: 't3m',\n      color: '#dark-04',\n      textAlign: 'center',\n      padding: '0 1x',\n    },\n  },\n});\n\nexport interface CubeCalendarGridProps {\n  state: CalendarState | RangeCalendarState;\n  /** Explicit range highlight, used when the range lives outside the state. */\n  selectedRange?: { start: DateValue; end: DateValue };\n  /**\n   * When set to `week`, the grid shows a leading week-number column and\n   * highlights the whole week under the pointer.\n   */\n  pickerMode?: 'day' | 'week';\n}\n\nexport function CalendarGrid(props: CubeCalendarGridProps) {\n  let { state, selectedRange, pickerMode = 'day' } = props;\n  let { locale } = useLocale();\n  let { gridProps, headerProps, weekDays } = useCalendarGrid(props, state);\n\n  // Get the number of weeks in the month, so we can render the proper number of rows.\n  let weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);\n  let showWeekNumbers = pickerMode === 'week';\n\n  let today = useMemo(\n    () =>\n      toCalendar(getToday(state.timeZone), state.visibleRange.start.calendar),\n    [state.timeZone, state.visibleRange.start.calendar],\n  );\n\n  // In week mode, hovering any day highlights the whole week row.\n  let [hoveredWeek, setHoveredWeek] = useState<number | null>(null);\n\n  return (\n    <TableElement {...gridProps}>\n      <thead data-element=\"Head\" {...headerProps}>\n        <tr data-element=\"HeadRow\">\n          {showWeekNumbers && <th aria-hidden=\"true\" />}\n          {weekDays.map((day, index) => (\n            <th key={index}>{day}</th>\n          ))}\n        </tr>\n      </thead>\n      <tbody data-element=\"Body\">\n        {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n          let datesInWeek = state.getDatesInWeek(weekIndex);\n          let firstDate = datesInWeek.find(Boolean);\n          let isRowHovered = showWeekNumbers && hoveredWeek === weekIndex;\n\n          return (\n            <tr\n              key={weekIndex}\n              data-element=\"Row\"\n              onMouseEnter={\n                showWeekNumbers ? () => setHoveredWeek(weekIndex) : undefined\n              }\n              onMouseLeave={\n                showWeekNumbers ? () => setHoveredWeek(null) : undefined\n              }\n            >\n              {showWeekNumbers && (\n                <td data-element=\"WeekNumber\" aria-hidden=\"true\">\n                  {firstDate ? getWeekNumber(firstDate, locale) : ''}\n                </td>\n              )}\n              {datesInWeek.map((date, i) =>\n                date ? (\n                  <CalendarCell\n                    key={i}\n                    state={state}\n                    date={date}\n                    today={today}\n                    selectedRange={selectedRange}\n                    rangeHover={isRowHovered}\n                  />\n                ) : (\n                  <td key={i} />\n                ),\n              )}\n            </tr>\n          );\n        })}\n      </tbody>\n    </TableElement>\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAM,eAAe,MAAM;CACzB,IAAI;CACJ,QAAQ;EACN,gBAAgB;EAChB,eAAe;EAEf,SAAS,EACP,OAAO,YACR;EAED,YAAY;GACV,QAAQ;GACR,OAAO;GACP,WAAW;GACX,SAAS;GACV;EACF;CACF,CAAC;AAaF,SAAgB,aAAa,OAA8B;CACzD,IAAI,EAAE,OAAO,eAAe,aAAa,UAAU;CACnD,IAAI,EAAE,WAAW,WAAW;CAC5B,IAAI,EAAE,WAAW,aAAa,aAAa,gBAAgB,OAAO,MAAM;CAGxE,IAAI,eAAe,gBAAgB,MAAM,aAAa,OAAO,OAAO;CACpE,IAAI,kBAAkB,eAAe;CAErC,IAAIA,UAAQ,cAER,WAAWC,MAAS,MAAM,SAAS,EAAE,MAAM,aAAa,MAAM,SAAS,EACzE,CAAC,MAAM,UAAU,MAAM,aAAa,MAAM,SAAS,CACpD;CAGD,IAAI,CAAC,aAAa,kBAAkB,SAAwB,KAAK;AAEjE,QACE,qBAAC;EAAa,GAAI;aAChB,oBAAC;GAAM,gBAAa;GAAO,GAAI;aAC7B,qBAAC;IAAG,gBAAa;eACd,mBAAmB,oBAAC,QAAG,eAAY,SAAS,EAC5C,SAAS,KAAK,KAAK,UAClB,oBAAC,kBAAgB,OAAR,MAAiB,CAC1B;KACC;IACC,EACR,oBAAC;GAAM,gBAAa;aACjB,CAAC,GAAG,IAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,cAAc;IACtD,IAAI,cAAc,MAAM,eAAe,UAAU;IACjD,IAAI,YAAY,YAAY,KAAK,QAAQ;IACzC,IAAI,eAAe,mBAAmB,gBAAgB;AAEtD,WACE,qBAAC;KAEC,gBAAa;KACb,cACE,wBAAwB,eAAe,UAAU,GAAG;KAEtD,cACE,wBAAwB,eAAe,KAAK,GAAG;gBAGhD,mBACC,oBAAC;MAAG,gBAAa;MAAa,eAAY;gBACvC,YAAY,cAAc,WAAW,OAAO,GAAG;OAC7C,EAEN,YAAY,KAAK,MAAM,MACtB,OACE,oBAAC;MAEQ;MACD;MACN,OAAOD;MACQ;MACf,YAAY;QALP,EAML,GAEF,oBAAC,UAAQ,EAAK,CAEjB;OA3BI,UA4BF;KAEP;IACI;GACK"}

package/dist/components/other/Calendar/CalendarHeader.js

@@ -0,0 +1,62 @@
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+import { _Title } from "../../content/Title.js";
+import { Space } from "../../layout/Space.js";
+import { LeftIcon } from "../../../icons/LeftIcon.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
+import { Button } from "../../actions/index.js";
+import { CalendarHeaderElement } from "./styled.js";
+import { tasty } from "@tenphi/tasty";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/other/Calendar/CalendarHeader.tsx
+/**
+* A heading that holds the view switcher. Its own preset matches the type scale
+* of an `xsmall` button so the plain-title fallback (a decade range, or a
+* calendar with navigation turned off) doesn't outweigh the interactive one.
+*/
+const CalendarTitleElement = tasty(_Title, {
+	level: 6,
+	preset: "t4",
+	styles: {
+		display: "flex",
+		placeItems: "center",
+		gap: ".25x",
+		padding: {
+			"": "0 (1x - 1bw)",
+			interactive: 0
+		}
+	}
+});
+const CalendarTitleButton = tasty(Button, {
+	"data-popover-keep": true,
+	type: "clear",
+	size: "xsmall"
+});
+function CalendarHeader(props) {
+	let { segments, title, prevButtonProps, nextButtonProps } = props;
+	return /* @__PURE__ */ jsxs(CalendarHeaderElement, { children: [/* @__PURE__ */ jsx(CalendarTitleElement, {
+		mods: { interactive: !!segments?.length },
+		children: segments?.length ? segments.map(({ key, label, onPress, isDisabled }) => /* @__PURE__ */ jsx(CalendarTitleButton, {
+			isDisabled,
+			onPress,
+			children: label
+		}, key)) : title
+	}), /* @__PURE__ */ jsxs(Space, {
+		gap: ".5x",
+		children: [/* @__PURE__ */ jsx(Button, {
+			"data-popover-keep": true,
+			size: "xsmall",
+			...prevButtonProps,
+			icon: /* @__PURE__ */ jsx(LeftIcon, {})
+		}), /* @__PURE__ */ jsx(Button, {
+			"data-popover-keep": true,
+			size: "xsmall",
+			...nextButtonProps,
+			icon: /* @__PURE__ */ jsx(RightIcon, {})
+		})]
+	})] });
+}
+
+//#endregion
+export { CalendarHeader };
+//# sourceMappingURL=CalendarHeader.js.map

package/dist/components/other/Calendar/CalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarHeader.js","names":["Title"],"sources":["../../../../src/components/other/Calendar/CalendarHeader.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nimport { LeftIcon, RightIcon } from '../../../icons';\nimport { Button } from '../../actions';\nimport { Title } from '../../content/Title';\nimport { Space } from '../../layout/Space';\n\nimport { CalendarHeaderElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/**\n * A heading that holds the view switcher. Its own preset matches the type scale\n * of an `xsmall` button so the plain-title fallback (a decade range, or a\n * calendar with navigation turned off) doesn't outweigh the interactive one.\n */\nconst CalendarTitleElement = tasty(Title, {\n  level: 6,\n  preset: 't4',\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n    gap: '.25x',\n    // Line the plain title up with the label inside a button.\n    padding: {\n      '': '0 (1x - 1bw)',\n      interactive: 0,\n    },\n  },\n});\n\nconst CalendarTitleButton = tasty(Button, {\n  'data-popover-keep': true,\n  type: 'clear',\n  size: 'xsmall',\n});\n\nexport interface CubeCalendarHeaderSegment {\n  key: string;\n  label: string;\n  onPress: () => void;\n  isDisabled?: boolean;\n}\n\nexport interface CubeCalendarHeaderProps {\n  /**\n   * Interactive title segments (month / year). When omitted the header falls\n   * back to a plain `title` — e.g. for a multi-month range.\n   */\n  segments?: CubeCalendarHeaderSegment[];\n  title?: ReactNode;\n  prevButtonProps?: Props;\n  nextButtonProps?: Props;\n}\n\nexport function CalendarHeader(props: CubeCalendarHeaderProps) {\n  let { segments, title, prevButtonProps, nextButtonProps } = props;\n\n  return (\n    <CalendarHeaderElement>\n      <CalendarTitleElement mods={{ interactive: !!segments?.length }}>\n        {segments?.length\n          ? segments.map(({ key, label, onPress, isDisabled }) => (\n              <CalendarTitleButton\n                key={key}\n                isDisabled={isDisabled}\n                onPress={onPress}\n              >\n                {label}\n              </CalendarTitleButton>\n            ))\n          : title}\n      </CalendarTitleElement>\n      <Space gap=\".5x\">\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...prevButtonProps}\n          icon={<LeftIcon />}\n        />\n        <Button\n          data-popover-keep\n          size=\"xsmall\"\n          {...nextButtonProps}\n          icon={<RightIcon />}\n        />\n      </Space>\n    </CalendarHeaderElement>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,uBAAuB,MAAMA,QAAO;CACxC,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,SAAS;EACT,YAAY;EACZ,KAAK;EAEL,SAAS;GACP,IAAI;GACJ,aAAa;GACd;EACF;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,QAAQ;CACxC,qBAAqB;CACrB,MAAM;CACN,MAAM;CACP,CAAC;AAoBF,SAAgB,eAAe,OAAgC;CAC7D,IAAI,EAAE,UAAU,OAAO,iBAAiB,oBAAoB;AAE5D,QACE,qBAAC,oCACC,oBAAC;EAAqB,MAAM,EAAE,aAAa,CAAC,CAAC,UAAU,QAAQ;YAC5D,UAAU,SACP,SAAS,KAAK,EAAE,KAAK,OAAO,SAAS,iBACnC,oBAAC;GAEa;GACH;aAER;KAJI,IAKe,CACtB,GACF;GACiB,EACvB,qBAAC;EAAM,KAAI;aACT,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,aAAW;IAClB,EACF,oBAAC;GACC;GACA,MAAK;GACL,GAAI;GACJ,MAAM,oBAAC,cAAY;IACnB;GACI,IACc"}

package/dist/components/other/Calendar/CalendarPanel.js

@@ -0,0 +1,196 @@
+/** @license MIT | @cube-dev/ui-kit v0.163.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { useI18n } from "../../../i18n/useI18n.js";
+import { CalendarElement } from "./styled.js";
+import { CalendarGrid } from "./CalendarGrid.js";
+import { CalendarHeader } from "./CalendarHeader.js";
+import { PeriodGrid } from "./PeriodGrid.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDateFormatter } from "react-aria";
+import { endOfMonth, endOfYear, isSameMonth, startOfMonth, startOfYear, toCalendar, today } from "@internationalized/date";
+
+//#region src/components/other/Calendar/CalendarPanel.tsx
+/** The year grid shows a decade plus one adjacent year on either side. */
+const YEAR_CELLS = 12;
+const MONTH_COLUMNS = 3;
+const YEAR_COLUMNS = 3;
+/**
+* Exactly as wide as seven day cells (`3x` cell + a `2bw` gutter), so switching
+* between the day, month and year panels keeps the popover roughly in place.
+*/
+const PERIOD_GRID_STYLES = { width: "(7 * (3x + 2bw))" };
+/**
+* The body shared by `Calendar` and `RangeCalendar`: a header plus one of three
+* panels. The month and year panels only *navigate* — they move the focused
+* date and never select a value, so a range selection in progress survives a
+* jump to another month.
+*/
+function CalendarPanel(props) {
+	const { t } = useI18n();
+	let { state, title, calendarProps, prevButtonProps, nextButtonProps, hasMonthYearNavigation = true, selectedRange, pickerMode, elementRef } = props;
+	let [view, setView] = useState("day");
+	let [anchor, setAnchor] = useState(state.focusedDate);
+	let visibleStart = state.visibleRange.start;
+	let calendar = visibleStart.calendar;
+	let timeZone = state.timeZone;
+	let calendarId = calendar.identifier;
+	let monthFormatter = useDateFormatter({
+		month: "long",
+		timeZone,
+		calendar: calendarId
+	});
+	let shortMonthFormatter = useDateFormatter({
+		month: "short",
+		timeZone,
+		calendar: calendarId
+	});
+	let yearFormatter = useDateFormatter({
+		year: "numeric",
+		timeZone,
+		calendar: calendarId
+	});
+	let todayDate = useMemo(() => toCalendar(today(timeZone), calendar), [timeZone, calendar]);
+	let format = (formatter, date) => formatter.format(date.toDate(timeZone));
+	/** Whether a whole period lies outside the calendar's allowed range. */
+	let isPeriodDisabled = (start, end) => state.isDisabled || state.minValue != null && end.compare(state.minValue) < 0 || state.maxValue != null && start.compare(state.maxValue) > 0;
+	let hasNavigation = hasMonthYearNavigation && isSameMonth(visibleStart, state.visibleRange.end);
+	let openView = (next) => {
+		setAnchor(state.focusedDate);
+		setView(next);
+	};
+	let onKeyDown = (e) => {
+		if (view !== "day" && e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			setView("day");
+			state.setFocused(true);
+		}
+	};
+	let header;
+	let body;
+	if (view === "month") {
+		let monthDate = (month) => startOfMonth(anchor.set({ month }));
+		let monthCount = calendar.getMonthsInYear(anchor);
+		let cells = Array.from({ length: monthCount }, (_, index) => {
+			let date = monthDate(index + 1);
+			return {
+				key: `month-${index + 1}`,
+				label: format(shortMonthFormatter, date),
+				isSelected: isSameMonth(date, visibleStart),
+				isCurrent: isSameMonth(date, todayDate),
+				isDisabled: isPeriodDisabled(date, endOfMonth(date))
+			};
+		});
+		let prevYear = anchor.subtract({ years: 1 });
+		let nextYear = anchor.add({ years: 1 });
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			segments: [{
+				key: "year",
+				label: format(yearFormatter, anchor),
+				isDisabled: state.isDisabled,
+				onPress: () => setView("year")
+			}],
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYear", "Previous year"),
+				isDisabled: isPeriodDisabled(startOfYear(prevYear), endOfYear(prevYear)),
+				onPress: () => setAnchor(prevYear)
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYear", "Next year"),
+				isDisabled: isPeriodDisabled(startOfYear(nextYear), endOfYear(nextYear)),
+				onPress: () => setAnchor(nextYear)
+			}
+		});
+		body = /* @__PURE__ */ jsx(PeriodGrid, {
+			autoFocus: true,
+			"aria-label": t("calendar.months", "Months"),
+			cells,
+			styles: PERIOD_GRID_STYLES,
+			columns: MONTH_COLUMNS,
+			focusedIndex: anchor.month - 1,
+			onCellPress: (index) => {
+				state.setFocusedDate(anchor.set({ month: index + 1 }));
+				setView("day");
+			},
+			onCellFocus: (index) => setAnchor(anchor.set({ month: index + 1 })),
+			onMoveFocus: (delta) => setAnchor(anchor.add({ months: delta })),
+			onMovePage: (delta) => setAnchor(anchor.add({ years: delta }))
+		}, "month");
+	} else if (view === "year") {
+		let yearDate = (year) => startOfYear(anchor.set({ year }));
+		let decadeStart = Math.floor(anchor.year / 10) * 10;
+		let firstYear = decadeStart - 1;
+		let cells = Array.from({ length: YEAR_CELLS }, (_, index) => {
+			let year = firstYear + index;
+			let date = yearDate(year);
+			return {
+				key: `year-${year}`,
+				label: format(yearFormatter, date),
+				isSelected: year === visibleStart.year,
+				isCurrent: year === todayDate.year,
+				isOutside: year < decadeStart || year > decadeStart + 9,
+				isDisabled: isPeriodDisabled(date, endOfYear(date))
+			};
+		});
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			title: `${format(yearFormatter, yearDate(decadeStart))} – ${format(yearFormatter, yearDate(decadeStart + 9))}`,
+			prevButtonProps: {
+				"aria-label": t("calendar.previousYears", "Previous years"),
+				isDisabled: isPeriodDisabled(yearDate(decadeStart - 10), endOfYear(yearDate(decadeStart - 1))),
+				onPress: () => setAnchor(anchor.subtract({ years: 10 }))
+			},
+			nextButtonProps: {
+				"aria-label": t("calendar.nextYears", "Next years"),
+				isDisabled: isPeriodDisabled(yearDate(decadeStart + 10), endOfYear(yearDate(decadeStart + 19))),
+				onPress: () => setAnchor(anchor.add({ years: 10 }))
+			}
+		});
+		body = /* @__PURE__ */ jsx(PeriodGrid, {
+			autoFocus: true,
+			"aria-label": t("calendar.years", "Years"),
+			cells,
+			styles: PERIOD_GRID_STYLES,
+			columns: YEAR_COLUMNS,
+			focusedIndex: anchor.year - firstYear,
+			onCellPress: (index) => {
+				setAnchor(anchor.set({ year: firstYear + index }));
+				setView("month");
+			},
+			onCellFocus: (index) => setAnchor(anchor.set({ year: firstYear + index })),
+			onMoveFocus: (delta) => setAnchor(anchor.add({ years: delta })),
+			onMovePage: (delta) => setAnchor(anchor.add({ years: delta * 10 }))
+		}, "year");
+	} else {
+		header = /* @__PURE__ */ jsx(CalendarHeader, {
+			title,
+			segments: hasNavigation ? [{
+				key: "month",
+				label: format(monthFormatter, visibleStart),
+				isDisabled: state.isDisabled,
+				onPress: () => openView("month")
+			}, {
+				key: "year",
+				label: format(yearFormatter, visibleStart),
+				isDisabled: state.isDisabled,
+				onPress: () => openView("year")
+			}] : void 0,
+			prevButtonProps,
+			nextButtonProps
+		});
+		body = /* @__PURE__ */ jsx(CalendarGrid, {
+			state,
+			selectedRange,
+			pickerMode
+		});
+	}
+	return /* @__PURE__ */ jsxs(CalendarElement, {
+		ref: elementRef,
+		...mergeProps$1(calendarProps, { onKeyDown }),
+		children: [header, body]
+	});
+}
+
+//#endregion
+export { CalendarPanel };
+//# sourceMappingURL=CalendarPanel.js.map

package/dist/components/other/Calendar/CalendarPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPanel.js","names":["mergeProps"],"sources":["../../../../src/components/other/Calendar/CalendarPanel.tsx"],"sourcesContent":["import {\n  CalendarDate,\n  endOfMonth,\n  endOfYear,\n  isSameMonth,\n  startOfMonth,\n  startOfYear,\n  toCalendar,\n  today,\n} from '@internationalized/date';\nimport { KeyboardEvent, ReactElement, Ref, useMemo, useState } from 'react';\nimport { DateValue, useDateFormatter } from 'react-aria';\nimport { CalendarState, RangeCalendarState } from 'react-stately';\n\nimport { useI18n } from '../../../i18n';\nimport { mergeProps } from '../../../utils/react';\n\nimport { CalendarGrid } from './CalendarGrid';\nimport { CalendarHeader } from './CalendarHeader';\nimport { CubePeriodGridCell, PeriodGrid } from './PeriodGrid';\nimport { CalendarElement } from './styled';\n\nimport type { Props } from '../../../props';\n\n/** Which panel the calendar currently shows. */\nexport type CubeCalendarView = 'day' | 'month' | 'year';\n\n/** The year grid shows a decade plus one adjacent year on either side. */\nconst YEAR_CELLS = 12;\nconst MONTH_COLUMNS = 3;\nconst YEAR_COLUMNS = 3;\n\n/**\n * Exactly as wide as seven day cells (`3x` cell + a `2bw` gutter), so switching\n * between the day, month and year panels keeps the popover roughly in place.\n */\nconst PERIOD_GRID_STYLES = { width: '(7 * (3x + 2bw))' } as const;\n\ninterface Formatter {\n  format(date: Date): string;\n}\n\nexport interface CubeCalendarPanelProps {\n  state: CalendarState | RangeCalendarState;\n  /** The visible range title provided by React Aria. */\n  title: string;\n  calendarProps: Props;\n  prevButtonProps: Props;\n  nextButtonProps: Props;\n  /**\n   * Whether the header lets the user jump straight to a month or a year.\n   * @default true\n   */\n  hasMonthYearNavigation?: boolean;\n  selectedRange?: { start: DateValue; end: DateValue };\n  pickerMode?: 'day' | 'week';\n  elementRef?: Ref<HTMLElement>;\n}\n\n/**\n * The body shared by `Calendar` and `RangeCalendar`: a header plus one of three\n * panels. The month and year panels only *navigate* — they move the focused\n * date and never select a value, so a range selection in progress survives a\n * jump to another month.\n */\nexport function CalendarPanel(props: CubeCalendarPanelProps) {\n  const { t } = useI18n();\n\n  let {\n    state,\n    title,\n    calendarProps,\n    prevButtonProps,\n    nextButtonProps,\n    hasMonthYearNavigation = true,\n    selectedRange,\n    pickerMode,\n    elementRef,\n  } = props;\n\n  let [view, setView] = useState<CubeCalendarView>('day');\n  // The period the month / year panels navigate around. Seeded from the\n  // focused date every time the user leaves the day panel.\n  let [anchor, setAnchor] = useState<CalendarDate>(state.focusedDate);\n\n  let visibleStart = state.visibleRange.start;\n  let calendar = visibleStart.calendar;\n  let timeZone = state.timeZone;\n  let calendarId = calendar.identifier;\n\n  let monthFormatter = useDateFormatter({\n    month: 'long',\n    timeZone,\n    calendar: calendarId,\n  });\n  let shortMonthFormatter = useDateFormatter({\n    month: 'short',\n    timeZone,\n    calendar: calendarId,\n  });\n  let yearFormatter = useDateFormatter({\n    year: 'numeric',\n    timeZone,\n    calendar: calendarId,\n  });\n\n  let todayDate = useMemo(\n    () => toCalendar(today(timeZone), calendar),\n    [timeZone, calendar],\n  );\n\n  let format = (formatter: Formatter, date: CalendarDate) =>\n    formatter.format(date.toDate(timeZone));\n\n  /** Whether a whole period lies outside the calendar's allowed range. */\n  let isPeriodDisabled = (start: CalendarDate, end: CalendarDate) =>\n    state.isDisabled ||\n    (state.minValue != null && end.compare(state.minValue) < 0) ||\n    (state.maxValue != null && start.compare(state.maxValue) > 0);\n\n  // A multi-month view has no single month or year to drill into.\n  let hasNavigation =\n    hasMonthYearNavigation && isSameMonth(visibleStart, state.visibleRange.end);\n\n  let openView = (next: CubeCalendarView) => {\n    setAnchor(state.focusedDate);\n    setView(next);\n  };\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    // Step back to the day panel rather than closing the surrounding popover.\n    if (view !== 'day' && e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      setView('day');\n      // The grid the user was in is about to unmount. Claim focus for the day\n      // cell, or it falls out of the popover and the next `Escape` is lost.\n      state.setFocused(true);\n    }\n  };\n\n  let header: ReactElement;\n  let body: ReactElement;\n\n  if (view === 'month') {\n    let monthDate = (month: number) => startOfMonth(anchor.set({ month }));\n    let monthCount = calendar.getMonthsInYear(anchor);\n\n    let cells: CubePeriodGridCell[] = Array.from(\n      { length: monthCount },\n      (_, index) => {\n        let date = monthDate(index + 1);\n\n        return {\n          key: `month-${index + 1}`,\n          label: format(shortMonthFormatter, date),\n          isSelected: isSameMonth(date, visibleStart),\n          isCurrent: isSameMonth(date, todayDate),\n          isDisabled: isPeriodDisabled(date, endOfMonth(date)),\n        };\n      },\n    );\n\n    let prevYear = anchor.subtract({ years: 1 });\n    let nextYear = anchor.add({ years: 1 });\n\n    header = (\n      <CalendarHeader\n        segments={[\n          {\n            key: 'year',\n            label: format(yearFormatter, anchor),\n            isDisabled: state.isDisabled,\n            onPress: () => setView('year'),\n          },\n        ]}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYear', 'Previous year'),\n          isDisabled: isPeriodDisabled(\n            startOfYear(prevYear),\n            endOfYear(prevYear),\n          ),\n          onPress: () => setAnchor(prevYear),\n        }}\n        nextButtonProps={{\n          'aria-label': t('calendar.nextYear', 'Next year'),\n          isDisabled: isPeriodDisabled(\n            startOfYear(nextYear),\n            endOfYear(nextYear),\n          ),\n          onPress: () => setAnchor(nextYear),\n        }}\n      />\n    );\n\n    body = (\n      <PeriodGrid\n        // Remount per view so focus follows the user into the new grid.\n        key=\"month\"\n        autoFocus\n        aria-label={t('calendar.months', 'Months')}\n        cells={cells}\n        styles={PERIOD_GRID_STYLES}\n        columns={MONTH_COLUMNS}\n        focusedIndex={anchor.month - 1}\n        onCellPress={(index) => {\n          state.setFocusedDate(anchor.set({ month: index + 1 }));\n          setView('day');\n        }}\n        onCellFocus={(index) => setAnchor(anchor.set({ month: index + 1 }))}\n        onMoveFocus={(delta) => setAnchor(anchor.add({ months: delta }))}\n        onMovePage={(delta) => setAnchor(anchor.add({ years: delta }))}\n      />\n    );\n  } else if (view === 'year') {\n    let yearDate = (year: number) => startOfYear(anchor.set({ year }));\n    let decadeStart = Math.floor(anchor.year / 10) * 10;\n    let firstYear = decadeStart - 1;\n\n    let cells: CubePeriodGridCell[] = Array.from(\n      { length: YEAR_CELLS },\n      (_, index) => {\n        let year = firstYear + index;\n        let date = yearDate(year);\n\n        return {\n          key: `year-${year}`,\n          label: format(yearFormatter, date),\n          isSelected: year === visibleStart.year,\n          isCurrent: year === todayDate.year,\n          isOutside: year < decadeStart || year > decadeStart + 9,\n          isDisabled: isPeriodDisabled(date, endOfYear(date)),\n        };\n      },\n    );\n\n    header = (\n      <CalendarHeader\n        title={`${format(yearFormatter, yearDate(decadeStart))} – ${format(\n          yearFormatter,\n          yearDate(decadeStart + 9),\n        )}`}\n        prevButtonProps={{\n          'aria-label': t('calendar.previousYears', 'Previous years'),\n          isDisabled: isPeriodDisabled(\n            yearDate(decadeStart - 10),\n            endOfYear(yearDate(decadeStart - 1)),\n          ),\n          onPress: () => setAnchor(anchor.subtract({ years: 10 })),\n        }}\n        nextButtonProps={{\n          'aria-label': t('calendar.nextYears', 'Next years'),\n          isDisabled: isPeriodDisabled(\n            yearDate(decadeStart + 10),\n            endOfYear(yearDate(decadeStart + 19)),\n          ),\n          onPress: () => setAnchor(anchor.add({ years: 10 })),\n        }}\n      />\n    );\n\n    body = (\n      <PeriodGrid\n        key=\"year\"\n        autoFocus\n        aria-label={t('calendar.years', 'Years')}\n        cells={cells}\n        styles={PERIOD_GRID_STYLES}\n        columns={YEAR_COLUMNS}\n        focusedIndex={anchor.year - firstYear}\n        onCellPress={(index) => {\n          setAnchor(anchor.set({ year: firstYear + index }));\n          setView('month');\n        }}\n        onCellFocus={(index) =>\n          setAnchor(anchor.set({ year: firstYear + index }))\n        }\n        onMoveFocus={(delta) => setAnchor(anchor.add({ years: delta }))}\n        onMovePage={(delta) => setAnchor(anchor.add({ years: delta * 10 }))}\n      />\n    );\n  } else {\n    header = (\n      <CalendarHeader\n        title={title}\n        segments={\n          hasNavigation\n            ? [\n                {\n                  key: 'month',\n                  label: format(monthFormatter, visibleStart),\n                  isDisabled: state.isDisabled,\n                  onPress: () => openView('month'),\n                },\n                {\n                  key: 'year',\n                  label: format(yearFormatter, visibleStart),\n                  isDisabled: state.isDisabled,\n                  onPress: () => openView('year'),\n                },\n              ]\n            : undefined\n        }\n        prevButtonProps={prevButtonProps}\n        nextButtonProps={nextButtonProps}\n      />\n    );\n\n    body = (\n      <CalendarGrid\n        state={state}\n        selectedRange={selectedRange}\n        pickerMode={pickerMode}\n      />\n    );\n  }\n\n  return (\n    <CalendarElement\n      ref={elementRef}\n      {...mergeProps(calendarProps, { onKeyDown })}\n    >\n      {header}\n      {body}\n    </CalendarElement>\n  );\n}\n"],"mappings":"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"}