@economic/taco 1.17.0-alpha.0 → 1.17.0

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/taco.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/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./Accordion").AccordionProps): JSX.Element;
+        Item: (props: import("./Accordion").AccordionItemProps) => JSX.Element;
+        Trigger: React.ForwardRefExoticComponent<import("./Accordion").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Content: React.ForwardRefExoticComponent<import("./Accordion").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    };
+    argTypes: {
+        as: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+    args: {
+        as: string;
+    };
+};
+export default _default;
+export declare const UncontrolledSingle: (args: any) => JSX.Element;
+export declare const ControlledSingle: (args: any) => JSX.Element;
+export declare const UncontrolledMultiple: (args: any) => JSX.Element;
+export declare const ControlledMultiple: (args: any) => JSX.Element;

package/dist/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { AlertDialogTriggerProps } from './components/Trigger';
+import { AlertDialogCancelProps, AlertDialogActionProps, AlertDialogFooterProps } from './components/Footer';
+import { AlertDialogContentProps, AlertDialogTitleProps } from './components/Content';
+export declare type AlertDialogProps = {
+    children: React.ReactNode | React.ReactNode[];
+    /** Set whether the alert dialog is open by default or not, use when not providing a trigger  */
+    defaultOpen?: boolean;
+    /** Called when the alert 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;
+    /** A trigger to be used for the alert dialog, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
+};
+export declare type ForwardedAlertDialogWithStatics = React.ForwardRefExoticComponent<AlertDialogProps & React.RefAttributes<HTMLElement>> & {
+    Trigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;
+    Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export declare const AlertDialog: ForwardedAlertDialogWithStatics;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("./AlertDialog").ForwardedAlertDialogWithStatics;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Uncontrolled: () => JSX.Element;
+export declare const NestedOverlays: () => JSX.Element;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type AlertDialogContext = {
+    props: Record<string, any>;
+    ref: React.Ref<HTMLElement>;
+};
+export declare const AlertDialogContext: React.Context<AlertDialogContext>;
+export declare const useCurrentAlertDialog: () => AlertDialogContext;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export declare type AlertDialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const Title: React.ForwardRefExoticComponent<AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare type AlertDialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** An accessible label to be announced when the dialog is opened */
+    'aria-label': string;
+    children: React.ReactNode;
+};
+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: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/AlertDialog/components/Footer.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Footer: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare type AlertDialogCancelProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const Cancel: React.ForwardRefExoticComponent<AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>>;
+export declare type AlertDialogActionProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const Action: React.ForwardRefExoticComponent<AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>>;

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./Backdrop").BackdropProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Default: () => JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+        children: React.ReactNode;
+        compact?: boolean | undefined;
+        outline?: boolean | undefined;
+        state?: "default" | "warning" | "information" | "success" | "error" | undefined;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Outline: () => JSX.Element;
+export declare const CompactOutline: () => JSX.Element;
+export declare const KitchenSink: () => JSX.Element;

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

@@ -0,0 +1,20 @@
+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 type BannerTexts = {
+    /** Aria-label for the close icon button of banner */
+    close: string;
+};
+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/Banner.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Default: (args: any) => JSX.Element;
+export declare const KitchenSink: () => JSX.Element;

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 | JSX.Element;
+};
+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 | JSX.Element | undefined;
+} & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ButtonProps } from '../../';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & {
+        children: React.ReactNode;
+        href?: string | undefined;
+        target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
+    } & {
+        appearance?: "danger" | "default" | "primary" | "ghost" | "discrete" | undefined;
+        dialog?: ((props: Partial<import("../..").DialogProps>) => JSX.Element) | undefined;
+        fluid?: boolean | undefined;
+        hanger?: ((props: Partial<React.PropsWithChildren<{
+            anchor?: JSX.Element | undefined;
+            defaultOpen?: boolean | undefined;
+            onClose?: (() => void) | undefined;
+        }>>) => JSX.Element) | undefined;
+        menu?: ((props: Partial<import("../..").MenuProps>) => JSX.Element) | undefined;
+        popover?: ((props: Partial<React.PropsWithChildren<{
+            modal?: boolean | undefined;
+            trigger?: JSX.Element | undefined;
+            defaultOpen?: boolean | undefined;
+            open?: boolean | undefined;
+            onChange?: ((open: boolean) => void) | undefined;
+        }>>) => JSX.Element) | undefined;
+        tooltip?: string | JSX.Element | undefined;
+    } & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    argTypes: {
+        appearance: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        href: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        appearance: string;
+        disabled: boolean;
+        fluid: boolean;
+    };
+};
+export default _default;
+export declare const Default: (args: ButtonProps) => JSX.Element;
+export declare const WithIcon: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithTooltip: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithHanger: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithAlertDialog: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithDialog: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithPopover: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const WithMenu: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+};
+export declare const KitchenSink: () => JSX.Element;

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

@@ -0,0 +1,6 @@
+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 createButtonWithTooltip: (props: any, className: string, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => JSX.Element;
+export declare const createButtonWithOverlays: (props: any, buttonBase: JSX.Element) => JSX.Element;

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import ReactDayPicker, { Modifier } 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;
+    disabledDays?: Modifier[];
+};
+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;
+    disabledDays?: Modifier[] | undefined;
+} & React.RefAttributes<ReactDayPicker>>;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: 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"> & {
+        onChange: (date: Date, event?: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => void;
+        value?: Date | undefined;
+        disabledDays?: import("react-day-picker").Modifier[] | undefined;
+    } & React.RefAttributes<import("react-day-picker").default>>;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;
+export declare const Localised: () => JSX.Element;
+export declare const DisabledDays: () => JSX.Element;