@dxos/react-ui 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

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

@@ -1,21 +1,27 @@
+import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React from 'react';
 import { type ThemedClassName } from '../../util';
-import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps, type ToggleProps } from '../Buttons';
+import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps, type ToggleProps, type IconButtonProps } from '../Buttons';
 import { type LinkProps } from '../Link';
 import { type SeparatorProps } from '../Separator';
 type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps>;
 type ToolbarButtonProps = ButtonProps;
+type ToolbarIconButtonProps = IconButtonProps;
 type ToolbarToggleProps = ToggleProps;
 type ToolbarLinkProps = LinkProps;
 type ToolbarToggleGroupProps = (Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, 'className'> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps, 'className'>) & ButtonGroupProps;
 type ToolbarToggleGroupItemProps = ToggleGroupItemProps;
-type ToolbarSeparatorProps = SeparatorProps;
+type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+type ToolbarSeparatorProps = SeparatorProps & {
+    variant?: 'gap' | 'line';
+};
 export declare const Toolbar: {
     Root: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.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<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
     Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -23,23 +29,27 @@ export declare const Toolbar: {
     } & {
         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<ToolbarPrimitive.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<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Separator: (props: SeparatorProps) => React.JSX.Element;
-    Expander: () => React.JSX.Element;
+    ToggleGroupIconItem: React.ForwardRefExoticComponent<Omit<ToolbarToggleGroupIconItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-separator").SeparatorProps, "className"> & {
+        classNames?: import("@dxos/react-ui-types").ClassNameValue;
+    } & {
+        variant?: "gap" | "line";
+    } & React.RefAttributes<HTMLDivElement>>;
 };
-export type { ToolbarRootProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarToggleProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarSeparatorProps, };
+export type { ToolbarRootProps, ToolbarButtonProps, ToolbarIconButtonProps, ToolbarLinkProps, ToolbarToggleProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarToggleGroupIconItemProps, ToolbarSeparatorProps, };
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,oBAAoB,EACzB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,qBAAqB,GAAG,cAAc,CAAC;AAY5C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAVa,cAAc;;CAmB9C,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,GACtB,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,IAAI,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC1G,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAEhB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,sBAAsB,GAAG,eAAe,CAAC;AAU9C,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,+BAA+B,GAAG,IAAI,CAAC,6BAA6B,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC;AAY1G,KAAK,qBAAqB,GAAG,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAC;AAc3E,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAdsC,KAAK,GAAG,MAAM;;CAwBvE,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,+BAA+B,EAC/B,qBAAqB,GACtB,CAAC"}

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

@@ -5,36 +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>>;
+        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>>;
-        Separator: (props: import("..").SeparatorProps) => React.JSX.Element;
-        Expander: () => React.JSX.Element;
+        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("@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/Toolbar/Toolbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,oBAAoB,IAAI,6BAA6B,EAE1D,KAAK,YAAY,IAAI,yBAAyB,EAC9C,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,iBAAiB,IAAI,0BAA0B,EAErD,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,oBAAoB,GAAG,6BAA6B,CAAC;AAI1D,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,mBAAmB,GAAG,4BAA4B,CAAC;AAIxD,KAAK,iBAAiB,GAAG,eAAe,CAAC,0BAA0B,CAAC,CAAC;AAarE,KAAK,mBAAmB,GAAG,eAAe,CAAC,4BAA4B,CAAC,CAAC;AAgBzE,eAAO,MAAM,OAAO;;;;;;;;;;;CAOnB,CAAC;AAEF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,oBAAoB,IAAI,6BAA6B,EAE1D,KAAK,YAAY,IAAI,yBAAyB,EAC9C,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,iBAAiB,IAAI,0BAA0B,EAErD,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,oBAAoB,GAAG,6BAA6B,CAAC;AAI1D,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,mBAAmB,GAAG,4BAA4B,CAAC;AAIxD,KAAK,iBAAiB,GAAG,eAAe,CAAC,0BAA0B,CAAC,CAAC;AAarE,KAAK,mBAAmB,GAAG,eAAe,CAAC,4BAA4B,CAAC,CAAC;AAmBzE,eAAO,MAAM,OAAO;;;;;;;;;;;CAOnB,CAAC;AAEF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,GACpB,CAAC"}

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/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useDensityContext';
 export * from './useElevationContext';
+export * from './useSafeArea';
 export * from './useTranslationsContext';
 export * from './useThemeContext';
 export * from './useVisualViewport';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

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

@@ -0,0 +1,9 @@
+export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
+export declare const initialSafeArea: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const useSafeArea: () => SafeAreaPadding;
+//# sourceMappingURL=useSafeArea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;AAElF,eAAO,MAAM,eAAe;;;;;CAAmD,CAAC;AAEhF,eAAO,MAAM,WAAW,QAAO,eAY9B,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type TooltipContentProps } from '@radix-ui/react-tooltip';
+type PaddingProp = TooltipContentProps['collisionPadding'];
+export declare const useSafeCollisionPadding: (collisionPadding?: PaddingProp) => {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export {};
+//# sourceMappingURL=useSafeCollisionPadding.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeCollisionPadding.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSafeCollisionPadding.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAMnE,KAAK,WAAW,GAAG,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;AAiB3D,eAAO,MAAM,uBAAuB,sBAAuB,WAAW;;;;;CAWrE,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/hooks/useVisualViewport.d.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { type useEffect } from 'react';
 export declare const useVisualViewport: (deps?: Parameters<typeof useEffect>[1]) => {
     width: number | null;
     height: number | null;

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

@@ -1 +1 @@
-{"version":3,"file":"useVisualViewport.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useVisualViewport.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,iBAAiB,UAAW,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;;;CAiBvE,CAAC"}
+{"version":3,"file":"useVisualViewport.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useVisualViewport.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAI9D,eAAO,MAAM,iBAAiB,UAAW,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;;;CAcvE,CAAC"}

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/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.2"}
+{"version":"5.7.3"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.5-main.9d26e3a",
+  "version": "0.7.5-main.b19bfc8",
   "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.9d26e3a",
-    "@dxos/log": "0.7.5-main.9d26e3a",
-    "@dxos/react-hooks": "0.7.5-main.9d26e3a",
-    "@dxos/react-input": "0.7.5-main.9d26e3a",
-    "@dxos/react-list": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-types": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/debug": "0.7.5-main.b19bfc8",
+    "@dxos/react-input": "0.7.5-main.b19bfc8",
+    "@dxos/log": "0.7.5-main.b19bfc8",
+    "@dxos/react-list": "0.7.5-main.b19bfc8",
+    "@dxos/react-hooks": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-types": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8"
   },
   "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.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/random": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a"
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
   },
   "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

@@ -2,34 +2,55 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
 
 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: string;
+    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, ...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>
     );
     return (
-      <Tooltip.Root>
+      <Tooltip.Root
+        open={triggerTooltipOpen}
+        onOpenChange={(nextOpen) => {
+          if (suppressNextTooltip?.current) {
+            setTriggerTooltipOpen(false);
+            suppressNextTooltip.current = false;
+          } else {
+            setTriggerTooltipOpen(nextOpen);
+          }
+        }}
+      >
         <Tooltip.Trigger asChild>
           <LabelledIconButton {...props} ref={forwardedRef} />
         </Tooltip.Trigger>
@@ -40,12 +61,16 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+  (
+    { icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>
         <Icon icon={icon} size={size} classNames={iconClassNames} />
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+        {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },

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}>