@dxos/react-ui 0.7.5-main.9d2a38b → 0.7.5-main.c41020f

package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts

@@ -5,41 +5,41 @@ declare const _default: {
     title: string;
     component: {
         Root: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toolbar").ToolbarProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & React.RefAttributes<HTMLDivElement>>;
-        Button: React.ForwardRefExoticComponent<Omit<import("../Buttons").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-        IconButton: React.ForwardRefExoticComponent<Omit<import("../Buttons").IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Button: React.ForwardRefExoticComponent<Omit<import("..").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        IconButton: React.ForwardRefExoticComponent<Omit<import("..").IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
         Link: React.ForwardRefExoticComponent<Omit<import("..").LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-        Toggle: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Toggle: React.ForwardRefExoticComponent<Omit<import("..").ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
         ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
         } & {
             asChild?: boolean;
         }, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & {
-            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            elevation?: import("@dxos/react-ui-types").Elevation;
             asChild?: boolean;
         }, "ref"> | Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupMultipleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
             ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
         } & {
             asChild?: boolean;
         }, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & {
-            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            elevation?: import("@dxos/react-ui-types").Elevation;
             asChild?: boolean;
         }, "ref">) & React.RefAttributes<HTMLDivElement>>;
-        ToggleGroupItem: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        ToggleGroupItem: React.ForwardRefExoticComponent<Omit<import("..").ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
         ToggleGroupIconItem: React.ForwardRefExoticComponent<Omit<import("./Toolbar").ToolbarToggleGroupIconItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
         Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-separator").SeparatorProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & {
             variant?: "gap" | "line";
         } & React.RefAttributes<HTMLDivElement>>;
     };
-    render: (props: StorybookToolbarProps) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
+    render: (props: StorybookToolbarProps) => import("react/jsx-runtime").JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {
             disableSnapshot: boolean;

package/dist/types/src/components/Tooltip/Tooltip.d.ts

@@ -13,10 +13,10 @@ export declare const Tooltip: {
     Portal: React.FC<TooltipPortalPrimitiveProps>;
     Trigger: React.ForwardRefExoticComponent<TooltipTriggerPrimitiveProps & React.RefAttributes<HTMLButtonElement>>;
     Arrow: React.ForwardRefExoticComponent<Omit<TooltipArrowPrimitiveProps, "className"> & {
-        classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        classNames?: import("@dxos/react-ui-types").ClassNameValue;
     } & React.RefAttributes<SVGSVGElement>>;
     Content: React.ForwardRefExoticComponent<Omit<TooltipContentPrimitiveProps, "className"> & {
-        classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        classNames?: import("@dxos/react-ui-types").ClassNameValue;
     } & React.RefAttributes<HTMLDivElement>>;
 };
 export type { TooltipProviderProps, TooltipRootProps, TooltipPortalProps, TooltipTriggerProps, TooltipArrowProps, TooltipContentProps, };

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts

@@ -2,6 +2,7 @@ import '@dxos-theme';
 import React from 'react';
 type StoryTooltipProps = {
     content: string;
+    defaultOpen?: boolean;
 };
 declare const _default: {
     title: string;
@@ -11,14 +12,14 @@ declare const _default: {
         Portal: React.FC<import("@radix-ui/react-tooltip").TooltipPortalProps>;
         Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
         Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipArrowProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & React.RefAttributes<SVGSVGElement>>;
         Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipContentProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+            classNames?: import("@dxos/react-ui-types").ClassNameValue;
         } & React.RefAttributes<HTMLDivElement>>;
     };
-    render: ({ content }: StoryTooltipProps) => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
+    render: ({ content, defaultOpen }: StoryTooltipProps) => import("react/jsx-runtime").JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {
             disableSnapshot: boolean;
@@ -36,4 +37,15 @@ export declare const Default: {
         };
     };
 };
+export declare const Testing: {
+    args: {
+        defaultOption: boolean;
+        content: string;
+    };
+    parameters: {
+        chromatic: {
+            delay: number;
+        };
+    };
+};
 //# sourceMappingURL=Tooltip.stories.d.ts.map

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;;;;;;;;;;;;;;;0BAEiC,iBAAiB;;;;;;;;AAcpD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;uCAE8C,iBAAiB;;;;;;;;AAcjE,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAQnB,CAAC"}

package/dist/types/src/hooks/useThemeContext.d.ts

@@ -1,2 +1,2 @@
-export declare const useThemeContext: () => import("../components").ThemeContextValue;
+export declare const useThemeContext: () => import("..").ThemeContextValue;
 //# sourceMappingURL=useThemeContext.d.ts.map

package/dist/types/src/hooks/useThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useThemeContext.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe,iDAA6E,CAAC"}
+{"version":3,"file":"useThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useThemeContext.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe,sCAA6E,CAAC"}

package/dist/types/src/hooks/useTranslationsContext.d.ts

@@ -1,5 +1,5 @@
 export declare const useTranslationsContext: () => {
     appNs: string;
-    dtLocale: import("date-fns/types").Locale;
+    dtLocale: import("date-fns/locale").Locale;
 };
 //# sourceMappingURL=useTranslationsContext.d.ts.map

package/dist/types/src/playground/Controls.stories.d.ts

@@ -1,10 +1,9 @@
 import '@dxos-theme';
-import React from 'react';
 export declare const Default: {};
 declare const _default: {
     title: string;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
+    render: () => import("react/jsx-runtime").JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {
             disableSnapshot: boolean;

package/dist/types/src/playground/Controls.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4ExC,eAAO,MAAM,OAAO,IAAK,CAAC;;;;;;;;;;;AAE1B,wBAKE"}
+{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AA+ErB,eAAO,MAAM,OAAO,IAAK,CAAC;;;;;;;;;;;AAE1B,wBAKE"}

package/dist/types/src/playground/Typography.stories.d.ts

@@ -1,9 +1,8 @@
 import '@dxos-theme';
-import React from 'react';
 declare const _default: {
     title: string;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
+    render: () => import("react/jsx-runtime").JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {
             disableSnapshot: boolean;

package/dist/types/src/playground/Typography.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Typography.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;AAuC1B,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Typography.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;;;;;;;;;;;AAyCrB,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { type ClassNameValue } from '@dxos/react-ui-types';
-export type ThemedClassName<P> = Omit<P, 'className'> & {
+export type ThemedClassName<P = {}> = Omit<P, 'className'> & {
     classNames?: ClassNameValue;
 };
 //# sourceMappingURL=ThemedClassName.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}
+{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,EAAE,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.c41020f",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -24,49 +25,49 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-alert-dialog": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.2",
-    "@radix-ui/react-checkbox": "^1.0.3",
-    "@radix-ui/react-collapsible": "^1.0.2",
-    "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dismissable-layer": "^1.1.1",
-    "@radix-ui/react-focus-guards": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.0",
-    "@radix-ui/react-id": "^1.1.0",
-    "@radix-ui/react-menu": "^2.0.6",
-    "@radix-ui/react-popper": "^1.1.2",
-    "@radix-ui/react-portal": "^1.1.2",
-    "@radix-ui/react-presence": "^1.1.1",
-    "@radix-ui/react-primitive": "^1.0.2",
-    "@radix-ui/react-scroll-area": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slot": "^1.0.1",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-toast": "^1.2.1",
-    "@radix-ui/react-toggle": "^1.0.2",
-    "@radix-ui/react-toggle-group": "^1.0.3",
-    "@radix-ui/react-toolbar": "^1.0.3",
-    "@radix-ui/react-tooltip": "^1.1.2",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/primitive": "1.1.1",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-avatar": "1.1.3",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-context-menu": "2.2.6",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dismissable-layer": "1.1.5",
+    "@radix-ui/react-focus-guards": "1.1.1",
+    "@radix-ui/react-focus-scope": "1.1.2",
+    "@radix-ui/react-id": "1.1.0",
+    "@radix-ui/react-menu": "2.1.6",
+    "@radix-ui/react-popper": "1.2.2",
+    "@radix-ui/react-portal": "1.1.4",
+    "@radix-ui/react-presence": "1.1.2",
+    "@radix-ui/react-primitive": "2.0.2",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-toast": "1.2.6",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-toolbar": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/react-input": "0.7.5-main.9d2a38b",
-    "@dxos/react-hooks": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-types": "0.7.5-main.9d2a38b",
-    "@dxos/react-list": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/debug": "0.7.5-main.c41020f",
+    "@dxos/react-hooks": "0.7.5-main.c41020f",
+    "@dxos/log": "0.7.5-main.c41020f",
+    "@dxos/react-list": "0.7.5-main.c41020f",
+    "@dxos/react-input": "0.7.5-main.c41020f",
+    "@dxos/react-ui-types": "0.7.5-main.c41020f",
+    "@dxos/util": "0.7.5-main.c41020f"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -78,15 +79,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/random": "0.7.5-main.c41020f",
+    "@dxos/react-ui-theme": "0.7.5-main.c41020f",
+    "@dxos/util": "0.7.5-main.c41020f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui-theme": "0.7.5-main.c41020f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.tsx

@@ -5,8 +5,8 @@
 import {
   Root as AvatarRootPrimitive,
   type AvatarProps as AvatarRootPrimitiveProps,
-  type ImageLoadingStatus,
   Fallback as AvatarFallbackPrimitive,
+  type AvatarImageProps as AvatarImagePrimitiveProps,
 } from '@radix-ui/react-avatar';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -112,15 +112,10 @@ const AvatarFrame = forwardRef<HTMLSpanElement, AvatarFrameProps>(
             </mask>
           </defs>
           {variant === 'circle' ? (
-            <circle
-              className={hue ? tx('hue.fill', 'avatar__frame__circle', { hue }) : 'fill-[var(--surface-bg)]'}
-              cx='50%'
-              cy='50%'
-              r={r}
-            />
+            <circle cx='50%' cy='50%' r={r} fill={hue ? `var(--dx-${hue}Fill)` : 'var(--surface-bg)'} />
           ) : (
             <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}
@@ -243,9 +238,7 @@ const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
   );
 };
 
-type AvatarImageProps = ComponentPropsWithRef<'image'> & {
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+type AvatarImageProps = ComponentPropsWithRef<'image'> & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
   ({ onLoadingStatusChange, ...props }, forwardedRef) => {
@@ -264,8 +257,7 @@ const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
 
 type AvatarIconProps = {
   icon: string;
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
-};
+} & Pick<AvatarImagePrimitiveProps, 'onLoadingStatusChange'>;
 
 const AvatarIcon = forwardRef<SVGSVGElement, AvatarIconProps>(({ onLoadingStatusChange, ...props }, forwardedRef) => {
   const { size } = useAvatarContext('AvatarIcon');

package/src/components/Buttons/IconButton.tsx

@@ -8,25 +8,33 @@ import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
-import { Tooltip } from '../Tooltip';
+import { Tooltip, type TooltipContentProps } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
     label: NonNullable<ReactNode>;
     iconOnly?: boolean;
+    noTooltip?: boolean;
     caretDown?: boolean;
     // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipZIndex?: string;
+    tooltipSide?: TooltipContentProps['side'];
     suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+  (
+    { noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props },
+    forwardedRef,
+  ) => {
     const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+    if (noTooltip) {
+      return <LabelledIconButton {...props} ref={forwardedRef} />;
+    }
     const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })}>
+      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
         {props.label}
         <Tooltip.Arrow />
       </Tooltip.Content>

package/src/components/Clipboard/CopyButton.tsx

@@ -44,11 +44,15 @@ export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButto
   );
 };
 
-export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonProps) => {
+type CopyButtonIconOnlyProps = CopyButtonProps & {
+  label?: string;
+};
+
+export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonIconOnlyProps) => {
   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] = useState(false);
   return (
     <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>

package/src/components/Dialogs/AlertDialog.tsx

@@ -95,7 +95,9 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
+type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
+  blockAlign?: 'center' | 'start' | 'end';
+};
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,

package/src/components/Dialogs/Dialog.stories.tsx

@@ -59,7 +59,7 @@ export const Default = {
   argTypes: {
     blockAlign: {
       type: 'select',
-      options: ['center', 'start'],
+      options: ['center', 'start', 'end'],
     },
   },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -85,7 +85,7 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   inOverlayLayout: false,
 });
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' };
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -106,17 +106,22 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
 
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps>;
+type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
         {...props}
-        className={tx('dialog.content', 'dialog', { inOverlayLayout }, classNames)}
+        className={tx(
+          'dialog.content',
+          'dialog',
+          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
+          classNames,
+        )}
         ref={forwardedRef}
       >
         {children}

package/src/components/Icon/Icon.tsx

@@ -12,7 +12,10 @@ import { type ThemedClassName } from '../../util';
 
 const ICONS_URL = '/icons.svg';
 
-export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
+export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
+  icon: string;
+  size?: Size;
+};
 
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {

package/src/components/Input/Input.tsx

@@ -307,7 +307,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     return (
       <input
         type='checkbox'
-        className='ch-checkbox--switch ch-focus-ring'
+        className='dx-checkbox--switch dx-focus-ring'
         checked={checked}
         onChange={(event) => {
           onCheckedChange(event.target.checked);

package/src/components/Lists/ListDropIndicator.tsx

@@ -15,8 +15,10 @@ const edgeToOrientationMap: Record<Edge, Orientation> = {
 };
 
 const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
-  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]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {
@@ -33,14 +35,19 @@ const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
 export type DropIndicatorProps = {
   edge: Edge;
   gap?: number;
+  terminalInset?: number;
+  lineInset?: number;
 };
 
 /**
  * This is a tailwind port of `@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box`
  */
-export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-
+export const ListDropIndicator = ({
+  edge,
+  gap = 0,
+  lineInset = 0,
+  terminalInset = lineInset - terminalSize,
+}: DropIndicatorProps) => {
   const orientation = edgeToOrientationMap[edge];
 
   return (
@@ -49,10 +56,11 @@ export const ListDropIndicator = ({ edge, gap = 0 }: DropIndicatorProps) => {
       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`,
         } as CSSProperties
       }

package/src/components/Main/Main.stories.tsx

@@ -24,7 +24,7 @@ const ComplementarySidebarToggle = () => {
 
 const StoryMain = (_args: StoryMainArgs) => {
   return (
-    <Main.Root defaultComplementarySidebarOpen>
+    <Main.Root>
       <Main.Overlay />
       <Main.NavigationSidebar classNames='p-4'>
         <p>Navigation sidebar content, hi!</p>