@economic/taco 1.24.0 → 1.25.1

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

@@ -6,6 +6,7 @@ import { MenuProps } from '../Menu/Menu';
 import { DialogProps } from '../Dialog/Dialog';
 import { PopoverProps } from '../Popover/Popover';
 import './Button.css';
+import { DrawerProps } from '../Drawer/Drawer';
 export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
     /** Appearance will change the style of the button */
     appearance?: Appearance;
@@ -15,6 +16,12 @@ export declare type ButtonProps = ButtonPrimitive.ButtonProps & {
      * the button should be only to open the associated dialog when clicked.
      */
     dialog?: (props: Partial<DialogProps>) => JSX.Element;
+    /**
+     * Drawer component associated with the button, clicking the button will open the drawer.
+     * *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 drawer when clicked.
+     */
+    drawer?: (props: Partial<DrawerProps>) => JSX.Element;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean;
     /** Hanger component associated with the button. */
@@ -43,6 +50,12 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
      * the button should be only to open the associated dialog when clicked.
      */
     dialog?: ((props: Partial<DialogProps>) => JSX.Element) | undefined;
+    /**
+     * Drawer component associated with the button, clicking the button will open the drawer.
+     * *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 drawer when clicked.
+     */
+    drawer?: ((props: Partial<DrawerProps>) => JSX.Element) | undefined;
     /** If fluid, button expands to the width of it's container */
     fluid?: boolean | undefined;
     /** Hanger component associated with the button. */

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

@@ -2,7 +2,7 @@ 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 { DialogDrawerProps, DialogDrawerRenderProps } from './components/DialogDrawer';
 import { DialogExtraProps } from './components/Extra';
 import { DialogSize } from './types';
 export type { DialogCloseProps, DialogContentDrawerRenderProps, DialogContentProps, DialogContentRenderProps, DialogDrawerProps, DialogDrawerRenderProps, DialogFooterProps, DialogSize, DialogTitleProps, };

package/dist/components/Dialog/components/DialogDrawer.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 DialogDrawer: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "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 { DialogDrawer };

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DrawerSize, DrawerVariant } from './types';
+export declare type DrawerContext = {
+    closeOnEscape: boolean;
+    showCloseButton: boolean;
+    onClose?: () => void;
+    onResize?: (delta: number) => void;
+    props: {};
+    ref: React.Ref<HTMLElement>;
+    size: DrawerSize;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    variant: DrawerVariant;
+    focusTrap?: boolean;
+    outlet?: HTMLElement;
+};
+export declare const DrawerContext: React.Context<DrawerContext>;
+export declare const useCurrentDrawer: () => DrawerContext;

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { DrawerInnerContentProps, DrawerFooterProps, DrawerTitleProps, DrawerContentProps, DrawerCloseProps } from './components/Content';
+import { GroupProps } from '../Group/Group';
+import { DialogProps } from '../Dialog/Dialog';
+import { DrawerTriggerProps } from './components/Trigger';
+import { DrawerSize, DrawerVariant } from './types';
+export declare type DrawerTexts = {
+    /**
+     * Aria-label for close icon button in drawer.
+     */
+    close: string;
+};
+export declare type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {
+    children: React.ReactNode | React.ReactNode[];
+    /** Size of the drawer. This is the recommended way to set a size for drawer component. */
+    size?: DrawerSize;
+    /** When `true`, pressing escape will close the drawer */
+    closeOnEscape?: boolean;
+    /** Set whether the drawer is open by default or not, use when not providing a trigger  */
+    defaultOpen?: boolean;
+    /** Handler called when drawer closes by user interaction */
+    onClose?: () => void;
+    /** Called when the drawer opens or closes, must be used in conjunction with open  */
+    onChange?: (open: boolean | undefined) => void;
+    /** Control the open state of the drawer from outside the component  */
+    open?: boolean;
+    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */
+    trigger?: JSX.Element;
+    /** Triggers when resizing, can be throttled or debounced for better performances */
+    onResize?: (delta: number) => void;
+    /** Rendering variant of the drawer */
+    variant?: DrawerVariant;
+    /** className for children container, needed for embedded version, in cases where we might need to control children height */
+    className?: string;
+    /** When 'true' preventing focus from leaving drawer content */
+    focusTrap?: boolean;
+    /** When 'true' renders close button in topr right cornenr of drawer content */
+    showCloseButton?: boolean;
+};
+export declare type OutletProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {
+    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;
+    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Drawer: ForwardedDrawerWithStatics;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+export declare type DrawerContentRenderProps = {
+    close: () => void;
+};
+export declare enum DrawerAnimationDefinition {
+    Visible = "visible",
+    Hidden = "hidden"
+}
+export declare type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+export declare const Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
+    as?: "div" | "nav" | "span" | undefined;
+    children: React.ReactNode;
+    orientation?: "horizontal" | "vertical" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;
+export declare const Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.
+ * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,
+ * then it's simply enough to render children and wrap them in custom implementation.
+ */
+export declare type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,
+     * default value - true
+     */
+    isScrollable?: boolean;
+};
+export declare const InnerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,
+     * default value - true
+     */
+    isScrollable?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** An accessible label to be announced when the side drawer is opened */
+    'aria-label': string;
+    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);
+};
+export declare const DrawerContent: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "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" | "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 side drawer is opened */
+    'aria-label': string;
+    children: Pick<React.ReactNode, never> | ((props: DrawerContentRenderProps) => JSX.Element);
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Content: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLDivElement>, "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "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" | "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 side drawer is opened */
+    'aria-label': string;
+    children: Pick<React.ReactNode, never> | ((props: DrawerContentRenderProps) => JSX.Element);
+} & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1 @@
+export declare const images: string[];

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

@@ -0,0 +1,2 @@
+export declare type DrawerSize = 'md' | 'lg';
+export declare type DrawerVariant = 'overlay' | 'embedded';

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

@@ -0,0 +1,7 @@
+import { DrawerSize, DrawerVariant } from './types';
+export declare const getDrawerSizeClassnames: (size: DrawerSize) => string;
+export declare const getDrawerPrimitiveContentClassNames: () => string;
+export declare const getDrawerContentClassNames: (size: DrawerSize, variant: DrawerVariant, open: boolean) => string;
+export declare const getDrawerContainerClassNames: (variant: DrawerVariant) => string;
+export declare const getDrawerDragHandlerClassNames: () => string;
+export declare const getBackdropClassNames: (open: boolean) => string;

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

@@ -1,9 +1,11 @@
 import React from 'react';
-export declare type Navigation2GroupProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare type Navigation2GroupProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> & {
     defaultExpanded?: boolean;
     heading: string | JSX.Element;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
-export declare const Group: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export declare const Group: React.ForwardRefExoticComponent<Pick<React.LiHTMLAttributes<HTMLLIElement>, "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "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" | "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"> & {
     defaultExpanded?: boolean | undefined;
     heading: string | JSX.Element;
-} & React.RefAttributes<HTMLButtonElement>>;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
+} & React.RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1 @@
+export declare const getAdjacentClasses: () => string;

package/dist/components/Provider/Localization.d.ts

@@ -16,6 +16,7 @@ import { Table2Texts } from '../Table2/Table2';
 import { SearchInputTexts } from '../SearchInput/SearchInput';
 import { Select2Texts } from '../Select2/Select2';
 import { BannerTexts } from '../Banner/Banner';
+import { DrawerTexts } from '../Drawer/Drawer';
 export declare type LocalizationTexts = {
     /** Localized texts and aria-labels for [Banner](component:banner) component */
     banner: BannerTexts;
@@ -49,6 +50,8 @@ export declare type LocalizationTexts = {
     toasts: ToastsTexts;
     /** Localized texts and aria-labels for [Tour](component:tour) component */
     tour: TourTexts;
+    /** Localized texts and aria-labels for [Drawer](component:drawer) component */
+    drawer: DrawerTexts;
 };
 export declare type Localization = {
     /**
@@ -247,6 +250,9 @@ export declare const defaultLocalisationTexts: {
         next: string;
         open: string;
     };
+    drawer: {
+        close: string;
+    };
 };
 export declare const LocalizationContext: React.Context<Localization>;
 export interface LocalizationProviderProps {

package/dist/esm/packages/taco/src/components/Button/Button.js

@@ -21,6 +21,7 @@ const Base = /*#__PURE__*/forwardRef(function ButtonBase(props, ref) {
 const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   const {
     dialog,
+    drawer,
     hanger,
     menu,
     popover,
@@ -42,6 +43,7 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   }), children);
   return createButtonWithOverlays({
     dialog,
+    drawer,
     hanger,
     menu,
     popover

package/dist/esm/packages/taco/src/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButtonWithTooltip","Button","dialog","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AAqCA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAU,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACtC,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACJ,UAAU,CAACK,UAAU,CAAC,EAC3C,cAAc,EACd;IACI,+BAA+B,EAAER,KAAK,CAACS,QAAQ;IAC/C,sCAAsC,EAAE,CAACT,KAAK,CAACS,QAAQ;IACvD,QAAQ,EAAEP;GACb,EACDF,KAAK,CAACI,SAAS,CAClB;EAED,OAAOM,uBAAuB,CAAC;IAAE,GAAGP,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEH,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWU,MAAM,gBAAGb,UAAgB,CAAC,SAASa,MAAM,CAClDX,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEW,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGhB,KAAK;EAE/D,IAAIiB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEnB,cAACsB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACRzB,cAACD,IAAI,oBAAKmB,WAAW;IAAEf,GAAG,EAAEA;MACvBgB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEZ,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AAC9E,CAAC;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from './util';\nimport { HangerProps } from '../Hanger/Hanger';\nimport { MenuProps } from '../Menu/Menu';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { PopoverProps } from '../Popover/Popover';\nimport './Button.css';\nimport { Icon } from '../Icon/Icon';\nimport { DrawerProps } from '../Drawer/Drawer';\n\nexport type ButtonProps = ButtonPrimitive.ButtonProps & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /**\n     * Drawer component associated with the button, clicking the button will open the drawer.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated drawer when clicked.\n     */\n    drawer?: (props: Partial<DrawerProps>) => JSX.Element;\n    /** If fluid, button expands to the width of it's container */\n    fluid?: boolean;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\nconst Base = React.forwardRef(function ButtonBase(props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) {\n    const { fluid, ...otherProps } = props;\n    const className = cn(\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance),\n        'rounded px-3',\n        {\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n            'w-full': fluid,\n        },\n        props.className\n    );\n\n    return createButtonWithTooltip({ ...otherProps, 'data-taco': 'button' }, className, ref);\n});\n\nexport const Button = React.forwardRef(function Button(\n    props: ButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, drawer, hanger, menu, popover, ...buttonProps } = props;\n\n    let children = buttonProps.children;\n\n    // add a chevron icon to menu buttons\n    if (typeof menu === 'function') {\n        children = Array.isArray(children)\n            ? [...children, <Icon key=\"chevron-down\" name=\"chevron-down\" />]\n            : [children, <Icon key=\"chevron-down\" name=\"chevron-down\" />];\n    }\n\n    const button = (\n        <Base {...buttonProps} ref={ref}>\n            {children}\n        </Base>\n    );\n\n    return createButtonWithOverlays({ dialog, drawer, hanger, menu, popover }, button);\n});\n"],"names":["Base","React","ButtonBase","props","ref","fluid","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButtonWithTooltip","Button","dialog","drawer","hanger","menu","popover","buttonProps","children","Array","isArray","Icon","key","name","button","createButtonWithOverlays"],"mappings":";;;;;AA4CA,MAAMA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,UAAU,CAACC,KAAkB,EAAEC,GAAqD;EACvH,MAAM;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACtC,MAAMI,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,EAAE,EAClBC,oBAAoB,CAACJ,UAAU,CAACK,UAAU,CAAC,EAC3C,cAAc,EACd;IACI,+BAA+B,EAAER,KAAK,CAACS,QAAQ;IAC/C,sCAAsC,EAAE,CAACT,KAAK,CAACS,QAAQ;IACvD,QAAQ,EAAEP;GACb,EACDF,KAAK,CAACI,SAAS,CAClB;EAED,OAAOM,uBAAuB,CAAC;IAAE,GAAGP,UAAU;IAAE,WAAW,EAAE;GAAU,EAAEC,SAAS,EAAEH,GAAG,CAAC;AAC5F,CAAC,CAAC;MAEWU,MAAM,gBAAGb,UAAgB,CAAC,SAASa,MAAM,CAClDX,KAAkB,EAClBC,GAAqD;EAErD,MAAM;IAAEW,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGjB,KAAK;EAEvE,IAAIkB,QAAQ,GAAGD,WAAW,CAACC,QAAQ;;EAGnC,IAAI,OAAOH,IAAI,KAAK,UAAU,EAAE;IAC5BG,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,QAAQ,CAAC,GAC5B,CAAC,GAAGA,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC,GAC9D,CAACL,QAAQ,eAAEpB,cAACuB,IAAI;MAACC,GAAG,EAAC,cAAc;MAACC,IAAI,EAAC;MAAiB,CAAC;;EAGrE,MAAMC,MAAM,gBACR1B,cAACD,IAAI,oBAAKoB,WAAW;IAAEhB,GAAG,EAAEA;MACvBiB,QAAQ,CAEhB;EAED,OAAOO,wBAAwB,CAAC;IAAEb,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,EAAEQ,MAAM,CAAC;AACtF,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Button/util.js

@@ -43,6 +43,7 @@ const createButtonWithTooltip = (props, className, ref) => {
 const createButtonWithOverlays = (props, buttonBase) => {
   const {
     dialog,
+    drawer,
     hanger,
     menu,
     popover
@@ -52,6 +53,10 @@ const createButtonWithOverlays = (props, buttonBase) => {
     button = dialog({
       trigger: button
     });
+  } else if (typeof drawer === 'function') {
+    button = drawer({
+      trigger: button
+    });
   } else if (typeof menu === 'function') {
     button = menu({
       trigger: button

package/dist/esm/packages/taco/src/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;\n\n        case 'danger':\n            return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;\n\n        case 'ghost':\n            return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;\n            }\n\n            return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAG;EAC5B,OAAO,+HAA+H;AAC1I;MAEaC,oBAAoB,GAAG,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,6RAA6R;IAEjS,KAAK,QAAQ;MACT,0NAA0N;IAE9N,KAAK,OAAO;MACR,8dAA8d;IAEle,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,gLAAgL;;QAGpL,2JAA2J;;IAG/J;MACI,iNAAiN;;AAE7N;MAEaC,uBAAuB,GAAG,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAG,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGf,KAAK;EAC/C,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEI,OAAO,EAAEX;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOS,IAAI,KAAK,UAAU,EAAE;IACnCT,MAAM,GAAGS,IAAI,CAAC;MAAEE,OAAO,EAAEX;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOU,OAAO,KAAK,UAAU,EAAE;IACtCV,MAAM,GAAGU,OAAO,CAAC;MAAEC,OAAO,EAAEX;KAAQ,CAAC;;EAGzC,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IAC9BR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,MAAM,EAAEZ;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Appearance } from '../../types';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nexport const getButtonClasses = () => {\n    return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';\n};\n\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\n    switch (value) {\n        case 'primary':\n            return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;\n\n        case 'danger':\n            return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;\n\n        case 'ghost':\n            return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;\n\n        case 'discrete': {\n            if (icon) {\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;\n            }\n\n            return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;\n        }\n\n        default:\n            return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;\n    }\n};\n\nexport const createButtonWithTooltip = (\n    props: any,\n    className: string,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n): JSX.Element => {\n    const { tooltip, ...buttonProps } = props;\n    const button = <ButtonPrimitive.Button {...buttonProps} className={className} ref={ref} />;\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{button}</Tooltip>;\n    }\n\n    return button;\n};\n\nexport const createButtonWithOverlays = (props: any, buttonBase: JSX.Element) => {\n    const { dialog, drawer, hanger, menu, popover } = props;\n    let button = buttonBase;\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    } else if (typeof drawer === 'function') {\n        button = drawer({ trigger: button });\n    } else if (typeof menu === 'function') {\n        button = menu({ trigger: button });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    if (typeof hanger === 'function') {\n        button = hanger({ anchor: button });\n    }\n\n    return button;\n};\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButtonWithTooltip","props","className","ref","tooltip","buttonProps","button","React","ButtonPrimitive","Tooltip","title","createButtonWithOverlays","buttonBase","dialog","drawer","hanger","menu","popover","trigger","anchor"],"mappings":";;;;MAKaA,gBAAgB,GAAG;EAC5B,OAAO,+HAA+H;AAC1I;MAEaC,oBAAoB,GAAG,CAACC,KAA6B,EAAEC,IAAI,GAAG,KAAK;EAC5E,QAAQD,KAAK;IACT,KAAK,SAAS;MACV,6RAA6R;IAEjS,KAAK,QAAQ;MACT,0NAA0N;IAE9N,KAAK,OAAO;MACR,8dAA8d;IAEle,KAAK,UAAU;MAAE;QACb,IAAIC,IAAI,EAAE;UACN,gLAAgL;;QAGpL,2JAA2J;;IAG/J;MACI,iNAAiN;;AAE7N;MAEaC,uBAAuB,GAAG,CACnCC,KAAU,EACVC,SAAiB,EACjBC,GAAqD;EAErD,MAAM;IAAEC,OAAO;IAAE,GAAGC;GAAa,GAAGJ,KAAK;EACzC,MAAMK,MAAM,gBAAGC,6BAACC,MAAsB,oBAAKH,WAAW;IAAEH,SAAS,EAAEA,SAAS;IAAEC,GAAG,EAAEA;KAAO;EAE1F,IAAIC,OAAO,EAAE;IACT,oBAAOG,6BAACE,OAAO;MAACC,KAAK,EAAEN;OAAUE,MAAM,CAAW;;EAGtD,OAAOA,MAAM;AACjB;MAEaK,wBAAwB,GAAG,CAACV,KAAU,EAAEW,UAAuB;EACxE,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,IAAI;IAAEC;GAAS,GAAGhB,KAAK;EACvD,IAAIK,MAAM,GAAGM,UAAU;EAEvB,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;IAC9BP,MAAM,GAAGO,MAAM,CAAC;MAAEK,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOQ,MAAM,KAAK,UAAU,EAAE;IACrCR,MAAM,GAAGQ,MAAM,CAAC;MAAEI,OAAO,EAAEZ;KAAQ,CAAC;GACvC,MAAM,IAAI,OAAOU,IAAI,KAAK,UAAU,EAAE;IACnCV,MAAM,GAAGU,IAAI,CAAC;MAAEE,OAAO,EAAEZ;KAAQ,CAAC;GACrC,MAAM,IAAI,OAAOW,OAAO,KAAK,UAAU,EAAE;IACtCX,MAAM,GAAGW,OAAO,CAAC;MAAEC,OAAO,EAAEZ;KAAQ,CAAC;;EAGzC,IAAI,OAAOS,MAAM,KAAK,UAAU,EAAE;IAC9BT,MAAM,GAAGS,MAAM,CAAC;MAAEI,MAAM,EAAEb;KAAQ,CAAC;;EAGvC,OAAOA,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/Dialog.js

@@ -3,7 +3,7 @@ import { Root } from '@radix-ui/react-dialog';
 import { DialogContext } from './Context.js';
 import { Trigger } from './components/Trigger.js';
 import { Content, Title, Footer, Close } from './components/Content.js';
-import { Drawer } from './components/Drawer.js';
+import { DialogDrawer } from './components/DialogDrawer.js';
 import { Extra } from './components/Extra.js';
 
 const useSeparatedChildren = initialChildren => {
@@ -13,7 +13,7 @@ const useSeparatedChildren = initialChildren => {
     let extra;
     Children.toArray(initialChildren).forEach(child => {
       var _child$type, _child$type2;
-      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === DialogDrawer.displayName) {
         drawer = child;
       } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === Extra.displayName) {
         extra = child;
@@ -70,7 +70,7 @@ Dialog.Content = Content;
 Dialog.Title = Title;
 Dialog.Footer = Footer;
 Dialog.Extra = Extra;
-Dialog.Drawer = Drawer;
+Dialog.Drawer = DialogDrawer;
 Dialog.Close = Close;
 
 export { Dialog };

package/dist/esm/packages/taco/src/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === Drawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = Drawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAa,CAAC;IACjB,MAAMC,QAAQ,GAAU,EAAE;IAC1B,IAAIC,MAAM;IACV,IAAIC,KAAK;IAETH,QAAc,CAACI,OAAO,CAACL,eAAe,CAAC,CAACM,OAAO,CAAEC,KAAU;;MACvD,IAAI,gBAAAA,KAAK,CAACC,IAAI,gDAAV,YAAYC,WAAW,MAAKC,MAAM,CAACD,WAAW,EAAE;QAChDN,MAAM,GAAGI,KAAK;OACjB,MAAM,IAAI,iBAAAA,KAAK,CAACC,IAAI,iDAAV,aAAYC,WAAW,MAAKE,KAAK,CAACF,WAAW,EAAE;QACtDL,KAAK,GAAGG,KAAK;OAChB,MAAM;QACHL,QAAQ,CAACU,IAAI,CAACL,KAAK,CAAC;;KAE3B,CAAC;IAEF,OAAO,CAACL,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC;GACnC,EAAE,CAACJ,eAAe,CAAC,CAAC;AACzB,CAAC;MAYYa,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAM,CAACC,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFb,QAAQ,EAAEF,eAAe;IACzBgB,aAAa,GAAG,IAAI;IACpBC,WAAW;IACXC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,eAAe,GAAG,IAAI;IACtBC,IAAI,GAAG,IAAI;IACXC,OAAO;IACP,GAAGC;GACN,GAAGX,KAAK;EACT,MAAM,CAACZ,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,GAAGL,oBAAoB,CAACC,eAAe,CAAC;EACvE,MAAM,CAAC0B,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAc,CAAC,KAAK,CAAC;EAEzD,MAAM2B,OAAO,GAAG3B,OAAa,CACzB,OAAO;IACHe,aAAa;IACbE,SAAS;IACTf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UAAU;MAChBG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAY;KAC5D;IACDC,QAAQ,EAAE;MACN5B,MAAM;MACNC;KACH;IACDgB,OAAO;IACPN,KAAK,EAAEW,UAAU;IACjBH,eAAe;IACfC,IAAI;IACJR;GACH,CAAC,EACF,CAACC,aAAa,EAAEU,UAAU,EAAER,SAAS,EAAEf,MAAM,EAAEC,KAAK,EAAEiB,IAAI,EAAEI,UAAU,EAAEH,eAAe,CAAC,CAC3F;EAED,oBACIrB,cAAC+B,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBAC3B3B,cAACkC,IAAoB;IAAClB,WAAW,EAAEA,WAAW;IAAEI,IAAI,EAAEA,IAAI;IAAEe,YAAY,EAAEjB;KACrEK,OAAO,iBAAIvB,cAACoC,OAAO,QAAEb,OAAO,CAAW,EACvCtB,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDW,MAAM,CAACwB,OAAO,GAAGA,OAAO;AACxBxB,MAAM,CAACyB,OAAO,GAAGA,OAAO;AACxBzB,MAAM,CAAC0B,KAAK,GAAGA,KAAK;AACpB1B,MAAM,CAAC2B,MAAM,GAAGA,MAAM;AACtB3B,MAAM,CAACF,KAAK,GAAGA,KAAK;AACpBE,MAAM,CAACH,MAAM,GAAGA,MAAM;AACtBG,MAAM,CAAC4B,KAAK,GAAGA,KAAK;;;;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport './Dialog.css';\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\nimport {\n    Content,\n    Title,\n    Footer,\n    Close,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogContentDrawerRenderProps,\n    DialogTitleProps,\n    DialogFooterProps,\n    DialogCloseProps,\n} from './components/Content';\nimport { DialogDrawerProps, DialogDrawerRenderProps, DialogDrawer } from './components/DialogDrawer';\nimport { DialogExtraProps, Extra } from './components/Extra';\nimport { DialogContext } from './Context';\nimport { DialogSize } from './types';\n\nexport type {\n    DialogCloseProps,\n    DialogContentDrawerRenderProps,\n    DialogContentProps,\n    DialogContentRenderProps,\n    DialogDrawerProps,\n    DialogDrawerRenderProps,\n    DialogFooterProps,\n    DialogSize,\n    DialogTitleProps,\n};\n\nexport type DialogTexts = {\n    /**\n     * Aria-label for close icon button in dialog.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    close: string;\n    drag: string;\n};\n\nexport type DialogProps = {\n    children: React.ReactNode | React.ReactNode[];\n    /** When `true`, pressing escape will close the dialog */\n    closeOnEscape?: boolean;\n    /** Set whether the dialog is open by default or not  */\n    defaultOpen?: boolean;\n    /** Allows dragging the dialog around the screen (window constrained) */\n    draggable?: boolean;\n    /** Handler called when dialog closes by user interaction */\n    onClose?: () => void;\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean) => void;\n    /** Control the open state of the dialog from outside the component  */\n    open?: boolean;\n    /** Shows the close icon button of the dialog */\n    showCloseButton?: boolean;\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\n    size?: DialogSize;\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n};\n\nconst useSeparatedChildren = initialChildren => {\n    return React.useMemo(() => {\n        const children: any[] = [];\n        let drawer;\n        let extra;\n\n        React.Children.toArray(initialChildren).forEach((child: any) => {\n            if (child.type?.displayName === DialogDrawer.displayName) {\n                drawer = child;\n            } else if (child.type?.displayName === Extra.displayName) {\n                extra = child;\n            } else {\n                children.push(child);\n            }\n        });\n\n        return [children, drawer, extra];\n    }, [initialChildren]);\n};\n\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\n};\n\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\n    const {\n        children: initialChildren,\n        closeOnEscape = true,\n        defaultOpen,\n        draggable = false,\n        onChange,\n        onClose,\n        open,\n        showCloseButton = true,\n        size = 'sm',\n        trigger,\n        ...otherProps\n    } = props;\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            draggable,\n            drawer: {\n                open: drawerOpen,\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\n            },\n            elements: {\n                drawer,\n                extra,\n            },\n            onClose,\n            props: otherProps,\n            showCloseButton,\n            size,\n            ref,\n        }),\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\n    );\n\n    return (\n        <DialogContext.Provider value={context}>\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DialogContext.Provider>\n    );\n}) as ForwardedDialogWithStatics;\n\nDialog.Trigger = Trigger;\nDialog.Content = Content;\nDialog.Title = Title;\nDialog.Footer = Footer;\nDialog.Extra = Extra;\nDialog.Drawer = DialogDrawer;\nDialog.Close = Close;\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","DialogDrawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Drawer","Close"],"mappings":";;;;;;;;AAgEA,MAAMA,oBAAoB,GAAGC,eAAe;EACxC,OAAOC,OAAa,CAAC;IACjB,MAAMC,QAAQ,GAAU,EAAE;IAC1B,IAAIC,MAAM;IACV,IAAIC,KAAK;IAETH,QAAc,CAACI,OAAO,CAACL,eAAe,CAAC,CAACM,OAAO,CAAEC,KAAU;;MACvD,IAAI,gBAAAA,KAAK,CAACC,IAAI,gDAAV,YAAYC,WAAW,MAAKC,YAAY,CAACD,WAAW,EAAE;QACtDN,MAAM,GAAGI,KAAK;OACjB,MAAM,IAAI,iBAAAA,KAAK,CAACC,IAAI,iDAAV,aAAYC,WAAW,MAAKE,KAAK,CAACF,WAAW,EAAE;QACtDL,KAAK,GAAGG,KAAK;OAChB,MAAM;QACHL,QAAQ,CAACU,IAAI,CAACL,KAAK,CAAC;;KAE3B,CAAC;IAEF,OAAO,CAACL,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC;GACnC,EAAE,CAACJ,eAAe,CAAC,CAAC;AACzB,CAAC;MAYYa,MAAM,gBAAGZ,UAAgB,CAAC,SAASY,MAAM,CAACC,KAAkB,EAAEC,GAA2B;EAClG,MAAM;IACFb,QAAQ,EAAEF,eAAe;IACzBgB,aAAa,GAAG,IAAI;IACpBC,WAAW;IACXC,SAAS,GAAG,KAAK;IACjBC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,eAAe,GAAG,IAAI;IACtBC,IAAI,GAAG,IAAI;IACXC,OAAO;IACP,GAAGC;GACN,GAAGX,KAAK;EACT,MAAM,CAACZ,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAAC,GAAGL,oBAAoB,CAACC,eAAe,CAAC;EACvE,MAAM,CAAC0B,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAc,CAAC,KAAK,CAAC;EAEzD,MAAM2B,OAAO,GAAG3B,OAAa,CACzB,OAAO;IACHe,aAAa;IACbE,SAAS;IACTf,MAAM,EAAE;MACJkB,IAAI,EAAEK,UAAU;MAChBG,MAAM,EAAE,MAAMF,aAAa,CAACG,YAAY,IAAI,CAACA,YAAY;KAC5D;IACDC,QAAQ,EAAE;MACN5B,MAAM;MACNC;KACH;IACDgB,OAAO;IACPN,KAAK,EAAEW,UAAU;IACjBH,eAAe;IACfC,IAAI;IACJR;GACH,CAAC,EACF,CAACC,aAAa,EAAEU,UAAU,EAAER,SAAS,EAAEf,MAAM,EAAEC,KAAK,EAAEiB,IAAI,EAAEI,UAAU,EAAEH,eAAe,CAAC,CAC3F;EAED,oBACIrB,cAAC+B,aAAa,CAACC,QAAQ;IAACC,KAAK,EAAEN;kBAC3B3B,cAACkC,IAAoB;IAAClB,WAAW,EAAEA,WAAW;IAAEI,IAAI,EAAEA,IAAI;IAAEe,YAAY,EAAEjB;KACrEK,OAAO,iBAAIvB,cAACoC,OAAO,QAAEb,OAAO,CAAW,EACvCtB,QAAQ,CACU,CACF;AAEjC,CAAC;AAEDW,MAAM,CAACwB,OAAO,GAAGA,OAAO;AACxBxB,MAAM,CAACyB,OAAO,GAAGA,OAAO;AACxBzB,MAAM,CAAC0B,KAAK,GAAGA,KAAK;AACpB1B,MAAM,CAAC2B,MAAM,GAAGA,MAAM;AACtB3B,MAAM,CAACF,KAAK,GAAGA,KAAK;AACpBE,MAAM,CAAC4B,MAAM,GAAG/B,YAAY;AAC5BG,MAAM,CAAC6B,KAAK,GAAGA,KAAK;;;;"}

package/dist/esm/packages/taco/src/components/Dialog/components/{Drawer.js → DialogDrawer.js}

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { useCurrentDialog } from '../Context.js';
 import { motion } from 'framer-motion';
 
-const Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
+const DialogDrawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
   var _dialog$drawer, _dialog$drawer2;
   const dialog = useCurrentDialog();
   const className = cn('absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
@@ -35,7 +35,7 @@ const Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
     ref: ref
   }), typeof props.children === 'function' ? props.children(dialog.drawer) : props.children);
 });
-Drawer.displayName = 'DialogDrawer';
+DialogDrawer.displayName = 'DialogDrawer';
 
-export { Drawer };
-//# sourceMappingURL=Drawer.js.map
+export { DialogDrawer };
+//# sourceMappingURL=DialogDrawer.js.map

package/dist/esm/packages/taco/src/components/Dialog/components/DialogDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDrawer.js","sources":["../../../../../../../../src/components/Dialog/components/DialogDrawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { motion } from 'framer-motion';\nimport cn from 'classnames';\nimport { DialogContext, useCurrentDialog } from '../Context';\n\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\n\nexport type DialogDrawerProps = Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\n> & {\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\n};\n\nconst DialogDrawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\n    const dialog = useCurrentDialog();\n    const className = cn(\n        'absolute top-0  -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\n        props.className\n    );\n\n    return (\n        <motion.div\n            {...props}\n            className={className}\n            data-taco=\"dialog-drawer\"\n            aria-hidden={!dialog.drawer?.open}\n            variants={{\n                visible: {\n                    left: '100%',\n                    display: 'block',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                },\n                hidden: {\n                    left: '0%',\n                    transition: { ease: 'easeOut', duration: 0.2 },\n                    transitionEnd: {\n                        display: 'none',\n                    },\n                },\n            }}\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\n            ref={ref}>\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\n        </motion.div>\n    );\n});\nDialogDrawer.displayName = 'DialogDrawer';\n\nexport { DialogDrawer };\n"],"names":["DialogDrawer","React","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,YAAY,gBAAGC,UAAgB,CAAC,SAASD,YAAY,CAACE,KAAwB,EAAEC,GAA8B;;EAChH,MAAMC,MAAM,GAAGC,gBAAgB,EAAE;EACjC,MAAMC,SAAS,GAAGC,EAAE,CAChB,iGAAiG,EACjGL,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACO,MAAM,CAACC,GAAG,oBACHP,KAAK;IACTI,SAAS,EAAEA,SAAS;iBACV,eAAe;mBACZ,oBAACF,MAAM,CAACM,MAAM,2CAAb,eAAeC,IAAI;IACjCC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MAAM;QACZC,OAAO,EAAE,OAAO;QAChBC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;;OAC5C;MACDC,MAAM,EAAE;QACJL,IAAI,EAAE,IAAI;QACVE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAS;UAAEC,QAAQ,EAAE;SAAK;QAC9CE,aAAa,EAAE;UACXL,OAAO,EAAE;;;KAGpB;IACDM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAM,4CAAb,gBAAeC,IAAI,GAAG,SAAS,GAAG,QAAQ;IACnDR,GAAG,EAAEA;MACJ,OAAOD,KAAK,CAACoB,QAAQ,KAAK,UAAU,GAAGpB,KAAK,CAACoB,QAAQ,CAAClB,MAAM,CAACM,MAAM,CAAC,GAAGR,KAAK,CAACoB,QAAQ,CAC7E;AAErB,CAAC;AACDtB,YAAY,CAACuB,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/packages/taco/src/components/Drawer/Context.js

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const DrawerContext = /*#__PURE__*/createContext({
+  closeOnEscape: true,
+  showCloseButton: true,
+  onClose: () => {},
+  onResize: () => {},
+  props: {},
+  ref: null,
+  size: 'md',
+  variant: 'embedded'
+});
+const useCurrentDrawer = () => {
+  return useContext(DrawerContext);
+};
+
+export { DrawerContext, useCurrentDrawer };
+//# sourceMappingURL=Context.js.map

package/dist/esm/packages/taco/src/components/Drawer/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../../../../src/components/Drawer/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport * as React from 'react';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerContext = {\n    closeOnEscape: boolean;\n    showCloseButton: boolean;\n    onClose?: () => void;\n    onResize?: (delta: number) => void;\n    props: {};\n    ref: React.Ref<HTMLElement>;\n    size: DrawerSize;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n    variant: DrawerVariant;\n    focusTrap?: boolean;\n    outlet?: HTMLElement;\n};\n\nexport const DrawerContext = React.createContext<DrawerContext>({\n    closeOnEscape: true,\n    showCloseButton: true,\n    onClose: () => {},\n    onResize: () => {},\n    props: {},\n    ref: null,\n    size: 'md',\n    variant: 'embedded',\n});\n\nexport const useCurrentDrawer = () => {\n    return React.useContext(DrawerContext);\n};\n"],"names":["DrawerContext","React","closeOnEscape","showCloseButton","onClose","onResize","props","ref","size","variant","useCurrentDrawer"],"mappings":";;AAAA;MAmBaA,aAAa,gBAAGC,aAAmB,CAAgB;EAC5DC,aAAa,EAAE,IAAI;EACnBC,eAAe,EAAE,IAAI;EACrBC,OAAO,EAAE,QAAQ;EACjBC,QAAQ,EAAE,QAAQ;EAClBC,KAAK,EAAE,EAAE;EACTC,GAAG,EAAE,IAAI;EACTC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE;CACZ;MAEYC,gBAAgB,GAAG;EAC5B,OAAOT,UAAgB,CAACD,aAAa,CAAC;AAC1C;;;;"}