@peculiar/react-components 1.3.1 → 1.4.0

package/dist/types/Autocomplete/autocomplete.d.ts

@@ -15,6 +15,7 @@ export type TAutocompleteOwnProps<T, Multiple extends boolean | undefined = unde
     className?: string;
     /**
      * The size of the root component.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**
@@ -27,24 +28,29 @@ export type TAutocompleteOwnProps<T, Multiple extends boolean | undefined = unde
     label?: string;
     /**
      * Text to display when there are no options.
+     * @default 'No options'
      */
     noOptionsText?: React.ReactNode;
     /**
      * If `true`, the component is in a loading state.
      * This shows the `loadingText` in place of suggestions (only if there are no
      * suggestions to show, e.g. `options` are empty).
+     * @default false
      */
     loading?: boolean;
     /**
      * Text to display when in a loading state.
+     * @default 'Loading...'
      */
     loadingText?: React.ReactNode;
     /**
      * The maximum number of tags that will be visible when not focused.
+     * @default 2
      */
     limitTags?: number;
     /**
      * If `true`, the autocomplete will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -53,12 +59,16 @@ export type TAutocompleteOwnProps<T, Multiple extends boolean | undefined = unde
     name?: string;
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required?: boolean;
     /**
      * If `true`, the `input` will indicate an error.
      */
     error?: boolean;
+    /**
+     * The content of the error message.
+     */
     errorText?: string;
     /**
      * Render the root element.
@@ -74,23 +84,23 @@ export type TAutocompleteOwnProps<T, Multiple extends boolean | undefined = unde
     renderTag?: (props: ReturnType<IUseAutocompleteReturnType<T, Multiple>['getTagProps']>, option: T) => React.ReactNode;
     /**
      * The label to display when the tags are truncated (`limitTags`).
+     * @default (more) => `${more} more`
      */
     getLimitTagsText?: (more: number) => string;
     /**
      * Callback fired when the create button clicked.
      */
     onCreate?: (event: React.SyntheticEvent, value: string) => void;
+    /**
+     * If `true`, the `input` element will be read only.
+     * @default false
+     */
+    disableSearch?: boolean;
 };
 /**
  *
  */
 export declare const Autocomplete: {
     <T, Multiple extends boolean = false>(props: TAutocompleteOwnProps<T, Multiple>): JSX.Element;
-    defaultProps: {
-        noOptionsText: string;
-        loading: boolean;
-        loadingText: string;
-        required: boolean;
-        size: string;
-    };
+    displayName: string;
 };

package/dist/types/Avatar/avatar.d.ts

@@ -29,14 +29,17 @@ interface IAvatarOwnProps {
     className?: string;
     /**
      * The size of the avatar.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**
      * The color of component background.
+     * @default 'gray-7'
      */
     background?: TColorType;
     /**
      * The color of initials text.
+     * @default 'white'
      */
     color?: TColorType;
     /**

package/dist/types/Backdrop/backdrop.d.ts

@@ -14,12 +14,17 @@ interface IBackdropOwnProps {
     className?: string;
     /**
      * If `true`, the backdrop is invisible.
+     * @default false
      */
     invisible?: boolean;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     transitionDuration?: number;
+    /**
+     * @default 'medium'
+     */
     variant?: ('light' | 'medium' | 'heavy');
 }
 export type TBackdropProps = IBackdropOwnProps & TBaseTransitionProps & React.HTMLAttributes<HTMLDivElement>;

package/dist/types/ButtonBase/button_base.d.ts

@@ -11,10 +11,12 @@ export interface IButtonBaseOwnProps {
     children: React.ReactNode;
     /**
      * If `true`, the button will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The variant to use.
+     * @default 'text'
      */
     variant?: ('contained' | 'outlined' | 'text');
     /**
@@ -23,10 +25,12 @@ export interface IButtonBaseOwnProps {
     textVariant?: TTypographyType;
     /**
      * The color of the component.
+     * @default 'default'
      */
     color?: ('primary' | 'secondary' | 'wrong' | 'white' | 'default');
     /**
      * The size of the button.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
 }

package/dist/types/Checkbox/checkbox.d.ts

@@ -13,6 +13,7 @@ interface ICheckboxOwnProps {
     defaultChecked?: boolean;
     /**
      * The color of the component.
+     * @default 'primary'
      */
     color?: ('primary' | 'secondary');
     /**

package/dist/types/Chip/chip.d.ts

@@ -10,6 +10,7 @@ export interface IChipOwnProps {
     children: React.ReactNode;
     /**
      * If `true`, the chip will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -18,10 +19,12 @@ export interface IChipOwnProps {
     deleteIcon?: React.ElementType<any>;
     /**
      * The variant to use.
+     * @default 'contained'
      */
     variant?: ('contained' | 'outlined');
     /**
      * The color of the component.
+     * @default 'secondary'
      */
     color?: ('secondary' | 'wrong' | 'default');
     /**

package/dist/types/CircularProgress/circular_progress.d.ts

@@ -5,6 +5,7 @@ import React from 'react';
 interface ICircularProgressOwnProps {
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
      */
     color?: ('primary' | 'secondary' | 'white');
     /**
@@ -13,16 +14,19 @@ interface ICircularProgressOwnProps {
     className?: string;
     /**
      * The size of the progress.
+     * @default 'large'
      */
     size?: ('small' | 'large');
     /**
      * The variant to use.
      * Use indeterminate when there is no progress value.
+     * @default 'indeterminate'
      */
     variant?: 'determinate' | 'indeterminate';
     /**
      * The value of the progress indicator for the determinate variant.
      * Value between 0 and 100.
+     * @default 0
      */
     value?: number;
 }

package/dist/types/Collapse/collapse.d.ts

@@ -11,10 +11,12 @@ interface ICollapseOwnProps {
     in?: boolean;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     timeout?: number;
     /**
      * The transition orientation.
+     * @default 'vertical'
      */
     orientation?: 'horizontal' | 'vertical';
     /**

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

@@ -5,39 +5,44 @@ import type { TCircularProgressProps } from '../CircularProgress';
  */
 interface IDialogOwnProps {
     /**
-     * If `true`, the Dialog is open.
+     * A single child content element.
      */
-    open: boolean;
+    children: React.ReactNode;
     /**
-     * Dialog children, usually the included sub-components.
+     * If `true`, the Dialog is open.
      */
-    children: React.ReactNode;
+    open: boolean;
     /**
      * The className of Dialog container.
      */
     className?: string;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     transitionDuration?: number;
     /**
      * If `true`, the dialog will be full-screen.
+     * @default false
      */
     fullScreen?: boolean;
     /**
      * If `true`, clicking the backdrop will not fire the `onClose` callback.
+     * @default false
      */
     disableBackdropClick?: boolean;
     /**
      * If `true`, hitting escape will not fire the `onClose` callback.
+     * @default false
      */
     disableEscapeKeyDown?: boolean;
     /**
      * Callback fired when the component requests to be closed.
      */
-    onClose?: () => void;
+    onClose?: (event: React.SyntheticEvent) => void;
     /**
      * The size of the dialog.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**
@@ -46,6 +51,7 @@ interface IDialogOwnProps {
     loading?: boolean;
     /**
      * The color of the CircularProgress component.
+     * @default 'secondary'
      */
     loadingColor?: TCircularProgressProps['color'];
     'data-testid'?: string;

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

@@ -13,6 +13,7 @@ interface IDialogContentOwnProps {
     className?: string;
     /**
      * Display the top and bottom dividers.
+     * @default true
      */
     dividers?: boolean;
     /**

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

@@ -18,6 +18,7 @@ interface IDrawerOwnProps {
     className?: string;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     transitionDuration?: number;
     /**

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

@@ -7,6 +7,7 @@ import { IButtonBaseOwnProps } from '../ButtonBase';
 export interface IFabOwnProps extends Omit<IButtonBaseOwnProps, 'size' | 'variant'> {
     /**
      * The variant to use.
+     * @default 'contained'
      */
     variant?: ('contained' | 'outlined');
 }

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

@@ -8,15 +8,20 @@ interface IBaseProps {
     in?: boolean;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     timeout?: number;
     /**
      * A single child content element.
      */
     children: React.ReactElement;
+    /**
+     * @default 1
+     */
     finalOpacity?: number;
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
+     * @default true
      */
     appear?: boolean;
 }

package/dist/types/Flex/flex_container.d.ts

@@ -11,6 +11,7 @@ export interface IFlexContainerOwnProps {
     children?: React.ReactNode;
     /**
      * Defines the `flex-direction` style property.
+     * @default 'row'
      */
     direction?: Property.FlexDirection;
     /**

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

@@ -5,10 +5,12 @@ import React from 'react';
 interface ILinearProgressOwnProps {
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
+     * @default 'primary'
      */
     color?: ('primary' | 'secondary');
     /**
      * The variant to use.
+     * @default 'indeterminate'
      */
     variant?: ('indeterminate');
     /**

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

@@ -18,14 +18,17 @@ interface IModalOwnProps {
     className?: string;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     transitionDuration?: number;
     /**
      * If `true`, clicking the backdrop will not fire the `onClose` callback.
+     * @default false
      */
     disableBackdropClick?: boolean;
     /**
      * If `true`, hitting escape will not fire the `onClose` callback.
+     * @default false
      */
     disableEscapeKeyDown?: boolean;
     /**

package/dist/types/NativeSelect/native_select.d.ts

@@ -9,10 +9,12 @@ interface INativeSelectOwnProps {
     }[];
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The size of the select.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**

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

@@ -16,6 +16,7 @@ interface IBaseProps {
     anchorEl: Element;
     /**
      * Popover placement.
+     * @default 'bottom-end'
      */
     placement?: PopperProps<unknown>['placement'];
     /**
@@ -28,6 +29,7 @@ interface IBaseProps {
     modalProps?: Partial<TModalProps>;
     /**
      * Make your popover the same width as the reference.
+     * @default false
      */
     allowUseSameWidth?: boolean;
 }

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

@@ -18,6 +18,7 @@ interface IBaseProps {
     anchorEl?: Element;
     /**
      * Popper placement.
+     * @default 'bottom'
      */
     placement?: PopperReactProps<unknown>['placement'];
     /**
@@ -26,6 +27,7 @@ interface IBaseProps {
     disablePortal?: boolean;
     /**
      * Make your popper the same width as the reference.
+     * @default false
      */
     allowUseSameWidth?: boolean;
     /**

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

@@ -13,6 +13,7 @@ interface IRadioOwnProps {
     defaultChecked?: boolean;
     /**
      * The color of the component.
+     * @default 'primary'
      */
     color?: ('primary' | 'secondary');
     /**

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

@@ -15,6 +15,7 @@ export type TSelectOwnProps<T, Multiple extends boolean | undefined = undefined>
     className?: string;
     /**
      * The size of the root component.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**
@@ -27,28 +28,34 @@ export type TSelectOwnProps<T, Multiple extends boolean | undefined = undefined>
     label?: string;
     /**
      * Text to display when there are no options.
+     * @default 'No options'
      */
     noOptionsText?: React.ReactNode;
     /**
      * If `true`, the component is in a loading state.
      * This shows the `loadingText` in place of suggestions (only if there are no
      * suggestions to show, e.g. `options` are empty).
+     * @default false
      */
     loading?: boolean;
     /**
      * Text to display when in a loading state.
+     * @default 'Loading...'
      */
     loadingText?: React.ReactNode;
     /**
      * The maximum number of tags that will be visible when not focused.
+     * @default 2
      */
     limitTags?: number;
     /**
      * If `true`, the popup search input will be hidden.
+     * @default false
      */
     disableSearch?: boolean;
     /**
      * If `true`, the autocomplete will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -57,20 +64,26 @@ export type TSelectOwnProps<T, Multiple extends boolean | undefined = undefined>
     name?: string;
     /**
      * If `true`, the `input` element is required.
+     * @default false
      */
     required?: boolean;
     /**
      * Text to display when in the create button element.
+     * @default 'Create "{{value}}"'
      */
     createOptionText?: string;
     /**
      * If `true`, the create button element will be shown.
+     * @default false
      */
     allowCreateOption?: boolean;
     /**
      * If `true`, the `input` will indicate an error.
      */
     error?: boolean;
+    /**
+     * The content of the error message.
+     */
     errorText?: string;
     /**
      * Render the root element.
@@ -82,6 +95,7 @@ export type TSelectOwnProps<T, Multiple extends boolean | undefined = undefined>
     renderOption?: (props: ReturnType<IUseAutocompleteReturnType<T, Multiple>['getOptionProps']>, option: T) => React.ReactNode;
     /**
      * The label to display when the tags are truncated (`limitTags`).
+     * @default (more) => `${more} more`
      */
     getLimitTagsText?: (more: number) => string;
     /**
@@ -94,15 +108,5 @@ export type TSelectOwnProps<T, Multiple extends boolean | undefined = undefined>
  */
 export declare const Select: {
     <T, Multiple extends boolean = false>(props: TSelectOwnProps<T, Multiple>): JSX.Element;
-    defaultProps: {
-        disableSearch: boolean;
-        noOptionsText: string;
-        loading: boolean;
-        loadingText: string;
-        limitTags: number;
-        required: boolean;
-        allowCreateOption: boolean;
-        createOptionText: string;
-        size: string;
-    };
+    displayName: string;
 };

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

@@ -19,8 +19,12 @@ export interface ISkeletonOwnProps {
     width?: number | string;
     /**
      * The type of content that will be rendered.
+     * @default 'text'
      */
     variant?: ('text' | 'rect' | 'circle');
+    /**
+     * @default 'gray-4'
+     */
     background?: TColorType;
 }
 export interface ISkeletonTypeMap<P = object, D extends React.ElementType = 'span'> {

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

@@ -8,6 +8,7 @@ interface IBaseProps {
     in?: boolean;
     /**
      * The duration for the transition, in milliseconds.
+     * @default 225
      */
     timeout?: number;
     /**
@@ -16,10 +17,12 @@ interface IBaseProps {
     children: React.ReactElement;
     /**
      * Direction the child node will enter from.
+     * @default 'right'
      */
     direction?: ('right' | 'left' | 'up' | 'down');
     /**
      * Perform the enter transition when it first mounts if `in` is also `true`.
+     * @default true
      */
     appear?: boolean;
 }

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

@@ -14,14 +14,17 @@ interface ISliderOwnProps {
     value?: number;
     /**
      * If `true`, the slider will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The maximum allowed value of the slider. Should not be equal to min.
+     * @default 100
      */
     max?: number;
     /**
      * The minimum allowed value of the slider. Should not be equal to max.
+     * @default 0
      */
     min?: number;
     /**
@@ -30,6 +33,7 @@ interface ISliderOwnProps {
     name?: string;
     /**
      * The granularity with which the slider can step through values
+     * @default 1
      */
     step?: number;
     /**

package/dist/types/Switch/switch.d.ts

@@ -13,6 +13,7 @@ interface ISwitchOwnProps {
     defaultChecked?: boolean;
     /**
      * The color of the component.
+     * @default 'primary'
      */
     color?: ('primary' | 'secondary');
     /**

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

@@ -14,10 +14,12 @@ export interface ITabOwnProps {
     id: string;
     /**
      * If `true`, the tab will be disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The color of the component.
+     * @default 'black'
      */
     color?: ('black' | 'white');
     /**

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

@@ -5,10 +5,12 @@ import * as React from 'react';
 interface ITextFieldOwnProps {
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The size of the input.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**

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

@@ -5,10 +5,12 @@ import * as React from 'react';
 interface ITextareaFieldOwnProps {
     /**
      * If `true`, the component is disabled.
+     * @default false
      */
     disabled?: boolean;
     /**
      * The size of the input.
+     * @default 'medium'
      */
     size?: ('small' | 'medium' | 'large');
     /**

package/dist/types/Toast/toast.d.ts

@@ -18,6 +18,7 @@ interface IToastOwnProps {
     onClose: (id: string) => void;
     /**
      * The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.
+     * @default 4000
      */
     duration?: number | null;
     /**

package/dist/types/Toast/toast_provider.d.ts

@@ -7,6 +7,7 @@ interface IBaseProps {
     children: React.ReactNode;
     /**
      * Maximum snackbars that can be stacked on bottom of one another.
+     * @default 1
      */
     maxToasts?: number;
     /**