@bitrise/bitkit-v2 0.3.481-beta.3083 → 0.3.481-beta.3087

package/dist/components/BitkitCalendar/BitkitCalendar.d.ts

@@ -1,13 +1,25 @@
 import { ReactNode } from 'react';
 export interface BitkitCalendarProps {
     children?: ReactNode;
+    /** Text for a day's tooltip, e.g. why it can't be picked. Return `undefined` for no tooltip. */
+    dayTooltip?: (date: Date) => string | undefined;
     defaultValue?: Date | Date[] | null;
     device?: 'desktop' | 'mobile';
+    /**
+     * Content under the month grid, inside the calendar card — e.g. Clear/Apply buttons that commit
+     * the selection. With a footer, picking a range no longer closes the popover; closing is up to it.
+     */
+    footer?: ReactNode;
     layout?: '1-month' | '2-month';
     max?: Date;
     min?: Date;
+    /** Called when the popover opens or closes. Pair it with `open` to control it. */
+    onOpenChange?: (open: boolean) => void;
     onValueChange?: (value: Date[] | null) => void;
+    /** Controls whether the popover is open. Only applies with a trigger (`children`). */
+    open?: boolean;
     selectionMode?: 'day' | 'range';
+    /** Shows the days of the neighbouring months. Defaults to `true` on the `1-month` layout, `false` on `2-month`. */
     showOutsideDays?: boolean;
     showSelectedDate?: boolean;
     value?: Date[] | null;

package/dist/components/BitkitCalendar/BitkitCalendar.js

@@ -7,12 +7,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 //#region lib/components/BitkitCalendar/BitkitCalendar.tsx
 var BitkitCalendar = forwardRef((props, ref) => {
-	const { children, defaultValue, device = "desktop", layout, selectionMode = "range", min, max, onValueChange, showOutsideDays: showOutsideDaysProp = false, showSelectedDate = false, value: inputValue, ...rest } = props;
+	const { children, dayTooltip, defaultValue, device = "desktop", footer, layout = "1-month", selectionMode = "range", min, max, onOpenChange, onValueChange, open, showOutsideDays: showOutsideDaysProp, showSelectedDate = false, value: inputValue, ...rest } = props;
 	const minCalendarDate = useMemo(() => min ? dateToCalendarDate(min) : void 0, [min]);
 	const maxCalendarDate = useMemo(() => max ? dateToCalendarDate(max) : void 0, [max]);
 	const value = inputValue?.map(dateToCalendarDate);
 	const inline = !children;
 	const content = /* @__PURE__ */ jsx(CalendarContent, {
+		dayTooltip,
+		device,
+		footer,
 		layout,
 		max: maxCalendarDate,
 		min: minCalendarDate,
@@ -21,10 +24,13 @@ var BitkitCalendar = forwardRef((props, ref) => {
 	});
 	const showOutsideDays = showOutsideDaysProp ?? layout === "1-month";
 	return /* @__PURE__ */ jsxs(DatePicker.Root, {
+		closeOnSelect: !footer,
 		defaultValue: defaultValue instanceof Array ? defaultValue.map(dateToCalendarDate) : defaultValue ? [dateToCalendarDate(defaultValue)] : void 0,
 		device,
 		layout,
 		numOfMonths: layout === "2-month" ? 2 : 1,
+		onOpenChange: onOpenChange ? (details) => onOpenChange(details.open) : void 0,
+		open,
 		ref,
 		inline,
 		min: minCalendarDate,

package/dist/components/BitkitCalendar/BitkitCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCalendar.js","names":[],"sources":["../../../lib/components/BitkitCalendar/BitkitCalendar.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { DatePicker } from '../../atoms/DatePicker/DatePicker';\nimport { calendarDateToDate, dateToCalendarDate } from './Calendar.utils';\nimport CalendarContent from './components/CalendarContent';\nimport CalendarTrigger from './components/CalendarTrigger';\n\nexport interface BitkitCalendarProps {\n  children?: ReactNode;\n  defaultValue?: Date | Date[] | null;\n  device?: 'desktop' | 'mobile';\n  layout?: '1-month' | '2-month';\n  max?: Date;\n  min?: Date;\n  onValueChange?: (value: Date[] | null) => void;\n  selectionMode?: 'day' | 'range';\n  showOutsideDays?: boolean;\n  showSelectedDate?: boolean;\n  value?: Date[] | null;\n}\n\nconst BitkitCalendar = forwardRef<HTMLDivElement, BitkitCalendarProps>((props, ref) => {\n  const {\n    children,\n    defaultValue,\n    device = 'desktop',\n    layout,\n    selectionMode = 'range',\n    min,\n    max,\n    onValueChange,\n    showOutsideDays: showOutsideDaysProp = false,\n    showSelectedDate = false,\n    value: inputValue,\n    ...rest\n  } = props;\n\n  const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n  const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n  const value = inputValue?.map(dateToCalendarDate);\n\n  const inline = !children;\n\n  const content = (\n    <CalendarContent\n      layout={layout}\n      max={maxCalendarDate}\n      min={minCalendarDate}\n      selectionMode={selectionMode}\n      showSelectedDate={showSelectedDate}\n    />\n  );\n\n  const showOutsideDays = showOutsideDaysProp ?? layout === '1-month';\n\n  return (\n    <DatePicker.Root\n      defaultValue={\n        defaultValue instanceof Array\n          ? defaultValue.map(dateToCalendarDate)\n          : defaultValue\n            ? [dateToCalendarDate(defaultValue)]\n            : undefined\n      }\n      device={device}\n      layout={layout}\n      numOfMonths={layout === '2-month' ? 2 : 1}\n      ref={ref}\n      inline={inline}\n      min={minCalendarDate}\n      max={maxCalendarDate}\n      onValueChange={\n        onValueChange\n          ? (details) => {\n              const dates = details.value?.map(calendarDateToDate) || null;\n              onValueChange(dates);\n            }\n          : undefined\n      }\n      selectionMode={selectionMode === 'day' ? 'single' : 'range'}\n      showOutsideDays={showOutsideDays}\n      startOfWeek={1}\n      value={value}\n      {...rest}\n    >\n      {!inline && (\n        <DatePicker.Control>\n          <CalendarTrigger>{children}</CalendarTrigger>\n        </DatePicker.Control>\n      )}\n      {inline ? (\n        content\n      ) : (\n        <Portal>\n          <DatePicker.Positioner>{content}</DatePicker.Positioner>\n        </Portal>\n      )}\n    </DatePicker.Root>\n  );\n});\n\nBitkitCalendar.displayName = 'BitkitCalendar';\n\nexport default BitkitCalendar;\n"],"mappings":";;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EACJ,UACA,cACA,SAAS,WACT,QACA,gBAAgB,SAChB,KACA,KACA,eACA,iBAAiB,sBAAsB,OACvC,mBAAmB,OACnB,OAAO,YACP,GAAG,SACD;CAEJ,MAAM,kBAAkB,cAAe,MAAM,mBAAmB,GAAG,IAAI,KAAA,GAAY,CAAC,GAAG,CAAC;CACxF,MAAM,kBAAkB,cAAe,MAAM,mBAAmB,GAAG,IAAI,KAAA,GAAY,CAAC,GAAG,CAAC;CAExF,MAAM,QAAQ,YAAY,IAAI,kBAAkB;CAEhD,MAAM,SAAS,CAAC;CAEhB,MAAM,UACJ,oBAAC,iBAAD;EACU;EACR,KAAK;EACL,KAAK;EACU;EACG;CACnB,CAAA;CAGH,MAAM,kBAAkB,uBAAuB,WAAW;CAE1D,OACE,qBAAC,WAAW,MAAZ;EACE,cACE,wBAAwB,QACpB,aAAa,IAAI,kBAAkB,IACnC,eACE,CAAC,mBAAmB,YAAY,CAAC,IACjC,KAAA;EAEA;EACA;EACR,aAAa,WAAW,YAAY,IAAI;EACnC;EACG;EACR,KAAK;EACL,KAAK;EACL,eACE,iBACK,YAAY;GACX,MAAM,QAAQ,QAAQ,OAAO,IAAI,kBAAkB,KAAK;GACxD,cAAc,KAAK;EACrB,IACA,KAAA;EAEN,eAAe,kBAAkB,QAAQ,WAAW;EACnC;EACjB,aAAa;EACN;EACP,GAAI;EA3BN,UAAA,CA6BG,CAAC,UACA,oBAAC,WAAW,SAAZ,EAAA,UACE,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,EAC1B,CAAA,GAErB,SACC,UAEA,oBAAC,QAAD,EAAA,UACE,oBAAC,WAAW,YAAZ,EAAA,UAAwB,QAA+B,CAAA,EACjD,CAAA,CAEK;;AAErB,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"BitkitCalendar.js","names":[],"sources":["../../../lib/components/BitkitCalendar/BitkitCalendar.tsx"],"sourcesContent":["import { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, type ReactNode, useMemo } from 'react';\n\nimport { DatePicker } from '../../atoms/DatePicker/DatePicker';\nimport { calendarDateToDate, dateToCalendarDate } from './Calendar.utils';\nimport CalendarContent from './components/CalendarContent';\nimport CalendarTrigger from './components/CalendarTrigger';\n\nexport interface BitkitCalendarProps {\n  children?: ReactNode;\n  /** Text for a day's tooltip, e.g. why it can't be picked. Return `undefined` for no tooltip. */\n  dayTooltip?: (date: Date) => string | undefined;\n  defaultValue?: Date | Date[] | null;\n  device?: 'desktop' | 'mobile';\n  /**\n   * Content under the month grid, inside the calendar card — e.g. Clear/Apply buttons that commit\n   * the selection. With a footer, picking a range no longer closes the popover; closing is up to it.\n   */\n  footer?: ReactNode;\n  layout?: '1-month' | '2-month';\n  max?: Date;\n  min?: Date;\n  /** Called when the popover opens or closes. Pair it with `open` to control it. */\n  onOpenChange?: (open: boolean) => void;\n  onValueChange?: (value: Date[] | null) => void;\n  /** Controls whether the popover is open. Only applies with a trigger (`children`). */\n  open?: boolean;\n  selectionMode?: 'day' | 'range';\n  /** Shows the days of the neighbouring months. Defaults to `true` on the `1-month` layout, `false` on `2-month`. */\n  showOutsideDays?: boolean;\n  showSelectedDate?: boolean;\n  value?: Date[] | null;\n}\n\nconst BitkitCalendar = forwardRef<HTMLDivElement, BitkitCalendarProps>((props, ref) => {\n  const {\n    children,\n    dayTooltip,\n    defaultValue,\n    device = 'desktop',\n    footer,\n    layout = '1-month',\n    selectionMode = 'range',\n    min,\n    max,\n    onOpenChange,\n    onValueChange,\n    open,\n    showOutsideDays: showOutsideDaysProp,\n    showSelectedDate = false,\n    value: inputValue,\n    ...rest\n  } = props;\n\n  const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n  const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n  const value = inputValue?.map(dateToCalendarDate);\n\n  const inline = !children;\n\n  const content = (\n    <CalendarContent\n      dayTooltip={dayTooltip}\n      device={device}\n      footer={footer}\n      layout={layout}\n      max={maxCalendarDate}\n      min={minCalendarDate}\n      selectionMode={selectionMode}\n      showSelectedDate={showSelectedDate}\n    />\n  );\n\n  const showOutsideDays = showOutsideDaysProp ?? layout === '1-month';\n\n  return (\n    <DatePicker.Root\n      closeOnSelect={!footer}\n      defaultValue={\n        defaultValue instanceof Array\n          ? defaultValue.map(dateToCalendarDate)\n          : defaultValue\n            ? [dateToCalendarDate(defaultValue)]\n            : undefined\n      }\n      device={device}\n      layout={layout}\n      numOfMonths={layout === '2-month' ? 2 : 1}\n      onOpenChange={onOpenChange ? (details) => onOpenChange(details.open) : undefined}\n      open={open}\n      ref={ref}\n      inline={inline}\n      min={minCalendarDate}\n      max={maxCalendarDate}\n      onValueChange={\n        onValueChange\n          ? (details) => {\n              const dates = details.value?.map(calendarDateToDate) || null;\n              onValueChange(dates);\n            }\n          : undefined\n      }\n      selectionMode={selectionMode === 'day' ? 'single' : 'range'}\n      showOutsideDays={showOutsideDays}\n      startOfWeek={1}\n      value={value}\n      {...rest}\n    >\n      {!inline && (\n        <DatePicker.Control>\n          <CalendarTrigger>{children}</CalendarTrigger>\n        </DatePicker.Control>\n      )}\n      {inline ? (\n        content\n      ) : (\n        <Portal>\n          <DatePicker.Positioner>{content}</DatePicker.Positioner>\n        </Portal>\n      )}\n    </DatePicker.Root>\n  );\n});\n\nBitkitCalendar.displayName = 'BitkitCalendar';\n\nexport default BitkitCalendar;\n"],"mappings":";;;;;;;;AAkCA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EACJ,UACA,YACA,cACA,SAAS,WACT,QACA,SAAS,WACT,gBAAgB,SAChB,KACA,KACA,cACA,eACA,MACA,iBAAiB,qBACjB,mBAAmB,OACnB,OAAO,YACP,GAAG,SACD;CAEJ,MAAM,kBAAkB,cAAe,MAAM,mBAAmB,GAAG,IAAI,KAAA,GAAY,CAAC,GAAG,CAAC;CACxF,MAAM,kBAAkB,cAAe,MAAM,mBAAmB,GAAG,IAAI,KAAA,GAAY,CAAC,GAAG,CAAC;CAExF,MAAM,QAAQ,YAAY,IAAI,kBAAkB;CAEhD,MAAM,SAAS,CAAC;CAEhB,MAAM,UACJ,oBAAC,iBAAD;EACc;EACJ;EACA;EACA;EACR,KAAK;EACL,KAAK;EACU;EACG;CACnB,CAAA;CAGH,MAAM,kBAAkB,uBAAuB,WAAW;CAE1D,OACE,qBAAC,WAAW,MAAZ;EACE,eAAe,CAAC;EAChB,cACE,wBAAwB,QACpB,aAAa,IAAI,kBAAkB,IACnC,eACE,CAAC,mBAAmB,YAAY,CAAC,IACjC,KAAA;EAEA;EACA;EACR,aAAa,WAAW,YAAY,IAAI;EACxC,cAAc,gBAAgB,YAAY,aAAa,QAAQ,IAAI,IAAI,KAAA;EACjE;EACD;EACG;EACR,KAAK;EACL,KAAK;EACL,eACE,iBACK,YAAY;GACX,MAAM,QAAQ,QAAQ,OAAO,IAAI,kBAAkB,KAAK;GACxD,cAAc,KAAK;EACrB,IACA,KAAA;EAEN,eAAe,kBAAkB,QAAQ,WAAW;EACnC;EACjB,aAAa;EACN;EACP,GAAI;EA9BN,UAAA,CAgCG,CAAC,UACA,oBAAC,WAAW,SAAZ,EAAA,UACE,oBAAC,iBAAD,EAAkB,SAA0B,CAAA,EAC1B,CAAA,GAErB,SACC,UAEA,oBAAC,QAAD,EAAA,UACE,oBAAC,WAAW,YAAZ,EAAA,UAAwB,QAA+B,CAAA,EACjD,CAAA,CAEK;;AAErB,CAAC;AAED,eAAe,cAAc"}

package/dist/components/BitkitCalendar/components/CalendarContent.d.ts

@@ -1,5 +1,9 @@
 import { CalendarDate } from '@internationalized/date';
+import { ReactNode } from 'react';
 export interface CalendarContentProps {
+    dayTooltip?: (date: Date) => string | undefined;
+    device?: 'desktop' | 'mobile';
+    footer?: ReactNode;
     layout?: '1-month' | '2-month';
     max?: CalendarDate;
     min?: CalendarDate;
@@ -10,5 +14,5 @@ export interface CalendarContentProps {
  * The styled popover body shared by BitkitCalendar and BitkitDatePicker.
  * Renders the view controls, month grids and footer inside `DatePicker.Content`.
  */
-declare const CalendarContent: ({ layout, max, min, selectionMode, showSelectedDate }: CalendarContentProps) => import('react').JSX.Element;
+declare const CalendarContent: ({ dayTooltip, device, footer, layout, max, min, selectionMode, showSelectedDate, }: CalendarContentProps) => import('react').JSX.Element;
 export default CalendarContent;

package/dist/components/BitkitCalendar/components/CalendarContent.js

@@ -13,7 +13,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * The styled popover body shared by BitkitCalendar and BitkitDatePicker.
 * Renders the view controls, month grids and footer inside `DatePicker.Content`.
 */
-var CalendarContent = ({ layout, max, min, selectionMode, showSelectedDate }) => {
+var CalendarContent = ({ dayTooltip, device, footer, layout, max, min, selectionMode, showSelectedDate }) => {
 	const context = useDatePickerContext();
 	const prevModeRef = useRef(selectionMode);
 	useEffect(() => {
@@ -22,53 +22,70 @@ var CalendarContent = ({ layout, max, min, selectionMode, showSelectedDate }) =>
 			prevModeRef.current = selectionMode;
 		}
 	}, [selectionMode]);
-	return /* @__PURE__ */ jsxs(DatePicker.Content, { children: [/* @__PURE__ */ jsxs(DatePicker.View, {
-		view: "day",
-		children: [/* @__PURE__ */ jsxs(DatePicker.ViewControl, { children: [/* @__PURE__ */ jsxs(Box, {
-			display: "flex",
-			alignItems: "center",
-			gap: "12",
-			children: [
-				/* @__PURE__ */ jsx(CalendarPrevTrigger, {}),
-				/* @__PURE__ */ jsxs(Box, {
-					display: "flex",
-					alignItems: "center",
-					children: [/* @__PURE__ */ jsx(CalendarMonthSelect, {
-						offset: 0,
+	return /* @__PURE__ */ jsxs(DatePicker.Content, { children: [
+		/* @__PURE__ */ jsxs(DatePicker.View, {
+			view: "day",
+			children: [/* @__PURE__ */ jsxs(DatePicker.ViewControl, { children: [/* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				alignItems: "center",
+				gap: "12",
+				minWidth: "0",
+				children: [
+					/* @__PURE__ */ jsx(CalendarPrevTrigger, { device }),
+					/* @__PURE__ */ jsxs(Box, {
+						display: "flex",
+						alignItems: "center",
+						minWidth: "0",
+						children: [/* @__PURE__ */ jsx(CalendarMonthSelect, {
+							device,
+							offset: 0,
+							layout,
+							max,
+							min
+						}), /* @__PURE__ */ jsx(CalendarYearSelect, {
+							device,
+							monthOffset: 0,
+							max,
+							min
+						})]
+					}),
+					layout === "1-month" && /* @__PURE__ */ jsx(CalendarNextTrigger, { device })
+				]
+			}), layout === "2-month" && /* @__PURE__ */ jsxs(Box, {
+				display: "flex",
+				alignItems: "center",
+				gap: "12",
+				minWidth: "0",
+				children: [
+					/* @__PURE__ */ jsx(CalendarMonthSelect, {
+						device,
+						offset: 1,
 						layout,
 						max,
 						min
-					}), /* @__PURE__ */ jsx(CalendarYearSelect, {
-						monthOffset: 0,
+					}),
+					/* @__PURE__ */ jsx(CalendarYearSelect, {
+						device,
+						monthOffset: 1,
 						max,
 						min
-					})]
-				}),
-				layout === "1-month" && /* @__PURE__ */ jsx(CalendarNextTrigger, {})
-			]
-		}), layout === "2-month" && /* @__PURE__ */ jsxs(Box, {
-			display: "flex",
-			alignItems: "center",
-			gap: "12",
-			children: [
-				/* @__PURE__ */ jsx(CalendarMonthSelect, {
-					offset: 1,
-					layout,
-					max,
-					min
-				}),
-				/* @__PURE__ */ jsx(CalendarYearSelect, {
-					monthOffset: 1,
-					max,
-					min
-				}),
-				/* @__PURE__ */ jsx(CalendarNextTrigger, {})
-			]
-		})] }), /* @__PURE__ */ jsxs(DatePicker.Months, { children: [/* @__PURE__ */ jsx(CalendarMonth, { monthsIndex: 0 }), layout === "2-month" && /* @__PURE__ */ jsx(CalendarMonth, { monthsIndex: 1 })] })]
-	}), /* @__PURE__ */ jsx(CalendarFooter, {
-		selectionMode,
-		showSelectedDate
-	})] });
+					}),
+					/* @__PURE__ */ jsx(CalendarNextTrigger, { device })
+				]
+			})] }), /* @__PURE__ */ jsxs(DatePicker.Months, { children: [/* @__PURE__ */ jsx(CalendarMonth, {
+				dayTooltip,
+				monthsIndex: 0
+			}), layout === "2-month" && /* @__PURE__ */ jsx(CalendarMonth, {
+				dayTooltip,
+				monthsIndex: 1
+			})] })]
+		}),
+		/* @__PURE__ */ jsx(CalendarFooter, {
+			selectionMode,
+			showSelectedDate
+		}),
+		footer
+	] });
 };
 //#endregion
 export { CalendarContent as default };

package/dist/components/BitkitCalendar/components/CalendarContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarContent.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarContent.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type CalendarDate } from '@internationalized/date';\nimport { useEffect, useRef } from 'react';\n\nimport { DatePicker, useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport CalendarFooter from './CalendarFooter';\nimport CalendarMonth from './CalendarMonth';\nimport CalendarMonthSelect from './CalendarMonthSelect';\nimport CalendarNextTrigger from './CalendarNextTrigger';\nimport CalendarPrevTrigger from './CalendarPrevTrigger';\nimport CalendarYearSelect from './CalendarYearSelect';\n\nexport interface CalendarContentProps {\n  layout?: '1-month' | '2-month';\n  max?: CalendarDate;\n  min?: CalendarDate;\n  selectionMode?: 'day' | 'range';\n  showSelectedDate?: boolean;\n}\n\n/**\n * The styled popover body shared by BitkitCalendar and BitkitDatePicker.\n * Renders the view controls, month grids and footer inside `DatePicker.Content`.\n */\nconst CalendarContent = ({ layout, max, min, selectionMode, showSelectedDate }: CalendarContentProps) => {\n  const context = useDatePickerContext();\n  const prevModeRef = useRef(selectionMode);\n\n  useEffect(() => {\n    if (prevModeRef.current !== selectionMode) {\n      context.clearValue();\n      prevModeRef.current = selectionMode;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectionMode]);\n\n  return (\n    <DatePicker.Content>\n      <DatePicker.View view=\"day\">\n        <DatePicker.ViewControl>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"12\">\n            <CalendarPrevTrigger />\n\n            <Box display=\"flex\" alignItems=\"center\">\n              <CalendarMonthSelect offset={0} layout={layout} max={max} min={min} />\n              <CalendarYearSelect monthOffset={0} max={max} min={min} />\n            </Box>\n            {layout === '1-month' && <CalendarNextTrigger />}\n          </Box>\n          {layout === '2-month' && (\n            <Box display=\"flex\" alignItems=\"center\" gap=\"12\">\n              <CalendarMonthSelect offset={1} layout={layout} max={max} min={min} />\n              <CalendarYearSelect monthOffset={1} max={max} min={min} />\n              <CalendarNextTrigger />\n            </Box>\n          )}\n        </DatePicker.ViewControl>\n        <DatePicker.Months>\n          <CalendarMonth monthsIndex={0} />\n          {layout === '2-month' && <CalendarMonth monthsIndex={1} />}\n        </DatePicker.Months>\n      </DatePicker.View>\n      <CalendarFooter selectionMode={selectionMode} showSelectedDate={showSelectedDate} />\n    </DatePicker.Content>\n  );\n};\n\nexport default CalendarContent;\n"],"mappings":";;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,EAAE,QAAQ,KAAK,KAAK,eAAe,uBAA6C;CACvG,MAAM,UAAU,qBAAqB;CACrC,MAAM,cAAc,OAAO,aAAa;CAExC,gBAAgB;EACd,IAAI,YAAY,YAAY,eAAe;GACzC,QAAQ,WAAW;GACnB,YAAY,UAAU;EACxB;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,qBAAC,WAAW,SAAZ,EAAA,UAAA,CACE,qBAAC,WAAW,MAAZ;EAAiB,MAAK;EAAtB,UAAA,CACE,qBAAC,WAAW,aAAZ,EAAA,UAAA,CACE,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAA5C,UAAA;IACE,oBAAC,qBAAD,CAAsB,CAAA;IAEtB,qBAAC,KAAD;KAAK,SAAQ;KAAO,YAAW;KAA/B,UAAA,CACE,oBAAC,qBAAD;MAAqB,QAAQ;MAAW;MAAa;MAAU;KAAM,CAAA,GACrE,oBAAC,oBAAD;MAAoB,aAAa;MAAQ;MAAU;KAAM,CAAA,CACtD;;IACJ,WAAW,aAAa,oBAAC,qBAAD,CAAsB,CAAA;GAC5C;EACJ,CAAA,GAAA,WAAW,aACV,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;GAA5C,UAAA;IACE,oBAAC,qBAAD;KAAqB,QAAQ;KAAW;KAAa;KAAU;IAAM,CAAA;IACrE,oBAAC,oBAAD;KAAoB,aAAa;KAAQ;KAAU;IAAM,CAAA;IACzD,oBAAC,qBAAD,CAAsB,CAAA;GACnB;EAEe,CAAA,CAAA,EAAA,CAAA,GACxB,qBAAC,WAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,eAAD,EAAe,aAAa,EAAI,CAAA,GAC/B,WAAW,aAAa,oBAAC,eAAD,EAAe,aAAa,EAAI,CAAA,CACxC,EAAA,CAAA,CACJ;CACjB,CAAA,GAAA,oBAAC,gBAAD;EAA+B;EAAiC;CAAmB,CAAA,CACjE,EAAA,CAAA;AAExB"}
+{"version":3,"file":"CalendarContent.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarContent.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type CalendarDate } from '@internationalized/date';\nimport { type ReactNode, useEffect, useRef } from 'react';\n\nimport { DatePicker, useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport CalendarFooter from './CalendarFooter';\nimport CalendarMonth from './CalendarMonth';\nimport CalendarMonthSelect from './CalendarMonthSelect';\nimport CalendarNextTrigger from './CalendarNextTrigger';\nimport CalendarPrevTrigger from './CalendarPrevTrigger';\nimport CalendarYearSelect from './CalendarYearSelect';\n\nexport interface CalendarContentProps {\n  dayTooltip?: (date: Date) => string | undefined;\n  device?: 'desktop' | 'mobile';\n  footer?: ReactNode;\n  layout?: '1-month' | '2-month';\n  max?: CalendarDate;\n  min?: CalendarDate;\n  selectionMode?: 'day' | 'range';\n  showSelectedDate?: boolean;\n}\n\n/**\n * The styled popover body shared by BitkitCalendar and BitkitDatePicker.\n * Renders the view controls, month grids and footer inside `DatePicker.Content`.\n */\nconst CalendarContent = ({\n  dayTooltip,\n  device,\n  footer,\n  layout,\n  max,\n  min,\n  selectionMode,\n  showSelectedDate,\n}: CalendarContentProps) => {\n  const context = useDatePickerContext();\n  const prevModeRef = useRef(selectionMode);\n\n  useEffect(() => {\n    if (prevModeRef.current !== selectionMode) {\n      context.clearValue();\n      prevModeRef.current = selectionMode;\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectionMode]);\n\n  return (\n    <DatePicker.Content>\n      <DatePicker.View view=\"day\">\n        <DatePicker.ViewControl>\n          <Box display=\"flex\" alignItems=\"center\" gap=\"12\" minWidth=\"0\">\n            <CalendarPrevTrigger device={device} />\n\n            <Box display=\"flex\" alignItems=\"center\" minWidth=\"0\">\n              <CalendarMonthSelect device={device} offset={0} layout={layout} max={max} min={min} />\n              <CalendarYearSelect device={device} monthOffset={0} max={max} min={min} />\n            </Box>\n            {layout === '1-month' && <CalendarNextTrigger device={device} />}\n          </Box>\n          {layout === '2-month' && (\n            <Box display=\"flex\" alignItems=\"center\" gap=\"12\" minWidth=\"0\">\n              <CalendarMonthSelect device={device} offset={1} layout={layout} max={max} min={min} />\n              <CalendarYearSelect device={device} monthOffset={1} max={max} min={min} />\n              <CalendarNextTrigger device={device} />\n            </Box>\n          )}\n        </DatePicker.ViewControl>\n        <DatePicker.Months>\n          <CalendarMonth dayTooltip={dayTooltip} monthsIndex={0} />\n          {layout === '2-month' && <CalendarMonth dayTooltip={dayTooltip} monthsIndex={1} />}\n        </DatePicker.Months>\n      </DatePicker.View>\n      <CalendarFooter selectionMode={selectionMode} showSelectedDate={showSelectedDate} />\n      {footer}\n    </DatePicker.Content>\n  );\n};\n\nexport default CalendarContent;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAM,mBAAmB,EACvB,YACA,QACA,QACA,QACA,KACA,KACA,eACA,uBAC0B;CAC1B,MAAM,UAAU,qBAAqB;CACrC,MAAM,cAAc,OAAO,aAAa;CAExC,gBAAgB;EACd,IAAI,YAAY,YAAY,eAAe;GACzC,QAAQ,WAAW;GACnB,YAAY,UAAU;EACxB;CAEF,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,qBAAC,WAAW,SAAZ,EAAA,UAAA;EACE,qBAAC,WAAW,MAAZ;GAAiB,MAAK;GAAtB,UAAA,CACE,qBAAC,WAAW,aAAZ,EAAA,UAAA,CACE,qBAAC,KAAD;IAAK,SAAQ;IAAO,YAAW;IAAS,KAAI;IAAK,UAAS;IAA1D,UAAA;KACE,oBAAC,qBAAD,EAA6B,OAAS,CAAA;KAEtC,qBAAC,KAAD;MAAK,SAAQ;MAAO,YAAW;MAAS,UAAS;MAAjD,UAAA,CACE,oBAAC,qBAAD;OAA6B;OAAQ,QAAQ;OAAW;OAAa;OAAU;MAAM,CAAA,GACrF,oBAAC,oBAAD;OAA4B;OAAQ,aAAa;OAAQ;OAAU;MAAM,CAAA,CACtE;;KACJ,WAAW,aAAa,oBAAC,qBAAD,EAA6B,OAAS,CAAA;IAC5D;GACJ,CAAA,GAAA,WAAW,aACV,qBAAC,KAAD;IAAK,SAAQ;IAAO,YAAW;IAAS,KAAI;IAAK,UAAS;IAA1D,UAAA;KACE,oBAAC,qBAAD;MAA6B;MAAQ,QAAQ;MAAW;MAAa;MAAU;KAAM,CAAA;KACrF,oBAAC,oBAAD;MAA4B;MAAQ,aAAa;MAAQ;MAAU;KAAM,CAAA;KACzE,oBAAC,qBAAD,EAA6B,OAAS,CAAA;IACnC;GAEe,CAAA,CAAA,EAAA,CAAA,GACxB,qBAAC,WAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,eAAD;IAA2B;IAAY,aAAa;GAAI,CAAA,GACvD,WAAW,aAAa,oBAAC,eAAD;IAA2B;IAAY,aAAa;GAAI,CAAA,CAChE,EAAA,CAAA,CACJ;;EACjB,oBAAC,gBAAD;GAA+B;GAAiC;EAAmB,CAAA;EAClF;CACiB,EAAA,CAAA;AAExB"}

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

@@ -1,4 +1,6 @@
-declare const CalendarMonth: ({ monthsIndex }: {
+interface CalendarMonthProps {
+    dayTooltip?: (date: Date) => string | undefined;
     monthsIndex: number;
-}) => import('react').JSX.Element;
+}
+declare const CalendarMonth: ({ dayTooltip, monthsIndex }: CalendarMonthProps) => import('react').JSX.Element;
 export default CalendarMonth;

package/dist/components/BitkitCalendar/components/CalendarMonth.js

@@ -1,18 +1,28 @@
 import { DatePicker, DatePickerContext } from "../../../atoms/DatePicker/DatePicker.js";
+import { calendarDateToDate } from "../Calendar.utils.js";
+import BitkitTooltip from "../../BitkitTooltip/BitkitTooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Text } from "@chakra-ui/react/text";
 //#region lib/components/BitkitCalendar/components/CalendarMonth.tsx
-var CalendarMonth = ({ monthsIndex }) => {
+var CalendarMonth = ({ dayTooltip, monthsIndex }) => {
 	return /* @__PURE__ */ jsx(DatePickerContext, { children: (datePicker) => {
 		const offset = datePicker.getOffset({ months: monthsIndex });
 		return /* @__PURE__ */ jsxs(DatePicker.Table, { children: [/* @__PURE__ */ jsx(DatePicker.TableHead, { children: /* @__PURE__ */ jsx(DatePicker.TableRow, { children: datePicker.weekDays.map((weekDay, id) => /* @__PURE__ */ jsx(DatePicker.TableHeader, { children: weekDay.short }, id)) }) }), /* @__PURE__ */ jsx(DatePicker.TableBody, { children: offset.weeks.map((week, id) => /* @__PURE__ */ jsx(DatePicker.TableRow, { children: week.map((day, id) => {
+			const tooltip = dayTooltip?.(calendarDateToDate(day));
+			const label = /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				children: day.day
+			});
 			return /* @__PURE__ */ jsx(DatePicker.TableCell, {
 				value: day,
 				visibleRange: offset.visibleRange,
-				children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, { children: /* @__PURE__ */ jsx(Text, {
-					as: "span",
-					children: day.day
-				}) })
+				children: /* @__PURE__ */ jsx(DatePicker.TableCellTrigger, {
+					...tooltip ? { "aria-description": tooltip } : {},
+					children: tooltip ? /* @__PURE__ */ jsx(BitkitTooltip, {
+						text: tooltip,
+						children: label
+					}) : label
+				})
 			}, id);
 		}) }, id)) })] });
 	} });

package/dist/components/BitkitCalendar/components/CalendarMonth.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonth.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarMonth.tsx"],"sourcesContent":["import { Text } from '@chakra-ui/react/text';\n\nimport { DatePicker, DatePickerContext } from '../../../atoms/DatePicker/DatePicker';\n\nconst CalendarMonth = ({ monthsIndex }: { monthsIndex: number }) => {\n  return (\n    <DatePickerContext>\n      {(datePicker) => {\n        const offset = datePicker.getOffset({ months: monthsIndex });\n        return (\n          <DatePicker.Table>\n            <DatePicker.TableHead>\n              <DatePicker.TableRow>\n                {datePicker.weekDays.map((weekDay, id) => (\n                  <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>\n                ))}\n              </DatePicker.TableRow>\n            </DatePicker.TableHead>\n            <DatePicker.TableBody>\n              {offset.weeks.map((week, id) => (\n                <DatePicker.TableRow key={id}>\n                  {week.map((day, id) => {\n                    return (\n                      <DatePicker.TableCell key={id} value={day} visibleRange={offset.visibleRange}>\n                        <DatePicker.TableCellTrigger>\n                          <Text as=\"span\">{day.day}</Text>\n                        </DatePicker.TableCellTrigger>\n                      </DatePicker.TableCell>\n                    );\n                  })}\n                </DatePicker.TableRow>\n              ))}\n            </DatePicker.TableBody>\n          </DatePicker.Table>\n        );\n      }}\n    </DatePickerContext>\n  );\n};\n\nexport default CalendarMonth;\n"],"mappings":";;;;AAIA,IAAM,iBAAiB,EAAE,kBAA2C;CAClE,OACE,oBAAC,mBAAD,EAAA,WACI,eAAe;EACf,MAAM,SAAS,WAAW,UAAU,EAAE,QAAQ,YAAY,CAAC;EAC3D,OACE,qBAAC,WAAW,OAAZ,EAAA,UAAA,CACE,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,WAAW,UAAZ,EAAA,UACG,WAAW,SAAS,KAAK,SAAS,OACjC,oBAAC,WAAW,aAAZ,EAAA,UAAkC,QAAQ,MAA8B,GAA3C,EAA2C,CACzE,EACkB,CAAA,EACD,CAAA,GACtB,oBAAC,WAAW,WAAZ,EAAA,UACG,OAAO,MAAM,KAAK,MAAM,OACvB,oBAAC,WAAW,UAAZ,EAAA,UACG,KAAK,KAAK,KAAK,OAAO;GACrB,OACE,oBAAC,WAAW,WAAZ;IAA+B,OAAO;IAAK,cAAc,OAAO;IAC9D,UAAA,oBAAC,WAAW,kBAAZ,EAAA,UACE,oBAAC,MAAD;KAAM,IAAG;KAAQ,UAAA,IAAI;IAAU,CAAA,EACJ,CAAA;GACT,GAJK,EAIL;EAE1B,CAAC,EACkB,GAVK,EAUL,CACtB,EACmB,CAAA,CACN,EAAA,CAAA;CAEtB,EACiB,CAAA;AAEvB"}
+{"version":3,"file":"CalendarMonth.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarMonth.tsx"],"sourcesContent":["import { Text } from '@chakra-ui/react/text';\n\nimport { DatePicker, DatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport BitkitTooltip from '../../BitkitTooltip/BitkitTooltip';\nimport { calendarDateToDate } from '../Calendar.utils';\n\ninterface CalendarMonthProps {\n  dayTooltip?: (date: Date) => string | undefined;\n  monthsIndex: number;\n}\n\nconst CalendarMonth = ({ dayTooltip, monthsIndex }: CalendarMonthProps) => {\n  return (\n    <DatePickerContext>\n      {(datePicker) => {\n        const offset = datePicker.getOffset({ months: monthsIndex });\n        return (\n          <DatePicker.Table>\n            <DatePicker.TableHead>\n              <DatePicker.TableRow>\n                {datePicker.weekDays.map((weekDay, id) => (\n                  <DatePicker.TableHeader key={id}>{weekDay.short}</DatePicker.TableHeader>\n                ))}\n              </DatePicker.TableRow>\n            </DatePicker.TableHead>\n            <DatePicker.TableBody>\n              {offset.weeks.map((week, id) => (\n                <DatePicker.TableRow key={id}>\n                  {week.map((day, id) => {\n                    const tooltip = dayTooltip?.(calendarDateToDate(day));\n                    const label = <Text as=\"span\">{day.day}</Text>;\n                    // The tooltip sits on the day's inner box, not the cell: as the cell's trigger it would\n                    // replace the id and data attributes Zag finds the focused day by. An unavailable day never\n                    // takes focus, so the text is also the cell's description, next to Zag's own label.\n                    return (\n                      <DatePicker.TableCell key={id} value={day} visibleRange={offset.visibleRange}>\n                        <DatePicker.TableCellTrigger {...(tooltip ? { 'aria-description': tooltip } : {})}>\n                          {tooltip ? <BitkitTooltip text={tooltip}>{label}</BitkitTooltip> : label}\n                        </DatePicker.TableCellTrigger>\n                      </DatePicker.TableCell>\n                    );\n                  })}\n                </DatePicker.TableRow>\n              ))}\n            </DatePicker.TableBody>\n          </DatePicker.Table>\n        );\n      }}\n    </DatePickerContext>\n  );\n};\n\nexport default CalendarMonth;\n"],"mappings":";;;;;;AAWA,IAAM,iBAAiB,EAAE,YAAY,kBAAsC;CACzE,OACE,oBAAC,mBAAD,EAAA,WACI,eAAe;EACf,MAAM,SAAS,WAAW,UAAU,EAAE,QAAQ,YAAY,CAAC;EAC3D,OACE,qBAAC,WAAW,OAAZ,EAAA,UAAA,CACE,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,WAAW,UAAZ,EAAA,UACG,WAAW,SAAS,KAAK,SAAS,OACjC,oBAAC,WAAW,aAAZ,EAAA,UAAkC,QAAQ,MAA8B,GAA3C,EAA2C,CACzE,EACkB,CAAA,EACD,CAAA,GACtB,oBAAC,WAAW,WAAZ,EAAA,UACG,OAAO,MAAM,KAAK,MAAM,OACvB,oBAAC,WAAW,UAAZ,EAAA,UACG,KAAK,KAAK,KAAK,OAAO;GACrB,MAAM,UAAU,aAAa,mBAAmB,GAAG,CAAC;GACpD,MAAM,QAAQ,oBAAC,MAAD;IAAM,IAAG;IAAQ,UAAA,IAAI;GAAU,CAAA;GAI7C,OACE,oBAAC,WAAW,WAAZ;IAA+B,OAAO;IAAK,cAAc,OAAO;IAC9D,UAAA,oBAAC,WAAW,kBAAZ;KAA6B,GAAK,UAAU,EAAE,oBAAoB,QAAQ,IAAI,CAAC;KAC5E,UAAA,UAAU,oBAAC,eAAD;MAAe,MAAM;MAAU,UAAA;KAAqB,CAAA,IAAI;IACxC,CAAA;GACT,GAJK,EAIL;EAE1B,CAAC,EACkB,GAfK,EAeL,CACtB,EACmB,CAAA,CACN,EAAA,CAAA;CAEtB,EACiB,CAAA;AAEvB"}

package/dist/components/BitkitCalendar/components/CalendarMonthSelect.d.ts

@@ -1,9 +1,10 @@
 import { CalendarDate } from '@internationalized/date';
 type CalendarMonthSelectProps = {
+    device?: 'desktop' | 'mobile';
     offset: number;
     layout?: '1-month' | '2-month';
     min?: CalendarDate;
     max?: CalendarDate;
 };
-declare const CalendarMonthSelect: ({ offset, layout, min, max }: CalendarMonthSelectProps) => import('react').JSX.Element;
+declare const CalendarMonthSelect: ({ device, offset, layout, min, max }: CalendarMonthSelectProps) => import('react').JSX.Element;
 export default CalendarMonthSelect;

package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js

@@ -54,7 +54,7 @@ var months = [
 		value: "12"
 	}
 ];
-var CalendarMonthSelect = ({ offset, layout, min, max }) => {
+var CalendarMonthSelect = ({ device, offset, layout, min, max }) => {
 	const datePicker = useDatePickerContext();
 	const currentMonthDate = datePicker.getOffset({ months: offset }).visibleRange.start;
 	const availableMonths = months.filter((month) => {
@@ -80,7 +80,8 @@ var CalendarMonthSelect = ({ offset, layout, min, max }) => {
 			maxHeight: rem(312),
 			width: rem(148)
 		},
-		controlProps: { width: rem(114) },
+		controlProps: { width: rem(device === "mobile" ? 132 : 114) },
+		device,
 		items: availableMonths,
 		onValueChange: handleMonthChange,
 		value: [currentMonthDate.month.toString()]

package/dist/components/BitkitCalendar/components/CalendarMonthSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonthSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarMonthSelect.tsx"],"sourcesContent":["import { CalendarDate } from '@internationalized/date';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { rem } from '../../../theme/themeUtils';\nimport CalendarSelect from './CalendarSelect';\n\nconst months = [\n  { label: 'January', value: '1' },\n  { label: 'February', value: '2' },\n  { label: 'March', value: '3' },\n  { label: 'April', value: '4' },\n  { label: 'May', value: '5' },\n  { label: 'June', value: '6' },\n  { label: 'July', value: '7' },\n  { label: 'August', value: '8' },\n  { label: 'September', value: '9' },\n  { label: 'October', value: '10' },\n  { label: 'November', value: '11' },\n  { label: 'December', value: '12' },\n];\n\ntype CalendarMonthSelectProps = {\n  offset: number;\n  layout?: '1-month' | '2-month';\n  min?: CalendarDate;\n  max?: CalendarDate;\n};\n\nconst CalendarMonthSelect = ({ offset, layout, min, max }: CalendarMonthSelectProps) => {\n  const datePicker = useDatePickerContext();\n\n  const currentMonthDate = datePicker.getOffset({ months: offset }).visibleRange.start;\n\n  const availableMonths = months.filter((month) => {\n    if (!min && !max) return true;\n\n    const monthNumber = parseInt(month.value, 10);\n    const year = currentMonthDate.year;\n\n    const firstDayOfMonth = new CalendarDate(year, monthNumber, 1);\n    const lastDayOfMonth = firstDayOfMonth.add({ months: 1 }).subtract({ days: 1 });\n\n    const isBeforeMin = min && lastDayOfMonth.compare(min) < 0;\n    const isAfterMax = max && firstDayOfMonth.compare(max) > 0;\n\n    return !isBeforeMin && !isAfterMax;\n  });\n\n  const handleMonthChange = (details: { value: string[] }) => {\n    const selectedMonth = parseInt(details.value[0], 10);\n    if (layout === '1-month') {\n      datePicker.focusMonth(selectedMonth);\n    } else {\n      // first needs to be focused to some distant date otherwise the newly selected month won't always be set properly\n      // due to \"smart\" focus behaviour of the calendar in 2-month layout\n      datePicker.setFocusedValue(new CalendarDate(1990, 1, 1));\n      datePicker.setFocusedValue(currentMonthDate.set({ month: selectedMonth }).subtract({ months: offset }));\n    }\n  };\n\n  return (\n    <CalendarSelect\n      contentProps={{\n        maxHeight: rem(312),\n        width: rem(148),\n      }}\n      controlProps={{\n        width: rem(114),\n      }}\n      items={availableMonths}\n      onValueChange={handleMonthChange}\n      value={[currentMonthDate.month.toString()]}\n    />\n  );\n};\n\nexport default CalendarMonthSelect;\n"],"mappings":";;;;;;AAMA,IAAM,SAAS;CACb;EAAE,OAAO;EAAW,OAAO;CAAI;CAC/B;EAAE,OAAO;EAAY,OAAO;CAAI;CAChC;EAAE,OAAO;EAAS,OAAO;CAAI;CAC7B;EAAE,OAAO;EAAS,OAAO;CAAI;CAC7B;EAAE,OAAO;EAAO,OAAO;CAAI;CAC3B;EAAE,OAAO;EAAQ,OAAO;CAAI;CAC5B;EAAE,OAAO;EAAQ,OAAO;CAAI;CAC5B;EAAE,OAAO;EAAU,OAAO;CAAI;CAC9B;EAAE,OAAO;EAAa,OAAO;CAAI;CACjC;EAAE,OAAO;EAAW,OAAO;CAAK;CAChC;EAAE,OAAO;EAAY,OAAO;CAAK;CACjC;EAAE,OAAO;EAAY,OAAO;CAAK;AACnC;AASA,IAAM,uBAAuB,EAAE,QAAQ,QAAQ,KAAK,UAAoC;CACtF,MAAM,aAAa,qBAAqB;CAExC,MAAM,mBAAmB,WAAW,UAAU,EAAE,QAAQ,OAAO,CAAC,CAAC,CAAC,aAAa;CAE/E,MAAM,kBAAkB,OAAO,QAAQ,UAAU;EAC/C,IAAI,CAAC,OAAO,CAAC,KAAK,OAAO;EAEzB,MAAM,cAAc,SAAS,MAAM,OAAO,EAAE;EAC5C,MAAM,OAAO,iBAAiB;EAE9B,MAAM,kBAAkB,IAAI,aAAa,MAAM,aAAa,CAAC;EAC7D,MAAM,iBAAiB,gBAAgB,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;EAE9E,MAAM,cAAc,OAAO,eAAe,QAAQ,GAAG,IAAI;EACzD,MAAM,aAAa,OAAO,gBAAgB,QAAQ,GAAG,IAAI;EAEzD,OAAO,CAAC,eAAe,CAAC;CAC1B,CAAC;CAED,MAAM,qBAAqB,YAAiC;EAC1D,MAAM,gBAAgB,SAAS,QAAQ,MAAM,IAAI,EAAE;EACnD,IAAI,WAAW,WACb,WAAW,WAAW,aAAa;OAC9B;GAGL,WAAW,gBAAgB,IAAI,aAAa,MAAM,GAAG,CAAC,CAAC;GACvD,WAAW,gBAAgB,iBAAiB,IAAI,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,OAAO,CAAC,CAAC;EACxG;CACF;CAEA,OACE,oBAAC,gBAAD;EACE,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,OAAO,IAAI,GAAG;EAChB;EACA,cAAc,EACZ,OAAO,IAAI,GAAG,EAChB;EACA,OAAO;EACP,eAAe;EACf,OAAO,CAAC,iBAAiB,MAAM,SAAS,CAAC;CAC1C,CAAA;AAEL"}
+{"version":3,"file":"CalendarMonthSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarMonthSelect.tsx"],"sourcesContent":["import { CalendarDate } from '@internationalized/date';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { rem } from '../../../theme/themeUtils';\nimport CalendarSelect from './CalendarSelect';\n\nconst months = [\n  { label: 'January', value: '1' },\n  { label: 'February', value: '2' },\n  { label: 'March', value: '3' },\n  { label: 'April', value: '4' },\n  { label: 'May', value: '5' },\n  { label: 'June', value: '6' },\n  { label: 'July', value: '7' },\n  { label: 'August', value: '8' },\n  { label: 'September', value: '9' },\n  { label: 'October', value: '10' },\n  { label: 'November', value: '11' },\n  { label: 'December', value: '12' },\n];\n\ntype CalendarMonthSelectProps = {\n  device?: 'desktop' | 'mobile';\n  offset: number;\n  layout?: '1-month' | '2-month';\n  min?: CalendarDate;\n  max?: CalendarDate;\n};\n\nconst CalendarMonthSelect = ({ device, offset, layout, min, max }: CalendarMonthSelectProps) => {\n  const datePicker = useDatePickerContext();\n\n  const currentMonthDate = datePicker.getOffset({ months: offset }).visibleRange.start;\n\n  const availableMonths = months.filter((month) => {\n    if (!min && !max) return true;\n\n    const monthNumber = parseInt(month.value, 10);\n    const year = currentMonthDate.year;\n\n    const firstDayOfMonth = new CalendarDate(year, monthNumber, 1);\n    const lastDayOfMonth = firstDayOfMonth.add({ months: 1 }).subtract({ days: 1 });\n\n    const isBeforeMin = min && lastDayOfMonth.compare(min) < 0;\n    const isAfterMax = max && firstDayOfMonth.compare(max) > 0;\n\n    return !isBeforeMin && !isAfterMax;\n  });\n\n  const handleMonthChange = (details: { value: string[] }) => {\n    const selectedMonth = parseInt(details.value[0], 10);\n    if (layout === '1-month') {\n      datePicker.focusMonth(selectedMonth);\n    } else {\n      // first needs to be focused to some distant date otherwise the newly selected month won't always be set properly\n      // due to \"smart\" focus behaviour of the calendar in 2-month layout\n      datePicker.setFocusedValue(new CalendarDate(1990, 1, 1));\n      datePicker.setFocusedValue(currentMonthDate.set({ month: selectedMonth }).subtract({ months: offset }));\n    }\n  };\n\n  return (\n    <CalendarSelect\n      contentProps={{\n        maxHeight: rem(312),\n        width: rem(148),\n      }}\n      controlProps={{\n        width: rem(device === 'mobile' ? 132 : 114),\n      }}\n      device={device}\n      items={availableMonths}\n      onValueChange={handleMonthChange}\n      value={[currentMonthDate.month.toString()]}\n    />\n  );\n};\n\nexport default CalendarMonthSelect;\n"],"mappings":";;;;;;AAMA,IAAM,SAAS;CACb;EAAE,OAAO;EAAW,OAAO;CAAI;CAC/B;EAAE,OAAO;EAAY,OAAO;CAAI;CAChC;EAAE,OAAO;EAAS,OAAO;CAAI;CAC7B;EAAE,OAAO;EAAS,OAAO;CAAI;CAC7B;EAAE,OAAO;EAAO,OAAO;CAAI;CAC3B;EAAE,OAAO;EAAQ,OAAO;CAAI;CAC5B;EAAE,OAAO;EAAQ,OAAO;CAAI;CAC5B;EAAE,OAAO;EAAU,OAAO;CAAI;CAC9B;EAAE,OAAO;EAAa,OAAO;CAAI;CACjC;EAAE,OAAO;EAAW,OAAO;CAAK;CAChC;EAAE,OAAO;EAAY,OAAO;CAAK;CACjC;EAAE,OAAO;EAAY,OAAO;CAAK;AACnC;AAUA,IAAM,uBAAuB,EAAE,QAAQ,QAAQ,QAAQ,KAAK,UAAoC;CAC9F,MAAM,aAAa,qBAAqB;CAExC,MAAM,mBAAmB,WAAW,UAAU,EAAE,QAAQ,OAAO,CAAC,CAAC,CAAC,aAAa;CAE/E,MAAM,kBAAkB,OAAO,QAAQ,UAAU;EAC/C,IAAI,CAAC,OAAO,CAAC,KAAK,OAAO;EAEzB,MAAM,cAAc,SAAS,MAAM,OAAO,EAAE;EAC5C,MAAM,OAAO,iBAAiB;EAE9B,MAAM,kBAAkB,IAAI,aAAa,MAAM,aAAa,CAAC;EAC7D,MAAM,iBAAiB,gBAAgB,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;EAE9E,MAAM,cAAc,OAAO,eAAe,QAAQ,GAAG,IAAI;EACzD,MAAM,aAAa,OAAO,gBAAgB,QAAQ,GAAG,IAAI;EAEzD,OAAO,CAAC,eAAe,CAAC;CAC1B,CAAC;CAED,MAAM,qBAAqB,YAAiC;EAC1D,MAAM,gBAAgB,SAAS,QAAQ,MAAM,IAAI,EAAE;EACnD,IAAI,WAAW,WACb,WAAW,WAAW,aAAa;OAC9B;GAGL,WAAW,gBAAgB,IAAI,aAAa,MAAM,GAAG,CAAC,CAAC;GACvD,WAAW,gBAAgB,iBAAiB,IAAI,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,OAAO,CAAC,CAAC;EACxG;CACF;CAEA,OACE,oBAAC,gBAAD;EACE,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,OAAO,IAAI,GAAG;EAChB;EACA,cAAc,EACZ,OAAO,IAAI,WAAW,WAAW,MAAM,GAAG,EAC5C;EACQ;EACR,OAAO;EACP,eAAe;EACf,OAAO,CAAC,iBAAiB,MAAM,SAAS,CAAC;CAC1C,CAAA;AAEL"}

package/dist/components/BitkitCalendar/components/CalendarNextTrigger.d.ts

@@ -1,2 +1,4 @@
-declare const CalendarNextTrigger: () => import('react').JSX.Element;
+declare const CalendarNextTrigger: ({ device }: {
+    device?: "desktop" | "mobile";
+}) => import('react').JSX.Element;
 export default CalendarNextTrigger;

package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js

@@ -3,14 +3,14 @@ import { useDatePickerContext } from "../../../atoms/DatePicker/DatePicker.js";
 import { jsx } from "react/jsx-runtime";
 import { IconButton } from "@chakra-ui/react";
 //#region lib/components/BitkitCalendar/components/CalendarNextTrigger.tsx
-var CalendarNextTrigger = () => {
+var CalendarNextTrigger = ({ device }) => {
 	const datePicker = useDatePickerContext();
 	return /* @__PURE__ */ jsx(IconButton, {
 		...datePicker.getNextTriggerProps(),
 		color: "button/secondary/text",
-		size: "sm",
+		size: device === "mobile" ? "md" : "sm",
 		variant: "tertiary",
-		children: /* @__PURE__ */ jsx(IconChevronRight, { size: "16" })
+		children: /* @__PURE__ */ jsx(IconChevronRight, { size: device === "mobile" ? "24" : "16" })
 	});
 };
 //#endregion

package/dist/components/BitkitCalendar/components/CalendarNextTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarNextTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarNextTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronRight } from '../../../main';\n\nconst CalendarNextTrigger = () => {\n  const datePicker = useDatePickerContext();\n\n  return (\n    <IconButton {...datePicker.getNextTriggerProps()} color=\"button/secondary/text\" size=\"sm\" variant=\"tertiary\">\n      <IconChevronRight size=\"16\" />\n    </IconButton>\n  );\n};\n\nexport default CalendarNextTrigger;\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B;CAChC,MAAM,aAAa,qBAAqB;CAExC,OACE,oBAAC,YAAD;EAAY,GAAI,WAAW,oBAAoB;EAAG,OAAM;EAAwB,MAAK;EAAK,SAAQ;EAChG,UAAA,oBAAC,kBAAD,EAAkB,MAAK,KAAM,CAAA;CACnB,CAAA;AAEhB"}
+{"version":3,"file":"CalendarNextTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarNextTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronRight } from '../../../main';\n\nconst CalendarNextTrigger = ({ device }: { device?: 'desktop' | 'mobile' }) => {\n  const datePicker = useDatePickerContext();\n\n  return (\n    <IconButton\n      {...datePicker.getNextTriggerProps()}\n      color=\"button/secondary/text\"\n      size={device === 'mobile' ? 'md' : 'sm'}\n      variant=\"tertiary\"\n    >\n      <IconChevronRight size={device === 'mobile' ? '24' : '16'} />\n    </IconButton>\n  );\n};\n\nexport default CalendarNextTrigger;\n"],"mappings":";;;;;AAMA,IAAM,uBAAuB,EAAE,aAAgD;CAC7E,MAAM,aAAa,qBAAqB;CAExC,OACE,oBAAC,YAAD;EACE,GAAI,WAAW,oBAAoB;EACnC,OAAM;EACN,MAAM,WAAW,WAAW,OAAO;EACnC,SAAQ;EAER,UAAA,oBAAC,kBAAD,EAAkB,MAAM,WAAW,WAAW,OAAO,KAAO,CAAA;CAClD,CAAA;AAEhB"}

package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.d.ts

@@ -1,2 +1,4 @@
-declare const CalendarPrevTrigger: () => import('react').JSX.Element;
+declare const CalendarPrevTrigger: ({ device }: {
+    device?: "desktop" | "mobile";
+}) => import('react').JSX.Element;
 export default CalendarPrevTrigger;

package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js

@@ -3,14 +3,14 @@ import { useDatePickerContext } from "../../../atoms/DatePicker/DatePicker.js";
 import { jsx } from "react/jsx-runtime";
 import { IconButton } from "@chakra-ui/react";
 //#region lib/components/BitkitCalendar/components/CalendarPrevTrigger.tsx
-var CalendarPrevTrigger = () => {
+var CalendarPrevTrigger = ({ device }) => {
 	const datePicker = useDatePickerContext();
 	return /* @__PURE__ */ jsx(IconButton, {
 		...datePicker.getPrevTriggerProps(),
 		color: "button/secondary/text",
-		size: "sm",
+		size: device === "mobile" ? "md" : "sm",
 		variant: "tertiary",
-		children: /* @__PURE__ */ jsx(IconChevronLeft, { size: "16" })
+		children: /* @__PURE__ */ jsx(IconChevronLeft, { size: device === "mobile" ? "24" : "16" })
 	});
 };
 //#endregion

package/dist/components/BitkitCalendar/components/CalendarPrevTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarPrevTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarPrevTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronLeft } from '../../../main';\n\nconst CalendarPrevTrigger = () => {\n  const datePicker = useDatePickerContext();\n\n  return (\n    <IconButton {...datePicker.getPrevTriggerProps()} color=\"button/secondary/text\" size=\"sm\" variant=\"tertiary\">\n      <IconChevronLeft size=\"16\" />\n    </IconButton>\n  );\n};\n\nexport default CalendarPrevTrigger;\n"],"mappings":";;;;;AAMA,IAAM,4BAA4B;CAChC,MAAM,aAAa,qBAAqB;CAExC,OACE,oBAAC,YAAD;EAAY,GAAI,WAAW,oBAAoB;EAAG,OAAM;EAAwB,MAAK;EAAK,SAAQ;EAChG,UAAA,oBAAC,iBAAD,EAAiB,MAAK,KAAM,CAAA;CAClB,CAAA;AAEhB"}
+{"version":3,"file":"CalendarPrevTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarPrevTrigger.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { IconButton } from '@chakra-ui/react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { IconChevronLeft } from '../../../main';\n\nconst CalendarPrevTrigger = ({ device }: { device?: 'desktop' | 'mobile' }) => {\n  const datePicker = useDatePickerContext();\n\n  return (\n    <IconButton\n      {...datePicker.getPrevTriggerProps()}\n      color=\"button/secondary/text\"\n      size={device === 'mobile' ? 'md' : 'sm'}\n      variant=\"tertiary\"\n    >\n      <IconChevronLeft size={device === 'mobile' ? '24' : '16'} />\n    </IconButton>\n  );\n};\n\nexport default CalendarPrevTrigger;\n"],"mappings":";;;;;AAMA,IAAM,uBAAuB,EAAE,aAAgD;CAC7E,MAAM,aAAa,qBAAqB;CAExC,OACE,oBAAC,YAAD;EACE,GAAI,WAAW,oBAAoB;EACnC,OAAM;EACN,MAAM,WAAW,WAAW,OAAO;EACnC,SAAQ;EAER,UAAA,oBAAC,iBAAD,EAAiB,MAAM,WAAW,WAAW,OAAO,KAAO,CAAA;CACjD,CAAA;AAEhB"}

package/dist/components/BitkitCalendar/components/CalendarSelect.d.ts

@@ -3,6 +3,7 @@ export interface BitkitSelectProps {
     controlProps?: SelectControlProps;
     contentProps?: SelectContentProps;
     defaultValue?: string[];
+    device?: 'desktop' | 'mobile';
     items: Array<{
         group?: string;
         value: string;

package/dist/components/BitkitCalendar/components/CalendarSelect.js

@@ -7,25 +7,27 @@ import { createListCollection } from "@chakra-ui/react/collection";
 import { Select } from "@chakra-ui/react/select";
 //#region lib/components/BitkitCalendar/components/CalendarSelect.tsx
 var CalendarSelect = (props) => {
-	const { contentProps, controlProps, defaultValue, items, onValueChange, value } = props;
+	const { contentProps, controlProps, defaultValue, device, items, onValueChange, value } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || ""
 	});
-	const styles = useSlotRecipe({ key: "datePickerSelect" })();
+	const styles = useSlotRecipe({ key: "datePickerSelect" })({ size: device === "mobile" ? "lg" : "md" });
 	return /* @__PURE__ */ jsxs(Select.Root, {
 		collection,
 		defaultValue,
+		minWidth: "0",
 		onValueChange,
 		size: "md",
 		value,
 		children: [/* @__PURE__ */ jsxs(Select.Control, {
+			maxWidth: "100%",
 			...controlProps,
 			children: [
 				/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
 				/* @__PURE__ */ jsx(Select.Trigger, {
 					css: styles.trigger,
-					children: /* @__PURE__ */ jsx(Select.ValueText, {})
+					children: /* @__PURE__ */ jsx(Select.ValueText, { css: styles.valueText })
 				}),
 				/* @__PURE__ */ jsx(Select.IndicatorGroup, {
 					css: styles.indicatorGroup,

package/dist/components/BitkitCalendar/components/CalendarSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport {\n  Select,\n  type SelectContentProps,\n  type SelectControlProps,\n  type SelectRootProps,\n} from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport AssetSelectChevron from '../../../utilities/AssetSelectChevron.tsx';\nimport BitkitSelectMenu from '../../BitkitSelectMenu/BitkitSelectMenu.tsx';\n\nexport interface BitkitSelectProps {\n  controlProps?: SelectControlProps;\n  contentProps?: SelectContentProps;\n  defaultValue?: string[];\n  items: Array<{ group?: string; value: string; label: string }>;\n  onValueChange?: SelectRootProps['onValueChange'];\n  value?: string[];\n}\n\nconst CalendarSelect = (props: BitkitSelectProps) => {\n  const { contentProps, controlProps, defaultValue, items, onValueChange, value } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n  });\n\n  const recipe = useSlotRecipe({ key: 'datePickerSelect' });\n  const styles = recipe();\n\n  return (\n    <Select.Root\n      collection={collection}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange}\n      size=\"md\"\n      value={value}\n    >\n      <Select.Control {...controlProps}>\n        <Select.HiddenSelect />\n        <Select.Trigger css={styles.trigger}>\n          <Select.ValueText />\n        </Select.Trigger>\n        <Select.IndicatorGroup css={styles.indicatorGroup}>\n          <Select.Indicator asChild css={styles.indicator}>\n            <AssetSelectChevron width=\"20\" height=\"20\" />\n          </Select.Indicator>\n        </Select.IndicatorGroup>\n      </Select.Control>\n      <Portal>\n        <Select.Positioner>\n          <BitkitSelectMenu collection={collection} contentProps={contentProps} size=\"md\" />\n        </Select.Positioner>\n      </Portal>\n    </Select.Root>\n  );\n};\n\nCalendarSelect.displayName = 'CalendarSelect';\n\nexport default CalendarSelect;\n"],"mappings":";;;;;;;;AAsBA,IAAM,kBAAkB,UAA6B;CACnD,MAAM,EAAE,cAAc,cAAc,cAAc,OAAO,eAAe,UAAU;CAElF,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;CACnC,CAAC;CAGD,MAAM,SADS,cAAc,EAAE,KAAK,mBAAmB,CACxC,CAAA,CAAO;CAEtB,OACE,qBAAC,OAAO,MAAR;EACc;EACE;EACC;EACf,MAAK;EACE;EALT,UAAA,CAOE,qBAAC,OAAO,SAAR;GAAgB,GAAI;GAApB,UAAA;IACE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,oBAAC,OAAO,SAAR;KAAgB,KAAK,OAAO;KAC1B,UAAA,oBAAC,OAAO,WAAR,CAAmB,CAAA;IACL,CAAA;IAChB,oBAAC,OAAO,gBAAR;KAAuB,KAAK,OAAO;KACjC,UAAA,oBAAC,OAAO,WAAR;MAAkB,SAAA;MAAQ,KAAK,OAAO;MACpC,UAAA,oBAAC,oBAAD;OAAoB,OAAM;OAAK,QAAO;MAAM,CAAA;KAC5B,CAAA;IACG,CAAA;GACT;EAChB,CAAA,GAAA,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;GAA8B;GAA0B;GAAc,MAAK;EAAM,CAAA,EAChE,CAAA,EACb,CAAA,CACG;;AAEjB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"CalendarSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarSelect.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport {\n  Select,\n  type SelectContentProps,\n  type SelectControlProps,\n  type SelectRootProps,\n} from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport AssetSelectChevron from '../../../utilities/AssetSelectChevron.tsx';\nimport BitkitSelectMenu from '../../BitkitSelectMenu/BitkitSelectMenu.tsx';\n\nexport interface BitkitSelectProps {\n  controlProps?: SelectControlProps;\n  contentProps?: SelectContentProps;\n  defaultValue?: string[];\n  device?: 'desktop' | 'mobile';\n  items: Array<{ group?: string; value: string; label: string }>;\n  onValueChange?: SelectRootProps['onValueChange'];\n  value?: string[];\n}\n\nconst CalendarSelect = (props: BitkitSelectProps) => {\n  const { contentProps, controlProps, defaultValue, device, items, onValueChange, value } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n  });\n\n  const recipe = useSlotRecipe({ key: 'datePickerSelect' });\n  const styles = recipe({ size: device === 'mobile' ? 'lg' : 'md' });\n\n  return (\n    <Select.Root\n      collection={collection}\n      defaultValue={defaultValue}\n      // On a narrow screen the month and year selects give way rather than push past the arrows.\n      minWidth=\"0\"\n      onValueChange={onValueChange}\n      size=\"md\"\n      value={value}\n    >\n      <Select.Control maxWidth=\"100%\" {...controlProps}>\n        <Select.HiddenSelect />\n        <Select.Trigger css={styles.trigger}>\n          <Select.ValueText css={styles.valueText} />\n        </Select.Trigger>\n        <Select.IndicatorGroup css={styles.indicatorGroup}>\n          <Select.Indicator asChild css={styles.indicator}>\n            <AssetSelectChevron width=\"20\" height=\"20\" />\n          </Select.Indicator>\n        </Select.IndicatorGroup>\n      </Select.Control>\n      <Portal>\n        <Select.Positioner>\n          <BitkitSelectMenu collection={collection} contentProps={contentProps} size=\"md\" />\n        </Select.Positioner>\n      </Portal>\n    </Select.Root>\n  );\n};\n\nCalendarSelect.displayName = 'CalendarSelect';\n\nexport default CalendarSelect;\n"],"mappings":";;;;;;;;AAuBA,IAAM,kBAAkB,UAA6B;CACnD,MAAM,EAAE,cAAc,cAAc,cAAc,QAAQ,OAAO,eAAe,UAAU;CAE1F,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;CACnC,CAAC;CAGD,MAAM,SADS,cAAc,EAAE,KAAK,mBAAmB,CACxC,CAAA,CAAO,EAAE,MAAM,WAAW,WAAW,OAAO,KAAK,CAAC;CAEjE,OACE,qBAAC,OAAO,MAAR;EACc;EACE;EAEd,UAAS;EACM;EACf,MAAK;EACE;EAPT,UAAA,CASE,qBAAC,OAAO,SAAR;GAAgB,UAAS;GAAO,GAAI;GAApC,UAAA;IACE,oBAAC,OAAO,cAAR,CAAsB,CAAA;IACtB,oBAAC,OAAO,SAAR;KAAgB,KAAK,OAAO;KAC1B,UAAA,oBAAC,OAAO,WAAR,EAAkB,KAAK,OAAO,UAAY,CAAA;IAC5B,CAAA;IAChB,oBAAC,OAAO,gBAAR;KAAuB,KAAK,OAAO;KACjC,UAAA,oBAAC,OAAO,WAAR;MAAkB,SAAA;MAAQ,KAAK,OAAO;MACpC,UAAA,oBAAC,oBAAD;OAAoB,OAAM;OAAK,QAAO;MAAM,CAAA;KAC5B,CAAA;IACG,CAAA;GACT;EAChB,CAAA,GAAA,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;GAA8B;GAA0B;GAAc,MAAK;EAAM,CAAA,EAChE,CAAA,EACb,CAAA,CACG;;AAEjB;AAEA,eAAe,cAAc"}

package/dist/components/BitkitCalendar/components/CalendarTrigger.js

@@ -8,6 +8,7 @@ var CalendarTrigger = ({ children }) => {
 	const mergedProps = {
 		...childProps,
 		...triggerProps,
+		"aria-label": childProps["aria-label"] ?? triggerProps["aria-label"],
 		onClick: (event) => {
 			triggerProps.onClick?.(event);
 			childProps.onClick?.(event);

package/dist/components/BitkitCalendar/components/CalendarTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, type ReactNode } from 'react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\n\nconst CalendarTrigger = ({ children }: { children: ReactNode }) => {\n  const context = useDatePickerContext();\n  const triggerProps = context.getTriggerProps();\n\n  if (!isValidElement(children)) {\n    throw new Error('CalendarTrigger children must be a valid React element');\n  }\n\n  const childProps = children.props as Record<string, any>;\n  const mergedProps = {\n    ...childProps,\n    ...triggerProps,\n    onClick: (event: any) => {\n      triggerProps.onClick?.(event);\n      childProps.onClick?.(event);\n    },\n  };\n\n  return cloneElement(children, mergedProps as any);\n};\n\nexport default CalendarTrigger;\n"],"mappings":";;;AAIA,IAAM,mBAAmB,EAAE,eAAwC;CAEjE,MAAM,eADU,qBACK,CAAA,CAAQ,gBAAgB;CAE7C,IAAI,CAAC,eAAe,QAAQ,GAC1B,MAAM,IAAI,MAAM,wDAAwD;CAG1E,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc;EAClB,GAAG;EACH,GAAG;EACH,UAAU,UAAe;GACvB,aAAa,UAAU,KAAK;GAC5B,WAAW,UAAU,KAAK;EAC5B;CACF;CAEA,OAAO,aAAa,UAAU,WAAkB;AAClD"}
+{"version":3,"file":"CalendarTrigger.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarTrigger.tsx"],"sourcesContent":["import { cloneElement, isValidElement, type ReactNode } from 'react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\n\nconst CalendarTrigger = ({ children }: { children: ReactNode }) => {\n  const context = useDatePickerContext();\n  const triggerProps = context.getTriggerProps();\n\n  if (!isValidElement(children)) {\n    throw new Error('CalendarTrigger children must be a valid React element');\n  }\n\n  const childProps = children.props as Record<string, any>;\n  const mergedProps = {\n    ...childProps,\n    ...triggerProps,\n    // Zag's \"Open calendar\" only stands in for a trigger that has no name of its own.\n    'aria-label': childProps['aria-label'] ?? triggerProps['aria-label'],\n    onClick: (event: any) => {\n      triggerProps.onClick?.(event);\n      childProps.onClick?.(event);\n    },\n  };\n\n  return cloneElement(children, mergedProps as any);\n};\n\nexport default CalendarTrigger;\n"],"mappings":";;;AAIA,IAAM,mBAAmB,EAAE,eAAwC;CAEjE,MAAM,eADU,qBACK,CAAA,CAAQ,gBAAgB;CAE7C,IAAI,CAAC,eAAe,QAAQ,GAC1B,MAAM,IAAI,MAAM,wDAAwD;CAG1E,MAAM,aAAa,SAAS;CAC5B,MAAM,cAAc;EAClB,GAAG;EACH,GAAG;EAEH,cAAc,WAAW,iBAAiB,aAAa;EACvD,UAAU,UAAe;GACvB,aAAa,UAAU,KAAK;GAC5B,WAAW,UAAU,KAAK;EAC5B;CACF;CAEA,OAAO,aAAa,UAAU,WAAkB;AAClD"}

package/dist/components/BitkitCalendar/components/CalendarYearSelect.d.ts

@@ -1,5 +1,6 @@
 import { CalendarDate } from '@internationalized/date';
 type CalendarYearSelectProps = {
+    device?: 'desktop' | 'mobile';
     min?: CalendarDate;
     max?: CalendarDate;
     monthOffset: number;
@@ -8,5 +9,5 @@ type CalendarYearSelectProps = {
         to: number;
     };
 };
-declare const CalendarYearSelect: ({ monthOffset, max, min, yearsRange }: CalendarYearSelectProps) => import('react').JSX.Element;
+declare const CalendarYearSelect: ({ device, monthOffset, max, min, yearsRange }: CalendarYearSelectProps) => import('react').JSX.Element;
 export default CalendarYearSelect;

package/dist/components/BitkitCalendar/components/CalendarYearSelect.js

@@ -4,7 +4,7 @@ import CalendarSelect from "./CalendarSelect.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region lib/components/BitkitCalendar/components/CalendarYearSelect.tsx
-var CalendarYearSelect = ({ monthOffset, max, min, yearsRange }) => {
+var CalendarYearSelect = ({ device, monthOffset, max, min, yearsRange }) => {
 	const datePicker = useDatePickerContext();
 	const firstDayOfMonth = datePicker.getOffset({ months: monthOffset }).visibleRange.start;
 	const handleYearChange = (details) => {
@@ -44,7 +44,8 @@ var CalendarYearSelect = ({ monthOffset, max, min, yearsRange }) => {
 			maxHeight: rem(312),
 			width: rem(108)
 		},
-		controlProps: { width: rem(77) },
+		controlProps: { width: rem(device === "mobile" ? 92 : 77) },
+		device,
 		defaultValue: [(/* @__PURE__ */ new Date()).getFullYear().toString()],
 		items: years,
 		onValueChange: handleYearChange,

package/dist/components/BitkitCalendar/components/CalendarYearSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarYearSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarYearSelect.tsx"],"sourcesContent":["import { type CalendarDate } from '@internationalized/date';\nimport { useMemo } from 'react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { rem } from '../../../theme/themeUtils';\nimport CalendarSelect from './CalendarSelect';\n\ntype CalendarYearSelectProps = {\n  min?: CalendarDate;\n  max?: CalendarDate;\n  monthOffset: number;\n  yearsRange?: {\n    from: number;\n    to: number;\n  };\n};\n\nconst CalendarYearSelect = ({ monthOffset, max, min, yearsRange }: CalendarYearSelectProps) => {\n  const datePicker = useDatePickerContext();\n\n  const firstDayOfMonth = datePicker.getOffset({ months: monthOffset }).visibleRange.start;\n\n  const handleYearChange = (details: { value: string[] }) => {\n    const selectedYear = parseInt(details.value[0], 10);\n\n    datePicker.focusYear(selectedYear);\n  };\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const years = useMemo(() => {\n    const currentYear = new Date().getFullYear();\n\n    let yearOptions = [];\n\n    if (yearsRange?.from) {\n      for (let year = yearsRange.from; year <= yearsRange.to; year++) {\n        yearOptions.push({\n          label: year.toString(),\n          value: year.toString(),\n        });\n      }\n    } else {\n      yearOptions = [currentYear - 1, currentYear, currentYear + 1].map((year) => ({\n        label: year.toString(),\n        value: year.toString(),\n      }));\n    }\n\n    if (min || max) {\n      return yearOptions.filter((year) => {\n        const yearNumber = parseInt(year.value, 10);\n\n        const isBeforeMin = min && yearNumber < min.year;\n        const isAfterMax = max && yearNumber > max.year;\n\n        return !isBeforeMin && !isAfterMax;\n      });\n    }\n\n    return yearOptions;\n  }, [yearsRange?.from, yearsRange?.to, min, max]);\n\n  return (\n    <CalendarSelect\n      contentProps={{\n        maxHeight: rem(312),\n        width: rem(108),\n      }}\n      controlProps={{\n        width: rem(77),\n      }}\n      defaultValue={[new Date().getFullYear().toString()]}\n      items={years}\n      onValueChange={handleYearChange}\n      value={[firstDayOfMonth.year.toString()]}\n    />\n  );\n};\n\nexport default CalendarYearSelect;\n"],"mappings":";;;;;;AAiBA,IAAM,sBAAsB,EAAE,aAAa,KAAK,KAAK,iBAA0C;CAC7F,MAAM,aAAa,qBAAqB;CAExC,MAAM,kBAAkB,WAAW,UAAU,EAAE,QAAQ,YAAY,CAAC,CAAC,CAAC,aAAa;CAEnF,MAAM,oBAAoB,YAAiC;EACzD,MAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,EAAE;EAElD,WAAW,UAAU,YAAY;CACnC;CAGA,MAAM,QAAQ,cAAc;EAC1B,MAAM,+BAAc,IAAI,KAAK,EAAA,CAAE,YAAY;EAE3C,IAAI,cAAc,CAAC;EAEnB,IAAI,YAAY,MACd,KAAK,IAAI,OAAO,WAAW,MAAM,QAAQ,WAAW,IAAI,QACtD,YAAY,KAAK;GACf,OAAO,KAAK,SAAS;GACrB,OAAO,KAAK,SAAS;EACvB,CAAC;OAGH,cAAc;GAAC,cAAc;GAAG;GAAa,cAAc;EAAC,CAAC,CAAC,KAAK,UAAU;GAC3E,OAAO,KAAK,SAAS;GACrB,OAAO,KAAK,SAAS;EACvB,EAAE;EAGJ,IAAI,OAAO,KACT,OAAO,YAAY,QAAQ,SAAS;GAClC,MAAM,aAAa,SAAS,KAAK,OAAO,EAAE;GAE1C,MAAM,cAAc,OAAO,aAAa,IAAI;GAC5C,MAAM,aAAa,OAAO,aAAa,IAAI;GAE3C,OAAO,CAAC,eAAe,CAAC;EAC1B,CAAC;EAGH,OAAO;CACT,GAAG;EAAC,YAAY;EAAM,YAAY;EAAI;EAAK;CAAG,CAAC;CAE/C,OACE,oBAAC,gBAAD;EACE,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,OAAO,IAAI,GAAG;EAChB;EACA,cAAc,EACZ,OAAO,IAAI,EAAE,EACf;EACA,cAAc,kBAAC,IAAI,KAAK,EAAA,CAAE,YAAY,CAAC,CAAC,SAAS,CAAC;EAClD,OAAO;EACP,eAAe;EACf,OAAO,CAAC,gBAAgB,KAAK,SAAS,CAAC;CACxC,CAAA;AAEL"}
+{"version":3,"file":"CalendarYearSelect.js","names":[],"sources":["../../../../lib/components/BitkitCalendar/components/CalendarYearSelect.tsx"],"sourcesContent":["import { type CalendarDate } from '@internationalized/date';\nimport { useMemo } from 'react';\n\nimport { useDatePickerContext } from '../../../atoms/DatePicker/DatePicker';\nimport { rem } from '../../../theme/themeUtils';\nimport CalendarSelect from './CalendarSelect';\n\ntype CalendarYearSelectProps = {\n  device?: 'desktop' | 'mobile';\n  min?: CalendarDate;\n  max?: CalendarDate;\n  monthOffset: number;\n  yearsRange?: {\n    from: number;\n    to: number;\n  };\n};\n\nconst CalendarYearSelect = ({ device, monthOffset, max, min, yearsRange }: CalendarYearSelectProps) => {\n  const datePicker = useDatePickerContext();\n\n  const firstDayOfMonth = datePicker.getOffset({ months: monthOffset }).visibleRange.start;\n\n  const handleYearChange = (details: { value: string[] }) => {\n    const selectedYear = parseInt(details.value[0], 10);\n\n    datePicker.focusYear(selectedYear);\n  };\n\n  // eslint-disable-next-line react-hooks/preserve-manual-memoization\n  const years = useMemo(() => {\n    const currentYear = new Date().getFullYear();\n\n    let yearOptions = [];\n\n    if (yearsRange?.from) {\n      for (let year = yearsRange.from; year <= yearsRange.to; year++) {\n        yearOptions.push({\n          label: year.toString(),\n          value: year.toString(),\n        });\n      }\n    } else {\n      yearOptions = [currentYear - 1, currentYear, currentYear + 1].map((year) => ({\n        label: year.toString(),\n        value: year.toString(),\n      }));\n    }\n\n    if (min || max) {\n      return yearOptions.filter((year) => {\n        const yearNumber = parseInt(year.value, 10);\n\n        const isBeforeMin = min && yearNumber < min.year;\n        const isAfterMax = max && yearNumber > max.year;\n\n        return !isBeforeMin && !isAfterMax;\n      });\n    }\n\n    return yearOptions;\n  }, [yearsRange?.from, yearsRange?.to, min, max]);\n\n  return (\n    <CalendarSelect\n      contentProps={{\n        maxHeight: rem(312),\n        width: rem(108),\n      }}\n      controlProps={{\n        width: rem(device === 'mobile' ? 92 : 77),\n      }}\n      device={device}\n      defaultValue={[new Date().getFullYear().toString()]}\n      items={years}\n      onValueChange={handleYearChange}\n      value={[firstDayOfMonth.year.toString()]}\n    />\n  );\n};\n\nexport default CalendarYearSelect;\n"],"mappings":";;;;;;AAkBA,IAAM,sBAAsB,EAAE,QAAQ,aAAa,KAAK,KAAK,iBAA0C;CACrG,MAAM,aAAa,qBAAqB;CAExC,MAAM,kBAAkB,WAAW,UAAU,EAAE,QAAQ,YAAY,CAAC,CAAC,CAAC,aAAa;CAEnF,MAAM,oBAAoB,YAAiC;EACzD,MAAM,eAAe,SAAS,QAAQ,MAAM,IAAI,EAAE;EAElD,WAAW,UAAU,YAAY;CACnC;CAGA,MAAM,QAAQ,cAAc;EAC1B,MAAM,+BAAc,IAAI,KAAK,EAAA,CAAE,YAAY;EAE3C,IAAI,cAAc,CAAC;EAEnB,IAAI,YAAY,MACd,KAAK,IAAI,OAAO,WAAW,MAAM,QAAQ,WAAW,IAAI,QACtD,YAAY,KAAK;GACf,OAAO,KAAK,SAAS;GACrB,OAAO,KAAK,SAAS;EACvB,CAAC;OAGH,cAAc;GAAC,cAAc;GAAG;GAAa,cAAc;EAAC,CAAC,CAAC,KAAK,UAAU;GAC3E,OAAO,KAAK,SAAS;GACrB,OAAO,KAAK,SAAS;EACvB,EAAE;EAGJ,IAAI,OAAO,KACT,OAAO,YAAY,QAAQ,SAAS;GAClC,MAAM,aAAa,SAAS,KAAK,OAAO,EAAE;GAE1C,MAAM,cAAc,OAAO,aAAa,IAAI;GAC5C,MAAM,aAAa,OAAO,aAAa,IAAI;GAE3C,OAAO,CAAC,eAAe,CAAC;EAC1B,CAAC;EAGH,OAAO;CACT,GAAG;EAAC,YAAY;EAAM,YAAY;EAAI;EAAK;CAAG,CAAC;CAE/C,OACE,oBAAC,gBAAD;EACE,cAAc;GACZ,WAAW,IAAI,GAAG;GAClB,OAAO,IAAI,GAAG;EAChB;EACA,cAAc,EACZ,OAAO,IAAI,WAAW,WAAW,KAAK,EAAE,EAC1C;EACQ;EACR,cAAc,kBAAC,IAAI,KAAK,EAAA,CAAE,YAAY,CAAC,CAAC,SAAS,CAAC;EAClD,OAAO;EACP,eAAe;EACf,OAAO,CAAC,gBAAgB,KAAK,SAAS,CAAC;CACxC,CAAA;AAEL"}

package/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts

@@ -3,6 +3,8 @@ import { BitkitFieldProps } from '../BitkitField/BitkitField';
 export type BitkitDatePickerControlProps = BoxProps;
 export interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {
     controlProps?: BitkitDatePickerControlProps;
+    /** Text for a day's tooltip, e.g. why it can't be picked. Return `undefined` for no tooltip. */
+    dayTooltip?: (date: Date) => string | undefined;
     defaultValue?: Date | null;
     disablePortal?: boolean;
     max?: Date;

package/dist/components/BitkitDatePicker/BitkitDatePicker.js

@@ -46,7 +46,7 @@ var DatePickerInput = ({ css }) => {
 	});
 };
 var BitkitDatePicker = forwardRef((props, ref) => {
-	const { controlProps, defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
+	const { controlProps, dayTooltip, defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
 	const styles = useSlotRecipe({ key: "textInput" })({ size });
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const minCalendarDate = useMemo(() => min ? dateToCalendarDate(min) : void 0, [min]);
@@ -115,6 +115,7 @@ var BitkitDatePicker = forwardRef((props, ref) => {
 			}), /* @__PURE__ */ jsx(Portal, {
 				disabled: disablePortal || disablePortalFromContext,
 				children: /* @__PURE__ */ jsx(DatePicker.Positioner, { children: /* @__PURE__ */ jsx(CalendarContent, {
+					dayTooltip,
 					layout: "1-month",
 					max: maxCalendarDate,
 					min: minCalendarDate,