@dxos/react-ui-stack 0.8.3 → 0.8.4-main.f9ba587

package/dist/lib/browser/index.mjs

@@ -1,4 +1,4 @@
-// packages/ui/react-ui-stack/src/components/Stack/Stack.tsx
+// src/components/Stack/Stack.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { composeRefs } from "@radix-ui/react-compose-refs";
@@ -6,7 +6,7 @@ import React, { Children, forwardRef, useState as useState2, useMemo, useCallbac
 import { ListItem } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-stack/src/hooks/useStackDropForElements.ts
+// src/hooks/useStackDropForElements.ts
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
@@ -69,7 +69,7 @@ var useStackDropForElements = ({ id, element, scrollElement = element, selfDropp
   };
 };
 
-// packages/ui/react-ui-stack/src/components/StackContext.tsx
+// src/components/StackContext.tsx
 import { createContext, useContext } from "react";
 var StackContext = /* @__PURE__ */ createContext({
   orientation: "vertical",
@@ -92,7 +92,7 @@ var StackItemContext = /* @__PURE__ */ createContext({
 });
 var useStackItem = () => useContext(StackItemContext);
 
-// packages/ui/react-ui-stack/src/components/Stack/Stack.tsx
+// src/components/Stack/Stack.tsx
 var railGridHorizontal = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
 var railGridVertical = "grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]";
 var railGridHorizontalContainFitContent = "grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]";
@@ -198,7 +198,7 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
   }
 });
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItem.tsx
+// src/components/StackItem/StackItem.tsx
 import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
@@ -213,7 +213,7 @@ import { ListItem as ListItem2 } from "@dxos/react-ui";
 import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemContent.tsx
+// src/components/StackItem/StackItemContent.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -250,7 +250,7 @@ var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusb
   }
 });
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemDragHandle.tsx
+// src/components/StackItem/StackItemDragHandle.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { Slot } from "@radix-ui/react-slot";
 import React3 from "react";
@@ -268,7 +268,7 @@ var StackItemDragHandle = ({ asChild, children }) => {
   }
 };
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemHeading.tsx
+// src/components/StackItem/StackItemHeading.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { useFocusableGroup } from "@fluentui/react-tabster";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
@@ -320,7 +320,7 @@ var StackItemHeadingLabel = /* @__PURE__ */ forwardRef3(({ attendableId, related
   }
 });
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemResizeHandle.tsx
+// src/components/StackItem/StackItemResizeHandle.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import React5 from "react";
 import { ResizeHandle } from "@dxos/react-ui-dnd";
@@ -343,7 +343,7 @@ var StackItemResizeHandle = () => {
   }
 };
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemSigil.tsx
+// src/components/StackItem/StackItemSigil.tsx
 import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import React7, { Fragment, forwardRef as forwardRef4, useState as useState3 } from "react";
 import { keySymbols } from "@dxos/keyboard";
@@ -352,7 +352,7 @@ import { useAttention as useAttention2 } from "@dxos/react-ui-attention";
 import { descriptionText, mx as mx4 } from "@dxos/react-ui-theme";
 import { getHostPlatform } from "@dxos/util";
 
-// packages/ui/react-ui-stack/src/components/StackItem/MenuSignifier.tsx
+// src/components/StackItem/MenuSignifier.tsx
 import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import React6 from "react";
 var MenuSignifierHorizontal = () => {
@@ -380,9 +380,9 @@ var MenuSignifierHorizontal = () => {
   }
 };
 
-// packages/ui/react-ui-stack/src/translations.ts
-var translationKey = "stack";
-var translations_default = [
+// src/translations.ts
+var translationKey = "react-ui-stack";
+var translations = [
   {
     "en-US": {
       [translationKey]: {
@@ -399,7 +399,7 @@ var translations_default = [
   }
 ];
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItemSigil.tsx
+// src/components/StackItem/StackItemSigil.tsx
 var StackItemSigilButton = /* @__PURE__ */ forwardRef4(({ attendableId, classNames, related, isMenu = true, children, ...props }, forwardedRef) => {
   var _effect = _useSignals7();
   try {
@@ -492,7 +492,7 @@ var StackItemSigil = /* @__PURE__ */ forwardRef4(({ actions: actionGroups, onAct
   }
 });
 
-// packages/ui/react-ui-stack/src/components/StackItem/StackItem.tsx
+// src/components/StackItem/StackItem.tsx
 var DEFAULT_HORIZONTAL_SIZE = 48;
 var DEFAULT_VERTICAL_SIZE = "min-content";
 var DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE;
@@ -697,7 +697,7 @@ var StackItem = {
   DragPreview: StackItemDragPreview
 };
 
-// packages/ui/react-ui-stack/src/exemplars/Card/Card.tsx
+// src/exemplars/Card/Card.tsx
 import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import { Primitive } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
@@ -705,9 +705,8 @@ import React9, { forwardRef as forwardRef6 } from "react";
 import { Icon as Icon2, IconButton, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { hoverableControls, mx as mx6 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-stack/src/exemplars/Card/fragments.ts
-var cardRoot = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-var cardContent = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
+// src/exemplars/Card/fragments.ts
+var cardRoot = "rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card";
 var cardSpacing = "pli-cardSpacingInline mlb-cardSpacingBlock";
 var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
 var cardDialogContent = "p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden";
@@ -719,8 +718,8 @@ var cardText = cardSpacing;
 var cardHeading = "text-lg font-medium line-clamp-2";
 var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
 
-// packages/ui/react-ui-stack/src/exemplars/Card/Card.tsx
-var CardRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+// src/exemplars/Card/Card.tsx
+var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
   var _effect = _useSignals9();
   try {
     const Root = asChild ? Slot3 : "div";
@@ -742,40 +741,18 @@ var CardRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, rol
     _effect.f();
   }
 });
-var CardContent = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
-  var _effect = _useSignals9();
-  try {
-    const Root = asChild ? Slot3 : "div";
-    const rootProps = asChild ? {
-      classNames: [
-        cardContent,
-        classNames
-      ]
-    } : {
-      className: mx6(cardContent, classNames),
-      role
-    };
-    return /* @__PURE__ */ React9.createElement(Root, {
-      ...props,
-      ...rootProps,
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
-});
-var CardConditionalContent = ({ role, children }) => {
+var CardSurfaceRoot = ({ role = "never", children }) => {
   var _effect = _useSignals9();
   try {
     if ([
       "popover",
       "card--kanban"
-    ].includes(role ?? "never")) {
+    ].includes(role)) {
       return /* @__PURE__ */ React9.createElement("div", {
         className: role === "popover" ? "popover-card-width" : role === "card--kanban" ? "contents" : ""
       }, children);
     } else {
-      return /* @__PURE__ */ React9.createElement(CardContent, role === "card--document" && {
+      return /* @__PURE__ */ React9.createElement(CardStaticRoot, role === "card--document" && {
         classNames: [
           "mlb-[1em]",
           hoverableControls
@@ -815,7 +792,7 @@ var CardToolbar = /* @__PURE__ */ forwardRef6(({ children, classNames, ...props
     return /* @__PURE__ */ React9.createElement(Toolbar.Root, {
       ...props,
       classNames: [
-        "bg-transparent",
+        "bg-transparent density-coarse",
         classNames
       ],
       ref: forwardedRef
@@ -835,7 +812,7 @@ var CardDragHandle = /* @__PURE__ */ forwardRef6(({ toolbarItem }, forwardedRef)
       iconOnly: true,
       icon: "ph--dots-six-vertical--regular",
       variant: "ghost",
-      label: t("card drag handle label"),
+      label: t("drag handle label"),
       classNames: "pli-2",
       ref: forwardedRef
     });
@@ -915,9 +892,8 @@ var CardText = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, rol
   }
 });
 var Card = {
-  Root: CardRoot,
-  Content: CardContent,
-  Container: CardConditionalContent,
+  StaticRoot: CardStaticRoot,
+  SurfaceRoot: CardSurfaceRoot,
   Heading: CardHeading,
   Toolbar: CardToolbar,
   ToolbarIconButton: CardToolbarIconButton,
@@ -930,7 +906,7 @@ var Card = {
   Text: CardText
 };
 
-// packages/ui/react-ui-stack/src/exemplars/Card/CardDragPreview.tsx
+// src/exemplars/Card/CardDragPreview.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import React10 from "react";
 import { mx as mx7 } from "@dxos/react-ui-theme";
@@ -948,7 +924,7 @@ var CardDragPreviewContent = ({ children }) => {
   var _effect = _useSignals10();
   try {
     return /* @__PURE__ */ React10.createElement("div", {
-      className: mx7(cardContent, "ring-focusLine ring-neutralFocusIndicator")
+      className: mx7(cardRoot, "ring-focusLine ring-neutralFocusIndicator")
     }, children);
   } finally {
     _effect.f();
@@ -959,7 +935,7 @@ var CardDragPreview2 = {
   Content: CardDragPreviewContent
 };
 
-// packages/ui/react-ui-stack/src/exemplars/CardStack/CardStack.tsx
+// src/exemplars/CardStack/CardStack.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import React11, { forwardRef as forwardRef7 } from "react";
@@ -1086,16 +1062,40 @@ var CardStackRoot = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild
     _effect.f();
   }
 });
+var cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
+var CardStackItem = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+  var _effect = _useSignals11();
+  try {
+    const Root = asChild ? Slot4 : "div";
+    const rootProps = asChild ? {
+      classNames: [
+        cardStackItem,
+        classNames
+      ]
+    } : {
+      className: mx8(cardStackItem, classNames),
+      role
+    };
+    return /* @__PURE__ */ React11.createElement(Root, {
+      ...props,
+      ...rootProps,
+      ref: forwardedRef
+    }, children);
+  } finally {
+    _effect.f();
+  }
+});
 var CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
   Stack: CardStackStack,
   Heading: CardStackHeading,
   Footer: CardStackFooter,
-  DragHandle: CardStackDragHandle
+  DragHandle: CardStackDragHandle,
+  Item: CardStackItem
 };
 
-// packages/ui/react-ui-stack/src/exemplars/CardStack/CardStackDragPreview.tsx
+// src/exemplars/CardStack/CardStackDragPreview.tsx
 import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
 import React12 from "react";
 import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
@@ -1169,7 +1169,6 @@ export {
   StackItemDragPreview,
   autoScrollRootAttributes,
   cardChrome,
-  cardContent,
   cardDialogContent,
   cardDialogHeader,
   cardDialogOverflow,
@@ -1181,6 +1180,7 @@ export {
   cardStackContent,
   cardStackFooter,
   cardStackHeading,
+  cardStackItem,
   cardStackRoot,
   cardText,
   labelSpacing,
@@ -1188,6 +1188,7 @@ export {
   railGridHorizontalContainFitContent,
   railGridVertical,
   railGridVerticalContainFitContent,
-  translations_default as translations
+  translationKey,
+  translations
 };
 //# sourceMappingURL=index.mjs.map