@adecore/ui 0.44.4 → 0.45.0

package/dist/ProjectSwitcher.d.ts

@@ -20,11 +20,12 @@ export interface ProjectSwitcherProps<Item extends ProjectSwitcherItem = Project
     children?: ReactNode;
     label?: string;
     disabled?: boolean;
+    tabIndex?: number;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: ComponentProps<typeof Menu.Root>['onOpenChange'];
     className?: string;
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function ProjectSwitcher<Item extends ProjectSwitcherItem>({ current, projects, recentProjects, onSelect, leading, before, children, label, disabled, open, defaultOpen, onOpenChange, className, ref }: ProjectSwitcherProps<Item>): import("react").JSX.Element;
+export declare function ProjectSwitcher<Item extends ProjectSwitcherItem>({ current, projects, recentProjects, onSelect, leading, before, children, label, disabled, tabIndex, open, defaultOpen, onOpenChange, className, ref }: ProjectSwitcherProps<Item>): import("react").JSX.Element;
 export declare function ProjectSwitcherGroups<Item extends ProjectSwitcherItem>({ projects, recentProjects, before, children, onSelect }: Pick<ProjectSwitcherProps<Item>, 'projects' | 'recentProjects' | 'before' | 'children' | 'onSelect'>): import("react").JSX.Element;

package/dist/ProjectSwitcher.js

@@ -7,7 +7,7 @@ import * as Menu from './menu/index.parts.js';
 import { ProjectSwitcherRow } from "./project-switcher-row.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function ProjectSwitcher(t0) {
-  const $ = _c(28);
+  const $ = _c(29);
   const {
     current,
     projects,
@@ -18,6 +18,7 @@ export function ProjectSwitcher(t0) {
     children,
     label,
     disabled,
+    tabIndex,
     open,
     defaultOpen,
     onOpenChange,
@@ -71,10 +72,11 @@ export function ProjectSwitcher(t0) {
     t7 = $[7];
   }
   let t8;
-  if ($[8] !== disabled || $[9] !== leading || $[10] !== ref || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t6) {
+  if ($[8] !== disabled || $[9] !== leading || $[10] !== ref || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t6 || $[15] !== tabIndex) {
     t8 = /*#__PURE__*/_jsxs(Menu.Trigger, {
       ref: ref,
       disabled: disabled,
+      tabIndex: tabIndex,
       "aria-label": t2,
       className: t3,
       children: [leading, t4, t6, t7]
@@ -86,12 +88,13 @@ export function ProjectSwitcher(t0) {
     $[12] = t3;
     $[13] = t4;
     $[14] = t6;
-    $[15] = t8;
+    $[15] = tabIndex;
+    $[16] = t8;
   } else {
-    t8 = $[15];
+    t8 = $[16];
   }
   let t9;
-  if ($[16] !== before || $[17] !== children || $[18] !== onSelect || $[19] !== projects || $[20] !== recentProjects) {
+  if ($[17] !== before || $[18] !== children || $[19] !== onSelect || $[20] !== projects || $[21] !== recentProjects) {
     t9 = /*#__PURE__*/_jsx(Menu.Popup, {
       className: "min-w-60",
       children: /*#__PURE__*/_jsx(ProjectSwitcherGroups, {
@@ -102,31 +105,31 @@ export function ProjectSwitcher(t0) {
         children: children
       })
     });
-    $[16] = before;
-    $[17] = children;
-    $[18] = onSelect;
-    $[19] = projects;
-    $[20] = recentProjects;
-    $[21] = t9;
+    $[17] = before;
+    $[18] = children;
+    $[19] = onSelect;
+    $[20] = projects;
+    $[21] = recentProjects;
+    $[22] = t9;
   } else {
-    t9 = $[21];
+    t9 = $[22];
   }
   let t10;
-  if ($[22] !== defaultOpen || $[23] !== onOpenChange || $[24] !== open || $[25] !== t8 || $[26] !== t9) {
+  if ($[23] !== defaultOpen || $[24] !== onOpenChange || $[25] !== open || $[26] !== t8 || $[27] !== t9) {
     t10 = /*#__PURE__*/_jsxs(Menu.Root, {
       open: open,
       defaultOpen: defaultOpen,
       onOpenChange: onOpenChange,
       children: [t8, t9]
     });
-    $[22] = defaultOpen;
-    $[23] = onOpenChange;
-    $[24] = open;
-    $[25] = t8;
-    $[26] = t9;
-    $[27] = t10;
+    $[23] = defaultOpen;
+    $[24] = onOpenChange;
+    $[25] = open;
+    $[26] = t8;
+    $[27] = t9;
+    $[28] = t10;
   } else {
-    t10 = $[27];
+    t10 = $[28];
   }
   return t10;
 }

package/dist/ZoomControls.d.ts

@@ -1,4 +1,5 @@
 import type { Ref } from 'react';
+import { type IconButtonSize } from './IconButton.tsx';
 import type { Shortcut } from './shortcut.ts';
 export interface ZoomSelection {
     label: string;
@@ -24,7 +25,9 @@ export interface ZoomControlsProps {
         fitAll?: Shortcut;
     };
     selection?: ZoomSelection;
+    size?: Extract<IconButtonSize, 'md' | 'sm'>;
+    side?: 'top' | 'bottom';
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function ZoomControls({ zoom, onZoomChange, onFitAll, presets, labels, shortcuts, selection, className, ref }: ZoomControlsProps): import("react").JSX.Element;
+export declare function ZoomControls({ zoom, onZoomChange, onFitAll, presets, labels, shortcuts, selection, size, side, className, ref }: ZoomControlsProps): import("react").JSX.Element;

package/dist/ZoomControls.js

@@ -1,4 +1,5 @@
 import { c as _c } from "react/compiler-runtime";
+import clsx from 'clsx';
 import { Maximize, Minus, Plus, Scan } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from "./ButtonGroup.js";
@@ -8,7 +9,12 @@ import { Kbd } from "./Kbd.js";
 import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu/parts.js";
 import { Tooltip } from "./Tooltip.js";
 import { activeZoomPreset, steppedZoom, ZOOM_PRESETS } from './zoom.js';
+/* The percentage between the buttons, at the height and radius of the buttons beside it. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TRIGGER_SIZE = {
+  md: 'h-8 min-w-14 rounded-lg',
+  sm: 'h-7 min-w-12 rounded-md'
+};
 function MenuIcon(t0) {
   const $ = _c(2);
   const {
@@ -31,7 +37,7 @@ function MenuIcon(t0) {
   return t1;
 }
 export function ZoomControls(t0) {
-  const $ = _c(80);
+  const $ = _c(87);
   const {
     zoom,
     onZoomChange,
@@ -40,125 +46,141 @@ export function ZoomControls(t0) {
     labels: t2,
     shortcuts: t3,
     selection,
+    size: t4,
+    side: t5,
     className,
     ref
   } = t0;
   const presets = t1 === undefined ? ZOOM_PRESETS : t1;
-  let t4;
+  let t6;
   if ($[0] !== t2) {
-    t4 = t2 === undefined ? {} : t2;
+    t6 = t2 === undefined ? {} : t2;
     $[0] = t2;
-    $[1] = t4;
+    $[1] = t6;
   } else {
-    t4 = $[1];
+    t6 = $[1];
   }
-  const labels = t4;
-  let t5;
+  const labels = t6;
+  let t7;
   if ($[2] !== t3) {
-    t5 = t3 === undefined ? {} : t3;
+    t7 = t3 === undefined ? {} : t3;
     $[2] = t3;
-    $[3] = t5;
+    $[3] = t7;
   } else {
-    t5 = $[3];
+    t7 = $[3];
   }
-  const shortcuts = t5;
+  const shortcuts = t7;
+  const size = t4 === undefined ? "md" : t4;
+  const side = t5 === undefined ? "top" : t5;
   const {
     t
   } = useTranslation("ui");
-  let t6;
+  let t8;
   if ($[4] !== presets || $[5] !== zoom) {
-    t6 = activeZoomPreset(zoom, presets);
+    t8 = activeZoomPreset(zoom, presets);
     $[4] = presets;
     $[5] = zoom;
-    $[6] = t6;
+    $[6] = t8;
   } else {
-    t6 = $[6];
+    t8 = $[6];
   }
-  const preset = t6;
-  let t7;
+  const preset = t8;
+  let t9;
   if ($[7] !== labels.out || $[8] !== t) {
-    t7 = labels.out ?? t("zoom.out");
+    t9 = labels.out ?? t("zoom.out");
     $[7] = labels.out;
     $[8] = t;
-    $[9] = t7;
+    $[9] = t9;
   } else {
-    t7 = $[9];
+    t9 = $[9];
   }
-  let t8;
+  let t10;
   if ($[10] !== onZoomChange || $[11] !== zoom) {
-    t8 = () => onZoomChange(steppedZoom(zoom, -10));
+    t10 = () => onZoomChange(steppedZoom(zoom, -10));
     $[10] = onZoomChange;
     $[11] = zoom;
-    $[12] = t8;
+    $[12] = t10;
   } else {
-    t8 = $[12];
+    t10 = $[12];
   }
-  let t9;
-  if ($[13] !== t7 || $[14] !== t8) {
-    t9 = /*#__PURE__*/_jsx(IconButton, {
+  let t11;
+  if ($[13] !== size || $[14] !== t10 || $[15] !== t9) {
+    t11 = /*#__PURE__*/_jsx(IconButton, {
       icon: Minus,
-      label: t7,
-      onClick: t8
+      size: size,
+      label: t9,
+      onClick: t10
     });
-    $[13] = t7;
-    $[14] = t8;
+    $[13] = size;
+    $[14] = t10;
     $[15] = t9;
+    $[16] = t11;
   } else {
-    t9 = $[15];
+    t11 = $[16];
   }
-  let t10;
-  if ($[16] !== labels.presets || $[17] !== t) {
-    t10 = labels.presets ?? t("zoom.presets");
-    $[16] = labels.presets;
-    $[17] = t;
-    $[18] = t10;
+  let t12;
+  if ($[17] !== labels.presets || $[18] !== t) {
+    t12 = labels.presets ?? t("zoom.presets");
+    $[17] = labels.presets;
+    $[18] = t;
+    $[19] = t12;
   } else {
-    t10 = $[18];
+    t12 = $[19];
   }
-  let t11;
-  if ($[19] !== zoom) {
-    t11 = Math.round(zoom * 100);
-    $[19] = zoom;
-    $[20] = t11;
+  const t13 = TRIGGER_SIZE[size];
+  let t14;
+  if ($[20] !== t13) {
+    t14 = clsx(t13, "px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text");
+    $[20] = t13;
+    $[21] = t14;
   } else {
-    t11 = $[20];
+    t14 = $[21];
   }
-  let t12;
-  if ($[21] !== t11) {
-    t12 = /*#__PURE__*/_jsxs(MenuTrigger, {
-      className: "h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text",
-      children: [t11, "%"]
+  let t15;
+  if ($[22] !== zoom) {
+    t15 = Math.round(zoom * 100);
+    $[22] = zoom;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== t14 || $[25] !== t15) {
+    t16 = /*#__PURE__*/_jsxs(MenuTrigger, {
+      className: t14,
+      children: [t15, "%"]
     });
-    $[21] = t11;
-    $[22] = t12;
+    $[24] = t14;
+    $[25] = t15;
+    $[26] = t16;
   } else {
-    t12 = $[22];
+    t16 = $[26];
   }
-  let t13;
-  if ($[23] !== t10 || $[24] !== t12) {
-    t13 = /*#__PURE__*/_jsx(Tooltip, {
-      label: t10,
-      children: t12
+  let t17;
+  if ($[27] !== t12 || $[28] !== t16) {
+    t17 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t12,
+      children: t16
     });
-    $[23] = t10;
-    $[24] = t12;
-    $[25] = t13;
+    $[27] = t12;
+    $[28] = t16;
+    $[29] = t17;
   } else {
-    t13 = $[25];
+    t17 = $[29];
   }
-  let t14;
-  if ($[26] !== onZoomChange) {
-    t14 = value => onZoomChange(value / 100);
-    $[26] = onZoomChange;
-    $[27] = t14;
+  let t18;
+  if ($[30] !== onZoomChange) {
+    t18 = value => onZoomChange(value / 100);
+    $[30] = onZoomChange;
+    $[31] = t18;
   } else {
-    t14 = $[27];
+    t18 = $[31];
   }
-  let t15;
-  if ($[28] !== presets || $[29] !== shortcuts.zoomReset) {
-    let t16;
-    if ($[31] !== shortcuts.zoomReset) {
-      t16 = percent => /*#__PURE__*/_jsxs(MenuRadioItem, {
+  let t19;
+  if ($[32] !== presets || $[33] !== shortcuts.zoomReset) {
+    let t20;
+    if ($[35] !== shortcuts.zoomReset) {
+      t20 = percent => /*#__PURE__*/_jsxs(MenuRadioItem, {
         value: percent,
         children: [/*#__PURE__*/_jsxs("span", {
           className: "tabular-nums",
@@ -167,83 +189,83 @@ export function ZoomControls(t0) {
           shortcut: shortcuts.zoomReset
         })]
       }, percent);
-      $[31] = shortcuts.zoomReset;
-      $[32] = t16;
+      $[35] = shortcuts.zoomReset;
+      $[36] = t20;
     } else {
-      t16 = $[32];
+      t20 = $[36];
     }
-    t15 = presets.map(t16);
-    $[28] = presets;
-    $[29] = shortcuts.zoomReset;
-    $[30] = t15;
+    t19 = presets.map(t20);
+    $[32] = presets;
+    $[33] = shortcuts.zoomReset;
+    $[34] = t19;
   } else {
-    t15 = $[30];
+    t19 = $[34];
   }
-  let t16;
-  if ($[33] !== preset || $[34] !== t14 || $[35] !== t15) {
-    t16 = /*#__PURE__*/_jsx(MenuRadioGroup, {
+  let t20;
+  if ($[37] !== preset || $[38] !== t18 || $[39] !== t19) {
+    t20 = /*#__PURE__*/_jsx(MenuRadioGroup, {
       value: preset,
-      onValueChange: t14,
-      children: t15
+      onValueChange: t18,
+      children: t19
     });
-    $[33] = preset;
-    $[34] = t14;
-    $[35] = t15;
-    $[36] = t16;
+    $[37] = preset;
+    $[38] = t18;
+    $[39] = t19;
+    $[40] = t20;
   } else {
-    t16 = $[36];
+    t20 = $[40];
   }
-  let t17;
-  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-    t17 = /*#__PURE__*/_jsx(MenuSeparator, {});
-    $[37] = t17;
+  let t21;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = /*#__PURE__*/_jsx(MenuSeparator, {});
+    $[41] = t21;
   } else {
-    t17 = $[37];
+    t21 = $[41];
   }
-  let t18;
-  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-    t18 = /*#__PURE__*/_jsx(MenuIcon, {
+  let t22;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /*#__PURE__*/_jsx(MenuIcon, {
       icon: Maximize
     });
-    $[38] = t18;
+    $[42] = t22;
   } else {
-    t18 = $[38];
+    t22 = $[42];
   }
-  let t19;
-  if ($[39] !== labels.fit || $[40] !== t) {
-    t19 = labels.fit ?? t("zoom.fit");
-    $[39] = labels.fit;
-    $[40] = t;
-    $[41] = t19;
+  let t23;
+  if ($[43] !== labels.fit || $[44] !== t) {
+    t23 = labels.fit ?? t("zoom.fit");
+    $[43] = labels.fit;
+    $[44] = t;
+    $[45] = t23;
   } else {
-    t19 = $[41];
+    t23 = $[45];
   }
-  let t20;
-  if ($[42] !== shortcuts.fitAll) {
-    t20 = shortcuts.fitAll && /*#__PURE__*/_jsx(Kbd, {
+  let t24;
+  if ($[46] !== shortcuts.fitAll) {
+    t24 = shortcuts.fitAll && /*#__PURE__*/_jsx(Kbd, {
       shortcut: shortcuts.fitAll
     });
-    $[42] = shortcuts.fitAll;
-    $[43] = t20;
+    $[46] = shortcuts.fitAll;
+    $[47] = t24;
   } else {
-    t20 = $[43];
+    t24 = $[47];
   }
-  let t21;
-  if ($[44] !== onFitAll || $[45] !== t19 || $[46] !== t20) {
-    t21 = /*#__PURE__*/_jsxs(MenuItem, {
+  let t25;
+  if ($[48] !== onFitAll || $[49] !== t23 || $[50] !== t24) {
+    t25 = /*#__PURE__*/_jsxs(MenuItem, {
       onClick: onFitAll,
-      children: [t18, t19, " ", t20]
+      children: [t22, t23, " ", t24]
     });
-    $[44] = onFitAll;
-    $[45] = t19;
-    $[46] = t20;
-    $[47] = t21;
+    $[48] = onFitAll;
+    $[49] = t23;
+    $[50] = t24;
+    $[51] = t25;
   } else {
-    t21 = $[47];
+    t25 = $[51];
   }
-  let t22;
-  if ($[48] !== selection) {
-    t22 = selection && /*#__PURE__*/_jsxs(MenuItem, {
+  let t26;
+  if ($[52] !== selection) {
+    t26 = selection && /*#__PURE__*/_jsxs(MenuItem, {
       disabled: !selection.enabled,
       onClick: selection.onZoom,
       children: [/*#__PURE__*/_jsx(MenuIcon, {
@@ -252,109 +274,114 @@ export function ZoomControls(t0) {
         shortcut: selection.shortcut
       })]
     });
-    $[48] = selection;
-    $[49] = t22;
+    $[52] = selection;
+    $[53] = t26;
   } else {
-    t22 = $[49];
+    t26 = $[53];
   }
-  let t23;
-  if ($[50] !== t16 || $[51] !== t21 || $[52] !== t22) {
-    t23 = /*#__PURE__*/_jsxs(MenuPopup, {
-      side: "top",
+  let t27;
+  if ($[54] !== side || $[55] !== t20 || $[56] !== t25 || $[57] !== t26) {
+    t27 = /*#__PURE__*/_jsxs(MenuPopup, {
+      side: side,
       sideOffset: 10,
       align: "center",
       className: "min-w-44",
-      children: [t16, t17, t21, t22]
+      children: [t20, t21, t25, t26]
     });
-    $[50] = t16;
-    $[51] = t21;
-    $[52] = t22;
-    $[53] = t23;
+    $[54] = side;
+    $[55] = t20;
+    $[56] = t25;
+    $[57] = t26;
+    $[58] = t27;
   } else {
-    t23 = $[53];
+    t27 = $[58];
   }
-  let t24;
-  if ($[54] !== t13 || $[55] !== t23) {
-    t24 = /*#__PURE__*/_jsxs(MenuRoot, {
-      children: [t13, t23]
+  let t28;
+  if ($[59] !== t17 || $[60] !== t27) {
+    t28 = /*#__PURE__*/_jsxs(MenuRoot, {
+      children: [t17, t27]
     });
-    $[54] = t13;
-    $[55] = t23;
-    $[56] = t24;
+    $[59] = t17;
+    $[60] = t27;
+    $[61] = t28;
   } else {
-    t24 = $[56];
+    t28 = $[61];
   }
-  let t25;
-  if ($[57] !== labels.in || $[58] !== t) {
-    t25 = labels.in ?? t("zoom.in");
-    $[57] = labels.in;
-    $[58] = t;
-    $[59] = t25;
+  let t29;
+  if ($[62] !== labels.in || $[63] !== t) {
+    t29 = labels.in ?? t("zoom.in");
+    $[62] = labels.in;
+    $[63] = t;
+    $[64] = t29;
   } else {
-    t25 = $[59];
+    t29 = $[64];
   }
-  let t26;
-  if ($[60] !== onZoomChange || $[61] !== zoom) {
-    t26 = () => onZoomChange(steppedZoom(zoom, 10));
-    $[60] = onZoomChange;
-    $[61] = zoom;
-    $[62] = t26;
+  let t30;
+  if ($[65] !== onZoomChange || $[66] !== zoom) {
+    t30 = () => onZoomChange(steppedZoom(zoom, 10));
+    $[65] = onZoomChange;
+    $[66] = zoom;
+    $[67] = t30;
   } else {
-    t26 = $[62];
+    t30 = $[67];
   }
-  let t27;
-  if ($[63] !== t25 || $[64] !== t26) {
-    t27 = /*#__PURE__*/_jsx(IconButton, {
+  let t31;
+  if ($[68] !== size || $[69] !== t29 || $[70] !== t30) {
+    t31 = /*#__PURE__*/_jsx(IconButton, {
       icon: Plus,
-      label: t25,
-      onClick: t26
+      size: size,
+      label: t29,
+      onClick: t30
     });
-    $[63] = t25;
-    $[64] = t26;
-    $[65] = t27;
+    $[68] = size;
+    $[69] = t29;
+    $[70] = t30;
+    $[71] = t31;
   } else {
-    t27 = $[65];
+    t31 = $[71];
   }
-  let t28;
-  if ($[66] !== labels.fitEverything || $[67] !== t) {
-    t28 = labels.fitEverything ?? t("zoom.fitEverything");
-    $[66] = labels.fitEverything;
-    $[67] = t;
-    $[68] = t28;
+  let t32;
+  if ($[72] !== labels.fitEverything || $[73] !== t) {
+    t32 = labels.fitEverything ?? t("zoom.fitEverything");
+    $[72] = labels.fitEverything;
+    $[73] = t;
+    $[74] = t32;
   } else {
-    t28 = $[68];
+    t32 = $[74];
   }
-  let t29;
-  if ($[69] !== onFitAll || $[70] !== shortcuts.fitAll || $[71] !== t28) {
-    t29 = /*#__PURE__*/_jsx(IconButton, {
+  let t33;
+  if ($[75] !== onFitAll || $[76] !== shortcuts.fitAll || $[77] !== size || $[78] !== t32) {
+    t33 = /*#__PURE__*/_jsx(IconButton, {
       icon: Maximize,
-      label: t28,
+      size: size,
+      label: t32,
       kbd: shortcuts.fitAll,
       onClick: onFitAll
     });
-    $[69] = onFitAll;
-    $[70] = shortcuts.fitAll;
-    $[71] = t28;
-    $[72] = t29;
+    $[75] = onFitAll;
+    $[76] = shortcuts.fitAll;
+    $[77] = size;
+    $[78] = t32;
+    $[79] = t33;
   } else {
-    t29 = $[72];
+    t33 = $[79];
   }
-  let t30;
-  if ($[73] !== className || $[74] !== ref || $[75] !== t24 || $[76] !== t27 || $[77] !== t29 || $[78] !== t9) {
-    t30 = /*#__PURE__*/_jsxs(ButtonGroup, {
+  let t34;
+  if ($[80] !== className || $[81] !== ref || $[82] !== t11 || $[83] !== t28 || $[84] !== t31 || $[85] !== t33) {
+    t34 = /*#__PURE__*/_jsxs(ButtonGroup, {
       ref: ref,
       className: className,
-      children: [t9, t24, t27, t29]
+      children: [t11, t28, t31, t33]
     });
-    $[73] = className;
-    $[74] = ref;
-    $[75] = t24;
-    $[76] = t27;
-    $[77] = t29;
-    $[78] = t9;
-    $[79] = t30;
+    $[80] = className;
+    $[81] = ref;
+    $[82] = t11;
+    $[83] = t28;
+    $[84] = t31;
+    $[85] = t33;
+    $[86] = t34;
   } else {
-    t30 = $[79];
+    t34 = $[86];
   }
-  return t30;
+  return t34;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.44.4",
+  "version": "0.45.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/ProjectSwitcher.tsx

@@ -45,6 +45,7 @@ export interface ProjectSwitcherProps<Item extends ProjectSwitcherItem = Project
     label?: string;
 
     disabled?: boolean;
+    tabIndex?: number;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: ComponentProps<typeof Menu.Root>['onOpenChange'];
@@ -62,6 +63,7 @@ export function ProjectSwitcher<Item extends ProjectSwitcherItem>({
     children,
     label,
     disabled,
+    tabIndex,
     open,
     defaultOpen,
     onOpenChange,
@@ -76,6 +78,7 @@ export function ProjectSwitcher<Item extends ProjectSwitcherItem>({
             <Menu.Trigger
                 ref={ref}
                 disabled={disabled}
+                tabIndex={tabIndex}
                 aria-label={current === null ? empty : label === undefined ? current.name : `${label}: ${current.name}`}
                 className={clsx('project-switcher-trigger', className)}
             >

package/src/ZoomControls.tsx

@@ -1,9 +1,10 @@
 import type { Ref } from 'react';
+import clsx from 'clsx';
 import { Maximize, Minus, Plus, Scan, type LucideIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { ButtonGroup } from './ButtonGroup.tsx';
 import { Icon } from './Icon.tsx';
-import { IconButton } from './IconButton.tsx';
+import { IconButton, type IconButtonSize } from './IconButton.tsx';
 import { Kbd } from './Kbd.tsx';
 import { MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from './menu/parts.tsx';
 import type { Shortcut } from './shortcut.ts';
@@ -42,10 +43,19 @@ export interface ZoomControlsProps {
     /* Left out by a surface with nothing to select. */
     selection?: ZoomSelection;
 
+    /* `md` beside the controls of a dock, `sm` beside the small buttons of a toolbar. */
+    size?: Extract<IconButtonSize, 'md' | 'sm'>;
+
+    /* Where the presets open: above a dock at the bottom, below a toolbar at the top. */
+    side?: 'top' | 'bottom';
+
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
+/* The percentage between the buttons, at the height and radius of the buttons beside it. */
+const TRIGGER_SIZE = { md: 'h-8 min-w-14 rounded-lg', sm: 'h-7 min-w-12 rounded-md' } as const;
+
 function MenuIcon({ icon }: { icon: LucideIcon }) {
     return (
         <span className="grid h-4 w-4 place-items-center">
@@ -62,6 +72,8 @@ export function ZoomControls({
     labels = {},
     shortcuts = {},
     selection,
+    size = 'md',
+    side = 'top',
     className,
     ref
 }: ZoomControlsProps) {
@@ -70,14 +82,19 @@ export function ZoomControls({
 
     return (
         <ButtonGroup ref={ref} className={className}>
-            <IconButton icon={Minus} label={labels.out ?? t('zoom.out')} onClick={() => onZoomChange(steppedZoom(zoom, -10))} />
+            <IconButton icon={Minus} size={size} label={labels.out ?? t('zoom.out')} onClick={() => onZoomChange(steppedZoom(zoom, -10))} />
             <MenuRoot>
                 <Tooltip label={labels.presets ?? t('zoom.presets')}>
-                    <MenuTrigger className="h-8 min-w-14 rounded-lg px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text">
+                    <MenuTrigger
+                        className={clsx(
+                            TRIGGER_SIZE[size],
+                            'px-1 text-xs text-text-muted tabular-nums hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text'
+                        )}
+                    >
                         {Math.round(zoom * 100)}%
                     </MenuTrigger>
                 </Tooltip>
-                <MenuPopup side="top" sideOffset={10} align="center" className="min-w-44">
+                <MenuPopup side={side} sideOffset={10} align="center" className="min-w-44">
                     <MenuRadioGroup value={preset} onValueChange={(value: number) => onZoomChange(value / 100)}>
                         {presets.map((percent) => (
                             <MenuRadioItem key={percent} value={percent}>
@@ -99,8 +116,8 @@ export function ZoomControls({
                     )}
                 </MenuPopup>
             </MenuRoot>
-            <IconButton icon={Plus} label={labels.in ?? t('zoom.in')} onClick={() => onZoomChange(steppedZoom(zoom, 10))} />
-            <IconButton icon={Maximize} label={labels.fitEverything ?? t('zoom.fitEverything')} kbd={shortcuts.fitAll} onClick={onFitAll} />
+            <IconButton icon={Plus} size={size} label={labels.in ?? t('zoom.in')} onClick={() => onZoomChange(steppedZoom(zoom, 10))} />
+            <IconButton icon={Maximize} size={size} label={labels.fitEverything ?? t('zoom.fitEverything')} kbd={shortcuts.fitAll} onClick={onFitAll} />
         </ButtonGroup>
     );
 }