@enonic/ui 1.5.0 → 1.7.0

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

@@ -51,9 +51,11 @@ export declare const Listbox: {
         ({ baseId, selection: controlledSelection, defaultSelection, onSelectionChange, active: controlledActive, defaultActive, setActive, selectionMode, focusMode, disabled, children, keyHandler, registerItem: externalRegisterItem, unregisterItem: externalUnregisterItem, getItems: externalGetItems, isItemDisabled: externalIsItemDisabled, autoActiveOnOpen, }: ListboxRootProps): ReactElement;
         displayName: string;
     };
-    Content: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<ListboxContentProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
+    Content: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        label?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Item: {
         ({ value, disabled, children, className, ...props }: ListboxItemProps): ReactElement;
         displayName: string;

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

@@ -20,7 +20,7 @@ export type MenuPortalProps = {
 export type MenuContentProps = {
     forceMount?: boolean;
     loop?: boolean;
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
     onPointerDownOutside?: (event: PointerEvent) => void;
     onInteractOutside?: (event: Event) => void;
     className?: string;
@@ -66,32 +66,59 @@ export declare const Menu: {
         ({ open: controlledOpen, defaultOpen, onOpenChange, children, }: MenuRootProps): ReactElement;
         displayName: string;
     };
-    Trigger: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuTriggerProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
+    Trigger: import('react').ForwardRefExoticComponent<{
+        asChild?: boolean;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "className"> & import('react').RefAttributes<HTMLButtonElement>>;
     Portal: {
         ({ container, forceMount, children }: MenuPortalProps): ReactElement | null;
         displayName: string;
     };
-    Content: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuContentProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Item: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuItemOwnProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Label: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveLabelProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Separator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveSeparatorProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    RadioGroup: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuRadioGroupOwnProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    RadioItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuRadioItemOwnProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    ItemIndicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveItemIndicatorProps> & {
-        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
-    }>;
+    Content: import('react').ForwardRefExoticComponent<{
+        forceMount?: boolean;
+        loop?: boolean;
+        onEscapeKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        onPointerDownOutside?: (event: PointerEvent) => void;
+        onInteractOutside?: (event: Event) => void;
+        className?: string;
+        children?: ReactNode;
+    } & FloatingProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<{
+        id?: string;
+        asChild?: boolean;
+        disabled?: boolean;
+        onSelect?: (event: Event) => void;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onSelect"> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Separator: import('react').ForwardRefExoticComponent<{
+        className?: string;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    RadioGroup: import('react').ForwardRefExoticComponent<{
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (value: string) => void;
+        closeOnSelect?: boolean;
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    RadioItem: import('react').ForwardRefExoticComponent<{
+        id?: string;
+        value: string;
+        asChild?: boolean;
+        disabled?: boolean;
+        onSelect?: (event: Event) => void;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onSelect"> & import('react').RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import('react').ForwardRefExoticComponent<{
+        forceMount?: boolean;
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 };

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

@@ -81,7 +81,7 @@ export type MenubarButtonProps = {
     asChild?: boolean;
     className?: string;
     children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'button'>, 'id' | 'children'>;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'id' | 'children' | 'onSelect'>;
 /**
  * A visual separator component that adapts based on context.
  *
@@ -286,7 +286,7 @@ export type MenubarItemProps = {
     asChild?: boolean;
     className?: string;
     children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'children'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'children' | 'onSelect'>;
 /**
  * A non-interactive label for grouping items within a menubar dropdown.
  *
@@ -385,7 +385,7 @@ export type MenubarRadioItemProps = {
     asChild?: boolean;
     className?: string;
     children: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'children'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'children' | 'onSelect'>;
 /**
  * Indicator component that conditionally renders when its parent radio item is checked.
  *
@@ -418,42 +418,103 @@ export declare const Menubar: {
         ({ defaultActive, onActiveChange, id, children }: MenubarRootProps): ReactElement;
         displayName: string;
     };
-    Nav: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarNavProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Content: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarContentProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Button: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarButtonProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
-    Separator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarSeparatorProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
+    Nav: import('react').ForwardRefExoticComponent<{
+        /** Accessible label for the menubar (required for screen readers) */
+        'aria-label': string;
+        /** Whether navigation should loop from last to first item */
+        loop?: boolean;
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Content: import('react').ForwardRefExoticComponent<{
+        /** Whether navigation should loop from last to first item */
+        loop?: boolean;
+        /** Keep content mounted in DOM even when menu is closed */
+        forceMount?: boolean;
+        /** Callback when Escape key is pressed */
+        onEscapeKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+        /** Callback when pointer clicks outside the menu */
+        onPointerDownOutside?: (event: PointerEvent) => void;
+        /** Callback when any outside interaction occurs */
+        onInteractOutside?: (event: Event) => void;
+        className?: string;
+        children?: ReactNode;
+    } & FloatingProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Button: import('react').ForwardRefExoticComponent<{
+        /** Unique ID for this button (auto-generated if not provided) */
+        id?: string;
+        /** Whether the button is disabled */
+        disabled?: boolean;
+        /** Callback when the button is selected (clicked or activated via keyboard) */
+        onSelect?: (event: Event) => void;
+        /** Render as a child element using Radix UI Slot */
+        asChild?: boolean;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "onSelect" | "id"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Separator: import('react').ForwardRefExoticComponent<{
+        className?: string;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     Menu: {
         ({ id: providedId, disabled, children }: MenubarMenuProps): ReactElement;
         displayName: string;
     };
-    Trigger: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarTriggerProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
+    Trigger: import('react').ForwardRefExoticComponent<{
+        /** Render as a child element using Radix UI Slot */
+        asChild?: boolean;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('react').RefAttributes<HTMLButtonElement>>;
     Portal: {
         ({ container, forceMount, children }: MenubarPortalProps): ReactElement | null;
         displayName: string;
     };
-    Item: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarItemProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Label: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveLabelProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    RadioGroup: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarRadioGroupProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    RadioItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarRadioItemProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    ItemIndicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenubarItemIndicatorProps> & {
-        ref?: import('preact').Ref<HTMLSpanElement> | undefined;
-    }>;
+    Item: import('react').ForwardRefExoticComponent<{
+        /** Unique ID for this item (auto-generated if not provided) */
+        id?: string;
+        /** Whether the item is disabled */
+        disabled?: boolean;
+        /** Callback when the item is selected (clicked or activated via keyboard) */
+        onSelect?: (event: Event) => void;
+        /** Render as a child element using Radix UI Slot */
+        asChild?: boolean;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onSelect" | "id"> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    RadioGroup: import('react').ForwardRefExoticComponent<{
+        /** Controlled selected value */
+        value?: string;
+        /** Default selected value (uncontrolled) */
+        defaultValue?: string;
+        /** Callback when selection changes */
+        onValueChange?: (value: string) => void;
+        /** Whether to close the menu after a radio item is selected */
+        closeOnSelect?: boolean;
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    RadioItem: import('react').ForwardRefExoticComponent<{
+        /** Unique ID for this item (auto-generated if not provided) */
+        id?: string;
+        /** Value identifier for this radio option (required) */
+        value: string;
+        /** Whether the item is disabled */
+        disabled?: boolean;
+        /** Callback when the item is selected (optional) */
+        onSelect?: (event: Event) => void;
+        /** Render as a child element using Radix UI Slot */
+        asChild?: boolean;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "onSelect" | "id"> & import('react').RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import('react').ForwardRefExoticComponent<{
+        /** Force mount the indicator even when unchecked (for animation purposes) */
+        forceMount?: boolean;
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 };

package/dist/types/components/radio-group/radio-group.d.ts

@@ -18,16 +18,34 @@ export type RadioGroupItemProps = {
     disabled?: boolean;
 } & Omit<ComponentPropsWithoutRef<'button'>, 'id' | 'disabled' | 'onClick'>;
 export type RadioGroupIndicatorProps = LucideProps;
-export declare const RadioGroup: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<RadioGroupRootProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}> & {
-    Root: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<RadioGroupRootProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Item: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<RadioGroupItemProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
-    Indicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<LucideProps> & {
-        ref?: import('preact').Ref<SVGSVGElement> | undefined;
-    }>;
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<{
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    loop?: boolean;
+    required?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    children?: ReactNode;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue"> & import('react').RefAttributes<HTMLDivElement>> & {
+    Root: import('react').ForwardRefExoticComponent<{
+        name: string;
+        value?: string;
+        defaultValue?: string;
+        onValueChange?: (value: string) => void;
+        orientation?: "horizontal" | "vertical";
+        loop?: boolean;
+        required?: boolean;
+        error?: boolean;
+        errorMessage?: string;
+        children?: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<{
+        value: string;
+        children: ReactNode;
+        disabled?: boolean;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "id" | "onClick" | "disabled"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Indicator: import('react').ForwardRefExoticComponent<Omit<LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
 };

package/dist/types/components/search-field/search-field.d.ts

@@ -16,7 +16,9 @@ export type SearchFieldIconProps = {
     className?: string;
 } & ComponentPropsWithoutRef<typeof Search>;
 export type SearchFieldInputProps = ComponentPropsWithoutRef<'input'>;
-export type SearchFieldClearProps = Omit<ComponentPropsWithoutRef<typeof IconButton>, 'icon' | 'onClick'>;
+export type SearchFieldClearProps = {
+    'aria-label'?: string;
+} & Omit<ComponentPropsWithoutRef<typeof IconButton>, 'icon' | 'onClick' | 'aria-label'>;
 export declare const SearchField: {
     ({ id, value, defaultValue, onChange, placeholder, clearLabel, disabled, readOnly, children, className, ...props }: SearchFieldRootProps): ReactElement;
     displayName: string;
@@ -29,11 +31,9 @@ export declare const SearchField: {
         ({ className, ...props }: SearchFieldIconProps): ReactElement;
         displayName: string;
     };
-    Input: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<SearchFieldInputProps> & {
-        ref?: import('preact').Ref<HTMLInputElement> | undefined;
-    }>;
+    Input: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
     Clear: {
-        ({ className, ...props }: SearchFieldClearProps): ReactElement | null;
+        ({ "aria-label": ariaLabel, className, ...props }: SearchFieldClearProps): ReactElement | null;
         displayName: string;
     };
 };

package/dist/types/components/selectable-list-item/selectable-list-item.d.ts

@@ -4,7 +4,7 @@ import { ReactElement, ReactNode } from 'react';
 export type SelectableListItemProps = {
     children?: ReactNode;
     readOnly?: boolean;
-} & Pick<ListItemDefaultContentProps, 'label' | 'description' | 'metadata' | 'icon'> & Pick<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> & Omit<ListItemProps, 'children'>;
+} & Pick<ListItemDefaultContentProps, 'label' | 'description' | 'metadata' | 'icon'> & Pick<CheckboxProps, 'checked' | 'defaultChecked' | 'onCheckedChange'> & Omit<ListItemProps, 'children' | 'defaultChecked'>;
 export declare const SelectableListItem: {
     ({ className, selected, children, label, description, metadata, icon, readOnly, checked, defaultChecked, onCheckedChange, ...props }: SelectableListItemProps): ReactElement;
     displayName: string;

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

@@ -94,40 +94,76 @@ export declare const Selector: {
         ({ 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;
-    }>;
+    Trigger: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Value: import('react').ForwardRefExoticComponent<{
+        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<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "children"> & import('react').RefAttributes<HTMLSpanElement>>;
+    Icon: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    Content: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+        /** Whether to render in a portal. Defaults to true. Set to false when used inside another portaled component (e.g., DatePicker/TimePicker inside Dialog). */
+        portal?: boolean;
+        onEscapeKeyDown?: (event: KeyboardEvent) => void;
+        onPointerDownOutside?: (event: PointerEvent) => void;
+        onInteractOutside?: (event: Event) => void;
+    } & FloatingProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Viewport: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<{
+        value: string;
+        disabled?: boolean;
+        textValue?: string;
+        className?: string;
+        children: ReactNode;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+    ItemText: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    ItemIndicator: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    Group: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<{
+        className?: string;
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Separator: import('react').ForwardRefExoticComponent<{
+        className?: string;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    HiddenSelect: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;
 };

package/dist/types/components/stepper/index.d.ts

@@ -1,2 +1,2 @@
 export type { StepperDotsProps, StepperNextProps, StepperPanelProps, StepperPreviousProps, StepperRootProps, } from './stepper';
-export { Stepper } from './stepper';
+export { getStepperPanelId, Stepper } from './stepper';

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

@@ -1,4 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+/** DOM id of a `Stepper.Panel`, so a wrapper can find the active panel through its context. */
+export declare const getStepperPanelId: (baseId: string, itemId: string) => string;
 export type StepperRootProps = {
     /** Render without wrapper div (for composition with other components) */
     asFragment?: boolean;
@@ -15,6 +17,16 @@ export type StepperRootProps = {
     /** Callback when value changes */
     onValueChange?: (value: string) => void;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'>;
+/**
+ * Focus after `Stepper.Next` / `Stepper.Previous` lands on the first `[data-autofocus]` element in
+ * the new panel — the consumer marks the target, the stepper owns the timing. Without a marker,
+ * focus stays on the button, except when that button is about to disable (first / last step):
+ * there the first focusable element in the panel takes it, so focus is not lost.
+ *
+ * Not triggered by `Stepper.Dots` (focus stays on the dot so arrow keys keep working) nor by a
+ * controlled `value` change made outside Next / Previous. The marker is read once, right after
+ * navigation: a step whose fields render after an async load focuses from its own load effect.
+ */
 export type StepperPanelProps = {
     /** Value that identifies this panel */
     value: string;
@@ -37,22 +49,58 @@ export type StepperNextProps = {
     asChild?: boolean;
     children: ReactNode;
 } & ComponentPropsWithoutRef<'button'>;
-export declare const Stepper: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperRootProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}> & {
-    Root: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperRootProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Panel: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperPanelProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Dots: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperDotsProps> & {
-        ref?: import('preact').Ref<HTMLDivElement> | undefined;
-    }>;
-    Previous: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperPreviousProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
-    Next: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<StepperNextProps> & {
-        ref?: import('preact').Ref<HTMLButtonElement> | undefined;
-    }>;
+export declare const Stepper: import('react').ForwardRefExoticComponent<{
+    /** Render without wrapper div (for composition with other components) */
+    asFragment?: boolean;
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** The maximum number of dots to show */
+    maxVisible?: number;
+    /** If the dots on edges are smaller than the other dots */
+    smallOnEdges?: boolean;
+    /** Content */
+    children?: ReactNode;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue"> & import('react').RefAttributes<HTMLDivElement>> & {
+    Root: import('react').ForwardRefExoticComponent<{
+        /** Render without wrapper div (for composition with other components) */
+        asFragment?: boolean;
+        /** Controlled value */
+        value?: string;
+        /** Default value for uncontrolled mode */
+        defaultValue?: string;
+        /** The maximum number of dots to show */
+        maxVisible?: number;
+        /** If the dots on edges are smaller than the other dots */
+        smallOnEdges?: boolean;
+        /** Content */
+        children?: ReactNode;
+        /** Callback when value changes */
+        onValueChange?: (value: string) => void;
+    } & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue"> & import('react').RefAttributes<HTMLDivElement>>;
+    Panel: import('react').ForwardRefExoticComponent<{
+        /** Value that identifies this panel */
+        value: string;
+        /** Whether the panel is locked. If locked, navigation via dots or buttons will not be possible. */
+        locked?: boolean;
+        /** Content */
+        children?: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Dots: import('react').ForwardRefExoticComponent<{
+        /** Disable all dots navigation */
+        disabled?: boolean;
+        /** Custom render wrapper for each dot. Receives the dot element and the step ID. */
+        renderDot?: (dot: ReactElement, step: string) => ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Previous: import('react').ForwardRefExoticComponent<{
+        asChild?: boolean;
+        children: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Next: import('react').ForwardRefExoticComponent<{
+        asChild?: boolean;
+        children: ReactNode;
+    } & Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 };