@adecore/ui 0.14.0

package/dist/index.d.ts

@@ -0,0 +1,74 @@
+export * as ContextMenu from './context-menu/index.parts.ts';
+export * as Dialog from './dialog/index.parts.ts';
+export * as Menu from './menu/index.parts.ts';
+export * as Popover from './popover/index.parts.ts';
+export * as PreviewCard from './preview-card/index.parts.ts';
+export type { DialogDescriptionProps, DialogFooterProps, DialogPopupProps, DialogTextProps, DialogTitleProps } from './dialog/parts.tsx';
+export type { MenuCheckProps, MenuHintProps, MenuLabelProps, MenuPopupProps, MenuRowActionProps, MenuRowProps, MenuRowSubmenuTriggerProps } from './menu/parts.tsx';
+export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
+export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
+export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button.tsx';
+export { ButtonGroup, type ButtonGroupProps } from './ButtonGroup.tsx';
+export { Checkbox, type CheckboxProps } from './Checkbox.tsx';
+export { ChoiceCards, type Choice, type ChoiceCardsProps } from './ChoiceCards.tsx';
+export { CloseButton, type CloseButtonProps } from './CloseButton.tsx';
+export { ColorSwatch, type ColorSwatchProps } from './ColorSwatch.tsx';
+export { ColumnResizeHandle, type ColumnResizeHandleProps } from './ColumnResizeHandle.tsx';
+export { DisabledReason, type DisabledReasonProps } from './DisabledReason.tsx';
+export { DockShell, type DockShellProps } from './DockShell.tsx';
+export { EmptyState, type EmptyStateProps } from './EmptyState.tsx';
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary.tsx';
+export { Field, FieldHint, FormError, type FieldHintProps, type FieldProps, type FormErrorProps } from './Field.tsx';
+export { FileIcon, type FileIconProps } from './FileIcon.tsx';
+export { Icon, type IconProps } from './Icon.tsx';
+export { IconButton, type IconButtonProps, type IconButtonSize } from './IconButton.tsx';
+export { IconPicker, type IconPickerGroup, type IconPickerProps } from './IconPicker.tsx';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input.tsx';
+export { Kbd, KeyCap, Keys, type KbdProps, type KeyCapProps, type KeysProps } from './Kbd.tsx';
+export { ListRow, type ListRowProps } from './ListRow.tsx';
+export { Meter, type MeterProps } from './Meter.tsx';
+export { PanelEmpty, type PanelEmptyProps } from './PanelEmpty.tsx';
+export { PanelHeader, type PanelHeaderProps } from './PanelHeader.tsx';
+export { Pill, type PillProps } from './Pill.tsx';
+export { PromptDialog, type PromptDialogProps } from './PromptDialog.tsx';
+export { ProjectSwitcher, type ProjectSwitcherItem, type ProjectSwitcherProps } from './ProjectSwitcher.tsx';
+export { SectionLabel, type SectionLabelProps } from './SectionLabel.tsx';
+export { SegmentBar, type SegmentBarPart, type SegmentBarProps } from './SegmentBar.tsx';
+export { Segmented, type SegmentedOption, type SegmentedProps } from './Segmented.tsx';
+export { Select, type SelectGroup, type SelectItem, type SelectProps } from './Select.tsx';
+export { Separator, type SeparatorProps } from './Separator.tsx';
+export { ShortcutHints } from './ShortcutHints.tsx';
+export { Skeleton, type SkeletonProps } from './Skeleton.tsx';
+export { SlidingColumn, type SlidingColumnProps } from './SlidingColumn.tsx';
+export { Spinner, type SpinnerProps } from './Spinner.tsx';
+export { Stepper, type StepperProps } from './Stepper.tsx';
+export { Surface, type SurfaceProps } from './Surface.tsx';
+export { Switch, type SwitchProps } from './Switch.tsx';
+export { TextMenu, type TextMenuProps } from './TextMenu.tsx';
+export { Tile, type TileProps } from './Tile.tsx';
+export { Toasts, type ToastsProps } from './Toasts.tsx';
+export { Tooltip, TooltipProvider, type TooltipProps, type TooltipSide } from './Tooltip.tsx';
+export { UIProvider, type UIProviderProps } from './UIProvider.tsx';
+export { Waveform, type WaveformProps } from './Waveform.tsx';
+export { Wipe, type WipeProps } from './Wipe.tsx';
+export { ZoomControls, type ZoomControlsProps, type ZoomLabels, type ZoomSelection } from './ZoomControls.tsx';
+export { copyText, readClipboardText } from './clipboard.ts';
+export { messageOf } from './error-message.ts';
+export type { ResetKeys } from './error-boundary.ts';
+export { FILE_TREE_ICONS } from './file-icon.ts';
+export { cameThroughPortal, isInFloatingLayer } from './floating.ts';
+export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.tsx';
+export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.ts';
+export { startInputModality } from './modality.ts';
+export { isApplePlatform } from './platform.ts';
+export { Prefetcher, prefetcher, type Loader, type WhenIdle } from './prefetch.ts';
+export { selectAllWithin, selectionWithin } from './selection.ts';
+export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts, type KeyLike, type Shortcut } from './shortcut.ts';
+export { SUCCESS_MS, UNDO_MS, createToastStore, elapsedOf, type Toast, type ToastAction, type ToastDeadline, type ToastInput, type ToastKind, type ToastPatch, type ToastStore, type ToastStoreHook } from './toast-store.ts';
+export { useAsyncAction, type AsyncAction } from './useAsyncAction.ts';
+export { clampColumnSize, useColumnResize, type ColumnEdge, type ColumnResize, type ColumnResizeOptions } from './useColumnResize.ts';
+export { useContentSize, type ContentSize } from './useContentSize.ts';
+export { useMeasuredWidth } from './useMeasuredWidth.ts';
+export { useNow, useTickingText } from './useNow.ts';
+export { ZOOM_PRESETS } from './zoom.ts';

package/dist/index.js

@@ -0,0 +1,74 @@
+/*
+ * The components, hooks and helpers of the library. Every name here is public API; the snapshot in
+ * `exports.test.ts` turns any change to this list into a diff someone has to accept.
+ */
+export * as ContextMenu from './context-menu/index.parts.js';
+export * as Dialog from './dialog/index.parts.js';
+export * as Menu from './menu/index.parts.js';
+export * as Popover from './popover/index.parts.js';
+export * as PreviewCard from './preview-card/index.parts.js';
+export { AccentSwatches } from './AccentSwatches.js';
+export { Banner } from './Banner.js';
+export { Button } from './Button.js';
+export { ButtonGroup } from './ButtonGroup.js';
+export { Checkbox } from './Checkbox.js';
+export { ChoiceCards } from './ChoiceCards.js';
+export { CloseButton } from './CloseButton.js';
+export { ColorSwatch } from './ColorSwatch.js';
+export { ColumnResizeHandle } from './ColumnResizeHandle.js';
+export { DisabledReason } from './DisabledReason.js';
+export { DockShell } from './DockShell.js';
+export { EmptyState } from './EmptyState.js';
+export { ErrorBoundary } from './ErrorBoundary.js';
+export { Field, FieldHint, FormError } from './Field.js';
+export { FileIcon } from './FileIcon.js';
+export { Icon } from './Icon.js';
+export { IconButton } from './IconButton.js';
+export { IconPicker } from './IconPicker.js';
+export { Input, TextArea } from './Input.js';
+export { Kbd, KeyCap, Keys } from './Kbd.js';
+export { ListRow } from './ListRow.js';
+export { Meter } from './Meter.js';
+export { PanelEmpty } from './PanelEmpty.js';
+export { PanelHeader } from './PanelHeader.js';
+export { Pill } from './Pill.js';
+export { PromptDialog } from './PromptDialog.js';
+export { ProjectSwitcher } from './ProjectSwitcher.js';
+export { SectionLabel } from './SectionLabel.js';
+export { SegmentBar } from './SegmentBar.js';
+export { Segmented } from './Segmented.js';
+export { Select } from './Select.js';
+export { Separator } from './Separator.js';
+export { ShortcutHints } from './ShortcutHints.js';
+export { Skeleton } from './Skeleton.js';
+export { SlidingColumn } from './SlidingColumn.js';
+export { Spinner } from './Spinner.js';
+export { Stepper } from './Stepper.js';
+export { Surface } from './Surface.js';
+export { Switch } from './Switch.js';
+export { TextMenu } from './TextMenu.js';
+export { Tile } from './Tile.js';
+export { Toasts } from './Toasts.js';
+export { Tooltip, TooltipProvider } from './Tooltip.js';
+export { UIProvider } from './UIProvider.js';
+export { Waveform } from './Waveform.js';
+export { Wipe } from './Wipe.js';
+export { ZoomControls } from './ZoomControls.js';
+export { copyText, readClipboardText } from './clipboard.js';
+export { messageOf } from './error-message.js';
+export { FILE_TREE_ICONS } from './file-icon.js';
+export { cameThroughPortal, isInFloatingLayer } from './floating.js';
+export { LoadedComponent, lazyDialog, lazyNamed, onLazyOpenError } from './lazy.js';
+export { UI_NAMESPACE, UI_RESOURCES, addUiResources } from './locales.js';
+export { startInputModality } from './modality.js';
+export { isApplePlatform } from './platform.js';
+export { Prefetcher, prefetcher } from './prefetch.js';
+export { selectAllWithin, selectionWithin } from './selection.js';
+export { EDIT_SHORTCUTS, KEY_SHORTCUTS, formatShortcut, isModHeld, matchesShortcut, shortcut, shortcutParts } from './shortcut.js';
+export { SUCCESS_MS, UNDO_MS, createToastStore, elapsedOf } from './toast-store.js';
+export { useAsyncAction } from './useAsyncAction.js';
+export { clampColumnSize, useColumnResize } from './useColumnResize.js';
+export { useContentSize } from './useContentSize.js';
+export { useMeasuredWidth } from './useMeasuredWidth.js';
+export { useNow, useTickingText } from './useNow.js';
+export { ZOOM_PRESETS } from './zoom.js';

package/dist/lazy.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps, type ComponentType } from 'react';
+export declare class LoadedComponent<Component> {
+    current: Component | null;
+    private readonly listeners;
+    private readonly loader;
+    constructor(loader: () => Promise<Component>);
+    load(): Promise<Component>;
+    subscribe(listener: () => void): () => void;
+}
+export declare function onLazyOpenError(listener: (error: unknown) => void): () => void;
+export declare function lazyNamed<Module extends Record<Name, ComponentType<any>>, Name extends keyof Module>(load: () => Promise<Module>, name: Name): ComponentType<ComponentProps<Module[Name]>>;
+export declare function lazyDialog<Module extends Record<Name, ComponentType>, Name extends keyof Module, State>(load: () => Promise<Module>, name: Name, useStore: (select: (state: State) => boolean) => boolean, isOpen: (state: State) => boolean): ComponentType;

package/dist/lazy.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy, useState, useSyncExternalStore } from 'react';
+import { prefetcher } from './prefetch.js';
+/*
+ * A module's component, loaded once and kept. `React.lazy` suspends for a tick even on a module the
+ * prefetcher already has, which shows the fallback and mounts a dialog already open; a component
+ * that is here is drawn straight away instead.
+ */
+export class LoadedComponent {
+    current = null;
+    listeners = new Set();
+    loader;
+    constructor(loader) {
+        this.loader = loader;
+    }
+    async load() {
+        const component = await this.loader();
+        if (this.current === null) {
+            this.current = component;
+            for (const listener of this.listeners) {
+                listener();
+            }
+        }
+        return component;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+}
+const openErrorListeners = new Set();
+/*
+ * Tells `listener` when a module that `lazyNamed` or `lazyDialog` loads for a render fails to load,
+ * which is a load a person waits on. A failed prefetch never reaches it, not even one of the same
+ * module at the same moment, so an app can answer the one without being woken by the other.
+ */
+export function onLazyOpenError(listener) {
+    openErrorListeners.add(listener);
+    return () => {
+        openErrorListeners.delete(listener);
+    };
+}
+/* Only a render loads through here; the prefetcher calls `loaded.load()` itself, so its failures report nothing. */
+async function open(loaded) {
+    try {
+        return { default: await loaded.load() };
+    }
+    catch (error) {
+        for (const listener of openErrorListeners) {
+            listener(error);
+        }
+        throw error;
+    }
+}
+/*
+ * `React.lazy` for a module that exports its component by name, `default` included. Every module
+ * loaded through here, or through `lazyDialog`, registers with `prefetcher`, which loads it ahead of
+ * its first opening once the app calls `prefetcher.prefetchEverything()`.
+ */
+export function lazyNamed(load, name) {
+    const loaded = new LoadedComponent(async () => (await load())[name]);
+    prefetcher.register(() => loaded.load());
+    const Lazy = lazy(() => open(loaded));
+    // Once `loaded` has it, `Lazy` never committed anything, so switching over remounts nothing.
+    const LazyNamed = (props) => {
+        const Component = loaded.current ?? Lazy;
+        return _jsx(Component, { ...props });
+    };
+    return LazyNamed;
+}
+/* Stays true after the first opening, so every close after it still has something mounted to animate. */
+function useOpenedOnce(open) {
+    const [opened, setOpened] = useState(open);
+    if (open && !opened) {
+        setOpened(true);
+    }
+    return opened || open;
+}
+/*
+ * A dialog that keeps its own open state. Once its module is here, prefetched or opened, it stays
+ * mounted closed, so its first opening animates like every other; before that, opening loads it.
+ */
+export function lazyDialog(load, name, useStore, isOpen) {
+    const loaded = new LoadedComponent(async () => (await load())[name]);
+    prefetcher.register(() => loaded.load());
+    const Dialog = lazy(() => open(loaded));
+    const subscribe = (listener) => loaded.subscribe(listener);
+    const isLoaded = () => loaded.current !== null;
+    const LazyDialog = () => {
+        const opened = useOpenedOnce(useStore(isOpen));
+        useSyncExternalStore(subscribe, isLoaded);
+        const Loaded = loaded.current;
+        if (Loaded) {
+            return _jsx(Loaded, {});
+        }
+        if (!opened) {
+            return null;
+        }
+        return (_jsx(Suspense, { fallback: null, children: _jsx(Dialog, {}) }));
+    };
+    return LazyDialog;
+}

package/dist/locales/en.json

@@ -0,0 +1,59 @@
+{
+    "action": {
+        "cancel": "Cancel",
+        "copy": "Copy",
+        "copyError": "Copy error",
+        "dismiss": "Dismiss",
+        "reload": "Reload",
+        "retry": "Try again",
+        "select": "Select",
+        "selectAll": "Select all"
+    },
+    "accent": {
+        "more": "More colors"
+    },
+    "settings": {
+        "title": "Settings",
+        "section": "Settings section",
+        "sections": "Settings sections",
+        "close": "Close settings",
+        "failed": "This settings page failed to render",
+        "search": {
+            "placeholder": "Search settings",
+            "clear": "Clear search",
+            "none": "Nothing matches \"{{query}}\".",
+            "results": "Search results",
+            "pane": "Section"
+        }
+    },
+    "controls": {
+        "stepper": {
+            "smaller": "Smaller",
+            "larger": "Larger",
+            "smallerFor": "{{label}}: smaller",
+            "largerFor": "{{label}}: larger"
+        }
+    },
+    "iconPicker": {
+        "label": "Icon",
+        "none": "No icon",
+        "search": "Find an icon",
+        "clear": "Clear search",
+        "noMatch": "No icon matches “{{query}}”"
+    },
+    "zoom": {
+        "out": "Zoom out",
+        "in": "Zoom in",
+        "presets": "Zoom presets",
+        "fit": "Zoom to fit",
+        "fitEverything": "Fit everything"
+    },
+    "waveform": {
+        "position": "{{time}} of {{duration}}"
+    },
+    "projectSwitcher": {
+        "label": "Projects",
+        "recent": "Recent projects",
+        "actionsFor": "Actions for {{name}}"
+    }
+}

package/dist/locales/nl.json

@@ -0,0 +1,59 @@
+{
+    "action": {
+        "cancel": "Annuleren",
+        "copy": "Kopiëren",
+        "copyError": "Fout kopiëren",
+        "dismiss": "Sluiten",
+        "reload": "Herladen",
+        "retry": "Opnieuw proberen",
+        "select": "Selecteren",
+        "selectAll": "Alles selecteren"
+    },
+    "accent": {
+        "more": "Meer kleuren"
+    },
+    "settings": {
+        "title": "Instellingen",
+        "section": "Onderdeel van de instellingen",
+        "sections": "Onderdelen van de instellingen",
+        "close": "Instellingen sluiten",
+        "failed": "Deze instellingenpagina kon niet worden getekend",
+        "search": {
+            "placeholder": "Instellingen zoeken",
+            "clear": "Zoekopdracht wissen",
+            "none": "Niets komt overeen met \"{{query}}\".",
+            "results": "Zoekresultaten",
+            "pane": "Onderdeel"
+        }
+    },
+    "controls": {
+        "stepper": {
+            "smaller": "Kleiner",
+            "larger": "Groter",
+            "smallerFor": "{{label}}: kleiner",
+            "largerFor": "{{label}}: groter"
+        }
+    },
+    "iconPicker": {
+        "label": "Icoon",
+        "none": "Geen icoon",
+        "search": "Zoek een icoon",
+        "clear": "Zoekopdracht wissen",
+        "noMatch": "Geen icoon past bij “{{query}}”"
+    },
+    "zoom": {
+        "out": "Uitzoomen",
+        "in": "Inzoomen",
+        "presets": "Zoomstanden",
+        "fit": "Zoomen tot alles past",
+        "fitEverything": "Alles laten passen"
+    },
+    "waveform": {
+        "position": "{{time}} van {{duration}}"
+    },
+    "projectSwitcher": {
+        "label": "Projecten",
+        "recent": "Recente projecten",
+        "actionsFor": "Acties voor {{name}}"
+    }
+}

package/dist/locales.d.ts

@@ -0,0 +1,4 @@
+import type { i18n as I18n } from 'i18next';
+export declare const UI_NAMESPACE = "ui";
+export declare const UI_RESOURCES: Readonly<Record<string, Record<string, unknown>>>;
+export declare const addUiResources: (i18n: I18n) => void;

package/dist/locales.js

@@ -0,0 +1,17 @@
+import en from './locales/en.json' with { type: 'json' };
+import nl from './locales/nl.json' with { type: 'json' };
+/* The words of this library live in a namespace of their own, which the app adds to its i18next beside its own namespaces. */
+export const UI_NAMESPACE = 'ui';
+/*
+ * Every language the library speaks, by language code. Small enough to ship whole, which is what lets
+ * `addUiResources` run synchronously before the first render, so no word ever shows as its key.
+ */
+export const UI_RESOURCES = { en, nl };
+/* Adds the `ui` namespace in every language to an i18next instance. A language the app already filled keeps its words. */
+export const addUiResources = (i18n) => {
+    for (const [language, words] of Object.entries(UI_RESOURCES)) {
+        if (!i18n.hasResourceBundle(language, UI_NAMESPACE)) {
+            i18n.addResourceBundle(language, UI_NAMESPACE, words, true, false);
+        }
+    }
+};

package/dist/menu/index.parts.d.ts

@@ -0,0 +1 @@
+export { MenuCheck as Check, MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuHint as Hint, MenuItem as Item, MenuLabel as Label, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuRow as Row, MenuRowAction as RowAction, MenuRowSubmenuTrigger as RowSubmenuTrigger, MenuSeparator as Separator, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, MenuTrigger as Trigger } from './parts.tsx';

package/dist/menu/index.parts.js

@@ -0,0 +1 @@
+export { MenuCheck as Check, MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuHint as Hint, MenuItem as Item, MenuLabel as Label, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuRow as Row, MenuRowAction as RowAction, MenuRowSubmenuTrigger as RowSubmenuTrigger, MenuSeparator as Separator, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, MenuTrigger as Trigger } from './parts.js';

package/dist/menu/parts.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentProps, type ReactNode, type Ref } from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { ContextMenu as BaseContextMenu } from '@base-ui-components/react/context-menu';
+import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+import { Separator as BaseSeparator } from '@base-ui-components/react/separator';
+import { useRender } from '@base-ui-components/react/use-render';
+type PositionerProps = ComponentProps<typeof BaseMenu.Positioner>;
+type Placement = Pick<PositionerProps, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'collisionPadding' | 'collisionBoundary' | 'collisionAvoidance' | 'anchor' | 'sticky' | 'positionMethod'>;
+export declare const MENU_LABEL = "px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint";
+export declare function MenuRoot(props: ComponentProps<typeof BaseMenu.Root>): import("react").JSX.Element;
+export declare function ContextMenuRoot(props: ComponentProps<typeof BaseContextMenu.Root>): import("react").JSX.Element;
+export declare function MenuSubmenuRoot(props: ComponentProps<typeof BaseMenu.SubmenuRoot>): import("react").JSX.Element;
+export declare const MenuTrigger: BaseMenu.Trigger;
+export declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/context-menu").ContextMenuTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export type MenuPopupProps = ComponentProps<typeof BaseMenu.Popup> & Placement;
+export declare function MenuPopup({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }: MenuPopupProps): import("react").JSX.Element;
+type ItemLook = {
+    unstyled?: boolean;
+};
+type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & ItemLook;
+export declare function MenuItem({ unstyled, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export interface MenuCheckProps {
+    kind: 'radio' | 'checkbox';
+    checked?: boolean;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function MenuCheck({ kind, checked, className, ref }: MenuCheckProps): import("react").JSX.Element;
+type Indicator = {
+    indicator?: 'start' | 'end';
+};
+type MenuCheckboxItemProps = ComponentProps<typeof BaseMenu.CheckboxItem> & ItemLook & Indicator & {
+    children?: ReactNode;
+};
+export declare function MenuCheckboxItem({ unstyled, indicator, className, children, ...props }: MenuCheckboxItemProps): import("react").JSX.Element;
+export declare const MenuRadioGroup: import("react").NamedExoticComponent<import("@base-ui-components/react/menu").MenuRadioGroupProps & import("react").RefAttributes<Element>>;
+type MenuRadioItemProps = ComponentProps<typeof BaseMenu.RadioItem> & ItemLook & Indicator & {
+    children?: ReactNode;
+};
+export declare function MenuRadioItem({ unstyled, indicator, className, children, ...props }: MenuRadioItemProps): import("react").JSX.Element;
+type SubmenuTriggerProps = ComponentProps<typeof BaseMenu.SubmenuTrigger> & {
+    children?: ReactNode;
+    chevron?: boolean;
+};
+export declare function MenuSubmenuTrigger({ className, children, chevron, ...props }: SubmenuTriggerProps): import("react").JSX.Element;
+export type MenuRowProps = useRender.ComponentProps<'div'>;
+export declare function MenuRow({ render, className, ref, ...props }: MenuRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type RowButton = {
+    icon: LucideIcon;
+    label: string;
+    iconClassName?: string;
+};
+export type MenuRowActionProps = Omit<ComponentProps<typeof BaseMenu.Item>, 'children' | 'label'> & RowButton;
+export declare function MenuRowAction({ icon, label, iconClassName, className, ...props }: MenuRowActionProps): import("react").JSX.Element;
+export type MenuRowSubmenuTriggerProps = Omit<ComponentProps<typeof BaseMenu.SubmenuTrigger>, 'children' | 'label'> & RowButton;
+export declare function MenuRowSubmenuTrigger({ icon, label, iconClassName, className, ...props }: MenuRowSubmenuTriggerProps): import("react").JSX.Element;
+export declare function MenuSeparator({ className, ...props }: ComponentProps<typeof BaseSeparator>): import("react").JSX.Element;
+export declare const MenuGroup: import("react").ForwardRefExoticComponent<import("@base-ui-components/react/menu").MenuGroupProps & import("react").RefAttributes<Element>>;
+type MenuGroupLabelProps = ComponentProps<typeof BaseMenu.GroupLabel> & {
+    unstyled?: boolean;
+};
+export declare function MenuGroupLabel({ unstyled, className, ...props }: MenuGroupLabelProps): import("react").JSX.Element;
+export type MenuLabelProps = useRender.ComponentProps<'div'>;
+export declare function MenuLabel({ render, className, ref, ...props }: MenuLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MenuHintProps = useRender.ComponentProps<'span'>;
+export declare function MenuHint({ render, className, ref, ...props }: MenuHintProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/menu/parts.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import clsx from 'clsx';
+import { Check, ChevronRight } from 'lucide-react';
+import { ContextMenu as BaseContextMenu } from '@base-ui-components/react/context-menu';
+import { Menu as BaseMenu } from '@base-ui-components/react/menu';
+import { Separator as BaseSeparator } from '@base-ui-components/react/separator';
+import { useRender } from '@base-ui-components/react/use-render';
+import { withClass } from '../class-name.js';
+import { Icon } from '../Icon.js';
+import { Tooltip } from '../Tooltip.js';
+const MenuKindContext = createContext('menu');
+/*
+ * A menu hangs under its trigger, lined up with its start, unless there is no room. A context menu
+ * opens at the pointer, which its positioner already knows. A submenu sits beside its row, pulled
+ * up by the popup's own padding so its first row lines up with the row that opened it.
+ */
+const PLACEMENT = {
+    menu: { side: 'bottom', align: 'start', sideOffset: 6 },
+    context: {},
+    submenu: { sideOffset: 4, alignOffset: -4 }
+};
+/* The label above a group of rows. It takes the line height of the row it sits in. */
+export const MENU_LABEL = 'px-2.5 pt-1.5 pb-0.5 text-xs/[inherit] text-text-faint';
+/* A trailing hint in a row: what the item does to something else, never a shortcut. A shortcut stays a `Kbd`, which `.menu-item` already pushes to the right. */
+const MENU_HINT = 'ml-auto pl-3 text-xs/[inherit] text-text-faint';
+/* The hairline between two groups of rows. It runs the whole width of the popup, which is what the
+   negative margin buys back from its 4px of padding, and it is softer than a border a surface ends with. */
+const MENU_SEPARATOR = '-mx-1 my-1 h-px bg-border-soft';
+export function MenuRoot(props) {
+    return (_jsx(MenuKindContext, { value: "menu", children: _jsx(BaseMenu.Root, { ...props }) }));
+}
+export function ContextMenuRoot(props) {
+    return (_jsx(MenuKindContext, { value: "context", children: _jsx(BaseContextMenu.Root, { ...props }) }));
+}
+export function MenuSubmenuRoot(props) {
+    return (_jsx(MenuKindContext, { value: "submenu", children: _jsx(BaseMenu.SubmenuRoot, { ...props }) }));
+}
+export const MenuTrigger = BaseMenu.Trigger;
+export const ContextMenuTrigger = BaseContextMenu.Trigger;
+/*
+ * The shell every menu is drawn in: the portal, the layer it sits on and the gap to its trigger are
+ * decided once. The popup scrolls inside the room the window leaves it; `className` adds a minimum
+ * width or a layout of its own, such as a grid of swatches.
+ */
+export function MenuPopup({ side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, anchor, sticky, positionMethod, className, ...props }) {
+    const defaults = PLACEMENT[useContext(MenuKindContext)];
+    return (_jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { className: "popup-positioner", side: side ?? defaults.side, align: align ?? defaults.align, sideOffset: sideOffset ?? defaults.sideOffset, alignOffset: alignOffset ?? defaults.alignOffset, collisionPadding: collisionPadding, collisionBoundary: collisionBoundary, collisionAvoidance: collisionAvoidance, anchor: anchor, sticky: sticky, positionMethod: positionMethod, children: _jsx(BaseMenu.Popup, { className: withClass('menu-popup', className), ...props }) }) }));
+}
+export function MenuItem({ unstyled = false, className, ...props }) {
+    return _jsx(BaseMenu.Item, { className: unstyled ? className : withClass('menu-item', className), ...props });
+}
+/*
+ * The slot before the label of a row that can be checked, in a menu or a list that reads as one. It
+ * is one line of the row tall, so a row with a second line keeps the tick beside its first. Radio and
+ * checkbox items draw it themselves; a plain row that shows a state hands it `checked`.
+ */
+export function MenuCheck({ kind, checked, className, ref }) {
+    const tick = _jsx(Icon, { icon: Check, size: kind === 'radio' ? 14 : 12 });
+    const indicator = checked !== undefined ? (checked && tick) : kind === 'radio' ? (_jsx(BaseMenu.RadioItemIndicator, { className: "flex", children: tick })) : (_jsx(BaseMenu.CheckboxItemIndicator, { className: "flex", children: tick }));
+    return (_jsx("span", { ref: ref, className: clsx('grid h-lh w-4 shrink-0 place-items-center', className), children: kind === 'checkbox' ? _jsx("span", { className: "grid h-4 w-4 place-items-center rounded border border-border-strong", children: indicator }) : indicator }));
+}
+/* A row that is on or off. The box before its label is part of it. */
+export function MenuCheckboxItem({ unstyled = false, indicator = 'start', className, children, ...props }) {
+    if (unstyled) {
+        return (_jsx(BaseMenu.CheckboxItem, { className: className, ...props, children: children }));
+    }
+    return (_jsxs(BaseMenu.CheckboxItem, { className: withClass('menu-item', className), ...props, children: [indicator === 'start' && _jsx(MenuCheck, { kind: "checkbox" }), children, indicator === 'end' && _jsx(MenuCheck, { kind: "checkbox", className: "ml-auto" })] }));
+}
+export const MenuRadioGroup = BaseMenu.RadioGroup;
+/* One of several. The tick before its label is part of it. */
+export function MenuRadioItem({ unstyled = false, indicator = 'start', className, children, ...props }) {
+    if (unstyled) {
+        return (_jsx(BaseMenu.RadioItem, { className: className, ...props, children: children }));
+    }
+    return (_jsxs(BaseMenu.RadioItem, { className: withClass('menu-item', className), ...props, children: [indicator === 'start' && _jsx(MenuCheck, { kind: "radio" }), children, indicator === 'end' && _jsx(MenuCheck, { kind: "radio", className: "ml-auto" })] }));
+}
+export function MenuSubmenuTrigger({ className, children, chevron = true, ...props }) {
+    return (_jsxs(BaseMenu.SubmenuTrigger, { className: withClass('menu-item', className), ...props, children: [children, chevron && _jsx(Icon, { icon: ChevronRight, size: 14, className: "ml-auto text-text-faint" })] }));
+}
+/*
+ * A row with buttons at its end that reads as one row. Its first item is the row, every `RowAction`
+ * and `RowSubmenuTrigger` after it an item of its own, so the arrow keys reach each.
+ */
+export function MenuRow({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { role: 'group', ...props, className: clsx('menu-row', className) } });
+}
+/* A button in a `Menu.Row` that acts at once, named by its tooltip. `closeOnClick={false}` keeps the menu open. */
+export function MenuRowAction({ icon, label, iconClassName, className, ...props }) {
+    return (_jsx(Tooltip, { label: label, name: true, children: _jsx(BaseMenu.Item, { className: withClass('menu-item menu-row-action', className), ...props, children: _jsx(Icon, { icon: icon, size: 14, className: iconClassName }) }) }));
+}
+/*
+ * A button in a `Menu.Row` that opens a submenu, inside a `Menu.SubmenuRoot`. It has no tooltip: the
+ * submenu opens on the same hover and says what the button holds.
+ */
+export function MenuRowSubmenuTrigger({ icon, label, iconClassName, className, ...props }) {
+    return (_jsx(BaseMenu.SubmenuTrigger, { className: withClass('menu-item menu-row-action', className), "aria-label": label, ...props, children: _jsx(Icon, { icon: icon, size: 14, className: iconClassName }) }));
+}
+/* Also right between two groups of rows in a popover that reads as a menu. */
+export function MenuSeparator({ className, ...props }) {
+    return _jsx(BaseSeparator, { className: withClass(MENU_SEPARATOR, className), ...props });
+}
+export const MenuGroup = BaseMenu.Group;
+export function MenuGroupLabel({ unstyled = false, className, ...props }) {
+    return _jsx(BaseMenu.GroupLabel, { className: unstyled ? className : withClass(MENU_LABEL, className), ...props });
+}
+/* A label above rows that are not a `Menu.Group` of their own, such as a row of swatches. */
+export function MenuLabel({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'div', props: { ...props, className: clsx(MENU_LABEL, className) } });
+}
+export function MenuHint({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx(MENU_HINT, className) } });
+}

package/dist/merge-refs.d.ts

@@ -0,0 +1,2 @@
+import type { Ref, RefCallback } from 'react';
+export declare const mergeRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;

package/dist/merge-refs.js

@@ -0,0 +1,11 @@
+/* One callback ref that fills a component's own ref and the one its caller handed in. */
+export const mergeRefs = (...refs) => (node) => {
+    for (const ref of refs) {
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }
+};

package/dist/modality.d.ts

@@ -0,0 +1 @@
+export declare function startInputModality(): void;