@economic/taco 1.1.7 → 1.1.9

package/README.md

@@ -1,82 +1,82 @@
-# @economic/taco
-
-> UI React component library
-
-## Usage
-
-```bash
-npm install --save @economic/taco
-```
-
-```javascript
-import { Button } from '@economic/taco';
-
-const MyComponent = () => <Button>Tada!</Button>;
-```
-
-## Development
-
-### Guidelines for new components
-
-Start by creating a folder under `src/` with the name of the component, e.g. `<MyAwesomeComponent />`:
-
-```
-src/
-├── ...
-├── components
-│   ├── MyAwesomeComponent
-│   │   ├── MyAwesomeComponent.css
-│   │   ├── MyAwesomeComponent.mdx
-│   │   ├── MyAwesomeComponent.test.tsx
-│   │   ├── MyAwesomeComponent.tsx
-├── index.tsx
-└── ...
-```
-
-Conceptually, the component's style, implementation, tests & documentation are co-located in its own folder.
-
-`MyAwesomeComponent/MyAwesomeComponent.css` Holds the component's style, directly imported in the implementation
-`MyAwesomeComponent/MyAwesomeComponent.mdx` Holds the component's documentation
-`MyAwesomeComponent/MyAwesomeComponent.test.tsx` Holds the component's tests - if applicable
-`MyAwesomeComponent/MyAwesomeComponent.tsx` Holds the component's implementation
-
-> If the component has a special (_snowflake_) case/variation, it's best advised to implement as separate component within the same folder (e.g. `<Button />` and `<IconButton />`)
-
-# Consumption
-
-#### Components
-
-Import individual components from tailwind as you need them.
-
-#### Styling
-
-Taco uses tailwind, but does not process its css before exporting. It exports css _with_ tailwind commands present - you must process the stylesheet with tailwind yourself.
-
-Browser targeting, purging and minification should be performed _by the consumer_.
-
-Your postcss config probably looks something like this:
-
-```js
-module.exports = {
-    plugins: ['tailwindcss', 'autoprefixer'],
-};
-```
-
-Your `tailwind.config.js` should look something like this:
-
-```js
-const tailwindConfig = require('@economic/taco/tailwind.config.js');
-
-module.exports = {
-    presets: [require('@economic/taco/tailwind.config.js'))],
-    content: {
-        files: ['../src/**/*.{mdx,tsx}', './node_modules/@economic/taco/dist/taco.esm.js'],
-    },
-};
-```
-
-You should then import the taco stylesheet in your application:
-
-```css
-import '@economic/taco/dist/index.css';
-```
+# @economic/taco
+
+> UI React component library
+
+## Usage
+
+```bash
+npm install --save @economic/taco
+```
+
+```javascript
+import { Button } from '@economic/taco';
+
+const MyComponent = () => <Button>Tada!</Button>;
+```
+
+## Development
+
+### Guidelines for new components
+
+Start by creating a folder under `src/` with the name of the component, e.g. `<MyAwesomeComponent />`:
+
+```
+src/
+├── ...
+├── components
+│   ├── MyAwesomeComponent
+│   │   ├── MyAwesomeComponent.css
+│   │   ├── MyAwesomeComponent.mdx
+│   │   ├── MyAwesomeComponent.test.tsx
+│   │   ├── MyAwesomeComponent.tsx
+├── index.tsx
+└── ...
+```
+
+Conceptually, the component's style, implementation, tests & documentation are co-located in its own folder.
+
+`MyAwesomeComponent/MyAwesomeComponent.css` Holds the component's style, directly imported in the implementation
+`MyAwesomeComponent/MyAwesomeComponent.mdx` Holds the component's documentation
+`MyAwesomeComponent/MyAwesomeComponent.test.tsx` Holds the component's tests - if applicable
+`MyAwesomeComponent/MyAwesomeComponent.tsx` Holds the component's implementation
+
+> If the component has a special (_snowflake_) case/variation, it's best advised to implement as separate component within the same folder (e.g. `<Button />` and `<IconButton />`)
+
+# Consumption
+
+#### Components
+
+Import individual components from tailwind as you need them.
+
+#### Styling
+
+Taco uses tailwind, but does not process its css before exporting. It exports css _with_ tailwind commands present - you must process the stylesheet with tailwind yourself.
+
+Browser targeting, purging and minification should be performed _by the consumer_.
+
+Your postcss config probably looks something like this:
+
+```js
+module.exports = {
+    plugins: ['tailwindcss', 'autoprefixer'],
+};
+```
+
+Your `tailwind.config.js` should look something like this:
+
+```js
+const tailwindConfig = require('@economic/taco/tailwind.config.js');
+
+module.exports = {
+    presets: [require('@economic/taco/tailwind.config.js'))],
+    content: {
+        files: ['../src/**/*.{mdx,tsx}', './node_modules/@economic/taco/dist/taco.esm.js'],
+    },
+};
+```
+
+You should then import the taco stylesheet in your application:
+
+```css
+import '@economic/taco/dist/index.css';
+```

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export declare type AccordionTriggerProps = React.HTMLAttributes<HTMLElement>;
+export declare type AccordionContentProps = React.HTMLAttributes<HTMLElement>;
+export declare type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    disabled?: boolean;
+};
+declare type AccordionBaseProps = {
+    children: React.ReactNode[];
+    /** Change what heading element accordion regions will render */
+    as?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Additional classes for Accordion root element */
+    className?: string;
+};
+export interface AccordionUncontrolledProps extends AccordionBaseProps {
+    /** Default expanded accordion(s) */
+    defaultId: string | string[];
+    id?: never;
+    onChange?: never;
+}
+export interface AccordionMultipleControlledProps extends AccordionBaseProps {
+    /** Expanded accordions */
+    id: string[];
+    /** onChange function to receive ids of expanded accordions */
+    onChange: (id: string[]) => void;
+    defaultId?: never;
+}
+export interface AccordionSingleControlledProps extends AccordionBaseProps {
+    /** Expanded accordion */
+    id: string;
+    /** onChange function to receive id of expanded accordion */
+    onChange: (id: string) => void;
+    defaultId?: never;
+}
+export declare type AccordionProps = AccordionUncontrolledProps | AccordionMultipleControlledProps | AccordionSingleControlledProps;
+export declare const Accordion: {
+    (props: AccordionProps): JSX.Element;
+    Item: (props: AccordionItemProps) => JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/components/Backdrop/Backdrop.d.ts

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

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { State } from '../../types';
+import './Badge.css';
+export declare type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Content should be a numerical value or tag/status like text **/
+    children: React.ReactNode;
+    /** Show compact version **/
+    compact?: boolean;
+    /** Show outlined version **/
+    outline?: boolean;
+    /** State will change the style of the badge **/
+    state?: State;
+};
+export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    /** Content should be a numerical value or tag/status like text **/
+    children: React.ReactNode;
+    /** Show compact version **/
+    compact?: boolean | undefined;
+    /** Show outlined version **/
+    outline?: boolean | undefined;
+    /** State will change the style of the badge **/
+    state?: "default" | "success" | "error" | "warning" | "information" | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { State } from '../../types';
+export declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content can be any react element, for e.g. a `div` */
+    children: React.ReactNode;
+    /** State will change the icon displayed in banner */
+    state: State;
+    onClose?: () => void;
+};
+export declare const Banner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /** Content can be any react element, for e.g. a `div` */
+    children: React.ReactNode;
+    /** State will change the icon displayed in banner */
+    state: State;
+    onClose?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { State } from '../../types';
+export declare const getBannerIcon: (type: State) => JSX.Element | null;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Appearance } from '../../types';
+import * as ButtonPrimitive from '../../primitives/Button';
+import { HangerProps } from '../Hanger/Hanger';
+import { MenuProps } from '../Menu/Menu';
+import { DialogProps } from '../Dialog/Dialog';
+import { PopoverProps } from '../Popover/Popover';
+import './Button.css';
+export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
+    /** Appearance will change the style of the button */
+    appearance?: Appearance;
+    /**
+     * Dialog component associated with the button, clicking the button will open the dialog.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated dialog when clicked.
+     */
+    dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    /** If fluid, button expands to the width of it's container */
+    fluid?: boolean;
+    /** Hanger component associated with the button. */
+    hanger?: (props: Partial<HangerProps>) => JSX.Element;
+    /** Menu component associated with the button. */
+    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    /**
+     * Popover component associated with the button, clicking the button will open the popover.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated popover when clicked.
+     */
+    popover?: (props: Partial<PopoverProps>) => JSX.Element;
+    /** A tooltip to show when hovering over the button */
+    tooltip?: string;
+};
+export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> & {
+    children: React.ReactNode;
+    href?: string | undefined;
+    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+} & {
+    /** Appearance will change the style of the button */
+    appearance?: "default" | "primary" | "danger" | "ghost" | "discrete" | undefined;
+    /**
+     * Dialog component associated with the button, clicking the button will open the dialog.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated dialog when clicked.
+     */
+    dialog?: ((props: Partial<DialogProps>) => JSX.Element) | undefined;
+    /** If fluid, button expands to the width of it's container */
+    fluid?: boolean | undefined;
+    /** Hanger component associated with the button. */
+    hanger?: ((props: Partial<HangerProps>) => JSX.Element) | undefined;
+    /** Menu component associated with the button. */
+    menu?: ((props: Partial<MenuProps>) => JSX.Element) | undefined;
+    /**
+     * Popover component associated with the button, clicking the button will open the popover.
+     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of
+     * the button should be only to open the associated popover when clicked.
+     */
+    popover?: ((props: Partial<PopoverProps>) => JSX.Element) | undefined;
+    /** A tooltip to show when hovering over the button */
+    tooltip?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { Appearance } from '../../types';
+export declare const getButtonClasses: () => string;
+export declare const getAppearanceClasses: (value: Appearance | undefined, icon?: boolean) => string;
+export declare const createButton: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import ReactDayPicker from 'react-day-picker';
+import './Calendar.css';
+export declare type CalendarTextsActions = {
+    /** Aria-label for previous month action button */
+    previousMonth: string;
+    /** Aria-label for next month action button */
+    nextMonth: string;
+    /** Aria-label for previous year action button */
+    previousYear: string;
+    /** Aria-label for next year action button */
+    nextYear: string;
+    /** Text displayed within today action button */
+    today: string;
+};
+export declare type CalendarTexts = {
+    /** Text and aria-label for action buttons in Calendar */
+    actions: CalendarTextsActions;
+    /** Text abbreviation for months in Calendar's header, starting with January */
+    months: string[];
+    /** Text abbreviation for days in Calendar's header, starting with Sunday */
+    weekdaysShort: string[];
+};
+export declare type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {
+    /** Handler called when a day is clicked in calendar */
+    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement>) => void;
+    value?: Date;
+};
+export declare const Calendar: 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" | "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"> & {
+    /** Handler called when a day is clicked in calendar */
+    onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => void;
+    value?: Date | undefined;
+} & React.RefAttributes<ReactDayPicker>>;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { MenuProps } from '../..';
+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/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,19 @@
+import * as React from 'react';
+import { ComboboxProps } from './Combobox';
+import { ScrollableListPropsWithRef } from '../Listbox/ScrollableList';
+declare type useCombobox = React.HTMLAttributes<HTMLDivElement> & {
+    combobox: React.HTMLAttributes<HTMLSpanElement>;
+    input: Omit<React.InputHTMLAttributes<HTMLInputElement>, '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,46 @@
+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 DatepickerProps = Omit<InputProps, 'value'> & {
+    /** [Calendar](component:calendar) component associated with the DatePicker */
+    calendar?: CalendarProps;
+    /** List of shortcuts */
+    shortcuts?: any;
+    /** 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, "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" | "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" | "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" | "icon" | "highlighted" | "invalid"> & {
+    /** [Calendar](component:calendar) component associated with the DatePicker */
+    calendar?: CalendarProps | undefined;
+    /** List of shortcuts */
+    shortcuts?: any;
+    /** 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/useDatepicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DatepickerProps } from './Datepicker';
+import { CalendarProps } from '../Calendar/Calendar';
+declare type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    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: {};
+    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 { 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, use when not providing a trigger  */
+    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;