@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/Button/ButtonPlain.js

@@ -0,0 +1,90 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const StyledPlainButton = (0, styled_1.default)(ButtonBase_1.default) `
+  box-shadow: none;
+  color: ${({ $color, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $color.alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background: none;
+  ${({ disabled, theme, $color }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        color: ${$color.darken(30).toString()};
+        background-color: ${$color.alpha(0.1).toString()};
+      }
+      &:active {
+        color: ${$color.darken(80).toString()};
+        background-color: ${$color.alpha(0.3).toString()};
+      }
+      &:focus-visible {
+        outline-color: ${$color.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `}
+`;
+const ButtonPlain = (props, ref) => {
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $color = theme.color.textPrimary;
+                try {
+                    if (color) {
+                        $color = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $color,
+                };
+            }
+            default:
+                return {
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledPlainButton, Object.assign({ "$color": $color, disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonPlain);

package/Button/ButtonStandard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ButtonBaseProps } from './ButtonBase';
+export type ButtonStandardProps = ButtonBaseProps;
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonStandard.js

@@ -0,0 +1,110 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const ButtonBase_1 = __importDefault(require("./ButtonBase"));
+const StyledStandardButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ $color, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $color.alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: ${({ $background, disabled }) => {
+    switch (true) {
+        case disabled:
+            return $background.darken(10).toString();
+        default:
+            return $background.toString();
+    }
+}};
+  box-shadow: 0 0.125em 0.75em
+    ${({ $background }) => {
+    switch (true) {
+        case $background.luminance() > 0.49:
+            return $background.darken(40).alpha(0.8).toString();
+        default:
+            return $background.darken(20).alpha(0.5).toString();
+    }
+}};
+  ${({ disabled, $background, theme }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        background-color: ${$background.darken(30).toString()};
+      }
+      &:active {
+        background-color: ${$background.darken(80).toString()};
+      }
+      &:focus-visible {
+        outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+        ? theme.color.textPrimary.toString()
+        : theme.color.accentPrimary.toString()};
+      }
+    `}
+`;
+const ButtonStandard = (props, ref) => {
+    const { children, disabled, color } = props, restProps = __rest(props, ["children", "disabled", "color"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => {
+        switch (true) {
+            case color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $background = theme.color.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.color.textPrimary.rgbString()) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.color.surface,
+                    $color: theme.color.textPrimary,
+                };
+        }
+    }, [color, theme.color]);
+    return (react_1.default.createElement(StyledStandardButton, Object.assign({ "$color": $color, "$background": $background, disabled: disabled }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonStandard);

package/Button/ButtonTextWrapper.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { ButtonContainerProps } from './ButtonContainer';
+export type ButtonTextWrapperProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: ButtonContainerProps['iconOnly'];
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /**
+     * If true, then expect SVG icon as children. The button will be rendered as icon button
+     * Example:
+     * ```tsx
+     * <Button iconOnly>
+     *   <MyIconSVG />
+     * </Button>
+     * ```
+     `
+     */
+    readonly iconOnly?: boolean | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Button/ButtonTextWrapper.js

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const TextWrapper = styled_1.default.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  ${({ iconOnly }) => iconOnly &&
+    (0, react_2.css) `
+      font-size: 1em;
+      justify-content: center;
+    `}
+`;
+const ButtonTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonTextWrapper);

package/Button/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ButtonStandardProps } from './ButtonStandard';
+import { ButtonOutlinedProps } from './ButtonOutlined';
+import { ButtonPlainProps } from './ButtonPlain';
+export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps | ButtonPlainProps) & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` ,`outlined` or `plain`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: 'standard' | 'outlined' | 'plain';
+};
+declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` ,`outlined` or `plain`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: "standard" | "outlined" | "plain" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/index.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
+const ButtonOutlined_1 = __importDefault(require("./ButtonOutlined"));
+const ButtonPlain_1 = __importDefault(require("./ButtonPlain"));
+const Button = (props, ref) => {
+    const { variant } = props, buttonProps = __rest(props, ["variant"]);
+    if (variant === 'outlined') {
+        return react_1.default.createElement(ButtonOutlined_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    }
+    if (variant === 'plain') {
+        return react_1.default.createElement(ButtonPlain_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    }
+    return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
+};
+exports.default = react_1.default.forwardRef(Button);

package/Calendar/CalendarBottomBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarBottomBarProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarBottomBarProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarBottomBar.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const CalendarBottomBar = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarBottomBar);

package/Calendar/CalendarCell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CalendarCellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly isToday?: boolean;
+    readonly isSelected?: boolean;
+    readonly isDisabled?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarCell.js

@@ -0,0 +1,59 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Btn = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
+  border: 1px solid transparent;
+  background-color: ${({ theme, $isSelected }) => $isSelected ? theme.color.accentPrimary.toString() : theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  color: ${({ $isToday, theme, $isSelected, $isDisabled }) => {
+    if ($isDisabled) {
+        return theme.color.textSecondary.toString();
+    }
+    if ($isSelected) {
+        return theme.color.accentPrimaryContrast.toString();
+    }
+    if ($isToday) {
+        return theme.color.accentPrimary.toString();
+    }
+    return theme.color.textPrimary.toString();
+}};
+  &:hover {
+    background-color: ${({ theme, $isSelected }) => $isSelected
+    ? theme.color.accentPrimary.darken(10).toString()
+    : theme.color.surface.darken(10).toString()};
+  }
+  &:focus-visible {
+    border-color: ${({ theme, $isDisabled }) => $isDisabled ? 'transparent' : theme.color.accentPrimary.toString()};
+  }
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.4 : 1)};
+`;
+const CalendarCell = (props, ref) => {
+    const { isToday, children, isSelected, isDisabled } = props, restProps = __rest(props, ["isToday", "children", "isSelected", "isDisabled"]);
+    return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref, tabIndex: isDisabled ? -1 : restProps.tabIndex, "$isToday": Boolean(isToday), "$isSelected": Boolean(isSelected), "$isDisabled": Boolean(isDisabled) }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarCell);

package/Calendar/CalendarDateContainer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarDateContainer.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarDateContainer = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+`;
+exports.default = react_1.default.memo(CalendarDateContainer);

package/Calendar/CalendarEmptyCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarEmptyCellProps = React.HTMLAttributes<HTMLButtonElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarEmptyCellProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarEmptyCell.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Elem = styled_1.default.span `
+  font-size: 0.8em;
+  width: 3em;
+  height: 3em;
+  min-width: 0;
+`;
+const CalendarEmptyCell = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Elem, Object.assign({}, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(CalendarEmptyCell);

package/Calendar/CalendarMonthControl.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CalendarMonthControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    readonly displayIcon: 'prev' | 'next';
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Calendar/CalendarMonthControl.js

@@ -0,0 +1,49 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
+const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
+const Btn = styled_1.default.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1em;
+  width: 2.25em;
+  height: 2.25em;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 3}em;
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.darken(0.1).toString()};
+  }
+  &:focus-visible {
+    border-color: ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+  opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
+`;
+const CalendarMonthControl = (props, ref) => {
+    const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
+    return (react_1.default.createElement(Btn, Object.assign({ type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
+};
+exports.default = react_1.default.forwardRef(CalendarMonthControl);

package/Calendar/CalendarPaper.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const CalendarPaper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default CalendarPaper;

package/Calendar/CalendarPaper.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarPaper = styled_1.default.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  padding: 0.4em;
+  max-width: 17.6em;
+  max-height: 20.4em;
+  box-shadow: 0 4px 24px ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+`;
+exports.default = CalendarPaper;

package/Calendar/CalendarTopBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type CalendarTopBarProps = React.HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarTopBar.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Container = styled_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5em;
+`;
+const CalendarTopBar = (props, ref) => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }),
+        react_1.default.createElement(react_1.default.Fragment, null, children)));
+};
+exports.default = react_1.default.forwardRef(CalendarTopBar);

package/Calendar/CalendarWeekDayLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.NamedExoticComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+export default _default;

package/Calendar/CalendarWeekDayLabel.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const CalendarWeekDayLabel = styled_1.default.div `
+  text-align: center;
+  font-weight: 200;
+  font-size: 0.8em;
+  user-select: none;
+  width: 3em;
+  height: 3em;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+exports.default = react_1.default.memo(CalendarWeekDayLabel);

package/Calendar/CalendarWeekDaysBar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Week } from './use-calendar';
+export type WeekNameLabelFormat = 'short' | 'long' | 'narrow';
+export interface CalendarTopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    readonly week: Week;
+    readonly format: WeekNameLabelFormat;
+    readonly locale?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;