@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib-esm/Button/ButtonTableList.d.ts

@@ -0,0 +1,5 @@
+import { SxProp } from '../sx';
+import { ComponentProps } from '../utils/types';
+declare const ButtonTableList: import("styled-components").StyledComponent<"summary", any, SxProp, never>;
+export declare type ButtonTableListProps = ComponentProps<typeof ButtonTableList>;
+export default ButtonTableList;

package/lib-esm/Button/ButtonTableList.js

@@ -1,20 +1,8 @@
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { COMMON, LAYOUT, TYPOGRAPHY, get } from '../constants';
-import theme from '../theme';
+import { get } from '../constants';
 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: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.gray.6'), get('colors.gray.6'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
-ButtonTableList.defaultProps = {
-  theme
-};
-ButtonTableList.propTypes = {
-  theme: PropTypes.object,
-  ...sx.propTypes,
-  ...COMMON.propTypes,
-  ...TYPOGRAPHY.propTypes,
-  ...LAYOUT.propTypes
-};
+})(["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'), sx);
 export default ButtonTableList;

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

@@ -0,0 +1,16 @@
+export { default } from './Button';
+export type { ButtonProps } from './Button';
+export { default as ButtonDanger } from './ButtonDanger';
+export type { ButtonDangerProps } from './ButtonDanger';
+export { default as ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup';
+export { default as ButtonOutline } from './ButtonOutline';
+export type { ButtonOutlineProps } from './ButtonOutline';
+export { default as ButtonPrimary } from './ButtonPrimary';
+export type { ButtonPrimaryProps } from './ButtonPrimary';
+export { default as ButtonInvisible } from './ButtonInvisible';
+export type { ButtonInvisibleProps } from './ButtonInvisible';
+export { default as ButtonTableList } from './ButtonTableList';
+export type { ButtonTableListProps } from './ButtonTableList';
+export { default as ButtonClose } from './ButtonClose';
+export type { ButtonCloseProps } from './ButtonClose';

package/lib-esm/Button/index.js

@@ -1,8 +1,8 @@
-export { default, ButtonProps } from './Button';
-export { default as ButtonDanger, ButtonDangerProps } from './ButtonDanger';
-export { default as ButtonGroup, ButtonGroupProps } from './ButtonGroup';
-export { default as ButtonOutline, ButtonOutlineProps } from './ButtonOutline';
-export { default as ButtonPrimary, ButtonPrimaryProps } from './ButtonPrimary';
-export { default as ButtonInvisible, ButtonInvisibleProps } from './ButtonInvisible';
-export { default as ButtonTableList, ButtonTableListProps } from './ButtonTableList';
-export { default as ButtonClose, ButtonCloseProps } from './ButtonClose';
+export { default } from './Button';
+export { default as ButtonDanger } from './ButtonDanger';
+export { default as ButtonGroup } from './ButtonGroup';
+export { default as ButtonOutline } from './ButtonOutline';
+export { default as ButtonPrimary } from './ButtonPrimary';
+export { default as ButtonInvisible } from './ButtonInvisible';
+export { default as ButtonTableList } from './ButtonTableList';
+export { default as ButtonClose } from './ButtonClose';

package/lib-esm/Caret.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Theme } from './ThemeProvider';
+declare type Location = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom';
+export declare type CaretProps = {
+    bg?: string;
+    borderColor?: string;
+    borderWidth?: string | number;
+    size?: number;
+    location?: Location;
+    theme?: Theme;
+};
+declare function Caret(props: CaretProps): JSX.Element;
+declare namespace Caret {
+    var locations: string[];
+    var defaultProps: {
+        bg: string;
+        borderColor: string;
+        borderWidth: number;
+    };
+}
+export default Caret;

package/lib-esm/Caret.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { ThemeContext } from 'styled-components';
 import { style } from 'styled-system';
-import theme from './theme';
 const oppositeEdge = {
   top: 'Bottom',
   right: 'Left',
@@ -44,15 +43,21 @@ const getBorderWidth = style({
 });
 
 function Caret(props) {
+  var _props$theme;
+
+  const theme = React.useContext(ThemeContext);
+  const propsWithTheme = { ...props,
+    theme: (_props$theme = props.theme) !== null && _props$theme !== void 0 ? _props$theme : theme
+  };
   const {
     bg
-  } = getBg(props);
+  } = getBg(propsWithTheme);
   const {
     borderColor
-  } = getBorderColor(props);
+  } = getBorderColor(propsWithTheme);
   const {
     borderWidth
-  } = getBorderWidth(props);
+  } = getBorderWidth(propsWithTheme);
   const {
     size = 8,
     location = 'bottom'
@@ -101,16 +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: 'white',
-  borderColor: 'gray.2',
-  borderWidth: 1,
-  theme
-};
-Caret.propTypes = {
-  bg: PropTypes.string,
-  borderColor: PropTypes.string,
-  borderWidth: PropTypes.number,
-  size: PropTypes.number,
-  location: PropTypes.oneOf(Caret.locations)
+  bg: 'canvas.default',
+  borderColor: 'border.default',
+  borderWidth: 1
 };
 export default Caret;

package/lib-esm/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import React, { InputHTMLAttributes } from 'react';
+import { SxProp } from './sx';
+export declare type CheckboxProps = {
+    /**
+     * Apply indeterminate visual appearance to the checkbox
+     */
+    indeterminate?: boolean;
+    /**
+     * Apply inactive visual appearance to the checkbox
+     */
+    disabled?: boolean;
+    /**
+     * Forward a ref to the underlying input element
+     */
+    ref?: React.RefObject<HTMLInputElement>;
+    /**
+     * Indicates whether the checkbox must be checked
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the checkbox validation state
+     */
+    validationStatus?: 'error' | 'success';
+} & InputHTMLAttributes<HTMLInputElement> & SxProp;
+/**
+ * An accessible, native checkbox component
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<CheckboxProps, "sx" | keyof React.InputHTMLAttributes<HTMLInputElement> | "indeterminate" | "validationStatus"> & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib-esm/Checkbox.js

@@ -0,0 +1,44 @@
+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 styled from 'styled-components';
+import { useProvidedRefOrCreate } from './hooks';
+import React, { useLayoutEffect } from 'react';
+import sx from './sx';
+const StyledCheckbox = styled.input.withConfig({
+  displayName: "Checkbox__StyledCheckbox",
+  componentId: "i51804-0"
+})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
+/**
+ * An accessible, native checkbox component
+ */
+
+const Checkbox = /*#__PURE__*/React.forwardRef(({
+  checked,
+  indeterminate,
+  disabled,
+  sx: sxProp,
+  required,
+  validationStatus,
+  ...rest
+}, ref) => {
+  const checkboxRef = useProvidedRefOrCreate(ref);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
+    type: "checkbox",
+    disabled: disabled,
+    "aria-disabled": disabled ? 'true' : 'false',
+    ref: ref || checkboxRef,
+    checked: indeterminate ? false : checked,
+    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
+    sx: sxProp,
+    required: required,
+    "aria-required": required ? 'true' : 'false',
+    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
+  }, rest));
+});
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;

package/lib-esm/CircleBadge.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="hoist-non-react-statics" />
+/// <reference types="react" />
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const CircleBadge: import("styled-components").StyledComponent<"div", any, {
+    inline?: boolean | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    size?: number | undefined;
+} & SxProp, never>;
+declare const CircleBadgeIcon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
+    icon: import("react").ElementType<any>;
+} & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SxProp, never>;
+export declare type CircleBadgeProps = ComponentProps<typeof CircleBadge>;
+export declare type CircleBadgeIconProps = ComponentProps<typeof CircleBadgeIcon>;
+declare const _default: string & import("styled-components").StyledComponentBase<"div", any, {
+    inline?: boolean | undefined;
+    variant?: "small" | "medium" | "large" | undefined;
+    size?: number | undefined;
+} & SxProp, never> & import("hoist-non-react-statics").NonReactStatics<never, {}> & {
+    Icon: import("styled-components").StyledComponent<({ icon: IconComponent, ...rest }: {
+        icon: import("react").ElementType<any>;
+    } & import("@primer/octicons-react/dist/icons").IconProps) => JSX.Element, any, SxProp, never>;
+};
+export default _default;

package/lib-esm/CircleBadge.js

@@ -1,9 +1,7 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import StyledOcticon from './StyledOcticon';
 import sx from './sx';
-import theme from './theme';
 import isNumeric from './utils/isNumeric';
 const variantSizes = {
   small: 56,
@@ -25,27 +23,13 @@ const sizeStyles = ({
 const CircleBadge = styled.div.withConfig({
   displayName: "CircleBadge",
   componentId: "sc-1lho816-0"
-})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.white'), get('shadows.medium'), COMMON, sizeStyles, sx);
+})(["display:", ";align-items:center;justify-content:center;background-color:", ";border-radius:50%;box-shadow:", ";", ";", ";"], props => props.inline ? 'inline-flex' : 'flex', get('colors.canvas.default'), get('shadows.shadow.medium'), sizeStyles, sx);
 const CircleBadgeIcon = styled(StyledOcticon).withConfig({
   displayName: "CircleBadge__CircleBadgeIcon",
   componentId: "sc-1lho816-1"
 })(["height:auto;max-width:60%;max-height:55%;"]);
 CircleBadge.defaultProps = {
-  inline: false,
-  theme
-};
-CircleBadge.propTypes = {
-  inline: PropTypes.bool,
-  size: PropTypes.number,
-  theme: PropTypes.object,
-  variant: PropTypes.oneOf(['small', 'medium', 'large']),
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
-CircleBadgeIcon.defaultProps = {
-  theme
-};
-CircleBadgeIcon.propTypes = { ...StyledOcticon.propTypes
+  inline: false
 };
 CircleBadgeIcon.displayName = 'CircleBadge.Icon';
 export default Object.assign(CircleBadge, {