@dxos/react-ui 0.1.0

package/dist/src/components/Loading/Loading.js

@@ -0,0 +1,29 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../hooks");
+const sizeMap = new Map([
+    ['sm', 'w-4 h-4'],
+    ['md', 'w-8 h-8'],
+    ['lg', 'w-12 h-12'],
+    ['xl', 'w-16 h-16']
+]);
+const Loading = ({ size, color, className, label }) => {
+    const labelId = (0, hooks_1.useId)('loading-label');
+    const sizeClassName = sizeMap.get(size !== null && size !== void 0 ? size : 'md');
+    return (react_1.default.createElement("div", { role: 'status', className: (0, classnames_1.default)('flex justify-center p-4', className), "aria-labelledby": labelId },
+        react_1.default.createElement("svg", { role: 'none', "aria-hidden": 'true', className: (0, classnames_1.default)(sizeClassName, 'text-neutral-200/50 animate-spin dark:text-neutral-600/50', color === 'neutral' ? 'fill-neutral-400' : 'fill-primary-400'), viewBox: '0 0 100 101', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+            react_1.default.createElement("path", { d: 'M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z', fill: 'currentColor' }),
+            react_1.default.createElement("path", { d: 'M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z', fill: 'currentFill' })),
+        react_1.default.createElement("span", { className: 'sr-only', id: labelId }, label)));
+};
+exports.Loading = Loading;
+//# sourceMappingURL=Loading.js.map

package/dist/src/components/Loading/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../../src/components/Loading/Loading.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAC5B,kDAA0B;AAE1B,uCAAoC;AAapC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAsB;IAC3C,CAAC,IAAI,EAAE,SAAS,CAAC;IACjB,CAAC,IAAI,EAAE,SAAS,CAAC;IACjB,CAAC,IAAI,EAAE,WAAW,CAAC;IACnB,CAAC,IAAI,EAAE,WAAW,CAAC;CACpB,CAAC,CAAC;AAEI,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAoC,EAAE,EAAE;IAC7F,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,eAAe,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,IAAI,CAAC,CAAC;IAChD,OAAO,CACL,uCAAK,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,qBAAmB,OAAO;QAC9F,uCACE,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,SAAS,EAAE,IAAA,oBAAE,EACX,aAAa,EACb,2DAA2D,EAC3D,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,kBAAkB,CAC9D,EACD,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;YAElC,wCACE,CAAC,EAAC,8WAA8W,EAChX,IAAI,EAAC,cAAc,GACnB;YACF,wCACE,CAAC,EAAC,+kBAA+kB,EACjlB,IAAI,EAAC,aAAa,GAClB,CACE;QACN,wCAAM,SAAS,EAAC,SAAS,EAAC,EAAE,EAAE,OAAO,IAClC,KAAK,CACD,CACH,CACP,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB"}

package/dist/src/components/Loading/Loading.stories.d.ts

@@ -0,0 +1,25 @@
+import '@dxosTheme';
+import { LoadingProps } from './Loading';
+declare const _default: {
+    title: string;
+    component: ({ size, color, className, label }: LoadingProps & {
+        label: string;
+    }) => JSX.Element;
+    argTypes: {
+        size: {
+            control: string;
+            options: string[];
+        };
+        color: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const Default: import("@storybook/react").Story<LoadingProps>;
+export declare const Small: () => JSX.Element;
+export declare const Neutral: () => JSX.Element;
+export declare const Large: () => JSX.Element;
+export declare const ExtraLarge: () => JSX.Element;
+//# sourceMappingURL=Loading.stories.d.ts.map

package/dist/src/components/Loading/Loading.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Loading/Loading.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;;;;;;;;;;;;;;;;;AAElD,wBAaE;AAIF,eAAO,MAAM,OAAO,gDAAuD,CAAC;AAG5E,eAAO,MAAM,KAAK,mBAAiD,CAAC;AACpE,eAAO,MAAM,OAAO,mBAAuD,CAAC;AAC5E,eAAO,MAAM,KAAK,mBAAiD,CAAC;AACpE,eAAO,MAAM,UAAU,mBAAiD,CAAC"}

package/dist/src/components/Loading/Loading.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtraLarge = exports.Large = exports.Neutral = exports.Small = exports.Default = void 0;
+require("@dxosTheme");
+const react_1 = __importDefault(require("react"));
+const testing_1 = require("../../testing");
+const Loading_1 = require("./Loading");
+exports.default = {
+    title: 'react-ui/Loading',
+    component: Loading_1.Loading,
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg', 'xl']
+        },
+        color: {
+            control: 'select',
+            options: ['primary', 'neutral']
+        }
+    }
+};
+const Template = (props) => react_1.default.createElement(Loading_1.Loading, { ...props });
+exports.Default = (0, testing_1.templateForComponent)(Template)({ label: 'Loading' });
+exports.Default.args = { label: 'Loading', size: 'md', color: 'primary' };
+const Small = () => react_1.default.createElement(Template, { label: 'Loading', size: 'sm' });
+exports.Small = Small;
+const Neutral = () => react_1.default.createElement(Template, { label: 'Loading', color: 'neutral' });
+exports.Neutral = Neutral;
+const Large = () => react_1.default.createElement(Template, { label: 'Loading', size: 'lg' });
+exports.Large = Large;
+const ExtraLarge = () => react_1.default.createElement(Template, { label: 'Loading', size: 'xl' });
+exports.ExtraLarge = ExtraLarge;
+//# sourceMappingURL=Loading.stories.js.map

package/dist/src/components/Loading/Loading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.stories.js","sourceRoot":"","sources":["../../../../src/components/Loading/Loading.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,uCAAkD;AAElD,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,iBAAO;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SAClC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;SAChC;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAmB,EAAE,EAAE,CAAC,8BAAC,iBAAO,OAAK,KAAK,GAAI,CAAC;AAEpD,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAC5E,eAAO,CAAC,IAAI,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;AAE3D,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,8BAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;AAAvD,QAAA,KAAK,SAAkD;AAC7D,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,8BAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,SAAS,GAAI,CAAC;AAA/D,QAAA,OAAO,WAAwD;AACrE,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,8BAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;AAAvD,QAAA,KAAK,SAAkD;AAC7D,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,8BAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAI,CAAC;AAA5D,QAAA,UAAU,cAAkD"}

package/dist/src/components/Loading/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Loading';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/Loading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Loading/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/src/components/Loading/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Loading"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/Loading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Loading/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,4CAA0B"}

package/dist/src/components/NavMenu/NavMenu.d.ts

@@ -0,0 +1,31 @@
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import React, { ComponentProps, ReactNode } from 'react';
+import { TooltipProps } from '../Tooltip';
+interface NavMenuItemSharedProps {
+    children: ReactNode;
+    active?: boolean;
+    separator?: false;
+}
+export interface NavMenuLinkItemProps extends NavMenuItemSharedProps {
+    triggerLinkProps: Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, 'children'>;
+    children: ReactNode;
+}
+export interface NavMenuTooltipLinkItemProps extends NavMenuLinkItemProps {
+    tooltip: Omit<TooltipProps, 'children'>;
+}
+export interface NavMenuInvokerItemProps extends NavMenuItemSharedProps {
+    content: ReactNode;
+    children: ReactNode;
+}
+export interface NavMenuSeparatorProps {
+    separator: true;
+}
+export declare type NavMenuItem = NavMenuTooltipLinkItemProps | NavMenuLinkItemProps | NavMenuInvokerItemProps | NavMenuSeparatorProps;
+export interface NavMenuProps extends ComponentProps<typeof NavigationMenuPrimitive.Root> {
+    items: NavMenuItem[];
+}
+export declare const NavMenuLink: React.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const NavMenuSeparatorItem: (_props: NavMenuSeparatorProps) => JSX.Element;
+export declare const NavMenu: ({ items, ...rootProps }: NavMenuProps) => JSX.Element;
+export {};
+//# sourceMappingURL=NavMenu.d.ts.map

package/dist/src/components/NavMenu/NavMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/NavMenu/NavMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAC;AAE3E,OAAO,KAAK,EAAE,EAAE,cAAc,EAA4B,SAAS,EAAE,MAAM,OAAO,CAAC;AAInF,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,sBAAsB;IAClE,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACxF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;IACvE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,IAAI,CAAC;CACjB;AAED,oBAAY,WAAW,GACnB,2BAA2B,GAC3B,oBAAoB,GACpB,uBAAuB,GACvB,qBAAqB,CAAC;AAE1B,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC;IACvF,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AA6ED,eAAO,MAAM,WAAW,2HAA+B,CAAC;AAExD,eAAO,MAAM,oBAAoB,WAAY,qBAAqB,gBAEjE,CAAC;AAMF,eAAO,MAAM,OAAO,4BAA6B,YAAY,gBAgD5D,CAAC"}

package/dist/src/components/NavMenu/NavMenu.js

@@ -0,0 +1,71 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavMenu = exports.NavMenuSeparatorItem = exports.NavMenuLink = void 0;
+const NavigationMenuPrimitive = __importStar(require("@radix-ui/react-navigation-menu"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const styles_1 = require("../../styles");
+const Button_1 = require("../Button");
+const Tooltip_1 = require("../Tooltip");
+const NavMenuInvokerItem = (0, react_1.forwardRef)(({ content, children, active }, ref) => {
+    return (react_1.default.createElement(NavigationMenuPrimitive.Item, { ref: ref },
+        react_1.default.createElement(NavigationMenuPrimitive.Trigger, { className: (0, classnames_1.default)('px-3 py-2 text-sm rounded-md text-sm font-medium transition-color', active ? Button_1.primaryButtonColors : Button_1.defaultButtonColors, styles_1.defaultFocus, (0, styles_1.defaultHover)({})) }, children),
+        react_1.default.createElement(NavigationMenuPrimitive.Content, { className: (0, classnames_1.default)('absolute w-auto top-0 left-0 rounded-lg', 'radix-motion-from-start:animate-enter-from-left', 'radix-motion-from-end:animate-enter-from-right', 'radix-motion-to-start:animate-exit-to-left', 'radix-motion-to-end:animate-exit-to-right') }, content)));
+});
+const NavMenuLinkItem = (0, react_1.forwardRef)(({ triggerLinkProps, children, active }, ref) => (react_1.default.createElement(NavigationMenuPrimitive.Item, { asChild: true, ref: ref },
+    react_1.default.createElement(NavigationMenuPrimitive.Link, { ...triggerLinkProps, active: active, className: (0, classnames_1.default)('px-3 py-2 text-sm rounded-md transition-color', active ? Button_1.primaryButtonColors : Button_1.defaultButtonColors, active ? 'font-medium' : 'font-normal', styles_1.defaultFocus, (0, styles_1.defaultHover)({}), triggerLinkProps.className) }, children))));
+const NavMenuTooltipLinkItem = (0, react_1.forwardRef)(({ tooltip, triggerLinkProps, active, children }, ref) => (react_1.default.createElement(Tooltip_1.Tooltip, { ...tooltip },
+    react_1.default.createElement(NavigationMenuPrimitive.Item, { asChild: true, ref: ref },
+        react_1.default.createElement(NavigationMenuPrimitive.Link, { ...triggerLinkProps, active: active, className: (0, classnames_1.default)('px-3 py-2 text-sm rounded-md transition-color', active ? Button_1.primaryButtonColors : Button_1.defaultButtonColors, active ? 'font-medium' : 'font-normal', styles_1.defaultFocus, (0, styles_1.defaultHover)({}), triggerLinkProps.className) }, children)))));
+exports.NavMenuLink = NavigationMenuPrimitive.Link;
+const NavMenuSeparatorItem = (_props) => {
+    return react_1.default.createElement("span", { role: 'none', className: (0, classnames_1.default)(styles_1.defaultInlineSeparator, 'bs-5') });
+};
+exports.NavMenuSeparatorItem = NavMenuSeparatorItem;
+const isTooltipLinkItem = (o) => 'tooltip' in o;
+const isLinkItem = (o) => 'triggerLinkProps' in o;
+const isSeparator = (o) => 'separator' in o;
+const NavMenu = ({ items, ...rootProps }) => {
+    return (react_1.default.createElement(NavigationMenuPrimitive.Root, { ...rootProps, className: (0, classnames_1.default)('flex justify-center', rootProps.className) },
+        react_1.default.createElement(NavigationMenuPrimitive.List, { className: 'relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto' },
+            items.map((item, i) => {
+                return isTooltipLinkItem(item) ? (react_1.default.createElement(NavMenuTooltipLinkItem, { key: i, ...item })) : isLinkItem(item) ? (react_1.default.createElement(NavMenuLinkItem, { key: i, ...item })) : isSeparator(item) ? (react_1.default.createElement(exports.NavMenuSeparatorItem, { key: i, ...item })) : (react_1.default.createElement(NavMenuInvokerItem, { key: i, ...item }));
+            }),
+            react_1.default.createElement(NavigationMenuPrimitive.Indicator, { className: (0, classnames_1.default)('z-10', 'top-[100%] flex items-end justify-center h-2 overflow-hidden', 'radix-state-visible:animate-fade-in', 'radix-state-hidden:animate-fade-out', 'transition-[width_transform] duration-[250ms] ease-[ease]') },
+                react_1.default.createElement("div", { className: 'top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45' }))),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('absolute flex justify-center', 'w-[140%] left-[-20%] top-[100%]'), style: {
+                perspective: '2000px'
+            } },
+            react_1.default.createElement(NavigationMenuPrimitive.Viewport, { className: (0, classnames_1.default)('relative mt-2 shadow-lg rounded-md bg-white dark:bg-neutral-750 overflow-hidden', 'w-radix-navigation-menu-viewport', 'h-radix-navigation-menu-viewport', 'radix-state-open:animate-scale-in-content', 'radix-state-closed:animate-scale-out-content', 'origin-[top_center] transition-[width_height] duration-300 ease-[ease]') }))));
+};
+exports.NavMenu = NavMenu;
+//# sourceMappingURL=NavMenu.js.map

package/dist/src/components/NavMenu/NavMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.js","sourceRoot":"","sources":["../../../../src/components/NavMenu/NavMenu.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/NavMenu/NavMenu.stories.d.ts

@@ -0,0 +1,9 @@
+import '@dxosTheme';
+import { NavMenuProps } from './NavMenu';
+declare const _default: {
+    title: string;
+    component: ({ items, ...rootProps }: NavMenuProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: import("@storybook/react").Story<NavMenuProps>;
+//# sourceMappingURL=NavMenu.stories.d.ts.map

package/dist/src/components/NavMenu/NavMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/NavMenu/NavMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;;;;;AAElD,wBAGE;AAMF,eAAO,MAAM,OAAO,gDAAgD,CAAC"}

package/dist/src/components/NavMenu/NavMenu.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+require("@dxosTheme");
+const react_1 = __importDefault(require("react"));
+const testing_1 = require("../../testing");
+const NavMenu_1 = require("./NavMenu");
+exports.default = {
+    title: 'react-ui/NavMenu',
+    component: NavMenu_1.NavMenu
+};
+const Template = (props) => {
+    return react_1.default.createElement(NavMenu_1.NavMenu, { ...props });
+};
+exports.Default = (0, testing_1.templateForComponent)(Template)({ items: [] });
+exports.Default.args = {
+    items: [
+        {
+            triggerLinkProps: { href: '#Hello' },
+            children: 'Hello',
+            active: true
+        },
+        {
+            children: 'How’s it going?',
+            content: (react_1.default.createElement("div", { className: 'w-[21rem] lg:w-[23rem] p-3' },
+                react_1.default.createElement("div", { className: 'grid grid-cols-6 gap-4' },
+                    react_1.default.createElement("div", { className: 'col-span-2 w-full bg-gray-100 dark:bg-gray-900 p-4 rounded-md' }),
+                    react_1.default.createElement("div", { className: 'col-span-4 w-full flex flex-col space-y-3 bg-gray-100 dark:bg-gray-900 p-4 rounded-md' },
+                        react_1.default.createElement("div", { className: 'w-full bg-white dark:bg-gray-700 h-12 rounded-md' }),
+                        react_1.default.createElement("div", { className: 'w-full bg-white dark:bg-gray-700 h-12 rounded-md' }),
+                        react_1.default.createElement("div", { className: 'w-full bg-white dark:bg-gray-700 h-12 rounded-md' }),
+                        react_1.default.createElement("div", { className: 'w-full bg-white dark:bg-gray-700 h-12 rounded-md' })))))
+        },
+        {
+            triggerLinkProps: { href: '#Goodbye' },
+            tooltip: {
+                content: 'More info about Goodbye',
+                sideOffset: 8
+            },
+            children: 'Goodbye'
+        }
+    ]
+};
+//# sourceMappingURL=NavMenu.stories.js.map

package/dist/src/components/NavMenu/NavMenu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.stories.js","sourceRoot":"","sources":["../../../../src/components/NavMenu/NavMenu.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,uCAAkD;AAElD,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,iBAAO;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAmB,EAAE,EAAE;IACvC,OAAO,8BAAC,iBAAO,OAAK,KAAK,GAAI,CAAC;AAChC,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACrE,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL;YACE,gBAAgB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YACpC,QAAQ,EAAE,OAAO;YACjB,MAAM,EAAE,IAAI;SACb;QACD;YACE,QAAQ,EAAE,iBAAiB;YAC3B,OAAO,EAAE,CACP,uCAAK,SAAS,EAAC,4BAA4B;gBACzC,uCAAK,SAAS,EAAC,wBAAwB;oBACrC,uCAAK,SAAS,EAAC,+DAA+D,GAAO;oBAErF,uCAAK,SAAS,EAAC,uFAAuF;wBACpG,uCAAK,SAAS,EAAC,kDAAkD,GAAO;wBACxE,uCAAK,SAAS,EAAC,kDAAkD,GAAO;wBACxE,uCAAK,SAAS,EAAC,kDAAkD,GAAO;wBACxE,uCAAK,SAAS,EAAC,kDAAkD,GAAO,CACpE,CACF,CACF,CACP;SACF;QACD;YACE,gBAAgB,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE;YACtC,OAAO,EAAE;gBACP,OAAO,EAAE,yBAAyB;gBAClC,UAAU,EAAE,CAAC;aACd;YACD,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAC"}

package/dist/src/components/NavMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/NavMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/NavMenu/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/src/components/NavMenu/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NavMenu"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/NavMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/NavMenu/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,4CAA0B"}

package/dist/src/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { ComponentProps, ReactNode } from 'react';
+export interface PopoverProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'children'> {
+    openTrigger: ReactNode;
+    children: ReactNode;
+    closeLabel?: string;
+    initiallyOpen?: boolean;
+    mountAsSibling?: boolean;
+}
+export declare const Popover: ({ openTrigger, children, closeLabel, initiallyOpen, mountAsSibling, ...contentProps }: PopoverProps) => JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/src/components/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAG5D,OAAc,EAAE,cAAc,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAIhF,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrG,WAAW,EAAE,SAAS,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,eAAO,MAAM,OAAO,0FAOjB,YAAY,gBA+Cd,CAAC"}

package/dist/src/components/Popover/Popover.js

@@ -0,0 +1,56 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
+const classnames_1 = __importDefault(require("classnames"));
+const phosphor_react_1 = require("phosphor-react");
+const react_1 = __importStar(require("react"));
+const styles_1 = require("../../styles");
+const Popover = ({ openTrigger, children, closeLabel, initiallyOpen, mountAsSibling, ...contentProps }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(!!initiallyOpen);
+    const onKeyUp = (0, react_1.useCallback)((e) => {
+        const keyUpId = document.activeElement.dataset.keyupid;
+        if (keyUpId && e.key === ' ') {
+            setIsOpen(keyUpId === 'open');
+        }
+    }, []);
+    const popoverContent = (react_1.default.createElement(PopoverPrimitive.Content, { align: 'center', ...contentProps, className: (0, classnames_1.default)('radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down', 'rounded-lg p-4 shadow-xl elevated-buttons', 'bg-white dark:bg-neutral-800', styles_1.defaultFocus, contentProps.className) },
+        react_1.default.createElement(PopoverPrimitive.Arrow, { className: 'fill-current text-white dark:text-neutral-800' }),
+        children,
+        closeLabel && (react_1.default.createElement(PopoverPrimitive.Close, { className: (0, classnames_1.default)('absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1', styles_1.defaultFocus, (0, styles_1.defaultHover)({})), "aria-label": closeLabel, "data-keyupid": 'close' },
+            react_1.default.createElement(phosphor_react_1.X, { className: 'h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400' })))));
+    return (react_1.default.createElement(PopoverPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen },
+        react_1.default.createElement(PopoverPrimitive.Trigger, { asChild: true, onKeyUp: onKeyUp, "data-keyupid": 'open' }, openTrigger),
+        mountAsSibling ? popoverContent : react_1.default.createElement(PopoverPrimitive.Portal, null, popoverContent)));
+};
+exports.Popover = Popover;
+//# sourceMappingURL=Popover.js.map

package/dist/src/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,0EAA4D;AAC5D,4DAA4B;AAC5B,mDAAmC;AACnC,+CAAgF;AAEhF,yCAA0D;AAYnD,MAAM,OAAO,GAAG,CAAC,EACtB,WAAW,EACX,QAAQ,EACR,UAAU,EACV,aAAa,EACb,cAAc,EACd,GAAG,YAAY,EACF,EAAE,EAAE;IACjB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,CAAC,CAAa,EAAE,EAAE;QAC5C,MAAM,OAAO,GAAI,QAAQ,CAAC,aAA6B,CAAC,OAAO,CAAC,OAAO,CAAC;QACxE,IAAI,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YAC5B,SAAS,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,CACrB,8BAAC,gBAAgB,CAAC,OAAO,IACvB,KAAK,EAAC,QAAQ,KACV,YAAY,EAChB,SAAS,EAAE,IAAA,oBAAE,EACX,sEAAsE,EACtE,2CAA2C,EAC3C,8BAA8B,EAC9B,qBAAY,EACZ,YAAY,CAAC,SAAS,CACvB;QAED,8BAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,+CAA+C,GAAG;QACnF,QAAQ;QACR,UAAU,IAAI,CACb,8BAAC,gBAAgB,CAAC,KAAK,IACrB,SAAS,EAAE,IAAA,oBAAE,EACX,mFAAmF,EACnF,qBAAY,EACZ,IAAA,qBAAY,EAAC,EAAE,CAAC,CACjB,gBACW,UAAU,kBACT,OAAO;YAEpB,8BAAC,kBAAC,IAAC,SAAS,EAAC,mGAAmG,GAAG,CAC5F,CAC1B,CACwB,CAC5B,CAAC;IAEF,OAAO,CACL,8BAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS;QAC1D,8BAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,QAAC,OAAO,EAAE,OAAO,kBAAe,MAAM,IACpE,WAAW,CACa;QAC1B,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,8BAAC,gBAAgB,CAAC,MAAM,QAAE,cAAc,CAA2B,CAChF,CACzB,CAAC;AACJ,CAAC,CAAC;AAtDW,QAAA,OAAO,WAsDlB"}

package/dist/src/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,10 @@
+import '@dxosTheme';
+import { PopoverProps } from './Popover';
+declare const _default: {
+    title: string;
+    component: ({ openTrigger, children, closeLabel, initiallyOpen, mountAsSibling, ...contentProps }: PopoverProps) => JSX.Element;
+};
+export default _default;
+export declare const Default: import("@storybook/react").Story<PopoverProps>;
+export declare const AvatarTrigger: import("@storybook/react").Story<PopoverProps>;
+//# sourceMappingURL=Popover.stories.d.ts.map

package/dist/src/components/Popover/Popover.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAW,YAAY,EAAE,MAAM,WAAW,CAAC;;;;;AAElD,wBAGE;AAMF,eAAO,MAAM,OAAO,gDAIlB,CAAC;AAMH,eAAO,MAAM,aAAa,gDAWxB,CAAC"}

package/dist/src/components/Popover/Popover.stories.js

@@ -0,0 +1,39 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarTrigger = exports.Default = void 0;
+require("@dxosTheme");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../styles");
+const testing_1 = require("../../testing");
+const Avatar_1 = require("../Avatar");
+const Button_1 = require("../Button");
+const Popover_1 = require("./Popover");
+exports.default = {
+    title: 'react-ui/Popover',
+    component: Popover_1.Popover
+};
+const Template = ({ children, ...props }) => {
+    return react_1.default.createElement(Popover_1.Popover, { ...props }, children);
+};
+exports.Default = (0, testing_1.templateForComponent)(Template)({
+    openTrigger: '',
+    closeLabel: '',
+    children: ''
+});
+exports.Default.args = {
+    openTrigger: react_1.default.createElement(Button_1.Button, null, "Open popover"),
+    children: 'Popover content'
+};
+exports.AvatarTrigger = (0, testing_1.templateForComponent)(Template)({
+    openTrigger: (react_1.default.createElement(Avatar_1.Avatar, { tabIndex: 0, label: react_1.default.createElement("span", { className: 'sr-only' }, "Open popover"), fallbackValue: 'open popover', className: (0, classnames_1.default)('button-elevation cursor-pointer rounded-md', (0, styles_1.defaultHover)({}), styles_1.defaultFocus, styles_1.defaultActive) })),
+    closeLabel: 'Close',
+    children: 'Popover content'
+});
+//# sourceMappingURL=Popover.stories.js.map

package/dist/src/components/Popover/Popover.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,4DAA4B;AAC5B,kDAA0B;AAE1B,yCAAyE;AACzE,2CAAqD;AACrD,sCAAmC;AACnC,sCAAmC;AACnC,uCAAkD;AAElD,kBAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,iBAAO;CACnB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACxD,OAAO,8BAAC,iBAAO,OAAK,KAAK,IAAG,QAAQ,CAAW,CAAC;AAClD,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC;IACpD,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE,EAAE;CACb,CAAC,CAAC;AACH,eAAO,CAAC,IAAI,GAAG;IACb,WAAW,EAAE,8BAAC,eAAM,uBAAsB;IAC1C,QAAQ,EAAE,iBAAiB;CAC5B,CAAC;AAEW,QAAA,aAAa,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC;IAC1D,WAAW,EAAE,CACX,8BAAC,eAAM,IACL,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,wCAAM,SAAS,EAAC,SAAS,mBAAoB,EACpD,aAAa,EAAC,cAAc,EAC5B,SAAS,EAAE,IAAA,oBAAE,EAAC,4CAA4C,EAAE,IAAA,qBAAY,EAAC,EAAE,CAAC,EAAE,qBAAY,EAAE,sBAAa,CAAC,GAC1G,CACH;IACD,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,iBAAiB;CAC5B,CAAC,CAAC"}

package/dist/src/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/src/components/Popover/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Popover"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Popover/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,4CAA0B"}

package/dist/src/components/QrCode/QrCode.d.ts

@@ -0,0 +1,11 @@
+import { ReactHTMLElement } from 'react';
+import { Size } from '../../props';
+import { ButtonProps } from '../Button';
+import { TooltipProps } from '../Tooltip';
+export interface QrCodeProps extends Omit<ButtonProps, 'onClick' | 'ref'>, Pick<TooltipProps, 'side' | 'sideOffset' | 'collisionPadding'> {
+    value: string;
+    label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
+    size?: Size;
+}
+export declare const QrCode: ({ value, label, size, side, sideOffset, collisionPadding, ...buttonProps }: QrCodeProps) => JSX.Element;
+//# sourceMappingURL=QrCode.d.ts.map

package/dist/src/components/QrCode/QrCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QrCode.d.ts","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.tsx"],"names":[],"mappings":"AAMA,OAAc,EAAe,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAG7D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAW,YAAY,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,KAAK,CAAC,EAC1C,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,YAAY,GAAG,kBAAkB,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC;IAC3D,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,MAAM,+EAAgF,WAAW,gBAoB7G,CAAC"}

package/dist/src/components/QrCode/QrCode.js

@@ -0,0 +1,51 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QrCode = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const qrcode_react_1 = require("qrcode.react");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../../hooks");
+const styles_1 = require("../../styles");
+const Button_1 = require("../Button");
+const Tooltip_1 = require("../Tooltip");
+const QrCode = ({ value, label, size, side, sideOffset, collisionPadding, ...buttonProps }) => {
+    const labelId = (0, hooks_1.useId)('qr-label');
+    const copyValue = (0, react_1.useCallback)(() => {
+        void navigator.clipboard.writeText(value);
+    }, [value]);
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { content: label, ...{ side, sideOffset, collisionPadding } },
+        react_1.default.createElement(Button_1.Button, { compact: true, ...buttonProps, className: (0, classnames_1.default)('overflow-hidden p-0', (0, styles_1.getSize)(size !== null && size !== void 0 ? size : 32), buttonProps.className), onClick: copyValue },
+            react_1.default.createElement(qrcode_react_1.QRCodeSVG, { value: value, includeMargin: true, role: 'none', className: 'w-full h-auto' }),
+            react_1.default.createElement("div", { id: labelId, className: 'sr-only' }, label))));
+};
+exports.QrCode = QrCode;
+//# sourceMappingURL=QrCode.js.map