@dxos/react-ui 0.7.5-labs.a279d8c → 0.7.5-labs.d453967

package/dist/lib/browser/index.mjs

@@ -253,16 +253,12 @@ var AvatarFrame = /* @__PURE__ */ forwardRef3(({ classNames, children, ...props
     y: ringGap + ringWidth,
     rx
   }))), variant === "circle" ? /* @__PURE__ */ React4.createElement("circle", {
-    className: hue ? tx("hue.fill", "avatar__frame__circle", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
     cx: "50%",
     cy: "50%",
-    r
+    r,
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)"
   }) : /* @__PURE__ */ React4.createElement("rect", {
-    className: hue ? tx("hue.fill", "avatar__frame__rect", {
-      hue
-    }) : "fill-[var(--surface-bg)]",
+    fill: hue ? `var(--dx-${hue}Fill)` : "var(--surface-bg)",
     x: ringGap + ringWidth,
     y: ringGap + ringWidth,
     width: 2 * r,
@@ -655,12 +651,15 @@ var Tooltip = {
 };
 
 // packages/ui/react-ui/src/components/Buttons/IconButton.tsx
-var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+var IconOnlyButton = /* @__PURE__ */ forwardRef9(({ tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
   const [triggerTooltipOpen, setTriggerTooltipOpen] = useState4(false);
-  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, zIndex && {
-    style: {
-      zIndex
-    }
+  const content = /* @__PURE__ */ React10.createElement(Tooltip.Content, {
+    ...zIndex && {
+      style: {
+        zIndex
+      }
+    },
+    side: tooltipSide
   }, props.label, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null));
   return /* @__PURE__ */ React10.createElement(Tooltip.Root, {
     open: triggerTooltipOpen,
@@ -884,7 +883,7 @@ var CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }) =
   const { t } = useTranslation("os");
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t("copy success label") : t("copy label");
+  const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
   const [open, setOpen] = useState6(false);
   return /* @__PURE__ */ React17.createElement(Tooltip.Root, {
     delayDuration: 1500,
@@ -966,13 +965,13 @@ var DialogOverlay = /* @__PURE__ */ forwardRef12(({ classNames, children, blockA
   }, children));
 });
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
-var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, ...props }, forwardedRef) => {
+var DialogContent = /* @__PURE__ */ forwardRef12(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
   return /* @__PURE__ */ React18.createElement(DialogContentPrimitive, {
     ...props,
     className: tx("dialog.content", "dialog", {
-      inOverlayLayout
+      inOverlayLayout: propsInOverlayLayout || inOverlayLayout
     }, classNames),
     ref: forwardedRef
   }, children);
@@ -1666,7 +1665,7 @@ var Switch = /* @__PURE__ */ forwardRef16(({ __inputScope, checked: propsChecked
   const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
   return /* @__PURE__ */ React22.createElement("input", {
     type: "checkbox",
-    className: "ch-checkbox--switch ch-focus-ring",
+    className: "dx-checkbox--switch dx-focus-ring",
     checked,
     onChange: (event) => {
       onCheckedChange(event.target.checked);
@@ -1709,8 +1708,8 @@ var edgeToOrientationMap = {
   right: "vertical"
 };
 var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
+  horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
+  vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
 };
 var edgeStyles = {
   top: "top-[--line-offset] before:top-[--offset-terminal]",
@@ -1721,17 +1720,17 @@ var edgeStyles = {
 var strokeSize = 2;
 var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var ListDropIndicator = ({ edge, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
+var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React23.createElement("div", {
     role: "none",
     style: {
       "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
+      "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
+      "--line-inset": `${lineInset}px`,
       "--terminal-size": `${terminalSize}px`,
       "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
+      "--terminal-inset": `${terminalInset}px`,
       "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
     },
     className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
@@ -2155,68 +2154,62 @@ var useLandmarkMover = (propsOnKeyDown, landmark) => {
 };
 var [MainProvider, useMainContext] = createContext10(MAIN_NAME, {
   resizing: false,
-  navigationSidebarOpen: false,
-  setNavigationSidebarOpen: (nextOpen) => {
+  navigationSidebarState: "closed",
+  setNavigationSidebarState: (nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 79,
+      L: 81,
       S: void 0,
       C: (f, a) => f(...a)
     });
   },
-  complementarySidebarOpen: false,
-  setComplementarySidebarOpen: (nextOpen) => {
+  complementarySidebarState: "closed",
+  setComplementarySidebarState: (nextState) => {
     log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
       F: __dxlog_file,
-      L: 84,
+      L: 86,
       S: void 0,
       C: (f, a) => f(...a)
     });
   }
 });
 var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
-  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } = useMainContext(consumerName);
+  const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
   return {
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(!navigationSidebarOpen), [
-      navigationSidebarOpen,
-      setNavigationSidebarOpen
-    ]),
-    openNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(true), [
-      setNavigationSidebarOpen
+    navigationSidebarState,
+    setNavigationSidebarState,
+    toggleNavigationSidebar: useCallback7(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
+      navigationSidebarState,
+      setNavigationSidebarState
     ]),
-    closeNavigationSidebar: useCallback7(() => setNavigationSidebarOpen(false), [
-      setNavigationSidebarOpen
+    openNavigationSidebar: useCallback7(() => setNavigationSidebarState("expanded"), []),
+    collapseNavigationSidebar: useCallback7(() => setNavigationSidebarState("collapsed"), []),
+    closeNavigationSidebar: useCallback7(() => setNavigationSidebarState("closed"), []),
+    complementarySidebarState,
+    setComplementarySidebarState,
+    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
+      complementarySidebarState,
+      setComplementarySidebarState
     ]),
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
-    toggleComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(!complementarySidebarOpen), [
-      complementarySidebarOpen,
-      setComplementarySidebarOpen
-    ]),
-    openComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(true), [
-      setComplementarySidebarOpen
-    ]),
-    closeComplementarySidebar: useCallback7(() => setComplementarySidebarOpen(false), [
-      setComplementarySidebarOpen
-    ])
+    openComplementarySidebar: useCallback7(() => setComplementarySidebarState("expanded"), []),
+    collapseComplementarySidebar: useCallback7(() => setComplementarySidebarState("collapsed"), []),
+    closeComplementarySidebar: useCallback7(() => setComplementarySidebarState("closed"), [])
   };
 };
 var resizeDebounce = 3e3;
-var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavigationSidebarOpen, onNavigationSidebarOpenChange, complementarySidebarOpen: propsComplementarySidebarOpen, defaultComplementarySidebarOpen, onComplementarySidebarOpenChange, children, ...props }) => {
+var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState4({
-    prop: propsNavigationSidebarOpen,
-    defaultProp: defaultNavigationSidebarOpen,
-    onChange: onNavigationSidebarOpenChange
+  const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = useControllableState4({
+    prop: propsNavigationSidebarState,
+    defaultProp: defaultNavigationSidebarState,
+    onChange: onNavigationSidebarStateChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState4({
-    prop: propsComplementarySidebarOpen,
-    defaultProp: defaultComplementarySidebarOpen,
-    onChange: onComplementarySidebarOpenChange
+  const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = useControllableState4({
+    prop: propsComplementarySidebarState,
+    defaultProp: defaultComplementarySidebarState,
+    onChange: onComplementarySidebarStateChange
   });
   const [resizing, setResizing] = useState8(false);
   const resizeInterval = useRef2(null);
@@ -2238,10 +2231,10 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   ]);
   return /* @__PURE__ */ React28.createElement(MainProvider, {
     ...props,
-    navigationSidebarOpen,
-    setNavigationSidebarOpen,
-    complementarySidebarOpen,
-    setComplementarySidebarOpen,
+    navigationSidebarState,
+    setNavigationSidebarState,
+    complementarySidebarState,
+    setComplementarySidebarState,
     resizing
   }, children);
 };
@@ -2249,7 +2242,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -2257,7 +2250,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   const ref = useForwardedRef(forwardedRef);
   const noopRef = useRef2(null);
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
-    onDismiss: () => setOpen(false)
+    onDismiss: () => onStateChange?.("closed")
   });
   const handleKeyDown = useCallback7((event) => {
     if (event.key === "Escape") {
@@ -2269,7 +2262,7 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
   ]);
   const Root5 = isLg ? Primitive9.div : DialogContent2;
   return /* @__PURE__ */ React28.createElement(DialogRoot2, {
-    open,
+    open: state !== "closed",
     modal: false
   }, /* @__PURE__ */ React28.createElement(Root5, {
     ...!isLg && {
@@ -2279,24 +2272,24 @@ var MainSidebar = /* @__PURE__ */ forwardRef20(({ classNames, children, swipeToD
     },
     ...props,
     "data-side": side === "inline-end" ? "ie" : "is",
-    "data-state": open ? "open" : "closed",
+    "data-state": state,
     "data-resizing": resizing ? "true" : "false",
     className: tx("main.sidebar", "main__sidebar", {}, classNames),
     onKeyDown: handleKeyDown,
-    ...!open && {
+    ...state === "closed" && {
       inert: "true"
     },
     ref
   }, children));
 });
 var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "0");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: navigationSidebarOpen,
-    setOpen: setNavigationSidebarOpen,
+    state: navigationSidebarState,
+    onStateChange: setNavigationSidebarState,
     resizing,
     side: "inline-start",
     ref: forwardedRef
@@ -2304,13 +2297,13 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) =
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef) => {
-  const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
   const mover = useLandmarkMover(props.onKeyDown, "2");
   return /* @__PURE__ */ React28.createElement(MainSidebar, {
     ...mover,
     ...props,
-    open: complementarySidebarOpen,
-    setOpen: setComplementarySidebarOpen,
+    state: complementarySidebarState,
+    onStateChange: setComplementarySidebarState,
     resizing,
     side: "inline-end",
     ref: forwardedRef
@@ -2318,7 +2311,7 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef20((props, forwardedRef
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
 var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
-  const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot10 : role ? "div" : "main";
   const mover = useLandmarkMover(props.onKeyDown, "1");
@@ -2328,8 +2321,8 @@ var MainContent = /* @__PURE__ */ forwardRef20(({ asChild, classNames, bounce, h
       ...mover
     },
     ...props,
-    "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
-    "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
+    "data-sidebar-inline-start-state": navigationSidebarState,
+    "data-sidebar-inline-end-state": complementarySidebarState,
     className: tx("main.content", "main", {
       bounce,
       handlesFocus
@@ -2342,20 +2335,20 @@ var MainOverlay = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwar
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
+  const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
   return /* @__PURE__ */ React28.createElement("div", {
     onClick: () => {
-      setNavigationSidebarOpen(false);
-      setComplementarySidebarOpen(false);
+      setNavigationSidebarState("collapsed");
+      setComplementarySidebarState("collapsed");
     },
     ...props,
     className: tx("main.overlay", "main__overlay", {
       isLg,
-      inlineStartSidebarOpen: navigationSidebarOpen,
-      inlineEndSidebarOpen: complementarySidebarOpen
+      inlineStartSidebarOpen: navigationSidebarState,
+      inlineEndSidebarOpen: complementarySidebarState
     }, classNames),
-    "data-state": navigationSidebarOpen || complementarySidebarOpen ? "open" : "closed",
+    "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
     "aria-hidden": "true",
     ref: forwardedRef
   });
@@ -2980,14 +2973,15 @@ var Separator4 = /* @__PURE__ */ forwardRef26(({ classNames, orientation = "hori
 import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
 import { Slot as Slot13 } from "@radix-ui/react-slot";
 import React35, { forwardRef as forwardRef27 } from "react";
-var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+var Tag = /* @__PURE__ */ forwardRef27(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root5 = asChild ? Slot13 : Primitive12.span;
   return /* @__PURE__ */ React35.createElement(Root5, {
     ...props,
-    className: tx("tag.root", "tag", {
+    className: tx("tag.root", "dx-tag", {
       palette
     }, classNames),
+    "data-hue": palette,
     ref: forwardedRef
   });
 });
@@ -3228,6 +3222,7 @@ export {
   useDropdownMenuContext,
   useDropdownMenuMenuScope,
   useElevationContext,
+  useLandmarkMover,
   useListContext,
   useListItemContext,
   useMainContext,