@economic/taco 2.40.0 → 2.40.2

package/dist/esm/packages/taco/src/components/Menu/components/Item.js

@@ -0,0 +1,107 @@
+import { forwardRef, createElement, useEffect } from 'react';
+import cn from 'clsx';
+import { Icon as Icon$1 } from '../../Icon/Icon.js';
+import { useCurrentMenu } from '../Context.js';
+import { Sub, SubTrigger, Item as Item$1 } from '@radix-ui/react-dropdown-menu';
+import { Shortcut } from '../../Shortcut/Shortcut.js';
+
+const Icon = ({
+  name
+}) => (/*#__PURE__*/createElement("span", {
+  className: "absolute left-0 ml-1"
+}, /*#__PURE__*/createElement(Icon$1, {
+  className: "-ml-px -mt-px !h-5 !w-5",
+  name: name
+})));
+const useItemStyling = ({
+  disabled,
+  indented,
+  className
+}) => {
+  const menu = useCurrentMenu();
+  useEffect(() => {
+    if (indented && !(menu !== null && menu !== void 0 && menu.indented)) {
+      menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
+    }
+  }, [indented]);
+  return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
+    'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
+    'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
+    'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,
+    'cursor-not-allowed hover:bg-white text-grey-300': disabled
+  }, className);
+};
+const Item = /*#__PURE__*/forwardRef(function MenuItem(props, ref) {
+  var _props$disabled;
+  const {
+    dialog,
+    icon,
+    onClick,
+    popover,
+    shortcut,
+    subMenu,
+    ...otherProps
+  } = props;
+  const menu = useCurrentMenu();
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  const disabled = (_props$disabled = props.disabled) !== null && _props$disabled !== void 0 ? _props$disabled : props['aria-disabled'];
+  let handleClick;
+  // radix has a bug that does not disable clicks when disabled is set on items
+  if (disabled) {
+    handleClick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+  }
+  if (subMenu) {
+    return /*#__PURE__*/createElement(Sub, null, /*#__PURE__*/createElement(SubTrigger, Object.assign({}, otherProps, {
+      className: className,
+      onClick: handleClick,
+      ref: ref
+    }), icon ? /*#__PURE__*/createElement(Icon, {
+      name: icon
+    }) : null, props.children, /*#__PURE__*/createElement(Icon$1, {
+      className: "-mr-1.5 ml-auto !h-5 !w-5",
+      name: "chevron-right"
+    })), subMenu());
+  }
+  const handleSelect = event => {
+    if (onClick) {
+      onClick(event);
+    }
+    if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {
+      event.preventDefault();
+    }
+  };
+  let button = /*#__PURE__*/createElement(Item$1, Object.assign({}, otherProps, {
+    className: className,
+    onClick: handleClick,
+    onSelect: handleSelect,
+    ref: ref
+  }), icon ? /*#__PURE__*/createElement(Icon, {
+    name: icon
+  }) : null, props.children, shortcut ? (/*#__PURE__*/createElement("span", {
+    className: "ml-auto pl-5"
+  }, /*#__PURE__*/createElement(Shortcut, {
+    keys: shortcut,
+    className: "text-grey-700"
+  }))) : null);
+  if (typeof dialog === 'function') {
+    button = dialog({
+      trigger: button,
+      onClose: menu === null || menu === void 0 ? void 0 : menu.close
+    });
+  } else if (typeof popover === 'function') {
+    button = popover({
+      trigger: button
+    });
+  }
+  return button;
+});
+
+export { Icon, Item, useItemStyling };
+//# sourceMappingURL=Item.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { PopoverProps } from '../../Popover/Popover';\nimport { KeyDownHandlerOptions } from '../../../utils/keyboard';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer text-black hover:wcag-grey-200 data-[highlighted]:wcag-grey-200': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-300': disabled,\n        },\n        className\n    );\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    shortcut?: string | KeyDownHandlerOptions;\n    subMenu?: any;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, popover, shortcut, subMenu, ...otherProps } = props;\n    const menu = useCurrentMenu();\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    if (subMenu) {\n        return (\n            <DropdownMenuPrimitive.Sub>\n                <DropdownMenuPrimitive.SubTrigger {...otherProps} className={className} onClick={handleClick} ref={ref}>\n                    {icon ? <Icon name={icon} /> : null}\n                    {props.children}\n                    <IconPrimitive className=\"-mr-1.5 ml-auto !h-5 !w-5\" name=\"chevron-right\" />\n                </DropdownMenuPrimitive.SubTrigger>\n                {subMenu()}\n            </DropdownMenuPrimitive.Sub>\n        );\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function' || typeof popover === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon ? <Icon name={icon} /> : null}\n            {props.children}\n            {shortcut ? (\n                <span className=\"ml-auto pl-5\">\n                    <Shortcut keys={shortcut} className=\"text-grey-700\" />\n                </span>\n            ) : null}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button, onClose: menu?.close });\n    } else if (typeof popover === 'function') {\n        button = popover({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Item","MenuItem","props","ref","dialog","icon","onClick","popover","shortcut","subMenu","otherProps","_props$disabled","handleClick","event","preventDefault","stopPropagation","DropdownMenuPrimitive","children","handleSelect","button","onSelect","Shortcut","keys","trigger","onClose","close"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Menu/components/Link.js

@@ -0,0 +1,37 @@
+import { forwardRef, createElement } from 'react';
+import { useCurrentMenu } from '../Context.js';
+import { Item } from '@radix-ui/react-dropdown-menu';
+import { useItemStyling, Icon } from './Item.js';
+
+const Link = /*#__PURE__*/forwardRef(function MenuLink(props, ref) {
+  const {
+    href,
+    icon,
+    onClick,
+    ...otherProps
+  } = props;
+  const menu = useCurrentMenu();
+  const className = useItemStyling({
+    disabled: props.disabled,
+    indented: !!icon,
+    className: props.className
+  });
+  const handleClick = event => {
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    menu === null || menu === void 0 ? void 0 : menu.close();
+  };
+  return /*#__PURE__*/createElement(Item, Object.assign({}, otherProps, {
+    asChild: true,
+    className: className,
+    ref: ref,
+    onClick: handleClick
+  }), /*#__PURE__*/createElement("a", {
+    href: href,
+    target: "_blank"
+  }, icon && /*#__PURE__*/createElement(Icon, {
+    name: icon
+  }), props.children));
+});
+
+export { Link };
+//# sourceMappingURL=Link.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Menu/components/Link.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon, useItemStyling } from './Item';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuLinkItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    disabled?: boolean;\n    icon?: IconName;\n    href: string;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\nexport const Link = React.forwardRef(function MenuLink(props: MenuLinkItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { href, icon, onClick, ...otherProps } = props;\n    const menu = useCurrentMenu();\n\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const handleClick: React.MouseEventHandler<HTMLDivElement> = event => {\n        onClick?.(event);\n        menu?.close();\n    };\n\n    return (\n        <DropdownMenuPrimitive.Item {...otherProps} asChild className={className} ref={ref} onClick={handleClick}>\n            <a href={href} target=\"_blank\">\n                {icon && <Icon name={icon} />}\n                {props.children}\n            </a>\n        </DropdownMenuPrimitive.Item>\n    );\n});\n"],"names":["Link","React","MenuLink","props","ref","href","icon","onClick","otherProps","menu","useCurrentMenu","className","useItemStyling","disabled","indented","handleClick","event","close","DropdownMenuPrimitive","asChild","target","Icon","name","children"],"mappings":";;;;;MAaaA,IAAI,gBAAGC,UAAgB,CAAC,SAASC,QAAQA,CAACC,KAAwB,EAAEC,GAA8B;EAC3G,MAAM;IAAEC,IAAI;IAAEC,IAAI;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACpD,MAAMM,IAAI,GAAGC,cAAc,EAAE;EAE7B,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BC,QAAQ,EAAEV,KAAK,CAACU,QAAQ;IACxBC,QAAQ,EAAE,CAAC,CAACR,IAAI;IAChBK,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,MAAMI,WAAW,GAA4CC,KAAK;IAC9DT,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGS,KAAK,CAAC;IAChBP,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ,KAAK,EAAE;GAChB;EAED,oBACIhB,cAACiB,IAA0B,oBAAKV,UAAU;IAAEW,OAAO;IAACR,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEG,OAAO,EAAEQ;mBACzFd;IAAGI,IAAI,EAAEA,IAAI;IAAEe,MAAM,EAAC;KACjBd,IAAI,iBAAIL,cAACoB,IAAI;IAACC,IAAI,EAAEhB;IAAQ,EAC5BH,KAAK,CAACoB,QAAQ,CACf,CACqB;AAErC,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js

@@ -0,0 +1,49 @@
+import { useContext, createElement, createContext, forwardRef } from 'react';
+import cn from 'clsx';
+import { RadioItem as RadioItem$1, ItemIndicator, RadioGroup as RadioGroup$1 } from '@radix-ui/react-dropdown-menu';
+import { useItemStyling } from './Item.js';
+import { getRadioGroupItemValueAsString, useRadioGroup } from '../../RadioGroup/RadioGroup.js';
+
+const RadioItem = props => {
+  const context = useContext(MenuRadioGroupContext);
+  const {
+    children,
+    value,
+    ...otherProps
+  } = props;
+  const disabled = context.disabled || props.disabled;
+  const className = useItemStyling({
+    disabled: disabled,
+    indented: true,
+    className: props.className
+  });
+  return /*#__PURE__*/createElement(RadioItem$1, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    value: getRadioGroupItemValueAsString(value)
+  }), /*#__PURE__*/createElement(ItemIndicator, {
+    className: "absolute left-0 ml-1.5"
+  }, /*#__PURE__*/createElement("span", {
+    className: "ml-1 flex h-1.5 w-1.5 rounded-full bg-current "
+  })), children);
+};
+const MenuRadioGroupContext = /*#__PURE__*/createContext({
+  disabled: false
+});
+const RadioGroup = /*#__PURE__*/forwardRef(function MenuRadioItem(props, ref) {
+  const {
+    context,
+    props: otherProps
+  } = useRadioGroup(props);
+  const className = cn('flex flex-col', props.className);
+  return /*#__PURE__*/createElement(MenuRadioGroupContext.Provider, {
+    value: context
+  }, /*#__PURE__*/createElement(RadioGroup$1, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  })));
+});
+RadioGroup.Item = RadioItem;
+
+export { RadioGroup, RadioItem };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/esm/packages/taco/src/components/Menu/components/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props, ref) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} ref={ref} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","ref","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAA8B;EACpD,MAAMC,OAAO,GAAGC,UAAgB,CAACC,qBAAqB,CAAC;EACvD,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAChD,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAQ,IAAIP,KAAK,CAACO,QAAQ;EACnD,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QAAQ;IAClBG,QAAQ,EAAE,IAAI;IACdF,SAAS,EAAER,KAAK,CAACQ;GACpB,CAAC;EAEF,oBACIN,cAACS,WAA+B,oBACxBL,UAAU;IACdE,SAAS,EAAEA,SAAS;IACpBD,QAAQ,EAAEA,QAAQ;IAClBF,KAAK,EAAEO,8BAA8B,CAACP,KAAK;mBAC3CH,cAACS,aAAmC;IAACH,SAAS,EAAC;kBAC3CN;IAAMM,SAAS,EAAC;IAAmD,CACjC,EACrCJ,QAAQ,CACqB;AAE1C;AAEA,MAAMD,qBAAqB,gBAAGD,aAAmB,CAAC;EAAEK,QAAQ,EAAE;CAAO,CAAC;MAUzDM,UAAU,gBAAGX,UAAgB,CAAsC,SAASY,aAAaA,CAACd,KAAK,EAAEe,GAAG;EAC7G,MAAM;IAAEd,OAAO;IAAED,KAAK,EAAEM;GAAY,GAAGU,aAAa,CAAChB,KAAK,CAAC;EAC3D,MAAMQ,SAAS,GAAGS,EAAE,CAAC,eAAe,EAAEjB,KAAK,CAACQ,SAAS,CAAC;EAEtD,oBACIN,cAACC,qBAAqB,CAACe,QAAQ;IAACb,KAAK,EAAEJ;kBACnCC,cAACS,YAAgC,oBAAKL,UAAU;IAAEE,SAAS,EAAEA,SAAS;IAAEO,GAAG,EAAEA;KAAO,CACvD;AAEzC,CAAC;AACDF,UAAU,CAACM,IAAI,GAAGpB,SAAS;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/Separator.js

@@ -0,0 +1,13 @@
+import { forwardRef, createElement } from 'react';
+import { Separator as Separator$1 } from '@radix-ui/react-dropdown-menu';
+
+const Separator = /*#__PURE__*/forwardRef(function Separator(props, ref) {
+  return /*#__PURE__*/createElement(Separator$1, Object.assign({
+    className: "bg-grey-300 my-1 h-px"
+  }, props, {
+    ref: ref
+  }));
+});
+
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/dist/esm/packages/taco/src/components/Menu/components/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../../../../../../src/components/Menu/components/Separator.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nexport type MenuSeparatorProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Separator = React.forwardRef(function Separator(props: MenuSeparatorProps, ref: React.Ref<HTMLDivElement>) {\n    return <DropdownMenuPrimitive.Separator className=\"bg-grey-300 my-1 h-px\" {...props} ref={ref} />;\n});\n"],"names":["Separator","React","props","ref","DropdownMenuPrimitive","className"],"mappings":";;;MAKaA,SAAS,gBAAGC,UAAgB,CAAC,SAASD,SAASA,CAACE,KAAyB,EAAEC,GAA8B;EAClH,oBAAOF,cAACG,WAA+B;IAACC,SAAS,EAAC;KAA4BH,KAAK;IAAEC,GAAG,EAAEA;KAAO;AACrG,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js

@@ -0,0 +1,22 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { Portal, SubContent } from '@radix-ui/react-dropdown-menu';
+
+const SubMenu = /*#__PURE__*/forwardRef(function MenuSubMenu(props, ref) {
+  const internalRef = useMergedRef(ref);
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);
+  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(SubContent, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "menu-submenu",
+    sideOffset: 4,
+    ref: internalRef
+  }), children));
+});
+
+export { SubMenu };
+//# sourceMappingURL=SubMenu.js.map

package/dist/esm/packages/taco/src/components/Menu/components/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","sources":["../../../../../../../../src/components/Menu/components/SubMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'clsx';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\nexport type MenuSubMenuProps = Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps, 'children' | 'side'> & {\n    children: React.ReactNode;\n};\n\nexport const SubMenu = React.forwardRef(function MenuSubMenu(props: MenuSubMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const internalRef = useMergedRef<any>(ref);\n    const { children, ...otherProps } = props;\n    const className = cn('border border-transparent rounded block outline-none p-1 yt-shadow wcag-white', props.className);\n\n    return (\n        <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.SubContent\n                {...otherProps}\n                className={className}\n                data-taco=\"menu-submenu\"\n                sideOffset={4}\n                ref={internalRef}>\n                {children}\n            </DropdownMenuPrimitive.SubContent>\n        </DropdownMenuPrimitive.Portal>\n    );\n});\n"],"names":["SubMenu","React","MenuSubMenu","props","ref","internalRef","useMergedRef","children","otherProps","className","cn","DropdownMenuPrimitive","sideOffset"],"mappings":";;;;;MASaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAA8B;EAChH,MAAMC,WAAW,GAAGC,YAAY,CAAMF,GAAG,CAAC;EAC1C,MAAM;IAAEG,QAAQ;IAAE,GAAGC;GAAY,GAAGL,KAAK;EACzC,MAAMM,SAAS,GAAGC,EAAE,CAAC,+EAA+E,EAAEP,KAAK,CAACM,SAAS,CAAC;EAEtH,oBACIR,cAACU,MAA4B,qBACzBV,cAACU,UAAgC,oBACzBH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,cAAc;IACxBG,UAAU,EAAE,CAAC;IACbR,GAAG,EAAEC;MACJE,QAAQ,CACsB,CACR;AAEvC,CAAC;;;;"}

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

@@ -0,0 +1,33 @@
+import { forwardRef, useEffect, createElement } from 'react';
+import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { isElementInsideTable3OrReport } from '../../../utils/dom.js';
+import { createCustomKeyboardEvent } from '../../../utils/input.js';
+import { useCurrentMenu } from '../Context.js';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dropdown-menu';
+
+const Trigger = /*#__PURE__*/forwardRef(function MenuTrigger(props, ref) {
+  const menu = useCurrentMenu();
+  const internalRef = useMergedRef(ref);
+  const handleKeyDown = event => {
+    if (event.key === 'ArrowDown') {
+      if (isElementInsideTable3OrReport(event.currentTarget)) {
+        var _event$currentTarget$;
+        event.preventDefault();
+        (_event$currentTarget$ = event.currentTarget.parentNode) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.dispatchEvent(createCustomKeyboardEvent(event));
+      }
+    }
+  };
+  useEffect(() => {
+    if (internalRef.current) {
+      menu === null || menu === void 0 ? void 0 : menu.setMinWidth(internalRef.current.getBoundingClientRect().width);
+    }
+  }, [internalRef]);
+  return /*#__PURE__*/createElement(Trigger$1, Object.assign({}, props, {
+    asChild: true,
+    ref: internalRef,
+    onKeyDown: handleKeyDown
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Menu/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useCurrentMenu } from '../Context';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { isElementInsideTable3OrReport } from '../../../utils/dom';\n\nexport type MenuTriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> & {\n    children: React.ReactElement;\n};\n\nexport const Trigger = React.forwardRef(function MenuTrigger(props: MenuTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const menu = useCurrentMenu();\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown') {\n            if (isElementInsideTable3OrReport(event.currentTarget)) {\n                event.preventDefault();\n                event.currentTarget.parentNode?.dispatchEvent(\n                    createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>)\n                );\n            }\n        }\n    };\n\n    React.useEffect(() => {\n        if (internalRef.current) {\n            menu?.setMinWidth(internalRef.current.getBoundingClientRect().width);\n        }\n    }, [internalRef]);\n\n    return <DropdownMenuPrimitive.Trigger {...props} asChild ref={internalRef} onKeyDown={handleKeyDown} />;\n});\n"],"names":["Trigger","React","MenuTrigger","props","ref","menu","useCurrentMenu","internalRef","useMergedRef","handleKeyDown","event","key","isElementInsideTable3OrReport","currentTarget","_event$currentTarget$","preventDefault","parentNode","dispatchEvent","createCustomKeyboardEvent","current","setMinWidth","getBoundingClientRect","width","DropdownMenuPrimitive","asChild","onKeyDown"],"mappings":";;;;;;;MAWaA,OAAO,gBAAGC,UAAgB,CAAC,SAASC,WAAWA,CAACC,KAAuB,EAAEC,GAAiC;EACnH,MAAMC,IAAI,GAAGC,cAAc,EAAE;EAC7B,MAAMC,WAAW,GAAGC,YAAY,CAAoBJ,GAAG,CAAC;EAExD,MAAMK,aAAa,GAAIC,KAA0B;IAC7C,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;MAC3B,IAAIC,6BAA6B,CAACF,KAAK,CAACG,aAAa,CAAC,EAAE;QAAA,IAAAC,qBAAA;QACpDJ,KAAK,CAACK,cAAc,EAAE;QACtB,CAAAD,qBAAA,GAAAJ,KAAK,CAACG,aAAa,CAACG,UAAU,cAAAF,qBAAA,uBAA9BA,qBAAA,CAAgCG,aAAa,CACzCC,yBAAyB,CAACR,KAA8C,CAAC,CAC5E;;;GAGZ;EAEDT,SAAe,CAAC;IACZ,IAAIM,WAAW,CAACY,OAAO,EAAE;MACrBd,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEe,WAAW,CAACb,WAAW,CAACY,OAAO,CAACE,qBAAqB,EAAE,CAACC,KAAK,CAAC;;GAE3E,EAAE,CAACf,WAAW,CAAC,CAAC;EAEjB,oBAAON,cAACsB,SAA6B,oBAAKpB,KAAK;IAAEqB,OAAO;IAACpB,GAAG,EAAEG,WAAW;IAAEkB,SAAS,EAAEhB;KAAiB;AAC3G,CAAC;;;;"}

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

@@ -0,0 +1,30 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'clsx';
+import { Icon } from '../Icon/Icon.js';
+import { Root, Thumb } from '@radix-ui/react-switch';
+
+const ModeSwitch = /*#__PURE__*/forwardRef(function ModeSwitch(props, ref) {
+  const {
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
+  }, props.className);
+  return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "mode",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/createElement(Thumb, {
+    className: "'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  }, /*#__PURE__*/createElement(Icon, {
+    name: "edit-simple",
+    className: "!h-5 !w-5"
+  })));
+});
+ModeSwitch.displayName = 'ModeSwitch';
+
+export { ModeSwitch };
+//# sourceMappingURL=ModeSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModeSwitch.js","sources":["../../../../../../../src/components/ModeSwitch/ModeSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\nimport { Icon } from '../Icon/Icon';\n\ntype ModeSwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledModeSwitchProps extends ModeSwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledModeSwitchProps extends ModeSwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type ModeSwitchProps = UncontrolledModeSwitchProps | ControlledModeSwitchProps;\n\nexport const ModeSwitch = React.forwardRef(function ModeSwitch(props: ModeSwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1',\n        {\n            'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,\n            'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled,\n        },\n        props.className\n    );\n\n    return (\n        <PrimitiveSwitch.Root {...otherProps} className={className} data-taco=\"mode\" onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]\">\n                <Icon name=\"edit-simple\" className=\"!h-5 !w-5\" />\n            </PrimitiveSwitch.Thumb>\n        </PrimitiveSwitch.Root>\n    );\n});\nModeSwitch.displayName = 'ModeSwitch';\n"],"names":["ModeSwitch","React","props","ref","onChange","otherProps","className","cn","disabled","PrimitiveSwitch","onCheckedChange","Icon","name","displayName"],"mappings":";;;;;MA4BaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAUA,CAACE,KAAsB,EAAEC,GAAiC;EACpH,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAEzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF;IACI,uFAAuF,EAAE,CAACL,KAAK,CAACM,QAAQ;IACxG,oEAAoE,EAAEN,KAAK,CAACM;GAC/E,EACDN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIL,cAACQ,IAAoB,oBAAKJ,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACI,eAAe,EAAEN,QAAQ;IAAED,GAAG,EAAEA;mBACzGF,cAACQ,KAAqB;IAACH,SAAS,EAAC;kBAC7BL,cAACU,IAAI;IAACC,IAAI,EAAC,aAAa;IAACN,SAAS,EAAC;IAAc,CAC7B,CACL;AAE/B,CAAC;AACDN,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}

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

@@ -0,0 +1,120 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../Icon/Icon.js';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { Treeview } from '../Treeview/Treeview.js';
+import { useDropTarget } from '../../utils/hooks/useDropTarget.js';
+
+const Item = /*#__PURE__*/React__default.forwardRef(function Item(props, ref) {
+  const {
+    active,
+    children,
+    onDrop,
+    postfix,
+    prefix,
+    role,
+    ...otherProps
+  } = props;
+  const proxyRef = useMergedRef(ref);
+  const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);
+  const isTreeitem = role === 'treeitem';
+  const className = cn('yt-navigation__item cursor-pointer', {
+    'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,
+    'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,
+    'yt-navigation__item--active': active && !isDraggedOver,
+    'bg-grey-300': isTreeitem && active && !isDraggedOver,
+    'yt-navigation__item--dropping bg-blue-500': isDraggedOver
+  }, props.className);
+  const handleClick = event => {
+    if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {
+      return;
+    }
+    if (proxyRef.current) {
+      proxyRef.current.click();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, dropTargetProps, {
+    className: className,
+    onClick: handleClick,
+    role: role
+  }), prefix && /*#__PURE__*/React__default.createElement("span", {
+    className: "yt-navigation__item__prefix flex items-center"
+  }, prefix), /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
+    className: "block flex-grow truncate",
+    ref: proxyRef
+  }), children), postfix && /*#__PURE__*/React__default.createElement("span", {
+    className: "yt-navigation__item__postfix ml-1"
+  }, postfix));
+});
+const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref) {
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
+    className: cn('w-full bg-white p-3', props.className),
+    ref: ref
+  }));
+});
+const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
+  const className = cn('flex-shrink-0 space-y-1 outline-none', {
+    'bg-white pb-2': props.fixed
+  }, typeof props.className === 'function' ? props.className(false) : props.className);
+  const title = expanded => {
+    const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
+      'mb-1': expanded,
+      'cursor-pointer hover:text-blue-500': !props.fixed
+    });
+    return /*#__PURE__*/React__default.createElement("span", {
+      className: className
+    }, typeof props.title === 'function' ? props.title(expanded) : props.title, !props.fixed && /*#__PURE__*/React__default.createElement(Icon, {
+      name: expanded ? 'chevron-up' : 'chevron-down'
+    }));
+  };
+  return /*#__PURE__*/React__default.createElement(Treeview.Group, Object.assign({}, props, {
+    className: className,
+    title: title,
+    ref: ref
+  }));
+});
+const Menu = /*#__PURE__*/React__default.forwardRef(function Menu(props, ref) {
+  const scrollableAreas = React__default.useMemo(() => {
+    const scrollableAreas = [];
+    const children = React__default.Children.toArray(props.children).filter(child => !!child);
+    children.forEach(child => {
+      if (child.props.fixed) {
+        scrollableAreas.push(child);
+      } else {
+        const x = scrollableAreas[scrollableAreas.length - 1];
+        if (Array.isArray(x)) {
+          x.push(child);
+        } else {
+          scrollableAreas.push([child]);
+        }
+      }
+    });
+    return scrollableAreas;
+  }, [props.children]);
+  return /*#__PURE__*/React__default.createElement(Treeview, Object.assign({}, props, {
+    className: cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className),
+    ref: ref
+  }), scrollableAreas.map((area, i) => Array.isArray(area) ? (/*#__PURE__*/React__default.createElement("div", {
+    className: "divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto",
+    key: i
+  }, area)) : area));
+});
+Menu.Group = MenuGroup;
+const Navigation = /*#__PURE__*/React__default.forwardRef(function Navigation(props, ref) {
+  const {
+    children,
+    ...otherProps
+  } = props;
+  const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "navigation",
+    ref: ref
+  }), children);
+});
+Navigation.Menu = Menu;
+Navigation.Item = Item;
+Navigation.Panel = Panel;
+
+export { Navigation };
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useMergedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-300': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-300': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue-500': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        typeof props.className === 'function' ? props.className(false) : props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue-500': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: React.ReactNode[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-100 flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-100 flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-100 divide-y-2 divide-grey-100', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useMergedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Group } from './components/Group.js';
+import { Link } from './components/Link.js';
+export { getNavigationLinkClasses } from './components/Link.js';
+import { Section } from './components/Section.js';
+import { Content } from './components/Content.js';
+
+const Navigation2 = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
+  const {
+    children,
+    ...attributes
+  } = props;
+  const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-grey-50', props.className);
+  return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2",
+    ref: ref,
+    role: "menubar",
+    style: {
+      opacity: 0.999
+    }
+  }), children);
+});
+Navigation2.Group = Group;
+Navigation2.Link = Link;
+Navigation2.Section = Section;
+Navigation2.Content = Content;
+
+export { Navigation2 };
+//# sourceMappingURL=Navigation2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation2.js","sources":["../../../../../../../src/components/Navigation2/Navigation2.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Section } from './components/Section';\nimport { Content } from './components/Content';\n\nexport type Navigation2Props = React.HTMLAttributes<HTMLUListElement>;\n\nexport const Navigation2 = React.forwardRef<HTMLUListElement, Navigation2Props>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn('m-0 py-2 flex flex-col gap-y-px overflow-auto h-full w-full bg-grey-50', props.className);\n\n    return (\n        <ul {...attributes} className={className} data-taco=\"navigation2\" ref={ref} role=\"menubar\" style={{ opacity: 0.999 }}>\n            {children}\n        </ul>\n    );\n}) as React.ForwardRefExoticComponent<Navigation2Props> & {\n    Group: typeof Group;\n    Link: typeof Link;\n    Section: typeof Section;\n    Content: typeof Content;\n};\n\nNavigation2.Group = Group;\nNavigation2.Link = Link;\nNavigation2.Section = Section;\nNavigation2.Content = Content;\n\nexport { getNavigationLinkClasses } from './components/Link';\n\nexport type { Navigation2ContentProps } from './components/Content';\nexport type { Navigation2GroupProps } from './components/Group';\nexport type { Navigation2LinkProps } from './components/Link';\nexport type { Navigation2SectionProps } from './components/Section';\n"],"names":["Navigation2","React","forwardRef","props","ref","children","attributes","className","cn","role","style","opacity","Group","Link","Section","Content"],"mappings":";;;;;;;;MASaA,WAAW,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,WAAWA,CAACG,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAAC,wEAAwE,EAAEL,KAAK,CAACI,SAAS,CAAC;EAE/G,oBACIN,qDAAQK,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACH,GAAG,EAAEA,GAAG;IAAEK,IAAI,EAAC,SAAS;IAACC,KAAK,EAAE;MAAEC,OAAO,EAAE;;MACxGN,QAAQ,CACR;AAEb,CAAC;AAODL,WAAW,CAACY,KAAK,GAAGA,KAAK;AACzBZ,WAAW,CAACa,IAAI,GAAGA,IAAI;AACvBb,WAAW,CAACc,OAAO,GAAGA,OAAO;AAC7Bd,WAAW,CAACe,OAAO,GAAGA,OAAO;;;;"}

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { getAdjacentClasses } from './util.js';
+
+const Content = /*#__PURE__*/React__default.forwardRef(function Navigation2(props, ref) {
+  const {
+    children,
+    ...attributes
+  } = props;
+  const className = cn('w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50 [[role=menubar]>&:last-child]:pb-0', getAdjacentClasses(), props.className);
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
+    className: className,
+    "data-taco": "navigation2-content",
+    ref: ref,
+    role: "none"
+  }), children);
+});
+
+export { Content };
+//# sourceMappingURL=Content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Navigation2/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { getAdjacentClasses } from './util';\n\nexport type Navigation2ContentProps = React.LiHTMLAttributes<HTMLLIElement>;\n\nexport const Content = React.forwardRef<HTMLLIElement, Navigation2ContentProps>(function Navigation2(props, ref) {\n    const { children, ...attributes } = props;\n    const className = cn(\n        'w-full overflow-auto p-3 mt-auto border-grey-200 flex-shrink-0 z-10 bg-grey-50 [[role=menubar]>&:last-child]:pb-0',\n        getAdjacentClasses(),\n        props.className\n    );\n\n    return (\n        <li {...attributes} className={className} data-taco=\"navigation2-content\" ref={ref} role=\"none\">\n            {children}\n        </li>\n    );\n});\n"],"names":["Content","React","forwardRef","Navigation2","props","ref","children","attributes","className","cn","getAdjacentClasses","role"],"mappings":";;;;MAMaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,WAAWA,CAACC,KAAK,EAAEC,GAAG;EAC3G,MAAM;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACzC,MAAMI,SAAS,GAAGC,EAAE,CAChB,mHAAmH,EACnHC,kBAAkB,EAAE,EACpBN,KAAK,CAACI,SAAS,CAClB;EAED,oBACIP,qDAAQM,UAAU;IAAEC,SAAS,EAAEA,SAAS;iBAAY,qBAAqB;IAACH,GAAG,EAAEA,GAAG;IAAEM,IAAI,EAAC;MACpFL,QAAQ,CACR;AAEb,CAAC;;;;"}

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

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../Icon/Icon.js';
+
+const Group = /*#__PURE__*/React__default.forwardRef(function Group(props, ref) {
+  const {
+    children,
+    defaultExpanded = false,
+    heading,
+    onClick,
+    ...attributes
+  } = props;
+  const [expanded, setExpanded] = React__default.useState(defaultExpanded);
+  const className = cn('flex w-full cursor-pointer items-center rounded px-3 font-bold text-left leading-8 hover:bg-black/[.06] focus-visible:yt-focus-dark', attributes.className);
+  const handleClick = event => {
+    setExpanded(!expanded);
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("li", Object.assign({}, attributes, {
+    role: "none",
+    className: "[[role=menubar]>&]:px-3",
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("button", {
+    "aria-haspopup": "true",
+    "aria-expanded": expanded,
+    "data-taco": "navigation2-group",
+    className: className,
+    onClick: handleClick,
+    role: "menuitem"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "-ml-2 !h-5 !w-5",
+    name: expanded ? 'chevron-down-solid' : 'chevron-right-solid'
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "flex-grow truncate"
+  }, heading)), /*#__PURE__*/React__default.createElement("ul", {
+    className: cn('mb-0 flex flex-col gap-y-px pt-px', {
+      hidden: !expanded
+    }),
+    role: "menu"
+  }, children));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map