@economic/taco 1.17.0-alpha.0 → 1.17.0

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { MenuProps } from '../Menu/Menu';
+export declare type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    noPadding?: boolean;
+};
+export declare type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Title of the Card */
+    title: string | React.ReactElement;
+    /** Menu component associated with the Card */
+    menu?: (props: Partial<MenuProps>) => JSX.Element;
+};
+export declare const Card: React.ForwardRefExoticComponent<CardProps> & {
+    Content: React.ForwardRefExoticComponent<CardContentProps>;
+};

package/dist/components/Card/Card.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Card").CardProps> & {
+        Content: React.ForwardRefExoticComponent<import("./Card").CardContentProps>;
+    };
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const WithMenu: () => JSX.Element;
+export declare const LargeContent: () => JSX.Element;
+export declare const Grid: () => JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+declare type CheckboxBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {
+    highlighted?: boolean;
+    /**
+     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all
+     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.
+     */
+    indeterminate?: boolean;
+    invalid?: boolean;
+    /** Label for the checkbox */
+    label?: React.ReactNode;
+    required?: boolean;
+};
+interface UncontrolledCheckboxProps extends CheckboxBaseProps {
+    checked?: never;
+    onChange?: never;
+    defaultChecked?: boolean;
+}
+interface ControlledCheckboxProps extends CheckboxBaseProps {
+    defaultChecked?: never;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export declare type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;
+export declare const Checkbox: React.ForwardRefExoticComponent<(UncontrolledCheckboxProps & React.RefAttributes<HTMLButtonElement>) | (ControlledCheckboxProps & React.RefAttributes<HTMLButtonElement>)>;
+export {};

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { InputProps } from '../Input/Input';
+import { ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';
+import './Combobox.css';
+import { DialogProps } from '../Dialog/Dialog';
+export declare type ComboboxTexts = {
+    tooltip: string;
+};
+export declare type ComboboxItem = ScrollableListItem;
+export declare type ComboboxValue = ScrollableListItemValue;
+declare type ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {
+    /** Array of options in combobox */
+    data?: ComboboxItem[];
+    /**
+     * Initial value of the input in combobox.
+     * This is used when combobox is mounted, if no value is provided.
+     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event
+     */
+    defaultValue?: ComboboxValue;
+    /** Set what value should have an empty option in combobox */
+    emptyValue?: ComboboxValue;
+    /** Draws attention to the combobox by changing its style and making it visually prominent */
+    highlighted?: boolean;
+    /** Displays loading state in listbox */
+    loading?: boolean;
+    /**
+     * Handler called when user chooses an option from the provided suggestions.
+     * Suggestions will be calculated based on the input value.
+     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /** Handler called when the user enters a query **/
+    onSearch?: (query: string) => void | Promise<void>;
+    /** Value of the input in combobox */
+    value?: ComboboxValue;
+};
+interface InlineComboboxProps extends ComboboxBaseProps {
+    dialog?: never;
+    /**
+     * Combobox will display its data when input is clicked/focused, even if the input is empty.
+     * *Note* that default combobox will display matching data only when user starts typing in input.
+     */
+    inline: boolean;
+}
+interface DialogComboboxProps extends ComboboxBaseProps {
+    dialog: (props: Partial<DialogProps>) => JSX.Element;
+    inline?: never;
+}
+export declare type ComboboxProps = InlineComboboxProps | DialogComboboxProps;
+export declare const Combobox: React.ForwardRefExoticComponent<(InlineComboboxProps & React.RefAttributes<HTMLInputElement>) | (DialogComboboxProps & React.RefAttributes<HTMLInputElement>)>;
+export {};

package/dist/components/Combobox/useCombobox.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ComboboxProps } from './Combobox';
+import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
+import { InputProps } from '../Input/Input';
+declare type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
+    combobox: React.HTMLAttributes<HTMLSpanElement>;
+    input: Omit<InputProps, 'defaultValue'> & {
+        ref: React.RefObject<HTMLInputElement>;
+    };
+    list: ScrollableListPropsWithRef;
+    button: {
+        ref: any;
+    };
+    popover: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+    };
+};
+export declare const useCombobox: ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, data: unfilteredData, defaultValue, disabled, id: nativeId, inline, loading: __, onChange, onClick, onKeyDown, onSearch, readOnly, value, ...props }: Omit<ComboboxProps, 'dialog'>, ref: React.Ref<HTMLInputElement>) => useCombobox;
+export {};

package/dist/components/Datepicker/Datepicker.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { CalendarProps } from '../Calendar/Calendar';
+import { InputProps } from '../Input/Input';
+export declare type DatepickerTexts = {
+    /** Aria-label for calendar */
+    calendar: string;
+    /** Clear button text */
+    clear: string;
+    /**
+     * Aria-label for calendar icon button in the input.
+     * Calendar will open when user clicks this icon button.
+     */
+    expand: string;
+    /** Shortcut heading text */
+    shortcuts: string;
+};
+export declare type DatePickerShortcut = {
+    onClick: (event: React.MouseEvent) => void;
+    text: string;
+};
+export declare type DatepickerProps = Omit<InputProps, 'value'> & {
+    /** [Calendar](component:calendar) component associated with the DatePicker */
+    calendar?: CalendarProps;
+    /** List of shortcuts */
+    shortcuts?: DatePickerShortcut[];
+    /** Title for the shortcuts panel */
+    shortcutsText?: string;
+    /** Handler to be called when the clear button is clicked */
+    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Date value of the calendar.
+     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component
+     */
+    value?: Date;
+};
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<InputProps, "prefix" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "enterKeyHint" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "pattern" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "type" | "width" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-labelledby" | "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" | "children" | "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" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "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" | "onClick" | "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" | "highlighted" | "invalid" | "postfix" | "button" | "icon"> & {
+    /** [Calendar](component:calendar) component associated with the DatePicker */
+    calendar?: CalendarProps | undefined;
+    /** List of shortcuts */
+    shortcuts?: DatePickerShortcut[] | undefined;
+    /** Title for the shortcuts panel */
+    shortcutsText?: string | undefined;
+    /** Handler to be called when the clear button is clicked */
+    onReset?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Date value of the calendar.
+     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component
+     */
+    value?: Date | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Datepicker/Datepicker.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Pick<import("../..").InputProps, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-labelledby" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "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" | "onClick" | "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" | "button" | "form" | "pattern" | "list" | "step" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "height" | "max" | "min" | "width" | "crossOrigin" | "size" | "checked" | "highlighted" | "invalid" | "required" | "accept" | "alt" | "autoComplete" | "capture" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "src" | "postfix" | "icon"> & {
+        calendar?: import("../..").CalendarProps | undefined;
+        shortcuts?: import("./Datepicker").DatePickerShortcut[] | undefined;
+        shortcutsText?: string | undefined;
+        onReset?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+        value?: Date | undefined;
+    } & React.RefAttributes<HTMLInputElement>>;
+    args: {
+        disabled: boolean;
+        highlighted: boolean;
+        invalid: boolean;
+        readOnly: boolean;
+    };
+    argTypes: {
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        highlighted: {
+            control: {
+                type: string;
+            };
+        };
+        invalid: {
+            control: {
+                type: string;
+            };
+        };
+        readOnly: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: (args: any) => JSX.Element;
+export declare const CustomShortcuts: (args: any) => JSX.Element;
+export declare const KitchenSink: () => JSX.Element;

package/dist/components/Datepicker/useDatepicker.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { DatepickerProps } from './Datepicker';
+import { CalendarProps } from '../Calendar/Calendar';
+import { InputProps as BaseInputProps } from '../Input/Input';
+declare type InputProps = BaseInputProps & {
+    ref: React.RefObject<HTMLInputElement>;
+};
+declare type useDatepicker = React.HTMLAttributes<HTMLDivElement> & {
+    calendar: CalendarProps;
+    input: InputProps;
+};
+export declare const useDatepicker: ({ defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps, ref: React.Ref<HTMLInputElement>) => useDatepicker;
+export {};

package/dist/components/Dialog/Context.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DialogSize } from './types';
+export declare type DialogContext = {
+    closeOnEscape: boolean;
+    draggable: boolean;
+    drawer: {
+        open: boolean;
+        toggle: () => void;
+    };
+    elements: {
+        drawer?: React.ReactNode;
+        extra?: React.ReactNode;
+    };
+    onClose?: () => void;
+    props: Record<string, any>;
+    ref: React.Ref<HTMLElement>;
+    showCloseButton: boolean;
+    size: DialogSize;
+};
+export declare const DialogContext: React.Context<DialogContext>;
+export declare const useCurrentDialog: () => DialogContext;

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import './Dialog.css';
+import { DialogTriggerProps } from './components/Trigger';
+import { DialogContentProps, DialogContentRenderProps, DialogContentDrawerRenderProps, DialogTitleProps, DialogFooterProps, DialogCloseProps } from './components/Content';
+import { DialogDrawerProps, DialogDrawerRenderProps } from './components/Drawer';
+import { DialogExtraProps } from './components/Extra';
+import { DialogSize } from './types';
+export type { DialogCloseProps, DialogContentDrawerRenderProps, DialogContentProps, DialogContentRenderProps, DialogDrawerProps, DialogDrawerRenderProps, DialogFooterProps, DialogSize, DialogTitleProps, };
+export declare type DialogTexts = {
+    /**
+     * Aria-label for close icon button in dialog.
+     * To read more about how to provide the text, see [Provider](component:provider) component
+     */
+    close: string;
+    drag: string;
+};
+export declare type DialogProps = {
+    children: React.ReactNode | React.ReactNode[];
+    /** When `true`, pressing escape will close the dialog */
+    closeOnEscape?: boolean;
+    /** Set whether the dialog is open by default or not  */
+    defaultOpen?: boolean;
+    /** Allows dragging the dialog around the screen (window constrained) */
+    draggable?: boolean;
+    /** Handler called when dialog closes by user interaction */
+    onClose?: () => void;
+    /** Called when the dialog opens or closes, must be used in conjunction with open  */
+    onChange?: (open: boolean) => void;
+    /** Control the open state of the dialog from outside the component  */
+    open?: boolean;
+    /** Shows the close icon button of the dialog */
+    showCloseButton?: boolean;
+    /** Size of the dialog. This is the recommended way to set a size for dialog component. */
+    size?: DialogSize;
+    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
+};
+export declare type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {
+    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;
+    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export declare const Dialog: ForwardedDialogWithStatics;

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { DialogProps } from './Dialog';
+declare const _default: {
+    title: string;
+    component: import("./Dialog").ForwardedDialogWithStatics;
+    argTypes: {
+        size: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+    args: {
+        draggable: boolean;
+        size: string;
+    };
+};
+export default _default;
+export declare const Basic: (args: DialogProps) => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Uncontrolled: () => JSX.Element;
+export declare const Nested: (args: DialogProps) => JSX.Element;
+export declare const Extra: {
+    (args: DialogProps): JSX.Element;
+    args: {
+        size: string;
+    };
+};
+export declare const Drawer: {
+    (args: DialogProps): JSX.Element;
+    args: {
+        size: string;
+    };
+};
+export declare const Draggable: {
+    (args: DialogProps): JSX.Element;
+    args: {
+        draggable: boolean;
+        size: string;
+    };
+};
+export declare const Close: (args: DialogProps) => JSX.Element;
+export declare const CloseHandler: {
+    (args: DialogProps): JSX.Element;
+    storyName: string;
+};
+export declare const RenderProp: {
+    (args: DialogProps): JSX.Element;
+    storyName: string;
+};
+export declare const OpenByDefault: {
+    (args: DialogProps): JSX.Element;
+    storyName: string;
+};
+export declare const Test: () => JSX.Element;
+export declare const NestedOverlays: () => JSX.Element;

package/dist/components/Dialog/components/Content.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DialogContext } from '../Context';
+export declare type DialogContentDrawerRenderProps = DialogContext['drawer'];
+export declare type DialogContentRenderProps = {
+    close: () => void;
+    drawer?: DialogContentDrawerRenderProps;
+};
+export declare type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** An accessible label to be announced when the dialog is opened */
+    'aria-label': string;
+    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);
+};
+export declare const Content: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-labelledby" | "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" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "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" | "onClick" | "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"> & {
+    /** An accessible label to be announced when the dialog is opened */
+    'aria-label': string;
+    children: Pick<React.ReactNode, never> | ((props: DialogContentRenderProps) => JSX.Element);
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog/components/Drawer.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { DialogContext } from '../Context';
+export declare type DialogDrawerRenderProps = DialogContext['drawer'];
+export declare type DialogDrawerProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'> & {
+    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);
+};
+declare const Drawer: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "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-labelledby" | "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" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "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" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "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" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    children: Pick<React.ReactNode, never> | ((props: DialogDrawerRenderProps) => React.ReactNode);
+} & React.RefAttributes<HTMLDivElement>>;
+export { Drawer };

package/dist/components/Dialog/components/Extra.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;
+declare const Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;
+export { Extra };

package/dist/components/Dialog/components/Trigger.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Dialog/types.d.ts

@@ -0,0 +1 @@
+export declare type DialogSize = 'dialog' | 'xs' | 'sm' | 'md' | 'lg';

package/dist/components/Dialog/util.d.ts

@@ -0,0 +1,4 @@
+import { DialogSize } from './types';
+export declare const getDialogSizeClassnames: (size: DialogSize) => "w-128" | "w-xs" | "w-sm" | "w-md" | "w-lg";
+export declare const getDialogPositionClassnames: () => string;
+export declare const getDialogStylingClassnames: () => string;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import './Field.css';
+export declare type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /** Content of the field */
+    children: React.ReactNode;
+    /**	Changes the style to indicate the element is disabled */
+    disabled?: boolean;
+    invalid?: boolean;
+    /**
+     * Text displayed below the children of Field.
+     * Should be a short text that indicates feedback for user.
+     */
+    message?: string;
+};
+export declare const Field: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /** Content of the field */
+    children: React.ReactNode;
+    /**	Changes the style to indicate the element is disabled */
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    /**
+     * Text displayed below the children of Field.
+     * Should be a short text that indicates feedback for user.
+     */
+    message?: string | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+        children: React.ReactNode;
+        disabled?: boolean | undefined;
+        invalid?: boolean | undefined;
+        message?: string | undefined;
+    } & React.RefAttributes<HTMLLabelElement>>;
+};
+export default _default;
+export declare const Appearance: () => JSX.Element;
+export declare const LabelMessage: () => JSX.Element;
+export declare const LabelState: () => JSX.Element;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import './Form.css';
+export declare type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
+    /** Content should be composed of other Taco form elements */
+    children: React.ReactNode;
+    /** Display the form fields in a horizontal layout */
+    horizontal?: boolean;
+};
+export declare const Form: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
+    /** Content should be composed of other Taco form elements */
+    children: React.ReactNode;
+    /** Display the form fields in a horizontal layout */
+    horizontal?: boolean | undefined;
+} & React.RefAttributes<HTMLFormElement>>;

package/dist/components/Form/Form.stories.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormProps } from '../..';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.FormHTMLAttributes<HTMLFormElement> & {
+        children: React.ReactNode;
+        horizontal?: boolean | undefined;
+    } & React.RefAttributes<HTMLFormElement>>;
+    args: {
+        horizontal: boolean;
+    };
+};
+export default _default;
+export declare const Default: (args: FormProps) => JSX.Element;

package/dist/components/Group/Group.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Orientation } from '../../types';
+export declare type GroupProps = React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Change what html tag element will render.
+     * Default value is `span`
+     */
+    as?: 'div' | 'span' | 'nav';
+    /** Content should be composed of other Taco elements */
+    children: React.ReactNode;
+    /**
+     * Define orientation of grouping.
+     * @defaultValue horizontal
+     */
+    orientation?: Orientation;
+};
+export declare const Group: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Change what html tag element will render.
+     * Default value is `span`
+     */
+    as?: "div" | "span" | "nav" | undefined;
+    /** Content should be composed of other Taco elements */
+    children: React.ReactNode;
+    /**
+     * Define orientation of grouping.
+     * @defaultValue horizontal
+     */
+    orientation?: "horizontal" | "vertical" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Group/Group.stories.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { GroupProps } from './Group';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+        as?: "div" | "nav" | "span" | undefined;
+        children: React.ReactNode;
+        orientation?: "horizontal" | "vertical" | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    argType: {
+        orientation: {
+            type: string;
+            options: string[];
+        };
+    };
+    args: {
+        orientation: string;
+    };
+};
+export default _default;
+export declare const Badges: (args: GroupProps) => JSX.Element;
+export declare const Buttons: (args: GroupProps) => JSX.Element;
+export declare const Icons: (args: GroupProps) => JSX.Element;