@aveonline/ui-react 0.0.2-alpha.0 → 1.0.1

package/README.md

@@ -2,6 +2,7 @@
   <img height="100" src="https://user-images.githubusercontent.com/38017835/197309416-fd4390a0-cfb6-41f3-ac26-10d067d92a25.png">
   <h1 align="center">ui ecosystem react</h1>
   <p>The home base for Aveonline design system, ui-react provides essential design resources for our developers to use in the Aveonline-branded interfaces that they create.</p>
+  <a href="https://ui-aveonline.vercel.app/">Go Storybook</a>
 </div>
 
 ## Before started
@@ -9,7 +10,7 @@
 For usage with tailwind config, install:
 
 ```shell
-npm i autoprefixer cssnano postcss postcss-import tailwindcss @tailwindcss/forms -D
+npm i @tailwindcss/forms
 ```
 
 ## Getting started
@@ -25,30 +26,27 @@ npm i @aveonline/ui-react
 Import things into your JS app from the `@aveonline/ui-react` package.
 
 ```ts
-import { Test } from '@aveonline/ui-react'
+import { Button } from '@aveonline/ui-react'
 ```
 
 `tailwind.config.js`
 
 ```ts
-const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
-const config = { ...tailwindConfig }
-module.exports = config
-```
+/** @type {import('tailwindcss').Config} */
 
-or
-
-```ts
-module.exports = {
-  content: ['./node_modules/@aveonline/ui-react/dist/*.{mjs,js}']
+const tailwindConfig = require('@aveonline/ui-react/tailwind.config.js')
+const { content, ...all } = tailwindConfig
+
+const config = {
+  content: [
+    ...content,
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './node_modules/@aveonline/ui-react/dist/*.{mjs,js}'
+  ],
+  ...all
 }
-```
 
-`postcss.config.js`
-
-```ts
-const postcssConfig = require('@aveonline/ui-react/postcss.config.js')
-const config = { ...postcssConfig }
 module.exports = config
 ```
 
@@ -92,7 +90,7 @@ Tests
 
 Run `npm run test` to execute all unit test components.
 
-We use `vitest` and `testing-library/react` for unit/integration tests and will soon use [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
+We use `vitest` and `testing-library/react` for unit/integration tests and [Chromatic](https://www.chromaticqa.com/) for visual regression testing.
 
 Open Storybook
 
@@ -111,3 +109,17 @@ Storybook production
 ```shell
 npm run build:storybook
 ```
+
+Run test
+
+```shell
+npm run test
+```
+
+Run regression testing
+
+- [Join](https://www.chromatic.com/library?appId=6362f0c0f36774d17ed0c3a0&inviteToken=4adce6358a9b439f8b636d0599e6db4b)
+
+```shell
+npm run chromatic
+```

package/dist/assets/index.91a8dfaf.css

@@ -0,0 +1 @@
+[type=radio]:checked{background-image:url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D'0%200%2016%2016'%20fill%3D'%232C6ECB'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Ccircle%20cx%3D'8'%20cy%3D'8'%20r%3D'4'%2F%3E%3C%2Fsvg%3E")}[type=radio]:checked:disabled{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")}

package/dist/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import { IAvatar } from './IAvatar';
+/**
+ * Atoms: Avatar
+ * Are used to show a thumbnail representation of an individual or business in the interface
+ */
+declare function Avatar({ size }: IAvatar): JSX.Element;
+export default Avatar;

package/dist/components/atoms/Avatar/IAvatar.d.ts

@@ -0,0 +1,6 @@
+export interface IAvatar {
+    /**
+     * Adjust size
+     */
+    size: 'sm' | 'xs' | 'md' | 'lg';
+}

package/dist/components/atoms/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/dist/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,7 @@
+import { IBadge } from './IBadge';
+/**
+ * Atoms: Badge
+ * Badges are used to inform merchants of the status of an object or of an action that’s been taken.
+ */
+declare function Badge({ variant, children }: IBadge): JSX.Element;
+export default Badge;

package/dist/components/atoms/Badge/IBadge.d.ts

@@ -0,0 +1,11 @@
+import { IChildren } from '../../../types';
+export interface IBadge extends IChildren {
+    /**
+     * Option list badges availables
+     */
+    variant: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+    /**
+     * Sizes
+     */
+    size?: 'sm' | 'md';
+}

package/dist/components/atoms/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default as Badge } from './Badge';

package/dist/components/atoms/Button/Button.d.ts

@@ -0,0 +1,7 @@
+import type { IButton } from './IButton';
+/**
+ * Atoms: Button
+ * Buttons are used primarily for actions, such as 'Add', 'Close', 'Cancel', or 'Save'. Plain buttons, which look similar to links, are used for less important or less commonly used actions, such as 'view shipping settings'.
+ */
+declare function Button({ variant, size, fullWidth, isLoading, isDisabled, align, onlyOneIcon, children, ...allProps }: IButton): JSX.Element;
+export default Button;

package/dist/components/atoms/Button/IButton.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode, MouseEventHandler } from 'react';
+export declare type Variant = 'primary' | 'basic' | 'destructive' | 'plain' | 'plain-monochrome' | 'plain-destructive';
+declare type Size = 'md' | 'sm';
+export declare type Align = 'start' | 'center' | 'end';
+interface IButton {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    variant?: Variant;
+    /**
+     * Button contents how label or label + icons
+     */
+    children?: ReactNode;
+    /**
+     * Adjust size
+     */
+    size?: Size;
+    /**
+     * How large should the button be?
+     */
+    fullWidth?: boolean;
+    /**
+     * State load
+     */
+    isLoading?: boolean;
+    /**
+     * State disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Position align children elements
+     */
+    align?: Align;
+    /**
+     * When only have one icon, not children string
+     */
+    onlyOneIcon?: boolean;
+    /**
+     * Emit event handle click
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement> | (() => void);
+}
+interface ILoading {
+    variant?: Variant;
+    size?: Size;
+}
+export type { IButton, ILoading };

package/dist/components/atoms/Button/IsLoading.d.ts

@@ -0,0 +1,3 @@
+import { ILoading } from './IButton';
+declare function IsLoading({ variant, size }: ILoading): JSX.Element;
+export default IsLoading;

package/dist/components/atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export * from './IButton';

package/dist/components/atoms/Button/useCSS.d.ts

@@ -0,0 +1,4 @@
+import { IButton } from './IButton';
+export declare function useCSS({ variant, isLoading, size, fullWidth, align, onlyOneIcon }: IButton): {
+    getClass: () => string;
+};

package/dist/components/atoms/Heading/Heading.d.ts

@@ -0,0 +1,8 @@
+import type { IHeading } from './IHeading';
+/**
+ * Atoms: Heading
+ * You can select the semantic html tag you need. h1, h2, h3, h4, h5, h6.
+ * Default h2
+ */
+declare function Heading({ variant, children, lineHeight, weight, color, size, className, as: ElementHeading }: IHeading): JSX.Element;
+export default Heading;

package/dist/components/atoms/Heading/IHeading.d.ts

@@ -0,0 +1,11 @@
+import type { IColorText, IWeight, ILineHeightHeading, IFontSizeHeading, IClassName, IChildren } from '../../../types';
+export interface IHeading extends IChildren, IClassName, IWeight, ILineHeightHeading, IColorText, IFontSizeHeading {
+    /**
+     * Variant heading
+     */
+    variant?: 'subheading' | 'heading' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Tag html heading availables
+     */
+    as?: Extract<keyof JSX.IntrinsicElements, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+}

package/dist/components/atoms/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Heading } from './Heading';
+export * from './IHeading';

package/dist/components/atoms/Heading/useCSS.d.ts

@@ -0,0 +1,4 @@
+import { IHeading } from './IHeading';
+export declare function useCSS({ variant, ...props }: IHeading): {
+    getClass: string;
+};

package/dist/components/atoms/Icon/IIcon.d.ts

@@ -0,0 +1,30 @@
+export declare type ISize = 'sm' | 'md' | 'lg';
+export declare type IColor = 'success' | 'warning' | 'disabled' | 'active' | 'hovered' | 'subdued' | 'default' | 'critical' | 'primary';
+export declare type IKind = 'shipping' | 'home' | 'menu' | 'notifications' | 'novelty' | 'help' | 'see-more' | 'info' | 'alert' | 'eye' | 'date' | 'search' | 'delete' | 'more-less' | 'down' | 'up' | 'back' | 'front' | 'major-minor' | 'minor-major' | 'create' | 'success' | 'error' | 'more' | 'less' | undefined;
+interface IconProps {
+    /**
+     * Sizes availables
+     */
+    size?: ISize;
+    /**
+     * Color icons
+     */
+    color?: IColor;
+    /**
+     * Name icon svg
+     */
+    kind?: IKind;
+    /**
+     * Type cursor
+     */
+    cursor?: 'pointer' | 'default';
+    /**
+     * Optional event click
+     */
+    onClick?: () => void;
+    /**
+     * More class optional container
+     */
+    className?: string;
+}
+export type { IconProps };

package/dist/components/atoms/Icon/Icon.d.ts

@@ -0,0 +1,2 @@
+import type { IconProps } from './IIcon';
+export default function Icon({ kind, color, ...props }: IconProps): JSX.Element;

package/dist/components/atoms/Icon/Svg.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from './IIcon';
+import type { IChildren } from '../../../types';
+export declare function Svg({ children, size, className, cursor, ...props }: IconProps & IChildren): JSX.Element;

package/dist/components/atoms/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon';
+export * from './IIcon';

package/dist/components/atoms/RadioButton/IRadioButton.d.ts

@@ -0,0 +1,40 @@
+declare type Change = {
+    value: string | number;
+    checked: boolean;
+};
+declare type IPropsRadio = {
+    /**
+     * ID unique
+     */
+    id?: string;
+    /**
+     * Name unique
+     */
+    name?: string;
+    /**
+     * Control for disabled radio
+     */
+    isDisabled?: boolean;
+    /**
+     * Value radio
+     */
+    value?: string | number;
+    /**
+     * Option for checked default
+     */
+    defaultChecked?: boolean;
+    /**
+     * Label string link with radio
+     */
+    label?: string;
+    /**
+     * Help text for more info
+     */
+    helpText?: string;
+    /**
+     * Event for control to checked and value
+     */
+    onChange?: (value: Change) => void;
+    [rest: string]: any;
+};
+export type { IPropsRadio };

package/dist/components/atoms/RadioButton/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import type { IPropsRadio } from './IRadioButton';
+/**
+ * Atom: RadioButton
+ * Use radio buttons to present each item in a list of options where merchants must make a single selection.
+ */
+declare function RadioButton({ id, name, isDisabled, value, label, helpText, onChange, ...rest }: IPropsRadio): JSX.Element;
+export default RadioButton;

package/dist/components/atoms/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { default as RadioButton } from './RadioButton';

package/dist/components/atoms/Switch/ISwitch.d.ts

@@ -0,0 +1,19 @@
+interface ISwitch {
+    /**
+     *   Whether or not the switch is checked.
+     */
+    isSelected: boolean;
+    /**
+     *   Disabled switch.
+     */
+    isDisabled?: boolean;
+    /**
+     * The name used when using this component inside a form.
+     */
+    name?: string;
+    /**
+     * The function to call when the switch is toggled.
+     */
+    onChange(checked: boolean): void;
+}
+export type { ISwitch };

package/dist/components/atoms/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import type { ISwitch } from './ISwitch';
+/**
+ * Atoms: Switch
+ * Switches toggle the state of a single item on or off.
+ */
+declare function Switch({ onChange, isSelected, isDisabled, name, ...props }: ISwitch): JSX.Element;
+export default Switch;

package/dist/components/atoms/Switch/index.d.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch';

package/dist/components/atoms/Text/IText.d.ts

@@ -0,0 +1,12 @@
+import type { IColorText, IWeight, ILineHeightText, IFontSizeText, IChildren, IClassName } from '../../../types';
+export interface IText extends IColorText, IWeight, ILineHeightText, IFontSizeText, IChildren, IClassName {
+    /**
+     * Variant heading
+     */
+    variant?: 'button' | 'body' | 'highlight' | 'caption';
+    /**
+     * Tag html availables
+     */
+    as?: Extract<keyof JSX.IntrinsicElements, 'span' | 'p' | 'label'>;
+    [rest: string]: any;
+}

package/dist/components/atoms/Text/Text.d.ts

@@ -0,0 +1,8 @@
+import type { IText } from './IText';
+/**
+ * Atoms: Text
+ * Paragraphs. Tags availables p, span.
+ * Default p
+ */
+declare function Text({ variant, children, lineHeight, weight, color, size, className, as: ElementText, ...rest }: IText): JSX.Element;
+export default Text;

package/dist/components/atoms/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Text } from './Text';
+export * from './IText';

package/dist/components/atoms/Text/useCSS.d.ts

@@ -0,0 +1,4 @@
+import type { IText } from './IText';
+export declare function useCSS({ variant, ...props }: IText): {
+    getClass: string;
+};

package/dist/components/atoms/Tooltip/ITooltip.d.ts

@@ -0,0 +1,10 @@
+import { IChildren } from '../../../types';
+import type { Placement } from '@floating-ui/react-dom-interactions';
+import { useTooltip } from './useTooltip';
+export declare type TooltipState = ReturnType<typeof useTooltip>;
+export declare type ITooltipProps = {
+    placement?: Placement;
+    title?: string;
+    description?: string;
+    initialOpen?: boolean;
+} & IChildren;

package/dist/components/atoms/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ITooltipProps } from './ITooltip';
+/**
+ * Atom: Tooltip
+ * Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover.
+ */
+declare function Tooltip({ placement, title, description, initialOpen, children }: ITooltipProps): JSX.Element;
+export default Tooltip;

package/dist/components/atoms/Tooltip/TooltipAnchor.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TooltipState } from './ITooltip';
+declare type PropsType = React.HTMLProps<HTMLElement> & {
+    state: TooltipState;
+    asChild?: boolean;
+};
+export declare const TooltipAnchor: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "onClick" | "type" | "as" | "kind" | "id" | "name" | "value" | "defaultChecked" | "onChange" | "target" | "checked" | "hidden" | "htmlFor" | "role" | "tabIndex" | "aria-checked" | "aria-labelledby" | "aria-describedby" | "onKeyUp" | "onKeyPress" | "key" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "open" | "state" | "asChild" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "width" | "wmode" | "wrap"> & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/atoms/Tooltip/TooltipFloat.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IChildren } from '../../../types';
+import { TooltipState } from './ITooltip';
+declare type PropsType = React.HTMLProps<HTMLDivElement> & {
+    state: TooltipState;
+} & IChildren;
+export declare const TooltipFloat: React.ForwardRefExoticComponent<Pick<PropsType, "size" | "className" | "color" | "disabled" | "default" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "start" | "onClick" | "type" | "as" | "kind" | "id" | "name" | "value" | "defaultChecked" | "onChange" | "target" | "checked" | "hidden" | "htmlFor" | "role" | "tabIndex" | "aria-checked" | "aria-labelledby" | "aria-describedby" | "onKeyUp" | "onKeyPress" | "key" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "open" | "state" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "width" | "wmode" | "wrap"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/atoms/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip';
+export * from './ITooltip';

package/dist/components/atoms/Tracker/ITracker.d.ts

@@ -0,0 +1,8 @@
+declare type IPropsTracker = {
+    track: string;
+    title?: string;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    [rest: string]: any;
+};
+export type { IPropsTracker };

package/dist/components/atoms/Tracker/Tracker.d.ts

@@ -0,0 +1,7 @@
+import { IPropsTracker } from './ITracker';
+/**
+ * Atom: Tracker
+ * Use in processes that have more than one step, so the user can know exactly how much is left.
+ */
+declare function Tracker({ track, isDisabled, isSelected, title, ...rest }: IPropsTracker): JSX.Element;
+export default Tracker;

package/dist/components/atoms/Tracker/index.d.ts

@@ -0,0 +1 @@
+export { default as Tracker } from './Tracker';

package/dist/components/index.d.ts

@@ -1,2 +1,26 @@
-export { default as Button } from './Button/Button';
-//# sourceMappingURL=index.d.ts.map
+export * from './atoms/Button';
+export * from './atoms/Avatar';
+export * from './atoms/Heading';
+export * from './atoms/Text';
+export * from './atoms/Badge';
+export * from './atoms/Switch';
+export * from './atoms/Icon';
+export * from './atoms/Tooltip';
+export * from './atoms/RadioButton';
+export * from './atoms/Tracker';
+export * from './molecules/Selectable/Select';
+export * from './molecules/Selectable/AsyncSelect';
+export * from './molecules/Selectable/SelectButton';
+export * from './molecules/Selectable/SelectCountry';
+export * from './molecules/Tab';
+export * from './molecules/InlineError';
+export * from './molecules/Modal';
+export * from './molecules/Dropdown';
+export * from './molecules/EmptyState';
+export * from './molecules/TabNav';
+export * from './molecules/Header';
+export * from './molecules/Summary';
+export * from './molecules/Card/Select';
+export * from './organisms/Navigation';
+export * from './templates/Main';
+export * from './templates/Shipment';

package/dist/components/molecules/Card/Select/ISelect.d.ts

@@ -0,0 +1,26 @@
+interface ICardSelect {
+    id: string;
+    title: string;
+    subtitle?: string;
+    description?: string;
+    state?: string;
+    img?: JSX.Element;
+    hasRadio?: boolean;
+    isDisabled?: boolean;
+    error?: string;
+}
+declare type IPropsCardSelect = {
+    /**
+     * Array items with content for card
+     */
+    items: ICardSelect[];
+    /**
+     * Checked item
+     */
+    checkedItem: ICardSelect | undefined;
+    /**
+     * Event handler for change selection
+     */
+    onChange: (value: ICardSelect) => void;
+};
+export type { IPropsCardSelect, ICardSelect };

package/dist/components/molecules/Card/Select/Select.d.ts

@@ -0,0 +1,7 @@
+import { IPropsCardSelect } from './ISelect';
+/**
+ * Molecule: CardSelect
+ * Use radio cards in items where users must make a single selection, and need of a visual element or more than one text to be explained.
+ */
+declare function CardSelect({ items, checkedItem, onChange }: IPropsCardSelect): JSX.Element;
+export default CardSelect;

package/dist/components/molecules/Card/Select/index.d.ts

@@ -0,0 +1 @@
+export { default as CardSelect } from './Select';

package/dist/components/molecules/Dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import { IPropsDropdown } from './IDropdown';
+import { IClassName } from '@/types';
+/**
+ * Molecule: Dropdown
+ * Page actions let merchants take key actions at the bottom of specific pages in the interface. This is important because sometimes the primary call to action is hard to access when merchants are at the bottom of a page, that’s why this component is fixed.
+ */
+declare function Dropdown({ title, subtitle, defaultOpen, isDisabled, content, className, children }: IPropsDropdown & IClassName): JSX.Element;
+export default Dropdown;

package/dist/components/molecules/Dropdown/IDropdown.d.ts

@@ -0,0 +1,14 @@
+import { IChildren } from '../../../types';
+declare type IElement = string | JSX.Element;
+declare type IContent = {
+    label: IElement;
+    value: IElement;
+};
+interface IPropsDropdown extends IChildren {
+    title?: IElement;
+    subtitle?: IElement[];
+    content?: IContent[];
+    defaultOpen?: boolean;
+    isDisabled?: boolean;
+}
+export type { IPropsDropdown, IElement, IContent };

package/dist/components/molecules/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { default as Dropdown } from './Dropdown';

package/dist/components/molecules/EmptyState/BoxSvg.d.ts

@@ -0,0 +1 @@
+export declare function BoxSvg(): JSX.Element;

package/dist/components/molecules/EmptyState/EmptyState.d.ts

@@ -0,0 +1,7 @@
+import type { IPropsEmptyState } from './IEmptyState';
+/**
+ * Molecule: EmptyState
+ * Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.
+ */
+declare function EmptyState({ title, description, img, className, children }: IPropsEmptyState): JSX.Element;
+export default EmptyState;

package/dist/components/molecules/EmptyState/IEmptyState.d.ts

@@ -0,0 +1,7 @@
+import { IChildren, IClassName } from '../../../types';
+interface IPropsEmptyState extends IChildren, IClassName {
+    title?: string;
+    description?: string;
+    img?: 'box' | 'padlock';
+}
+export type { IPropsEmptyState };

package/dist/components/molecules/EmptyState/PadlockSvg.d.ts

@@ -0,0 +1 @@
+export declare function PadlockSvg(): JSX.Element;

package/dist/components/molecules/EmptyState/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from './EmptyState';