@primer/components 0.0.0-2021919202426 → 0.0.0-2021920152952

package/lib-esm/AnchoredOverlay/AnchoredOverlay.js

@@ -22,9 +22,7 @@ export const AnchoredOverlay = ({
   width,
   overlayProps,
   focusTrapSettings,
-  focusZoneSettings,
-  side,
-  align
+  focusZoneSettings
 }) => {
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
   const [overlayRef, updateOverlayRef] = useRenderForcingRef();
@@ -54,9 +52,7 @@ export const AnchoredOverlay = ({
     position
   } = useAnchoredPosition({
     anchorElementRef: anchorRef,
-    floatingElementRef: overlayRef,
-    side,
-    align
+    floatingElementRef: overlayRef
   }, [overlayRef.current]);
   useEffect(() => {
     // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
@@ -97,8 +93,4 @@ export const AnchoredOverlay = ({
     anchorSide: position === null || position === void 0 ? void 0 : position.anchorSide
   }, overlayProps), children) : null);
 };
-AnchoredOverlay.displayName = 'AnchoredOverlay';
-AnchoredOverlay.defaultProps = {
-  side: 'outside-bottom',
-  align: 'start'
-};
+AnchoredOverlay.displayName = 'AnchoredOverlay';

package/lib-esm/BaseStyles.js

@@ -42,7 +42,7 @@ function BaseStyles(props) {
 
 BaseStyles.displayName = "BaseStyles";
 BaseStyles.defaultProps = {
-  color: 'fg.default',
+  color: 'text.primary',
   fontFamily: 'normal',
   lineHeight: 'default'
 };

package/lib-esm/BorderBox.js

@@ -11,7 +11,7 @@ const BorderBox = styled(Box).withConfig({
 BorderBox.defaultProps = {
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'border.default',
+  borderColor: 'border.primary',
   borderRadius: 2
 };
 export default BorderBox;

package/lib-esm/Button/Button.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const Button = styled(ButtonBase).withConfig({
   displayName: "Button",
   componentId: "xjtz72-0"
-})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
+})(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
 export default Button;

package/lib-esm/Button/ButtonInvisible.js

@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
 const ButtonInvisible = styled(ButtonBase).withConfig({
   displayName: "ButtonInvisible",
   componentId: "sc-1195tpn-0"
-})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.primer.fg.disabled'), get('shadows.btn.focusShadow'), get('colors.btn.hoverBg'), get('colors.btn.selectedBg'), buttonSystemProps, sx);
+})(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
 export default ButtonInvisible;

package/lib-esm/Button/ButtonTableList.js

@@ -4,5 +4,5 @@ import sx from '../sx';
 const ButtonTableList = styled.summary.withConfig({
   displayName: "ButtonTableList",
   componentId: "sc-1m4q8ia-0"
-})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
+})(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
 export default ButtonTableList;

package/lib-esm/Caret.js

@@ -106,8 +106,8 @@ function Caret(props) {
 Caret.displayName = "Caret";
 Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
 Caret.defaultProps = {
-  bg: 'canvas.default',
-  borderColor: 'border.default',
+  bg: 'bg.canvas',
+  borderColor: 'border.primary',
   borderWidth: 1
 };
 export default Caret;

package/lib-esm/DatePicker/DatePicker.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    anchorVariant?: 'full' | 'iconOnly';
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusTrapSettings?: Partial<FocusTrapHookSettings>;
+    /**
+     * Settings to apply to the Focus Zone on the internal `Overlay` component.
+     */
+    focusZoneSettings?: Partial<FocusZoneHookSettings>;
+    initialValue?: 'today' | Date | string | null;
+    placeholder?: string;
+    /**
+     * Determines whether the overlay portion of the component should be shown or not
+     */
+    open?: boolean;
+    /**
+     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
+     */
+    onOpen?: (gesture: OpenGesture) => unknown;
+    /**
+     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
+     */
+    onClose?: (gesture: CloseGesture) => unknown;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+    /**
+     * A custom function component used to render the anchor element.
+     * Will receive the selected text as `children` prop when an item is activated.
+     */
+    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
+    value?: Date | string | null;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};

package/lib-esm/DatePicker/DatePicker.js

@@ -0,0 +1,57 @@
+import React, { useRef, useState } from 'react';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { DatePickerAnchor } from './DatePickerAnchor';
+import { addDays } from 'date-fns';
+import { DatePickerPanel } from './DatePickerPanel';
+import { DatePickerProvider } from './useDatePicker';
+export const DatePicker = ({
+  anchorRef: externalAnchorRef,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen: onOpenExternal,
+  onClose: onCloseExternal,
+  open,
+  overlayProps,
+  renderAnchor
+}) => {
+  const buttonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  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.createElement(DatePickerProvider, null, /*#__PURE__*/React.createElement(DatePickerAnchor, {
+    ref: buttonRef,
+    fromDate: new Date(),
+    toDate: addDays(new Date(), 7),
+    dateFormat: "short",
+    onAction: toggleIsOpen
+  }), /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : buttonRef,
+    renderAnchor: renderAnchor,
+    open: open !== null && open !== void 0 ? open : isOpen,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps,
+    focusTrapSettings: focusTrapSettings,
+    focusZoneSettings: focusZoneSettings
+  }, /*#__PURE__*/React.createElement(DatePickerPanel, null)));
+};
+DatePicker.displayName = "DatePicker";

package/lib-esm/DatePicker/DatePickerAnchor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface DatePickerAnchorProps {
+    dateFormat?: 'short' | 'long' | string;
+    disabled?: boolean;
+    fromDate: Date;
+    iconOnly?: boolean;
+    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    toDate?: Date;
+}
+export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLButtonElement>>;

package/lib-esm/DatePicker/DatePickerAnchor.js

@@ -0,0 +1,59 @@
+import { CalendarIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import { format } from 'date-fns';
+import React, { useCallback, useMemo } from 'react';
+import Button from '../Button';
+import Text from '../Text';
+import { get } from '../constants';
+import { StyledOcticon } from '..';
+const DatePickerAnchorButton = styled(Button).withConfig({
+  displayName: "DatePickerAnchor__DatePickerAnchorButton",
+  componentId: "sc-8gpb9d-0"
+})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;& ", "{margin-left:", ";}"], Text, get('space.2'));
+export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
+  dateFormat = 'short',
+  disabled,
+  fromDate,
+  iconOnly = false,
+  onAction,
+  toDate
+}, ref) => {
+  const formattedDate = useMemo(() => {
+    if (iconOnly) return;
+
+    if (dateFormat === 'short') {
+      return /*#__PURE__*/React.createElement(Text, null, `${format(fromDate, 'MMM d')}${toDate ? ' - ' : ''}${toDate ? format(toDate, 'MMM d') : ''}`);
+    } else if (dateFormat === 'long') {
+      return /*#__PURE__*/React.createElement(Text, null, `${format(fromDate, 'MMM d, yyyy')}${toDate ? ' - ' : ''}${toDate ? format(toDate, 'MMM d, yyyy') : ''}`);
+    } else {
+      return /*#__PURE__*/React.createElement(Text, null, `${format(fromDate, dateFormat)}${toDate ? ' - ' : ''}${toDate ? format(toDate, dateFormat) : ''}`);
+    }
+  }, [dateFormat, fromDate, iconOnly, toDate]);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(event);
+    }
+  }, [disabled, onAction]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onAction === null || onAction === void 0 ? void 0 : onAction(event);
+  }, [disabled, onAction]);
+  return /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
+    ref: ref,
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: CalendarIcon,
+    color: "fg.muted",
+    sx: {
+      my: '2px'
+    }
+  }), formattedDate);
+});

package/lib-esm/DatePicker/DatePickerPanel.d.ts

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

package/lib-esm/DatePicker/DatePickerPanel.js

@@ -0,0 +1,20 @@
+import { addMonths } from 'date-fns';
+import React from 'react';
+import Box from '../Box';
+import { Month } from './Month';
+import styled from 'styled-components';
+import { get } from '../constants';
+const DatePickerPanelContainer = styled(Box).withConfig({
+  displayName: "DatePickerPanel__DatePickerPanelContainer",
+  componentId: "sc-19upxpo-0"
+})(["align-items:flex-start;display:flex;flex-direction:row;gap:", ";padding:", ";"], get('space.6'), get('space.3'));
+export const DatePickerPanel = () => {
+  return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(Month, {
+    month: new Date().getMonth(),
+    year: new Date().getFullYear()
+  }), /*#__PURE__*/React.createElement(Month, {
+    month: addMonths(new Date(), 1).getMonth(),
+    year: addMonths(new Date(), 1).getFullYear()
+  }));
+};
+DatePickerPanel.displayName = "DatePickerPanel";

package/lib-esm/DatePicker/Day.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+export interface DayProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
+    blocked?: boolean;
+    disabled?: boolean;
+    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    selected?: boolean;
+    date: Date;
+}
+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>;

package/lib-esm/DatePicker/Day.js

@@ -0,0 +1,113 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import { useDatePicker } from './useDatePicker';
+const DayBaseComponent = styled(Box).withConfig({
+  displayName: "Day__DayBaseComponent",
+  componentId: "sc-1japneh-0"
+})(["align-content:center;display:flex;justify-content:center;min-width:38px;min-height:38px;padding:", ";"], get('space.1'));
+const states = {
+  blocked: {
+    background: get('colors.neutral.subtle'),
+    color: get('colors.fg.subtle')
+  },
+  disabled: {
+    background: get('colors.canvas.primary'),
+    color: get('colors.fg.subtle')
+  },
+  selected: {
+    background: get('colors.accent.emphasis'),
+    color: get('colors.fg.onEmphasis')
+  },
+  default: {
+    normal: {
+      background: get('colors.canvas.primary'),
+      color: get('colors.fg.default')
+    },
+    hover: {
+      background: get('colors.neutral.muted'),
+      color: get('colors.fg.default')
+    },
+    pressed: {
+      background: get('colors.neutral.emphasis'),
+      color: get('colors.fg.onEmphasis')
+    }
+  }
+};
+
+const getStateColors = (props, prop, state) => {
+  const {
+    blocked,
+    disabled,
+    selected
+  } = props;
+
+  if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else if (selected) {
+    return states.selected[prop];
+  } else {
+    return states.default[state][prop];
+  }
+};
+
+const DayComponent = styled(DayBaseComponent).attrs(props => ({
+  background: getStateColors(props, 'background', 'normal'),
+  textColor: getStateColors(props, 'color', 'normal'),
+  backgroundHover: getStateColors(props, 'background', 'hover'),
+  textColorHover: getStateColors(props, 'color', 'hover'),
+  backgroundPressed: getStateColors(props, 'background', 'pressed'),
+  textColorPressed: getStateColors(props, 'color', 'pressed')
+})).withConfig({
+  displayName: "Day__DayComponent",
+  componentId: "sc-1japneh-1"
+})(["background-color:", ";border-radius:", ";transition:0.2s background-color ease;& ", "{align-self:center;color:", ";display:flex;font-family:", ";font-size:", ";justify-self:center;user-select:none;transition:0.2s color ease;}&:hover{background-color:", ";cursor:pointer;transition:0.05s background-color ease;& ", "{color:", ";transition:0.1s color ease;}}&:active{background-color:", ";box-shadow:inset ", ";transition:0.1s background-color ease,0.1s box-shadow ease,0.1s color ease;& ", "{color:", ";transition:0.1s color ease;}}"], props => props.background, get('radii.2'), Text, props => props.textColor, get('fonts.mono'), get('fontSizes.0'), props => props.backgroundHover, Text, props => props.textColorHover, props => props.backgroundPressed, get('shadows.shadow.medium'), Text, props => props.textColorPressed);
+export const Day = ({
+  date,
+  onAction
+}) => {
+  const {
+    onDayFocus,
+    onDayBlur,
+    onSelection,
+    disabled,
+    blocked,
+    selected
+  } = useDatePicker(date);
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    if ([' ', 'Enter'].includes(event.key)) {
+      onSelection(date);
+      onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+    }
+  }, [disabled, onSelection, onAction, date]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+  }, [disabled, onAction, date]);
+  return /*#__PURE__*/React.createElement(DayComponent, {
+    role: "button",
+    blocked: blocked,
+    disabled: disabled,
+    selected: selected,
+    onClick: clickHandler,
+    onFocus: () => onDayFocus(date),
+    onBlur: onDayBlur,
+    onKeyPress: keyPressHandler
+  }, /*#__PURE__*/React.createElement(Text, null, date.getDate()));
+};
+Day.displayName = "Day";
+export const BlankDay = styled(DayBaseComponent).withConfig({
+  displayName: "Day__BlankDay",
+  componentId: "sc-1japneh-2"
+})(["background-color:", ";"], get('colors.canvas.primary'));

package/lib-esm/DatePicker/Month.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+export interface MonthProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
+    month: number;
+    year: number;
+}
+export declare const Month: React.FC<MonthProps>;

package/lib-esm/DatePicker/Month.js

@@ -0,0 +1,74 @@
+import { format, isEqual, lastDayOfMonth, getDaysInMonth, eachDayOfInterval, startOfWeek, endOfWeek } from 'date-fns';
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import Box from '../Box';
+import Text from '../Text';
+import { get } from '../constants';
+import { BlankDay, Day } from './Day';
+const MonthComponent = styled(Box).withConfig({
+  displayName: "Month__MonthComponent",
+  componentId: "l6j7o0-0"
+})(["display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(1fr,7);grid-template-rows:1fr;gap:0px 0px;grid-template-areas:'month month month month month month month' 'sunday monday tuesday wednesday thursday friday saturday';justify-items:stretch;align-items:stretch;"]);
+const MonthTitle = styled(Text).withConfig({
+  displayName: "Month__MonthTitle",
+  componentId: "l6j7o0-1"
+})(["font-size:", ";font-weight:", ";grid-area:month;justify-self:center;"], get('fontSizes.1'), get('fontWeights.bold'));
+const WeekdayHeader = styled(Text).withConfig({
+  displayName: "Month__WeekdayHeader",
+  componentId: "l6j7o0-2"
+})(["color:", ";font-family:", ";font-size:", ";justify-self:center;padding:", " 0 ", ";"], get('colors.fg.subtle'), get('fonts.mono'), get('fontSizes.0'), get('space.3'), get('space.2'));
+export const Month = ({
+  month,
+  year
+}) => {
+  const [selectedDay, setSelectedDay] = useState(null);
+  const getTitle = useMemo(() => `${format(new Date(year, month), 'MMMM yyyy')}`, [month, year]);
+  const weekdayHeaders = useMemo(() => {
+    const now = new Date(year, month);
+    return eachDayOfInterval({
+      start: startOfWeek(now),
+      end: endOfWeek(now)
+    }).map(d => /*#__PURE__*/React.createElement(WeekdayHeader, {
+      key: `weekday-${d}-header`
+    }, format(d, 'EEEEEE')));
+  }, [month, year]);
+
+  const dayAction = date => {
+    setSelectedDay(date);
+  };
+
+  const dayComponents = useMemo(() => {
+    const components = [];
+    const firstDay = new Date(year, month, 1);
+
+    for (let i = 0; i < firstDay.getDay(); i++) {
+      components.push( /*#__PURE__*/React.createElement(BlankDay, {
+        key: `month-pre-blank-${i}`
+      }));
+    }
+
+    for (let i = 1; i <= getDaysInMonth(firstDay); i++) {
+      const date = new Date(year, month, i);
+      components.push( /*#__PURE__*/React.createElement(Day, {
+        key: `day-component-${date.toString()}`,
+        date: date,
+        selected: selectedDay ? isEqual(date, selectedDay) : false,
+        onAction: dayAction
+      }));
+    }
+
+    const lastDay = lastDayOfMonth(firstDay);
+
+    for (let i = 6; i > lastDay.getDay(); i--) {
+      components.push( /*#__PURE__*/React.createElement(BlankDay, {
+        key: `month-post-blank-${i}`
+      }));
+    }
+
+    return components;
+  }, [month, selectedDay, year]);
+  return /*#__PURE__*/React.createElement(MonthComponent, {
+    role: "grid"
+  }, /*#__PURE__*/React.createElement(MonthTitle, null, getTitle), weekdayHeaders, dayComponents);
+};
+Month.displayName = "Month";

package/lib-esm/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps } from './DatePicker';

package/lib-esm/DatePicker/index.js

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

package/lib-esm/DatePicker/useDatePicker.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export interface DatePickerConfiguration {
+    anchorStyle?: 'input' | 'full-date' | 'icon-only';
+    blockedDates?: Array<Date>;
+    confirmation?: boolean;
+    contiguousSelection?: boolean;
+    dimWeekends?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    rangeIncrement?: number;
+    selection?: 'single' | 'multi' | 'range';
+    view?: '1-month' | '2-month';
+}
+declare type SingleSelection = {
+    date: Date;
+};
+declare type BaseRangeSelection = {
+    from: Date;
+};
+declare type RangeSelection = {
+    to: Date;
+} & BaseRangeSelection;
+declare type SoftRangeSelection = {
+    to?: Date;
+} & BaseRangeSelection;
+export interface DatePickerContext {
+    configuration: DatePickerConfiguration;
+    selection?: SingleSelection | Array<SingleSelection> | RangeSelection | null;
+    softSelection?: SingleSelection | SoftRangeSelection | null;
+    selectionActive?: boolean;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: () => void;
+}
+export declare const useDatePicker: (date?: Date | undefined) => {
+    blocked: boolean | undefined;
+    disabled: boolean;
+    selected: boolean | undefined;
+    configuration: DatePickerConfiguration;
+    selection?: SingleSelection | RangeSelection | SingleSelection[] | null | undefined;
+    softSelection?: SingleSelection | SoftRangeSelection | null | undefined;
+    selectionActive?: boolean | undefined;
+    onSelection: (date: Date) => void;
+    onDayFocus: (date: Date) => void;
+    onDayBlur: () => void;
+};
+export interface DatePickerProviderProps {
+    configuration?: DatePickerConfiguration;
+}
+export declare const DatePickerProvider: React.FC<DatePickerProviderProps>;
+export {};