@onesy/ui-react 1.0.0

package/esm/Calendar/Calendar.js

@@ -0,0 +1,667 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "calendar", "calendarDefault", "onChangeCalendar", "start", "end", "menu", "range", "now", "calendars", "min", "max", "validate", "menu_month_previous_unit", "menu_month_next_unit", "valid", "getMonths", "getYears", "belowCalendars", "disabled", "IconPrevious", "IconNext", "IconDropDown", "CalendarMonthProps", "OptionButtonProps", "PaginationItemsProps", "renderDay", "renderDayName", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { clamp, is, isEnvironment, Try } from '@onesy/utils';
+import { classNames, style, useOnesyTheme } from '@onesy/style-react';
+import { OnesyDate, add, remove, format, set } from '@onesy/date';
+import IconMaterialNavigateBefore from '@amaui/icons-material-rounded-react/IconMaterialNavigateBeforeW100';
+import IconMaterialNavigateNext from '@amaui/icons-material-rounded-react/IconMaterialNavigateNextW100';
+import IconMaterialArrowDropDown from '@amaui/icons-material-rounded-react/IconMaterialArrowDropDownW100';
+import SurfaceElement from '../Surface';
+import LineElement from '../Line';
+import FadeElement from '../Fade';
+import IconButtonElement from '../IconButton';
+import ButtonElement from '../Button';
+import CalendarMonthElement from '../CalendarMonth';
+import ListElement from '../List';
+import ListItemElement from '../ListItem';
+import DividerElement from '../Divider';
+import TypeElement from '../Type';
+import CarouselElement from '../Carousel';
+import PaginationItemElement from '../PaginationItem';
+import { IconDoneAnimated } from '../Buttons/Buttons';
+import { iconFontSize, staticClassName } from '../utils';
+const useStyle = style(theme => ({
+  root: {
+    borderRadius: theme.methods.shape.radius.value(4, 'px'),
+    overflow: 'hidden'
+  },
+  size_small: {
+    width: '275px',
+    '& .onesy-ListItem-root': {
+      minHeight: '40px'
+    },
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '44px'
+    }
+  },
+  size_regular: {
+    width: '320px',
+    '& .onesy-ListItem-root': {
+      minHeight: '50px'
+    },
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '58px'
+    }
+  },
+  size_large: {
+    width: '375px',
+    '& .onesy-ListItem-root': {
+      minHeight: '60px'
+    },
+    '& .onesy-ListItem-inset': {
+      paddingInlineStart: '78px'
+    }
+  },
+  range: {
+    width: 'unset'
+  },
+  header: {
+    width: '100%',
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(0.5, 'px')}`
+  },
+  calendars: {
+    width: '100%',
+    padding: `0 ${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1, 'px')}`
+  },
+  calendar: {
+    width: '100%'
+  },
+  option: {
+    transition: theme.methods.transitions.make('opacity'),
+    '&.onesy-Button-root': {
+      paddingInline: `${theme.methods.space.value(1, 'px')} 0`
+    },
+    '& .onesy-Button-end': {
+      paddingInline: `${theme.methods.space.value(1, 'px')} 0`
+    }
+  },
+  option_secondary: {
+    opacity: '0.4'
+  },
+  list: {
+    width: '100%',
+    maxHeight: '307px',
+    overflowY: 'auto',
+    '&.onesy-List-root': {
+      maxWidth: 'unset !important',
+      boxShadow: 'none'
+    }
+  },
+  listItem: {},
+  list_version_year: {
+    width: '100%',
+    maxHeight: '299px',
+    overflowY: 'auto',
+    marginTop: '8px'
+  },
+  day_version_year: {
+    flex: '0 1 72px',
+    height: '36px',
+    '&:hover': {
+      boxShadow: 'inset 0px 0px 0px 1px currentColor'
+    }
+  },
+  carousel: {
+    '&.onesy-Carousel-root': {
+      height: '100vh',
+      maxHeight: '440px',
+      padding: `0 ${theme.methods.space.value(1, 'px')}`
+    }
+  },
+  carousel_item: {
+    width: '100%',
+    marginTop: '16px',
+    userSelect: 'none'
+  },
+  carousel_item_label: {
+    paddingInlineStart: theme.methods.space.value(2, 'px')
+  },
+  arrow: {
+    transition: theme.methods.transitions.make('transform')
+  },
+  arrow_open: {
+    transform: 'rotate(-180deg)'
+  },
+  divider: {
+    '&.onesy-Divider-root': {
+      margin: '0px'
+    }
+  }
+}), {
+  name: 'onesy-Calendar'
+});
+const Calendar = /*#__PURE__*/React.forwardRef((props__, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendar?.props?.default), props__), [props__]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const CalendarMonth = React.useMemo(() => theme?.elements?.CalendarMonth || CalendarMonthElement, [theme]);
+  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
+  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Carousel = React.useMemo(() => theme?.elements?.Carousel || CarouselElement, [theme]);
+  const PaginationItem = React.useMemo(() => theme?.elements?.PaginationItem || PaginationItemElement, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      version = 'regular',
+      size = 'regular',
+      value: value_,
+      valueDefault,
+      onChange,
+      calendar: calendar_,
+      calendarDefault,
+      onChangeCalendar,
+      start,
+      end,
+      menu = 'month-year',
+      range,
+      now,
+      calendars = props.range ? 2 : 1,
+      min,
+      max,
+      validate,
+      menu_month_previous_unit,
+      menu_month_next_unit,
+      valid: valid_,
+      getMonths: getMonths_,
+      getYears: getYears_,
+      belowCalendars,
+      disabled,
+      IconPrevious = IconMaterialNavigateBefore,
+      IconNext = IconMaterialNavigateNext,
+      IconDropDown = IconMaterialArrowDropDown,
+      CalendarMonthProps,
+      OptionButtonProps,
+      PaginationItemsProps,
+      renderDay,
+      renderDayName,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined),
+    month: React.useRef(undefined),
+    year: React.useRef(undefined),
+    inProgressTransition: React.useRef()
+  };
+  const [value, setValue] = React.useState(() => {
+    const valueResult = (valueDefault !== undefined ? valueDefault : value_) || now && (range ? [new OnesyDate(), new OnesyDate()] : [new OnesyDate()]);
+    return (is('array', valueResult) ? valueResult : [valueResult]).filter(Boolean);
+  });
+  const [calendar, setCalendar] = React.useState((calendarDefault !== undefined ? calendarDefault : calendar_) || new OnesyDate());
+  const [carousel, setCarousel] = React.useState();
+  const [open, setOpen] = React.useState();
+
+  // Value
+  React.useEffect(() => {
+    if (value_ !== undefined && value_ !== value) setValue((is('array', value_) ? value_ : [value_]).filter(Boolean));
+  }, [value_]);
+
+  // Calendar
+  React.useEffect(() => {
+    if (calendar_ !== undefined && calendar_ !== calendar) setCalendar(calendar_);
+  }, [calendar_]);
+  const onUpdate = React.useCallback(valueNew => {
+    // Inner update
+    if (!props.hasOwnProperty('value')) setValue(valueNew);
+    if (is('function', onChange)) onChange(!range ? valueNew[0] : valueNew);
+  }, [range, onChange]);
+  const onUpdateCalendar = React.useCallback(valueNew => {
+    // Inner update
+    if (!props.hasOwnProperty('calendar')) setCalendar(valueNew);
+    if (is('function', onChangeCalendar)) onChangeCalendar(valueNew);
+  }, [onChangeCalendar]);
+  const onUpdateCalendarOption = React.useCallback(valueNew => {
+    setOpen(null);
+    onUpdateCalendar(valueNew);
+  }, []);
+  const onCalendarMonthChange = React.useCallback(valueNew_ => {
+    const valueNew = is('array', valueNew_) ? valueNew_ : [valueNew_];
+    if (valueNew !== value) onUpdate(valueNew);
+  }, [value]);
+  const onCalendarMonthChangeCalendar = React.useCallback(valueNew => {
+    onUpdateCalendar(valueNew);
+  }, [calendar]);
+  const valid = React.useCallback(function () {
+    if (is('function', valid_)) return valid_(...arguments);
+    return true;
+  }, [valid_]);
+  const move = React.useCallback(function () {
+    let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'month';
+    if (refs.inProgressTransition.current) return;
+    onUpdateCalendar((next ? add : remove)(1, unit, calendar));
+  }, [calendar]);
+  const onOpen = React.useCallback(function () {
+    let valueUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'month';
+    const valueNew = open === valueUpdate ? null : valueUpdate;
+    setOpen(valueNew);
+
+    // Scroll to the value
+    if (valueNew) setTimeout(() => {
+      const list = refs[valueNew]?.current;
+      if (list) {
+        const valueData = valueNew === 'month' ? calendar.month - 1 : calendar.year;
+        Try(() => {
+          const element = list.querySelector(`[data-value="${valueData}"]`);
+          if (element) list.scrollTo({
+            top: clamp(element.offsetTop - element.parentElement.offsetTop + (menu === 'month' ? -104 : 51), 0),
+            behavior: 'smooth'
+          });
+        });
+      }
+    });
+  }, [open, menu, calendar]);
+  const getMonths = is('function', getMonths_) ? getMonths_ : React.useCallback(() => {
+    const valueCalendar = set(14, 'day', calendar);
+    const result = Array.from({
+      length: 12
+    }).map((item, index) => ({
+      value: set(index, 'month', valueCalendar)
+    }));
+    return result;
+  }, [calendar]);
+  const getYears = is('function', getYears_) ? getYears_ : React.useCallback(() => {
+    const minYear = 1970;
+    const length = 130;
+    return Array.from({
+      length
+    }).map((item, index) => ({
+      value: set(minYear + index, 'year', calendar)
+    }));
+  }, []);
+  const onCarouselInit = React.useCallback(() => {
+    // Scroll to the value
+    setTimeout(() => {
+      Try(() => {
+        const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+        let item = rootDocument.body.querySelector('[data-month-from]');
+        if (item) {
+          item = item.parentElement.parentElement;
+          setCarousel({
+            y: item.offsetTop
+          });
+        }
+      });
+    }, 140);
+  }, []);
+
+  // Prevent multiple moves of the calendar
+  // before the previous transition is done
+  const onTransition = React.useCallback((element, status) => {
+    refs.inProgressTransition.current = !['entered', 'exited', 'removed'].includes(status);
+  }, []);
+  const calendarMonthProps = _objectSpread({
+    renderDay,
+    renderDayName,
+    disabled
+  }, CalendarMonthProps);
+  const main = () => {
+    switch (version) {
+      case 'year':
+        return /*#__PURE__*/React.createElement(Carousel, {
+          color: "default",
+          id: value[0].milliseconds + (value[1]?.milliseconds || 0) + year,
+          value: carousel,
+          arrows: false,
+          progress: false,
+          orientation: "vertical",
+          moveBeyondEdge: false,
+          itemSize: "auto",
+          gap: 0,
+          free: true,
+          onInit: onCarouselInit,
+          items: Array.from({
+            length: 12
+          }).map((item, index) => {
+            const calendarOnesyDate = set(index, 'month', calendar);
+            return /*#__PURE__*/React.createElement(Line, {
+              key: index,
+              gap: 1.5,
+              direction: "column",
+              className: classNames([classes.carousel_item])
+            }, /*#__PURE__*/React.createElement(Type, {
+              version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+              className: classNames([classes.carousel_item_label])
+            }, format(calendarOnesyDate, 'MMMM'), " ", format(calendarOnesyDate, 'YYYY')), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
+              color: "default",
+              value: value,
+              calendar: calendarOnesyDate,
+              valid: valid,
+              now: now,
+              size: size,
+              range: range,
+              offset: index,
+              min: min,
+              max: max,
+              validate: validate,
+              outside: false,
+              noTransition: true
+            }, calendarMonthProps, {
+              onChange: onCalendarMonthChange,
+              onChangeCalendar: onCalendarMonthChangeCalendar,
+              TransitionProps: {
+                onTransition
+              },
+              className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
+            })));
+          }),
+          ItemWrapperProps: {
+            style: {
+              width: '100%'
+            }
+          },
+          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-carousel'], classes.carousel])
+        });
+      default:
+        return /*#__PURE__*/React.createElement(Line, {
+          gap: 0,
+          direction: "column",
+          align: "center",
+          style: {
+            width: '100%'
+          }
+        }, /*#__PURE__*/React.createElement(Line, {
+          direction: "row",
+          align: "center",
+          className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendars'], classes.calendars])
+        }, Array.from({
+          length: calendars
+        }).map((item, index) => {
+          const calendarOnesyDate = add(index, 'month', calendar);
+          return /*#__PURE__*/React.createElement(Line, {
+            key: index,
+            gap: 1,
+            direction: "column",
+            style: {
+              width: '100%'
+            }
+          }, calendars > 1 && /*#__PURE__*/React.createElement(Type, {
+            version: size === 'large' ? 'l1' : size === 'regular' ? 'l2' : 'l3',
+            style: {
+              paddingInlineStart: '16px'
+            }
+          }, format(calendarOnesyDate, 'MMMM')), /*#__PURE__*/React.createElement(CalendarMonth, _extends({
+            color: "default",
+            value: value,
+            calendar: calendarOnesyDate,
+            valid: valid,
+            now: now,
+            size: size,
+            range: range,
+            offset: index,
+            min: min,
+            max: max,
+            validate: validate
+          }, calendarMonthProps, {
+            onChange: onCalendarMonthChange,
+            onChangeCalendar: onCalendarMonthChangeCalendar,
+            TransitionProps: {
+              onTransition
+            },
+            className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-calendar-days'], calendarMonthProps?.className, classes.calendar])
+          })));
+        })), belowCalendars);
+    }
+  };
+  const month = format(calendar, 'MMM');
+  const year = format(calendar, 'YYYY');
+  const optionButtonProps = _objectSpread({
+    color: 'inherit',
+    version: 'text'
+  }, OptionButtonProps);
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-root', `onesy-Calendar-version-${version}`, `onesy-Calendar-size-${size}`], className, classes.root, classes[`size_${size}`], range && classes.range])
+  }, other), start, /*#__PURE__*/React.createElement(Line, {
+    gap: 0.5,
+    direction: "row",
+    align: "center",
+    justify: "space-between",
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-header'], classes.header])
+  }, menu === 'month-year' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => move(false),
+    size: size,
+    "aria-label": "Previous month",
+    disabled: open || +year <= 1970 && month === 'Jan'
+  }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
+    size: size
+  }))), /*#__PURE__*/React.createElement(Button, _extends({
+    version: "text",
+    onClick: () => onOpen(),
+    fontSize: iconFontSize,
+    size: size,
+    end: /*#__PURE__*/React.createElement(Fade, {
+      in: open !== 'year'
+    }, /*#__PURE__*/React.createElement(IconDropDown, {
+      size: size,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'month' && classes.arrow_open])
+    })),
+    "aria-label": `Select month, current ${month}`
+  }, optionButtonProps, {
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'year' && classes.option_secondary])
+  }), month), /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => move(),
+    size: size,
+    "aria-label": "Next month",
+    disabled: open || +year === 2099 && month === 'Dec'
+  }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
+    size: size
+  })))), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => move(false, 'year'),
+    size: size,
+    "aria-label": "Previous year",
+    disabled: open || +year <= 1970
+  }, optionButtonProps), /*#__PURE__*/React.createElement(IconPrevious, {
+    size: size
+  }))), /*#__PURE__*/React.createElement(Button, _extends({
+    version: "text",
+    onClick: () => onOpen('year'),
+    fontSize: iconFontSize,
+    size: size,
+    end: /*#__PURE__*/React.createElement(Fade, {
+      in: open !== 'month'
+    }, /*#__PURE__*/React.createElement(IconDropDown, {
+      size: size,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+    })),
+    "aria-label": `Select year, current ${year}`
+  }, optionButtonProps, {
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option, open === 'month' && classes.option_secondary])
+  }), year), /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: () => move(true, 'year'),
+    size: size,
+    "aria-label": "Next year",
+    disabled: open || +year === 2099
+  }, optionButtonProps), /*#__PURE__*/React.createElement(IconNext, {
+    size: size
+  }))))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
+    tonal: tonal,
+    color: "inherit",
+    size: size,
+    version: "text",
+    onClick: () => onOpen('year'),
+    fontSize: iconFontSize,
+    end: /*#__PURE__*/React.createElement(IconDropDown, {
+      size: size,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-arrow'], classes.arrow, open === 'year' && classes.arrow_open])
+    })
+  }, optionButtonProps, {
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-option'], optionButtonProps?.className, classes.option])
+  }), format(calendar, 'MMMM'), " ", format(calendar, 'YYYY')), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "center"
+  }, /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    tonal: tonal,
+    color: "inherit",
+    size: size,
+    onClick: () => move(false, menu_month_previous_unit || 'month'),
+    "aria-label": "Previous month",
+    disabled: !!(open || +year === 1970 && month === 'Jan')
+  }, /*#__PURE__*/React.createElement(IconPrevious, {
+    size: size
+  }))), /*#__PURE__*/React.createElement(Fade, {
+    in: !open
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    tonal: tonal,
+    color: "inherit",
+    size: size,
+    onClick: () => move(true, menu_month_next_unit || 'month'),
+    "aria-label": "Next month",
+    disabled: !!(open || +year === 2099 && month === 'Dec')
+  }, /*#__PURE__*/React.createElement(IconNext, {
+    size: size
+  })))))), !open && /*#__PURE__*/React.createElement(Fade, {
+    in: true
+  }, main()), open && /*#__PURE__*/React.createElement(Divider, {
+    tonal: false,
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-divider'], classes.divider])
+  }), open === 'month' && /*#__PURE__*/React.createElement(Fade, {
+    in: true
+  }, /*#__PURE__*/React.createElement(List, {
+    ref: refs.month,
+    color: "default",
+    size: "large",
+    menu: true,
+    className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
+  }, getMonths(value, calendar, props).map((item, index) => {
+    const onesyDate = item.value;
+    const selected = calendar.month === onesyDate.month;
+    return /*#__PURE__*/React.createElement(ListItem, {
+      key: index,
+      onClick: () => onUpdateCalendarOption(onesyDate),
+      primary: format(onesyDate, 'MMMM'),
+      inset: !selected,
+      startAlign: "center",
+      size: size,
+      start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+        in: true,
+        add: true,
+        simple: true,
+        size: size
+      }) : undefined,
+      disabled: !valid(onesyDate, 'month'),
+      selected: selected,
+      button: true,
+      PrimaryProps: {
+        version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
+      },
+      "data-value": index,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+    });
+  }))), open === 'year' && /*#__PURE__*/React.createElement(Surface, {
+    color: "default"
+  }, _ref => {
+    let {
+      palette
+    } = _ref;
+    return menu === 'month-year' ? /*#__PURE__*/React.createElement(Fade, {
+      in: true
+    }, /*#__PURE__*/React.createElement(List, {
+      ref: refs.year,
+      color: "default",
+      size: size,
+      menu: true,
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list'], classes.list])
+    }, getYears(value, calendar, props).map((item, index) => {
+      const onesyDate = item.value;
+      const yearValue = format(onesyDate, 'YYYY');
+      const selected = calendar.year === onesyDate.year;
+      return /*#__PURE__*/React.createElement(ListItem, {
+        key: index,
+        onClick: () => onUpdateCalendarOption(onesyDate),
+        primary: yearValue,
+        inset: !selected,
+        startAlign: "center",
+        size: size,
+        start: selected ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+          in: true,
+          add: true,
+          simple: true,
+          size: size
+        }) : undefined,
+        selected: selected,
+        disabled: !valid(onesyDate, 'year'),
+        button: true,
+        PrimaryProps: {
+          version: size === 'regular' ? 'b2' : size === 'small' ? 'b3' : 'b1'
+        },
+        "data-value": yearValue,
+        className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-item'], classes.listItem])
+      });
+    }))) : /*#__PURE__*/React.createElement(Fade, {
+      in: true
+    }, /*#__PURE__*/React.createElement(Line, {
+      ref: refs.year,
+      direction: "row",
+      wrap: "wrap",
+      justify: "space-evenly",
+      className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-list-version-year'], classes.list_version_year])
+    }, getYears(value, calendar, props).map((item, index) => {
+      const onesyDate = item.value;
+      const yearValue = format(onesyDate, 'YYYY');
+      const selected = calendar.year === onesyDate.year;
+      return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+        key: index,
+        tonal: tonal,
+        color: "inherit",
+        size: size,
+        InteractionProps: {
+          background: false
+        },
+        TypeProps: {
+          version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+          tone: !selected ? 'primary' : undefined
+        },
+        onClick: () => onUpdateCalendarOption(onesyDate),
+        "data-value": yearValue,
+        disabled: !valid(onesyDate, 'year')
+      }, PaginationItemsProps, {
+        className: classNames([staticClassName('Calendar', theme) && ['onesy-Calendar-day-version-year'], PaginationItemsProps?.className, classes.day_version_year]),
+        style: _objectSpread(_objectSpread({}, selected ? {
+          color: theme.methods.palette.color.value(undefined, 90, true, palette),
+          backgroundColor: theme.methods.palette.color.value(undefined, 40, true, palette)
+        } : undefined), PaginationItemsProps?.style)
+      }), yearValue);
+    })));
+  }), end);
+});
+Calendar.displayName = 'onesy-Calendar';
+export default Calendar;

package/esm/Calendar/index.js

@@ -0,0 +1 @@
+export { default } from './Calendar';