@peculiar/react-components 0.0.2-alpha.26 → 0.0.2-alpha.260

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PopoverProps } from '../Popover';
+declare type OptionBaseProps = {
+    label: string;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    component?: React.ElementType;
+};
+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

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

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { BackdropProps } from '../Backdrop';
+declare type BaseProps = {
+    /**
+     * A single child content element.
+     */
+    children: React.ReactElement;
+    /**
+     * If `true`, the modal is open.
+     */
+    open: boolean;
+    /**
+     * The className of the component.
+     */
+    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;
+    /**
+     * 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/Popover/index.d.ts

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Placement } from '@popperjs/core';
+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?: Placement;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Props applied to the `Modal` element.
+     */
+    modalProps?: Partial<ModalProps>;
+};
+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,27 @@
+import React from 'react';
+import type { Placement } from '@popperjs/core';
+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?: Placement;
+    /**
+     * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+     */
+    disablePortal?: boolean;
+};
+declare type PopperProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;
+export declare const Popper: React.FC<PopperProps>;
+export {};

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

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

package/dist/types/Portal/portal.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * A HTML element, component instance, or function that returns either.
+     * The `container` will have the portal children appended to it.
+     * By default, it uses the body of the top-level document object,
+     * so it's simply `document.body` most of the time.
+     */
+    container?: Element | (() => Element | null) | null;
+};
+export declare const Portal: React.FC<BaseProps>;
+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" | "onChange" | "htmlFor"> & React.RefAttributes<HTMLLabelElement>>;
+export {};

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

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

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

@@ -0,0 +1,71 @@
+import * as React from 'react';
+declare type BaseProps = {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the select.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.SelectHTMLAttributes<HTMLSelectElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLSelectElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    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 & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

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

package/dist/types/SelectPicker/select_picker.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+declare type FilterOptionsType = <T>(options: ReadonlyArray<T>, value: string, getOptionLabel: (option: T) => string) => ReadonlyArray<T>;
+export declare type SelectPickerProps<T> = {
+    /**
+     * Array of options.
+     */
+    options: ReadonlyArray<T>;
+    /**
+     * Used to determine the string value for a given option. It's used to fill the input.
+     */
+    getOptionLabel: (option: T) => string;
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the component is in a loading state.
+     */
+    loading?: boolean;
+    /**
+     * Text to display when in a loading state.
+     */
+    loadingText?: React.ReactNode;
+    /**
+     * Text to display when there are no options.
+     */
+    noOptionsText?: React.ReactNode;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: T;
+    /**
+     * The value of the select.
+     */
+    value?: T;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * The short hint displayed in the search `input` before the user enters a value.
+     */
+    placeholderSearch?: string;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * The size of the input.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * Text to display when in the create `button` element.
+     */
+    createNewText?: string;
+    /**
+     * If `true`, the create `button` element will be shown.
+     */
+    allowCreateNew?: boolean;
+    /**
+     * Callback fired when the create `button` clicked.
+     */
+    onCreateNew?: () => void;
+    /**
+     * A filter function that determines the options that are eligible.
+     */
+    filterOptions?: FilterOptionsType;
+    /**
+     * Callback fired when the popup requests to be opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.SyntheticEvent, value: T) => void;
+};
+/**
+ *
+ */
+export declare const SelectPicker: <T>(props: SelectPickerProps<T>) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { TransitionProps } from 'react-transition-group/Transition';
+declare type BaseTransitionProps = Pick<TransitionProps<HTMLElement>, ('onEnter' | 'onEntered' | 'onEntering' | 'onExit' | 'onExited' | 'onExiting')>;
+declare type BaseProps = {
+    /**
+     * If `true`, the component will transition in.
+     */
+    in?: boolean;
+    /**
+     * The duration for the transition, in milliseconds.
+     */
+    timeout?: number;
+    /**
+     * A single child content element.
+     */
+    children: React.ReactElement;
+    /**
+     * Direction the child node will enter from.
+     */
+    direction?: ('right' | 'left' | 'up' | 'down');
+    /**
+     * Perform the enter transition when it first mounts if `in` is also `true`.
+     */
+    appear?: boolean;
+};
+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';

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+declare type BaseProps = {
+    className?: string;
+    /**
+     * The default element value. Use when the component is not controlled.
+     */
+    defaultValue?: number;
+    /**
+     * The value of the slider.
+     */
+    value?: number;
+    /**
+     * If `true`, the slider will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The maximum allowed value of the slider. Should not be equal to min.
+     */
+    max?: number;
+    /**
+     * The minimum allowed value of the slider. Should not be equal to max.
+     */
+    min?: number;
+    /**
+     * Name attribute of the hidden `input` element.
+     */
+    name?: string;
+    /**
+     * The granularity with which the slider can step through values
+     */
+    step?: number;
+    /**
+     * Callback function that is fired when the slider's value changed.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    'data-testid'?: string;
+};
+export declare type SliderProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue'>;
+export declare const Slider: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "defaultValue"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Tabs } from './tabs';
+export { Tab } from './tab';

package/dist/types/Tabs/tab.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Unique identifier used to control which tab is selected.
+     */
+    id: string;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the tab will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The color of the component.
+     */
+    color?: ('black' | 'white');
+    /**
+     * The component used for the root node.
+     */
+    component?: React.ElementType;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    'data-testid'?: string;
+};
+export declare type TabBaseProps = BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'>;
+export declare const Tab: React.ForwardRefExoticComponent<BaseProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onClick"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/Tabs/tabs.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Tab, TabBaseProps } from './tab';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactElement<TabBaseProps, typeof Tab>[];
+    /**
+     * The value of the currently selected `Tab`.
+     */
+    value: string;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+};
+export declare const Tabs: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

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

package/dist/types/TextField/text_field.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * If `true`, the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the input.
+     */
+    size?: ('small' | 'medium' | 'large');
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Attributes applied to the `input` element.
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * The default value. Use when the component is not controlled.
+     */
+    defaultValue?: string;
+    /**
+     * The id of the `input` element.
+     */
+    id?: string;
+    /**
+     * The label of the input. It is only used for layout.
+     */
+    label?: string;
+    /**
+     * The value of the `input` element, required for a controlled component.
+     */
+    value?: string;
+    /**
+     * The short hint displayed in the `input` before the user enters a value.
+     */
+    placeholder?: string;
+    /**
+     * If `true`, the `input` element is required.
+     */
+    required?: boolean;
+    /**
+     * Name attribute of the `input` element.
+     */
+    name?: string;
+    /**
+     * Pass a ref to the `input` element.
+     */
+    inputRef?: React.ForwardedRef<HTMLInputElement>;
+    /**
+     * If `true`, the `input` element is focused during the first mount.
+     */
+    autoFocus?: boolean;
+    /**
+     * If `true`, the `input` will indicate an error.
+     */
+    error?: boolean;
+    errorText?: string;
+    /**
+     * It prevents the user from changing the value of
+     * the field (not from interacting with the field).
+     */
+    readOnly?: boolean;
+    /**
+     * Type of the `input` element.
+     */
+    type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    'data-testid'?: string;
+};
+export declare const TextField: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

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