@economic/taco 2.40.0 → 2.40.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n    Actions,\n    Footer,\n    InnerContent,\n    DrawerInnerContentProps,\n    DrawerFooterProps,\n    DrawerTitleProps,\n    Title,\n    Close,\n    Content,\n    DrawerContentProps,\n    DrawerCloseProps,\n} from './components/Content';\nimport { GroupProps } from '../Group/Group';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { DrawerTriggerProps, Trigger } from './components/Trigger';\nimport { DrawerContext } from './Context';\nimport { DrawerSize, DrawerVariant } from './types';\n\nexport type DrawerTexts = {\n    /**\n     * Aria-label for back icon button in drawer.\n     */\n    back: string;\n    /**\n     * Aria-label for close icon button in drawer.\n     */\n    close: string;\n};\n\nexport type DrawerProps = Omit<DialogProps, 'draggable' | 'size'> & {\n    children: React.ReactNode | React.ReactNode[];\n    /** Size of the drawer. This is the recommended way to set a size for drawer component. */\n    size?: DrawerSize;\n    /** When `true`, pressing escape will close the drawer */\n    closeOnEscape?: boolean;\n    /** Set whether the drawer is open by default or not, use when not providing a trigger  */\n    defaultOpen?: boolean;\n    /** Handles the back button click and determines its visibility */\n    onClickBack?: () => void;\n    /** Handler called when drawer closes by user interaction */\n    onClose?: () => void;\n    /** Called when the drawer opens or closes, must be used in conjunction with open  */\n    onChange?: (open: boolean | undefined) => void;\n    /** Control the open state of the drawer from outside the component  */\n    open?: boolean;\n    /** A trigger to be used for the drawer, should not be set if `children` already contains a trigger */\n    trigger?: JSX.Element;\n    /** Triggers when resizing, can be throttled or debounced for better performances */\n    onResize?: (delta: number) => void;\n    /** Rendering variant of the drawer */\n    variant?: DrawerVariant;\n    /** className for children container, needed for embedded version, in cases where we might need to control children height */\n    className?: string;\n    /** When 'true' preventing focus from leaving drawer content */\n    focusTrap?: boolean;\n    /** When 'true' renders close button in topr right cornenr of drawer content */\n    showCloseButton?: boolean;\n    /** Target specific named outlet allowing you to render a drawer to a specific outlet */\n    outletName?: string;\n};\n\nexport type OutletProps = React.HTMLAttributes<HTMLDivElement> & {\n    name?: string;\n};\n\nconst DEFAULT_OUTLET_NAME = 'default';\n\nconst Outlet = React.forwardRef(function Outlet(props: OutletProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);\n    return (\n        <div\n            {...props}\n            className={className}\n            data-taco=\"drawer-outlet\"\n            data-taco-outlet-name={props.name ?? DEFAULT_OUTLET_NAME}\n            ref={ref}\n        />\n    );\n});\n\n// drawerStack getting set by previous drawer instance, to be able to close previous instance, when new instance getting opened.\nlet drawerStack: undefined | (() => void);\n\nexport type ForwardedDrawerWithStatics = React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLElement>> & {\n    Trigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;\n    InnerContent: React.ForwardRefExoticComponent<DrawerInnerContentProps & React.RefAttributes<HTMLDivElement>>;\n    Title: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n    Footer: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;\n    Close: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;\n    Actions: React.ForwardRefExoticComponent<GroupProps & React.RefAttributes<HTMLDivElement>>;\n    Outlet: React.ForwardRefExoticComponent<OutletProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Drawer = React.forwardRef(function Drawer(props: DrawerProps, ref: React.Ref<HTMLElement>) {\n    const {\n        open: openProp,\n        defaultOpen: defaultOpenProp,\n        // if onChange is not provided, then replace it with empty function, needed for useControllableState\n        onChange = () => {\n            // do nothing.\n        },\n        variant = 'embedded',\n        className,\n        closeOnEscape = true,\n        onResize,\n        onClose,\n        onClickBack,\n        size = 'md',\n        trigger,\n        children,\n        focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,\n        showCloseButton = true,\n        outletName,\n        ...otherProps\n    } = props;\n\n    const [open, setOpen] = useControllableState<boolean | undefined>({\n        prop: openProp,\n        defaultProp: defaultOpenProp,\n        onChange,\n    });\n\n    const [outlet, setOutlet] = React.useState<HTMLElement>();\n\n    const context = React.useMemo(\n        () => ({\n            closeOnEscape,\n            onClickBack,\n            onClose,\n            onResize,\n            props: otherProps,\n            size,\n            ref,\n            open,\n            setOpen,\n            variant,\n            focusTrap,\n            showCloseButton,\n            outlet,\n        }),\n        [\n            closeOnEscape,\n            open,\n            setOpen,\n            otherProps,\n            variant,\n            onResize,\n            onClose,\n            size,\n            focusTrap,\n            showCloseButton,\n            outlet,\n            onClickBack,\n        ]\n    );\n\n    // this prevents two drawers being open at once and used when one drawer getting opened before another one got closed.\n    const close = React.useCallback(() => {\n        setOpen(false);\n        onClose && onClose();\n    }, []);\n\n    React.useEffect(() => {\n        const outletSelector = `[data-taco=\"drawer-outlet\"][data-taco-outlet-name=\"${outletName ?? DEFAULT_OUTLET_NAME}\"]`;\n        const outletElement = document.querySelector<HTMLElement>(outletSelector) ?? document.body;\n        setOutlet(outletElement);\n    }, [outletName]);\n\n    React.useEffect(() => {\n        if (open) {\n            // if drawerStack is defined, this means that another drawer was opened before\n            if (drawerStack) {\n                drawerStack();\n            }\n            drawerStack = close;\n        } else {\n            // if drawerStack is equal to current close callback,\n            // this means that drawer getting closed completely instead of getting closed on re-open\n            if (drawerStack === close) {\n                drawerStack = undefined;\n            }\n        }\n    }, [open]);\n\n    return (\n        <DrawerContext.Provider value={context}>\n            <DialogPrimitive.Root modal={variant === 'overlay' ? true : false} open={open} onOpenChange={setOpen}>\n                {trigger && <Trigger>{trigger}</Trigger>}\n                {children}\n            </DialogPrimitive.Root>\n        </DrawerContext.Provider>\n    );\n}) as ForwardedDrawerWithStatics;\n\nDrawer.Trigger = Trigger;\nDrawer.Content = Content;\nDrawer.InnerContent = InnerContent;\nDrawer.Title = Title;\nDrawer.Footer = Footer;\nDrawer.Close = Close;\nDrawer.Actions = Actions;\nDrawer.Outlet = Outlet;\n"],"names":["DEFAULT_OUTLET_NAME","Outlet","React","props","ref","className","cn","name","_props$name","drawerStack","Drawer","open","openProp","defaultOpen","defaultOpenProp","onChange","variant","closeOnEscape","onResize","onClose","onClickBack","size","trigger","children","focusTrap","undefined","showCloseButton","outletName","otherProps","setOpen","useControllableState","prop","defaultProp","outlet","setOutlet","context","close","outletSelector","outletElement","_document$querySelect","document","querySelector","body","DrawerContext","Provider","value","DialogPrimitive","modal","onOpenChange","Trigger","Content","InnerContent","Title","Footer","Close","Actions"],"mappings":"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"}

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

@@ -0,0 +1,325 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
+import { useDraggable } from '../../../utils/hooks/useDraggable.js';
+import { Group } from '../../Group/Group.js';
+import { useCurrentMenu } from '../../Menu/Context.js';
+import { useCurrentDrawer } from '../Context.js';
+import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
+import { FocusScope } from '@react-aria/focus';
+import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
+
+const RESIZE_MIN = 360;
+const RESIZE_MAX = 1000;
+var DrawerAnimationDefinition;
+(function (DrawerAnimationDefinition) {
+  DrawerAnimationDefinition["Visible"] = "visible";
+  DrawerAnimationDefinition["Hidden"] = "hidden";
+})(DrawerAnimationDefinition || (DrawerAnimationDefinition = {}));
+const RenderPropWrapper = /*#__PURE__*/React__default.forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
+});
+const Title = /*#__PURE__*/React__default.forwardRef(function DrawerTitle(props, externalRef) {
+  const {
+    className,
+    children,
+    ...otherProps
+  } = props;
+  const ref = useMergedRef(externalRef);
+  const [style, setStyle] = React__default.useState({});
+  const {
+    texts
+  } = useLocalization();
+  const {
+    onClickBack
+  } = useCurrentDrawer();
+  /**
+   * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,
+   * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,
+   * so it can be easily overriden in exceptional scenarios.
+   *  */
+  const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);
+  React__default.useEffect(() => {
+    var _ref$current, _drawer$querySelector, _closeButton$offsetWi, _drawer$querySelector2, _actionsWrapper$offse;
+    const drawer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('[data-taco="drawer"]');
+    // This is the margin amount that we need to deduct from the margins to align with the design
+    const marginAdjust = 4;
+    const closeButton = (_drawer$querySelector = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`[aria-label="${texts.drawer.close}"]`)) !== null && _drawer$querySelector !== void 0 ? _drawer$querySelector : null;
+    const closeButtonWidth = (_closeButton$offsetWi = closeButton === null || closeButton === void 0 ? void 0 : closeButton.offsetWidth) !== null && _closeButton$offsetWi !== void 0 ? _closeButton$offsetWi : 0;
+    const closeButtonRightMargin = 8;
+    const actionsWrapper = (_drawer$querySelector2 = drawer === null || drawer === void 0 ? void 0 : drawer.querySelector(`#taco-drawer-actions[data-taco="group"]`)) !== null && _drawer$querySelector2 !== void 0 ? _drawer$querySelector2 : null;
+    const actionsWrapperWidth = (_actionsWrapper$offse = actionsWrapper === null || actionsWrapper === void 0 ? void 0 : actionsWrapper.offsetWidth) !== null && _actionsWrapper$offse !== void 0 ? _actionsWrapper$offse : 0;
+    const actionsWrapperRightMargin = 8;
+    const marginRight = closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;
+    setStyle({
+      marginRight
+    });
+  }, [ref, texts.drawer.close]);
+  return /*#__PURE__*/React__default.createElement(Title$1, Object.assign({
+    className: cName
+  }, otherProps, {
+    ref: ref
+  }), onClickBack ? (/*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.drawer.back,
+    className: "mr-3 text-base",
+    icon: "chevron-left",
+    onClick: onClickBack
+  })) : null, /*#__PURE__*/React__default.createElement("span", {
+    className: "line-clamp-2 inline-block overflow-y-hidden",
+    style: style
+  }, children));
+});
+const Footer = /*#__PURE__*/React__default.forwardRef(function DrawerFooter(props, ref) {
+  const {
+    className,
+    ...otherProps
+  } = props;
+  /**
+   * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.
+   */
+  const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }));
+});
+const Actions = /*#__PURE__*/React__default.forwardRef(function Actions(props, ref) {
+  const {
+    className,
+    ...otherProps
+  } = props;
+  const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);
+  // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title
+  return /*#__PURE__*/React__default.createElement(Group, Object.assign({}, otherProps, {
+    className: cName,
+    id: "taco-drawer-actions",
+    ref: ref
+  }));
+});
+const Close = /*#__PURE__*/React__default.forwardRef(function DrawerClose(props, ref) {
+  const {
+    onClose
+  } = useCurrentDrawer();
+  return /*#__PURE__*/React__default.createElement(Close$1, Object.assign({}, props, {
+    onClick: onClose,
+    ref: ref,
+    asChild: true
+  }));
+});
+const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerContent(props, ref) {
+  const {
+    className,
+    isScrollable = true,
+    children,
+    ...otherProps
+  } = props;
+  const cName = cn('grow flex flex-col', {
+    'overflow-y-hidden': isScrollable,
+    'p-4': !isScrollable
+  }, className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: cName,
+    ref: ref
+  }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
+    className: "w-full gap-y-0.5 p-4"
+  }, children) : children);
+});
+const Portal = props => {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const {
+    open = false,
+    variant,
+    outlet
+  } = useCurrentDrawer();
+  const backdropClassNames = React__default.useMemo(() => {
+    return getBackdropClassNames(open);
+  }, [open]);
+  if (!outlet) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(Portal$1, Object.assign({}, otherProps, {
+    container: outlet !== null && outlet !== void 0 ? outlet : undefined
+  }), variant === 'overlay' ? (/*#__PURE__*/React__default.createElement(Overlay, {
+    forceMount: true
+  }, /*#__PURE__*/React__default.createElement(Backdrop, {
+    className: backdropClassNames
+  }))) : null, children);
+};
+const UntrappedFocusDrawerContent = /*#__PURE__*/React__default.forwardRef(function EmbeddedDrawerContent(props, ref) {
+  const {
+    onEscape,
+    children,
+    ...otherProps
+  } = props;
+  useGlobalKeyDown('Escape', onEscape);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(FocusScope, {
+    autoFocus: true,
+    restoreFocus: true
+  }, children));
+});
+const DrawerContent = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    size,
+    onClose,
+    onResize,
+    open = false,
+    closeOnEscape,
+    variant,
+    focusTrap,
+    showCloseButton,
+    setOpen
+  } = useCurrentDrawer();
+  const {
+    className,
+    style,
+    children,
+    ...otherProps
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const ref = useMergedRef(externalRef);
+  // if the drawer was opened by a menu, we need to close the menu when the drawer closes
+  // the menu is still open (and mounted) because it is the trigger for the drawer
+  const menu = useCurrentMenu();
+  let handleCloseAutoFocus;
+  if (menu) {
+    handleCloseAutoFocus = () => {
+      menu.close();
+    };
+  }
+  const containerClassName = React__default.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);
+  const {
+    contentClassName,
+    dragHandlerClassName
+  } = React__default.useMemo(() => {
+    const contentClassName = getDrawerContentClassNames(size, variant, open);
+    const dragHandlerClassName = getDrawerDragHandlerClassNames();
+    return {
+      contentClassName,
+      dragHandlerClassName
+    };
+  }, [size, variant, open]);
+  const handleEscapeKeyDown = event => {
+    var _ref$current2;
+    const isTargetInsideDrawerContent = (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.contains(event.target);
+    if (isTargetInsideDrawerContent) {
+      if (!closeOnEscape) {
+        event.preventDefault();
+      } else {
+        setOpen && setOpen(false);
+        if (onClose) {
+          onClose();
+        }
+      }
+    }
+  };
+  const [containerWidth, setContainerWidth] = React__default.useState();
+  const dragHandlerRef = React__default.useRef(null);
+  const {
+    position,
+    dragging,
+    handleProps: dragHandleProps,
+    resetPosition
+  } = useDraggable(useMergedRef(dragHandlerRef));
+  const contentRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (onResize) {
+      onResize(position.x);
+    }
+  }, [position]);
+  React__default.useEffect(() => {
+    var _contentRef$current;
+    setContainerWidth((_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.offsetWidth);
+  }, [contentRef, open]);
+  const resizedWidth = React__default.useMemo(() => {
+    if (containerWidth) {
+      return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));
+    }
+    return;
+  }, [containerWidth, position]);
+  React__default.useEffect(() => {
+    if (!dragging && resizedWidth) {
+      setContainerWidth(resizedWidth);
+      resetPosition();
+    }
+  }, [dragging]);
+  let output;
+  if (typeof children === 'function') {
+    output = /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(RenderPropWrapper, null, children));
+  } else {
+    output = children;
+  }
+  const content = /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    "data-taco": "drawer",
+    className: containerClassName
+  }, output, /*#__PURE__*/React__default.createElement("div", Object.assign({
+    className: dragHandlerClassName
+  }, dragHandleProps, {
+    "data-testid": "resize-handler",
+    ref: dragHandlerRef
+  }), dragging ? /*#__PURE__*/React__default.createElement("div", {
+    "data-testid": "resize-hit-area",
+    className: "fixed bottom-0 left-0 right-0 top-0"
+  }) : null), showCloseButton ? (/*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.drawer.close,
+    className: "absolute right-0 top-0 mr-2 mt-4",
+    icon: "close"
+  }))) : null);
+  const styleProp = {
+    ...style,
+    ...{
+      width: resizedWidth
+    }
+  };
+  return focusTrap ? (/*#__PURE__*/React__default.createElement(Content$1, Object.assign({
+    forceMount: true
+  }, otherProps, {
+    className: contentClassName,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: variant === 'overlay' ? undefined : event => event.preventDefault(),
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: styleProp
+  }), content)) : (/*#__PURE__*/React__default.createElement(UntrappedFocusDrawerContent, {
+    onEscape: handleEscapeKeyDown,
+    className: contentClassName,
+    style: styleProp,
+    ref: ref
+  }, content));
+});
+const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, externalRef) {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(DrawerContent, Object.assign({}, props, {
+    ref: externalRef
+  }), children));
+});
+
+export { Actions, Close, Content, DrawerAnimationDefinition, DrawerContent, Footer, InnerContent, Title };
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <IconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn(\n        'grow flex flex-col',\n        {\n            'overflow-y-hidden': isScrollable,\n            'p-4': !isScrollable,\n        },\n        className\n    );\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyDown('Escape', onEscape);\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","externalRef","className","otherProps","useMergedRef","style","setStyle","useState","texts","useLocalization","onClickBack","useCurrentDrawer","cName","cn","useEffect","drawer","_ref$current","current","closest","marginAdjust","closeButton","_drawer$querySelector","querySelector","closeButtonWidth","_closeButton$offsetWi","offsetWidth","closeButtonRightMargin","actionsWrapper","_drawer$querySelector2","actionsWrapperWidth","_actionsWrapper$offse","actionsWrapperRightMargin","marginRight","DialogPrimitive","IconButton","appearance","back","icon","Footer","DrawerFooter","Actions","Group","id","Close","DrawerClose","onClose","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current2","contains","target","preventDefault","containerWidth","setContainerWidth","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","x","_contentRef$current","resizedWidth","Math","min","max","output","content","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { forwardRef, createElement } from 'react';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
+
+const Trigger = /*#__PURE__*/forwardRef(function DrawerTrigger(props, ref) {
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Drawer/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nexport type DrawerTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\n\nexport const Trigger = React.forwardRef(function DrawerTrigger(props: DrawerTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    return <DialogPrimitive.Trigger {...props} ref={ref} asChild />;\n});\n"],"names":["Trigger","React","DrawerTrigger","props","ref","DialogPrimitive","asChild"],"mappings":";;;MAIaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,aAAaA,CAACC,KAAyB,EAAEC,GAAiC;EACvH,oBAAOH,cAACI,SAAuB,oBAAKF,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEE,OAAO;KAAG;AACnE,CAAC;;;;"}

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

@@ -0,0 +1,37 @@
+import cn from 'clsx';
+
+const getDrawerSizeClassnames = size => {
+  switch (size) {
+    case 'lg':
+      return 'w-[600px]';
+    case 'md':
+    default:
+      return 'w-[420px]';
+  }
+};
+const getDrawerContentClassNames = (size, variant, open) => {
+  return cn('bg-white h-full bottom-0 top-0 right-0 transition-none', {
+    block: open,
+    hidden: !open,
+    fixed: variant === 'overlay',
+    'relative h-full overflow-hidden': variant === 'embedded'
+  }, getDrawerSizeClassnames(size));
+};
+const getDrawerContainerClassNames = variant => {
+  return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {
+    'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',
+    'border-l border-grey-300 h-full': variant === 'embedded'
+  });
+};
+const getDrawerDragHandlerClassNames = () => {
+  return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');
+};
+const getBackdropClassNames = open => {
+  return cn({
+    block: open,
+    hidden: !open
+  });
+};
+
+export { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames, getDrawerSizeClassnames };
+//# sourceMappingURL=util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Drawer/util.ts"],"sourcesContent":["import { DrawerSize, DrawerVariant } from './types';\nimport cn from 'clsx';\n\nexport const getDrawerSizeClassnames = (size: DrawerSize): string => {\n    switch (size) {\n        case 'lg':\n            return 'w-[600px]';\n        case 'md':\n        default:\n            return 'w-[420px]';\n    }\n};\n\nexport const getDrawerPrimitiveContentClassNames = (): string => {\n    return 'fixed bottom-0 top-0 right-0';\n};\n\nexport const getDrawerContentClassNames = (size: DrawerSize, variant: DrawerVariant, open: boolean): string => {\n    return cn(\n        'bg-white h-full bottom-0 top-0 right-0 transition-none',\n        {\n            block: open,\n            hidden: !open,\n            fixed: variant === 'overlay',\n            'relative h-full overflow-hidden': variant === 'embedded',\n        },\n        getDrawerSizeClassnames(size)\n    );\n};\n\nexport const getDrawerContainerClassNames = (variant: DrawerVariant): string => {\n    return cn('bg-white mx-auto absolute h-full w-full flex flex-col ', {\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]': variant === 'overlay',\n        'border-l border-grey-300 h-full': variant === 'embedded',\n    });\n};\n\nexport const getDrawerDragHandlerClassNames = (): string => {\n    return cn('border-[2px] absolute border-transparent top-0 w-2 h-full cursor-ew-resize left-0 hover:border-l-blue-500');\n};\n\nexport const getBackdropClassNames = (open: boolean): string => {\n    return cn({\n        block: open,\n        hidden: !open,\n    });\n};\n"],"names":["getDrawerSizeClassnames","size","getDrawerContentClassNames","variant","open","cn","block","hidden","fixed","getDrawerContainerClassNames","getDrawerDragHandlerClassNames","getBackdropClassNames"],"mappings":";;MAGaA,uBAAuB,GAAIC,IAAgB;EACpD,QAAQA,IAAI;IACR,KAAK,IAAI;MACL,OAAO,WAAW;IACtB,KAAK,IAAI;IACT;MACI,OAAO,WAAW;;AAE9B;MAMaC,0BAA0B,GAAGA,CAACD,IAAgB,EAAEE,OAAsB,EAAEC,IAAa;EAC9F,OAAOC,EAAE,CACL,wDAAwD,EACxD;IACIC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH,IAAI;IACbI,KAAK,EAAEL,OAAO,KAAK,SAAS;IAC5B,iCAAiC,EAAEA,OAAO,KAAK;GAClD,EACDH,uBAAuB,CAACC,IAAI,CAAC,CAChC;AACL;MAEaQ,4BAA4B,GAAIN,OAAsB;EAC/D,OAAOE,EAAE,CAAC,wDAAwD,EAAE;IAChE,sEAAsE,EAAEF,OAAO,KAAK,SAAS;IAC7F,iCAAiC,EAAEA,OAAO,KAAK;GAClD,CAAC;AACN;MAEaO,8BAA8B,GAAGA;EAC1C,OAAOL,EAAE,CAAC,2GAA2G,CAAC;AAC1H;MAEaM,qBAAqB,GAAIP,IAAa;EAC/C,OAAOC,EAAE,CAAC;IACNC,KAAK,EAAEF,IAAI;IACXG,MAAM,EAAE,CAACH;GACZ,CAAC;AACN;;;;"}

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

@@ -0,0 +1,39 @@
+import { forwardRef, useRef, createElement } from 'react';
+import cn from 'clsx';
+import { Truncate } from '../Truncate/Truncate.js';
+
+const Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  const messageRef = useRef(null);
+  const {
+    disabled,
+    children,
+    invalid = false,
+    warning = false,
+    message,
+    ...otherProps
+  } = props;
+  const className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+    'text-grey-300': disabled
+  }, props.className);
+  const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-700': !invalid && !warning,
+    'text-red-500': invalid,
+    'text-yellow-700': warning && !invalid,
+    'opacity-50': disabled
+  });
+  return /*#__PURE__*/createElement("label", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "label",
+    ref: ref
+  }), children, message && (/*#__PURE__*/createElement(Truncate, {
+    tooltip: message
+  }, /*#__PURE__*/createElement("span", {
+    className: messageClassName,
+    "data-taco": "label-message",
+    ref: messageRef,
+    role: invalid ? 'alert' : undefined
+  }, message))));
+});
+
+export { Field };
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../../../../../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\n\nimport './Field.css';\nimport { Truncate } from '../Truncate/Truncate';\n\nexport type FieldProps = React.LabelHTMLAttributes<HTMLLabelElement> & {\n    /** Content of the field */\n    children: React.ReactNode;\n    /**\tChanges the style to indicate the element is disabled */\n    disabled?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /* Whether the input is in a warning state */\n    warning?: boolean;\n    /**\n     * Text displayed below the children of Field.\n     * Should be a short text that indicates feedback for user.\n     */\n    message?: string;\n};\n\nexport const Field = React.forwardRef(function Field(props: FieldProps, ref: React.Ref<HTMLLabelElement>) {\n    const messageRef = React.useRef<HTMLSpanElement>(null);\n\n    const { disabled, children, invalid = false, warning = false, message, ...otherProps } = props;\n    const className = cn(\n        'flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]',\n        {\n            'text-grey-300': disabled,\n        },\n        props.className\n    );\n    const messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {\n        'text-grey-700': !invalid && !warning,\n        'text-red-500': invalid,\n        'text-yellow-700': warning && !invalid,\n        'opacity-50': disabled,\n    });\n\n    return (\n        <label {...otherProps} className={className} data-taco=\"label\" ref={ref}>\n            {children}\n            {message && (\n                <Truncate tooltip={message}>\n                    <span\n                        className={messageClassName}\n                        data-taco=\"label-message\"\n                        ref={messageRef}\n                        role={invalid ? 'alert' : undefined}>\n                        {message}\n                    </span>\n                </Truncate>\n            )}\n        </label>\n    );\n});\n"],"names":["Field","React","props","ref","messageRef","disabled","children","invalid","warning","message","otherProps","className","cn","messageClassName","Truncate","tooltip","role","undefined"],"mappings":";;;;MAsBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAAgC;EACpG,MAAMC,UAAU,GAAGH,MAAY,CAAkB,IAAI,CAAC;EAEtD,MAAM;IAAEI,QAAQ;IAAEC,QAAQ;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO,GAAG,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGR,KAAK;EAC9F,MAAMS,SAAS,GAAGC,EAAE,CAChB,8EAA8E,EAC9E;IACI,eAAe,EAAEP;GACpB,EACDH,KAAK,CAACS,SAAS,CAClB;EACD,MAAME,gBAAgB,GAAGD,EAAE,CAAC,iEAAiE,EAAE;IAC3F,eAAe,EAAE,CAACL,OAAO,IAAI,CAACC,OAAO;IACrC,cAAc,EAAED,OAAO;IACvB,iBAAiB,EAAEC,OAAO,IAAI,CAACD,OAAO;IACtC,YAAY,EAAEF;GACjB,CAAC;EAEF,oBACIJ,yCAAWS,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACR,GAAG,EAAEA;MAC/DG,QAAQ,EACRG,OAAO,kBACJR,cAACa,QAAQ;IAACC,OAAO,EAAEN;kBACfR;IACIU,SAAS,EAAEE,gBAAgB;iBACjB,eAAe;IACzBV,GAAG,EAAEC,UAAU;IACfY,IAAI,EAAET,OAAO,GAAG,OAAO,GAAGU;KACzBR,OAAO,CACL,CACA,CACd,CACG;AAEhB,CAAC;;;;"}

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

@@ -0,0 +1,20 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+
+const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
+  const {
+    horizontal = false,
+    ...otherProps
+  } = props;
+  const className = cn('yt-form', {
+    'yt-form--horizontal flex flex-wrap': horizontal
+  }, props.className);
+  return /*#__PURE__*/createElement("form", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "form",
+    ref: ref
+  }));
+});
+
+export { Form };
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport './Form.css';\n\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\n    /** Content should be composed of other Taco form elements */\n    children: React.ReactNode;\n    /** Display the form fields in a horizontal layout */\n    horizontal?: boolean;\n};\n\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\n    const { horizontal = false, ...otherProps } = props;\n    const className = cn(\n        'yt-form',\n        {\n            'yt-form--horizontal flex flex-wrap': horizontal,\n        },\n        props.className\n    );\n\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\n});\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAIA,CAACE,KAAgB,EAAEC,GAA+B;EAChG,MAAM;IAAEC,UAAU,GAAG,KAAK;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACnD,MAAMI,SAAS,GAAGC,EAAE,CAChB,SAAS,EACT;IACI,oCAAoC,EAAEH;GACzC,EACDF,KAAK,CAACI,SAAS,CAClB;EAED,oBAAOL,wCAAUI,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACH,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}

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

@@ -0,0 +1,21 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+
+const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
+  const {
+    as: Tag = 'span',
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('flex gap-2 [&:has([data-taco="tag"])]:!gap-1', {
+    'flex-col ': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/createElement(Tag, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "group",
+    ref: ref
+  }));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Orientation } from '../../types';\n\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\n    /**\n     * Change what html tag element will render.\n     * Default value is `span`\n     */\n    as?: 'div' | 'span' | 'nav';\n    /** Content should be composed of other Taco elements */\n    children: React.ReactNode;\n    /**\n     * Define orientation of grouping.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n};\n\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { as: Tag = 'span', orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'flex gap-2 [&:has([data-taco=\"tag\"])]:!gap-1',\n        { 'flex-col ': orientation === 'vertical' },\n        props.className\n    );\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\n});\n"],"names":["Group","React","props","ref","as","Tag","orientation","otherProps","className","cn"],"mappings":";;;MAmBaA,KAAK,gBAAGC,UAAgB,CAAC,SAASD,KAAKA,CAACE,KAAiB,EAAEC,GAA8B;EAClG,MAAM;IAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGL,KAAK;EAC7E,MAAMM,SAAS,GAAGC,EAAE,CAChB,8CAA8C,EAC9C;IAAE,WAAW,EAAEH,WAAW,KAAK;GAAY,EAC3CJ,KAAK,CAACM,SAAS,CAClB;EACD,oBAAOP,cAACI,GAAG,oBAAKE,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,OAAO;IAACL,GAAG,EAAEA;KAAO;AACpF,CAAC;;;;"}