@dxos/react-ui 0.8.3-main.672df60 → 0.8.3-staging.0fa589b

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/testing/decorators/withTheme.ts", "../../../../src/testing/decorators/withSurfaceVariantsLayout.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator, type StoryContext, type StoryFn } from '@storybook/react';\nimport { useEffect, createElement } from 'react';\n\nimport { defaultTx } from '@dxos/react-ui-theme';\n\nimport { ThemeProvider } from '../../components';\n\nexport const withTheme: Decorator = (Story: StoryFn, context: StoryContext) => {\n  const theme = context?.parameters?.theme || context?.globals?.theme;\n  useEffect(() => {\n    document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');\n  }, [theme]);\n\n  return createElement(ThemeProvider, {\n    children: createElement(Story),\n    tx: defaultTx,\n  });\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/react-ui-theme';\nimport { type Density, type Elevation } from '@dxos/react-ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('p-4 mlb-4 rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>\n    {children}\n  </div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => (\n  <div className={mx('flex flex-col h-full p-4', className)}>\n    {elevations?.map(({ elevation, surface }) =>\n      densities?.map((density) => (\n        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n          <Story />\n        </Container>\n      )),\n    )}\n  </div>\n);\n\nexport const withSurfaceVariantsLayout = ({\n  elevations = [\n    { elevation: 'base', surface: 'bg-baseSurface' },\n    { elevation: 'positioned', surface: 'bg-cardSurface' },\n    { elevation: 'dialog', surface: 'bg-modalSurface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => (\n    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>\n      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />\n      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;AAKA,SAASA,WAAWC,qBAAqB;AAEzC,SAASC,iBAAiB;AAInB,IAAMC,YAAuB,CAACC,OAAgBC,YAAAA;AACnD,QAAMC,QAAQD,SAASE,YAAYD,SAASD,SAASG,SAASF;AAC9DG,YAAU,MAAA;AACRC,aAASC,gBAAgBC,UAAUN,UAAU,SAAS,QAAQ,QAAA,EAAU,MAAA;EAC1E,GAAG;IAACA;GAAM;AAEV,SAAOO,cAAcC,eAAe;IAClCC,UAAUF,cAAcT,KAAAA;IACxBY,IAAIC;EACN,CAAA;AACF;;;;AChBA,OAAOC,WAA2D;AAElE,SAASC,IAAIC,qBAAqB;AAQlC,IAAMC,YAAY,CAAC,EAAEC,UAAUC,WAAWC,QAAO,MAAiE;;;WAChH,sBAAA,cAACC,OAAAA;MAAIC,WAAWC,GAAG,gDAAgDH,SAASI,cAAc;QAAEL;MAAU,CAAA,CAAA;OACnGD,QAAAA;;;;;AAIL,IAAMO,QAAQ,CAAC,EACbC,OACAC,YACAC,WACAN,UAAS,MACkD;;;WAC3D,sBAAA,cAACD,OAAAA;MAAIC,WAAWC,GAAG,4BAA4BD,SAAAA;OAC5CK,YAAYE,IAAI,CAAC,EAAEV,WAAWC,QAAO,MACpCQ,WAAWC,IAAI,CAACC,YACd,sBAAA,cAACb,WAAAA;MAAUc,KAAK,GAAGZ,SAAAA,KAAcW,OAAAA;MAAWV;MAAkBD;OAC5D,sBAAA,cAACO,OAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;;;;;AAOJ,IAAMM,4BAA4B,CAAC,EACxCL,aAAa;EACX;IAAER,WAAW;IAAQC,SAAS;EAAiB;EAC/C;IAAED,WAAW;IAAcC,SAAS;EAAiB;EACrD;IAAED,WAAW;IAAUC,SAAS;EAAkB;GAEpDQ,YAAY;EAAC;EAAS,IACZ,CAAC,MAAC;AACZ,SAAO,CAACF,UACN,sBAAA,cAACL,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACG,OAAAA;IAAMC;IAAcJ,WAAU;IAAQK;IAAwBC;MAC/D,sBAAA,cAACH,OAAAA;IAAMC;IAAcJ,WAAU;IAAOK;IAAwBC;;AAGpE;",
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator, type StoryContext, type StoryFn } from '@storybook/react';\nimport { useEffect, createElement } from 'react';\n\nimport { defaultTx } from '@dxos/react-ui-theme';\n\nimport { ThemeProvider } from '../../components';\n\nexport const withTheme: Decorator = (Story: StoryFn, context: StoryContext) => {\n  const theme = context?.parameters?.theme || context?.globals?.theme;\n  useEffect(() => {\n    document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');\n  }, [theme]);\n\n  return createElement(ThemeProvider, {\n    children: createElement(Story),\n    tx: defaultTx,\n  });\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/react-ui-theme';\nimport { type Density, type Elevation } from '@dxos/react-ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => (\n  <div className={mx('flex flex-col h-full p-4 gap-4', className)}>\n    {elevations?.map(({ elevation, surface }) =>\n      densities?.map((density) => (\n        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n          <Story />\n        </Container>\n      )),\n    )}\n  </div>\n);\n\nexport const withSurfaceVariantsLayout = ({\n  elevations = [\n    { elevation: 'base', surface: 'bg-baseSurface' },\n    { elevation: 'positioned', surface: 'bg-cardSurface' },\n    { elevation: 'dialog', surface: 'bg-modalSurface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => (\n    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>\n      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />\n      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;AAKA,SAASA,WAAWC,qBAAqB;AAEzC,SAASC,iBAAiB;AAInB,IAAMC,YAAuB,CAACC,OAAgBC,YAAAA;AACnD,QAAMC,QAAQD,SAASE,YAAYD,SAASD,SAASG,SAASF;AAC9DG,YAAU,MAAA;AACRC,aAASC,gBAAgBC,UAAUN,UAAU,SAAS,QAAQ,QAAA,EAAU,MAAA;EAC1E,GAAG;IAACA;GAAM;AAEV,SAAOO,cAAcC,eAAe;IAClCC,UAAUF,cAAcT,KAAAA;IACxBY,IAAIC;EACN,CAAA;AACF;;;;AChBA,OAAOC,WAA2D;AAElE,SAASC,IAAIC,qBAAqB;AAQlC,IAAMC,YAAY,CAAC,EAAEC,UAAUC,WAAWC,QAAO,MAAiE;;;WAChH,sBAAA,cAACC,OAAAA;MAAIC,WAAWC,GAAG,sCAAsCH,SAASI,cAAc;QAAEL;MAAU,CAAA,CAAA;OAAMD,QAAAA;;;;;AAGpG,IAAMO,QAAQ,CAAC,EACbC,OACAC,YACAC,WACAN,UAAS,MACkD;;;WAC3D,sBAAA,cAACD,OAAAA;MAAIC,WAAWC,GAAG,kCAAkCD,SAAAA;OAClDK,YAAYE,IAAI,CAAC,EAAEV,WAAWC,QAAO,MACpCQ,WAAWC,IAAI,CAACC,YACd,sBAAA,cAACb,WAAAA;MAAUc,KAAK,GAAGZ,SAAAA,KAAcW,OAAAA;MAAWV;MAAkBD;OAC5D,sBAAA,cAACO,OAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;;;;;AAOJ,IAAMM,4BAA4B,CAAC,EACxCL,aAAa;EACX;IAAER,WAAW;IAAQC,SAAS;EAAiB;EAC/C;IAAED,WAAW;IAAcC,SAAS;EAAiB;EACrD;IAAED,WAAW;IAAUC,SAAS;EAAkB;GAEpDQ,YAAY;EAAC;EAAS,IACZ,CAAC,MAAC;AACZ,SAAO,CAACF,UACN,sBAAA,cAACL,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACG,OAAAA;IAAMC;IAAcJ,WAAU;IAAQK;IAAwBC;MAC/D,sBAAA,cAACH,OAAAA;IAAMC;IAAcJ,WAAU;IAAOK;IAAwBC;;AAGpE;",
   "names": ["useEffect", "createElement", "defaultTx", "withTheme", "Story", "context", "theme", "parameters", "globals", "useEffect", "document", "documentElement", "classList", "createElement", "ThemeProvider", "children", "tx", "defaultTx", "React", "mx", "surfaceShadow", "Container", "children", "elevation", "surface", "div", "className", "mx", "surfaceShadow", "Panel", "Story", "elevations", "densities", "map", "density", "key", "withSurfaceVariantsLayout"]
 }

package/dist/lib/node/{chunk-KMS7RFL7.cjs → chunk-3E3QKWX4.cjs}

@@ -26,8 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var chunk_KMS7RFL7_exports = {};
-__export(chunk_KMS7RFL7_exports, {
+var chunk_3E3QKWX4_exports = {};
+__export(chunk_3E3QKWX4_exports, {
   AlertDialog: () => AlertDialog,
   AnchoredOverflow: () => AnchoredOverflow,
   Avatar: () => Avatar,
@@ -35,6 +35,7 @@ __export(chunk_KMS7RFL7_exports, {
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  Callout: () => Callout,
   Clipboard: () => Clipboard,
   ContextMenu: () => ContextMenu2,
   DensityContext: () => DensityContext,
@@ -76,6 +77,7 @@ __export(chunk_KMS7RFL7_exports, {
   hasIosKeyboard: () => hasIosKeyboard,
   initialSafeArea: () => initialSafeArea,
   isLabel: () => isLabel,
+  messageIcons: () => messageIcons,
   toLocalizedString: () => toLocalizedString,
   useAvatarContext: () => useAvatarContext,
   useButtonGroupContext: () => useButtonGroupContext,
@@ -97,7 +99,7 @@ __export(chunk_KMS7RFL7_exports, {
   useTranslationsContext: () => useTranslationsContext,
   useVisualViewport: () => useVisualViewport
 });
-module.exports = __toCommonJS(chunk_KMS7RFL7_exports);
+module.exports = __toCommonJS(chunk_3E3QKWX4_exports);
 var import_react = require("react");
 var import_tracking = require("@preact-signals/safe-react/tracking");
 var import_react_primitive = require("@radix-ui/react-primitive");
@@ -1897,7 +1899,7 @@ var TextArea = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, c
         density,
         elevation,
         validationValence
-      }, classNames),
+      }, "-mbe-labelSpacingBlock", classNames),
       ...props.autoFocus && !hasIosKeyboard2 && {
         autoFocus: true
       },
@@ -3276,9 +3278,16 @@ var DropdownMenu = {
   SubContent: DropdownMenuSubContent
 };
 var useDropdownMenuMenuScope = useMenuScope;
+var messageIcons = {
+  success: "ph--check-circle--duotone",
+  info: "ph--info--duotone",
+  warning: "ph--warning--duotone",
+  error: "ph--warning-circle--duotone",
+  neutral: "ph--info--duotone"
+};
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = (0, import_react_context9.createContext)(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   var _effect = (0, import_tracking28.useSignals)();
   try {
     const { tx } = useThemeContext();
@@ -3288,13 +3297,15 @@ var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, val
     const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
     return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
       titleId,
-      descriptionId
+      descriptionId,
+      valence
     }, /* @__PURE__ */ import_react39.default.createElement(Root7, {
+      role: valence === "neutral" ? "paragraph" : "alert",
       ...props,
       className: tx("message.root", "message", {
         valence,
         elevation
-      }, className),
+      }, classNames),
       "aria-labelledby": titleId,
       "aria-describedby": descriptionId,
       ref: forwardedRef
@@ -3305,25 +3316,31 @@ var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, val
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
   var _effect = (0, import_tracking28.useSignals)();
   try {
     const { tx } = useThemeContext();
-    const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
+    const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
     const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.h2;
     return /* @__PURE__ */ import_react39.default.createElement(Root7, {
       ...props,
-      className: tx("message.title", "message__title", {}, className),
+      className: tx("message.title", "message__title", {}, classNames),
       id: titleId,
       ref: forwardedRef
-    }, children);
+    }, !icon && valence === "neutral" ? null : /* @__PURE__ */ import_react39.default.createElement(Icon, {
+      size: 5,
+      icon: icon ?? messageIcons[valence],
+      classNames: tx("message.icon", "message__icon", {
+        valence
+      })
+    }), /* @__PURE__ */ import_react39.default.createElement("span", null, children));
   } finally {
     _effect.f();
   }
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
-var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, className, children, ...props }, forwardedRef) => {
+var MESSAGE_BODY_NAME = "MessageContent";
+var MessageContent = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
   var _effect = (0, import_tracking28.useSignals)();
   try {
     const { tx } = useThemeContext();
@@ -3331,7 +3348,7 @@ var MessageBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, cla
     const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.p;
     return /* @__PURE__ */ import_react39.default.createElement(Root7, {
       ...props,
-      className: tx("message.body", "message__body", {}, className),
+      className: tx("message.content", "message__content", {}, classNames),
       id: descriptionId,
       ref: forwardedRef
     }, children);
@@ -3339,12 +3356,13 @@ var MessageBody = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, cla
     _effect.f();
   }
 });
-MessageBody.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_BODY_NAME;
 var Message = {
   Root: MessageRoot,
   Title: MessageTitle,
-  Body: MessageBody
+  Content: MessageContent
 };
+var Callout = Message;
 var POPOVER_NAME = "Popover";
 var [createPopoverContext, createPopoverScope] = (0, import_react_context10.createContextScope)(POPOVER_NAME, [
   import_react_popper2.createPopperScope
@@ -3986,7 +4004,7 @@ var Select = {
   Separator: SelectSeparator,
   Arrow: SelectArrow
 };
-var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, orientation = "horizontal", ...props }, forwardedRef) => {
+var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
   var _effect = (0, import_tracking33.useSignals)();
   try {
     const { tx } = useThemeContext();
@@ -3994,7 +4012,8 @@ var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, o
       orientation,
       ...props,
       className: tx("separator.root", "separator", {
-        orientation
+        orientation,
+        subdued
       }, classNames),
       ref: forwardedRef
     });
@@ -4116,13 +4135,15 @@ var Toast = {
   Action: ToastAction,
   Close: ToastClose
 };
-var ToolbarRoot = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
+var ToolbarRoot = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
   var _effect = (0, import_tracking36.useSignals)();
   try {
     const { tx } = useThemeContext();
     return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Root, {
       ...props,
-      className: tx("toolbar.root", "toolbar", {}, classNames),
+      className: tx("toolbar.root", "toolbar", {
+        layoutManaged
+      }, classNames),
       ref: forwardedRef
     }, children);
   } finally {
@@ -4275,6 +4296,7 @@ var useDensityContext = (propsDensity) => {
   Breadcrumb,
   Button,
   ButtonGroup,
+  Callout,
   Clipboard,
   ContextMenu,
   DensityContext,
@@ -4316,6 +4338,7 @@ var useDensityContext = (propsDensity) => {
   hasIosKeyboard,
   initialSafeArea,
   isLabel,
+  messageIcons,
   toLocalizedString,
   useAvatarContext,
   useButtonGroupContext,
@@ -4337,4 +4360,4 @@ var useDensityContext = (propsDensity) => {
   useTranslationsContext,
   useVisualViewport
 });
-//# sourceMappingURL=chunk-KMS7RFL7.cjs.map
+//# sourceMappingURL=chunk-3E3QKWX4.cjs.map