@adecore/ui 0.53.3 → 0.54.0

package/dist/ListRow.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 const VARIANT = {
   /* A row of a list that reads as a table and fills the width of its panel: commits, processes,
      branches. Square, so the rows stack into one block. It carries no padding; the caller pads 12px

package/dist/MiddleTruncate.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { useLayoutEffect, useState } from 'react';
 import clsx from 'clsx';
-import { fitMiddle } from './middle-truncate.js';
+import { useLayoutEffect, useState } from 'react';
 import { mergeRefs } from './merge-refs.js';
+import { fitMiddle } from './middle-truncate.js';
 import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 let canvas = null;

package/dist/PanelEmpty.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode, Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { ReactNode, Ref } from 'react';
 export interface PanelEmptyProps {
     header?: ReactNode;
     icon?: LucideIcon;

package/dist/PanelHeader.d.ts

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import { useRender } from '@base-ui/react/use-render';
+import type { ReactNode } from 'react';
 export type PanelHeaderProps = useRender.ComponentProps<'header'> & {
     title?: ReactNode;
 };

package/dist/PanelHeader.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 import { SectionLabel } from "./SectionLabel.js";
 /* As tall as a 48px toolbar beside it. */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/ProjectSwitcher.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { ChevronDown, History } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import * as Menu from './menu/index.parts.js';
 import { ProjectSwitcherRow } from "./project-switcher-row.js";

package/dist/PromptDialog.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { type ReactNode, type Ref } from 'react';
 export interface PromptDialogProps {
     open: boolean;
     title: string;

package/dist/ScrollArea.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from '@base-ui/react/use-render';
+import { type Ref } from 'react';
+import { type ScrollAreaAxis } from './useOverlayScrollbars.tsx';
+export type ScrollAreaProps = Omit<useRender.ComponentProps<'div'>, 'className' | 'ref'> & {
+    axis?: ScrollAreaAxis;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    viewportRef?: Ref<HTMLElement>;
+    viewportClassName?: string;
+    coveredBottom?: number;
+};
+export declare function ScrollArea({ axis, className, viewportClassName, viewportRef, coveredBottom, ref, render, ...props }: ScrollAreaProps): import("react").JSX.Element;

package/dist/ScrollArea.js

@@ -0,0 +1,144 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
+import { useState } from 'react';
+import { mergeRefs } from './merge-refs.js';
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
+/* A box that scrolls natively under thin bars that float over its content and show only while it scrolls. */
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function ScrollArea(t0) {
+  const $ = _c(33);
+  let className;
+  let coveredBottom;
+  let props;
+  let ref;
+  let render;
+  let t1;
+  let viewportClassName;
+  let viewportRef;
+  if ($[0] !== t0) {
+    ({
+      axis: t1,
+      className,
+      viewportClassName,
+      viewportRef,
+      coveredBottom,
+      ref,
+      render,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = coveredBottom;
+    $[3] = props;
+    $[4] = ref;
+    $[5] = render;
+    $[6] = t1;
+    $[7] = viewportClassName;
+    $[8] = viewportRef;
+  } else {
+    className = $[1];
+    coveredBottom = $[2];
+    props = $[3];
+    ref = $[4];
+    render = $[5];
+    t1 = $[6];
+    viewportClassName = $[7];
+    viewportRef = $[8];
+  }
+  const axis = t1 === undefined ? "y" : t1;
+  const [viewport, setViewport] = useState(null);
+  let t2;
+  if ($[9] !== axis) {
+    t2 = {
+      axis
+    };
+    $[9] = axis;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const scrollbars = useOverlayScrollbars(viewport, t2);
+  let t3;
+  if ($[11] !== viewportRef) {
+    t3 = mergeRefs(setViewport, viewportRef);
+    $[11] = viewportRef;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== viewportClassName) {
+    t4 = clsx("ade-scroll-viewport", viewportClassName);
+    $[13] = viewportClassName;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== axis || $[16] !== props || $[17] !== t4) {
+    t5 = {
+      ...props,
+      "data-axis": axis,
+      className: t4
+    };
+    $[15] = axis;
+    $[16] = props;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== render || $[20] !== t3 || $[21] !== t5) {
+    t6 = {
+      render,
+      ref: t3,
+      defaultTagName: "div",
+      props: t5
+    };
+    $[19] = render;
+    $[20] = t3;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  const content = useRender(t6);
+  let t7;
+  if ($[23] !== className) {
+    t7 = clsx("ade-scroll-area", className);
+    $[23] = className;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== coveredBottom) {
+    t8 = coveredBottom ? {
+      "--scrollbar-covered-bottom": `${coveredBottom}px`
+    } : undefined;
+    $[25] = coveredBottom;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== content || $[28] !== ref || $[29] !== scrollbars || $[30] !== t7 || $[31] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      className: t7,
+      style: t8,
+      children: [content, scrollbars]
+    });
+    $[27] = content;
+    $[28] = ref;
+    $[29] = scrollbars;
+    $[30] = t7;
+    $[31] = t8;
+    $[32] = t9;
+  } else {
+    t9 = $[32];
+  }
+  return t9;
+}

package/dist/SectionLabel.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 /* A label takes the line height of the row it sits in, which is why the size carries `/[inherit]`. */
 const SECTION_LABEL = 'text-xs/[inherit] font-medium text-text-faint';
 /*

package/dist/SegmentBar.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { mergeRefs } from './merge-refs.js';
 import { Tooltip } from "./Tooltip.js";
 import { useMeasuredWidth } from './useMeasuredWidth.js';

package/dist/Segmented.d.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import type { Ref } from 'react';
 export interface SegmentedOption<T extends string> {
     id: T;
     label: string;

package/dist/Select.d.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import { type Ref } from 'react';
 import { type SelectGroup, type SelectItem } from './select-shared.ts';
 export type { SelectGroup, SelectItem };
 export interface SelectProps<T extends string> {

package/dist/Select.js

@@ -2,6 +2,7 @@ import { c as _c } from "react/compiler-runtime";
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import { MENU_LABEL } from "./menu/parts.js";
@@ -9,6 +10,7 @@ import { renderPositioner } from './popup-layer.js';
 import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
 import { SelectSearch } from "./SelectSearch.js";
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Row(t0) {
   const $ = _c(14);
@@ -104,7 +106,7 @@ function _temp(sum, group) {
   return sum + group.items.length;
 }
 function PlainSelect(t0) {
-  const $ = _c(46);
+  const $ = _c(47);
   const {
     value,
     onValueChange,
@@ -147,6 +149,8 @@ function PlainSelect(t0) {
     t6 = $[5];
   }
   const selected = t6;
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   let t7;
   if ($[6] !== flat) {
     t7 = flat.map(_temp3);
@@ -261,6 +265,7 @@ function PlainSelect(t0) {
     t18 = /*#__PURE__*/_jsx(BaseSelect.Popup, {
       className: "menu-popup",
       children: /*#__PURE__*/_jsx(BaseSelect.List, {
+        ref: setList,
         className: "max-h-80 overflow-auto",
         children: t17
       })
@@ -271,26 +276,27 @@ function PlainSelect(t0) {
     t18 = $[35];
   }
   let t19;
-  if ($[36] !== align || $[37] !== t18) {
+  if ($[36] !== align || $[37] !== scrollbars || $[38] !== t18) {
     t19 = /*#__PURE__*/_jsx(BaseSelect.Portal, {
-      children: /*#__PURE__*/_jsx(BaseSelect.Positioner, {
+      children: /*#__PURE__*/_jsxs(BaseSelect.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         side: "bottom",
         align: align,
         sideOffset: 6,
         alignItemWithTrigger: false,
-        children: t18
+        children: [t18, scrollbars]
       })
     });
     $[36] = align;
-    $[37] = t18;
-    $[38] = t19;
+    $[37] = scrollbars;
+    $[38] = t18;
+    $[39] = t19;
   } else {
-    t19 = $[38];
+    t19 = $[39];
   }
   let t20;
-  if ($[39] !== disabled || $[40] !== t16 || $[41] !== t19 || $[42] !== t7 || $[43] !== t8 || $[44] !== value) {
+  if ($[40] !== disabled || $[41] !== t16 || $[42] !== t19 || $[43] !== t7 || $[44] !== t8 || $[45] !== value) {
     t20 = /*#__PURE__*/_jsxs(BaseSelect.Root, {
       items: t7,
       value: value,
@@ -298,15 +304,15 @@ function PlainSelect(t0) {
       onValueChange: t8,
       children: [t16, t19]
     });
-    $[39] = disabled;
-    $[40] = t16;
-    $[41] = t19;
-    $[42] = t7;
-    $[43] = t8;
-    $[44] = value;
-    $[45] = t20;
+    $[40] = disabled;
+    $[41] = t16;
+    $[42] = t19;
+    $[43] = t7;
+    $[44] = t8;
+    $[45] = value;
+    $[46] = t20;
   } else {
-    t20 = $[45];
+    t20 = $[46];
   }
   return t20;
 }

package/dist/SelectSearch.js

@@ -1,18 +1,19 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { ChevronDown, Search } from 'lucide-react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from "./Icon.js";
 import { MENU_LABEL } from "./menu/parts.js";
 import { renderPositioner } from './popup-layer.js';
 import { RowContent } from "./select-row.js";
 import { isGroup, rowClassName, triggerClassName } from './select-shared.js';
+import { useOverlayScrollbars } from "./useOverlayScrollbars.js";
 /* The `Select` with a search field on top of its options, for lists too long to scan. A combobox of Base UI brings the filtering and the keyboard. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function SelectSearch(t0) {
-  const $ = _c(67);
+  const $ = _c(70);
   const {
     value,
     onValueChange,
@@ -81,6 +82,8 @@ export function SelectSearch(t0) {
     t8 = $[12];
   }
   const searchLabel = t8;
+  const [list, setList] = useState(null);
+  const scrollbars = useOverlayScrollbars(list);
   let t9;
   if ($[13] !== byValue || $[14] !== value) {
     t9 = itemValue => {
@@ -260,7 +263,8 @@ export function SelectSearch(t0) {
   let t25;
   if ($[49] !== groups || $[50] !== renderRow) {
     t25 = /*#__PURE__*/_jsx(Combobox.List, {
-      className: "min-h-0 overflow-auto",
+      ref: setList,
+      className: "min-h-0 overflow-auto pr-1",
       children: groups ? group_1 => /*#__PURE__*/_jsxs(Combobox.Group, {
         items: group_1.items,
         children: [/*#__PURE__*/_jsx(Combobox.GroupLabel, {
@@ -278,39 +282,51 @@ export function SelectSearch(t0) {
     t25 = $[51];
   }
   let t26;
-  if ($[52] !== t22 || $[53] !== t24 || $[54] !== t25) {
-    t26 = /*#__PURE__*/_jsxs(Combobox.Popup, {
-      className: "menu-popup flex max-h-96 flex-col",
-      children: [t22, t24, t25]
+  if ($[52] !== scrollbars || $[53] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
+      className: "relative -mr-1 flex min-h-0 flex-col",
+      children: [t25, scrollbars]
     });
-    $[52] = t22;
-    $[53] = t24;
-    $[54] = t25;
-    $[55] = t26;
+    $[52] = scrollbars;
+    $[53] = t25;
+    $[54] = t26;
   } else {
-    t26 = $[55];
+    t26 = $[54];
   }
   let t27;
-  if ($[56] !== align || $[57] !== t26) {
-    t27 = /*#__PURE__*/_jsx(Combobox.Portal, {
+  if ($[55] !== t22 || $[56] !== t24 || $[57] !== t26) {
+    t27 = /*#__PURE__*/_jsxs(Combobox.Popup, {
+      className: "menu-popup flex max-h-96 flex-col",
+      children: [t22, t24, t26]
+    });
+    $[55] = t22;
+    $[56] = t24;
+    $[57] = t26;
+    $[58] = t27;
+  } else {
+    t27 = $[58];
+  }
+  let t28;
+  if ($[59] !== align || $[60] !== t27) {
+    t28 = /*#__PURE__*/_jsx(Combobox.Portal, {
       children: /*#__PURE__*/_jsx(Combobox.Positioner, {
         className: "popup-positioner",
         render: renderPositioner,
         side: "bottom",
         align: align,
         sideOffset: 6,
-        children: t26
+        children: t27
       })
     });
-    $[56] = align;
-    $[57] = t26;
-    $[58] = t27;
+    $[59] = align;
+    $[60] = t27;
+    $[61] = t28;
   } else {
-    t27 = $[58];
+    t28 = $[61];
   }
-  let t28;
-  if ($[59] !== comboboxItems || $[60] !== disabled || $[61] !== t10 || $[62] !== t11 || $[63] !== t20 || $[64] !== t27 || $[65] !== value) {
-    t28 = /*#__PURE__*/_jsxs(Combobox.Root, {
+  let t29;
+  if ($[62] !== comboboxItems || $[63] !== disabled || $[64] !== t10 || $[65] !== t11 || $[66] !== t20 || $[67] !== t28 || $[68] !== value) {
+    t29 = /*#__PURE__*/_jsxs(Combobox.Root, {
       items: comboboxItems,
       value: value,
       disabled: disabled,
@@ -319,20 +335,20 @@ export function SelectSearch(t0) {
       onValueChange: t11,
       onInputValueChange: setQuery,
       onOpenChange: t12,
-      children: [t20, t27]
+      children: [t20, t28]
     });
-    $[59] = comboboxItems;
-    $[60] = disabled;
-    $[61] = t10;
-    $[62] = t11;
-    $[63] = t20;
-    $[64] = t27;
-    $[65] = value;
-    $[66] = t28;
+    $[62] = comboboxItems;
+    $[63] = disabled;
+    $[64] = t10;
+    $[65] = t11;
+    $[66] = t20;
+    $[67] = t28;
+    $[68] = value;
+    $[69] = t29;
   } else {
-    t28 = $[66];
+    t29 = $[69];
   }
-  return t28;
+  return t29;
 }
 function _temp5(item_1) {
   return item_1.value;

package/dist/ShortcutHints.js

@@ -2,8 +2,8 @@ import { c as _c } from "react/compiler-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { isApplePlatform } from './platform.js';
-import { formatShortcut } from './shortcut.js';
 import { ModifierHold, placeHint, shortcutHintTargets } from './shortcut-hints.js';
+import { formatShortcut } from './shortcut.js';
 /* Whether a person can see the button now: on screen, not faded out, and not under a dialog or another node. */
 import { jsx as _jsx } from "react/jsx-runtime";
 const isSeen = (element, rect) => {

package/dist/Slider.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useId } from 'react';
-import clsx from 'clsx';
 import { Slider as BaseSlider } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { useId } from 'react';
 import { formatFixed } from './format/number.js';
 import { placesOf } from './step-places.js';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/SlidingColumn.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
 import { ColumnResizeHandle } from "./ColumnResizeHandle.js";
 import { mergeRefs } from './merge-refs.js';
 import { useColumnResize } from './useColumnResize.js';

package/dist/SplitButton.js

@@ -1,7 +1,7 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import clsx from 'clsx';
 import { ChevronDown } from 'lucide-react';
+import { useState } from 'react';
 import { splitFrameClass, splitHalfClass } from './button-class.js';
 import { Icon } from "./Icon.js";
 import { MenuPopup, MenuRoot, MenuTrigger } from "./menu/parts.js";

package/dist/Surface.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { useRender } from '@base-ui/react/use-render';
+import clsx from 'clsx';
 const FLOAT = 'border border-border bg-[color-mix(in_srgb,var(--surface-raised)_88%,transparent)] shadow-float backdrop-blur-[14px]';
 /*
  * The glass card that floats over the content under it: a dock, a banner, a toast, a find bar, a

package/dist/Switch.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import clsx from 'clsx';
 import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import clsx from 'clsx';
 /* On or off, as a switch rather than a checkbox: a setting that takes effect the moment it flips. */
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Switch(t0) {

package/dist/TextMenu.js

@@ -1,12 +1,12 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef, useState } from 'react';
 import { Copy, Scan } from 'lucide-react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { copyText } from './clipboard.js';
 import { Icon } from "./Icon.js";
 import { Kbd } from "./Kbd.js";
-import { mergeRefs } from './merge-refs.js';
 import { ContextMenuRoot, ContextMenuTrigger, MenuItem, MenuPopup, MenuSeparator } from "./menu/parts.js";
+import { mergeRefs } from './merge-refs.js';
 import { isApplePlatform } from './platform.js';
 import { selectAllWithin, selectionWithin } from './selection.js';
 import { EDIT_SHORTCUTS, matchesShortcut } from './shortcut.js';

package/dist/Toasts.js

@@ -1,8 +1,8 @@
 import { c as _c } from "react/compiler-runtime";
-import { useState } from 'react';
 import clsx from 'clsx';
-import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleCheck, Trash, X } from 'lucide-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useStore } from 'zustand';
 import { Button } from "./Button.js";
 import { Icon } from "./Icon.js";

package/dist/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import type { Shortcut } from './shortcut.ts';
 export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
 export declare function TooltipProvider({ children }: {

package/dist/Tooltip.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import 'react';
 import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import 'react';
 import { Kbd } from "./Kbd.js";
 import { registerShortcutHint } from './shortcut-hints.js';
 /* One provider per app. Tooltips share a delay, so moving along a row of buttons feels instant. `UIProvider` mounts it. */

package/dist/UIProvider.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode } from 'react';
 import type { i18n as I18n } from 'i18next';
+import { type ReactNode } from 'react';
 import { type FormatSource } from './format/locale.ts';
 export interface UIProviderProps {
     i18n: I18n;

package/dist/Waveform.js

@@ -1,6 +1,6 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef } from 'react';
 import clsx from 'clsx';
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatClockDuration } from './format/duration.js';
 import { mergeRefs } from './merge-refs.js';

package/dist/Wipe.js

@@ -1,9 +1,9 @@
 import { c as _c } from "react/compiler-runtime";
-import { useRef } from 'react';
 import clsx from 'clsx';
 import { ChevronsLeftRight } from 'lucide-react';
-import { Icon } from "./Icon.js";
+import { useRef } from 'react';
 import { formatPercent } from './format/number.js';
+import { Icon } from "./Icon.js";
 import { mergeRefs } from './merge-refs.js';
 import { splitAt, splitForKey } from './wipe-split.js';
 /* It fills the positioned element it sits in. A plain line handle is dragged anywhere along its height. */

package/dist/combobox/parts.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentProps, ReactNode } from 'react';
-import type { LucideIcon } from 'lucide-react';
 import { Autocomplete } from '@base-ui/react/autocomplete';
+import type { LucideIcon } from 'lucide-react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type PlacementKey } from '../placement.ts';
 import type { Shortcut } from '../shortcut.ts';
 export declare const ComboboxRoot: typeof Autocomplete.Root;
@@ -13,7 +13,7 @@ export type ComboboxInputProps = Omit<ComponentProps<typeof Autocomplete.Input>,
 export declare function ComboboxInput({ size, mono, icon, className, id, ...props }: ComboboxInputProps): import("react").JSX.Element;
 type Placement = Pick<ComponentProps<typeof Autocomplete.Positioner>, PlacementKey>;
 export type ComboboxPopupProps = ComponentProps<typeof Autocomplete.Popup> & Placement;
-export declare function ComboboxPopup({ side, align, sideOffset, className, ...props }: ComboboxPopupProps): import("react").JSX.Element;
+export declare function ComboboxPopup({ side, align, sideOffset, className, ref, ...props }: ComboboxPopupProps): import("react").JSX.Element;
 export declare function ComboboxList(props: ComponentProps<typeof Autocomplete.List>): import("react").JSX.Element;
 export type ComboboxItemProps = ComponentProps<typeof Autocomplete.Item> & {
     icon?: ReactNode;