@aveonline/ui-react 1.0.0 → 1.0.1

package/README.md

@@ -10,7 +10,7 @@
 For usage with tailwind config, install:
 
 ```shell
-npm i
+npm i @tailwindcss/forms
 ```
 
 ## Getting started
@@ -32,24 +32,21 @@ 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
-```
-
-or
+/** @type {import('tailwindcss').Config} */
 
-```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
 ```
 

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

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

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

@@ -1,5 +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/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

@@ -3,14 +3,41 @@ export declare type Variant = 'primary' | 'basic' | 'destructive' | 'plain' | 'p
 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 {

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/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

@@ -1,5 +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/Icon/IIcon.d.ts

@@ -2,11 +2,29 @@ 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/RadioButton/IRadioButton.d.ts

@@ -3,13 +3,37 @@ declare type Change = {
     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;
 };

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/Switch/ISwitch.d.ts

@@ -1,7 +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/Text/IText.d.ts

@@ -1,6 +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/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/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/molecules/Card/Select/ISelect.d.ts

@@ -10,8 +10,17 @@ interface ICardSelect {
     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/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/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/PadlockSvg.d.ts

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

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

@@ -0,0 +1,7 @@
+import { IHeader } from './IHeader';
+/**
+ * Atom: Header
+ * The top bar is a header component that allows merchants to access menus, and navigate by clicking on the logo. It’s always visible at the top of interfaces.
+ */
+declare function Header({ hasLogo, className, ...rest }: IHeader): JSX.Element;
+export default Header;

package/dist/components/molecules/InlineError/IInlineError.d.ts

@@ -1,7 +1,16 @@
 import type { IChildren, IClassName } from '../../../types';
 import { IColor, IKind } from '../../atoms/Icon';
 export interface IInlineError extends IChildren, IClassName {
+    /**
+     * Sizes availables
+     */
     size?: 'lg' | 'sm';
+    /**
+     * Icons availables
+     */
     icon?: IKind;
+    /**
+     * Colors icons
+     */
     colorIcon?: IColor;
 }

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

@@ -0,0 +1,7 @@
+import type { IInlineError } from './IInlineError';
+/**
+ * Atom: InlineError
+ * Inline errors are brief, in-context messages that tell merchants something went wrong with a single or group of inputs in a form. Use inline errors to help merchants understand why a form input may not be valid and how to fix it.
+ */
+declare function InlineError({ children, size, icon, colorIcon, className, ...props }: IInlineError): JSX.Element;
+export default InlineError;

package/dist/components/molecules/Modal/IModal.d.ts

@@ -1,12 +1,36 @@
 import { IChildren } from '../../../types';
 interface IPropsModal extends IChildren {
+    /**
+     * Crontol open and close modal
+     */
     isOpen?: boolean;
+    /**
+     * Title main
+     */
     title?: string;
+    /**
+     * Reference to icon with onclick on the header
+     */
     iconTitle?: JSX.Element;
+    /**
+     * Subtitle secondary
+     */
     subtitle?: string;
+    /**
+     * Container for elements align to x end
+     */
     footer?: JSX.Element;
+    /**
+     * Control border for children
+     */
     hasBorder?: Array<'top' | 'bottom'>;
+    /**
+     * Show icon delete from header
+     */
     showClose?: boolean;
+    /**
+     * Event for close modal
+     */
     onClose?: (value: boolean) => void;
 }
 export type { IPropsModal };

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

@@ -0,0 +1,7 @@
+import type { IPropsModal } from './IModal';
+/**
+ * Molecule: Modal
+ * Modals are overlays that require merchants to take an action before they can continue interacting with the rest of Shopify. They can be disruptive and should be used thoughtfully and sparingly.
+ */
+declare function Modal({ title, iconTitle, subtitle, footer, isOpen, hasBorder, showClose, onClose, children }: IPropsModal): JSX.Element;
+export default Modal;

package/dist/components/molecules/Selectable/AsyncSelect/AsyncSelect.d.ts

@@ -0,0 +1,7 @@
+import type { IAsyncSelect } from './IAsyncSelect';
+/**
+ * Molecule: AsyncSelect
+ * Async select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface. Data from network
+ */
+declare function AsyncSelect({ placeholder, id, name, error, helpText, hasLabelPlaceholder, isDisabled, isClearable, defaultValue, onChange, loadOptions, ...props }: IAsyncSelect): JSX.Element;
+export default AsyncSelect;

package/dist/components/molecules/Selectable/AsyncSelect/IAsyncSelect.d.ts

@@ -1,4 +1,7 @@
 import type { ISelect, IOption } from '../Select';
 export interface IAsyncSelect extends Omit<ISelect, 'options'> {
+    /**
+     * Handle change search async
+     */
     loadOptions?: (inputValue: string) => Promise<IOption[]> | undefined;
 }

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

@@ -3,16 +3,52 @@ export declare type IOption = {
     value: string | number;
 };
 export interface ISelect {
+    /**
+     * Array of options that populate the select menu
+     */
     options?: IOption[];
+    /**
+     * Is the select disabled
+     */
     isDisabled?: boolean;
+    /**
+     * Placeholder for the select value
+     */
     placeholder?: string;
+    /**
+     * Object default of options
+     */
     defaultValue?: IOption;
+    /**
+     * Message error
+     */
     error?: string;
+    /**
+     * The id to set on the SelectContainer component.
+     */
     id?: string;
+    /**
+     * Name of the HTML Input (optional - without this, no input will be rendered)
+     */
     name?: string;
+    /**
+     * Handle change events on the select
+     */
     onChange?: (value: IOption) => void;
+    /**
+     * Message for help human
+     */
     helpText?: string;
+    /**
+     * Placeholder to convert on label
+     */
     hasLabelPlaceholder?: boolean;
+    /**
+     * Whether to enable search functionality
+     */
     isSearchable?: boolean;
+    /**
+     * Is the select value clearable
+     */
     isClearable?: boolean;
 }

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

@@ -0,0 +1,7 @@
+import type { ISelect } from './ISelect';
+/**
+ * Atom: Select
+ * Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.
+ */
+declare function Select({ options, placeholder, defaultValue, isDisabled, id, error, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, ...props }: ISelect): JSX.Element;
+export default Select;

package/dist/components/molecules/Selectable/SelectButton/ISelectButton.d.ts

@@ -10,7 +10,16 @@ export interface IOptionSelectButtonGroup {
     options: IOption[];
 }
 export interface ISelectButton extends Omit<ISelect, 'options'> {
+    /**
+     * Array of options that populate the select menu - two structures optionals
+     */
     options: IOptionSelectButton[] | IOptionSelectButtonGroup[];
+    /**
+     * Handle click for first element, options no selectable, only emit click
+     */
     onClickFirstItem?: (value: IOptionSelectButton) => void;
+    /**
+     * Position align children elements atom[Button]
+     */
     alignButton?: Align;
 }

package/dist/components/molecules/Selectable/SelectButton/Option.d.ts

@@ -0,0 +1,4 @@
+import type { Align } from '../../../atoms/Button';
+export declare const Option: ({ alignButton, ...allProps }: {
+    alignButton: Align;
+}) => JSX.Element;

package/dist/components/molecules/Selectable/SelectButton/SelectButton.d.ts

@@ -0,0 +1,7 @@
+import type { ISelectButton } from './ISelectButton';
+/**
+ * Molecule: SelectButton
+ * Select with button for first item lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.
+ */
+declare function SelectButton({ options, placeholder, defaultValue, isDisabled, id, error, name, helpText, hasLabelPlaceholder, onChange, isSearchable, isClearable, alignButton, onClickFirstItem, ...props }: ISelectButton): JSX.Element;
+export default SelectButton;

package/dist/components/molecules/Selectable/SelectCountry/Option.d.ts

@@ -0,0 +1,2 @@
+import type { OptionProps } from 'react-select';
+export declare const Option: (props: OptionProps) => JSX.Element;

package/dist/components/molecules/Selectable/SelectCountry/Prefix.d.ts

@@ -0,0 +1,3 @@
+export declare const Prefix: ({ isDisabled }: {
+    isDisabled?: boolean | undefined;
+}) => JSX.Element;