@aveonline/ui-react 1.0.0 → 1.0.2

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

@@ -20,6 +20,7 @@ export * from './molecules/EmptyState';
 export * from './molecules/TabNav';
 export * from './molecules/Header';
 export * from './molecules/Summary';
+export * from './molecules/Field';
 export * from './molecules/Card/Select';
 export * from './organisms/Navigation';
 export * from './templates/Main';

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/Field/Container.d.ts

@@ -0,0 +1,15 @@
+import { IChildren } from '../../../types';
+export declare function Container({ children }: IChildren): JSX.Element;
+export declare namespace Container {
+    var Icon: ({ children, position }: IChildren & {
+        position: "right" | "left";
+    }) => JSX.Element;
+    var Special: ({ children, isNumber, isPassword }: IChildren & {
+        isNumber?: boolean | undefined;
+        isPassword?: boolean | undefined;
+    }) => JSX.Element;
+    var Delete: ({ children, inputValue, hasIconRight }: IChildren & {
+        inputValue: string | number | undefined;
+        hasIconRight: boolean;
+    }) => JSX.Element;
+}

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

@@ -0,0 +1,7 @@
+import type { IField } from './IField';
+/**
+ * Molecule: Field
+ * A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers. The compound fields apply to all the types of field (text, number, password).
+ */
+declare function Field({ id, name, isDisabled, isReadOnly, placeholder, autoComplete, type, iconLeft, iconRight, helpText, logo, error, onChange, value, tooltip }: IField): JSX.Element;
+export default Field;

package/dist/components/molecules/Field/Footer.d.ts

@@ -0,0 +1,2 @@
+import { IField } from './IField';
+export declare function Footer({ logo, helpText, error }: IField): JSX.Element;

package/dist/components/molecules/Field/IField.d.ts

@@ -0,0 +1,66 @@
+import { IKind } from '../../atoms/Icon';
+import { ITooltipProps } from '../../atoms/Tooltip/ITooltip';
+export interface IField {
+    /**
+     * ID available for link form
+     */
+    id?: string;
+    /**
+     * Name available for link form
+     */
+    name?: string;
+    /**
+     * Value for default
+     */
+    value?: string | number;
+    /**
+     * For disabled input with attribute disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * For inactive input with attribute readonly
+     */
+    isReadOnly?: boolean;
+    /**
+     * Text for show description input
+     */
+    placeholder?: string;
+    /**
+     * Attribute autocomplete for default 'nope' no show info
+     */
+    autoComplete?: 'on' | 'off' | 'nope';
+    /**
+     * Message error
+     */
+    error?: string;
+    /**
+     * Name icon for position left
+     */
+    iconLeft?: IKind;
+    /**
+     * Name icon for position right
+     */
+    iconRight?: IKind;
+    /**
+     * Message for help to user
+     */
+    helpText?: string;
+    /**
+     * Custom logo
+     */
+    logo?: 'google-maps' | undefined;
+    /**
+     * Types availables for input - text for default
+     */
+    type?: 'text' | 'number' | 'password';
+    /**
+     * Event handler for emit value from input
+     */
+    onChange?: (value: string | number) => void;
+    /**
+     * Active tooltip for icon right
+     */
+    tooltip?: ITooltipProps & {
+        isActive?: boolean;
+    };
+}

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

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

package/dist/components/molecules/Field/useField.d.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent } from 'react';
+import { IField } from './IField';
+export declare function useField({ isDisabled, type, iconRight, error, iconLeft, onChange, value }: IField): {
+    inputValue: string | number;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    handleChange: ({ target: { value } }: ChangeEvent<HTMLInputElement>) => void;
+    subtractValue: () => void;
+    addMoreValue: () => void;
+    getColorIcon: () => 'disabled' | 'default' | 'subdued';
+    getColorIconPassword: () => 'disabled' | 'default' | 'subdued';
+    showPassword: boolean;
+    setShowPassword: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    clearInput: () => void;
+    hasIconRight: boolean;
+    getClassInput: string;
+};

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;