@enonic/ui 0.23.1 → 0.25.0

package/dist/types/components/selector/selector.d.ts

@@ -0,0 +1,131 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+export type SelectorRootProps = {
+    children?: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    required?: boolean;
+    name?: string;
+    form?: string;
+};
+export type SelectorTriggerProps = {
+    className?: string;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>;
+export type SelectorValueProps = {
+    className?: string;
+    placeholder?: string;
+    /**
+     * Content to display for the selected value.
+     * Can be a render function `(value: string) => ReactNode` for dynamic display text,
+     * or a static ReactNode. If not provided, falls back to raw value.
+     *
+     * **Recommended**: Use a render function to display proper labels instead of raw values.
+     * This ensures the correct text is shown even before the dropdown is opened.
+     *
+     * @example
+     * ```tsx
+     * // Render function (recommended)
+     * <Selector.Value placeholder="Select...">
+     *   {(value) => items.find(i => i.value === value)?.label}
+     * </Selector.Value>
+     *
+     * // Falls back to raw value when no children provided
+     * <Selector.Value placeholder="Select..." />
+     * ```
+     */
+    children?: ReactNode | ((value: string) => ReactNode);
+} & Omit<ComponentPropsWithoutRef<'span'>, 'children'>;
+export type SelectorIconProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'span'>;
+export type SelectorContentProps = {
+    className?: string;
+    children?: ReactNode;
+    align?: 'start' | 'end';
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    onInteractOutside?: (event: Event) => void;
+} & ComponentPropsWithoutRef<'div'>;
+export type SelectorViewportProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export type SelectorItemProps = {
+    value: string;
+    disabled?: boolean;
+    textValue?: string;
+    className?: string;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+export type SelectorItemTextProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'span'>;
+export type SelectorItemIndicatorProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'span'>;
+export type SelectorGroupProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export type SelectorLabelProps = {
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export type SelectorSeparatorProps = {
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+export type SelectorHiddenSelectProps = ComponentPropsWithoutRef<'select'>;
+export declare const Selector: {
+    ({ children, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, error, required, name, form, }: SelectorRootProps): ReactElement;
+    displayName: string;
+} & {
+    Root: {
+        ({ children, value: controlledValue, defaultValue, onValueChange, open: controlledOpen, defaultOpen, onOpenChange, disabled, error, required, name, form, }: SelectorRootProps): ReactElement;
+        displayName: string;
+    };
+    Trigger: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorTriggerProps> & {
+        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
+    }>;
+    Value: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorValueProps> & {
+        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
+    }>;
+    Icon: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorIconProps> & {
+        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
+    }>;
+    Content: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorContentProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Viewport: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorViewportProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Item: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorItemProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    ItemText: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorItemTextProps> & {
+        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
+    }>;
+    ItemIndicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorItemIndicatorProps> & {
+        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
+    }>;
+    Group: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorGroupProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Label: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorLabelProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    Separator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorSeparatorProps> & {
+        ref?: import('preact').Ref<HTMLDivElement> | undefined;
+    }>;
+    HiddenSelect: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SelectorHiddenSelectProps> & {
+        ref?: import('preact').Ref<HTMLSelectElement> | undefined;
+    }>;
+};

package/dist/types/components/tree-list/index.d.ts

@@ -1 +1 @@
-export { isLoadingPlaceholder, TreeList, type TreeListProps, type TreeNode } from './tree-list';
+export { type DefaultTreeListLoadingRowViewProps, type FlatTreeNode, LOADING_SUFFIX, ROOT_PARENT_ID, type TreeData, type TreeItems, TreeList, type TreeListContainerProps, type TreeListContentProps, type TreeListErrorRowProps, type TreeListLoadingRowProps, type TreeListProps, type TreeListRowContentProps, type TreeListRowExpandControlProps, type TreeListRowLeftProps, type TreeListRowLevelSpacerProps, type TreeListRowProps, type TreeListRowRightProps, type TreeListRowSelectionControlProps, } from './tree-list';

package/dist/types/components/tree-list/tree-list.d.ts

@@ -1,14 +1,29 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 import { IconButtonProps } from '../icon-button';
 import { LucideIcon } from '../../types';
-export type TreeListProps<T extends TreeNode = TreeNode> = {
+export declare const LOADING_SUFFIX = "__loading__";
+export declare const ROOT_PARENT_ID = "__root__";
+export type TreeData = {
+    id: string;
+    hasChildren: boolean;
+};
+export type TreeItems<TreeData> = {
+    nodes: Record<string, TreeData | undefined>;
+    children: Record<string, string[] | undefined>;
+    hasMore: Record<string, boolean | undefined>;
+};
+export type FlatTreeNode<TData extends TreeData> = {
+    id: string;
+    data: TData;
+    level: number;
+    parentId: string | null;
+    nodeType: 'node' | 'loading' | 'error';
+};
+export type TreeListProps<TData extends TreeData = TreeData> = {
     className?: string;
-    items?: T[];
-    setItems?: (items: T[]) => void;
-    isItemSelectable?: (item: T) => boolean;
-    fetchChildren: (parentNode: T | undefined, offset: number) => Promise<{
-        items: T[];
-        total: number;
+    fetchChildren: (parentId: string | undefined, offset: number) => Promise<{
+        items: TData[];
+        hasMore: boolean;
     }>;
     expanded?: ReadonlySet<string>;
     onExpandedChange?: (expanded: ReadonlySet<string>) => void;
@@ -18,75 +33,85 @@ export type TreeListProps<T extends TreeNode = TreeNode> = {
     active?: string | null;
     defaultActive?: string;
     setActive?: (active: string | null | undefined) => void;
+    isItemSelectable?: (item: TData) => boolean;
+    items?: TreeItems<TData>;
+    onItemsChange?: (items: TreeItems<TData>) => void;
     children?: ReactNode;
 } & ComponentPropsWithoutRef<'div'>;
-export type TreeListContentProps = {
+export type TreeListContainerProps = {
     children?: ReactNode;
-    load?: boolean;
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+export type DefaultTreeListLoadingRowViewProps<TData extends TreeData> = {
+    item: FlatTreeNode<TData>;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListContainerProps = {
+export type TreeListLoadingRowProps<TData extends TreeData> = {
+    item: FlatTreeNode<TData>;
+    renderLoading?: (item: FlatTreeNode<TData>) => ReactNode;
     children?: ReactNode;
+    intersectionProps?: IntersectionObserverInit;
+} & ComponentPropsWithoutRef<'div'>;
+export type TreeListErrorRowProps<TData extends TreeData> = {
+    item: FlatTreeNode<TData>;
+    renderError?: (item: FlatTreeNode<TData>) => ReactNode;
     className?: string;
+    onRetry?: () => void;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowLeftProps = {
+export type TreeListContentProps<TData extends TreeData> = {
+    renderNode: (item: FlatTreeNode<TData>) => ReactNode;
+    renderLoading?: (item: FlatTreeNode<TData>) => ReactNode;
+    renderError?: (item: FlatTreeNode<TData>) => ReactNode;
+};
+export type TreeListRowLeftProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowRightProps = {
+export type TreeListRowRightProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowLevelSpacerProps = {
+export type TreeListRowLevelSpacerProps = {
     level?: number;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowExpandControlProps = {
-    data: TreeNode;
+export type TreeListRowExpandControlProps<TData extends TreeData> = {
+    data: FlatTreeNode<TData>;
     icon?: LucideIcon;
 } & Omit<IconButtonProps, 'icon'>;
-type TreeListRowContentProps = {
+export type TreeListRowContentProps = {
     children?: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowSelectionControlProps = {
-    data: TreeNode;
+export type TreeListRowSelectionControlProps<TData extends TreeData> = {
+    data: FlatTreeNode<TData>;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-type TreeListRowProps<T extends TreeNode> = {
-    item: T;
+export type TreeListRowProps<TData extends TreeData> = {
+    item: FlatTreeNode<TData>;
     children: ReactNode;
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-export type TreeListLoadingRowProps = {
-    item: TreeNode;
-    children?: ReactNode;
-    intersectionProps?: IntersectionObserverInit;
-} & ComponentPropsWithoutRef<'div'>;
-export declare const TreeListRoot: <T extends TreeNode = TreeNode>({ className, items: controlledItems, setItems: setItemsControlled, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, children, ...props }: TreeListProps<T>) => ReactElement;
-export type TreeNode = {
-    id: string;
-    hasChildren?: boolean;
-    children?: TreeNode[];
-    hasMoreChildren?: boolean;
-    path: string[];
-};
-export declare function isLoadingPlaceholder(node: TreeNode): boolean;
-export declare const TreeList: (<T extends TreeNode = TreeNode>({ className, items: controlledItems, setItems: setItemsControlled, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, children, ...props }: TreeListProps<T>) => ReactElement) & {
-    Root: <T extends TreeNode = TreeNode>({ className, items: controlledItems, setItems: setItemsControlled, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, children, ...props }: TreeListProps<T>) => ReactElement;
+export declare const TreeList: (<TData extends TreeData = TreeData>({ className, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, items: controlledItems, onItemsChange, children, ...props }: TreeListProps<TData>) => ReactElement) & {
+    Root: <TData extends TreeData = TreeData>({ className, fetchChildren, selection: controlledSelection, expanded: controlledExpanded, onSelectionChange, onExpandedChange, active: controlledActive, defaultActive, setActive, selectionMode, isItemSelectable, items: controlledItems, onItemsChange, children, ...props }: TreeListProps<TData>) => ReactElement;
     Container: {
         ({ children, className, ...props }: TreeListContainerProps): ReactElement<TreeListContainerProps>;
         displayName: string;
     };
     Content: {
-        ({ children, load }: TreeListContentProps): ReactElement;
+        <TData extends TreeData>({ renderNode, renderLoading, renderError, }: TreeListContentProps<TData>): ReactElement;
         displayName: string;
     };
     Row: {
-        <T extends TreeNode>({ item, children, className, ...props }: TreeListRowProps<T>): ReactElement;
+        <TData extends TreeData>({ item, children, className, ...props }: TreeListRowProps<TData>): ReactElement;
         displayName: string;
     };
     LoadingRow: {
-        ({ item, children, intersectionProps, ...props }: TreeListLoadingRowProps): ReactElement;
+        <TData extends TreeData>({ item, renderLoading, className, children, intersectionProps, ...props }: TreeListLoadingRowProps<TData>): ReactElement;
+        displayName: string;
+    };
+    DefaultLoadingRowView: <TData extends TreeData>({ item, className, children, ...props }: DefaultTreeListLoadingRowViewProps<TData>) => ReactElement;
+    ErrorRow: {
+        <TData extends TreeData>({ item, onRetry, renderError, className, ...props }: TreeListErrorRowProps<TData>): ReactElement;
         displayName: string;
     };
     RowLeft: {
@@ -94,15 +119,15 @@ export declare const TreeList: (<T extends TreeNode = TreeNode>({ className, ite
         displayName: string;
     };
     RowRight: {
-        ({ children, className, ...props }: TreeListRowRightProps): ReactElement<TreeListRowLeftProps>;
+        ({ children, className, ...props }: TreeListRowRightProps): ReactElement<TreeListRowRightProps>;
         displayName: string;
     };
     RowLevelSpacer: {
-        ({ level, className, ...props }: TreeListRowLevelSpacerProps): ReactElement<TreeListRowLeftProps> | undefined;
+        ({ level, className, ...props }: TreeListRowLevelSpacerProps): ReactElement<TreeListRowLevelSpacerProps> | null;
         displayName: string;
     };
     RowExpandControl: {
-        ({ data, icon, className, ...props }: TreeListRowExpandControlProps): ReactElement<TreeListRowExpandControlProps>;
+        <TData extends TreeData>({ data, icon, className, ...props }: TreeListRowExpandControlProps<TData>): ReactElement<TreeListRowExpandControlProps<TData>>;
         displayName: string;
     };
     RowContent: {
@@ -110,8 +135,7 @@ export declare const TreeList: (<T extends TreeNode = TreeNode>({ className, ite
         displayName: string;
     };
     RowSelectionControl: {
-        ({ data, className, ...props }: TreeListRowSelectionControlProps): ReactElement;
+        <TData extends TreeData>({ data, className, ...props }: TreeListRowSelectionControlProps<TData>): ReactElement;
         displayName: string;
     };
 };
-export {};

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

@@ -4,8 +4,12 @@ export { useControlledState } from './use-controlled-state';
 export { useControlledStateWithNull } from './use-controlled-state-with-null';
 export { type FloatingPosition, type UseFloatingPositionConfig, useFloatingPosition } from './use-floating-position';
 export { type ItemMetadata, type UseItemRegistryReturn, useItemRegistry } from './use-item-registry';
+export { type UseItemTextRegistryReturn, useItemTextRegistry } from './use-item-text-registry';
 export { type KeyboardNavigationConfig, type UseKeyboardNavigationReturn, useKeyboardNavigation, } from './use-keyboard-navigation';
+export { type PointerPosition, type UsePointerPositionConfig, usePointerPosition } from './use-pointer-position';
 export { type UseRovingTabIndexConfig, type UseRovingTabIndexReturn, useRovingTabIndex } from './use-roving-tabindex';
 export { type UseScrollActiveIntoViewConfig, useScrollActiveIntoView } from './use-scroll-active-into-view';
 export { useScrollLock } from './use-scroll-lock';
+export { type UseSelectorKeyboardConfig, type UseSelectorKeyboardReturn, useSelectorKeyboard, } from './use-selector-keyboard';
 export { useSyncValue } from './use-sync-value';
+export { type UseTypeAheadConfig, type UseTypeAheadReturn, useTypeAhead } from './use-type-ahead';

package/dist/types/hooks/use-item-text-registry.d.ts

@@ -0,0 +1,29 @@
+export type UseItemTextRegistryReturn = {
+    /**
+     * Register text content for an item (for type-ahead matching)
+     */
+    registerItemText: (id: string, text: string) => void;
+    /**
+     * Unregister text content for an item
+     */
+    unregisterItemText: (id: string) => void;
+    /**
+     * Get the text content for an item
+     */
+    getItemText: (id: string) => string | undefined;
+};
+/**
+ * Hook for managing item text content registry.
+ * Used for type-ahead search functionality.
+ *
+ * @example
+ * ```tsx
+ * const { registerItemText, getItemText } = useItemTextRegistry();
+ *
+ * // In item component:
+ * useEffect(() => {
+ *   registerItemText(id, textContent);
+ * }, [id, textContent]);
+ * ```
+ */
+export declare function useItemTextRegistry(): UseItemTextRegistryReturn;

package/dist/types/hooks/use-pointer-position.d.ts

@@ -0,0 +1,57 @@
+import { RefObject } from 'react';
+export type PointerPosition = {
+    top: number;
+    left: number;
+};
+export type UsePointerPositionConfig = {
+    /** Whether positioning is enabled/active */
+    enabled: boolean;
+    /** Mouse/pointer position where the menu was triggered */
+    mousePosition: {
+        x: number;
+        y: number;
+    } | null;
+    /** Reference to the floating content element */
+    contentRef: RefObject<HTMLElement> | null;
+};
+/**
+ * Calculates optimal position for floating content relative to pointer coordinates,
+ * with automatic viewport collision detection and flip behavior.
+ *
+ * This hook handles:
+ * - Positioning at pointer cursor location
+ * - Horizontal flipping when overflowing right edge
+ * - Vertical flipping when overflowing bottom edge
+ * - Automatic repositioning on window resize
+ *
+ * @param config - Configuration object for positioning behavior
+ * @returns Position object with top and left coordinates, or null if not yet calculated
+ *
+ * @example
+ * ```tsx
+ * function ContextMenu() {
+ *   const contentRef = useRef<HTMLDivElement>(null);
+ *   const [mousePosition, setMousePosition] = useState<{ x: number; y: number } | null>(null);
+ *
+ *   const position = usePointerPosition({
+ *     enabled: open,
+ *     mousePosition,
+ *     contentRef,
+ *   });
+ *
+ *   return (
+ *     <div
+ *       ref={contentRef}
+ *       style={{
+ *         position: 'fixed',
+ *         top: position ? `${position.top}px` : '0',
+ *         left: position ? `${position.left}px` : '0',
+ *       }}
+ *     >
+ *       Context menu content
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function usePointerPosition({ enabled, mousePosition, contentRef, }: UsePointerPositionConfig): PointerPosition | null;

package/dist/types/hooks/use-selector-keyboard.d.ts

@@ -0,0 +1,68 @@
+export type UseSelectorKeyboardConfig = {
+    /**
+     * Get all item IDs in order
+     */
+    getItems: () => string[];
+    /**
+     * Check if an item is disabled
+     */
+    isItemDisabled: (id: string) => boolean;
+    /**
+     * Get the text content for an item (for type-ahead matching)
+     */
+    getItemText: (id: string) => string | undefined;
+    /**
+     * Currently active item ID
+     */
+    active: string | undefined;
+    /**
+     * Set the active item ID
+     */
+    setActive: (id: string | undefined) => void;
+    /**
+     * Currently selected value
+     */
+    value: string | undefined;
+    /**
+     * Whether the dropdown is open
+     */
+    open: boolean;
+    /**
+     * Set open state (internal, doesn't return focus)
+     */
+    setOpenInternal: (open: boolean) => void;
+    /**
+     * Set open state (with focus return handling)
+     */
+    setOpen: (open: boolean) => void;
+    /**
+     * Whether the selector is disabled
+     */
+    disabled: boolean;
+    /**
+     * Called when an item is selected
+     */
+    onSelect: (id: string) => void;
+};
+export type UseSelectorKeyboardReturn = {
+    /**
+     * Combined keyboard event handler
+     */
+    keyHandler: (e: React.KeyboardEvent<HTMLElement>) => void;
+};
+/**
+ * Hook for Selector keyboard handling.
+ *
+ * Combines keyboard navigation, type-ahead, and selector-specific behaviors:
+ * - Arrow keys, Home/End for navigation
+ * - Enter/Space for selection
+ * - Escape to close
+ * - Tab to select and close
+ * - PageUp/PageDown for large jumps
+ * - Type-ahead search (single char cycling, multi-char search)
+ * - Opens dropdown on navigation keys when closed
+ *
+ * @param config - Configuration object
+ * @returns Object with keyHandler
+ */
+export declare function useSelectorKeyboard(config: UseSelectorKeyboardConfig): UseSelectorKeyboardReturn;

package/dist/types/hooks/use-type-ahead.d.ts

@@ -0,0 +1,76 @@
+export type UseTypeAheadConfig = {
+    /**
+     * Get all item IDs in order
+     */
+    getItems: () => string[];
+    /**
+     * Check if an item is disabled
+     */
+    isItemDisabled: (id: string) => boolean;
+    /**
+     * Get the text content for an item (for matching)
+     */
+    getItemText: (id: string) => string | undefined;
+    /**
+     * Currently active item ID
+     */
+    active: string | undefined;
+    /**
+     * Set the active item ID
+     */
+    setActive: (id: string | undefined) => void;
+    /**
+     * Called when a match is found
+     */
+    onMatch?: (id: string) => void;
+    /**
+     * Timeout in ms before search string resets
+     * @default 500
+     */
+    timeout?: number;
+};
+export type UseTypeAheadReturn = {
+    /**
+     * Handle a typed character for type-ahead search
+     */
+    handleTypeAhead: (char: string) => void;
+    /**
+     * Reset the search string manually
+     */
+    resetSearch: () => void;
+};
+/**
+ * Hook for type-ahead search in a list of items.
+ *
+ * Behavior:
+ * - Single character: cycles through items starting with that character
+ * - Multiple characters typed quickly: finds first match for full string
+ * - Case-insensitive matching
+ * - Skips disabled items
+ * - Resets after timeout (default 500ms)
+ *
+ * **Important**: The `getItemText` function must return the searchable text for each item.
+ * When using complex children (e.g., `<ItemText>{label}</ItemText>`), you must either:
+ * 1. Provide a `textValue` prop to register searchable text explicitly
+ * 2. Extract text from DOM after mount using `element.textContent`
+ *
+ * Plain string children work automatically, but wrapped content requires explicit registration.
+ *
+ * @example
+ * ```tsx
+ * const { handleTypeAhead } = useTypeAhead({
+ *   getItems,
+ *   isItemDisabled,
+ *   getItemText,
+ *   active,
+ *   setActive,
+ *   onMatch: (id) => console.log('Found:', id),
+ * });
+ *
+ * // In keyboard handler:
+ * if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+ *   handleTypeAhead(e.key);
+ * }
+ * ```
+ */
+export declare function useTypeAhead(config: UseTypeAheadConfig): UseTypeAheadReturn;

package/dist/types/primitives/menu-primitive/index.d.ts

@@ -0,0 +1 @@
+export { type MenuItemOwnProps, MenuPrimitiveItem, MenuPrimitiveItemIndicator, type MenuPrimitiveItemIndicatorProps, type MenuPrimitiveItemProps, MenuPrimitiveLabel, type MenuPrimitiveLabelProps, MenuPrimitiveRadioGroup, type MenuPrimitiveRadioGroupProps, MenuPrimitiveRadioItem, type MenuPrimitiveRadioItemProps, MenuPrimitiveSeparator, type MenuPrimitiveSeparatorProps, type MenuRadioGroupOwnProps, type MenuRadioItemOwnProps, menuItemVariants, menuRadioItemVariants, useRadioGroup, } from './menu-primitive';

package/dist/types/primitives/menu-primitive/menu-primitive.d.ts

@@ -0,0 +1,93 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type MenuContextOperations = {
+    active: string | undefined;
+    setActive: (id: string | undefined) => void;
+    setOpen: (open: boolean) => void;
+    registerItem: (id: string, disabled?: boolean) => void;
+    unregisterItem: (id: string) => void;
+    getItems: () => string[];
+    isItemDisabled: (id: string) => boolean;
+};
+export declare const menuItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Public API props for menu items (without context operations) */
+export type MenuItemOwnProps = {
+    id?: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    className?: string;
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+/** Internal primitive props (own props + context operations for dependency injection) */
+export type MenuPrimitiveItemProps = MenuItemOwnProps & MenuContextOperations;
+export declare const MenuPrimitiveItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveItemProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type MenuPrimitiveLabelProps = {
+    className?: string;
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const MenuPrimitiveLabel: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveLabelProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type MenuPrimitiveSeparatorProps = {
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+export declare const MenuPrimitiveSeparator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveSeparatorProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+type RadioGroupContextValue = {
+    value: string | undefined;
+    setValue: (value: string) => void;
+    closeOnSelect: boolean;
+    setOpen: (open: boolean) => void;
+};
+export declare const useRadioGroup: () => RadioGroupContextValue;
+/** Public API props for radio groups (without setOpen) */
+export type MenuRadioGroupOwnProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    closeOnSelect?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+/** Internal primitive props (own props + setOpen for dependency injection) */
+export type MenuPrimitiveRadioGroupProps = MenuRadioGroupOwnProps & {
+    setOpen: (open: boolean) => void;
+};
+export declare const MenuPrimitiveRadioGroup: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveRadioGroupProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export declare const menuRadioItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Public API props for radio items (without context operations) */
+export type MenuRadioItemOwnProps = {
+    id?: string;
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    className?: string;
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;
+/** Internal primitive props (own props + context operations except setOpen, which comes from RadioGroup) */
+export type MenuPrimitiveRadioItemProps = MenuRadioItemOwnProps & Omit<MenuContextOperations, 'setOpen'>;
+export declare const MenuPrimitiveRadioItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveRadioItemProps> & {
+    ref?: import('preact').Ref<HTMLDivElement> | undefined;
+}>;
+export type MenuPrimitiveItemIndicatorProps = {
+    forceMount?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & ComponentPropsWithoutRef<'span'>;
+export declare const MenuPrimitiveItemIndicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveItemIndicatorProps> & {
+    ref?: import('preact').Ref<HTMLSpanElement> | undefined;
+}>;
+export {};