@primer/components 0.0.0-2021929114541 → 0.0.0-202192923313

package/lib/DatePicker/DatePicker.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DatePickerAnchor = require("./DatePickerAnchor");
+
+var _useDatePicker = require("./useDatePicker");
+
+var _DatePickerOverlay = require("./DatePickerOverlay");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DatePicker = ({
+  anchorVariant,
+  anchorRef: externalAnchorRef,
+  confirmation,
+  confirmUnsavedClose,
+  dateFormat,
+  disableWeekends,
+  focusTrapSettings,
+  focusZoneSettings,
+  iconPlacement,
+  maxDate,
+  maxRangeSize,
+  maxSelections,
+  minDate,
+  onOpen: onOpenExternal,
+  onClose: onCloseExternal,
+  open,
+  overlayProps,
+  placeholder,
+  renderAnchor,
+  showInputPrompt,
+  value,
+  variant,
+  view,
+  weekStartsOn
+}) => {
+  const anchorRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const datePickerConfiguration = {
+    anchorVariant,
+    confirmation,
+    confirmUnsavedClose,
+    dateFormat,
+    disableWeekends,
+    iconPlacement,
+    maxDate: maxDate ? new Date(new Date(maxDate).toDateString()) : maxDate,
+    maxRangeSize,
+    maxSelections,
+    minDate: minDate ? new Date(new Date(minDate).toDateString()) : minDate,
+    placeholder,
+    showInputPrompt,
+    variant,
+    view,
+    weekStartsOn
+  };
+
+  const onOpen = gesture => {
+    setIsOpen(true);
+    onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
+  };
+
+  const onClose = gesture => {
+    setIsOpen(false);
+    onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
+  };
+
+  const toggleIsOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    } else {
+      setIsOpen(true);
+      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
+    configuration: datePickerConfiguration,
+    value: value,
+    closePicker: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {
+    ref: anchorRef,
+    onAction: toggleIsOpen
+  }), /*#__PURE__*/_react.default.createElement(_DatePickerOverlay.DatePickerOverlay, {
+    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : anchorRef,
+    renderAnchor: renderAnchor,
+    open: open !== null && open !== void 0 ? open : isOpen,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }));
+};
+
+exports.DatePicker = DatePicker;
+DatePicker.displayName = "DatePicker";

package/lib/DatePicker/DatePickerAnchor.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface DatePickerAnchorProps {
+    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/lib/DatePicker/DatePickerAnchor.js

@@ -0,0 +1,223 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerAnchor = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireWildcard(require("../Button"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _constants = require("../constants");
+
+var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
+
+var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+
+var _TextInput = _interopRequireDefault(require("../TextInput"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _dateParser = require("./dateParser");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DatePickerAnchorButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "DatePickerAnchor__DatePickerAnchorButton",
+  componentId: "sc-8gpb9d-0"
+})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], _Text.default, (0, _constants.get)('space.2'), _Text.default, (0, _constants.get)('space.2'));
+
+const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
+  onAction
+}, ref) => {
+  const {
+    configuration: {
+      anchorVariant,
+      iconPlacement,
+      placeholder,
+      showInputPrompt,
+      variant
+    },
+    disabled,
+    formattedDate,
+    onDateInput
+  } = (0, _useDatePicker.default)();
+  const [inputValue, setInputValue] = (0, _react.useState)(formattedDate);
+  const inputRef = (0, _react.useRef)(null);
+  const [inputValid, setInputValid] = (0, _react.useState)(true);
+  const keyPressHandler = (0, _react.useCallback)(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(event);
+    }
+  }, [disabled, onAction]);
+  const clickHandler = (0, _react.useCallback)(event => {
+    if (disabled) {
+      return;
+    }
+
+    onAction === null || onAction === void 0 ? void 0 : onAction(event);
+  }, [disabled, onAction]);
+  (0, _react.useEffect)(() => {
+    if (document.activeElement !== inputRef.current) {
+      setInputValue(formattedDate);
+    }
+  }, [formattedDate]);
+  const onInputChangeHandler = (0, _react.useCallback)(e => {
+    const value = e.currentTarget.value;
+    setInputValue(value);
+
+    if (!value) {
+      return;
+    }
+
+    const parsedDate = (0, _dateParser.parseDate)(value, variant);
+    setInputValid(!!parsedDate);
+
+    if (parsedDate) {
+      onDateInput(parsedDate);
+    }
+  }, [onDateInput, variant]);
+
+  const onBlurHandler = () => {
+    setInputValue(formattedDate);
+  };
+
+  const inputSx = (0, _react.useMemo)(() => {
+    let sxObject = {};
+
+    if (iconPlacement === 'start') {
+      sxObject = { ...sxObject,
+        pl: 5,
+        pr: 2
+      };
+    } else if (iconPlacement === 'end') {
+      sxObject = { ...sxObject,
+        pl: 2,
+        pr: 5
+      };
+    }
+
+    if (showInputPrompt) {
+      sxObject = { ...sxObject,
+        pt: '20px'
+      };
+    }
+
+    if (inputValid) {
+      sxObject = { ...sxObject,
+        color: 'success.emphasis'
+      };
+    } else {
+      sxObject = { ...sxObject,
+        color: 'danger.emphasis'
+      };
+    }
+
+    return sxObject;
+  }, [iconPlacement, inputValid, showInputPrompt]);
+  const inputPrompt = (0, _react.useMemo)(() => {
+    if (!showInputPrompt) return;
+
+    switch (variant) {
+      case 'single':
+        return 'MM/DD/YYYY';
+
+      case 'multi':
+        return 'MM/DD/YYYY, MM/DD/YYYY, ...';
+
+      case 'range':
+        return 'MM/DD/YYYY - MM/DD/YYYY';
+
+      default:
+        return 'MM/DD/YYYY';
+    }
+  }, [showInputPrompt, variant]);
+
+  if (anchorVariant === 'input') {
+    const calendarButton = side => /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, {
+      onClick: clickHandler,
+      sx: {
+        width: '32px',
+        px: '6px',
+        position: 'absolute',
+        [side]: '1px',
+        top: '1px',
+        bottom: '1px'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
+      icon: _octiconsReact.CalendarIcon
+    }));
+
+    const promptSx = () => {
+      let sxObject = {
+        position: 'absolute',
+        top: '2px',
+        fontSize: '11px',
+        color: 'fg.subtle'
+      };
+
+      if (iconPlacement === 'start') {
+        sxObject = { ...sxObject,
+          left: '36px'
+        };
+      }
+
+      return sxObject;
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      ref: ref,
+      sx: {
+        position: 'relative',
+        display: 'flex',
+        flex: 1
+      }
+    }, iconPlacement === 'start' && calendarButton('left'), showInputPrompt && /*#__PURE__*/_react.default.createElement(_Text.default, {
+      sx: promptSx()
+    }, inputPrompt), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+      ref: inputRef,
+      placeholder: placeholder,
+      value: inputValue,
+      onChange: onInputChangeHandler,
+      sx: inputSx,
+      onBlur: onBlurHandler
+    }), iconPlacement === 'end' && calendarButton('right'));
+  }
+
+  const calendarIcon = () => /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
+    icon: _octiconsReact.CalendarIcon,
+    color: "fg.muted",
+    sx: {
+      my: '2px'
+    }
+  });
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler
+  }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
+    sx: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, formattedDate), iconPlacement === 'end' && calendarIcon()));
+});
+
+exports.DatePickerAnchor = DatePickerAnchor;

package/lib/DatePicker/DatePickerOverlay.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AnchoredOverlayProps } from '../AnchoredOverlay';
+export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;

package/lib/DatePicker/DatePickerOverlay.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerOverlay = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _DatePickerPanel = require("./DatePickerPanel");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DatePickerOverlay = ({
+  onClose,
+  ...rest
+}) => {
+  const {
+    onClose: onDatePickerClose
+  } = (0, _useDatePicker.default)();
+  const [suspendFocusTrap, setSuspendFocusTrap] = (0, _react.useState)(false);
+
+  const onOverlayClose = async gesture => {
+    if (!suspendFocusTrap) {
+      setSuspendFocusTrap(true);
+      await onDatePickerClose();
+      setSuspendFocusTrap(false);
+      onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, _extends({
+    onClose: onOverlayClose
+  }, rest), /*#__PURE__*/_react.default.createElement(_DatePickerPanel.DatePickerPanel, null));
+};
+
+exports.DatePickerOverlay = DatePickerOverlay;
+DatePickerOverlay.displayName = "DatePickerOverlay";

package/lib/DatePicker/DatePickerPanel.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DatePickerPanel: () => JSX.Element;

package/lib/DatePicker/DatePickerPanel.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePickerPanel = void 0;
+
+var _dateFns = require("date-fns");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Month = require("./Month");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
+
+var _Button = _interopRequireWildcard(require("../Button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DatePickerPanelContainer = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelContainer",
+  componentId: "sc-19upxpo-0"
+})(["align-items:stretch;display:flex;flex-direction:column;"]);
+const DatePickerPanelMonths = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelMonths",
+  componentId: "sc-19upxpo-1"
+})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";position:relative;"], (0, _constants.get)('space.6'), (0, _constants.get)('space.3'));
+const DatePickerPanelFooter = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelFooter",
+  componentId: "sc-19upxpo-2"
+})(["align-items:flex-start;border-top:1px solid;border-top-color:", ";display:flex;gap:", ";padding-top:12px;padding-bottom:12px;padding-left:", ";padding-right:", ";flex-direction:row;justify-content:space-between;position:relative;"], (0, _constants.get)('colors.border.default'), (0, _constants.get)('space.6'), (0, _constants.get)('space.3'), (0, _constants.get)('space.3'));
+const ArrowButton = (0, _styledComponents.default)(_Button.default).withConfig({
+  displayName: "DatePickerPanel__ArrowButton",
+  componentId: "sc-19upxpo-3"
+})(["position:absolute;width:40px;height:28px;top:12px;", ";"], props => `${props.side}: ${(0, _constants.get)('space.3')(props)}`);
+
+const DatePickerPanel = () => {
+  const {
+    configuration,
+    saveValue,
+    revertValue,
+    currentViewingDate,
+    goToMonth,
+    nextMonth,
+    previousMonth
+  } = (0, _useDatePicker.default)();
+  const previousDisabled = (0, _react.useMemo)(() => {
+    const {
+      minDate
+    } = configuration;
+    if (!minDate) return false;
+    const previous = (0, _dateFns.subMonths)(currentViewingDate, 1);
+
+    if (minDate.getFullYear() >= previous.getFullYear() && minDate.getMonth() > previous.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  const nextDisabled = (0, _react.useMemo)(() => {
+    const {
+      maxDate,
+      view
+    } = configuration;
+    if (!maxDate) return false;
+    const next = (0, _dateFns.addMonths)(currentViewingDate, view === '2-month' ? 2 : 1);
+
+    if (maxDate.getFullYear() <= next.getFullYear() && maxDate.getMonth() < next.getMonth()) {
+      return true;
+    }
+
+    return false;
+  }, [configuration, currentViewingDate]);
+  return /*#__PURE__*/_react.default.createElement(DatePickerPanelContainer, null, /*#__PURE__*/_react.default.createElement(DatePickerPanelMonths, null, /*#__PURE__*/_react.default.createElement(ArrowButton, {
+    variant: "small",
+    side: "left",
+    onClick: previousMonth,
+    disabled: previousDisabled
+  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
+    icon: _octiconsReact.ChevronLeftIcon,
+    color: "fg.muted"
+  })), /*#__PURE__*/_react.default.createElement(_Month.Month, {
+    month: currentViewingDate.getMonth(),
+    year: currentViewingDate.getFullYear()
+  }), configuration.view === '2-month' && /*#__PURE__*/_react.default.createElement(_Month.Month, {
+    month: (0, _dateFns.addMonths)(currentViewingDate, 1).getMonth(),
+    year: (0, _dateFns.addMonths)(currentViewingDate, 1).getFullYear()
+  }), /*#__PURE__*/_react.default.createElement(ArrowButton, {
+    variant: "small",
+    side: "right",
+    onClick: nextMonth,
+    disabled: nextDisabled
+  }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
+    icon: _octiconsReact.ChevronRightIcon,
+    color: "fg.muted"
+  }))), /*#__PURE__*/_react.default.createElement(DatePickerPanelFooter, null, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "small",
+    sx: {
+      mr: 1
+    },
+    onClick: () => revertValue()
+  }, "Reset"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    variant: "small",
+    onClick: () => goToMonth(new Date())
+  }, "Today")), configuration.confirmation && /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+    variant: "small",
+    onClick: () => saveValue()
+  }, "Apply")));
+};
+
+exports.DatePickerPanel = DatePickerPanel;
+DatePickerPanel.displayName = "DatePickerPanel";

package/lib/DatePicker/Day.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+import { DaySelection } from './useDatePicker';
+export declare type DayProps = {
+    blocked?: boolean;
+    disabled?: boolean;
+    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    selected?: DaySelection;
+    date: Date;
+} & FontSizeProps & SystemCommonProps & SxProp & SystemLayoutProps;
+export declare const Day: React.FC<DayProps>;
+export declare const BlankDay: import("styled-components").StyledComponent<"div", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & SxProp, never>;