@via-profit/ui-kit 0.1.0-rc.12 → 0.1.0-rc.14

package/Autocomplete/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { MenuRef, MenuProps, Value } from '../Menu';
+export type AutocompleteProps<T, Multiple extends boolean | undefined = undefined> = AutocompleteMenuProps<T, Multiple>;
+export type AutocompleteContainerRef = HTMLDivElement;
+type AutocompleteMenuProps<T, Multiple extends boolean | undefined = undefined> = Pick<MenuProps<T, Multiple>, 'items' | 'value' | 'estimatedItemSize' | 'endThreshold' | 'overscanCount' | 'getOptionSelected' | 'onEndReached' | 'onSelectItem' | 'renderItem' | 'multiple' | 'zIndex' | 'onRequestClose' | 'isOpen'> & {
+    readonly containerRef?: React.Ref<AutocompleteContainerRef>;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
+    readonly onRequestOpen: (event?: FocusEvent | KeyboardEvent | MouseEvent | React.FocusEvent | React.KeyboardEvent | React.MouseEvent) => void;
+    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    readonly filterItems?: (items: readonly T[], data: {
+        readonly query: string;
+        readonly inputValue: string;
+    }) => readonly T[];
+};
+export type ItemToString<T, Multiple> = Multiple extends undefined | false ? (item: T) => string : undefined;
+export type RenderInputProps<T, Multiple extends boolean | undefined = undefined> = {
+    readonly selected: Value<T, Multiple> | null;
+    readonly value: string;
+    readonly inputRef: React.Ref<HTMLInputElement>;
+    readonly onClick: React.MouseEventHandler<HTMLInputElement>;
+    readonly onFocus: React.FocusEventHandler<HTMLInputElement>;
+    readonly onBlur: React.FocusEventHandler<HTMLInputElement>;
+    readonly onKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    readonly onChange: React.ChangeEventHandler<HTMLInputElement>;
+};
+export type AutocompleteRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' | 'scrollToFirstSelected' | 'selectItem' | 'highlightIndex' | 'hightlightPrevItem' | 'hightlightNextItem' | 'hightlightFirstItem' | 'hightlightLastItem' | 'selectHightlightedItem' | 'updatePopper'> & {
+    readonly clear: () => void;
+    readonly focus: () => void;
+    readonly blur: () => void;
+    readonly clearInput: () => void;
+};
+declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "value" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+    readonly containerRef?: React.Ref<HTMLDivElement> | undefined;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
+    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
+    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    readonly filterItems?: ((items: readonly T[], data: {
+        readonly query: string;
+        readonly inputValue: string;
+    }) => readonly T[]) | undefined;
+} & {
+    ref?: React.Ref<AutocompleteRef<T>> | undefined;
+}) => JSX.Element;
+export default _default;

package/Autocomplete/popper-options.d.ts

@@ -0,0 +1,4 @@
+import type { usePopper } from 'react-popper';
+export type PopperOptions = Parameters<typeof usePopper>[2];
+export declare const popperOptions: PopperOptions;
+export default popperOptions;

package/Button/ButtonBase.d.ts

@@ -1,12 +1,30 @@
-declare module '@via-profit/ui-kit/Button/ButtonBase' {
-  import '@via-profit/ui-kit';
-
-  export interface ButtonBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import React from 'react';
+type ButtonNativeProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export interface ButtonBaseProps extends Omit<ButtonNativeProps, 'color'> {
+    /**
+     * Icon or another JSX element placed before button label\
+     * Example:
+     * ```tsx
+     * <Button startIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
     readonly startIcon?: JSX.Element;
+    /**
+     * Icon or another JSX element placed after button label
+     * Example:
+     * ```tsx
+     * <Button endIcon={<MyIconElement />}>
+     *   Label
+     * </Button>
+     * ```
+     */
     readonly endIcon?: JSX.Element;
-  }
-
-  const ButtonBase: React.FC<ButtonBaseProps>;
-
-  export default ButtonBase;
+    /**
+     * You can pass the primary, default, secondary name of the colors or your specified color value
+     */
+    readonly color?: 'default' | 'primary' | 'secondary' | string;
 }
+declare const _default: React.ForwardRefExoticComponent<ButtonBaseProps & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/ButtonBase.js

@@ -16,28 +16,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const StartIconWrapper_1 = __importDefault(require("./components/StartIconWrapper"));
-const EndIconWrapper_1 = __importDefault(require("./components/EndIconWrapper"));
-const TextWrapper_1 = __importDefault(require("./components/TextWrapper"));
+const ButtonStartIconWrapper_1 = __importDefault(require("./ButtonStartIconWrapper"));
+const ButtonEndIconWrapper_1 = __importDefault(require("./ButtonEndIconWrapper"));
+const ButtonTextWrapper_1 = __importDefault(require("./ButtonTextWrapper"));
 const Button = styled_1.default.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   padding: 0.8em 1em;
   font-size: 0.8rem;
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
-  border: 0;
-  outline: transparent;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
   transition: all 180ms ease-out 0s;
   background: none;
-  color: currentColor;
   display: inline-flex;
   align-items: center;
+  color: ${({ color, disabled, theme }) => {
+    switch (true) {
+        case disabled:
+            return theme.colors.textSecondary.alpha(0.8).toString();
+        case !disabled && typeof color === 'undefined':
+        default:
+            return theme.colors.textPrimary.toString();
+    }
+}};
 `;
 const ButtonBase = (props, ref) => {
-    const { children, startIcon, endIcon } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon"]);
+    const { children, startIcon, endIcon, color } = props, otherProps = __rest(props, ["children", "startIcon", "endIcon", "color"]);
     return (react_1.default.createElement(Button, Object.assign({}, otherProps, { ref: ref }),
-        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(StartIconWrapper_1.default, null, startIcon)),
-        react_1.default.createElement(TextWrapper_1.default, null, children),
-        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(EndIconWrapper_1.default, null, endIcon))));
+        typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(ButtonStartIconWrapper_1.default, null, startIcon)),
+        react_1.default.createElement(ButtonTextWrapper_1.default, null, children),
+        typeof endIcon !== 'undefined' && endIcon !== null && (react_1.default.createElement(ButtonEndIconWrapper_1.default, null, endIcon))));
 };
 exports.default = react_1.default.forwardRef(ButtonBase);

package/Button/ButtonEndIconWrapper.d.ts

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

package/Button/{components/EndIconWrapper.js → ButtonEndIconWrapper.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
-const EndIconWrapper = styled_1.default.span `
+const ButtonEndIconWrapper = styled_1.default.span `
   margin-left: 0.8em;
 `;
-exports.default = EndIconWrapper;
+exports.default = ButtonEndIconWrapper;

package/Button/ButtonOutlined.d.ts

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

package/Button/ButtonOutlined.js

@@ -0,0 +1,87 @@
+"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 StyledOutlinedButton = (0, styled_1.default)(ButtonBase_1.default) `
+  color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.colors.textPrimary.alpha(0.4).toString();
+        default:
+            return $color.darken(30).toString();
+    }
+}};
+  border-color: ${({ theme, disabled, $color }) => {
+    switch (true) {
+        case disabled:
+            return theme.colors.surface.darken(80).alpha(0.4).toString();
+        default:
+            return $color.toString();
+    }
+}};
+  background-color: transparent;
+  border-style: solid;
+  border-width: 0.14em;
+  ${({ disabled, $color, theme }) => !disabled &&
+    (0, react_2.css) `
+      &:hover {
+        background-color: ${$color.darken(20).alpha(0.1).toString()};
+      }
+      &:active {
+        background-color: ${$color.darken(50).alpha(0.3).toString()};
+      }
+      &:focus-visible {
+        outline-color: ${$color.rgbString() === theme.colors.accentPrimary.rgbString()
+        ? theme.colors.textPrimary.toString()
+        : theme.colors.accentPrimary.toString()};
+      }
+    `};
+`;
+const ButtonOutlined = (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 theme.colors.accentPrimary;
+            case color === 'secondary':
+                return theme.colors.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+                return theme.colors.textPrimary;
+            case typeof color === 'string': {
+                let c = theme.colors.textPrimary;
+                try {
+                    if (color) {
+                        c = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return c;
+            }
+            default:
+                return theme.colors.textPrimary;
+        }
+    }, [color, theme.colors]);
+    return (react_1.default.createElement(StyledOutlinedButton, Object.assign({ disabled: disabled, "$color": $color }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ButtonOutlined);

package/Button/ButtonStandard.d.ts

@@ -1,11 +1,5 @@
-declare module '@via-profit/ui-kit/Button/ButtonStandard' {
-  import '@via-profit/ui-kit';
-
-  import { ButtonBaseProps } from '@via-profit/ui-kit/Button/ButtonBase';
-
-  export type ButtonStandardProps = ButtonBaseProps;
-
-  const ButtonStandard: React.FC<ButtonStandardProps>;
-
-  export default ButtonStandard;
-}
+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

@@ -17,36 +17,94 @@ 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"));
-/**
- * Standard
- */
-const StyledButtonBase = (0, styled_1.default)(ButtonBase_1.default) `
-  color: ${({ theme, disabled }) => disabled
-    ? theme.colors.textPrimary.alpha(0.4).toString()
-    : theme.colors.textPrimary.toString()};
-  background-color: ${({ theme, disabled }) => disabled
-    ? theme.colors.surface.darken(10).toString()
-    : theme.isDark
-        ? theme.colors.surface.toString()
-        : theme.colors.surface.toString()};
-
-  ${({ disabled, theme }) => !disabled &&
+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) `
-      box-shadow: 0 2px 12px ${theme.colors.surface.darken(40).alpha(0.6).toString()};
       &:hover {
-        background-color: ${theme.colors.surface.darken(20).toString()};
+        background-color: ${$background.darken(30).toString()};
       }
       &:active {
-        background-color: ${theme.colors.surface.darken(40).toString()};
+        background-color: ${$background.darken(80).toString()};
       }
       &:focus-visible {
-        outline: 2px solid ${theme.colors.accentPrimary.toString()};
+        outline-color: ${$background.rgbString() === theme.colors.accentPrimary.rgbString()
+        ? theme.colors.textPrimary.toString()
+        : theme.colors.accentPrimary.toString()};
       }
     `}
 `;
 const ButtonStandard = (props, ref) => {
-    const { children, disabled } = props, restProps = __rest(props, ["children", "disabled"]);
-    return (react_1.default.createElement(StyledButtonBase, Object.assign({ disabled: disabled }, restProps, { ref: ref }), children));
+    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.colors.accentPrimaryContrast,
+                    $background: theme.colors.accentPrimary,
+                };
+            case color === 'secondary':
+                return {
+                    $color: theme.colors.accentSecondaryContrast,
+                    $background: theme.colors.accentSecondary,
+                };
+            case typeof color === 'undefined':
+            case color === 'default':
+                return {
+                    $background: theme.colors.surface,
+                    $color: theme.colors.textPrimary,
+                };
+            case typeof color === 'string': {
+                let $background = theme.colors.surface;
+                try {
+                    if (color) {
+                        $background = new Color_1.default(color);
+                    }
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                }
+                return {
+                    $background,
+                    $color: $background.contrast(theme.colors.textPrimary.rgbString()) > 5
+                        ? theme.colors.textPrimary
+                        : theme.colors.surface,
+                };
+            }
+            default:
+                return {
+                    $background: theme.colors.surface,
+                    $color: theme.colors.textPrimary,
+                };
+        }
+    }, [color, theme.colors]);
+    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/ButtonStartIconWrapper.d.ts

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

package/Button/{components/StartIconWrapper.js → ButtonStartIconWrapper.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
-const StartIconWrapper = styled_1.default.span `
+const ButtonStartIconWrapper = styled_1.default.span `
   margin-right: 0.8em;
 `;
-exports.default = StartIconWrapper;
+exports.default = ButtonStartIconWrapper;

package/Button/ButtonTextWrapper.d.ts

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

package/Button/{components/TextWrapper.js → ButtonTextWrapper.js}

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
-const TextWrapper = styled_1.default.span `
+const ButtonTextWrapper = styled_1.default.span `
   font-size: 0.86em;
   display: flex;
   align-items: center;
 `;
-exports.default = TextWrapper;
+exports.default = ButtonTextWrapper;

package/Button/index.d.ts

@@ -1,14 +1,22 @@
-declare module '@via-profit/ui-kit/Button' {
-  import { ButtonAccentProps } from '@via-profit/ui-kit/Button/ButtonAccent';
-  import { ButtonStandardProps } from '@via-profit/ui-kit/Button/ButtonStandard';
-
-  export interface BaseProps {
-    readonly variant?: 'standard' | 'accent';
-  }
-
-  export type ButtonProps = (ButtonStandardProps | ButtonAccentProps) & BaseProps;
-
-  const Button: React.FC<ButtonProps>;
-
-  export default Button;
-}
+import React from 'react';
+import { ButtonStandardProps } from './ButtonStandard';
+import { ButtonOutlinedProps } from './ButtonOutlined';
+export type ButtonProps = (ButtonStandardProps | ButtonOutlinedProps) & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` or `outlined`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: 'standard' | 'outlined';
+};
+declare const _default: React.ForwardRefExoticComponent<import("./ButtonBase").ButtonBaseProps & {
+    /**
+     * Button style variant\
+     * Allowed variants: `standard` or `outlined`\
+     * \
+     * **Default**: `standard`
+     */
+    readonly variant?: "standard" | "outlined" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/Button/index.js

@@ -16,11 +16,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ButtonStandard_1 = __importDefault(require("./ButtonStandard"));
-const ButtonAccent_1 = __importDefault(require("./ButtonAccent"));
+const ButtonOutlined_1 = __importDefault(require("./ButtonOutlined"));
 const Button = (props, ref) => {
     const { variant } = props, buttonProps = __rest(props, ["variant"]);
-    if (variant === 'accent') {
-        return react_1.default.createElement(ButtonAccent_1.default, Object.assign({}, buttonProps, { ref: ref }));
+    if (variant === 'outlined') {
+        return react_1.default.createElement(ButtonOutlined_1.default, Object.assign({}, buttonProps, { ref: ref }));
     }
     return react_1.default.createElement(ButtonStandard_1.default, Object.assign({}, buttonProps, { ref: ref }));
 };

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/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.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarCellProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

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/CalendarEmptyCell.d.ts

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

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.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;

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/CalendarTopBar.d.ts

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

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/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.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarTopBarProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/Calendar/CalendarWeekRow.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/IconChevronLeft.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Calendar/IconChevronRight.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Calendar/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { WeekDayName } from './use-calendar';
+import { WeekNameLabelFormat } from './CalendarWeekDaysBar';
+export interface CalendarProps {
+    readonly date?: Date;
+    readonly locale?: string;
+    readonly selected?: Date[];
+    readonly onSelectDate?: (date: Date) => void;
+    readonly onDateChange?: (date: Date) => void;
+    readonly maxDate?: Date;
+    readonly minDate?: Date;
+    readonly weekStartDay?: WeekDayName;
+    readonly weekDayLabelFormat?: WeekNameLabelFormat;
+    readonly displayLeadingZero?: boolean;
+}
+export * from './use-calendar';
+declare const _default: React.NamedExoticComponent<CalendarProps>;
+export default _default;