@dxos/react-ui 0.1.5 → 0.1.7

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

@@ -29,23 +29,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QrCode = void 0;
+exports.QrCode = exports.CompactQrCode = exports.FullQrCode = void 0;
 const classnames_1 = __importDefault(require("classnames"));
+const phosphor_react_1 = require("phosphor-react");
 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 FullQrCode = ({ value, label, size, side, sideOffset, collisionPadding, buttonCompact = true, ...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(Button_1.Button, { compact: buttonCompact, ...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;
+exports.FullQrCode = FullQrCode;
+const CompactQrCode = ({ value, displayQrLabel, copyLabel, side, sideOffset, collisionPadding, compact, buttonCompact, ...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(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.ButtonGroup, { className: 'inline-flex grow md:hidden' },
+            react_1.default.createElement("span", { className: 'sr-only', id: labelId }, displayQrLabel),
+            react_1.default.createElement(Tooltip_1.Tooltip, { compact: true, content: react_1.default.createElement("div", { role: 'none', className: 'overflow-hidden rounded-md' },
+                    react_1.default.createElement(qrcode_react_1.QRCodeSVG, { value: value, includeMargin: true, role: 'none', className: (0, styles_1.getSize)(32) })), ...{ side: side !== null && side !== void 0 ? side : 'left', sideOffset, collisionPadding } },
+                react_1.default.createElement(Button_1.Button, { rounding: 'rounded-is-md', compact: buttonCompact, ...buttonProps, className: (0, classnames_1.default)('border-ie-0 grow', buttonProps.className), "aria-labelledby": labelId },
+                    react_1.default.createElement(phosphor_react_1.QrCode, { className: (0, styles_1.getSize)(5) }))),
+            react_1.default.createElement(Tooltip_1.Tooltip, { content: copyLabel, tooltipLabelsTrigger: true, ...{ side, sideOffset, collisionPadding } },
+                react_1.default.createElement(Button_1.Button, { rounding: 'rounded-ie-md grow', compact: buttonCompact, ...buttonProps, className: buttonProps.className, onClick: copyValue },
+                    react_1.default.createElement(phosphor_react_1.CopySimple, { className: (0, styles_1.getSize)(5) })))),
+        react_1.default.createElement(Button_1.ButtonGroup, { className: 'hidden md:inline-flex' },
+            react_1.default.createElement(Tooltip_1.Tooltip, { compact: true, content: react_1.default.createElement("div", { role: 'none', className: 'overflow-hidden rounded-md' },
+                    react_1.default.createElement(qrcode_react_1.QRCodeSVG, { value: value, includeMargin: true, role: 'none', className: (0, styles_1.getSize)(32) })), ...{ side: side !== null && side !== void 0 ? side : 'left', sideOffset, collisionPadding } },
+                react_1.default.createElement(Button_1.Button, { rounding: 'rounded-is-md', compact: buttonCompact, ...buttonProps, className: (0, classnames_1.default)('border-ie-0 flex gap-1', buttonProps.className) },
+                    react_1.default.createElement(phosphor_react_1.QrCode, { className: (0, styles_1.getSize)(5) }),
+                    displayQrLabel)),
+            react_1.default.createElement(Button_1.Button, { rounding: 'rounded-ie-md', compact: buttonCompact, ...buttonProps, className: (0, classnames_1.default)('flex gap-1', buttonProps.className), onClick: copyValue },
+                react_1.default.createElement(phosphor_react_1.CopySimple, { className: (0, styles_1.getSize)(5) }),
+                copyLabel))));
+};
+exports.CompactQrCode = CompactQrCode;
+exports.QrCode = exports.FullQrCode;
 //# sourceMappingURL=QrCode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QrCode.js","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,4DAA4B;AAC5B,+CAAyC;AACzC,+CAA6D;AAE7D,uCAAoC;AAEpC,yCAAuC;AACvC,sCAAgD;AAChD,wCAAmD;AAU5C,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,WAAW,EAAe,EAAE,EAAE;IAChH,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,UAAU,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACjC,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACZ,OAAO,CACL,8BAAC,iBAAO,IAAC,OAAO,EAAE,KAAK,KAAM,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE;QACjE,8BAAC,eAAM,IACL,OAAO,WACH,WAAW,EACf,SAAS,EAAE,IAAA,oBAAE,EAAC,qBAAqB,EAAE,IAAA,gBAAO,EAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,EAChF,OAAO,EAAE,SAAS;YAElB,8BAAC,wBAAS,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,QAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,eAAe,GAAG;YAC/E,uCAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,SAAS,IAClC,KAAK,CACF,CACC,CACD,CACX,CAAC;AACJ,CAAC,CAAC;AApBW,QAAA,MAAM,UAoBjB"}
+{"version":3,"file":"QrCode.js","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.tsx"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,10 @@
 import '@dxosTheme';
-import { QrCodeProps } from './QrCode';
+import { CompactQrCodeProps } from './QrCode';
 declare const _default: {
     title: string;
-    component: ({ value, label, size, side, sideOffset, collisionPadding, ...buttonProps }: QrCodeProps) => JSX.Element;
+    component: ({ value, label, size, side, sideOffset, collisionPadding, buttonCompact, ...buttonProps }: import("./QrCode").FullQrCodeProps) => JSX.Element;
 };
 export default _default;
-export declare const Default: import("@storybook/react").Story<QrCodeProps>;
+export declare const Default: import("@storybook/react").Story<import("./QrCode").FullQrCodeProps>;
+export declare const Compact: import("@storybook/react").Story<CompactQrCodeProps>;
 //# sourceMappingURL=QrCode.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"QrCode.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAU,WAAW,EAAE,MAAM,UAAU,CAAC;;;;;AAE/C,wBAGE;AAMF,eAAO,MAAM,OAAO,+CAGlB,CAAC"}
+{"version":3,"file":"QrCode.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAIpB,OAAO,EAAsC,kBAAkB,EAAE,MAAM,UAAU,CAAC;;;;;AAElF,wBAGE;AAUF,eAAO,MAAM,OAAO,sEAGlB,CAAC;AAMH,eAAO,MAAM,OAAO,sDAIlB,CAAC"}

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

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Compact = exports.Default = void 0;
 require("@dxosTheme");
 const react_1 = __importDefault(require("react"));
 const testing_1 = require("../../testing");
@@ -18,6 +18,9 @@ exports.default = {
 const Template = (props) => {
     return react_1.default.createElement(QrCode_1.QrCode, { ...props });
 };
+const CompactTemplate = (props) => {
+    return react_1.default.createElement(QrCode_1.CompactQrCode, { ...props });
+};
 exports.Default = (0, testing_1.templateForComponent)(Template)({
     value: '',
     label: ''
@@ -26,4 +29,14 @@ exports.Default.args = {
     label: 'Click to copy this code’s value',
     value: 'https://dxos.org'
 };
+exports.Compact = (0, testing_1.templateForComponent)(CompactTemplate)({
+    value: '',
+    copyLabel: '',
+    displayQrLabel: ''
+});
+exports.Compact.args = {
+    copyLabel: 'Copy',
+    displayQrLabel: 'Display QR',
+    value: 'https://dxos.org'
+};
 //# sourceMappingURL=QrCode.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"QrCode.stories.js","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,qCAA+C;AAE/C,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,eAAM;CAClB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE;IACtC,OAAO,8BAAC,eAAM,OAAK,KAAK,GAAI,CAAC;AAC/B,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC;IACpD,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;CACV,CAAC,CAAC;AACH,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,iCAAiC;IACxC,KAAK,EAAE,kBAAkB;CAC1B,CAAC"}
+{"version":3,"file":"QrCode.stories.js","sourceRoot":"","sources":["../../../../src/components/QrCode/QrCode.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,qCAAkF;AAElF,kBAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,eAAM;CAClB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE;IACtC,OAAO,8BAAC,eAAM,OAAK,KAAK,GAAI,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAyB,EAAE,EAAE;IACpD,OAAO,8BAAC,sBAAa,OAAK,KAAK,GAAI,CAAC;AACtC,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC;IACpD,KAAK,EAAE,EAAE;IACT,KAAK,EAAE,EAAE;CACV,CAAC,CAAC;AACH,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,iCAAiC;IACxC,KAAK,EAAE,kBAAkB;CAC1B,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,eAAe,CAAC,CAAC;IAC3D,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,EAAE;IACb,cAAc,EAAE,EAAE;CACnB,CAAC,CAAC;AACH,eAAO,CAAC,IAAI,GAAG;IACb,SAAS,EAAE,MAAM;IACjB,cAAc,EAAE,YAAY;IAC5B,KAAK,EAAE,kBAAkB;CAC1B,CAAC"}

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

@@ -3,8 +3,10 @@ import { ComponentProps, ReactNode } from 'react';
 export interface TooltipProps extends Omit<ComponentProps<typeof TooltipPrimitive.Content>, 'children'> {
     content: ReactNode;
     children: ReactNode;
+    compact?: boolean;
     tooltipLabelsTrigger?: boolean;
     mountAsSibling?: boolean;
+    zIndex?: string;
 }
-export declare const Tooltip: ({ content, children, tooltipLabelsTrigger, mountAsSibling, ...contentProps }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ content, children, compact, tooltipLabelsTrigger, mountAsSibling, zIndex, ...contentProps }: TooltipProps) => JSX.Element;
 //# sourceMappingURL=Tooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAc,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrG,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,iFAAkF,YAAY,gBAsCjH,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAE5D,OAAc,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrG,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,OAAO,kGAQjB,YAAY,gBAwCd,CAAC"}

package/dist/src/components/Tooltip/Tooltip.js

@@ -35,10 +35,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const hooks_1 = require("../../hooks");
 const styles_1 = require("../../styles");
-const Tooltip = ({ content, children, tooltipLabelsTrigger, mountAsSibling, ...contentProps }) => {
+const Tooltip = ({ content, children, compact, tooltipLabelsTrigger, mountAsSibling, zIndex = 'z-[2]', ...contentProps }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const labelId = (0, hooks_1.useId)('tooltipLabel');
-    const tooltipContent = (react_1.default.createElement(TooltipPrimitive.Content, { forceMount: true, ...contentProps, className: (0, classnames_1.default)('radix-side-top:animate-slide-down-fade', 'radix-side-right:animate-slide-left-fade', 'radix-side-bottom:animate-slide-up-fade', 'radix-side-left:animate-slide-right-fade', 'inline-flex items-center rounded-md px-4 py-2.5', 'shadow-lg bg-white dark:bg-neutral-800', !isOpen && 'sr-only', styles_1.defaultTooltip, contentProps.className) },
+    const tooltipContent = (react_1.default.createElement(TooltipPrimitive.Content, { forceMount: true, ...contentProps, className: (0, classnames_1.default)('radix-side-top:animate-slide-down-fade', 'radix-side-right:animate-slide-left-fade', 'radix-side-bottom:animate-slide-up-fade', 'radix-side-left:animate-slide-right-fade', 'inline-flex items-center rounded-md', zIndex, !compact && 'px-4 py-2.5', 'shadow-lg bg-white dark:bg-neutral-800', !isOpen && 'sr-only', styles_1.defaultTooltip, contentProps.className) },
         react_1.default.createElement(TooltipPrimitive.Arrow, { className: 'fill-current text-white dark:text-neutral-800' }),
         content));
     return (react_1.default.createElement(TooltipPrimitive.Root, { open: isOpen, onOpenChange: setIsOpen },

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,0EAA4D;AAC5D,4DAA4B;AAC5B,+CAAmE;AAEnE,uCAAoC;AACpC,yCAA8C;AASvC,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,oBAAoB,EAAE,cAAc,EAAE,GAAG,YAAY,EAAgB,EAAE,EAAE;IACpH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,CACrB,8BAAC,gBAAgB,CAAC,OAAO,IACvB,UAAU,WACN,YAAY,EAChB,SAAS,EAAE,IAAA,oBAAE,EACX,wCAAwC,EACxC,0CAA0C,EAC1C,yCAAyC,EACzC,0CAA0C,EAC1C,iDAAiD,EACjD,wCAAwC,EACxC,CAAC,MAAM,IAAI,SAAS,EACpB,uBAAc,EACd,YAAY,CAAC,SAAS,CACvB;QAED,8BAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,+CAA+C,GAAG;QACnF,OAAO,CACiB,CAC5B,CAAC;IAEF,OAAO,CACL,8BAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS;QAC1D,8BAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,WAAK,CAAC,oBAAoB,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,IAC3F,QAAQ,CACgB;QAC1B,oBAAoB,IAAI,CACvB,wCAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,SAAS,IACnC,OAAO,CACH,CACR;QACA,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,8BAAC,gBAAgB,CAAC,MAAM,IAAC,UAAU,UAAE,cAAc,CAA2B,CAC3F,CACzB,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,OAAO,WAsClB"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF,0EAA4D;AAC5D,4DAA4B;AAC5B,+CAAmE;AAEnE,uCAAoC;AACpC,yCAA8C;AAWvC,MAAM,OAAO,GAAG,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,OAAO,EACP,oBAAoB,EACpB,cAAc,EACd,MAAM,GAAG,OAAO,EAChB,GAAG,YAAY,EACF,EAAE,EAAE;IACjB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,CACrB,8BAAC,gBAAgB,CAAC,OAAO,IACvB,UAAU,WACN,YAAY,EAChB,SAAS,EAAE,IAAA,oBAAE,EACX,wCAAwC,EACxC,0CAA0C,EAC1C,yCAAyC,EACzC,0CAA0C,EAC1C,qCAAqC,EACrC,MAAM,EACN,CAAC,OAAO,IAAI,aAAa,EACzB,wCAAwC,EACxC,CAAC,MAAM,IAAI,SAAS,EACpB,uBAAc,EACd,YAAY,CAAC,SAAS,CACvB;QAED,8BAAC,gBAAgB,CAAC,KAAK,IAAC,SAAS,EAAC,+CAA+C,GAAG;QACnF,OAAO,CACiB,CAC5B,CAAC;IAEF,OAAO,CACL,8BAAC,gBAAgB,CAAC,IAAI,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS;QAC1D,8BAAC,gBAAgB,CAAC,OAAO,IAAC,OAAO,WAAK,CAAC,oBAAoB,IAAI,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,IAC3F,QAAQ,CACgB;QAC1B,oBAAoB,IAAI,CACvB,wCAAM,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,SAAS,IACnC,OAAO,CACH,CACR;QACA,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,8BAAC,gBAAgB,CAAC,MAAM,IAAC,UAAU,UAAE,cAAc,CAA2B,CAC3F,CACzB,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,OAAO,WAgDlB"}

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

@@ -2,7 +2,7 @@ import '@dxosTheme';
 import { TooltipProps } from './Tooltip';
 declare const _default: {
     title: string;
-    component: ({ content, children, tooltipLabelsTrigger, mountAsSibling, ...contentProps }: TooltipProps) => JSX.Element;
+    component: ({ content, children, compact, tooltipLabelsTrigger, mountAsSibling, zIndex, ...contentProps }: TooltipProps) => JSX.Element;
 };
 export default _default;
 export declare const Default: import("@storybook/react").Story<TooltipProps>;

package/dist/src/hooks/useId.d.ts

@@ -1,2 +1,3 @@
+export declare const randomString: (n?: number) => string;
 export declare const useId: (namespace: string, n?: number) => string;
 //# sourceMappingURL=useId.d.ts.map

package/dist/src/hooks/useId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../../src/hooks/useId.ts"],"names":[],"mappings":"AAoBA,eAAO,MAAM,KAAK,cAAe,MAAM,MAAM,MAAM,WAAyD,CAAC"}
+{"version":3,"file":"useId.d.ts","sourceRoot":"","sources":["../../../src/hooks/useId.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,wBAGL,CAAC;AAErB,eAAO,MAAM,KAAK,cAAe,MAAM,MAAM,MAAM,WAAyD,CAAC"}

package/dist/src/hooks/useId.js

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useId = void 0;
+exports.useId = exports.randomString = void 0;
 const alea_1 = __importDefault(require("alea"));
 const react_1 = require("react");
 const Alea = alea_1.default;
@@ -14,6 +14,7 @@ const prng = new Alea('@dxos/react-ui');
 const randomString = (n = 4) => prng()
     .toString(16)
     .slice(2, n + 2);
-const useId = (namespace, n) => (0, react_1.useMemo)(() => `${namespace}-${randomString(n)}`, []);
+exports.randomString = randomString;
+const useId = (namespace, n) => (0, react_1.useMemo)(() => `${namespace}-${(0, exports.randomString)(n)}`, []);
 exports.useId = useId;
 //# sourceMappingURL=useId.js.map

package/dist/src/hooks/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../../src/hooks/useId.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,gDAAwB;AACxB,iCAAgC;AAMhC,MAAM,IAAI,GAAgB,cAA8B,CAAC;AAEzD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAC7B,IAAI,EAAE;KACH,QAAQ,CAAC,EAAE,CAAC;KACZ,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAEd,MAAM,KAAK,GAAG,CAAC,SAAiB,EAAE,CAAU,EAAE,EAAE,CAAC,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,GAAG,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAAhG,QAAA,KAAK,SAA2F"}
+{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../../src/hooks/useId.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,gDAAwB;AACxB,iCAAgC;AAMhC,MAAM,IAAI,GAAgB,cAA8B,CAAC;AAEzD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC;AAEjC,MAAM,YAAY,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CACpC,IAAI,EAAE;KACH,QAAQ,CAAC,EAAE,CAAC;KACZ,KAAK,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AAHR,QAAA,YAAY,gBAGJ;AAEd,MAAM,KAAK,GAAG,CAAC,SAAiB,EAAE,CAAU,EAAE,EAAE,CAAC,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,GAAG,SAAS,IAAI,IAAA,oBAAY,EAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;AAAhG,QAAA,KAAK,SAA2F"}

package/dist/src/styles/focus.d.ts

@@ -1,3 +1,3 @@
-export declare const defaultFocus = "focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black";
+export declare const defaultFocus = "focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black";
 export declare const staticFocus = "ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black";
 //# sourceMappingURL=focus.d.ts.map

package/dist/src/styles/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,qRAC2P,CAAC;AAErR,eAAO,MAAM,WAAW,uGAC8E,CAAC"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,ySAC+Q,CAAC;AAEzS,eAAO,MAAM,WAAW,uGAC8E,CAAC"}

package/dist/src/styles/focus.js

@@ -4,6 +4,6 @@
 //
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.staticFocus = exports.defaultFocus = void 0;
-exports.defaultFocus = 'focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
+exports.defaultFocus = 'focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
 exports.staticFocus = 'ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black';
 //# sourceMappingURL=focus.js.map

package/dist/src/styles/focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,YAAY,GACvB,kRAAkR,CAAC;AAExQ,QAAA,WAAW,GACtB,oGAAoG,CAAC"}
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,YAAY,GACvB,sSAAsS,CAAC;AAE5R,QAAA,WAAW,GACtB,oGAAoG,CAAC"}

package/dist/src/styles/group.d.ts

@@ -1,5 +1,7 @@
 import { Elevation } from '../props';
-export declare const defaultGroup: ({ elevation }: {
+export declare const defaultGroup: ({ elevation, rounding, spacing }: {
     elevation: Elevation;
+    rounding?: string | undefined;
+    spacing?: string | undefined;
 }) => string;
 //# sourceMappingURL=group.d.ts.map

package/dist/src/styles/group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/styles/group.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAYrC,eAAO,MAAM,YAAY;eAAgC,SAAS;YAQjE,CAAC"}
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/styles/group.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAYrC,eAAO,MAAM,YAAY;eAKZ,SAAS;;;YAYrB,CAAC"}

package/dist/src/styles/group.js

@@ -17,8 +17,8 @@ const elevationClassNameMap = new Map([
     [5, 'shadow-xl'],
     [6, 'shadow-2xl']
 ]);
-const defaultGroup = ({ elevation }) => {
-    return (0, classnames_1.default)('rounded-lg p-4', elevation === 0
+const defaultGroup = ({ elevation, rounding, spacing }) => {
+    return (0, classnames_1.default)(rounding !== null && rounding !== void 0 ? rounding : 'rounded-lg', spacing !== null && spacing !== void 0 ? spacing : 'p-4', elevation === 0
         ? 'bg-transparent border border-neutral-200 dark:border-neutral-700'
         : 'bg-white dark:bg-neutral-800 elevated-buttons', elevationClassNameMap.get(elevation));
 };

package/dist/src/styles/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/styles/group.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAI5B,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAiB;IACpD,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,QAAQ,CAAC;IACb,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,YAAY,CAAC;CAClB,CAAC,CAAC;AAEI,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAA4B,EAAE,EAAE;IACtE,OAAO,IAAA,oBAAE,EACP,gBAAgB,EAChB,SAAS,KAAK,CAAC;QACb,CAAC,CAAC,kEAAkE;QACpE,CAAC,CAAC,+CAA+C,EACnD,qBAAqB,CAAC,GAAG,CAAC,SAAS,CAAC,CACrC,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,YAAY,gBAQvB"}
+{"version":3,"file":"group.js","sourceRoot":"","sources":["../../../src/styles/group.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAI5B,MAAM,qBAAqB,GAAG,IAAI,GAAG,CAAiB;IACpD,CAAC,CAAC,EAAE,aAAa,CAAC;IAClB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,QAAQ,CAAC;IACb,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,WAAW,CAAC;IAChB,CAAC,CAAC,EAAE,YAAY,CAAC;CAClB,CAAC,CAAC;AAEI,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,OAAO,EAKR,EAAE,EAAE;IACH,OAAO,IAAA,oBAAE,EACP,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,YAAY,EACxB,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,EAChB,SAAS,KAAK,CAAC;QACb,CAAC,CAAC,kEAAkE;QACpE,CAAC,CAAC,+CAA+C,EACnD,qBAAqB,CAAC,GAAG,CAAC,SAAS,CAAC,CACrC,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,YAAY,gBAiBvB"}

package/dist/src/styles/hover.d.ts

@@ -1,4 +1,4 @@
 export declare const defaultHover: ({ disabled }: {
     disabled?: boolean | undefined;
-}) => false | "outline outline-3 outline-transparent hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400";
+}) => false | "outline outline-3 outline-transparent hover:z-[1] hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400";
 //# sourceMappingURL=hover.d.ts.map

package/dist/src/styles/hover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../../src/styles/hover.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;mLAKxB,CAAC"}
+{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../../src/styles/hover.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;+LAKxB,CAAC"}

package/dist/src/styles/hover.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultHover = void 0;
 const defaultHover = ({ disabled }) => {
     return (!disabled &&
-        'outline outline-3 outline-transparent hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400');
+        'outline outline-3 outline-transparent hover:z-[1] hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400');
 };
 exports.defaultHover = defaultHover;
 //# sourceMappingURL=hover.js.map

package/dist/src/styles/hover.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover.js","sourceRoot":"","sources":["../../../src/styles/hover.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,QAAQ;QACT,qKAAqK,CACtK,CAAC;AACJ,CAAC,CAAC;AALW,QAAA,YAAY,gBAKvB"}
+{"version":3,"file":"hover.js","sourceRoot":"","sources":["../../../src/styles/hover.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEK,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,QAAQ;QACT,iLAAiL,CAClL,CAAC;AACJ,CAAC,CAAC;AALW,QAAA,YAAY,gBAKvB"}

package/dist/src/styles/shimmer.d.ts

@@ -1,2 +1,3 @@
-export declare const defaultShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20";
+export declare const defaultShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
+export declare const strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
 //# sourceMappingURL=shimmer.d.ts.map

package/dist/src/styles/shimmer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,iQACqO,CAAC"}
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oNACwL,CAAC;AAEpN,eAAO,MAAM,aAAa,oNACyL,CAAC"}

package/dist/src/styles/shimmer.js

@@ -3,6 +3,7 @@
 // Copyright 2022 DXOS.org
 //
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultShimmer = void 0;
-exports.defaultShimmer = 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20';
+exports.strongShimmer = exports.defaultShimmer = void 0;
+exports.defaultShimmer = 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden';
+exports.strongShimmer = 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden';
 //# sourceMappingURL=shimmer.js.map

package/dist/src/styles/shimmer.js.map

@@ -1 +1 @@
-{"version":3,"file":"shimmer.js","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,cAAc,GACzB,8PAA8P,CAAC"}
+{"version":3,"file":"shimmer.js","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,cAAc,GACzB,iNAAiN,CAAC;AAEvM,QAAA,aAAa,GACxB,iNAAiN,CAAC"}

package/dist/src/theme.css

@@ -42,6 +42,9 @@
   .elevated-buttons {
     --button-elevation: theme(boxShadow.sm);
   }
+  .grouped-buttons {
+    --button-elevation: theme(boxShadow.none);
+  }
 }
 
 :root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Vite plugin which configures a low-level design system for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,7 +10,9 @@
   "types": "dist/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "plugin.js",
+    "plugin.d.ts"
   ],
   "dependencies": {
     "@fontsource/fira-code": "^4.5.12",
@@ -37,7 +39,6 @@
     "tailwindcss-radix": "^2.6.0"
   },
   "devDependencies": {
-    "@dxos/vite-plugin": "0.1.5",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",

package/plugin.d.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './dist/src/plugin';

package/plugin.js

@@ -0,0 +1,8 @@
+//
+// Copyright 2021 DXOS.org
+//
+
+// Not included in the main `index.ts` so that the apps are not bundled with it.
+// It contains native Node functionality so must not be included in the final app bundle, only during compilation/bundling.
+
+module.exports = require('./dist/src/plugin');

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ComponentProps, ReactNode } from 'react';
+
+export interface ButtonGroupProps extends ComponentProps<'div'> {
+  children?: ReactNode;
+}
+
+export const ButtonGroup = ({ children, ...divProps }: ButtonGroupProps) => {
+  return (
+    <div
+      role='none'
+      {...divProps}
+      className={cx('button-elevation [&>*]:grouped-buttons rounded-md', divProps.className)}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Button/index.ts

@@ -5,3 +5,4 @@
 export * from './Button';
 export * from './buttonStyles';
 export * from './ButtonProps';
+export * from './ButtonGroup';

package/src/components/Dialog/Dialog.tsx

@@ -40,10 +40,10 @@ export const Dialog = ({
     <Transition.Root show={isOpen}>
       <Transition.Child
         as={Fragment}
-        enter='ease-out duration-300'
+        enter='linear duration-300'
         enterFrom='opacity-0'
         enterTo='opacity-100'
-        leave='ease-in duration-200'
+        leave='linear duration-200'
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
@@ -87,7 +87,7 @@ export const Dialog = ({
           {children}
 
           {closeLabel && (
-            <Tooltip content={closeLabel}>
+            <Tooltip zIndex='z-[51]' content={closeLabel}>
               <DialogPrimitive.Close
                 className={cx(
                   'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',

package/src/components/Input/BarePinInput.tsx

@@ -50,7 +50,7 @@ export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
           ...bareInputStyleProps,
           inputRef,
           className: cx(
-            'font-mono selection:bg-transparent',
+            'font-mono selection:bg-transparent mli-auto',
             inputProps.disabled && 'cursor-not-allowed',
             inputProps.className
           ),

package/src/components/Input/BareTextInput.tsx

@@ -11,7 +11,8 @@ import { InputProps, InputSize } from './InputProps';
 const sizeMap: Record<InputSize, string> = {
   md: 'text-sm',
   lg: 'text-base',
-  pin: ''
+  pin: '',
+  textarea: ''
 };
 
 export type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange'> &

package/src/components/Input/BareTextareaInput.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ComponentProps } from 'react';
+
+import { defaultInput } from '../../styles/input';
+import { TextareaProps } from './InputProps';
+
+export type BareTextareaInputProps = Omit<TextareaProps, 'label' | 'initialValue' | 'onChange'> &
+  Pick<ComponentProps<'textarea'>, 'onChange'>;
+
+export const BareTextareaInput = ({
+  validationValence,
+  validationMessage,
+  size,
+  ...inputProps
+}: BareTextareaInputProps) => {
+  return (
+    <textarea
+      {...inputProps}
+      className={cx(
+        defaultInput({ disabled: inputProps.disabled, ...(validationMessage && { validationValence }) }),
+        'block w-full px-2.5 py-2'
+      )}
+    />
+  );
+};

package/src/components/Input/Input.tsx

@@ -9,6 +9,7 @@ import { useId } from '../../hooks';
 import { defaultDescription, valenceColorText } from '../../styles';
 import { BarePinInput } from './BarePinInput';
 import { BareTextInput } from './BareTextInput';
+import { BareTextareaInput, BareTextareaInputProps } from './BareTextareaInput';
 import { InputProps as NaturalInputProps } from './InputProps';
 
 export type InputProps = NaturalInputProps;
@@ -30,7 +31,7 @@ export const Input = ({
   validationValence,
   ...inputProps
 }: InputProps) => {
-  const inputId = inputProps.id || useId('input');
+  const inputId = inputProps.id ?? useId('input');
   const descriptionId = useId('input-description');
   const validationId = useId('input-validation');
 
@@ -41,7 +42,7 @@ export const Input = ({
   const [internalValue, setInternalValue] = useState<string>(initialValue?.toString() || '');
 
   const onInternalChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const nextValue = e.target?.value || '';
       setInternalValue(nextValue);
       onChange &&
@@ -72,16 +73,18 @@ export const Input = ({
   const bareInput =
     size === 'pin' ? (
       <BarePinInput {...bareInputBaseProps} length={length} />
+    ) : size === 'textarea' ? (
+      <BareTextareaInput {...(bareInputBaseProps as BareTextareaInputProps)} />
     ) : (
       <BareTextInput {...bareInputBaseProps} size={size} />
     );
 
   return (
-    <div className={cx('my-4', className)} role='none'>
+    <div role='none' className={cx('mlb-4', className)}>
       <label
         htmlFor={inputId}
         className={cx(
-          'block mb-1 text-sm font-medium text-neutral-900 dark:text-neutral-100',
+          'block pbe-1 text-sm font-medium text-neutral-900 dark:text-neutral-100',
           labelVisuallyHidden && 'sr-only'
         )}
       >

package/src/components/Input/InputProps.ts

@@ -6,9 +6,9 @@ import { ComponentProps, ReactNode } from 'react';
 
 import { MessageValence } from '../../props';
 
-export type InputSize = 'md' | 'lg' | 'pin';
+export type InputSize = 'md' | 'lg' | 'pin' | 'textarea';
 
-export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref'> {
+interface InputPropsExtension {
   label: ReactNode;
   labelVisuallyHidden?: boolean;
   description?: ReactNode;
@@ -21,3 +21,11 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onC
   validationValence?: MessageValence;
   length?: number;
 }
+
+export interface InputProps
+  extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref'>,
+    InputPropsExtension {}
+
+export interface TextareaProps
+  extends Omit<ComponentProps<'textarea'>, 'value' | 'onChange' | 'size' | 'ref'>,
+    InputPropsExtension {}

package/src/components/QrCode/QrCode.stories.tsx

@@ -6,7 +6,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { templateForComponent } from '../../testing';
-import { QrCode, QrCodeProps } from './QrCode';
+import { QrCode, QrCodeProps, CompactQrCode, CompactQrCodeProps } from './QrCode';
 
 export default {
   title: 'react-ui/QrCode',
@@ -17,6 +17,10 @@ const Template = (props: QrCodeProps) => {
   return <QrCode {...props} />;
 };
 
+const CompactTemplate = (props: CompactQrCodeProps) => {
+  return <CompactQrCode {...props} />;
+};
+
 export const Default = templateForComponent(Template)({
   value: '',
   label: ''
@@ -25,3 +29,14 @@ Default.args = {
   label: 'Click to copy this code’s value',
   value: 'https://dxos.org'
 };
+
+export const Compact = templateForComponent(CompactTemplate)({
+  value: '',
+  copyLabel: '',
+  displayQrLabel: ''
+});
+Compact.args = {
+  copyLabel: 'Copy',
+  displayQrLabel: 'Display QR',
+  value: 'https://dxos.org'
+};