@peculiar/react-components 0.0.2-alpha.89 → 0.1.0

package/dist/types/Dialog/dialog_actions.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+};
+export declare const DialogActions: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Dialog/dialog_content.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Display the top and bottom dividers.
+     */
+    dividers?: boolean;
+    /**
+     * The content of the error message.
+     */
+    error?: string;
+};
+export declare const DialogContent: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Dialog/dialog_title.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+};
+export declare const DialogTitle: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Dialog/index.d.ts

@@ -0,0 +1,4 @@
+export { Dialog } from './dialog';
+export { DialogTitle } from './dialog_title';
+export { DialogContent } from './dialog_content';
+export { DialogActions } from './dialog_actions';

package/dist/types/Drawer/drawer.d.ts

@@ -1,23 +1,34 @@
 import * as React from 'react';
 declare type BaseProps = {
+    /**
+     * If `true`, the component is shown.
+     */
+    open: boolean;
     /**
      * The content of the component.
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
-     * If `true`, the component is shown.
+     * The className of Drawer container.
      */
-    open?: boolean;
     className?: string;
     /**
      * The duration for the transition, in milliseconds.
      */
     transitionDuration?: number;
+    /**
+     * If `true`, clicking the backdrop will not fire the `onClose` callback.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If `true`, hitting escape will not fire the `onClose` callback.
+     */
+    disableEscapeKeyDown?: boolean;
     /**
      * Callback fired when the component requests to be closed.
      */
     onClose?: () => void;
-    dataTestId?: string;
+    'data-testid'?: string;
 };
-export declare const Drawer: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Drawer: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/Fab/fab.d.ts

@@ -1,5 +1,23 @@
 import * as React from 'react';
-import { ButtonBaseProps } from '../ButtonBase';
-declare type ButtonProps = Omit<ButtonBaseProps, 'size'>;
-export declare const Fab: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export {};
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { ButtonBaseOwnProps } from '../ButtonBase';
+/**
+ * Types.
+ */
+export interface FabOwnProps extends Omit<ButtonBaseOwnProps, 'size' | 'variant'> {
+    /**
+     * The variant to use.
+     */
+    variant?: ('contained' | 'outlined');
+}
+export interface FabTypeMap<P = {}, D extends React.ElementType = 'button'> {
+    props: P & FabOwnProps;
+    defaultComponent: D;
+}
+export declare type FabProps<D extends React.ElementType = FabTypeMap['defaultComponent']> = OverrideProps<FabTypeMap<{}, D>, D> & {
+    component?: D;
+};
+/**
+ *
+ */
+export declare const Fab: OverridableComponent<FabTypeMap<{}, "button">>;

package/dist/types/Fab/index.d.ts

@@ -1 +1 @@
-export { Fab } from './fab';
+export { Fab, FabOwnProps, FabProps, } from './fab';

package/dist/types/Fade/fade.d.ts

@@ -15,7 +15,10 @@ declare type BaseProps = {
      */
     children: React.ReactElement;
     finalOpacity?: number;
+    /**
+     * Perform the enter transition when it first mounts if `in` is also `true`.
+     */
+    appear?: boolean;
 };
-declare type FadeProps = BaseProps & BaseTransitionProps;
-export declare const Fade: React.FC<FadeProps>;
+export declare const Fade: React.ForwardRefExoticComponent<BaseProps & BaseTransitionProps & React.RefAttributes<any>>;
 export {};

package/dist/types/FocusTrap/focus_trap.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+declare type BaseProps = {
+    /**
+     * A single child content element.
+     */
+    children: React.ReactElement;
+    /**
+     * If true, focus will be locked.
+     */
+    open: boolean;
+    /**
+     * If `true`, the trap focus will not automatically shift focus
+     * to first interactive element when it opens,
+     * and replace it to the last focused element when it closes.
+     */
+    disableAutoFocus?: boolean;
+};
+export declare const FocusTrap: React.FC<BaseProps>;
+export {};

package/dist/types/FocusTrap/index.d.ts

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

package/dist/types/IconButton/icon_button.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { ButtonOwnProps } from '../Button';
+/**
+ * Types.
+ */
+export interface IconButtonOwnProps extends Omit<ButtonOwnProps, 'variant' | 'withoutPadding' | 'startIcon' | 'endIcon'> {
+    /**
+     * The text that applied to `aria-label` attribute and Tooltip content.
+     */
+    title?: string;
+}
+export interface IconButtonTypeMap<P = {}, D extends React.ElementType = 'button'> {
+    props: P & IconButtonOwnProps;
+    defaultComponent: D;
+}
+export declare type IconButtonProps<D extends React.ElementType = IconButtonTypeMap['defaultComponent']> = OverrideProps<IconButtonTypeMap<{}, D>, D> & {
+    component?: D;
+};
+/**
+ *
+ */
+export declare const IconButton: OverridableComponent<IconButtonTypeMap<{}, "button">>;

package/dist/types/IconButton/index.d.ts

@@ -0,0 +1 @@
+export { IconButton, IconButtonOwnProps, IconButtonProps, } from './icon_button';

package/dist/types/Image/image.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The `src` attribute for the `img` element.
+     */
+    src: string;
+    /**
+     * Fallback element to show if image is loading.
+     */
+    loading?: React.ReactElement;
+    /**
+     * Fallback element to show if image fails.
+     */
+    fallback?: React.ReactElement;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const Image: React.ForwardRefExoticComponent<BaseProps & Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading"> & React.RefAttributes<HTMLImageElement>>;
+export {};

package/dist/types/Image/index.d.ts

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

package/dist/types/LinearProgress/index.d.ts

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

package/dist/types/LinearProgress/linear_progress.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type BaseProps = {
+    /**
+     * The color of the component. It supports those theme colors that make sense for this component.
+     */
+    color?: ('primary' | 'secondary');
+    /**
+     * The variant to use.
+     */
+    variant?: ('indeterminate');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+};
+export declare const LinearProgress: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Menu/index.d.ts

@@ -0,0 +1 @@
+export { Menu, MenuProps } from './menu';

package/dist/types/Menu/menu.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { PopoverProps } from '../Popover';
+import { TypographyType } from '../styles';
+declare type OptionBaseProps = {
+    label: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    component?: React.ElementType;
+    /**
+     * The variant of text to use.
+     */
+    textVariant?: TypographyType;
+};
+declare type OptionProps = OptionBaseProps & Omit<React.AllHTMLAttributes<HTMLElement>, 'children'>;
+declare type BaseProps = {
+    /**
+     * Menu reference element.
+     */
+    children: React.ReactElement;
+    /**
+     * Menu contents.
+     */
+    options: OptionProps[];
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Props applied to the `Popover` element.
+     */
+    popoverProps?: Partial<PopoverProps>;
+};
+export declare type MenuProps = BaseProps;
+export declare const Menu: React.ForwardRefExoticComponent<BaseProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Modal/index.d.ts

@@ -1 +1 @@
-export { Modal } from './modal';
+export { Modal, ModalProps } from './modal';

package/dist/types/Modal/modal.d.ts

@@ -1,23 +1,54 @@
 import * as React from 'react';
+import { BackdropProps } from '../Backdrop';
 declare type BaseProps = {
     /**
-     * The content of the component.
+     * A single child content element.
      */
-    children: React.ReactNode;
+    children: React.ReactElement;
     /**
      * If `true`, the modal is open.
      */
     open: boolean;
-    className?: string;
     /**
-     * Callback fired when the backdrop is clicked.
+     * The className of the component.
      */
-    onBackdropClick?: () => void;
+    className?: string;
     /**
      * The duration for the transition, in milliseconds.
      */
     transitionDuration?: number;
-    dataTestId?: string;
+    /**
+     * If `true`, clicking the backdrop will not fire the `onClose` callback.
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * If `true`, hitting escape will not fire the `onClose` callback.
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /**
+     * Always keep the children in the DOM.
+     */
+    keepMounted?: boolean;
+    /**
+     * Props applied to the `Backdrop` element.
+     */
+    backdropProps?: Partial<BackdropProps>;
+    /**
+     * If `true`, the modal will not prevent focus from leaving the modal while open.
+     */
+    disableEnforceFocus?: boolean;
+    /**
+     * If `true`, the trap focus will not automatically shift focus
+     * to first interactive element when it opens,
+     * and replace it to the last focused element when it closes.
+     */
+    disableAutoFocus?: boolean;
+    'data-testid'?: string;
 };
+export declare type ModalProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;
 export declare const Modal: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/OverridableComponent.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+/**
+ * Remove properties `K` from `T`.
+ * Distributive for union types.
+ */
+export declare type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+/**
+ * A component whose root component can be controlled via a `component` prop.
+ *
+ * Adjusts valid props based on the type of `component`.
+ */
+export interface OverridableComponent<M extends OverridableTypeMap> {
+    <C extends React.ElementType>(props: {
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         */
+        component: C;
+    } & OverrideProps<M, C>): JSX.Element | null;
+    (props: DefaultComponentProps<M>): JSX.Element | null;
+    propTypes?: any;
+    displayName?: string;
+    defaultProps?: Partial<DefaultComponentProps<M>>;
+}
+/**
+ * Props of the component if `component={Component}` is used.
+ */
+export declare type OverrideProps<M extends OverridableTypeMap, C extends React.ElementType> = (BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>);
+/**
+ * Props if `component={Component}` is NOT used.
+ */
+export declare type DefaultComponentProps<M extends OverridableTypeMap> = BaseProps<M> & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+/**
+ * Props defined on the component.
+ */
+export declare type BaseProps<M extends OverridableTypeMap> = M['props'] & CommonProps;
+/**
+ * Props that are valid for components.
+ */
+export interface CommonProps {
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    'data-testid'?: string;
+}
+export interface OverridableTypeMap {
+    props: {};
+    defaultComponent: React.ElementType;
+}

package/dist/types/Popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover, PopoverProps } from './popover';

package/dist/types/Popover/popover.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { PopperProps } from 'react-popper';
+import { ModalProps } from '../Modal';
+declare type BaseProps = {
+    /**
+     * If `true`, the popover is visible.
+     */
+    open: boolean;
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * A HTML element, or a function that returns it. It's used to set the position of the popover
+     */
+    anchorEl: Element;
+    /**
+     * Popover placement.
+     */
+    placement?: PopperProps<unknown>['placement'];
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: (event: React.SyntheticEvent) => void;
+    /**
+     * Props applied to the `Modal` element.
+     */
+    modalProps?: Partial<ModalProps>;
+    /**
+     * Make your popover the same width as the reference.
+     */
+    allowUseSameWidth?: boolean;
+};
+export declare type PopoverProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const Popover: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/Popper/index.d.ts

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

package/dist/types/Popper/popper.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { PopperProps as PopperReactProps } from 'react-popper';
+declare type BaseProps = {
+    /**
+     * If `true`, the popper is visible.
+     */
+    open: boolean;
+    /**
+     * Popper render node.
+     */
+    children: React.ReactNode;
+    /**
+     * It's used to set the position of the popper.
+     */
+    anchorEl?: Element;
+    /**
+     * Popper placement.
+     */
+    placement?: PopperReactProps<unknown>['placement'];
+    /**
+     * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+     */
+    disablePortal?: boolean;
+    /**
+     * Make your popper the same width as the reference.
+     */
+    allowUseSameWidth?: boolean;
+};
+declare type PopperProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;
+export declare const Popper: React.FC<PopperProps>;
+export {};

package/dist/types/Radio/index.d.ts

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

package/dist/types/Radio/radio.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * If `true`, the component is checked.
+     */
+    checked?: boolean;
+    /**
+     * If `true`, the component is checked by default.
+     */
+    defaultChecked?: boolean;
+    /**
+     * Attributes applied to the input element.
+     */
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+    /**
+     * The content of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the radio will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The `id` of the input element.
+     */
+    id?: string;
+    /**
+     * If `true`, the `input` element will be required.
+     */
+    required?: boolean;
+    /**
+     * The icon to display when the component is checked.
+     */
+    checkedIcon?: React.ReactElement;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Callback fired when the state is changed.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    'data-testid'?: string;
+};
+export declare type RadioProps = BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'htmlFor' | 'onChange'>;
+export declare const Radio: React.ForwardRefExoticComponent<BaseProps & Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "children" | "htmlFor" | "onChange"> & React.RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/types/Select/select.d.ts

@@ -12,8 +12,10 @@ declare type BaseProps = {
      * The size of the select.
      */
     size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
     className?: string;
-    dataTestId?: string;
     /**
      * Attributes applied to the `input` element.
      */
@@ -30,10 +32,6 @@ declare type BaseProps = {
      * The label of the input. It is only used for layout.
      */
     label?: string;
-    /**
-     * Callback fired when the value is changed.
-     */
-    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
     /**
      * The value of the `input` element, required for a controlled component.
      */
@@ -63,6 +61,11 @@ declare type BaseProps = {
      */
     error?: boolean;
     errorText?: string;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    'data-testid'?: string;
 };
-export declare const Select: React.ForwardRefExoticComponent<BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { Skeleton, SkeletonOwnProps, SkeletonProps, } from './skeleton';

package/dist/types/Skeleton/skeleton.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { ColorType } from '../styles';
+/**
+ * Types.
+ */
+export interface SkeletonOwnProps {
+    /**
+     * Optional children to infer width and height from.
+     */
+    children?: React.ReactNode;
+    /**
+     * Height of the skeleton.
+     */
+    height?: number | string;
+    /**
+     * Width of the skeleton.
+     */
+    width?: number | string;
+    /**
+     * The type of content that will be rendered.
+     */
+    variant?: ('text' | 'rect' | 'circle');
+    background?: ColorType;
+}
+export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {
+    props: P & SkeletonOwnProps;
+    defaultComponent: D;
+}
+export declare type SkeletonProps<D extends React.ElementType = SkeletonTypeMap['defaultComponent']> = OverrideProps<SkeletonTypeMap<{}, D>, D> & {
+    component?: D;
+};
+/**
+ *
+ */
+export declare const Skeleton: OverridableComponent<SkeletonTypeMap<{}, "span">>;

package/dist/types/Slide/slide.d.ts

@@ -17,8 +17,11 @@ declare type BaseProps = {
     /**
      * Direction the child node will enter from.
      */
-    direction?: ('right');
+    direction?: ('right' | 'left' | 'up' | 'down');
+    /**
+     * Perform the enter transition when it first mounts if `in` is also `true`.
+     */
+    appear?: boolean;
 };
-declare type SlideProps = BaseProps & BaseTransitionProps;
-export declare const Slide: React.FC<SlideProps>;
+export declare const Slide: React.ForwardRefExoticComponent<BaseProps & BaseTransitionProps & React.RefAttributes<any>>;
 export {};

package/dist/types/Slider/index.d.ts

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