@veracity/vui 3.0.0-beta.8 → 3.0.0

package/dist/buttonGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { ButtonGroupProps } from "./buttonGroup.types.js";
+import { ButtonGroup, ButtonGroupBase } from "./buttonGroup.js";
+import { ButtonGroupProvider, useButtonGroupContext } from "./context.js";

package/dist/buttonToggleGroup/buttonToggleGroup.d.ts

@@ -1,12 +1,12 @@
 import { ButtonToggleGroupProps } from "./buttonToggleGroup.types.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/buttonToggleGroup/buttonToggleGroup.d.ts
 /**
  * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
  */
 declare const ButtonToggleGroup: {
-  (props: ButtonToggleGroupProps): react_jsx_runtime1.JSX.Element;
+  (props: ButtonToggleGroupProps): react_jsx_runtime2.JSX.Element;
   displayName: string;
 };
 //#endregion

package/dist/buttonToggleGroup/buttonToggleGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOa,OAAA,CAAA,KAAA,CAAA,iBAUZ,CAAA,CAAA;EAAA,CAAA,KAAA,CAAA,CAVwC,sBAUxC,CAAA,CAAA,CAV8D,kBAAA,CAAA,GAAA,CAAA,OAU9D;aAVwC,CAAA,CAAA,MAAA"}
+{"version":3,"file":"buttonToggleGroup.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAOa,OAAA,CAAA,KAAA,CAAA,iBAA4B,CAAA,CAAA;UAAA,yBAAsB,kBAAA,CAAA,GAAA,CAAA"}

package/dist/buttonToggleGroup/buttonToggleGroup.js

@@ -1,2 +1,23 @@
-import{dimmedBorderColor as e}from"../utils/consts.js";import{cs as t}from"../utils/styles.js";import n from"../buttonGroup/buttonGroup.js";import{jsx as r}from"react/jsx-runtime";const i=i=>{let{className:a,isDimmedBorder:o}=i;return r(n,{className:t(`vui-buttonToggleGroup`,a),innerBorderColor:o?e:``,...i})};i.displayName=`ButtonToggleGroup`;export{i as ButtonToggleGroup};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { dimmedBorderColor } from "../utils/consts.js";
+import { cs } from "../utils/styles.js";
+import buttonGroup_default from "../buttonGroup/buttonGroup.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/buttonToggleGroup/buttonToggleGroup.tsx
+/**
+* Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.
+*/
+const ButtonToggleGroup = (props) => {
+	const { className, isDimmedBorder } = props;
+	return /* @__PURE__ */ jsx(buttonGroup_default, {
+		className: cs("vui-buttonToggleGroup", className),
+		innerBorderColor: isDimmedBorder ? dimmedBorderColor : "",
+		...props
+	});
+};
+ButtonToggleGroup.displayName = "ButtonToggleGroup";
+
+//#endregion
+export { ButtonToggleGroup };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=buttonToggleGroup.js.map

package/dist/buttonToggleGroup/buttonToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.js","names":["ButtonGroup"],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\nimport type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'ButtonToggleGroup'\nexport default ButtonToggleGroup\n"],"mappings":"oLAOA,MAAa,EAAqB,GAAkC,CAClE,GAAM,CAAE,YAAW,kBAAmB,EAEtC,OACE,EAACA,EAAAA,CACC,UAAW,EAAG,wBAAyB,EAAU,CACjD,iBAAkB,EAAiB,EAAoB,GACvD,GAAI,GACJ,EAIN,EAAkB,YAAc"}
+{"version":3,"file":"buttonToggleGroup.js","names":["ButtonGroup"],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.tsx"],"sourcesContent":["import ButtonGroup from '../buttonGroup'\nimport { cs, dimmedBorderColor } from '../utils'\nimport type { ButtonToggleGroupProps } from './buttonToggleGroup.types'\n\n/**\n * Organizes layout and display of multiple buttons. Based on ButtonGroup and should be used to toggle options.\n */\nexport const ButtonToggleGroup = (props: ButtonToggleGroupProps) => {\n  const { className, isDimmedBorder } = props\n\n  return (\n    <ButtonGroup\n      className={cs('vui-buttonToggleGroup', className)}\n      innerBorderColor={isDimmedBorder ? dimmedBorderColor : ''}\n      {...props}\n    />\n  )\n}\n\nButtonToggleGroup.displayName = 'ButtonToggleGroup'\nexport default ButtonToggleGroup\n"],"mappings":";;;;;;;;;AAOA,MAAa,qBAAqB,UAAkC;CAClE,MAAM,EAAE,WAAW,mBAAmB;AAEtC,QACE,oBAACA;EACC,WAAW,GAAG,yBAAyB,UAAU;EACjD,kBAAkB,iBAAiB,oBAAoB;EACvD,GAAI;GACJ;;AAIN,kBAAkB,cAAc"}

package/dist/buttonToggleGroup/buttonToggleGroup.types.d.ts

@@ -1,5 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { ButtonGroupProps } from "../buttonGroup/buttonGroup.types.js";
+import "../buttonGroup/index.js";
 import { ReactNode } from "react";
 
 //#region src/buttonToggleGroup/buttonToggleGroup.types.d.ts

package/dist/buttonToggleGroup/buttonToggleGroup.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonToggleGroup.types.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.types.ts"],"sourcesContent":[],"mappings":";;;;;KAKY,sBAAA,CAAA,CAAA,CAAyB,mBACnC;;EADU,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,MAAA,CAAA,OAAA,CAAA,EAAA,CAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;EAAsB,cAAA,CAAA,CAAA,CAAA,OAAA;UAAG,CAAA,CAKvB,SALuB"}
+{"version":3,"file":"buttonToggleGroup.types.d.ts","names":[],"sources":["../../src/buttonToggleGroup/buttonToggleGroup.types.ts"],"sourcesContent":[],"mappings":";;;;;;KAKY,sBAAA,CAAA,CAAA,CAAyB,mBACnC;;;EADU,cAAA,CAAA,CAAA,CAAA,OAAA;EAAyB,QAAA,CAAA,CAKvB,SALuB;CACnC"}

package/dist/buttonToggleGroup/index.d.ts

@@ -0,0 +1,2 @@
+import { ButtonToggleGroupProps } from "./buttonToggleGroup.types.js";
+import { ButtonToggleGroup } from "./buttonToggleGroup.js";

package/dist/calendar/calendar.d.ts

@@ -1,5 +1,6 @@
 import { VuiComponent } from "../core/vui.js";
 import { CalendarProps } from "./calendar.types.js";
+import "../index.js";
 
 //#region src/calendar/calendar.d.ts
 /** Displays calendar. */

package/dist/calendar/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","names":[],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":[],"mappings":";;;;;cAqBa,UAAQ,oBAAA"}
+{"version":3,"file":"calendar.d.ts","names":[],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":[],"mappings":";;;;;;cAqBa,UAAQ,oBAAA"}

package/dist/calendar/calendar.js

@@ -1,2 +1,125 @@
-import{cs as e}from"../utils/styles.js";import{omitThemingProps as t,useStyleConfig as n}from"../core/theme.js";import{vui as r}from"../core/vui.js";import i from"../box/box.js";import{DayPicker as a}from"./components/dayPicker.js";import{isDay as o,isExact as s,isFrom as c,isMonth as l,isTo as u,isYear as d,processSelectMonth as f,processSelectYear as p,processViewDate as m}from"./utils.js";import{CalendarHeader as h}from"./components/calendarHeader.js";import{MonthPicker as g}from"./components/monthPicker.js";import{YearPicker as _}from"./components/yearPicker.js";import{useCalendar as v}from"./hooks/useCalendar.js";import{useDefaultViewMonth as y}from"./hooks/useDefaultViewMonth.js";import{useEffect as b,useRef as x,useState as S}from"react";import{jsx as C,jsxs as w}from"react/jsx-runtime";const T=r((r,T)=>{let{boundaries:E,className:D,fixedNumberOfWeeks:O=!1,disabled:k,isStartDate:A,mode:j,onSelectDates:M,selectedDates:N,...P}=t(r),F=n(`Calendar`,r),I=x(c(j)||s(j)?N?.startDate:N?.endDate);b(()=>{I.current=c(j)||s(j)?N?.startDate:N?.endDate,I.current&&H(I.current)},[N]);let L=x(null),R=y({boundaries:E,selectedDate:I.current,isStartDate:A}),[z,B]=S(`day`),[V,H]=S(R),U=e=>{let t=m(V,e,z,L?.current?.items);t&&H(t)},W=e=>()=>{q(e),H(e)},G=e=>()=>{let t=f(e,j,E);q(t),H(t),B(`day`)},K=e=>()=>{let t=p(e,j,E);q(t),H(t),B(`month`)},q=e=>{let t={...N};t&&(u(j)?t.endDate=e:t.startDate=e),e&&!k&&M&&M(t)},J=L.current=v({boundaries:E,mode:j,selectedDates:N,timeUnitMode:z,viewDate:V,fixedNumberOfWeeks:O});return w(i,{className:e(`vui-calendar`,D),column:!0,cursor:`default`,minW:280,position:`relative`,ref:T,w:`fit-content`,...F,...P,children:[C(h,{nextDisabled:J.nextDisabled,onChangeViewItem:U,onSetTimeUnitMode:e=>B(e),prevDisabled:J.prevDisabled,timeUnitMode:z,viewMonth:V}),o(z)&&C(a,{calendar:J,onSelectDay:W}),l(z)&&C(g,{calendar:J,onSelectMonth:G}),d(z)&&C(_,{calendar:J,onSelectYear:K})]})});T.displayName=`Calendar`;var E=T;export{T as Calendar,E as default};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../utils/styles.js";
+import { omitThemingProps, useStyleConfig } from "../core/theme.js";
+import { vui } from "../core/vui.js";
+import box_default from "../box/box.js";
+import { DayPicker } from "./components/dayPicker.js";
+import { isDay, isExact, isFrom, isMonth, isTo, isYear, processSelectMonth, processSelectYear, processViewDate } from "./utils.js";
+import { CalendarHeader } from "./components/calendarHeader.js";
+import { MonthPicker } from "./components/monthPicker.js";
+import { YearPicker } from "./components/yearPicker.js";
+import { useCalendar } from "./hooks/useCalendar.js";
+import { useDefaultViewMonth } from "./hooks/useDefaultViewMonth.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/calendar/calendar.tsx
+/** Displays calendar. */
+const Calendar = vui((props, ref) => {
+	const { boundaries, className, fixedNumberOfWeeks = false, disabled, isStartDate, mode, onSelectDates, selectedDates,...rest } = omitThemingProps(props);
+	const styles = useStyleConfig("Calendar", props);
+	const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate);
+	/**
+	* Effect to reset viewDate when selectedDates changes (onReset)
+	*/
+	useEffect(() => {
+		currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate;
+		currentDateRef.current && setViewDate(currentDateRef.current);
+	}, [selectedDates]);
+	const calendarRef = useRef(null);
+	const defaultViewMonth = useDefaultViewMonth({
+		boundaries,
+		selectedDate: currentDateRef.current,
+		isStartDate
+	});
+	const [timeUnitMode, setTimeUnitMode] = useState("day");
+	const [viewDate, setViewDate] = useState(defaultViewMonth);
+	/**
+	* Handles clicking next/prev in header
+	*/
+	const onChangeViewItem = (direction) => {
+		const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items);
+		newViewMonth && setViewDate(newViewMonth);
+	};
+	/**
+	* Handles clicking on a day
+	*/
+	const onSelectDay = (clickedDate) => () => {
+		updateDateState(clickedDate);
+		setViewDate(clickedDate);
+	};
+	/**
+	* Handles clicking on a month
+	*/
+	const onSelectMonth = (clickedDate) => () => {
+		const processedNewDate = processSelectMonth(clickedDate, mode, boundaries);
+		updateDateState(processedNewDate);
+		setViewDate(processedNewDate);
+		setTimeUnitMode("day");
+	};
+	/**
+	* Handles clicking on a year
+	*/
+	const onSelectYear = (clickedDate) => () => {
+		const processedNewDate = processSelectYear(clickedDate, mode, boundaries);
+		updateDateState(processedNewDate);
+		setViewDate(processedNewDate);
+		setTimeUnitMode("month");
+	};
+	/**
+	* Send update date to parent component
+	*/
+	const updateDateState = (newDate) => {
+		const dateRange = { ...selectedDates };
+		if (dateRange) if (isTo(mode)) dateRange.endDate = newDate;
+		else dateRange.startDate = newDate;
+		if (newDate && !disabled) onSelectDates && onSelectDates(dateRange);
+	};
+	const calendar = calendarRef.current = useCalendar({
+		boundaries,
+		mode,
+		selectedDates,
+		timeUnitMode,
+		viewDate,
+		fixedNumberOfWeeks
+	});
+	return /* @__PURE__ */ jsxs(box_default, {
+		className: cs("vui-calendar", className),
+		column: true,
+		cursor: "default",
+		minW: 280,
+		position: "relative",
+		ref,
+		w: "fit-content",
+		...styles,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(CalendarHeader, {
+				nextDisabled: calendar.nextDisabled,
+				onChangeViewItem,
+				onSetTimeUnitMode: (mode$1) => setTimeUnitMode(mode$1),
+				prevDisabled: calendar.prevDisabled,
+				timeUnitMode,
+				viewMonth: viewDate
+			}),
+			isDay(timeUnitMode) && /* @__PURE__ */ jsx(DayPicker, {
+				calendar,
+				onSelectDay
+			}),
+			isMonth(timeUnitMode) && /* @__PURE__ */ jsx(MonthPicker, {
+				calendar,
+				onSelectMonth
+			}),
+			isYear(timeUnitMode) && /* @__PURE__ */ jsx(YearPicker, {
+				calendar,
+				onSelectYear
+			})
+		]
+	});
+});
+Calendar.displayName = "Calendar";
+var calendar_default = Calendar;
+
+//#endregion
+export { Calendar, calendar_default as default };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=calendar.js.map

package/dist/calendar/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","names":["dateRange: DateRange","Box","mode"],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'\nimport { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components'\nimport { useCalendar, useDefaultViewMonth } from './hooks'\nimport {\n  isDay,\n  isExact,\n  isFrom,\n  isMonth,\n  isTo,\n  isYear,\n  processSelectMonth,\n  processSelectYear,\n  processViewDate,\n} from './utils'\n\n/** Displays calendar. */\nexport const Calendar = vui<'div', CalendarProps>((props, ref) => {\n  const {\n    boundaries,\n    className,\n    fixedNumberOfWeeks = false,\n    disabled,\n    isStartDate,\n    mode,\n    onSelectDates,\n    selectedDates,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('Calendar', props)\n\n  const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate)\n\n  /**\n   * Effect to reset viewDate when selectedDates changes (onReset)\n   */\n  useEffect(() => {\n    currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate\n    currentDateRef.current && setViewDate(currentDateRef.current)\n  }, [selectedDates])\n\n  const calendarRef = useRef<TimeResult | null>(null)\n\n  const defaultViewMonth = useDefaultViewMonth({\n    boundaries,\n    selectedDate: currentDateRef.current,\n    isStartDate,\n  })\n\n  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')\n  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)\n\n  /**\n   * Handles clicking next/prev in header\n   */\n  const onChangeViewItem = (direction: FlowDirection) => {\n    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)\n    newViewMonth && setViewDate(newViewMonth)\n  }\n\n  /**\n   * Handles clicking on a day\n   */\n  const onSelectDay = (clickedDate: Date) => () => {\n    updateDateState(clickedDate)\n    setViewDate(clickedDate)\n  }\n\n  /**\n   * Handles clicking on a month\n   */\n  const onSelectMonth = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('day')\n  }\n\n  /**\n   * Handles clicking on a year\n   */\n  const onSelectYear = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('month')\n  }\n\n  /**\n   * Send update date to parent component\n   */\n  const updateDateState = (newDate: Date) => {\n    const dateRange: DateRange = { ...selectedDates }\n\n    if (dateRange) {\n      if (isTo(mode)) dateRange.endDate = newDate\n      else dateRange.startDate = newDate\n    }\n\n    if (newDate && !disabled) onSelectDates && onSelectDates(dateRange)\n  }\n\n  const calendar = (calendarRef.current = useCalendar({\n    boundaries,\n    mode,\n    selectedDates,\n    timeUnitMode,\n    viewDate,\n    fixedNumberOfWeeks,\n  }))\n\n  return (\n    <Box\n      className={cs('vui-calendar', className)}\n      column\n      cursor=\"default\"\n      minW={280}\n      position=\"relative\"\n      ref={ref}\n      w=\"fit-content\"\n      {...styles}\n      {...rest}\n    >\n      <CalendarHeader\n        nextDisabled={calendar.nextDisabled}\n        onChangeViewItem={onChangeViewItem}\n        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}\n        prevDisabled={calendar.prevDisabled}\n        timeUnitMode={timeUnitMode}\n        viewMonth={viewDate}\n      />\n      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}\n      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}\n      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}\n    </Box>\n  )\n})\n\nCalendar.displayName = 'Calendar'\n\nexport default Calendar\n"],"mappings":"qyBAqBA,MAAa,EAAW,GAA2B,EAAO,IAAQ,CAChE,GAAM,CACJ,aACA,YACA,qBAAqB,GACrB,WACA,cACA,OACA,gBACA,gBACA,GAAG,GACD,EAAiB,EAAM,CACrB,EAAS,EAAe,WAAY,EAAM,CAE1C,EAAiB,EAAO,EAAO,EAAK,EAAI,EAAQ,EAAK,CAAG,GAAe,UAAY,GAAe,QAAQ,CAKhH,MAAgB,CACd,EAAe,QAAU,EAAO,EAAK,EAAI,EAAQ,EAAK,CAAG,GAAe,UAAY,GAAe,QACnG,EAAe,SAAW,EAAY,EAAe,QAAQ,EAC5D,CAAC,EAAc,CAAC,CAEnB,IAAM,EAAc,EAA0B,KAAK,CAE7C,EAAmB,EAAoB,CAC3C,aACA,aAAc,EAAe,QAC7B,cACD,CAAC,CAEI,CAAC,EAAc,GAAmB,EAAuB,MAAM,CAC/D,CAAC,EAAU,GAAe,EAAe,EAAiB,CAK1D,EAAoB,GAA6B,CACrD,IAAM,EAAe,EAAgB,EAAU,EAAW,EAAc,GAAa,SAAS,MAAM,CACpG,GAAgB,EAAY,EAAa,EAMrC,EAAe,OAA4B,CAC/C,EAAgB,EAAY,CAC5B,EAAY,EAAY,EAMpB,EAAiB,OAA4B,CACjD,IAAM,EAAmB,EAAmB,EAAa,EAAM,EAAW,CAC1E,EAAgB,EAAiB,CACjC,EAAY,EAAiB,CAC7B,EAAgB,MAAM,EAMlB,EAAgB,OAA4B,CAChD,IAAM,EAAmB,EAAkB,EAAa,EAAM,EAAW,CACzE,EAAgB,EAAiB,CACjC,EAAY,EAAiB,CAC7B,EAAgB,QAAQ,EAMpB,EAAmB,GAAkB,CACzC,IAAMA,EAAuB,CAAE,GAAG,EAAe,CAE7C,IACE,EAAK,EAAK,CAAE,EAAU,QAAU,EAC/B,EAAU,UAAY,GAGzB,GAAW,CAAC,GAAU,GAAiB,EAAc,EAAU,EAG/D,EAAY,EAAY,QAAU,EAAY,CAClD,aACA,OACA,gBACA,eACA,WACA,qBACD,CAAC,CAEF,OACE,EAACC,EAAAA,CACC,UAAW,EAAG,eAAgB,EAAU,CACxC,OAAA,GACA,OAAO,UACP,KAAM,IACN,SAAS,WACJ,MACL,EAAE,cACF,GAAI,EACJ,GAAI,YAEJ,EAAC,EAAA,CACC,aAAc,EAAS,aACL,mBAClB,kBAAoB,GAAuB,EAAgBC,EAAK,CAChE,aAAc,EAAS,aACT,eACd,UAAW,GACX,CACD,EAAM,EAAa,EAAI,EAAC,EAAA,CAAoB,WAAuB,eAAe,CAClF,EAAQ,EAAa,EAAI,EAAC,EAAA,CAAsB,WAAyB,iBAAiB,CAC1F,EAAO,EAAa,EAAI,EAAC,EAAA,CAAqB,WAAwB,gBAAgB,GACnF,EAER,CAEF,EAAS,YAAc,WAEvB,IAAA,EAAe"}
+{"version":3,"file":"calendar.js","names":["dateRange: DateRange","Box","mode"],"sources":["../../src/calendar/calendar.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport Box from '../box'\nimport { omitThemingProps, useStyleConfig, vui } from '../core'\nimport { cs } from '../utils'\nimport type { CalendarProps, DateRange, FlowDirection, TimeResult, TimeUnitMode } from './calendar.types'\nimport { CalendarHeader, DayPicker, MonthPicker, YearPicker } from './components'\nimport { useCalendar, useDefaultViewMonth } from './hooks'\nimport {\n  isDay,\n  isExact,\n  isFrom,\n  isMonth,\n  isTo,\n  isYear,\n  processSelectMonth,\n  processSelectYear,\n  processViewDate,\n} from './utils'\n\n/** Displays calendar. */\nexport const Calendar = vui<'div', CalendarProps>((props, ref) => {\n  const {\n    boundaries,\n    className,\n    fixedNumberOfWeeks = false,\n    disabled,\n    isStartDate,\n    mode,\n    onSelectDates,\n    selectedDates,\n    ...rest\n  } = omitThemingProps(props)\n  const styles = useStyleConfig('Calendar', props)\n\n  const currentDateRef = useRef(isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate)\n\n  /**\n   * Effect to reset viewDate when selectedDates changes (onReset)\n   */\n  useEffect(() => {\n    currentDateRef.current = isFrom(mode) || isExact(mode) ? selectedDates?.startDate : selectedDates?.endDate\n    currentDateRef.current && setViewDate(currentDateRef.current)\n  }, [selectedDates])\n\n  const calendarRef = useRef<TimeResult | null>(null)\n\n  const defaultViewMonth = useDefaultViewMonth({\n    boundaries,\n    selectedDate: currentDateRef.current,\n    isStartDate,\n  })\n\n  const [timeUnitMode, setTimeUnitMode] = useState<TimeUnitMode>('day')\n  const [viewDate, setViewDate] = useState<Date>(defaultViewMonth)\n\n  /**\n   * Handles clicking next/prev in header\n   */\n  const onChangeViewItem = (direction: FlowDirection) => {\n    const newViewMonth = processViewDate(viewDate, direction, timeUnitMode, calendarRef?.current?.items)\n    newViewMonth && setViewDate(newViewMonth)\n  }\n\n  /**\n   * Handles clicking on a day\n   */\n  const onSelectDay = (clickedDate: Date) => () => {\n    updateDateState(clickedDate)\n    setViewDate(clickedDate)\n  }\n\n  /**\n   * Handles clicking on a month\n   */\n  const onSelectMonth = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectMonth(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('day')\n  }\n\n  /**\n   * Handles clicking on a year\n   */\n  const onSelectYear = (clickedDate: Date) => () => {\n    const processedNewDate = processSelectYear(clickedDate, mode, boundaries)\n    updateDateState(processedNewDate)\n    setViewDate(processedNewDate)\n    setTimeUnitMode('month')\n  }\n\n  /**\n   * Send update date to parent component\n   */\n  const updateDateState = (newDate: Date) => {\n    const dateRange: DateRange = { ...selectedDates }\n\n    if (dateRange) {\n      if (isTo(mode)) dateRange.endDate = newDate\n      else dateRange.startDate = newDate\n    }\n\n    if (newDate && !disabled) onSelectDates && onSelectDates(dateRange)\n  }\n\n  const calendar = (calendarRef.current = useCalendar({\n    boundaries,\n    mode,\n    selectedDates,\n    timeUnitMode,\n    viewDate,\n    fixedNumberOfWeeks,\n  }))\n\n  return (\n    <Box\n      className={cs('vui-calendar', className)}\n      column\n      cursor=\"default\"\n      minW={280}\n      position=\"relative\"\n      ref={ref}\n      w=\"fit-content\"\n      {...styles}\n      {...rest}\n    >\n      <CalendarHeader\n        nextDisabled={calendar.nextDisabled}\n        onChangeViewItem={onChangeViewItem}\n        onSetTimeUnitMode={(mode: TimeUnitMode) => setTimeUnitMode(mode)}\n        prevDisabled={calendar.prevDisabled}\n        timeUnitMode={timeUnitMode}\n        viewMonth={viewDate}\n      />\n      {isDay(timeUnitMode) && <DayPicker calendar={calendar} onSelectDay={onSelectDay} />}\n      {isMonth(timeUnitMode) && <MonthPicker calendar={calendar} onSelectMonth={onSelectMonth} />}\n      {isYear(timeUnitMode) && <YearPicker calendar={calendar} onSelectYear={onSelectYear} />}\n    </Box>\n  )\n})\n\nCalendar.displayName = 'Calendar'\n\nexport default Calendar\n"],"mappings":";;;;;;;;;;;;;;;;AAqBA,MAAa,WAAW,KAA2B,OAAO,QAAQ;CAChE,MAAM,EACJ,YACA,WACA,qBAAqB,OACrB,UACA,aACA,MACA,eACA,cACA,GAAG,SACD,iBAAiB,MAAM;CAC3B,MAAM,SAAS,eAAe,YAAY,MAAM;CAEhD,MAAM,iBAAiB,OAAO,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe,QAAQ;;;;AAKhH,iBAAgB;AACd,iBAAe,UAAU,OAAO,KAAK,IAAI,QAAQ,KAAK,GAAG,eAAe,YAAY,eAAe;AACnG,iBAAe,WAAW,YAAY,eAAe,QAAQ;IAC5D,CAAC,cAAc,CAAC;CAEnB,MAAM,cAAc,OAA0B,KAAK;CAEnD,MAAM,mBAAmB,oBAAoB;EAC3C;EACA,cAAc,eAAe;EAC7B;EACD,CAAC;CAEF,MAAM,CAAC,cAAc,mBAAmB,SAAuB,MAAM;CACrE,MAAM,CAAC,UAAU,eAAe,SAAe,iBAAiB;;;;CAKhE,MAAM,oBAAoB,cAA6B;EACrD,MAAM,eAAe,gBAAgB,UAAU,WAAW,cAAc,aAAa,SAAS,MAAM;AACpG,kBAAgB,YAAY,aAAa;;;;;CAM3C,MAAM,eAAe,sBAA4B;AAC/C,kBAAgB,YAAY;AAC5B,cAAY,YAAY;;;;;CAM1B,MAAM,iBAAiB,sBAA4B;EACjD,MAAM,mBAAmB,mBAAmB,aAAa,MAAM,WAAW;AAC1E,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,MAAM;;;;;CAMxB,MAAM,gBAAgB,sBAA4B;EAChD,MAAM,mBAAmB,kBAAkB,aAAa,MAAM,WAAW;AACzE,kBAAgB,iBAAiB;AACjC,cAAY,iBAAiB;AAC7B,kBAAgB,QAAQ;;;;;CAM1B,MAAM,mBAAmB,YAAkB;EACzC,MAAMA,YAAuB,EAAE,GAAG,eAAe;AAEjD,MAAI,UACF,KAAI,KAAK,KAAK,CAAE,WAAU,UAAU;MAC/B,WAAU,YAAY;AAG7B,MAAI,WAAW,CAAC,SAAU,kBAAiB,cAAc,UAAU;;CAGrE,MAAM,WAAY,YAAY,UAAU,YAAY;EAClD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAACC;EACC,WAAW,GAAG,gBAAgB,UAAU;EACxC;EACA,QAAO;EACP,MAAM;EACN,UAAS;EACJ;EACL,GAAE;EACF,GAAI;EACJ,GAAI;;GAEJ,oBAAC;IACC,cAAc,SAAS;IACL;IAClB,oBAAoB,WAAuB,gBAAgBC,OAAK;IAChE,cAAc,SAAS;IACT;IACd,WAAW;KACX;GACD,MAAM,aAAa,IAAI,oBAAC;IAAoB;IAAuB;KAAe;GAClF,QAAQ,aAAa,IAAI,oBAAC;IAAsB;IAAyB;KAAiB;GAC1F,OAAO,aAAa,IAAI,oBAAC;IAAqB;IAAwB;KAAgB;;GACnF;EAER;AAEF,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/calendar/calendar.styles.js

@@ -1,28 +1,41 @@
-import{th as e}from"../core/theme.js";import{css as t,styled as n}from"../core/styled.js";import r from"../box/box.js";import i from"../link/link.js";const a=t`
-  background-color: ${e.color(`seaBlue.main`)};
+import { th } from "../core/theme.js";
+import { css, styled } from "../core/styled.js";
+import box_default from "../box/box.js";
+import link_default from "../link/link.js";
+
+//#region src/calendar/calendar.styles.ts
+const boundary = css`
+  background-color: ${th.color("seaBlue.main")};
   color: white !important;
   border-radius: 0;
-`,o=t`
-  background-color: ${e.color(`seaBlue.main`)};
+`;
+const current = css`
+  background-color: ${th.color("seaBlue.main")};
   color: white !important;
   border-radius: 0;
-`,s=t`
-  background-color: ${e.color(`sandstone.97`)} !important;
-  color: ${e.color(`sandstone.55`)} !important;
+`;
+const isDisabled = css`
+  background-color: ${th.color("sandstone.97")} !important;
+  color: ${th.color("sandstone.55")} !important;
   cursor: not-allowed;
-`,c=t`
-  color: ${e.color(`sandstone.55`)} !important;
-`,l=t`
-  border: 1px solid ${e.color(`seaBlue.main`)};
-`,u=t`
-  background-color: ${e.color(`skyBlue.85`)};
-  color: ${e.color(`seaBlue.main`)};
+`;
+const isHidden = css`
+  color: ${th.color("sandstone.55")} !important;
+`;
+const isToday = css`
+  border: 1px solid ${th.color("seaBlue.main")};
+`;
+const hover = css`
+  background-color: ${th.color("skyBlue.85")};
+  color: ${th.color("seaBlue.main")};
   border-radius: 0;
-`,d=t`
-  background-color: ${e.color(`skyBlue.85`)};
+`;
+const isSelected = css`
+  background-color: ${th.color("skyBlue.85")};
   border-radius: 0;
   color: white;
-`,f=n(i)`
+`;
+const CalendarItem = styled(link_default)`
   aspect-ratio: 1;
   border: 0;
   cursor: pointer;
@@ -31,20 +44,21 @@ import{th as e}from"../core/theme.js";import{css as t,styled as n}from"../core/s
   text-decoration: none;
   width: 100%;
 
-  ${e=>e.isHidden&&c}
-  ${e=>e.isToday&&l}
-  ${e=>e.isDisabled&&s}
-  ${e=>e.isSelected&&d}
-  ${e=>e.boundary&&a}
-  ${e=>e.current&&o}
+  ${(p) => p.isHidden && isHidden}
+  ${(p) => p.isToday && isToday}
+  ${(p) => p.isDisabled && isDisabled}
+  ${(p) => p.isSelected && isSelected}
+  ${(p) => p.boundary && boundary}
+  ${(p) => p.current && current}
 
   &:hover {
     color: inherit;
     text-decoration: none;
 
-    ${e=>!e.isDisabled&&u}
+    ${(p) => !p.isDisabled && hover}
   }
-`,p=n(r)`
+`;
+const CalendarItemsContainer = styled(box_default)`
   align-items: center;
   column-gap: 0;
   display: grid;
@@ -52,5 +66,9 @@ import{th as e}from"../core/theme.js";import{css as t,styled as n}from"../core/s
   grid-template-rows: repeat(4, 48px);
   justify-items: center;
   row-gap: 0;
-`;export{f as CalendarItem,p as CalendarItemsContainer};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+
+//#endregion
+export { CalendarItem, CalendarItemsContainer };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=calendar.styles.js.map

package/dist/calendar/calendar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.styles.js","names":["Link","Box"],"sources":["../../src/calendar/calendar.styles.ts"],"sourcesContent":["import Box from '../box'\nimport { css, styled, th } from '../core'\nimport Link from '../link'\nimport type { ItemProps } from './calendar.types'\n\nexport const boundary = css`\n  background-color: ${th.color('seaBlue.main')};\n  color: white !important;\n  border-radius: 0;\n`\n\nexport const current = css`\n  background-color: ${th.color('seaBlue.main')};\n  color: white !important;\n  border-radius: 0;\n`\n\nexport const isDisabled = css`\n  background-color: ${th.color('sandstone.97')} !important;\n  color: ${th.color('sandstone.55')} !important;\n  cursor: not-allowed;\n`\n\nexport const isHidden = css`\n  color: ${th.color('sandstone.55')} !important;\n`\n\nexport const isToday = css`\n  border: 1px solid ${th.color('seaBlue.main')};\n`\n\nexport const hover = css`\n  background-color: ${th.color('skyBlue.85')};\n  color: ${th.color('seaBlue.main')};\n  border-radius: 0;\n`\n\nexport const isSelected = css`\n  background-color: ${th.color('skyBlue.85')};\n  border-radius: 0;\n  color: white;\n`\n\nexport const CalendarItem = styled(Link)<ItemProps>`\n  aspect-ratio: 1;\n  border: 0;\n  cursor: pointer;\n  height: 100%;\n  justify-content: center;\n  text-decoration: none;\n  width: 100%;\n\n  ${p => p.isHidden && isHidden}\n  ${p => p.isToday && isToday}\n  ${p => p.isDisabled && isDisabled}\n  ${p => p.isSelected && isSelected}\n  ${p => p.boundary && boundary}\n  ${p => p.current && current}\n\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n\n    ${p => !p.isDisabled && hover}\n  }\n`\n\nexport const CalendarItemsContainer = styled(Box)`\n  align-items: center;\n  column-gap: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 48px);\n  justify-items: center;\n  row-gap: 0;\n`\n"],"mappings":"sJAKA,MAAa,EAAW,CAAG;sBACL,EAAG,MAAM,eAAe,CAAC;;;EAKlC,EAAU,CAAG;sBACJ,EAAG,MAAM,eAAe,CAAC;;;EAKlC,EAAa,CAAG;sBACP,EAAG,MAAM,eAAe,CAAC;WACpC,EAAG,MAAM,eAAe,CAAC;;EAIvB,EAAW,CAAG;WAChB,EAAG,MAAM,eAAe,CAAC;EAGvB,EAAU,CAAG;sBACJ,EAAG,MAAM,eAAe,CAAC;EAGlC,EAAQ,CAAG;sBACF,EAAG,MAAM,aAAa,CAAC;WAClC,EAAG,MAAM,eAAe,CAAC;;EAIvB,EAAa,CAAG;sBACP,EAAG,MAAM,aAAa,CAAC;;;EAKhC,EAAe,EAAOA,EAAK;;;;;;;;;IASpC,GAAK,EAAE,UAAY,EAAS;IAC5B,GAAK,EAAE,SAAW,EAAQ;IAC1B,GAAK,EAAE,YAAc,EAAW;IAChC,GAAK,EAAE,YAAc,EAAW;IAChC,GAAK,EAAE,UAAY,EAAS;IAC5B,GAAK,EAAE,SAAW,EAAQ;;;;;;MAMxB,GAAK,CAAC,EAAE,YAAc,EAAM;;EAIrB,EAAyB,EAAOC,EAAI"}
+{"version":3,"file":"calendar.styles.js","names":["Link","Box"],"sources":["../../src/calendar/calendar.styles.ts"],"sourcesContent":["import Box from '../box'\nimport { css, styled, th } from '../core'\nimport Link from '../link'\nimport type { ItemProps } from './calendar.types'\n\nexport const boundary = css`\n  background-color: ${th.color('seaBlue.main')};\n  color: white !important;\n  border-radius: 0;\n`\n\nexport const current = css`\n  background-color: ${th.color('seaBlue.main')};\n  color: white !important;\n  border-radius: 0;\n`\n\nexport const isDisabled = css`\n  background-color: ${th.color('sandstone.97')} !important;\n  color: ${th.color('sandstone.55')} !important;\n  cursor: not-allowed;\n`\n\nexport const isHidden = css`\n  color: ${th.color('sandstone.55')} !important;\n`\n\nexport const isToday = css`\n  border: 1px solid ${th.color('seaBlue.main')};\n`\n\nexport const hover = css`\n  background-color: ${th.color('skyBlue.85')};\n  color: ${th.color('seaBlue.main')};\n  border-radius: 0;\n`\n\nexport const isSelected = css`\n  background-color: ${th.color('skyBlue.85')};\n  border-radius: 0;\n  color: white;\n`\n\nexport const CalendarItem = styled(Link)<ItemProps>`\n  aspect-ratio: 1;\n  border: 0;\n  cursor: pointer;\n  height: 100%;\n  justify-content: center;\n  text-decoration: none;\n  width: 100%;\n\n  ${p => p.isHidden && isHidden}\n  ${p => p.isToday && isToday}\n  ${p => p.isDisabled && isDisabled}\n  ${p => p.isSelected && isSelected}\n  ${p => p.boundary && boundary}\n  ${p => p.current && current}\n\n  &:hover {\n    color: inherit;\n    text-decoration: none;\n\n    ${p => !p.isDisabled && hover}\n  }\n`\n\nexport const CalendarItemsContainer = styled(Box)`\n  align-items: center;\n  column-gap: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, 48px);\n  justify-items: center;\n  row-gap: 0;\n`\n"],"mappings":";;;;;;AAKA,MAAa,WAAW,GAAG;sBACL,GAAG,MAAM,eAAe,CAAC;;;;AAK/C,MAAa,UAAU,GAAG;sBACJ,GAAG,MAAM,eAAe,CAAC;;;;AAK/C,MAAa,aAAa,GAAG;sBACP,GAAG,MAAM,eAAe,CAAC;WACpC,GAAG,MAAM,eAAe,CAAC;;;AAIpC,MAAa,WAAW,GAAG;WAChB,GAAG,MAAM,eAAe,CAAC;;AAGpC,MAAa,UAAU,GAAG;sBACJ,GAAG,MAAM,eAAe,CAAC;;AAG/C,MAAa,QAAQ,GAAG;sBACF,GAAG,MAAM,aAAa,CAAC;WAClC,GAAG,MAAM,eAAe,CAAC;;;AAIpC,MAAa,aAAa,GAAG;sBACP,GAAG,MAAM,aAAa,CAAC;;;;AAK7C,MAAa,eAAe,OAAOA,aAAK,AAAW;;;;;;;;;KAS/C,MAAK,EAAE,YAAY,SAAS;KAC5B,MAAK,EAAE,WAAW,QAAQ;KAC1B,MAAK,EAAE,cAAc,WAAW;KAChC,MAAK,EAAE,cAAc,WAAW;KAChC,MAAK,EAAE,YAAY,SAAS;KAC5B,MAAK,EAAE,WAAW,QAAQ;;;;;;OAMxB,MAAK,CAAC,EAAE,cAAc,MAAM;;;AAIlC,MAAa,yBAAyB,OAAOC,YAAI"}

package/dist/calendar/calendar.types.d.ts

@@ -1,5 +1,6 @@
 import { ThemingProps } from "../theme/types.js";
 import { BoxProps } from "../box/box.types.js";
+import "../box/index.js";
 
 //#region src/calendar/calendar.types.d.ts
 interface DateRange {

package/dist/calendar/calendar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.types.d.ts","names":[],"sources":["../../src/calendar/calendar.types.ts"],"sourcesContent":[],"mappings":";;;;UAGiB,SAAA;cACH;EADG,OAAA,CAAA,CAAA,CAEL,IAFc;;AACZ,IAAA,CAIF,aAAA,CAAA,CAAA,CAJE,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;;;AAId,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA;AAMA,CAAA,CAAA;AAEiB,IAAA,CAFL,YAAA,CAAA,CAAA,CAEK,CAAA,KAAA,CAAqB,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA;AAAA,SAAA,CAArB,qBAAA,CAAqB;YACvB,CAAA,CAAA,CAAA,SAAA;aAEE,CAAA,CAAA,CAAA,OAAA;EAAI,YAAA,CAAA,CAAA,CAAJ,IAAI;AAGrB;AAA2B,SAAA,CAAV,UAAA,CAAU;YACZ,CAAA,CAAA,CAAA,SAAA;oBAEP,CAAA,CAAA,CAAA,OAAA;MACU,CAAA,CADV,YACU;eACD,CAAA,CAAA,CADC,SACD;cACL,CAAA,CAAA,CADK,YACL;EAAI,QAAA,CAAA,CAAJ,IAAI;AAGhB;AAYiB,IAAA,CAZL,SAAA,CAAA,CAAA,CAYa;EAqBR,QAAA,CAAA,CAAA,CAAA,OAAU;EASf,OAAA,CAAA,CAAA,CAAA,OAAY;EAEZ,UAAA,CAAA,CAAA,CAAA,OAAa;EAAA,QAAA,CAAA,CAAA,CAAA,OAAA;SAAQ,CAAA,CAAA,CAAA,OAAA;YAAL,CAAA,CAAA,CAAA,OAAA;;;;;AAcR,SAAA,CA9CH,QAAA,CA8CG;EAAS,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,EAAA,CAAA,EAAA,CAAA,GAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,MAAA,CAAA,KAAA,CAAA,EAAA,CAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;;;;QAxCrB;;;;;;;;;;;;;;UAeS,UAAA;SACR;;;;;;;KAQG,YAAA,CAAA,CAAA;KAEA,aAAA,CAAA,CAAA,CAAgB,KAAK,gCAC/B;;eAEe;;;;;;;QAOP;;0BAEkB;;kBAER"}
+{"version":3,"file":"calendar.types.d.ts","names":[],"sources":["../../src/calendar/calendar.types.ts"],"sourcesContent":[],"mappings":";;;;;UAGiB,SAAA;cACH;YACF;AAFZ;AAKY,IAAA,CAAA,aAAA,CAAA,CAAA,CAAa,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA;AAMzB,CAAA,CAAA;AAEA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,IAAA,CAAA;AAMA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA;;AAGQ,IAAA,CAXI,YAAA,CAAA,CAAA,CAWJ,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA;AACU,SAAA,CAVD,qBAAA,CAUC;EACD,UAAA,CAAA,CAAA,CAVF,SAUE;EACL,WAAA,CAAA,CAAA,CAAA,OAAA;EAAI,YAAA,CAAA,CAAA,CATC,IASD;AAGhB;AAYiB,SAAA,CArBA,UAAA,CA2BT;EAeS,UAAA,CAAA,CAAA,CAzCF,SAyCY;EASf,kBAAY,CAAA,CAAA,CAAA,OAAA;EAEZ,IAAA,CAAA,CAlDJ,YAkDiB;EAAQ,aAAA,CAAA,CAAA,CAjDf,SAiDe;EAAL,YAAA,CAAA,CAAA,CAhDX,YAgDW;EAC1B,QAAA,CAAA,CAhDU,IAgDV;;AASQ,IAAA,CAtDE,SAAA,CAAA,CAAA,CAsDF;EAEkB,QAAA,CAAA,CAAA,CAAA,OAAA;EAER,OAAA,CAAA,CAAA,CAAA,OAAA;EAAS,UAAA,CAAA,CAAA,CAAA,OAAA;;;;;;;;UA9CZ,QAAA;;;;;;QAMT;;;;;;;;;;;;;;UAeS,UAAA;SACR;;;;;;;KAQG,YAAA,CAAA,CAAA;KAEA,aAAA,CAAA,CAAA,CAAgB,KAAK,gCAC/B;;eAEe;;;;;;;QAOP;;0BAEkB;;kBAER"}

package/dist/calendar/components/calendarHeader.js

@@ -1,2 +1,52 @@
-import{cs as e}from"../../utils/styles.js";import t from"../../box/box.js";import{IconButton as n}from"../../button/buttons.js";import{TimeUnitHeader as r}from"./timeUnitHeader.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({nextDisabled:o,onChangeViewItem:s,onSetTimeUnitMode:c,prevDisabled:l,timeUnitMode:u,viewMonth:d})=>a(t,{borderBottom:`1px solid lightgray`,centerV:!0,className:e(`vui-calendar-header`),children:[i(t,{className:`vui-calendar-header-left`,children:i(r,{onSetTimeUnitMode:c,timeUnitMode:u,viewMonth:d})}),a(t,{className:`vui-calendar-header-right`,flex:`1`,justifyContent:`right`,children:[i(n,{"aria-label":`previous`,className:`icon`,disabled:l,h:40,icon:`uiChevronLeft`,onClick:()=>s(`prev`),size:`sm`,w:40}),i(n,{"aria-label":`next`,className:`icon`,disabled:o,h:40,icon:`uiChevronRight`,onClick:()=>s(`next`),size:`sm`,w:40})]})]});export{o as CalendarHeader};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../../utils/styles.js";
+import box_default from "../../box/box.js";
+import { IconButton } from "../../button/buttons.js";
+import { TimeUnitHeader } from "./timeUnitHeader.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/calendar/components/calendarHeader.tsx
+const size = 40;
+/**
+* Header for the calendar
+*/
+const CalendarHeader = ({ nextDisabled, onChangeViewItem, onSetTimeUnitMode, prevDisabled, timeUnitMode, viewMonth }) => /* @__PURE__ */ jsxs(box_default, {
+	borderBottom: "1px solid lightgray",
+	centerV: true,
+	className: cs("vui-calendar-header"),
+	children: [/* @__PURE__ */ jsx(box_default, {
+		className: "vui-calendar-header-left",
+		children: /* @__PURE__ */ jsx(TimeUnitHeader, {
+			onSetTimeUnitMode,
+			timeUnitMode,
+			viewMonth
+		})
+	}), /* @__PURE__ */ jsxs(box_default, {
+		className: "vui-calendar-header-right",
+		flex: "1",
+		justifyContent: "right",
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "previous",
+			className: "icon",
+			disabled: prevDisabled,
+			h: size,
+			icon: "uiChevronLeft",
+			onClick: () => onChangeViewItem("prev"),
+			size: "sm",
+			w: size
+		}), /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": "next",
+			className: "icon",
+			disabled: nextDisabled,
+			h: size,
+			icon: "uiChevronRight",
+			onClick: () => onChangeViewItem("next"),
+			size: "sm",
+			w: size
+		})]
+	})]
+});
+
+//#endregion
+export { CalendarHeader };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=calendarHeader.js.map

package/dist/calendar/components/calendarHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendarHeader.js","names":["CalendarHeader: FC<Props>","Box"],"sources":["../../../src/calendar/components/calendarHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport Box from '../../box'\nimport { IconButton } from '../../button'\nimport { cs } from '../../utils'\nimport type { FlowDirection, TimeUnitMode } from '../calendar.types'\nimport { TimeUnitHeader } from './timeUnitHeader'\n\ntype Props = {\n  nextDisabled?: boolean\n  onChangeViewItem: (direction: FlowDirection) => void\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  prevDisabled?: boolean\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\nconst size = 40\n\n/**\n * Header for the calendar\n */\nexport const CalendarHeader: FC<Props> = ({\n  nextDisabled,\n  onChangeViewItem,\n  onSetTimeUnitMode,\n  prevDisabled,\n  timeUnitMode,\n  viewMonth,\n}) => (\n  <Box borderBottom=\"1px solid lightgray\" centerV className={cs('vui-calendar-header')}>\n    <Box className=\"vui-calendar-header-left\">\n      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />\n    </Box>\n    <Box className=\"vui-calendar-header-right\" flex=\"1\" justifyContent=\"right\">\n      <IconButton\n        aria-label=\"previous\"\n        className=\"icon\"\n        disabled={prevDisabled}\n        h={size}\n        icon=\"uiChevronLeft\"\n        onClick={() => onChangeViewItem('prev')}\n        size=\"sm\"\n        w={size}\n      />\n      <IconButton\n        aria-label=\"next\"\n        className=\"icon\"\n        disabled={nextDisabled}\n        h={size}\n        icon=\"uiChevronRight\"\n        onClick={() => onChangeViewItem('next')}\n        size=\"sm\"\n        w={size}\n      />\n    </Box>\n  </Box>\n)\n"],"mappings":"uOAiBA,MAKaA,GAA6B,CACxC,eACA,mBACA,oBACA,eACA,eACA,eAEA,EAACC,EAAAA,CAAI,aAAa,sBAAsB,QAAA,GAAQ,UAAW,EAAG,sBAAsB,WAClF,EAACA,EAAAA,CAAI,UAAU,oCACb,EAAC,EAAA,CAAkC,oBAAiC,eAAyB,aAAa,EACtG,CACN,EAACA,EAAAA,CAAI,UAAU,4BAA4B,KAAK,IAAI,eAAe,kBACjE,EAAC,EAAA,CACC,aAAW,WACX,UAAU,OACV,SAAU,EACV,EAAG,GACH,KAAK,gBACL,YAAe,EAAiB,OAAO,CACvC,KAAK,KACL,EAAG,IACH,CACF,EAAC,EAAA,CACC,aAAW,OACX,UAAU,OACV,SAAU,EACV,EAAG,GACH,KAAK,iBACL,YAAe,EAAiB,OAAO,CACvC,KAAK,KACL,EAAG,IACH,CAAA,EACE,CAAA,EACF"}
+{"version":3,"file":"calendarHeader.js","names":["CalendarHeader: FC<Props>","Box"],"sources":["../../../src/calendar/components/calendarHeader.tsx"],"sourcesContent":["import type { FC } from 'react'\n\nimport Box from '../../box'\nimport { IconButton } from '../../button'\nimport { cs } from '../../utils'\nimport type { FlowDirection, TimeUnitMode } from '../calendar.types'\nimport { TimeUnitHeader } from './timeUnitHeader'\n\ntype Props = {\n  nextDisabled?: boolean\n  onChangeViewItem: (direction: FlowDirection) => void\n  onSetTimeUnitMode: (mode: TimeUnitMode) => void\n  prevDisabled?: boolean\n  timeUnitMode: TimeUnitMode\n  viewMonth: Date\n}\n\nconst size = 40\n\n/**\n * Header for the calendar\n */\nexport const CalendarHeader: FC<Props> = ({\n  nextDisabled,\n  onChangeViewItem,\n  onSetTimeUnitMode,\n  prevDisabled,\n  timeUnitMode,\n  viewMonth,\n}) => (\n  <Box borderBottom=\"1px solid lightgray\" centerV className={cs('vui-calendar-header')}>\n    <Box className=\"vui-calendar-header-left\">\n      <TimeUnitHeader onSetTimeUnitMode={onSetTimeUnitMode} timeUnitMode={timeUnitMode} viewMonth={viewMonth} />\n    </Box>\n    <Box className=\"vui-calendar-header-right\" flex=\"1\" justifyContent=\"right\">\n      <IconButton\n        aria-label=\"previous\"\n        className=\"icon\"\n        disabled={prevDisabled}\n        h={size}\n        icon=\"uiChevronLeft\"\n        onClick={() => onChangeViewItem('prev')}\n        size=\"sm\"\n        w={size}\n      />\n      <IconButton\n        aria-label=\"next\"\n        className=\"icon\"\n        disabled={nextDisabled}\n        h={size}\n        icon=\"uiChevronRight\"\n        onClick={() => onChangeViewItem('next')}\n        size=\"sm\"\n        w={size}\n      />\n    </Box>\n  </Box>\n)\n"],"mappings":";;;;;;;AAiBA,MAAM,OAAO;;;;AAKb,MAAaA,kBAA6B,EACxC,cACA,kBACA,mBACA,cACA,cACA,gBAEA,qBAACC;CAAI,cAAa;CAAsB;CAAQ,WAAW,GAAG,sBAAsB;YAClF,oBAACA;EAAI,WAAU;YACb,oBAAC;GAAkC;GAAiC;GAAyB;IAAa;GACtG,EACN,qBAACA;EAAI,WAAU;EAA4B,MAAK;EAAI,gBAAe;aACjE,oBAAC;GACC,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;IACH,EACF,oBAAC;GACC,cAAW;GACX,WAAU;GACV,UAAU;GACV,GAAG;GACH,MAAK;GACL,eAAe,iBAAiB,OAAO;GACvC,MAAK;GACL,GAAG;IACH;GACE;EACF"}

package/dist/calendar/components/dayPicker.js

@@ -1,19 +1,51 @@
-import{cs as e}from"../../utils/styles.js";import{th as t}from"../../core/theme.js";import{styled as n}from"../../core/styled.js";import r from"../../box/box.js";import{CalendarItem as i,CalendarItemsContainer as a}from"../calendar.styles.js";import{weekDays as o}from"../consts.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=n(i)`
+import { cs } from "../../utils/styles.js";
+import { th } from "../../core/theme.js";
+import { styled } from "../../core/styled.js";
+import box_default from "../../box/box.js";
+import { CalendarItem, CalendarItemsContainer } from "../calendar.styles.js";
+import { weekDays } from "../consts.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/calendar/components/dayPicker.tsx
+const DayItem = styled(CalendarItem)`
   aspect-ratio: 1;
   position: relative;
   font-size: 14px;
   font-weight: 500;
   width: 40px;
   height: 40px;
-  color: ${t.color(`seaBlue.main`)};
+  color: ${th.color("seaBlue.main")};
   display: inline-flex;
   align-items: center;
 
   & > .vui-t {
     margin-bottom: -3px;
   }
-`,u=n(a)`
+`;
+const DaysContainer = styled(CalendarItemsContainer)`
   grid-template-columns: repeat(7, 1fr);
   grid-template-rows: auto;
-`,d=({calendar:t,onSelectDay:n})=>c(u,{className:e(`vui-day-picker`),mt:1,wrap:!0,children:[o.map((e,t)=>s(r,{border:0,className:`dayHeader`,color:`seaBlue.main`,fontSize:16,fontWeight:500,children:e},`week-day-${t}`)),t.items.map(t=>s(l,{className:e(`vui-day-item`),onClick:!t.isDisabled&&n?.(t.date)||void 0,...t,children:t.date.getUTCDate()},t.date.getTime()))]});export{d as DayPicker};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+`;
+const DayPicker = ({ calendar, onSelectDay }) => /* @__PURE__ */ jsxs(DaysContainer, {
+	className: cs("vui-day-picker"),
+	mt: 1,
+	wrap: true,
+	children: [weekDays.map((day, index) => /* @__PURE__ */ jsx(box_default, {
+		border: 0,
+		className: "dayHeader",
+		color: "seaBlue.main",
+		fontSize: 16,
+		fontWeight: 500,
+		children: day
+	}, `week-day-${index}`)), calendar.items.map((item) => /* @__PURE__ */ jsx(DayItem, {
+		className: cs("vui-day-item"),
+		onClick: !item.isDisabled && onSelectDay?.(item.date) || void 0,
+		...item,
+		children: item.date.getUTCDate()
+	}, item.date.getTime()))]
+});
+
+//#endregion
+export { DayPicker };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=dayPicker.js.map

package/dist/calendar/components/dayPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dayPicker.js","names":["Box"],"sources":["../../../src/calendar/components/dayPicker.tsx"],"sourcesContent":["import Box from '../../box'\nimport { styled, th } from '../../core'\nimport { cs } from '../../utils'\nimport { CalendarItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { ItemProps, TimeResult } from '../calendar.types'\nimport { weekDays } from '../consts'\n\ntype DayPickerProps = {\n  calendar: TimeResult\n  onSelectDay?: (date: Date) => void\n}\n\nconst DayItem = styled(CalendarItem)<ItemProps>`\n  aspect-ratio: 1;\n  position: relative;\n  font-size: 14px;\n  font-weight: 500;\n  width: 40px;\n  height: 40px;\n  color: ${th.color('seaBlue.main')};\n  display: inline-flex;\n  align-items: center;\n\n  & > .vui-t {\n    margin-bottom: -3px;\n  }\n`\n\nconst DaysContainer = styled(CalendarItemsContainer)`\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto;\n`\n\nexport const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (\n  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>\n    {weekDays.map((day, index) => (\n      <Box\n        border={0}\n        className=\"dayHeader\"\n        color=\"seaBlue.main\"\n        fontSize={16}\n        fontWeight={500}\n        key={`week-day-${index}`}\n      >\n        {day}\n      </Box>\n    ))}\n    {calendar.items.map(item => (\n      <DayItem\n        className={cs('vui-day-item')}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}\n        {...item}\n      >\n        {item.date.getUTCDate()}\n      </DayItem>\n    ))}\n  </DaysContainer>\n)\n"],"mappings":"6UAYA,MAAM,EAAU,EAAO,EAAa;;;;;;;WAOzB,EAAG,MAAM,eAAe,CAAC;;;;;;;EAS9B,EAAgB,EAAO,EAAuB;;;EAKvC,GAAa,CAAE,WAAU,iBACpC,EAAC,EAAA,CAAc,UAAW,EAAG,iBAAiB,CAAE,GAAI,EAAG,KAAA,aACpD,EAAS,KAAK,EAAK,IAClB,EAACA,EAAAA,CACC,OAAQ,EACR,UAAU,YACV,MAAM,eACN,SAAU,GACV,WAAY,aAGX,GAFI,YAAY,IAGb,CACN,CACD,EAAS,MAAM,IAAI,GAClB,EAAC,EAAA,CACC,UAAW,EAAG,eAAe,CAE7B,QAAU,CAAC,EAAK,YAAc,IAAc,EAAK,KAAK,EAAK,IAAA,GAC3D,GAAI,WAEH,EAAK,KAAK,YAAY,EAJlB,EAAK,KAAK,SAAS,CAKhB,CACV,CAAA,EACY"}
+{"version":3,"file":"dayPicker.js","names":["Box"],"sources":["../../../src/calendar/components/dayPicker.tsx"],"sourcesContent":["import Box from '../../box'\nimport { styled, th } from '../../core'\nimport { cs } from '../../utils'\nimport { CalendarItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { ItemProps, TimeResult } from '../calendar.types'\nimport { weekDays } from '../consts'\n\ntype DayPickerProps = {\n  calendar: TimeResult\n  onSelectDay?: (date: Date) => void\n}\n\nconst DayItem = styled(CalendarItem)<ItemProps>`\n  aspect-ratio: 1;\n  position: relative;\n  font-size: 14px;\n  font-weight: 500;\n  width: 40px;\n  height: 40px;\n  color: ${th.color('seaBlue.main')};\n  display: inline-flex;\n  align-items: center;\n\n  & > .vui-t {\n    margin-bottom: -3px;\n  }\n`\n\nconst DaysContainer = styled(CalendarItemsContainer)`\n  grid-template-columns: repeat(7, 1fr);\n  grid-template-rows: auto;\n`\n\nexport const DayPicker = ({ calendar, onSelectDay }: DayPickerProps) => (\n  <DaysContainer className={cs('vui-day-picker')} mt={1} wrap>\n    {weekDays.map((day, index) => (\n      <Box\n        border={0}\n        className=\"dayHeader\"\n        color=\"seaBlue.main\"\n        fontSize={16}\n        fontWeight={500}\n        key={`week-day-${index}`}\n      >\n        {day}\n      </Box>\n    ))}\n    {calendar.items.map(item => (\n      <DayItem\n        className={cs('vui-day-item')}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectDay?.(item.date)) || undefined}\n        {...item}\n      >\n        {item.date.getUTCDate()}\n      </DayItem>\n    ))}\n  </DaysContainer>\n)\n"],"mappings":";;;;;;;;;AAYA,MAAM,UAAU,OAAO,aAAa,AAAW;;;;;;;WAOpC,GAAG,MAAM,eAAe,CAAC;;;;;;;;AASpC,MAAM,gBAAgB,OAAO,uBAAuB;;;;AAKpD,MAAa,aAAa,EAAE,UAAU,kBACpC,qBAAC;CAAc,WAAW,GAAG,iBAAiB;CAAE,IAAI;CAAG;YACpD,SAAS,KAAK,KAAK,UAClB,oBAACA;EACC,QAAQ;EACR,WAAU;EACV,OAAM;EACN,UAAU;EACV,YAAY;YAGX;IAFI,YAAY,QAGb,CACN,EACD,SAAS,MAAM,KAAI,SAClB,oBAAC;EACC,WAAW,GAAG,eAAe;EAE7B,SAAU,CAAC,KAAK,cAAc,cAAc,KAAK,KAAK,IAAK;EAC3D,GAAI;YAEH,KAAK,KAAK,YAAY;IAJlB,KAAK,KAAK,SAAS,CAKhB,CACV;EACY"}

package/dist/calendar/components/monthPicker.js

@@ -1,2 +1,23 @@
-import{cs as e}from"../../utils/styles.js";import{CalendarItem as t,CalendarItemsContainer as n}from"../calendar.styles.js";import{monthsShort as r}from"../consts.js";import{jsx as i}from"react/jsx-runtime";const a=({calendar:a,onSelectMonth:o})=>i(n,{className:e(`vui-month-picker`),gridTemplateRows:`repeat(4, 65px)`,children:a.items.map(e=>i(t,{fontWeight:500,onClick:!e.isDisabled&&o&&o(e.date)||void 0,...e,alignContent:`center`,textAlign:`center`,children:r[e.date.getUTCMonth()]},e.date.getTime()))});export{a as MonthPicker};globalThis.__vuiVersion__=`3.0.0-beta.8`;
+import { cs } from "../../utils/styles.js";
+import { CalendarItem, CalendarItemsContainer } from "../calendar.styles.js";
+import { monthsShort } from "../consts.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/calendar/components/monthPicker.tsx
+const MonthPicker = ({ calendar, onSelectMonth }) => /* @__PURE__ */ jsx(CalendarItemsContainer, {
+	className: cs("vui-month-picker"),
+	gridTemplateRows: "repeat(4, 65px)",
+	children: calendar.items.map((item) => /* @__PURE__ */ jsx(CalendarItem, {
+		fontWeight: 500,
+		onClick: !item.isDisabled && onSelectMonth && onSelectMonth(item.date) || void 0,
+		...item,
+		alignContent: "center",
+		textAlign: "center",
+		children: monthsShort[item.date.getUTCMonth()]
+	}, item.date.getTime()))
+});
+
+//#endregion
+export { MonthPicker };
+globalThis.__vuiVersion__ = "3.0.0"
 //# sourceMappingURL=monthPicker.js.map

package/dist/calendar/components/monthPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"monthPicker.js","names":["MonthItem"],"sources":["../../../src/calendar/components/monthPicker.tsx"],"sourcesContent":["import { cs } from '../../utils'\nimport { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\nimport { monthsShort } from '../consts'\n\ntype MonthPickerProps = {\n  calendar: TimeResult\n  onSelectMonth?: (date: Date) => void\n}\n\nexport const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (\n  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows=\"repeat(4, 65px)\">\n    {calendar.items.map(item => (\n      <MonthItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {monthsShort[item.date.getUTCMonth()]}\n      </MonthItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":"+MAUA,MAAa,GAAe,CAAE,WAAU,mBACtC,EAAC,EAAA,CAAuB,UAAW,EAAG,mBAAmB,CAAE,iBAAiB,2BACzE,EAAS,MAAM,IAAI,GAClB,EAACA,EAAAA,CACC,WAAY,IAEZ,QAAU,CAAC,EAAK,YAAc,GAAiB,EAAc,EAAK,KAAK,EAAK,IAAA,GAC5E,GAAI,EACJ,aAAa,SACb,UAAU,kBAET,EAAY,EAAK,KAAK,aAAa,GAN/B,EAAK,KAAK,SAAS,CAOd,CACZ,EACqB"}
+{"version":3,"file":"monthPicker.js","names":["MonthItem"],"sources":["../../../src/calendar/components/monthPicker.tsx"],"sourcesContent":["import { cs } from '../../utils'\nimport { CalendarItem as MonthItem, CalendarItemsContainer } from '../calendar.styles'\nimport type { TimeResult } from '../calendar.types'\nimport { monthsShort } from '../consts'\n\ntype MonthPickerProps = {\n  calendar: TimeResult\n  onSelectMonth?: (date: Date) => void\n}\n\nexport const MonthPicker = ({ calendar, onSelectMonth }: MonthPickerProps) => (\n  <CalendarItemsContainer className={cs('vui-month-picker')} gridTemplateRows=\"repeat(4, 65px)\">\n    {calendar.items.map(item => (\n      <MonthItem\n        fontWeight={500}\n        key={item.date.getTime()}\n        onClick={(!item.isDisabled && onSelectMonth && onSelectMonth(item.date)) || undefined}\n        {...item}\n        alignContent=\"center\"\n        textAlign=\"center\"\n      >\n        {monthsShort[item.date.getUTCMonth()]}\n      </MonthItem>\n    ))}\n  </CalendarItemsContainer>\n)\n"],"mappings":";;;;;;AAUA,MAAa,eAAe,EAAE,UAAU,oBACtC,oBAAC;CAAuB,WAAW,GAAG,mBAAmB;CAAE,kBAAiB;WACzE,SAAS,MAAM,KAAI,SAClB,oBAACA;EACC,YAAY;EAEZ,SAAU,CAAC,KAAK,cAAc,iBAAiB,cAAc,KAAK,KAAK,IAAK;EAC5E,GAAI;EACJ,cAAa;EACb,WAAU;YAET,YAAY,KAAK,KAAK,aAAa;IAN/B,KAAK,KAAK,SAAS,CAOd,CACZ;EACqB"}