@dxos/react-ui 0.4.9 → 0.4.10-main.068c3d8

package/src/components/Dialogs/Dialog.tsx

@@ -81,16 +81,26 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   inOverlayLayout: false,
 });
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps>;
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
+        className={tx(
+          'dialog.overlay',
+          'dialog__overlay',
+          {},
+          classNames,
+          'data-[block-align=start]:justify-center',
+          'data-[block-align=start]:items-start',
+          'data-[block-align=center]:place-content-center',
+        )}
         ref={forwardedRef}
+        data-block-align={blockAlign}
       >
         <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
       </DialogOverlayPrimitive>
@@ -106,6 +116,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
   ({ classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+
     return (
       <DialogContentPrimitive
         {...props}

package/src/components/ScrollArea/ScrollArea.tsx

@@ -19,6 +19,8 @@ import React, { forwardRef } from 'react';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
+type ScrollAreaVariant = 'coarse' | 'fine';
+
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
@@ -47,13 +49,14 @@ const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportProps>(
   },
 );
 
-type ScrollAreaScrollbarProps = ThemedClassName<ScrollAreaPrimitiveScrollbarProps>;
+type ScrollAreaScrollbarProps = ThemedClassName<ScrollAreaPrimitiveScrollbarProps> & { variant?: ScrollAreaVariant };
 
 const ScrollAreaScrollbar = forwardRef<HTMLDivElement, ScrollAreaScrollbarProps>(
-  ({ classNames, ...props }, forwardedRef) => {
+  ({ classNames, variant = 'fine', ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <ScrollAreaPrimitiveScrollbar
+        data-variant={variant}
         {...props}
         className={tx('scrollArea.scrollbar', 'scroll-area__scrollbar', {}, classNames)}
         ref={forwardedRef}