@ahrowe/ui 0.33.0 → 0.35.0

package/dist/types/common/actionIcon/actionIcon.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { default as React, CSSProperties } from 'react';
 import { IconContent } from '../types/icon.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type ActionIconSlots = 'root' | 'icon';
@@ -8,6 +8,8 @@ export interface ActionIconProps extends HtmlProps {
     style?: CSSProperties;
     title?: string;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Ref to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
     classNames?: SlotClassNames<ActionIconSlots>;
     styles?: SlotStyles<ActionIconSlots>;
 }

package/dist/types/common/card/card.types.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 import { ButtonStyleType } from '../button/button.types';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
 import { IconAction } from '../types/actions.types';
@@ -18,6 +18,8 @@ export interface CardProps extends Omit<HtmlProps, 'tabIndex'> {
     style?: React.CSSProperties;
     autoGap?: boolean;
     clip?: boolean;
+    /** Ref to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
     /** Classes for the inner elements. See `CardSlots`. */
     classNames?: SlotClassNames<CardSlots>;
     /** Inline styles for the inner elements. See `CardSlots`. */

package/dist/types/common/checkbox/checkbox.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type CheckboxSlots = 'icon' | 'checkmark' | 'label';
@@ -20,6 +20,8 @@ export interface CheckboxProps extends Omit<HtmlProps, 'onToggle'> {
     children?: ReactNode;
     background?: string | null;
     isLoading?: boolean;
+    /** Ref to the root element. */
+    ref?: Ref<HTMLDivElement>;
     classNames?: SlotClassNames<CheckboxSlots>;
     styles?: SlotStyles<CheckboxSlots>;
 }

package/dist/types/common/colorPicker/colorPicker.types.d.ts

@@ -4,6 +4,10 @@ export type ColorPickerSlots = 'root' | 'swatch' | 'panel' | 'gradient' | 'hueSl
 export interface ColorPickerLabels {
     /** The eyedropper button, read out by screen readers. */
     pickFromScreen?: string;
+    /** The saturation and brightness square, read out by screen readers. */
+    saturationAndBrightness?: string;
+    /** Where the square's cursor currently sits, read out after every move. */
+    saturationAndBrightnessValue?: (saturation: number, brightness: number) => string;
 }
 export interface ColorPickerProps extends Omit<HtmlProps, 'onChange'> {
     className?: string;

package/dist/types/common/configProvider/configProvider.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { ComponentDefaults, ConfigProviderProps } from './configProvider.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export declare const ConfigContext: React.Context<ComponentDefaults | null>;
 /**
  * One setting for every component that can present as a bottom sheet, kept separate from

package/dist/types/common/configProvider/configProvider.types.d.ts

@@ -12,6 +12,7 @@ import { ColorPickerLabels } from '../colorPicker/colorPicker.types';
 import { EmptyStateLabels } from '../emptyState/emptyState.types';
 import { KlipyPickerLabels } from '../klipyPicker/klipyPicker.types';
 import { SearchInputLabels } from '../searchInput/searchInput.types';
+import { TooltipLabels } from '../tooltip/tooltip.types';
 import { VirtualListLabels } from '../virtualList/virtualList.types';
 import { ButtonProps } from '../button/button.types';
 import { ActionButtonsProps } from '../actionButtons/actionButtons.types';
@@ -39,9 +40,9 @@ import { PaginationProps } from '../pagination/pagination.types';
 import { TreeProps } from '../tree/tree.types';
 import { RoomDrawerProps } from '../roomDrawer/roomDrawer.types';
 import { RoomViewerProps } from '../roomViewer/roomViewer.types';
-import { FloatingMenuProps, Presentation } from '../floatingMenu/floatingMenu.types';
 import { PopoverProps } from '../popover/popover.types';
 import { ModalProps } from '../modal/modal.types';
+import { Presentation } from '../configProvider/presentation.types';
 /**
  * Global default props keyed by component name.
  *
@@ -74,6 +75,9 @@ export interface ComponentDefaults {
     SearchInput?: {
         labels?: SearchInputLabels;
     };
+    Tooltip?: {
+        labels?: TooltipLabels;
+    };
     VirtualList?: {
         labels?: VirtualListLabels;
     };
@@ -112,7 +116,6 @@ export interface ComponentDefaults {
     Tree?: Partial<TreeProps>;
     RoomDrawer?: Partial<RoomDrawerProps>;
     RoomViewer?: Partial<RoomViewerProps>;
-    FloatingMenu?: Partial<FloatingMenuProps>;
     Popover?: Partial<PopoverProps>;
     Modal?: Partial<ModalProps>;
 }
@@ -122,7 +125,7 @@ export interface ConfigProviderProps {
     defaultProps?: ComponentDefaults;
     /**
      * How every sheet-capable component presents by default: anchored to its trigger, always a
-     * bottom sheet, or a sheet only on a small touch screen. One switch for `FloatingMenu`,
+     * bottom sheet, or a sheet only on a small touch screen. One switch for `Popover`,
      * `Dropdown`, `Popover` and `Modal` at once (and so for everything built on them). A
      * component-keyed entry in `defaultProps` overrides it, and an explicit prop overrides both.
      */

package/dist/types/common/configProvider/index.d.ts

@@ -3,3 +3,4 @@ export { useComponentDefaults } from './useComponentDefaults';
 export { useLabels } from './useLabels';
 export { usePresentationDefault } from './usePresentationDefault';
 export type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';
+export { Presentation } from './presentation.types';

package/dist/types/common/configProvider/presentation.types.d.ts

@@ -0,0 +1,14 @@
+/**
+ * How a surface is presented on screen. Lives here rather than with any one of
+ * the components that read it: `Modal`, `Popover`, `Dropdown` and `MultiSelect`
+ * all take it, and `ConfigProvider` owns the app-wide switch that sets it for
+ * every one of them at once.
+ */
+export declare enum Presentation {
+    /** Wherever the component normally puts it: anchored to its trigger, or centred for a Modal. */
+    Default = "default",
+    /** Pinned to the bottom of the screen, full width up to a maximum. */
+    Sheet = "sheet",
+    /** A sheet on touch devices with a small screen, anchored everywhere else. */
+    Auto = "auto"
+}

package/dist/types/common/configProvider/usePresentationDefault.d.ts

@@ -1,4 +1,4 @@
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 /**
  * The nearest `ConfigProvider`'s app-wide `presentation`, or `undefined` when none is set.
  *

package/dist/types/common/dropdown/dropdown.types.d.ts

@@ -1,7 +1,7 @@
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 import { ReactNode, Ref } from 'react';
 import { FormValidator } from '../../services/formValidation';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export interface DropdownItem {
     key: string | number;
     label: ReactNode;

package/dist/types/common/flip/flip.d.ts

@@ -1,3 +1,3 @@
-import { FlipHandle, FlipProps } from './flip.types';
-declare const Flip: import('react').ForwardRefExoticComponent<FlipProps & import('react').RefAttributes<FlipHandle>>;
+import { FlipProps } from './flip.types';
+declare function Flip(props: FlipProps): import("react").JSX.Element;
 export default Flip;

package/dist/types/common/flip/flip.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type FlipAxis = 'x' | 'y';
 export type FlipSlots = 'root' | 'perspective' | 'surface' | 'front' | 'back';
@@ -35,6 +35,8 @@ export interface FlipProps extends HtmlProps {
     onFlip?: (flipped: boolean) => void;
     /** Fires once the flip transition finishes settling on the new face, for any trigger (click, controlled prop change, or ref call). Fires synchronously under `prefers-reduced-motion: reduce`, since no transition runs to wait for. */
     onFlipEnd?: (flipped: boolean) => void;
+    /** Imperative handle for flipping without owning the state. */
+    ref?: Ref<FlipHandle>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<FlipSlots>;

package/dist/types/common/hooks/useAnchorTracking.d.ts

@@ -31,7 +31,7 @@ export interface UseAnchorTrackingArgs {
  * positioning on every scroll, viewport resize and tracked size change until it closes.
  *
  * Callers supply only the geometry (`update`) and the inline styles to clear again (`teardown`);
- * `useFloatingPosition` and `usePopoverPosition` are both built on this.
+ * `usePopoverPosition` is built on this.
  *
  * Position is deliberately written straight to the DOM by the caller rather than through React
  * state: going through setState -> re-render -> commit adds a round-trip that lags behind the

package/dist/types/common/hooks/useFocusBoundary.d.ts

@@ -9,9 +9,9 @@ export interface UseFocusBoundaryArgs {
 }
 /**
  * Focus helpers for content portaled to the end of the DOM (e.g. via BodyEnd), where Tab can't
- * reach it in visual document order on its own. Shared by FloatingMenu and Popover, which both
- * need to hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue
- * focus naturally past the trigger when Tab exits the bottom.
+ * reach it in visual document order on its own. Used by Popover and by Menu, which both need to
+ * hand focus back to the trigger on Escape / Shift+Tab out of the top, and continue focus
+ * naturally past the trigger when Tab exits the bottom.
  */
 export declare function useFocusBoundary({ triggerRef, contentRef }: UseFocusBoundaryArgs): {
     firstTriggerFocusable: () => HTMLElement | null;

package/dist/types/common/hooks/useSheet.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export interface Sheet {
     /** Whether the popup should render as a bottom sheet instead of anchored to its trigger. */
     isSheet: boolean;

package/dist/types/common/input/input.types.d.ts

@@ -71,6 +71,11 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     multiline?: boolean;
     rows?: number;
     autoResize?: boolean;
+    /**
+     * Ref to the rendered `<input>` (or `<textarea>` when `multiline`). Not forwarded to a
+     * `customInput`, which owns its own ref.
+     */
+    ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
     classNames?: SlotClassNames<InputSlots>;
     styles?: SlotStyles<InputSlots>;
     /** Overrides the text Input renders of its own. Merged per key. */

package/dist/types/common/interactableDiv/interactableDiv.d.ts

@@ -1,7 +1,8 @@
-import { default as React } from 'react';
+import { default as React, ReactElement } from 'react';
 import { DataProps } from '../types/baseProps.types';
 interface Properties extends DataProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {
     tabIndex?: number | null;
+    ref?: React.Ref<HTMLDivElement>;
 }
-declare const InteractableDiv: React.ForwardRefExoticComponent<Properties & React.RefAttributes<HTMLDivElement>>;
+declare function InteractableDiv({ className, children, onClick, onKeyDown, tabIndex, ref, ...props }: Properties): ReactElement;
 export default InteractableDiv;

package/dist/types/common/loading/spinnerLoading/spinnerLoading.d.ts

@@ -3,9 +3,4 @@ interface Properties {
     className?: string | undefined;
 }
 declare function SpinnerLoading({ className }: Properties): ReactElement;
-declare namespace SpinnerLoading {
-    var defaultProps: {
-        className: undefined;
-    };
-}
 export default SpinnerLoading;

package/dist/types/common/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './menu';
+export * from './menu.types';

package/dist/types/common/menu/menu.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { MenuProps } from './menu.types';
+/**
+ * A menu of actions on a trigger of your choosing.
+ *
+ * `Popover` does the anchoring, portalling and outside-click work but takes
+ * arbitrary `content`, which leaves every consumer to write their own `ul`/`li`
+ * and, in practice, to leave out the roles and the arrow keys. This is that list,
+ * done once: `role="menu"`, a roving focus that skips disabled entries, Escape
+ * back to the trigger, and separators and headings that stay out of the keyboard
+ * order.
+ */
+declare function Menu({ items, children, onAction, isOpen: controlledOpen, onOpenChange, placement, align, presentation, className, style, classNames, styles: slotStyles, ...rest }: MenuProps): ReactElement;
+export default Menu;

package/dist/types/common/menu/menu.types.d.ts

@@ -0,0 +1,55 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
+import { IconContent } from '../types/icon.types';
+import { PopoverAlign, PopoverPlacement } from '../popover/popover.types';
+import { Presentation } from '../configProvider/presentation.types';
+/** One thing the menu can do. */
+export interface MenuAction {
+    /** Stable id, also what `onAction` reports. */
+    id: string;
+    label: ReactNode;
+    icon?: IconContent;
+    /**
+     * Keyboard hint on the trailing edge, e.g. `⌘K`. Display only: binding the
+     * shortcut is yours, since only you know what else is listening.
+     */
+    shortcut?: ReactNode;
+    disabled?: boolean;
+    /** Renders in the destructive colour. For deleting, discarding, revoking. */
+    danger?: boolean;
+    onClick?: () => void;
+}
+/** A line between groups of actions. */
+export interface MenuSeparator {
+    separator: true;
+}
+/** A label over the actions that follow it. */
+export interface MenuHeading {
+    heading: ReactNode;
+}
+export type MenuEntry = MenuAction | MenuSeparator | MenuHeading;
+export declare function isMenuSeparator(entry: MenuEntry): entry is MenuSeparator;
+export declare function isMenuHeading(entry: MenuEntry): entry is MenuHeading;
+export declare function isMenuAction(entry: MenuEntry): entry is MenuAction;
+export type MenuSlots = 'root' | 'trigger' | 'menu' | 'item' | 'itemIcon' | 'itemLabel' | 'itemShortcut' | 'separator' | 'heading';
+export interface MenuProps extends Omit<HtmlProps, 'onSelect'> {
+    /** What the menu offers, in the order it is read. */
+    items: MenuEntry[];
+    /** The element that opens the menu. */
+    children?: ReactNode;
+    /** Called with the id of the action that was picked, after its own `onClick`. */
+    onAction?: (id: string) => void;
+    /** Controlled open state. Leave it out to let the menu manage its own. */
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Which side of the trigger the menu opens on (default `Bottom`). */
+    placement?: PopoverPlacement;
+    /** Which edge it lines up with on the cross axis (default `Start`). */
+    align?: PopoverAlign;
+    /** Anchored to the trigger, pinned to the bottom of the screen, or the latter only on touch. */
+    presentation?: Presentation;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<MenuSlots>;
+    styles?: SlotStyles<MenuSlots>;
+}

package/dist/types/common/modal/modal.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export type ModalSlots = 'container' | 'backdrop' | 'modal' | 'header' | 'title' | 'closeButton' | 'body';
 /** Text Modal renders of its own, for translating it. */
 export interface ModalLabels {

package/dist/types/common/multiSelect/multiSelect.types.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 export type MultiSelectValue = string | number;
 export interface MultiSelectItem {
     key: MultiSelectValue;

package/dist/types/common/numberInput/numberInput.types.d.ts

@@ -67,6 +67,8 @@ export interface NumberInputProps extends Omit<NumericFormatProps, 'onValueChang
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Overrides the text NumberInput renders of its own. Merged per key. */
     labels?: NumberInputLabels;
+    /** Ref to the inner `<input>`, for focusing the field. */
+    ref?: React.Ref<HTMLInputElement>;
     /** Classes for the inner elements. See `NumberInputSlots`. */
     classNames?: SlotClassNames<NumberInputSlots>;
     /** Inline styles for the inner elements. See `NumberInputSlots`. */

package/dist/types/common/otpInput/otpInput.types.d.ts

@@ -51,6 +51,8 @@ export interface OtpInputProps extends Omit<HtmlProps, 'onChange'> {
     autoFocus?: boolean;
     className?: string;
     style?: React.CSSProperties;
+    /** Ref to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
     classNames?: SlotClassNames<OtpInputSlots>;
     styles?: SlotStyles<OtpInputSlots>;
     /** Overrides the text OtpInput renders of its own. Merged per key. */

package/dist/types/common/planCanvas/planCanvas.d.ts

@@ -3,5 +3,5 @@ import { PlanCanvasProps } from './planCanvas.types';
  * The ref lands on the `<svg>` itself, which is what a consumer wants for measuring or
  * screenshotting. Both the drawer and the viewer expose it as `getSvgElement()`.
  */
-declare const PlanCanvas: import('react').ForwardRefExoticComponent<PlanCanvasProps & import('react').RefAttributes<SVGSVGElement>>;
+declare function PlanCanvas(props: PlanCanvasProps): import("react").JSX.Element;
 export default PlanCanvas;

package/dist/types/common/planCanvas/planCanvas.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { DerivedRoom, PlanFloor, PlanRoom, PlanSelection, PlanView } from '../floorPlan';
 import { SlotClassNames, SlotStyles } from '../types/slots.types';
 export type PlanCanvasSlots = 'canvas' | 'grid' | 'underlay' | 'rooms' | 'roomFill' | 'roomLabel' | 'walls' | 'wallBody' | 'openings' | 'opening' | 'overlay';
@@ -55,6 +55,8 @@ export interface PlanCanvasProps {
         height: number;
     };
     'aria-label'?: string;
+    /** Ref to the rendered `<svg>` root. */
+    ref?: Ref<SVGSVGElement>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<PlanCanvasSlots>;

package/dist/types/common/popover/popover.types.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
-import { Presentation } from '../floatingMenu/floatingMenu.types';
+import { Presentation } from '../configProvider/presentation.types';
 /** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */
 export declare enum PopoverPlacement {
     Top = "top",
@@ -36,8 +36,14 @@ export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     isOpen?: boolean;
     /** Initial open state when uncontrolled (default `false`). */
     defaultOpen?: boolean;
-    /** Fires whenever the popover wants to open or close. */
-    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Fires whenever the popover wants to open or close. `fromKeyboard` says
+     * whether a key caused it, which is what a menu needs in order to put the
+     * focus on an entry only when the pointer was not what opened it.
+     */
+    onOpenChange?: (isOpen: boolean, meta: {
+        fromKeyboard: boolean;
+    }) => void;
     /** Gap in px between trigger and panel (default `10`). */
     offset?: number;
     /** Render the arrow pointing at the trigger (default `true`). */
@@ -52,6 +58,31 @@ export interface PopoverProps extends Omit<HtmlProps, 'content'> {
     closeDelay?: number;
     /** Prevent the popover from opening. */
     disabled?: boolean;
+    /**
+     * Move focus into the panel when it opens, and claim `role="dialog"` with it.
+     * `'keyboard'` (the default) does it only when the open came from the
+     * keyboard: the panel is portaled to the end of the document, so Tab never
+     * reaches it on its own, while a click leaves the focus where the pointer
+     * already put it. `true` always, `false` never.
+     */
+    focusOnOpen?: boolean | 'keyboard';
+    /**
+     * Whether clicking the trigger while the panel is open closes it (default
+     * `true`). A menu button should toggle; a text field that opens a picker
+     * should not, or clicking into it to place the caret would close the panel.
+     */
+    closeOnTriggerClick?: boolean;
+    /**
+     * `'trigger'` gives the panel at least the trigger's width, for a list that
+     * should line up with the field it belongs to. `'auto'` (the default) lets it
+     * size to its own content.
+     */
+    width?: 'auto' | 'trigger';
+    /**
+     * Cap the panel at a readable measure (default `true`). Off for a panel with
+     * its own width, a calendar or a media grid.
+     */
+    constrainWidth?: boolean;
     /** Where the panel opens: anchored to the trigger (`Default`), pinned to the bottom of the
      * screen, or the latter only on a small touch screen. Only a `Click` trigger presents as a
      * sheet. */

package/dist/types/common/popover/usePopoverPosition.d.ts

@@ -12,6 +12,25 @@ export interface UsePopoverPositionArgs {
     panelRef: RefObject<HTMLElement | null>;
     /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */
     arrowRef: RefObject<HTMLElement | null>;
+    /**
+     * Give the panel at least the trigger's width, for a list that lines up with
+     * the field it belongs to. A minimum rather than a fixed width: a menu on a
+     * narrow icon button still sizes to its own content.
+     */
+    matchTriggerWidth?: boolean;
+    /**
+     * When the panel does not fit on the side its alignment puts it, narrow it
+     * rather than sliding it away from the trigger. Sliding keeps the panel
+     * on-screen but detaches it: an end-aligned bubble stops ending where its
+     * trigger ends, and its arrow stops pointing at anything. Off by default, since
+     * a panel whose width is its content, a menu or a list, would rather overhang
+     * its trigger than wrap.
+     *
+     * Only down to `MIN_SHRINK_WIDTH`. Past that the panel is narrower than it is
+     * readable, and a trigger that close to the screen edge is better served by a
+     * panel that overhangs it.
+     */
+    shrinkToFit?: boolean;
 }
 /**
  * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with
@@ -22,4 +41,4 @@ export interface UsePopoverPositionArgs {
  * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and
  * re-running on scroll, viewport resize and panel size changes.
  */
-export declare function usePopoverPosition({ isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef, }: UsePopoverPositionArgs): void;
+export declare function usePopoverPosition({ isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef, matchTriggerWidth, shrinkToFit, }: UsePopoverPositionArgs): void;

package/dist/types/common/ripple/ripple.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { RippleProps, RippleHandle } from './ripple.types';
 export type { RippleProps, RippleHandle };
-declare const Ripple: React.ForwardRefExoticComponent<RippleProps & React.RefAttributes<RippleHandle>>;
+declare function Ripple({ disabled, children, className, style, overflowHidden, rippleAnimationLength, rippleBackground, manualOnly, ref, ...rest }: RippleProps): React.JSX.Element;
 export default Ripple;

package/dist/types/common/ripple/ripple.types.d.ts

@@ -9,6 +9,7 @@ export interface RippleProps extends HtmlProps {
     rippleAnimationLength?: number;
     rippleBackground?: string;
     manualOnly?: boolean;
+    ref?: React.Ref<RippleHandle>;
 }
 export interface RippleHandle {
     addRipple: () => void;

package/dist/types/common/roomDrawer/roomDrawer.d.ts

@@ -1,3 +1,3 @@
-import { RoomDrawerHandle, RoomDrawerProps } from './roomDrawer.types';
-declare const RoomDrawer: import('react').ForwardRefExoticComponent<RoomDrawerProps & import('react').RefAttributes<RoomDrawerHandle>>;
+import { RoomDrawerProps } from './roomDrawer.types';
+declare function RoomDrawer(props: RoomDrawerProps): import("react").JSX.Element;
 export default RoomDrawer;

package/dist/types/common/roomDrawer/roomDrawer.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { FloorPlan, OpeningKind, PlanParseResult, PlanPoint, PlanRoom, PlanSelection, PlanView } from '../floorPlan';
 import { IconContent } from '../types/icon.types';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
@@ -299,6 +299,8 @@ export interface RoomDrawerProps extends Omit<HtmlProps<HTMLDivElement>, 'onChan
     labels?: RoomDrawerLabels;
     icons?: RoomDrawerIcons;
     'aria-label'?: string;
+    /** Imperative handle for driving the editor. */
+    ref?: Ref<RoomDrawerHandle>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<RoomDrawerSlots>;

package/dist/types/common/roomViewer/roomViewer.d.ts

@@ -1,4 +1,4 @@
-import { RoomViewerHandle, RoomViewerProps } from './roomViewer.types';
+import { RoomViewerProps } from './roomViewer.types';
 /**
  * Read-only view of a floor plan.
  *
@@ -6,5 +6,5 @@ import { RoomViewerHandle, RoomViewerProps } from './roomViewer.types';
  * two cannot drift apart. Selection and hover are React state rather than classes pushed
  * onto DOM nodes, which is what lets them be controlled from outside.
  */
-declare const RoomViewer: import('react').ForwardRefExoticComponent<RoomViewerProps & import('react').RefAttributes<RoomViewerHandle>>;
+declare function RoomViewer(props: RoomViewerProps): import("react").JSX.Element;
 export default RoomViewer;

package/dist/types/common/roomViewer/roomViewer.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { DerivedRoom, FloorPlan, PlanRoom, PlanView } from '../floorPlan';
 import { IconContent } from '../types/icon.types';
 import { HtmlProps, SlotClassNames, SlotStyles } from '../types/slots.types';
@@ -82,6 +82,8 @@ export interface RoomViewerProps extends Omit<HtmlProps<HTMLDivElement>, 'onSele
     emptyState?: ReactNode;
     labels?: RoomViewerLabels;
     icons?: RoomViewerIcons;
+    /** Imperative handle for driving the viewport. */
+    ref?: Ref<RoomViewerHandle>;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<RoomViewerSlots>;

package/dist/types/common/searchInput/searchInput.d.ts

@@ -1,3 +1,3 @@
 import { ReactElement } from 'react';
 import { SearchInputProps } from './searchInput.types';
-export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, style, classNames, styles: slotStyles, labels, ...rest }: SearchInputProps): ReactElement;
+export default function SearchInput({ value, onChange, onDebounce, placeholder, label, debounceMs, totalAmount, showAmount, className, width, style, classNames, styles: slotStyles, labels, ref, ...rest }: SearchInputProps): ReactElement;

package/dist/types/common/searchInput/searchInput.types.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type SearchInputSlots = 'root' | 'input' | 'resultCount';
 /** Text SearchInput renders of its own, for translating it. */
@@ -22,4 +23,6 @@ export interface SearchInputProps extends Omit<HtmlProps, 'onChange'> {
     styles?: SlotStyles<SearchInputSlots>;
     /** Overrides the text SearchInput renders of its own. Merged per key. */
     labels?: SearchInputLabels;
+    /** Ref to the inner `<input>`, for focusing the field. */
+    ref?: React.Ref<HTMLInputElement>;
 }

package/dist/types/common/splitButton/splitButton.types.d.ts

@@ -1,7 +1,7 @@
+import { PopoverAlign } from '../popover/popover.types';
 import { CSSProperties, ReactNode } from 'react';
 import { IconContent } from '../types/icon.types';
 import { ButtonStyleType, ButtonSize } from '../button/button.types';
-import { Align } from '../floatingMenu/floatingMenu.types';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export interface SplitButtonAction {
     id: string;
@@ -24,8 +24,8 @@ export interface SplitButtonProps extends HtmlProps {
     size?: ButtonSize;
     disabled?: boolean;
     isLoading?: boolean;
-    /** Alignment of the actions menu relative to the trigger button (default `Align.Right`) */
-    align?: Align;
+    /** Alignment of the actions menu relative to the trigger button (default `PopoverAlign.End`) */
+    align?: PopoverAlign;
     className?: string;
     style?: CSSProperties;
     classNames?: SlotClassNames<SplitButtonSlots>;

package/dist/types/common/switch/switch.types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactNode, Ref } from 'react';
 import { FormValidator } from '../../services/formValidation';
 import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';
 export type SwitchSlots = 'track' | 'thumb' | 'label';
@@ -14,6 +14,8 @@ export interface SwitchProps extends Omit<HtmlProps, 'onToggle'> {
     tabIndex?: number;
     formValidator?: FormValidator | null;
     children?: ReactNode;
+    /** Ref to the root element. */
+    ref?: Ref<HTMLDivElement>;
     classNames?: SlotClassNames<SwitchSlots>;
     styles?: SlotStyles<SwitchSlots>;
 }

package/dist/types/common/themeProvider/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './themeProvider';
 export { defaultTheme } from './defaultTheme';
+export { lightTheme } from './lightTheme';
 export type { Theme, ThemeVariables } from './theme.types';

package/dist/types/common/themeProvider/lightTheme.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from './theme.types';
+/**
+ * The light sibling of {@link defaultTheme}, which is dark. Same brand, inverted surfaces:
+ * it declares only what has to flip, and inherits the rest through `baseThemeId`, so a change
+ * to the palette or the type scale reaches both themes at once.
+ *
+ * ```tsx
+ * <ThemeProvider themes={[defaultTheme, lightTheme]} activeThemeId='light'>
+ * ```
+ *
+ * `--primary-color` is deliberately untouched: it is the brand, and it reads on both.
+ */
+export declare const lightTheme: Theme;