@mailstep/design-system 0.1.2 → 0.1.3

package/build/dts/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ progress, status, errorMessage, noText, variant }: {
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
+    }) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loading: Story;
+export declare const Finished: Story;
+export declare const Error: Story;

package/build/dts/Elements/ProgressBar/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    status: string | null | undefined;
+    variant?: "normal" | "thin" | undefined;
+}, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    progress: number;
+    status: string | null | undefined;
+}, never>;
+export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

package/build/dts/Elements/SimpleLink/SimpleLink.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+export type ToObjectType = {
+    pathname?: string;
+    search?: string;
+    hash?: string;
+    state?: object;
+};
+export type Props = {
+    as?: string;
+    children?: React.ReactNode;
+    to?: string | ToObjectType | Function;
+    target?: string;
+    disabled?: boolean;
+    onClick?: Function;
+    $decorate?: boolean;
+};
+declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/system").Theme, Props, never>;
+export default StyledLink;

package/build/dts/Elements/SimpleLink/index.d.ts

@@ -0,0 +1,2 @@
+import SimpleLink from './SimpleLink';
+export { SimpleLink };

package/build/dts/Elements/SpaceAround/SpaceAround.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Props } from './types';
+declare const SpaceAroundWrap: ({ children, spaceBetween, spaceAround, ...rest }: Props) => JSX.Element;
+export default SpaceAroundWrap;

package/build/dts/Elements/SpaceAround/index.d.ts

@@ -0,0 +1,3 @@
+import SpaceAroundWrap from './SpaceAround';
+export type { SpaceAround } from './types';
+export { SpaceAroundWrap };

package/build/dts/Elements/SpaceAround/stories/SpaceAround.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, spaceBetween, spaceAround, ...rest }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManyPages: Story;

package/build/dts/Elements/SpaceAround/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type SpaceAroundProps = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+export type SpaceAround = boolean | SpaceAroundProps;
+export type Props = {
+    children: React.ReactNode;
+    spaceAround?: SpaceAround;
+    className?: string;
+    spaceBetween?: boolean;
+};

package/build/dts/Elements/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+import { ISpinner } from './types';
+export declare const appearanceToColorMap: {
+    error: string;
+    concept: string;
+    done: string;
+    info: string;
+    processing: string;
+    success: string;
+    warning: string;
+    waiting: string;
+};
+export declare const appearanceToFontColorMap: Record<string, string>;
+export declare const Spinner: ISpinner;
+export default Spinner;

package/build/dts/Elements/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+import Spinner from './Spinner';
+export { Spinner };

package/build/dts/Elements/Spinner/stories/Spinner.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("../types").ISpinner;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sm: Story;
+export declare const AppearanceConcept: Story;
+export declare const AppearanceDone: Story;
+export declare const AppearanceError: Story;
+export declare const AppearanceInfo: Story;
+export declare const AppearanceProcessing: Story;
+export declare const AppearanceSuccess: Story;
+export declare const AppearanceWarning: Story;
+export declare const AppearanceWaiting: Story;

package/build/dts/Elements/Spinner/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Svg: import("styled-components").StyledComponent<"svg", import("@xstyled/system").Theme, {
+    $variant: 'default' | 'sm';
+}, never>;
+export declare const Circle: import("styled-components").StyledComponent<"circle", import("@xstyled/system").Theme, {}, never>;

package/build/dts/Elements/Spinner/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type AppearanceType = 'concept' | 'done' | 'error' | 'info' | 'processing' | 'success' | 'warning' | 'waiting';
+export interface SpinnerProps {
+    variant?: 'default' | 'sm';
+    appearance?: AppearanceType;
+}
+export type ISpinner = (props: SpinnerProps) => JSX.Element;

package/build/dts/Elements/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+export declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, Props, never>;
+export default Tag;

package/build/dts/Elements/Tag/index.d.ts

@@ -0,0 +1,3 @@
+import Tag from './Tag';
+export { palletes } from './palletes';
+export { Tag };

package/build/dts/Elements/Tag/palletes.d.ts

@@ -0,0 +1,5 @@
+import type { Pallete } from './types';
+/**
+ * [string, string]: [background, text]
+ */
+export declare const palletes: Record<string, Pallete>;

package/build/dts/Elements/Tag/stories/Tag.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, import("../types").Props, never>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllPalletes: Story;
+export declare const Default: Story;
+export declare const RedTag: Story;
+export declare const NotSelected: Story;
+export declare const Pointer: Story;
+export declare const Hover: Story;
+export declare const Opacity: Story;
+export declare const Border: Story;
+export declare const Small: Story;
+export declare const Big: Story;

package/build/dts/Elements/Tag/stories/components/predefinedTags.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const PredefinedTags: () => JSX.Element;
+export default PredefinedTags;

package/build/dts/Elements/Tag/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export type Props = {
+    color?: string;
+    textColor?: string;
+    isNotSelected?: boolean;
+    pointer?: boolean;
+    hover?: boolean;
+    opacity?: boolean;
+    border?: boolean;
+    size?: 'small' | 'medium' | 'big';
+    children?: React.ReactNode;
+};
+export type Pallete = {
+    color: string;
+    textColor: string;
+};

package/build/dts/Elements/Text/Text.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TextProps } from './types';
+declare const Text: (props: TextProps) => JSX.Element;
+export default Text;

package/build/dts/Elements/Text/index.d.ts

@@ -0,0 +1,3 @@
+import Text from './Text';
+export type { TextProps } from './types';
+export { Text };

package/build/dts/Elements/Text/stories/Text.stories.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: import("..").TextProps) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FontSize: Story;
+export declare const FontWeight: Story;
+export declare const VariantMedium: Story;
+export declare const VariantSemibold: Story;
+export declare const VariantBold: Story;

package/build/dts/Elements/Text/types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type TextProps = {
+    children?: string | number | JSX.Element | (JSX.Element | undefined)[];
+    fontSize?: number;
+    fontWeight?: string;
+    variant?: 'normal' | 'medium' | 'semiBold' | 'bold';
+    mt?: string | number;
+    mr?: string | number;
+    mb?: string | number;
+    ml?: string | number;
+    mx?: string | number;
+    my?: string | number;
+};

package/build/dts/Elements/Toast/Toast.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ToastOptions } from 'react-toastify';
+export type ToastType = 'info' | 'success' | 'error' | 'warning';
+export type CustomToastProps = ToastOptions & {
+    closeToast?: () => void;
+    toastProps?: ToastOptions;
+    title?: string;
+    text?: string;
+    type: ToastType;
+};
+declare const Toast: ({ closeToast, title, text, type }: CustomToastProps) => JSX.Element;
+export default Toast;

package/build/dts/Elements/Toast/index.d.ts

@@ -0,0 +1,3 @@
+import Toast from './Toast';
+export type { ToastType } from './Toast';
+export { Toast };

package/build/dts/Elements/Toggle/Toggle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Props } from './types';
+declare const Toggle: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: Props) => JSX.Element;
+export default Toggle;

package/build/dts/Elements/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+import Toggle from './Toggle';
+export { Toggle };

package/build/dts/Elements/Toggle/stories/Toggle.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ onChange, label, name, checked, defaultChecked, spaceAround, disabled, labelPosition, variant, spaceBetween, ...rest }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const VariantGrid: Story;

package/build/dts/Elements/Toggle/types.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent } from 'react';
+type SpaceAroundProps = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+type SpaceAround = boolean | SpaceAroundProps;
+export type Props = {
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    name?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    spaceAround?: SpaceAround;
+    spaceBetween?: boolean;
+    disabled?: boolean;
+    labelPosition?: 'default' | 'left';
+    variant?: 'primary' | 'grid';
+};
+export {};

package/build/dts/Elements/Typography/Typography.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import { TextProps as BaseTextProps } from '../Text';
+export declare const Text: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        fontFamily: string;
+    };
+};
+export declare const Paragraph1: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph2: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph3: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph4: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const Paragraph5: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+    };
+};
+export declare const H1: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H2: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H3: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H4: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H5: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H6: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};
+export declare const H7: {
+    (props: BaseTextProps): JSX.Element;
+    defaultProps: {
+        as: string;
+        fontFamily: string;
+        fontSize: string;
+        mt: number;
+        mb: number;
+    };
+};

package/build/dts/Elements/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

package/build/dts/Elements/Typography/stories/Typography.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const Heading7: Story;
+export declare const P1: Story;
+export declare const P2: Story;
+export declare const P3: Story;
+export declare const P4: Story;
+export declare const P5: Story;

package/build/dts/Forms/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CheckboxProps } from './types';
+declare const _default: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: CheckboxProps) => JSX.Element>;
+export default _default;

package/build/dts/Forms/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Checkbox from './Checkbox';
+export { Checkbox };

package/build/dts/Forms/Checkbox/stories/Checkbox.stories.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").MemoExoticComponent<({ name, label, onChange, checked, defaultChecked, size, className, disabled, inputRef, readOnly, minusIcon, }: import("../types").CheckboxProps) => JSX.Element>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckboxChecked: Story;
+export declare const CheckboxUnchecked: Story;
+export declare const CheckboxDisabled: Story;
+export declare const CheckboxWithMinusIcon: Story;

package/build/dts/Forms/Checkbox/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const FakeInput: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const CheckIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../../Elements/Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const CheckboxWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    size: string | number;
+}, never>;
+export declare const Label: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

package/build/dts/Forms/Checkbox/types.d.ts

@@ -0,0 +1,16 @@
+import { ChangeEvent, RefObject } from 'react';
+export type CheckboxProps = {
+    name?: string;
+    label?: string | JSX.Element;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    color?: string;
+    unsetColor?: string;
+    size?: number;
+    className?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    readOnly?: boolean;
+    minusIcon?: boolean;
+};

package/build/dts/Forms/Input/Input.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { InputProps } from './types';
+export declare const Input: ({ appearance, type, name, label, value, icon, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, ...rest }: InputProps) => JSX.Element;

package/build/dts/Forms/Input/index.d.ts

@@ -0,0 +1,4 @@
+import { Input } from './Input';
+import { InputProps } from './types';
+export { Input };
+export type { InputProps };

package/build/dts/Forms/Input/stories/Input.stories.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ appearance, type, name, label, value, icon, disabled, error, isInvalid, spaceAround, inputRef, autoComplete, isLoading, className, suffix, suffixOnClick, errorAppearance, iconPlacement, iconOnClick, iconTooltip, big, showArrowsController, onClear, alwaysShowClear, setNumber, onEnter, forceFocus, autoFocus, onBlur, ...rest }: import("..").InputProps) => JSX.Element;
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Grid: Story;
+export declare const Disabled: Story;
+export declare const WithIcon: Story;
+export declare const Loading: Story;
+export declare const WithSuffix: Story;
+export declare const Password: Story;
+export declare const ForceFocus: Story;

package/build/dts/Forms/Input/styles.d.ts

@@ -0,0 +1,31 @@
+type StyledInputProps = {
+    appearance?: string;
+    $icon?: string;
+    $isInvalid?: boolean;
+    $isClearable?: boolean;
+    $hasSuffix?: boolean;
+    $iconPlacement?: 'left' | 'right';
+    disabled?: boolean;
+    big?: boolean;
+    value?: string | number;
+};
+type InputIconProps = {
+    right?: boolean;
+};
+export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
+export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, StyledInputProps, never>;
+export declare const InputWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Suffix: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    $isPointer: boolean;
+    $isInvalid: boolean;
+}, never>;
+export declare const InputRow: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    hasValue: boolean;
+    disabled: boolean;
+    $icon?: string | undefined;
+    $isInvalid?: boolean | undefined;
+}, never>;
+export declare const Tooltip: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export {};

package/build/dts/Forms/Input/types.d.ts

@@ -0,0 +1,49 @@
+import { ChangeEvent, Dispatch, FocusEvent, InputHTMLAttributes, MouseEvent, ReactNode, RefObject, SetStateAction } from 'react';
+export type SpaceAround = boolean | SpaceAroundProps;
+export type SpaceAroundProps = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+    appearance?: 'primary' | 'grid';
+    type: string;
+    name?: string;
+    placeholder?: string;
+    autoComplete?: string;
+    suffix?: ReactNode;
+    label?: string | JSX.Element;
+    value?: string | number;
+    defaultValue?: string | number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    icon?: string;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onEnter?: () => void;
+    onClear?: () => void;
+    alwaysShowClear?: boolean;
+    error?: string;
+    isInvalid?: boolean;
+    spaceAround?: SpaceAround;
+    isLoading?: boolean;
+    inputRef?: RefObject<HTMLInputElement>;
+    className?: string;
+    min?: string | number;
+    iconPlacement?: 'left' | 'right';
+    iconOnClick?: (event: MouseEvent<HTMLElement>) => void;
+    suffixOnClick?: (event: MouseEvent<HTMLElement>) => void;
+    errorAppearance?: 'inline' | 'tooltip';
+    iconTooltip?: string;
+    big?: boolean;
+    showArrowsController?: boolean;
+    setNumber?: Dispatch<SetStateAction<number>>;
+    forceFocus?: boolean;
+    autoFocus?: boolean;
+};
+export type ModalData = {
+    [key: string]: any;
+};

package/build/dts/Forms/RadioButton/RadioButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { RadioProps } from './types';
+declare const RadioButton: ({ label, id, name, disabled, onChange, ...rest }: RadioProps) => JSX.Element;
+export default RadioButton;

package/build/dts/Forms/RadioButton/index.d.ts

@@ -0,0 +1,2 @@
+import RadioButton from './RadioButton';
+export { RadioButton };