@os-design/core 1.0.279 → 1.0.281

package/dist/Avatar/utils/nameToInitials.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"nameToInitials.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/nameToInitials.ts"],"names":[],"mappings":"AAAA,UAAU,IAAI;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,4BAA6B,IAAI,KAAG,MAIvD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"nameToInitials.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/nameToInitials.ts"],"names":[],"mappings":"AAAA,UAAU,IAAI;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,cAAc,GAAI,yBAAyB,IAAI,KAAG,MAIvD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/Avatar/utils/strToHue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"strToHue.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/strToHue.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,QAAA,MAAM,QAAQ,QAAS,MAAM,KAAG,MAM/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"strToHue.d.ts","sourceRoot":"","sources":["../../../src/Avatar/utils/strToHue.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,KAAK,MAAM,KAAG,MAM/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAwB,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEhF,KAAK,cAAc,GAAG,IAAI,CACxB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,MAAM,GAAG,OAAO,GAAG,KAAK,CACzB,CAAC;AAGF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,eAAe,CAAC;AAE3D,UAAU,iBACR,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,YAAY,CAAC;CACtB;AA0DD,eAAO,MAAM,YAAY;;SAkGa,MAAO,WAAW;qHA5DvD,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,MAAM,4GAkDX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Button/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAwB,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEhF,KAAK,cAAc,GAAG,IAAI,CACxB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,MAAM,GAAG,OAAO,GAAG,KAAK,CACzB,CAAC;AAGF,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,eAAe,CAAC;AAE3D,UAAU,iBACR,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,YAAY,CAAC;CACtB;AA0DD,eAAO,MAAM,YAAY;;SA6FoI,MAAO,WAAW;qHAvD9K,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,MAAM,4GA6CX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/Button/index.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: ${clr(p.colors.bgHover)};
       }
     }
@@ -95,7 +95,6 @@ const Button = /*#__PURE__*/forwardRef(({
   disabled = false,
   size,
   children,
-  onMouseDown = () => {},
   ...rest
 }, ref) => {
   const {
@@ -113,10 +112,6 @@ const Button = /*#__PURE__*/forwardRef(({
     loading: loading,
     disabled: disabled || loading,
     size: size,
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
     "aria-busy": loading,
     ...rest,
     ref: ref,

package/dist/Button/utils/useButtonColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonColors.d.ts","sourceRoot":"","sources":["../../../src/Button/utils/useButtonColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAY,MAAM,oBAAoB,CAAC;AAG1D,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,EAAE,KAAK,CAAC;CACX;AAED,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAGD,QAAA,MAAM,eAAe,gCAIlB,KAAK,KAAG,kBAmDV,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"useButtonColors.d.ts","sourceRoot":"","sources":["../../../src/Button/utils/useButtonColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAY,MAAM,oBAAoB,CAAC;AAG1D,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,CAAC;IACZ,EAAE,EAAE,KAAK,CAAC;CACX;AAED,UAAU,kBAAkB;IAC1B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC;CAC9B;AAGD,QAAA,MAAM,eAAe,GAAI,6BAItB,KAAK,KAAG,kBAmDV,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/ButtonLink/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,oBAAoB,CAAC;AAGpE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,oBAAoB,EAC1B,MAAM,kBAAkB,CAAC;AAE1B,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,SAAS,GACrC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,WAAW,CAAC;AAiBd;;GAEG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oGAgEf,CAAC;AAIF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAgB,MAAM,oBAAoB,CAAC;AAGpE,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,oBAAoB,EAC1B,MAAM,kBAAkB,CAAC;AAE1B,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,CAAC;AAClE,MAAM,MAAM,eAAe,GAAG,SAAS,GACrC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,WAAW,CAAC;AAiBd;;GAEG;AACH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oGA2Df,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/ButtonLink/index.js

@@ -29,7 +29,6 @@ const ButtonLink = /*#__PURE__*/forwardRef(({
   disabled = false,
   size,
   as,
-  onMouseDown = () => {},
   onKeyDown = () => {},
   children,
   ...rest
@@ -50,10 +49,6 @@ const ButtonLink = /*#__PURE__*/forwardRef(({
     disabled: disabled || loading,
     size: size,
     as: as,
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
     onKeyDown: e => {
       onKeyDown(e);
       if (disabled || loading) e.preventDefault();

package/dist/Checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAK3B,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAChD,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,QAAQ;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AA0HD;;GAEG;AACH,QAAA,MAAM,QAAQ,4GAyDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAK3B,KAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAChD,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,QAAQ;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AA0HD;;GAEG;AACH,QAAA,MAAM,QAAQ,4GAoDb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/Checkbox/index.js

@@ -52,7 +52,7 @@ const hoverCheckedIconStyles = p => p.checked && css`
 const hoverStyles = p => !p.disabled && css`
     @media (hover: hover) {
       &:hover,
-      &:focus {
+      &:focus-visible {
         & > span {
           ${hoverUncheckedIconStyles(p)};
           ${hoverCheckedIconStyles(p)};
@@ -95,7 +95,6 @@ const Checkbox = /*#__PURE__*/forwardRef(({
   onChange = () => {},
   size,
   onKeyDown = () => {},
-  onMouseDown = () => {},
   children,
   ...rest
 }, ref) => {
@@ -121,10 +120,6 @@ const Checkbox = /*#__PURE__*/forwardRef(({
       }
       onKeyDown(e);
     },
-    onMouseDown: e => {
-      onMouseDown(e);
-      e.preventDefault();
-    },
     role: "checkbox",
     "aria-checked": forwardedValue,
     "aria-disabled": disabled,

package/dist/DateCalendar/Calendar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type Day, type Month } from './utils/calendarDays.js';
+import type { DateCalendarLocale } from './locale.js';
+interface DayProps {
+    weekend: boolean;
+    disabled: boolean;
+}
+declare const Day: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & DayProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface CalendarProps {
+    firstDayOfWeek: number;
+    disabledDays?: (month: Month) => number[] | Promise<number[]>;
+    locale: DateCalendarLocale;
+    value?: Day | null;
+    onChange: (value: Day | null) => void;
+    month: Month;
+    onChangeMonth: (month: Month) => void;
+    onSelectMonth: () => void;
+    today: Date;
+}
+declare const Calendar: React.FC<CalendarProps>;
+export default Calendar;
+//# sourceMappingURL=Calendar.d.ts.map

package/dist/DateCalendar/Calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../src/DateCalendar/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,OAAqB,EAAE,KAAK,GAAG,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAI7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAwGtD,UAAU,QAAQ;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,QAAA,MAAM,GAAG;;SAoFiC,MAAO,WAAW;gGAhE3D,CAAC;AA8DF,UAAU,aAAa;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,KAAK,EAAE,IAAI,CAAC;CACb;AAOD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA4KrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/DateCalendar/Calendar.js

@@ -0,0 +1,271 @@
+import styled from '@emotion/styled';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import Button from '../Button/index.js';
+import { clr } from '@os-design/theming';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { css } from '@emotion/react';
+import shift from './utils/shift.js';
+import calendarDays from './utils/calendarDays.js';
+import { nextMonth, prevMonth } from './utils/month.js';
+import { Left, Loading, Right } from '@os-design/icons';
+import dayOfWeek from './utils/dayOfWeek.js';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+const MonthContainer = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+`;
+const MonthButton = styled(Button)`
+  color: ${p => clr(p.theme.colorText)};
+  padding: 0 0.75em;
+
+  & > span {
+    font-size: 1.2em;
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-visible {
+      color: ${p => clr(p.theme.colorPrimary)};
+    }
+  }
+`;
+const SwitchMonthButton = styled(Button)`
+  flex-shrink: 0;
+  padding: 0 0.75em;
+`;
+const DayGridContainer = styled.div`
+  position: relative;
+`;
+const dayGridLoadingStyles = p => p.loading && css`
+    filter: blur(0.15em);
+  `;
+const DayGrid = styled('div', omitEmotionProps('loading'))`
+  display: grid;
+  grid-template-columns: repeat(7, ${p => p.theme.dateCalendarCellSize}em);
+  grid-auto-rows: ${p => p.theme.dateCalendarCellSize}em;
+  justify-content: space-between;
+
+  overflow-x: auto;
+
+  ${dayGridLoadingStyles};
+`;
+const dayOfWeekWeekendStyles = p => p.weekend && css`
+    color: ${clr(p.theme.dateCalendarDayOfWeekWeekendColorText)};
+  `;
+const DayOfWeek = styled('div', omitEmotionProps('weekend'))`
+  justify-self: center;
+  align-self: center;
+  color: ${p => clr(p.theme.dateCalendarDayOfWeekColorText)};
+  font-size: ${p => p.theme.sizes.small}em;
+  ${dayOfWeekWeekendStyles};
+`;
+const dayWeekendStyles = p => p.weekend && css`
+    color: ${clr(p.theme.dateCalendarDayWeekendColorText)};
+  `;
+const dayHoverStyles = p => !p.disabled && css`
+    cursor: pointer;
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.dateCalendarDayColorBgHover)};
+        color: ${clr(p.theme.dateCalendarDayColorTextHover)};
+      }
+    }
+  `;
+const disabledStyles = p => p.disabled && css`
+    cursor: not-allowed;
+    color: ${p.weekend ? clr(p.theme.dateCalendarDisabledDayWeekendColorText) : clr(p.theme.dateCalendarDisabledDayColorText)};
+  `;
+const Day = styled('div', omitEmotionProps('weekend', 'disabled'))`
+  ${resetFocusStyles};
+  justify-self: center;
+  align-self: center;
+  user-select: none;
+  -webkit-user-select: none;
+
+  width: ${p => p.theme.dateCalendarDaySize}em;
+  height: ${p => p.theme.dateCalendarDaySize}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+
+  ${dayHoverStyles};
+  ${dayWeekendStyles};
+  ${disabledStyles};
+  ${transitionStyles('background-color', 'color')};
+`;
+const dayAnotherMonthWeekendStyles = p => p.weekend && css`
+    color: ${clr(p.theme.dateCalendarDayAnotherMonthWeekendColorText)};
+  `;
+const DayAnotherMonth = styled(Day)`
+  ${p => !p.disabled && css`
+      color: ${clr(p.theme.dateCalendarDayAnotherMonthColorText)};
+      ${dayAnotherMonthWeekendStyles(p)};
+    `};
+`;
+const Today = styled(Day)`
+  border: 2px dashed ${p => clr(p.theme.dateCalendarTodayColorBorder)};
+  box-sizing: border-box;
+`;
+const selectedDayHoverStyles = p => !p.disabled && css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.dateCalendarSelectedDayColorBgHover)};
+        color: ${clr(p.theme.dateCalendarSelectedDayColorTextHover)};
+      }
+    }
+  `;
+const SelectedDay = styled(Day)`
+  background-color: ${p => clr(p.theme.dateCalendarSelectedDayColorBg)};
+  color: ${p => clr(p.theme.dateCalendarSelectedDayColorText)};
+  ${selectedDayHoverStyles};
+`;
+const LoadingContainer = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${p => clr([...p.theme.colorBg.slice(0, 3), 0.6])};
+`;
+const StyledLoading = styled(Loading)`
+  color: ${p => clr(p.theme.colorPrimary)};
+  font-size: 1.8em;
+`;
+const daysOfWeek = [0, 1, 2, 3, 4, 5, 6];
+const Calendar = ({
+  firstDayOfWeek,
+  disabledDays: disabledDaysFn,
+  locale,
+  value,
+  onChange,
+  month,
+  onChangeMonth,
+  onSelectMonth,
+  today
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [disabledDays, setDisabledDays] = useState([]);
+  useEffect(() => {
+    if (!disabledDaysFn) return;
+    let mounted = true;
+    const fn = async () => {
+      setLoading(true);
+      const disabledDays = await disabledDaysFn(month);
+      if (mounted) {
+        setDisabledDays(disabledDays);
+        setLoading(false);
+      }
+    };
+    fn();
+    return () => {
+      mounted = false;
+    };
+  }, [disabledDaysFn, month]);
+  const shiftedDaysOfWeek = useMemo(() => shift(daysOfWeek, firstDayOfWeek), [firstDayOfWeek]);
+  const days = useMemo(() => calendarDays(month, firstDayOfWeek), [month, firstDayOfWeek]);
+  const getDayProps = useCallback((day, disabled) => {
+    if (disabled) {
+      return {};
+    }
+    return {
+      tabIndex: 0,
+      role: 'button',
+      onClick: () => onChange(day),
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          onChange(day);
+        }
+      }
+    };
+  }, [onChange]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Header, {
+      children: [/*#__PURE__*/_jsx(MonthContainer, {
+        children: /*#__PURE__*/_jsxs(MonthButton, {
+          type: "ghost",
+          wide: "never",
+          size: "small",
+          onClick: onSelectMonth,
+          children: [locale.months[month.month], " ", month.year]
+        })
+      }), /*#__PURE__*/_jsx(SwitchMonthButton, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        onClick: () => onChangeMonth(prevMonth(month)),
+        children: /*#__PURE__*/_jsx(Left, {})
+      }), /*#__PURE__*/_jsx(SwitchMonthButton, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        onClick: () => onChangeMonth(nextMonth(month)),
+        children: /*#__PURE__*/_jsx(Right, {})
+      })]
+    }), /*#__PURE__*/_jsxs(DayGridContainer, {
+      children: [/*#__PURE__*/_jsxs(DayGrid, {
+        loading: loading,
+        children: [shiftedDaysOfWeek.map(i => {
+          return /*#__PURE__*/_jsx(DayOfWeek, {
+            weekend: i === 6 || i === 0,
+            children: locale.shortDaysOfWeek[i]
+          }, i);
+        }), days.map(day => {
+          const key = `${day.year}/${day.month}/${day.day}`;
+          const dow = dayOfWeek(day);
+          const weekend = dow === 6 || dow === 0;
+          if (day.month !== month.month) {
+            return /*#__PURE__*/_jsx(DayAnotherMonth, {
+              weekend: weekend,
+              disabled: !!disabledDaysFn,
+              ...getDayProps(day, !!disabledDaysFn),
+              children: day.day
+            }, key);
+          }
+          const disabled = disabledDays.includes(day.day);
+          if (value && value.year === day.year && value.month === day.month && value.day === day.day) {
+            return /*#__PURE__*/_jsx(SelectedDay, {
+              weekend: weekend,
+              disabled: disabled,
+              ...getDayProps(day, disabled),
+              children: day.day
+            }, key);
+          }
+          if (today.getFullYear() === day.year && today.getMonth() === day.month && today.getDate() === day.day) {
+            return /*#__PURE__*/_jsx(Today, {
+              weekend: weekend,
+              disabled: disabled,
+              ...getDayProps(day, disabled),
+              children: day.day
+            }, key);
+          }
+          return /*#__PURE__*/_jsx(Day, {
+            weekend: weekend,
+            disabled: disabled,
+            ...getDayProps(day, disabled),
+            children: day.day
+          }, key);
+        })]
+      }), loading && /*#__PURE__*/_jsx(LoadingContainer, {
+        children: /*#__PURE__*/_jsx(StyledLoading, {})
+      })]
+    })]
+  });
+};
+export default Calendar;

package/dist/DateCalendar/MonthPicker.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Month } from './utils/calendarDays.js';
+import type { DateCalendarLocale } from './locale.js';
+interface MonthPickerProps {
+    locale: DateCalendarLocale;
+    month: Month;
+    onChangeMonth: (month: Month) => void;
+    today: Date;
+}
+declare const MonthPicker: React.FC<MonthPickerProps>;
+export default MonthPicker;
+//# sourceMappingURL=MonthPicker.d.ts.map

package/dist/DateCalendar/MonthPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.d.ts","sourceRoot":"","sources":["../../src/DateCalendar/MonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AA2DtD,UAAU,gBAAgB;IACxB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,IAAI,CAAC;CACb;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuI3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/DateCalendar/MonthPicker.js

@@ -0,0 +1,159 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import Button from '../Button/index.js';
+import { clr } from '@os-design/theming';
+import { css } from '@emotion/react';
+import { omitEmotionProps } from '@os-design/utils';
+import { enableScrollingStyles } from '@os-design/styles';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+const BackButtonContainer = styled.div`
+  flex-grow: 1;
+`;
+const DateButton = styled(Button)`
+  padding: 0 0.75em;
+  & > span {
+    font-size: ${p => p.theme.sizes.large}em;
+  }
+`;
+const Container = styled.div`
+  position: relative;
+  height: ${p => p.theme.dateCalendarCellSize * 7}em;
+
+  display: flex;
+  justify-content: center;
+  column-gap: 0.5em;
+`;
+const List = styled.div`
+  ${enableScrollingStyles('y', false)};
+`;
+const selectedStyles = p => p.selected && css`
+    & > span {
+      color: ${clr(p.theme.buttonGhostColorText)};
+    }
+  `;
+const ListItemButton = styled(Button, omitEmotionProps('selected'))`
+  & > span {
+    color: ${p => clr(p.theme.colorText)};
+  }
+  ${selectedStyles};
+`;
+const MonthPicker = ({
+  locale,
+  month,
+  onChangeMonth,
+  today
+}) => {
+  const [selectedMonth, setSelectedMonth] = useState(month);
+  const [selectedParts, setSelectedParts] = useState({
+    year: false,
+    month: false
+  });
+  const yearListRef = useRef(null);
+  const monthListRef = useRef(null);
+  const selectedYearButtonRef = useRef(null);
+  const selectedMonthButtonRef = useRef(null);
+
+  // Scroll the lists to the selected year and month
+  useLayoutEffect(() => {
+    if (monthListRef.current && selectedMonthButtonRef.current) {
+      monthListRef.current.scrollTo({
+        top: selectedMonthButtonRef.current.offsetTop
+      });
+    }
+    if (yearListRef.current && selectedYearButtonRef.current) {
+      yearListRef.current.scrollTo({
+        top: selectedYearButtonRef.current.offsetTop
+      });
+    }
+  }, []);
+
+  // Call the onChangeMonth callback when all the parts are selected
+  useEffect(() => {
+    if (selectedParts.year && selectedParts.month) {
+      onChangeMonth(selectedMonth);
+    }
+  }, [onChangeMonth, selectedMonth, selectedParts.month, selectedParts.year]);
+  const years = useMemo(() => {
+    const res = [];
+    for (let i = -100; i <= 10; i++) {
+      res.push(today.getFullYear() + i);
+    }
+    return res;
+  }, [today]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Header, {
+      children: [/*#__PURE__*/_jsx(BackButtonContainer, {
+        children: /*#__PURE__*/_jsxs(DateButton, {
+          type: "ghost",
+          wide: "never",
+          size: "small",
+          onClick: () => {
+            onChangeMonth(selectedMonth);
+          },
+          children: [locale.months[selectedMonth.month], " ", selectedMonth.year]
+        })
+      }), (selectedMonth.year !== today.getFullYear() || selectedMonth.month !== today.getMonth()) && /*#__PURE__*/_jsxs(DateButton, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        onClick: () => {
+          onChangeMonth({
+            year: today.getFullYear(),
+            month: today.getMonth()
+          });
+        },
+        children: [locale.months[today.getMonth()], " ", today.getFullYear()]
+      })]
+    }), /*#__PURE__*/_jsxs(Container, {
+      children: [/*#__PURE__*/_jsx(List, {
+        ref: monthListRef,
+        children: locale.months.map((item, index) => {
+          const selected = index === selectedMonth.month;
+          return /*#__PURE__*/_jsx(ListItemButton, {
+            ref: selected ? selectedMonthButtonRef : undefined,
+            type: "ghost",
+            selected: selected,
+            onClick: () => {
+              setSelectedMonth(prev => ({
+                year: prev.year,
+                month: index
+              }));
+              setSelectedParts(prev => ({
+                year: selected || prev.year,
+                month: true
+              }));
+            },
+            children: item
+          }, item);
+        })
+      }), /*#__PURE__*/_jsx(List, {
+        ref: yearListRef,
+        children: years.map(item => {
+          const selected = item === selectedMonth.year;
+          return /*#__PURE__*/_jsx(ListItemButton, {
+            ref: selected ? selectedYearButtonRef : undefined,
+            selected: selected,
+            type: "ghost",
+            onClick: () => {
+              setSelectedMonth(prev => ({
+                year: item,
+                month: prev.month
+              }));
+              setSelectedParts(prev => ({
+                year: true,
+                month: selected || prev.month
+              }));
+            },
+            children: item
+          }, item);
+        })
+      })]
+    })]
+  });
+};
+export default MonthPicker;

package/dist/DateCalendar/index.d.ts

@@ -0,0 +1,41 @@
+import { type DateCalendarLocale } from './locale.js';
+import type { Day, Month } from './utils/calendarDays.js';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'onChange' | 'ref'>;
+export interface DateCalendarProps extends JsxDivProps {
+    /**
+     * First day of week (0 - Sunday).
+     * @default 0
+     */
+    firstDayOfWeek?: number;
+    /**
+     * What days are not allowed to choose in the selected month.
+     * @default undefined
+     */
+    disabledDays?: (month: Month) => number[] | Promise<number[]>;
+    /**
+     * The locale.
+     * @default undefined
+     */
+    locale?: DateCalendarLocale;
+    /**
+     * The selected date.
+     * @default undefined
+     */
+    value?: Day | null;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: Day | null;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: Day | null) => void;
+}
+/**
+ * The component to choose a date in a calendar.
+ */
+declare const DateCalendar: import("react").ForwardRefExoticComponent<DateCalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DateCalendar;
+//# sourceMappingURL=index.d.ts.map

package/dist/DateCalendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateCalendar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE1D,KAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED;;GAEG;AACH,QAAA,MAAM,YAAY,8GAmFjB,CAAC;AAIF,eAAe,YAAY,CAAC"}