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

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

@@ -0,0 +1,72 @@
+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<HTMLTextAreaElement>;
+    /**
+     * 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;
+    /**
+     * Callback fired when the value is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * 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<HTMLTextAreaElement>;
+    /**
+     * 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;
+    'data-testid'?: string;
+};
+export declare const TextareaField: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,3 @@
+export { ToastProvider } from './toast_provider';
+export { useToast } from './use_toast';
+export { BaseToastType, ToastType } from './toast_context';

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AlertProps } from '../Alert';
+declare type BaseProps = {
+    /**
+     * The `id` of the toast. Mostly used when you need to prevent duplicate.
+     */
+    id: string;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose: (id: string) => void;
+    /**
+     * The delay before the toast hides (in milliseconds). If set to `null`, toast will never dismiss.
+     */
+    duration?: number | null;
+    /**
+     * If `true`, toast will show a close button.
+     */
+    isClosable?: boolean;
+    /**
+     * Props applied to the `Alert` element.
+     */
+    alertProps?: Omit<AlertProps, 'children' | 'onClose'>;
+};
+export declare const Toast: React.FC<BaseProps>;
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+};
+export declare type ToastContainerProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const ToastContainer: React.FC<ToastContainerProps>;
+export {};

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AlertProps } from '../Alert';
+export declare type BaseToastType = {
+    /**
+     * The message of the toast.
+     */
+    message: string;
+    /**
+     * The status of the toast.
+     */
+    variant?: AlertProps['variant'];
+    /**
+     * If `true`, the toast start icon will be hidden.
+     */
+    disableIcon?: boolean;
+    /**
+     * If `true`, toast will show a close button.
+     */
+    isClosable?: boolean;
+    /**
+     * The delay before the toast hides (in milliseconds).
+     * If set to `null`, toast will never dismiss.
+     */
+    duration?: number | null;
+    /**
+     * The `id` of the toast. Mostly used when you need to prevent duplicate.
+     * By default, we generate a unique `id` for each toast.
+     */
+    id?: string;
+};
+export declare type ToastType = BaseToastType & {
+    createdAt: number;
+};
+export declare type ToastContextType = {
+    addToast: (options: BaseToastType) => void;
+    removeToast: (id: string) => void;
+    removeAllToasts: () => void;
+};
+export declare const ToastContext: React.Context<ToastContextType>;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ToastContainerProps } from './toast_container';
+declare type BaseProps = {
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Maximum snackbars that can be stacked on bottom of one another.
+     */
+    maxToasts?: number;
+    /**
+     * Props applied to the `ToastContainer` element.
+     */
+    toastContainerProps?: Omit<ToastContainerProps, 'children'>;
+};
+export declare const ToastProvider: React.FC<BaseProps>;
+export {};

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

@@ -0,0 +1,2 @@
+import { ToastContextType } from './toast_context';
+export declare const useToast: () => ToastContextType;

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

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip';

package/dist/types/Tooltip/tooltip.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Placement } from '@popperjs/core';
+declare type BaseProps = {
+    /**
+     * Tooltip reference element.
+     */
+    children: React.ReactElement;
+    /**
+     * Tooltip title.
+     */
+    title: React.ReactNode;
+    /**
+     * Tooltip placement.
+     */
+    placement?: Placement;
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * Do not respond to focus events.
+     */
+    disableFocusListener?: boolean;
+    /**
+     * Do not respond to hover events.
+     */
+    disableHoverListener?: boolean;
+    /**
+     * Do not respond to long press touch events.
+     */
+    disableTouchListener?: boolean;
+    /**
+     * Makes a tooltip interactive, i.e. will not close when the user hovers over the tooltip.
+     */
+    interactive?: boolean;
+    /**
+     * The size of the tooltip.
+     */
+    size?: ('small' | 'large');
+    /**
+     * The color of the tooltip.
+     */
+    color?: ('black' | 'white');
+    /**
+     * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+     */
+    disablePortal?: boolean;
+};
+declare type TooltipProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};

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

@@ -0,0 +1 @@
+export { Typography, TypographyBaseProps, TypographyProps } from './typography';

package/dist/types/Typography/typography.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ColorType, TypographyType } from '../styles';
+export declare type TypographyBaseProps = {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * The variant to use.
+     */
+    variant?: TypographyType;
+    /**
+     * The color of the component.
+     */
+    color?: ColorType | 'inherit';
+    /**
+     * The className of the component.
+     */
+    className?: string;
+    /**
+     * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.
+     * Note that text overflow can only happen with block or inline-block level elements
+     * (the element needs to have a width in order to overflow).
+     */
+    noWrap?: boolean;
+    /**
+     * The component used for the root node.
+     */
+    component?: React.ElementType;
+    'data-testid'?: string;
+};
+export declare type TypographyProps = TypographyBaseProps & React.HTMLAttributes<HTMLElement>;
+export declare const Typography: React.ForwardRefExoticComponent<TypographyBaseProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,7 @@
+export { useMediaQuery } from './use_media_query';
+export { useMergedRef } from './use_merged_ref';
+export { useClipboard, UseClipboardOptions } from './use_clipboard';
+export { useControllableState, UseControllableStateProps } from './use_controllable';
+export { useId } from './use_id';
+export { useImage } from './use_image';
+export { useWindowEventListener } from './use_window_event_listener';

package/dist/types/hooks/use_clipboard.d.ts

@@ -0,0 +1,26 @@
+export declare type UseClipboardOptions = {
+    /**
+     * timeout delay (in ms) to switch back to initial state once copied.
+     */
+    timeout?: number;
+    /**
+     * Set the desired MIME type
+     */
+    format?: string;
+};
+/**
+ * React hook to copy content to clipboard
+ *
+ * @param text the text or value to copy
+ * @param {Number} [optionsOrTimeout=1500] optionsOrTimeout -
+ * delay (in ms) to switch back to initial state once copied.
+ * @param {Object} optionsOrTimeout
+ * @param {string} optionsOrTimeout.format - set the desired MIME type
+ * @param {number} optionsOrTimeout.timeout -
+ * delay (in ms) to switch back to initial state once copied.
+ */
+export declare function useClipboard(text: string, optionsOrTimeout?: number | UseClipboardOptions): {
+    value: string;
+    onCopy: () => void;
+    hasCopied: boolean;
+};

package/dist/types/hooks/use_controllable.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare type UseControllableStateProps<T> = {
+    /**
+     * The value to used in controlled mode
+     */
+    value?: T;
+    /**
+     * The initial value to be used, in uncontrolled mode
+     */
+    defaultValue?: T | (() => T);
+    /**
+     * The callback fired when the value changes
+     */
+    onChange?: (value: T) => void;
+    /**
+     * The function that determines if the state should be updated
+     */
+    shouldUpdate?: (prev: T, next: T) => boolean;
+};
+/**
+ * React hook for using controlling component state.
+ * @param props
+ */
+export declare function useControllableState<T>(props: UseControllableStateProps<T>): [T, import("react").Dispatch<import("react").SetStateAction<T>>];

package/dist/types/hooks/use_id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * React hook for generate unique id.
+ * @param defaultValue The default id value.
+ */
+export declare function useId(defaultValue?: string): string;

package/dist/types/hooks/use_image.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare type UseImageOptionsType = {
+    /**
+     * A callback for when the image `src` has been loaded.
+     */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /**
+     * A callback for when there was an error loading the image `src`.
+     */
+    onError?: (error: string | React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+declare type Status = ('loading' | 'failed' | 'pending' | 'loaded');
+/**
+ * React hook that loads an image in the browser,
+ * and let's us know the `status` so we can show image
+ * fallback if it is still `pending`
+ *
+ * @returns the status of the image loading progress
+ *
+ * @example
+ *
+ * ```jsx
+ * function App(){
+ *   const [status, image] = useImage("image.png")
+ *   return status === "loaded" ? <img src={image.src} /> : <Placeholder />
+ * }
+ * ```
+ */
+declare type UseImageReturnType = {
+    status: Status;
+    image?: HTMLImageElement;
+};
+export declare function useImage(src: string, options?: UseImageOptionsType): UseImageReturnType;
+export {};

package/dist/types/hooks/use_media_query.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook that returns `true` if the media query matched and `false` if not. This
+ * hook will always return `false` when rendering on the server.
+ *
+ * @param query The media query you want to match against e.g. `"only screen and (min-width: 12em)"`
+ */
+export declare function useMediaQuery(query: string): boolean;

package/dist/types/hooks/use_merged_ref.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+/**
+ * A React hook for merging multiple refs into one ref.
+ * @param refs React callback refs or refs created with `useRef()`, `createRef()`.
+ */
+export declare const useMergedRef: <T extends unknown>(...refs: React.Ref<T>[]) => (instance: T) => void;

package/dist/types/hooks/use_window_event_listener.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useWindowEventListener: <T extends keyof WindowEventMap>(event: T, listener: (this: Window, ev: WindowEventMap[T]) => any, deps?: React.DependencyList, removeOnUnmount?: boolean) => void;

package/dist/types/icons/arrow_drop_down_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const ArrowDropDownIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/check_circle_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckCircleIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/check_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CheckIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_circle_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseCircleIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/close_small_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const CloseSmallIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/dot_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const DotIcon: React.FC<IconProps>;
+export {};

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

@@ -0,0 +1,9 @@
+export { CheckIcon } from './check_icon';
+export { CloseIcon } from './close_icon';
+export { CloseSmallIcon } from './close_small_icon';
+export { ArrowDropDownIcon } from './arrow_drop_down_icon';
+export { CheckCircleIcon } from './check_circle_icon';
+export { CloseCircleIcon } from './close_circle_icon';
+export { WarningIcon } from './warning_icon';
+export { DotIcon } from './dot_icon';
+export { PlusIcon } from './plus_icon';

package/dist/types/icons/plus_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const PlusIcon: React.FC<IconProps>;
+export {};

package/dist/types/icons/warning_icon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare type IconProps = React.HTMLAttributes<HTMLOrSVGElement>;
+export declare const WarningIcon: React.FC<IconProps>;
+export {};

package/dist/types/index.d.ts

@@ -1,4 +1,32 @@
-export * from './box';
-export * from './button';
-export * from './typography';
+export * from './Alert';
+export * from './Avatar';
+export * from './Box';
+export * from './Button';
+export * from './Checkbox';
+export * from './Chip';
+export * from './CircularProgress';
+export * from './Collapse';
+export * from './Dialog';
+export * from './Drawer';
+export * from './Fab';
+export * from './Fade';
+export * from './IconButton';
+export * from './icons';
+export * from './Image';
+export * from './LinearProgress';
+export * from './Menu';
+export * from './Popover';
+export * from './Portal';
+export * from './Radio';
+export * from './Select';
+export * from './SelectPicker';
+export * from './Slide';
+export * from './Slider';
+export * from './Tabs';
+export * from './TextareaField';
+export * from './TextField';
+export * from './Toast';
+export * from './Tooltip';
+export * from './Typography';
 export * from './styles';
+export * from './hooks';

package/dist/types/styles/colors/additional.d.ts

@@ -0,0 +1,6 @@
+export declare const additional: {
+    success: string;
+    attention: string;
+    'extra-1': string;
+    'extra-2': string;
+};

package/dist/types/styles/colors/grayscale.d.ts

@@ -0,0 +1,14 @@
+export declare const grayscale: {
+    white: string;
+    'gray-1': string;
+    'gray-2': string;
+    'gray-3': string;
+    'gray-4': string;
+    'gray-5': string;
+    'gray-6': string;
+    'gray-7': string;
+    'gray-8': string;
+    'gray-9': string;
+    'gray-10': string;
+    black: string;
+};

package/dist/types/styles/colors/index.d.ts

@@ -0,0 +1,5 @@
+export { grayscale } from './grayscale';
+export { primary, generatePrimaryColors } from './primary';
+export { secondary, generateSecondaryColors } from './secondary';
+export { wrong, generateWrongColors } from './wrong';
+export { additional } from './additional';

package/dist/types/styles/colors/primary.d.ts

@@ -0,0 +1,26 @@
+export declare const generatePrimaryColors: (hex?: string) => {
+    'primary-tint-5': string;
+    'primary-tint-4': string;
+    'primary-tint-3': string;
+    'primary-tint-2': string;
+    'primary-tint-1': string;
+    primary: string;
+    'primary-shade-1': string;
+    'primary-shade-2': string;
+    'primary-shade-3': string;
+    'primary-shade-4': string;
+    'primary-shade-5': string;
+};
+export declare const primary: {
+    'primary-tint-5': string;
+    'primary-tint-4': string;
+    'primary-tint-3': string;
+    'primary-tint-2': string;
+    'primary-tint-1': string;
+    primary: string;
+    'primary-shade-1': string;
+    'primary-shade-2': string;
+    'primary-shade-3': string;
+    'primary-shade-4': string;
+    'primary-shade-5': string;
+};

package/dist/types/styles/colors/secondary.d.ts

@@ -0,0 +1,26 @@
+export declare const generateSecondaryColors: (hex?: string) => {
+    'secondary-tint-5': string;
+    'secondary-tint-4': string;
+    'secondary-tint-3': string;
+    'secondary-tint-2': string;
+    'secondary-tint-1': string;
+    secondary: string;
+    'secondary-shade-1': string;
+    'secondary-shade-2': string;
+    'secondary-shade-3': string;
+    'secondary-shade-4': string;
+    'secondary-shade-5': string;
+};
+export declare const secondary: {
+    'secondary-tint-5': string;
+    'secondary-tint-4': string;
+    'secondary-tint-3': string;
+    'secondary-tint-2': string;
+    'secondary-tint-1': string;
+    secondary: string;
+    'secondary-shade-1': string;
+    'secondary-shade-2': string;
+    'secondary-shade-3': string;
+    'secondary-shade-4': string;
+    'secondary-shade-5': string;
+};

package/dist/types/styles/colors/wrong.d.ts

@@ -0,0 +1,26 @@
+export declare const generateWrongColors: (hex?: string) => {
+    'wrong-tint-5': string;
+    'wrong-tint-4': string;
+    'wrong-tint-3': string;
+    'wrong-tint-2': string;
+    'wrong-tint-1': string;
+    wrong: string;
+    'wrong-shade-1': string;
+    'wrong-shade-2': string;
+    'wrong-shade-3': string;
+    'wrong-shade-4': string;
+    'wrong-shade-5': string;
+};
+export declare const wrong: {
+    'wrong-tint-5': string;
+    'wrong-tint-4': string;
+    'wrong-tint-3': string;
+    'wrong-tint-2': string;
+    'wrong-tint-1': string;
+    wrong: string;
+    'wrong-shade-1': string;
+    'wrong-shade-2': string;
+    'wrong-shade-3': string;
+    'wrong-shade-4': string;
+    'wrong-shade-5': string;
+};