@dxos/react-ui 0.1.12 → 0.1.14

package/dist/types/src/styles/valence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valence.d.ts","sourceRoot":"","sources":["../../../../src/styles/valence.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,eAAO,MAAM,WAAW,+DAA+D,CAAC;AACxF,eAAO,MAAM,QAAQ,yDAAyD,CAAC;AAC/E,eAAO,MAAM,WAAW,+DAA+D,CAAC;AACxF,eAAO,MAAM,SAAS,2DAA2D,CAAC;AAElF,eAAO,MAAM,gBAAgB,aAAc,cAAc,gQAaxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,eAAe,yCAAyC,CAAC;AACtE,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,gBAAgB,2CAA2C,CAAC;AAEzE,eAAO,MAAM,kBAAkB,aAAc,cAAc,mOAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAC/E,eAAO,MAAM,kBAAkB,wHACwF,CAAC;AACxH,eAAO,MAAM,eAAe,sGACyE,CAAC;AACtG,eAAO,MAAM,kBAAkB,wHACwF,CAAC;AACxH,eAAO,MAAM,gBAAgB,4GAC8E,CAAC;AAE5G,eAAO,MAAM,kBAAkB,aAAc,cAAc,mfAa1D,CAAC"}

package/dist/types/src/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,wBAAwB,CAAC"}

package/dist/types/src/testing/templateForComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateForComponent.d.ts","sourceRoot":"","sources":["../../../../src/testing/templateForComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,oBAAoB,kEAQ9B,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -0,0 +1,2 @@
+export * from './mx';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,MAAM,CAAC"}

package/dist/types/src/util/mx.d.ts

@@ -0,0 +1,2 @@
+export declare const mx: (...classLists: import("tailwind-merge/dist/lib/tw-join").ClassNameValue[]) => string;
+//# sourceMappingURL=mx.d.ts.map

package/dist/types/src/util/mx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mx.d.ts","sourceRoot":"","sources":["../../../../src/util/mx.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,EAAE,uFAmBd,CAAC"}

package/dist/types/src/util/withLogical.d.ts

@@ -0,0 +1,3 @@
+import { Config } from 'tailwind-merge';
+export declare const withLogical: (prevConfig: Config) => Config;
+//# sourceMappingURL=withLogical.d.ts.map

package/dist/types/src/util/withLogical.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withLogical.d.ts","sourceRoot":"","sources":["../../../../src/util/withLogical.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,MAAM,EAA4B,MAAM,gBAAgB,CAAC;AAElE,eAAO,MAAM,WAAW,eAAgB,MAAM,KAAG,MA8FhD,CAAC"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Vite plugin which configures a low-level design system for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "main": "dist/src/index.js",
-  "types": "dist/src/index.d.ts",
+  "main": "dist/lib/browser/index.mjs",
+  "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
     "src",
@@ -24,16 +24,18 @@
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-navigation-menu": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.2",
+    "@radix-ui/react-portal": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.1",
+    "@radix-ui/react-toolbar": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.0.2",
     "@tailwindcss/forms": "^0.5.3",
     "alea": "^1.0.1",
     "autoprefixer": "^10.4.12",
-    "classnames": "^2.3.2",
     "jdenticon": "^3.2.0",
     "postcss": "^8.4.17",
     "qrcode.react": "^3.1.0",
     "rci": "^0.0.3",
+    "tailwind-merge": "^1.8.0",
     "tailwindcss": "^3.1.8",
     "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.6.0"
@@ -42,11 +44,13 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",
+    "esbuild": "~0.14.1",
+    "esbuild-style-plugin": "^1.6.0",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-dark-mode": "^1.1.2",
-    "vite": "3.0.9"
+    "vite": "3.2.5"
   },
   "peerDependencies": {
     "phosphor-react": "^1.4.1",

package/plugin.d.ts

@@ -2,4 +2,4 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './dist/src/plugin';
+export * from './dist/types/src/plugin';

package/plugin.js

@@ -5,4 +5,4 @@
 // 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');
+module.exports = require('./dist/plugin/node/plugin.cjs');

package/src/components/Alert/Alert.tsx

@@ -2,30 +2,36 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ComponentProps, ReactNode } from 'react';
 
 import { useId } from '../../hooks';
 import { MessageValence } from '../../props';
 import { valenceAlertColors } from '../../styles';
+import { mx } from '../../util';
 
-export interface AlertProps extends Omit<ComponentProps<'div'>, 'title'> {
+export interface AlertSlots {
+  root?: Omit<ComponentProps<'div'>, 'children'>;
+  title?: Omit<ComponentProps<'p'>, 'children'>;
+}
+
+export interface AlertProps {
   title: ReactNode;
   assertive?: boolean;
   valence?: MessageValence;
   children?: ReactNode;
+  slots?: AlertSlots;
 }
 
-export const Alert = ({ title, children, assertive, valence, ...divProps }: AlertProps) => {
+export const Alert = ({ title, children, assertive, valence, slots = {} }: AlertProps) => {
   const labelId = useId('alertLabel');
   return (
     <div
+      {...slots.root}
       role={assertive ? 'alert' : 'group'}
-      {...divProps}
-      className={cx('p-3 border rounded-md', valenceAlertColors(valence), divProps.className)}
       aria-labelledby={labelId}
+      className={mx('p-3 border rounded-md', valenceAlertColors(valence), slots.root?.className)}
     >
-      <p id={labelId} className='font-medium mb-2'>
+      <p {...slots.title} id={labelId} className={mx('font-medium mb-2', slots.title?.className)}>
         {title}
       </p>
       {children}

package/src/components/AlertDialog/AlertDialog.tsx

@@ -4,12 +4,20 @@
 
 import { Transition } from '@headlessui/react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-import cx from 'classnames';
-import React, { cloneElement, Fragment, ReactHTMLElement, ReactNode, useEffect, useState } from 'react';
+import React, { cloneElement, ComponentProps, Fragment, ReactHTMLElement, ReactNode, useEffect, useState } from 'react';
 
 import { defaultDescription, defaultFocus } from '../../styles';
+import { mx } from '../../util';
 import { Input, InputProps } from '../Input';
 
+export interface AlertDialogSlots {
+  overlay?: Pick<ComponentProps<typeof AlertDialogPrimitive.Overlay>, 'className'>;
+  content?: Omit<ComponentProps<typeof AlertDialogPrimitive.Content>, 'children'>;
+  title?: Omit<ComponentProps<typeof AlertDialogPrimitive.Content>, 'children'>;
+  description?: Omit<ComponentProps<typeof AlertDialogPrimitive.Description>, 'children'>;
+  actions?: Omit<ComponentProps<'div'>, 'children'>;
+}
+
 export interface AlertDialogProps {
   title: ReactNode;
   openTrigger?: ReactNode;
@@ -22,6 +30,7 @@ export interface AlertDialogProps {
   children?: ReactNode;
   initiallyOpen?: boolean;
   mountAsSibling?: boolean;
+  slots?: AlertDialogSlots;
 }
 
 export const AlertDialog = ({
@@ -35,7 +44,8 @@ export const AlertDialog = ({
   destructiveConfirmInputProps,
   children,
   initiallyOpen,
-  mountAsSibling
+  mountAsSibling,
+  slots = {}
 }: AlertDialogProps) => {
   const [isOpen, setIsOpen] = useState(!!initiallyOpen);
   const [confirmDisabled, setConfirmDisabled] = useState(!!destructiveConfirmString);
@@ -58,7 +68,10 @@ export const AlertDialog = ({
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <AlertDialogPrimitive.Overlay forceMount className='fixed inset-0 z-20 bg-black/50' />
+        <AlertDialogPrimitive.Overlay
+          forceMount
+          className={mx('fixed inset-0 z-20 bg-black/50', slots.overlay?.className)}
+        />
       </Transition.Child>
       <Transition.Child
         as={Fragment}
@@ -71,26 +84,33 @@ export const AlertDialog = ({
       >
         <AlertDialogPrimitive.Content
           forceMount
-          className={cx(
+          {...slots.content}
+          className={mx(
             'fixed z-50',
             'w-[95vw] max-w-md rounded-xl p-4 md:w-full',
             'top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
             'shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons',
-            defaultFocus
+            defaultFocus,
+            slots.content?.className
           )}
         >
           <AlertDialogPrimitive.Title
-            className={cx(
+            tabIndex={0}
+            {...slots.title}
+            className={mx(
               'text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md',
               titleVisuallyHidden && 'sr-only',
-              defaultFocus
+              defaultFocus,
+              slots.title?.className
             )}
-            tabIndex={0}
           >
             {title}
           </AlertDialogPrimitive.Title>
           {description && (
-            <AlertDialogPrimitive.Description className={cx('my-2', defaultDescription)}>
+            <AlertDialogPrimitive.Description
+              {...slots.description}
+              className={mx('my-2', defaultDescription, slots.description?.className)}
+            >
               {description}
             </AlertDialogPrimitive.Description>
           )}
@@ -99,7 +119,7 @@ export const AlertDialog = ({
 
           {destructiveConfirmInputProps && <Input {...destructiveConfirmInputProps} onChange={setConfirmStringValue} />}
 
-          <div className='flex flex-wrap justify-end gap-4'>
+          <div {...slots.actions} className={mx('flex flex-wrap justify-end gap-4', slots.actions?.className)}>
             {cancelTrigger && (
               <AlertDialogPrimitive.Cancel asChild={typeof cancelTrigger !== 'string'}>
                 {cancelTrigger}

package/src/components/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@
 //
 
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import cx from 'classnames';
+import * as PortalPrimitive from '@radix-ui/react-portal';
 import { toSvg } from 'jdenticon';
 import React, {
   cloneElement,
@@ -19,14 +19,23 @@ import React, {
 import { useId } from '../../hooks';
 import { Size } from '../../props';
 import { getSize } from '../../styles';
+import { mx } from '../../util';
 
-export interface AvatarProps extends ComponentProps<typeof AvatarPrimitive.Root> {
+export interface AvatarSlots {
+  root?: Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'>;
+  image?: Omit<ComponentProps<typeof AvatarPrimitive.Image>, 'children'>;
+  fallback?: Omit<ComponentProps<typeof AvatarPrimitive.Fallback>, 'children'>;
+}
+
+export interface AvatarProps {
   fallbackValue: string;
   label: string | Omit<ReactHTMLElement<HTMLElement>, 'ref'>;
   size?: Size;
   variant?: 'square' | 'circle';
   mediaSrc?: string;
+  mediaAlt?: string;
   children?: ReactNode;
+  slots?: AvatarSlots;
 }
 
 const shapeStyles = {
@@ -36,7 +45,15 @@ const shapeStyles = {
 
 export const Avatar = forwardRef(
   (
-    { mediaSrc, fallbackValue, label, variant = 'square', size = 10, ...rootProps }: PropsWithChildren<AvatarProps>,
+    {
+      mediaSrc,
+      mediaAlt,
+      fallbackValue,
+      label,
+      variant = 'square',
+      size = 10,
+      slots = {}
+    }: PropsWithChildren<AvatarProps>,
     ref: ForwardedRef<HTMLSpanElement>
   ) => {
     const labelId = useId('avatarLabel');
@@ -47,32 +64,37 @@ export const Avatar = forwardRef(
     return (
       <>
         <AvatarPrimitive.Root
-          {...rootProps}
-          className={cx('relative inline-flex', getSize(size), rootProps.className)}
+          {...slots.root}
+          className={mx('relative inline-flex', getSize(size), slots.root?.className)}
           aria-labelledby={labelId}
           ref={ref}
         >
           {mediaSrc && (
             <AvatarPrimitive.Image
+              {...slots.image}
               src={mediaSrc}
-              alt='Avatar'
-              className={cx('h-full w-full object-cover overflow-hidden', shapeStyles[variant])}
+              alt={mediaAlt ?? 'Avatar'}
+              className={mx('h-full w-full object-cover overflow-hidden', shapeStyles[variant], slots.image?.className)}
             />
           )}
           <AvatarPrimitive.Fallback
-            className={cx(
+            delayMs={0}
+            {...slots.fallback}
+            className={mx(
               'shrink-0 flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden',
-              shapeStyles[variant]
+              shapeStyles[variant],
+              slots.fallback?.className
             )}
-            delayMs={0}
           >
             <img role='none' alt={fallbackValue} src={imgSrc} className='h-full w-full' />
           </AvatarPrimitive.Fallback>
         </AvatarPrimitive.Root>
         {typeof label === 'string' ? (
-          <span id={labelId} className='sr-only'>
-            {label}
-          </span>
+          <PortalPrimitive.Root asChild>
+            <span id={labelId} className='sr-only'>
+              {label}
+            </span>
+          </PortalPrimitive.Root>
         ) : (
           cloneElement(label, { id: labelId })
         )}

package/src/components/Button/Button.tsx

@@ -2,21 +2,19 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { forwardRef } from 'react';
 
+import { mx } from '../../util';
 import { ButtonProps } from './ButtonProps';
 import { buttonStyles } from './buttonStyles';
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, compact, spacing, variant, rounding, ...props }, ref) => (
-    <button
-      ref={ref}
-      {...props}
-      className={cx(buttonStyles({ compact, spacing, variant, rounding, disabled: props.disabled }), props.className)}
-      {...(props.disabled && { disabled: true })}
-    >
-      {children}
-    </button>
-  )
-);
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(({ children, compact, variant, ...rootSlot }, ref) => (
+  <button
+    ref={ref}
+    {...rootSlot}
+    className={mx(buttonStyles({ compact, variant, disabled: rootSlot.disabled }), rootSlot.className)}
+    {...(rootSlot.disabled && { disabled: true })}
+  >
+    {children}
+  </button>
+));

package/src/components/Button/ButtonGroup.tsx

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

package/src/components/Button/ButtonProps.ts

@@ -7,7 +7,5 @@ import { ComponentProps } from 'react';
 export interface ButtonProps extends ComponentProps<'button'> {
   variant?: 'default' | 'primary' | 'outline' | 'ghost';
   compact?: boolean;
-  rounding?: string;
-  spacing?: string;
   disabled?: boolean;
 }

package/src/components/Button/buttonStyles.ts

@@ -2,9 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
-
 import { defaultDisabled, defaultFocus, defaultHover, defaultActive } from '../../styles';
+import { mx } from '../../util';
 import { ButtonProps } from './ButtonProps';
 
 export const primaryButtonColors = 'bg-primary-600 text-white hover:bg-primary-650';
@@ -13,11 +12,9 @@ export const ghostButtonColors = '';
 
 export const buttonStyles = (props: ButtonProps) => {
   const resolvedVariant = props.variant || 'default';
-  return cx(
-    'inline-flex select-none items-center justify-center text-sm font-medium',
-    props.rounding ?? 'rounded-md',
-    props.spacing ?? (props.compact ? 'p-1.5' : 'pli-4 plb-2'),
-    'transition-color duration-100',
+  return mx(
+    'inline-flex select-none items-center justify-center text-sm font-medium rounded-md transition-color duration-100',
+    props.compact ? 'p-1.5' : 'pli-4 plb-2',
     defaultHover(props),
     resolvedVariant === 'default' && 'border border-neutral-100 dark:border-neutral-650',
     resolvedVariant !== 'ghost' && !props.disabled && 'hover:focus:border-neutral-100 hover:border-transparent',

package/src/components/CompoundButton/CompoundButton.tsx

@@ -2,11 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ReactNode } from 'react';
 
 import { useId } from '../../hooks';
 import { defaultDescription, primaryDescription } from '../../styles';
+import { mx } from '../../util';
 import { ButtonProps, buttonStyles } from '../Button';
 
 export interface CompoundButtonProps extends ButtonProps {
@@ -23,7 +23,7 @@ export const CompoundButton = ({ children, description, before, after, ...button
   return (
     <button
       {...buttonProps}
-      className={cx(buttonStyles(buttonProps), 'flex items-center gap-4 py-2.5', buttonProps.className)}
+      className={mx(buttonStyles(buttonProps), 'flex items-center gap-4 py-2.5', buttonProps.className)}
       aria-labelledby={labelId}
       {...(description && { 'aria-describedby': descriptionId })}
     >
@@ -37,7 +37,7 @@ export const CompoundButton = ({ children, description, before, after, ...button
         {description && (
           <p
             id={descriptionId}
-            className={cx('text-xs font-normal mb-1', variant === 'primary' ? primaryDescription : defaultDescription)}
+            className={mx('text-xs font-normal mb-1', variant === 'primary' ? primaryDescription : defaultDescription)}
           >
             {description}
           </p>

package/src/components/Dialog/Dialog.tsx

@@ -4,13 +4,23 @@
 
 import { Transition } from '@headlessui/react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import cx from 'classnames';
 import { X } from 'phosphor-react';
-import React, { Fragment, ReactNode, useState } from 'react';
+import React, { ComponentProps, Fragment, ReactNode, useState } from 'react';
 
-import { defaultDescription, defaultFocus, defaultHover } from '../../styles';
+import { defaultDescription, defaultFocus, defaultHover, getSize } from '../../styles';
+import { mx } from '../../util';
 import { Tooltip } from '../Tooltip';
 
+export interface DialogSlots {
+  overlay?: Pick<ComponentProps<typeof DialogPrimitive.Overlay>, 'className'>;
+  content?: Omit<ComponentProps<typeof DialogPrimitive.Content>, 'children'>;
+  title?: Omit<ComponentProps<typeof DialogPrimitive.Content>, 'children'>;
+  description?: Omit<ComponentProps<typeof DialogPrimitive.Description>, 'children'>;
+  close?: Pick<ComponentProps<typeof DialogPrimitive.Close>, 'className'>;
+  closeIcon?: ComponentProps<typeof X>;
+  closeTriggers?: Omit<ComponentProps<'div'>, 'children'>;
+}
+
 export interface DialogProps {
   title: ReactNode;
   openTrigger?: ReactNode;
@@ -21,6 +31,7 @@ export interface DialogProps {
   closeLabel?: string;
   initiallyOpen?: boolean;
   mountAsSibling?: boolean;
+  slots?: DialogSlots;
 }
 
 export const Dialog = ({
@@ -32,7 +43,8 @@ export const Dialog = ({
   closeTriggers,
   closeLabel,
   initiallyOpen,
-  mountAsSibling
+  mountAsSibling,
+  slots = {}
 }: DialogProps) => {
   const [isOpen, setIsOpen] = useState(!!initiallyOpen);
 
@@ -47,7 +59,11 @@ export const Dialog = ({
         leaveFrom='opacity-100'
         leaveTo='opacity-0'
       >
-        <DialogPrimitive.Overlay forceMount className='fixed inset-0 z-20 bg-black/50' />
+        <DialogPrimitive.Overlay
+          forceMount
+          {...slots.overlay}
+          className={mx('fixed inset-0 z-20 bg-black/50', slots.overlay?.className)}
+        />
       </Transition.Child>
       <Transition.Child
         as={Fragment}
@@ -60,26 +76,33 @@ export const Dialog = ({
       >
         <DialogPrimitive.Content
           forceMount
-          className={cx(
+          {...slots.content}
+          className={mx(
             'fixed z-50',
             'w-[95vw] max-w-md rounded-xl p-4 md:w-full',
             'top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
             'shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons',
-            defaultFocus
+            defaultFocus,
+            slots.content?.className
           )}
         >
           <DialogPrimitive.Title
-            className={cx(
+            {...slots.title}
+            className={mx(
               'text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md',
               titleVisuallyHidden && 'sr-only',
-              defaultFocus
+              defaultFocus,
+              slots.content?.className
             )}
             tabIndex={0}
           >
             {title}
           </DialogPrimitive.Title>
           {description && (
-            <DialogPrimitive.Description className={cx('mt-2', defaultDescription)}>
+            <DialogPrimitive.Description
+              {...slots.description}
+              className={mx('mt-2', defaultDescription, slots.description?.className)}
+            >
               {description}
             </DialogPrimitive.Description>
           )}
@@ -89,18 +112,28 @@ export const Dialog = ({
           {closeLabel && (
             <Tooltip zIndex='z-[51]' content={closeLabel}>
               <DialogPrimitive.Close
-                className={cx(
+                className={mx(
                   'absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1',
                   defaultFocus,
-                  defaultHover({})
+                  defaultHover({}),
+                  slots.close?.className
                 )}
               >
-                <X className='h-4 w-4 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400' />
+                <X
+                  className={mx(
+                    getSize(4),
+                    'text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400',
+                    slots.closeIcon?.className
+                  )}
+                />
               </DialogPrimitive.Close>
             </Tooltip>
           )}
           {closeTriggers && (
-            <div className='flex flex-wrap justify-end gap-4'>
+            <div
+              {...slots.closeTriggers}
+              className={mx('flex flex-wrap justify-end gap-4', slots.closeTriggers?.className)}
+            >
               {closeTriggers.map((closeTrigger, key) => (
                 <DialogPrimitive.Close key={key}>{closeTrigger}</DialogPrimitive.Close>
               ))}

package/src/components/Group/Group.tsx

@@ -2,11 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import cx from 'classnames';
 import React, { ReactNode } from 'react';
 
 import { useId } from '../../hooks';
-import { defaultGroup } from '../../styles/group';
+import { defaultGroup } from '../../styles';
+import { mx } from '../../util';
 import { Heading, HeadingProps } from '../Heading';
 
 export interface GroupProps extends React.ComponentProps<'div'> {
@@ -16,11 +16,16 @@ export interface GroupProps extends React.ComponentProps<'div'> {
   children?: ReactNode;
 }
 
-export const Group = ({ elevation = 3, children, label, labelVisuallyHidden, className, ...props }: GroupProps) => {
+export const Group = ({ elevation = 3, children, label, labelVisuallyHidden, ...rootSlot }: GroupProps) => {
   const labelId = useId('groupLabel');
   return (
-    <div role='group' aria-labelledby={labelId} className={cx(defaultGroup({ elevation }), className)} {...props}>
-      <Heading {...label} id={labelId} className={cx(labelVisuallyHidden && 'sr-only', 'mb-2', label?.className)} />
+    <div
+      role='group'
+      aria-labelledby={labelId}
+      {...rootSlot}
+      className={mx(defaultGroup({ elevation }), rootSlot?.className)}
+    >
+      <Heading {...label} id={labelId} className={mx(labelVisuallyHidden && 'sr-only', 'mb-2', label?.className)} />
       {children}
     </div>
   );