@primer/components 0.0.0-202192219616 → 0.0.0-2021922204627

package/lib/TextInputWithTokens.js

@@ -25,8 +25,6 @@ var _TextInputWrapper = _interopRequireDefault(require("./_TextInputWrapper"));
 
 var _Box = _interopRequireDefault(require("./Box"));
 
-var _Text = _interopRequireDefault(require("./Text"));
-
 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); }
@@ -35,13 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 overflowCountFontSizeMap = {
-  small: 0,
-  medium: 1,
-  large: 1,
-  extralarge: 2
-}; // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
-
+// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent({
   icon: IconComponent,
   contrast,
@@ -61,11 +53,9 @@ function TextInputWithTokensInnerComponent({
   minWidth: minWidthProp,
   maxWidth: maxWidthProp,
   variant: variantProp,
-  visibleTokenCount,
   ...rest
 }, externalRef) {
   const {
-    onBlur,
     onFocus,
     onKeyDown,
     ...inputPropsRest
@@ -74,7 +64,6 @@ function TextInputWithTokensInnerComponent({
   const localInputRef = (0, _react.useRef)(null);
   const combinedInputRef = (0, _useCombinedRefs.useCombinedRefs)(localInputRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = (0, _react.useState)();
-  const [tokensAreTruncated, setTokensAreTruncated] = (0, _react.useState)(Boolean(visibleTokenCount));
   const {
     containerRef
   } = (0, _useFocusZone.useFocusZone)({
@@ -124,45 +113,20 @@ function TextInputWithTokensInnerComponent({
   };
 
   const handleTokenBlur = () => {
-    setSelectedTokenIndex(undefined); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus between tokens,
-    // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current3;
-
-      if (!((_containerRef$current3 = containerRef.current) !== null && _containerRef$current3 !== void 0 && _containerRef$current3.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
+    setSelectedTokenIndex(undefined);
   };
 
-  const handleTokenKeyUp = event => {
-    if (event.key === 'Escape') {
+  const handleTokenKeyUp = e => {
+    if (e.key === 'Escape') {
       var _ref$current;
 
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   };
 
-  const handleInputFocus = event => {
-    onFocus && onFocus(event);
+  const handleInputFocus = e => {
+    onFocus && onFocus(e);
     setSelectedTokenIndex(undefined);
-    visibleTokenCount && setTokensAreTruncated(false);
-  };
-
-  const handleInputBlur = event => {
-    onBlur && onBlur(event); // HACK: wait a tick and check the focused element before hiding truncated tokens
-    // this prevents the tokens from hiding when the user is moving focus from the input to a token,
-    // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
-
-    setTimeout(() => {
-      var _containerRef$current4;
-
-      if (!((_containerRef$current4 = containerRef.current) !== null && _containerRef$current4 !== void 0 && _containerRef$current4.contains(document.activeElement)) && visibleTokenCount) {
-        setTokensAreTruncated(true);
-      }
-    }, 0);
   };
 
   const handleInputKeyDown = e => {
@@ -200,17 +164,6 @@ function TextInputWithTokensInnerComponent({
     }
   };
 
-  const focusInput = () => {
-    var _combinedInputRef$cur;
-
-    (_combinedInputRef$cur = combinedInputRef.current) === null || _combinedInputRef$cur === void 0 ? void 0 : _combinedInputRef$cur.focus();
-  };
-
-  const preventTokenClickPropagation = event => {
-    event.stopPropagation();
-  };
-
-  const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
   return /*#__PURE__*/_react.default.createElement(_TextInputWrapper.default, {
     block: block,
     className: className,
@@ -223,7 +176,6 @@ function TextInputWithTokensInnerComponent({
     maxWidth: maxWidthProp,
     variant: variantProp,
     ref: containerRef,
-    onClick: focusInput,
     sx: {
       alignItems: 'center',
       flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
@@ -255,13 +207,12 @@ function TextInputWithTokensInnerComponent({
     ref: combinedInputRef,
     disabled: disabled,
     onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
     onKeyDown: handleInputKeyDown,
     type: "text",
     sx: {
       height: '100%'
     }
-  }, inputPropsRest))), TokenComponent ? visibleTokens.map(({
+  }, inputPropsRest))), tokens.length && TokenComponent ? tokens.map(({
     id,
     ...tokenRest
   }, i) => /*#__PURE__*/_react.default.createElement(TokenComponent, _extends({
@@ -269,7 +220,6 @@ function TextInputWithTokensInnerComponent({
     onFocus: handleTokenFocus(i),
     onBlur: handleTokenBlur,
     onKeyUp: handleTokenKeyUp,
-    onClick: preventTokenClickPropagation,
     isSelected: selectedTokenIndex === i,
     onRemove: () => {
       handleTokenRemove(id);
@@ -277,10 +227,7 @@ function TextInputWithTokensInnerComponent({
     hideRemoveButton: hideTokenRemoveButtons,
     size: size,
     tabIndex: 0
-  }, tokenRest))) : null, tokensAreTruncated ? /*#__PURE__*/_react.default.createElement(_Text.default, {
-    color: "fg.muted",
-    fontSize: size && overflowCountFontSizeMap[size]
-  }, "+", tokens.length - visibleTokens.length) : null);
+  }, tokenRest))) : null);
 }
 
 TextInputWithTokensInnerComponent.displayName = "TextInputWithTokensInnerComponent";

package/lib/_TextInputWrapper.js

@@ -39,7 +39,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {

package/lib/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_protanopia": {
+      "light_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_protanopia": {
+      "dark_colorblind": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

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

@@ -26,6 +26,8 @@ interface AnchoredOverlayPropsWithoutAnchor {
      */
     anchorRef: React.RefObject<HTMLElement>;
 }
+export declare type OverlayOpenGesture = 'anchor-click' | 'anchor-key-press';
+export declare type OverlayCloseGesture = 'anchor-click' | 'click-outside' | 'escape';
 export declare type AnchoredOverlayWrapperAnchorProps = Partial<AnchoredOverlayPropsWithAnchor> | AnchoredOverlayPropsWithoutAnchor;
 interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'> {
     /**
@@ -35,11 +37,11 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
     /**
      * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
      */
-    onOpen?: (gesture: 'anchor-click' | 'anchor-key-press') => unknown;
+    onOpen?: (gesture: OverlayOpenGesture) => unknown;
     /**
      * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
      */
-    onClose?: (gesture: 'anchor-click' | 'click-outside' | 'escape') => unknown;
+    onClose?: (gesture: OverlayCloseGesture) => unknown;
     /**
      * Props to be spread on the internal `Overlay` component.
      */

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

@@ -12,12 +12,14 @@ export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<{
     id?: string | undefined;
 }> & {
-    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+    Input: import("@radix-ui/react-polymorphic").ForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
         [x: string]: any;
         [x: number]: any;
     } & {
         theme?: any;
-    } & {
+    } & ({} | {
+        children?: React.ReactNode;
+    })) & {
         as?: string | React.ComponentType<any> | undefined;
         forwardedAs?: string | React.ComponentType<any> | undefined;
     }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

package/lib-esm/Autocomplete/AutocompleteInput.d.ts

@@ -4,12 +4,14 @@ import { ComponentProps } from '../utils/types';
 declare type InternalAutocompleteInputProps = {
     as?: React.ComponentType<any>;
 };
-declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<{
+declare const AutocompleteInput: PolymorphicForwardRefComponent<React.ForwardRefExoticComponent<Pick<Omit<Pick<({
     [x: string]: any;
     [x: number]: any;
 } & {
     theme?: any;
-} & {
+} & ({} | {
+    children?: React.ReactNode;
+})) & {
     as?: string | React.ComponentType<any> | undefined;
     forwardedAs?: string | React.ComponentType<any> | undefined;
 }, string | number | symbol>, "maxWidth" | "minWidth" | "width" | "theme" | "className" | "block" | "icon" | "sx" | "disabled" | "variant" | "contrast"> & {

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { OverlayProps } from '../Overlay';
+import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
+import { FocusZoneHookSettings } from '../hooks/useFocusZone';
+import { DatePickerConfiguration, Selection } from './useDatePicker';
+declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
+declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
+export interface DatePickerProps extends DatePickerConfiguration {
+    /**
+     * An override to the internal ref that will be spread on to the renderAnchor
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * 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;
+    iconOnly?: boolean;
+    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?: Selection;
+}
+export declare const DatePicker: React.FC<DatePickerProps>;
+export {};

package/lib-esm/DatePicker/DatePicker.js

@@ -0,0 +1,65 @@
+import React, { useRef, useState } from 'react';
+import { DatePickerAnchor } from './DatePickerAnchor';
+import { DatePickerProvider } from './useDatePicker';
+import { DatePickerOverlay } from './DatePickerOverlay';
+export const DatePicker = ({
+  anchorVariant,
+  anchorRef: externalAnchorRef,
+  focusTrapSettings,
+  focusZoneSettings,
+  onOpen: onOpenExternal,
+  onClose: onCloseExternal,
+  open,
+  overlayProps,
+  renderAnchor,
+  selection,
+  value,
+  view
+}) => {
+  const buttonRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const datePickerConfiguration = {
+    anchorVariant,
+    selection,
+    view
+  };
+
+  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, {
+    configuration: datePickerConfiguration,
+    value: value,
+    closePicker: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(DatePickerAnchor, {
+    ref: buttonRef,
+    onAction: toggleIsOpen
+  }), /*#__PURE__*/React.createElement(DatePickerOverlay, {
+    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
+  }));
+};
+DatePicker.displayName = "DatePicker";

package/lib-esm/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<HTMLButtonElement>>;

package/lib-esm/DatePicker/DatePickerAnchor.js

@@ -0,0 +1,63 @@
+import { CalendarIcon } from '@primer/octicons-react';
+import styled from 'styled-components';
+import React, { useCallback } from 'react';
+import Button from '../Button';
+import Text from '../Text';
+import { get } from '../constants';
+import StyledOcticon from '../StyledOcticon';
+import useDatePicker from './useDatePicker';
+import TextInput from '../TextInput';
+const DatePickerAnchorButton = styled(Button).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;& ", "{margin-left:", ";}"], Text, get('space.2'));
+export const DatePickerAnchor = /*#__PURE__*/React.forwardRef(({
+  onAction
+}, ref) => {
+  const {
+    configuration: {
+      anchorVariant
+    },
+    disabled,
+    formattedDate
+  } = useDatePicker();
+  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]);
+
+  if (anchorVariant === 'input') {
+    return /*#__PURE__*/React.createElement(TextInput, {
+      value: formattedDate
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(DatePickerAnchorButton, {
+    ref: ref,
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler
+  }, /*#__PURE__*/React.createElement(StyledOcticon, {
+    icon: CalendarIcon,
+    color: "fg.muted",
+    sx: {
+      my: '2px'
+    }
+  }), anchorVariant !== 'icon-only' && /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, formattedDate));
+});

package/lib-esm/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-esm/DatePicker/DatePickerOverlay.js

@@ -0,0 +1,24 @@
+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); }
+
+import React from 'react';
+import useDatePicker from './useDatePicker';
+import { AnchoredOverlay } from '../AnchoredOverlay';
+import { DatePickerPanel } from './DatePickerPanel';
+export const DatePickerOverlay = ({
+  onClose,
+  ...rest
+}) => {
+  const {
+    revertValue
+  } = useDatePicker();
+
+  const onOverlayClose = gesture => {
+    revertValue();
+    onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
+  };
+
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, _extends({
+    onClose: onOverlayClose
+  }, rest), /*#__PURE__*/React.createElement(DatePickerPanel, null));
+};
+DatePickerOverlay.displayName = "DatePickerOverlay";

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,24 @@
+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';
+import useDatePicker from './useDatePicker';
+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 = () => {
+  const {
+    configuration
+  } = useDatePicker();
+  return /*#__PURE__*/React.createElement(DatePickerPanelContainer, null, /*#__PURE__*/React.createElement(Month, {
+    month: new Date().getMonth(),
+    year: new Date().getFullYear()
+  }), configuration.view === '2-month' && /*#__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,14 @@
+import React from 'react';
+import { FontSizeProps } from 'styled-system';
+import { SystemCommonProps, SystemLayoutProps } from '../constants';
+import { SxProp } from '../sx';
+import { DaySelection } from './useDatePicker';
+export interface DayProps extends FontSizeProps, SystemCommonProps, SxProp, SystemLayoutProps {
+    blocked?: boolean;
+    disabled?: boolean;
+    onAction?: (date: Date, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    selected?: DaySelection;
+    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,150 @@
+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'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  disabled: {
+    background: get('colors.canvas.primary'),
+    borderRadius: get('radii.2'),
+    color: get('colors.fg.subtle')
+  },
+  selected: {
+    default: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis')
+    },
+    start: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '4px 0 0 4px',
+      color: get('colors.fg.onEmphasis')
+    },
+    middle: {
+      background: get('colors.accent.subtle'),
+      borderRadius: '0',
+      color: get('colors.fg.default')
+    },
+    end: {
+      background: get('colors.accent.emphasis'),
+      borderRadius: '0 4px 4px 0',
+      color: get('colors.fg.onEmphasis')
+    }
+  },
+  default: {
+    normal: {
+      background: get('colors.canvas.primary'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default')
+    },
+    hover: {
+      background: get('colors.neutral.muted'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.default')
+    },
+    pressed: {
+      background: get('colors.neutral.emphasis'),
+      borderRadius: get('radii.2'),
+      color: get('colors.fg.onEmphasis')
+    }
+  }
+};
+
+const getStateStyles = (props, prop, state) => {
+  const {
+    blocked,
+    disabled,
+    selected
+  } = props;
+
+  if (blocked) {
+    return states.blocked[prop];
+  } else if (disabled) {
+    return states.disabled[prop];
+  } else if (selected) {
+    switch (selected) {
+      case 'start':
+        return states.selected.start[prop];
+
+      case 'middle':
+        return states.selected.middle[prop];
+
+      case 'end':
+        return states.selected.end[prop];
+
+      default:
+        return states.selected.default[prop];
+    }
+  } else {
+    return states.default[state][prop];
+  }
+};
+
+const DayComponent = styled(DayBaseComponent).attrs(props => ({
+  background: getStateStyles(props, 'background', 'normal'),
+  borderRadius: getStateStyles(props, 'borderRadius', 'normal'),
+  textColor: getStateStyles(props, 'color', 'normal'),
+  backgroundHover: getStateStyles(props, 'background', 'hover'),
+  textColorHover: getStateStyles(props, 'color', 'hover'),
+  backgroundPressed: getStateStyles(props, 'background', 'pressed'),
+  textColorPressed: getStateStyles(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, props => props.borderRadius, 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;
+    }
+
+    onSelection(date);
+    onAction === null || onAction === void 0 ? void 0 : onAction(date, event);
+  }, [disabled, onSelection, date, onAction]);
+  return /*#__PURE__*/React.createElement(DayComponent, {
+    role: "button",
+    blocked: blocked,
+    disabled: disabled,
+    selected: selected,
+    onClick: clickHandler,
+    onFocus: () => onDayFocus(date),
+    onBlur: () => onDayBlur(date),
+    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'));