@skdx/react 0.26.0

package/dist/menubar/MenubarSub.d.cts

@@ -0,0 +1,40 @@
+import { type MenuSubProps } from '../utils/menuSub.cjs';
+/**
+ * Root of a nested submenu inside `MenubarContent`: owns the submenu's own
+ * open state (independent of which `MenubarMenu` the menubar has open) and
+ * provides the popper anchor context its `MenubarSubTrigger` /
+ * `MenubarSubContent` position against. Renders no DOM element itself.
+ *
+ * @example
+ * ```tsx
+ * <MenubarContent>
+ *   <MenubarItem onSelect={() => save()}>Save</MenubarItem>
+ *   <MenubarSub>
+ *     <MenubarSubTrigger>Export as</MenubarSubTrigger>
+ *     <MenubarSubContent>
+ *       <MenubarItem onSelect={() => exportAs('pdf')}>PDF</MenubarItem>
+ *       <MenubarItem onSelect={() => exportAs('png')}>PNG</MenubarItem>
+ *     </MenubarSubContent>
+ *   </MenubarSub>
+ * </MenubarContent>
+ * ```
+ */
+export declare function MenubarSub(props: Omit<MenuSubProps, 'family'>): import("react").JSX.Element;
+export declare namespace MenubarSub {
+    var displayName: string;
+}
+/**
+ * The parent-menu item that opens a submenu: `role="menuitem"` with
+ * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and `data-state`.
+ * Opens on click, Enter, Space or ArrowRight — moving focus to the submenu's
+ * first item — and on hover, which leaves focus where it is.
+ */
+export declare const MenubarSubTrigger: import("react").ForwardRefExoticComponent<Omit<import("../utils/menuSub.cjs").MenuSubTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The submenu's floating panel: `role="menu"`, positioned against
+ * `MenubarSubTrigger` (`side="end"`, `align="start"` by default) via the
+ * same popper layer as `MenubarContent`. Owns its own vertical roving focus
+ * and typeahead; ArrowLeft and Escape close it and refocus the trigger,
+ * leaving the parent menu open.
+ */
+export declare const MenubarSubContent: import("react").ForwardRefExoticComponent<Omit<import("../utils/menuSub.cjs").MenuSubContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/menubar/MenubarSub.d.ts

@@ -0,0 +1,40 @@
+import { type MenuSubProps } from '../utils/menuSub.js';
+/**
+ * Root of a nested submenu inside `MenubarContent`: owns the submenu's own
+ * open state (independent of which `MenubarMenu` the menubar has open) and
+ * provides the popper anchor context its `MenubarSubTrigger` /
+ * `MenubarSubContent` position against. Renders no DOM element itself.
+ *
+ * @example
+ * ```tsx
+ * <MenubarContent>
+ *   <MenubarItem onSelect={() => save()}>Save</MenubarItem>
+ *   <MenubarSub>
+ *     <MenubarSubTrigger>Export as</MenubarSubTrigger>
+ *     <MenubarSubContent>
+ *       <MenubarItem onSelect={() => exportAs('pdf')}>PDF</MenubarItem>
+ *       <MenubarItem onSelect={() => exportAs('png')}>PNG</MenubarItem>
+ *     </MenubarSubContent>
+ *   </MenubarSub>
+ * </MenubarContent>
+ * ```
+ */
+export declare function MenubarSub(props: Omit<MenuSubProps, 'family'>): import("react").JSX.Element;
+export declare namespace MenubarSub {
+    var displayName: string;
+}
+/**
+ * The parent-menu item that opens a submenu: `role="menuitem"` with
+ * `aria-haspopup="menu"`, `aria-expanded`, `aria-controls` and `data-state`.
+ * Opens on click, Enter, Space or ArrowRight — moving focus to the submenu's
+ * first item — and on hover, which leaves focus where it is.
+ */
+export declare const MenubarSubTrigger: import("react").ForwardRefExoticComponent<Omit<import("../utils/menuSub.js").MenuSubTriggerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * The submenu's floating panel: `role="menu"`, positioned against
+ * `MenubarSubTrigger` (`side="end"`, `align="start"` by default) via the
+ * same popper layer as `MenubarContent`. Owns its own vertical roving focus
+ * and typeahead; ArrowLeft and Escape close it and refocus the trigger,
+ * leaving the parent menu open.
+ */
+export declare const MenubarSubContent: import("react").ForwardRefExoticComponent<Omit<import("../utils/menuSub.js").MenuSubContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/menubar/MenubarTrigger.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { MenubarTriggerProps } from './types.cjs';
+/**
+ * The menubar item that opens its {@link MenubarMenu}'s content: renders a
+ * `<button type="button" role="menuitem">` marked `data-skdx-menubar-trigger`
+ * (its own id, for roving focus — the menubar keeps exactly one trigger at
+ * `tabIndex` 0), with `aria-haspopup="menu"`, `aria-expanded`,
+ * `aria-controls`, and `data-state` of `"open"` or `"closed"`. Click toggles
+ * its menu; hover or focus switches to it while a sibling menu is already
+ * open (matching native app menu bars); Arrow Down/Up, Enter, or Space open it.
+ *
+ * @example
+ * ```tsx
+ * <MenubarTrigger>File</MenubarTrigger>
+ * ```
+ */
+export declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/menubar/MenubarTrigger.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { MenubarTriggerProps } from './types.js';
+/**
+ * The menubar item that opens its {@link MenubarMenu}'s content: renders a
+ * `<button type="button" role="menuitem">` marked `data-skdx-menubar-trigger`
+ * (its own id, for roving focus — the menubar keeps exactly one trigger at
+ * `tabIndex` 0), with `aria-haspopup="menu"`, `aria-expanded`,
+ * `aria-controls`, and `data-state` of `"open"` or `"closed"`. Click toggles
+ * its menu; hover or focus switches to it while a sibling menu is already
+ * open (matching native app menu bars); Arrow Down/Up, Enter, or Space open it.
+ *
+ * @example
+ * ```tsx
+ * <MenubarTrigger>File</MenubarTrigger>
+ * ```
+ */
+export declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/menubar/index.d.cts

@@ -0,0 +1,15 @@
+export * from './Menubar.cjs';
+export { MenubarMenu } from './MenubarMenu.cjs';
+export { MenubarTrigger } from './MenubarTrigger.cjs';
+export { MenubarPortal } from './MenubarPortal.cjs';
+export { MenubarContent } from './MenubarContent.cjs';
+export { MenubarItem } from './MenubarItem.cjs';
+export { MenubarCheckboxItem } from './MenubarCheckboxItem.cjs';
+export { MenubarRadioGroup } from './MenubarRadioGroup.cjs';
+export { MenubarRadioItem } from './MenubarRadioItem.cjs';
+export { MenubarItemIndicator } from './MenubarItemIndicator.cjs';
+export { MenubarGroup } from './MenubarGroup.cjs';
+export { MenubarLabel } from './MenubarLabel.cjs';
+export { MenubarSeparator } from './MenubarSeparator.cjs';
+export { MenubarSub, MenubarSubContent, MenubarSubTrigger } from './MenubarSub.cjs';
+export type { MenubarProps, MenubarMenuProps, MenubarTriggerProps, MenubarPortalProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarItemIndicatorProps, MenubarGroupProps, MenubarLabelProps, MenubarSeparatorProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, } from './types.cjs';

package/dist/menubar/index.d.ts

@@ -0,0 +1,15 @@
+export * from './Menubar.js';
+export { MenubarMenu } from './MenubarMenu.js';
+export { MenubarTrigger } from './MenubarTrigger.js';
+export { MenubarPortal } from './MenubarPortal.js';
+export { MenubarContent } from './MenubarContent.js';
+export { MenubarItem } from './MenubarItem.js';
+export { MenubarCheckboxItem } from './MenubarCheckboxItem.js';
+export { MenubarRadioGroup } from './MenubarRadioGroup.js';
+export { MenubarRadioItem } from './MenubarRadioItem.js';
+export { MenubarItemIndicator } from './MenubarItemIndicator.js';
+export { MenubarGroup } from './MenubarGroup.js';
+export { MenubarLabel } from './MenubarLabel.js';
+export { MenubarSeparator } from './MenubarSeparator.js';
+export { MenubarSub, MenubarSubContent, MenubarSubTrigger } from './MenubarSub.js';
+export type { MenubarProps, MenubarMenuProps, MenubarTriggerProps, MenubarPortalProps, MenubarContentProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarItemIndicatorProps, MenubarGroupProps, MenubarLabelProps, MenubarSeparatorProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, } from './types.js';

package/dist/menubar/types.d.cts

@@ -0,0 +1,188 @@
+import type * as React from 'react';
+import type { MenuSubContentProps, MenuSubProps, MenuSubTriggerProps } from '../utils/menuSub.cjs';
+import type { PopperContentProps } from '../utils/popper.cjs';
+import type { PortalProps } from '../utils/portal.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.cjs';
+/** @internal Shared state distributed from {@link Menubar} to its parts via context. Not part of the public API. */
+export interface MenubarContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Id of the trigger holding the menubar's single tab stop; every other trigger is `tabIndex` -1. */
+    currentTabStopId: string | null;
+    setCurrentTabStopId: (id: string) => void;
+}
+/** Props for the {@link Menubar} root. */
+export interface MenubarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Value of the currently open menu, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open menu internally.
+     */
+    value?: string;
+    /**
+     * Initially open menu's value, for uncontrolled usage.
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the open menu changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+}
+/** @internal Per-menu state distributed from {@link MenubarMenu} to its descendants via context. Not part of the public API. */
+export interface MenubarMenuContextValue {
+    menuValue: string;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    /** True once this menu was opened by an explicit click (vs. a hover/focus switch), so a repeat click knows to close it. */
+    openedExplicitlyRef: React.RefObject<boolean>;
+    onOpen: () => void;
+    onClose: () => void;
+}
+/** Props for a single {@link MenubarMenu}. */
+export interface MenubarMenuProps {
+    /** Unique identifier matched against the root's open `value`. */
+    value: string;
+    /**
+     * The menu's trigger and content, typically a `MenubarTrigger` paired with
+     * a `MenubarPortal`/`MenubarContent`.
+     * @default undefined — renders nothing.
+     */
+    children?: React.ReactNode;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `MenubarContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the panel declares no animation. Use it for work that must not race
+     * the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/** Props for {@link MenubarTrigger}, the menubar item that opens its menu's content. */
+export interface MenubarTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link MenubarPortal}, which teleports a menu's content elsewhere in the DOM while open. */
+export interface MenubarPortalProps extends PortalProps {
+    /**
+     * Keep the portal mounted even while its menu is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link MenubarContent}, the popover panel of menu items. */
+export interface MenubarContentProps extends PopperContentProps {
+    /**
+     * Keep this panel mounted even while its menu is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * panel present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Called when Escape is pressed while the content is open. Call `event.preventDefault()` to stop the default close-and-refocus behavior.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Called on pointerdown outside the content. Call `event.preventDefault()` to stop the default close behavior.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Called when focus moves to an element outside the content and outside the menu bar itself. Call `event.preventDefault()` to stop the default close behavior. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Called for either kind of outside interaction — pointerdown or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here stops the close whichever way it was triggered.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for a single {@link MenubarItem} entry. */
+export interface MenubarItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
+    /**
+     * Disables selection and excludes the item from arrow-key/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Called when the item is activated. `event.preventDefault()` keeps the menu open.
+     * @default undefined — no-op if omitted, menu closes on select.
+     */
+    onSelect?: (event: Event) => void;
+}
+/** Props for {@link MenubarCheckboxItem}, a togglable menu item. */
+export interface MenubarCheckboxItemProps extends MenubarItemProps {
+    /**
+     * Whether the item currently renders as checked.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Fires with the next checked state when the item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** @internal Shared state distributed from {@link MenubarRadioGroup} to its `MenubarRadioItem`s via context. Not part of the public API. */
+export interface MenuRadioGroupContextValue {
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+/** Props for the {@link MenubarRadioGroup} wrapping a set of `MenubarRadioItem`s. */
+export interface MenubarRadioGroupProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Value of the currently checked radio item.
+     * @default undefined — no item checked.
+     */
+    value?: string;
+    /**
+     * Fires with the new value when a `MenubarRadioItem` in this group is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+}
+/** Props for a single {@link MenubarRadioItem} within a `MenubarRadioGroup`. */
+export interface MenubarRadioItemProps extends MenubarItemProps {
+    /** Unique identifier matched against the group's checked `value`. */
+    value: string;
+}
+/** Props for {@link MenubarItemIndicator}, shown inside a checked `MenubarCheckboxItem` or `MenubarRadioItem`. */
+export interface MenubarItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep this indicator mounted even while unchecked, instead of unmounting
+     * it.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link MenubarGroup}, a grouping wrapper for related `MenubarItem`s. */
+export interface MenubarGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarLabel}, a non-interactive heading within a menu. */
+export interface MenubarLabelProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarSeparator}, a visual divider between menu items. */
+export interface MenubarSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarSub}, the root of a nested submenu. */
+export interface MenubarSubProps extends MenuSubProps {
+}
+/** Props for {@link MenubarSubTrigger}, the parent-menu item that opens a submenu and anchors it. */
+export interface MenubarSubTriggerProps extends MenuSubTriggerProps {
+}
+/** Props for {@link MenubarSubContent}, the submenu's floating panel. */
+export interface MenubarSubContentProps extends MenuSubContentProps {
+}

package/dist/menubar/types.d.ts

@@ -0,0 +1,188 @@
+import type * as React from 'react';
+import type { MenuSubContentProps, MenuSubProps, MenuSubTriggerProps } from '../utils/menuSub.js';
+import type { PopperContentProps } from '../utils/popper.js';
+import type { PortalProps } from '../utils/portal.js';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { FocusOutsideEvent, InteractOutsideEvent } from '../utils/useDismiss.js';
+/** @internal Shared state distributed from {@link Menubar} to its parts via context. Not part of the public API. */
+export interface MenubarContextValue {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Id of the trigger holding the menubar's single tab stop; every other trigger is `tabIndex` -1. */
+    currentTabStopId: string | null;
+    setCurrentTabStopId: (id: string) => void;
+}
+/** Props for the {@link Menubar} root. */
+export interface MenubarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Value of the currently open menu, for controlled usage. Pair with `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own open menu internally.
+     */
+    value?: string;
+    /**
+     * Initially open menu's value, for uncontrolled usage.
+     * @default ''
+     */
+    defaultValue?: string;
+    /**
+     * Fires with the new value whenever the open menu changes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+}
+/** @internal Per-menu state distributed from {@link MenubarMenu} to its descendants via context. Not part of the public API. */
+export interface MenubarMenuContextValue {
+    menuValue: string;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    /** True once this menu was opened by an explicit click (vs. a hover/focus switch), so a repeat click knows to close it. */
+    openedExplicitlyRef: React.RefObject<boolean>;
+    onOpen: () => void;
+    onClose: () => void;
+}
+/** Props for a single {@link MenubarMenu}. */
+export interface MenubarMenuProps {
+    /** Unique identifier matched against the root's open `value`. */
+    value: string;
+    /**
+     * The menu's trigger and content, typically a `MenubarTrigger` paired with
+     * a `MenubarPortal`/`MenubarContent`.
+     * @default undefined — renders nothing.
+     */
+    children?: React.ReactNode;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `MenubarContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the panel declares no animation. Use it for work that must not race
+     * the transition; use `onOpenChange` for work that must not wait for it.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+}
+/** Props for {@link MenubarTrigger}, the menubar item that opens its menu's content. */
+export interface MenubarTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link MenubarPortal}, which teleports a menu's content elsewhere in the DOM while open. */
+export interface MenubarPortalProps extends PortalProps {
+    /**
+     * Keep the portal mounted even while its menu is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link MenubarContent}, the popover panel of menu items. */
+export interface MenubarContentProps extends PopperContentProps {
+    /**
+     * Keep this panel mounted even while its menu is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * panel present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Called when Escape is pressed while the content is open. Call `event.preventDefault()` to stop the default close-and-refocus behavior.
+     * @default undefined — no-op if omitted.
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Called on pointerdown outside the content. Call `event.preventDefault()` to stop the default close behavior.
+     * @default undefined — no-op if omitted.
+     */
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    /**
+     * Called when focus moves to an element outside the content and outside the menu bar itself. Call `event.preventDefault()` to stop the default close behavior. Receives a cancelable stand-in carrying the original `focusin` as its `detail`, since `focusin` itself cannot be canceled.
+     * @default undefined — no-op if omitted.
+     */
+    onFocusOutside?: (event: FocusOutsideEvent) => void;
+    /**
+     * Called for either kind of outside interaction — pointerdown or focus — immediately before the specific handler above and with the same event, so one `event.preventDefault()` here stops the close whichever way it was triggered.
+     * @default undefined — no-op if omitted.
+     */
+    onInteractOutside?: (event: InteractOutsideEvent) => void;
+}
+/** Props for a single {@link MenubarItem} entry. */
+export interface MenubarItemProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
+    /**
+     * Disables selection and excludes the item from arrow-key/typeahead navigation.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Called when the item is activated. `event.preventDefault()` keeps the menu open.
+     * @default undefined — no-op if omitted, menu closes on select.
+     */
+    onSelect?: (event: Event) => void;
+}
+/** Props for {@link MenubarCheckboxItem}, a togglable menu item. */
+export interface MenubarCheckboxItemProps extends MenubarItemProps {
+    /**
+     * Whether the item currently renders as checked.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Fires with the next checked state when the item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/** @internal Shared state distributed from {@link MenubarRadioGroup} to its `MenubarRadioItem`s via context. Not part of the public API. */
+export interface MenuRadioGroupContextValue {
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+/** Props for the {@link MenubarRadioGroup} wrapping a set of `MenubarRadioItem`s. */
+export interface MenubarRadioGroupProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Value of the currently checked radio item.
+     * @default undefined — no item checked.
+     */
+    value?: string;
+    /**
+     * Fires with the new value when a `MenubarRadioItem` in this group is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+}
+/** Props for a single {@link MenubarRadioItem} within a `MenubarRadioGroup`. */
+export interface MenubarRadioItemProps extends MenubarItemProps {
+    /** Unique identifier matched against the group's checked `value`. */
+    value: string;
+}
+/** Props for {@link MenubarItemIndicator}, shown inside a checked `MenubarCheckboxItem` or `MenubarRadioItem`. */
+export interface MenubarItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Keep this indicator mounted even while unchecked, instead of unmounting
+     * it.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/** Props for {@link MenubarGroup}, a grouping wrapper for related `MenubarItem`s. */
+export interface MenubarGroupProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarLabel}, a non-interactive heading within a menu. */
+export interface MenubarLabelProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarSeparator}, a visual divider between menu items. */
+export interface MenubarSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link MenubarSub}, the root of a nested submenu. */
+export interface MenubarSubProps extends MenuSubProps {
+}
+/** Props for {@link MenubarSubTrigger}, the parent-menu item that opens a submenu and anchors it. */
+export interface MenubarSubTriggerProps extends MenuSubTriggerProps {
+}
+/** Props for {@link MenubarSubContent}, the submenu's floating panel. */
+export interface MenubarSubContentProps extends MenuSubContentProps {
+}

package/dist/meter/Meter.cjs

@@ -0,0 +1 @@
+"use strict";var L=Object.create;var d=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(t,e)=>{for(var r in e)d(t,r,{get:e[r],enumerable:!0})},b=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of w(e))!E.call(t,a)&&a!==r&&d(t,a,{get:()=>e[a],enumerable:!(o=$(e,a))||o.enumerable});return t};var P=(t,e,r)=>(r=t!=null?L(D(t)):{},b(e||!t||!t.__esModule?d(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>b(d({},"__esModule",{value:!0}),t);var G={};H(G,{Meter:()=>S,MeterIndicator:()=>l,MeterProvider:()=>y,getMeterPercent:()=>M,getMeterRange:()=>C,useMeterContext:()=>f});module.exports=T(G);var g=P(require("react"),1),v=require("../utils/createContext.cjs"),R=require("../utils/part.cjs"),h=require("../utils/primitive.cjs"),c=require("react/jsx-runtime"),[y,f]=(0,v.createSafeContext)("Meter");function W(t,e,r){return`${Math.round(M(t,e,r))}%`}function M(t,e,r){return r===e?0:(t-e)/(r-e)*100}function C(t,e,r,o,a,i){if(o==null&&a==null&&i==null)return;let n=Math.min(Math.max(o??e,e),r),m=Math.min(Math.max(a??r,n),r),p=Math.min(Math.max(i??(e+r)/2,e),r);return p<n?t<=n?"optimum":t<=m?"suboptimal":"poor":p>m?t>=m?"optimum":t>=n?"suboptimal":"poor":t>=n&&t<=m?"optimum":"suboptimal"}var S=g.forwardRef(({value:t=0,min:e=0,max:r=100,low:o,high:a,optimum:i,getValueLabel:n=W,...m},p)=>{let u=Math.max(r,e),s=Math.min(Math.max(t,e),u),x=C(s,e,u,o,a,i);return(0,c.jsx)(y,{value:s,min:e,max:u,range:x,children:(0,c.jsx)(h.Primitive.div,{role:"meter","aria-valuemin":e,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":n(s,e,u),"data-value":s,"data-min":e,"data-max":u,"data-range":x,...m,...(0,R.skdxPart)("meter","root",m.className),ref:p})})});S.displayName="Meter";var I=P(require("react"),1),V=require("../utils/part.cjs"),k=require("../utils/primitive.cjs");var N=require("react/jsx-runtime"),l=I.forwardRef((t,e)=>{let{value:r,min:o,max:a,range:i}=f("MeterIndicator");return(0,N.jsx)(k.Primitive.div,{"data-value":r,"data-min":o,"data-max":a,"data-range":i,...t,...(0,V.skdxPart)("meter","indicator",t.className),ref:e,style:{"--skdx-meter":`${M(r,o,a)}%`,...t.style}})});l.displayName="MeterIndicator";0&&(module.exports={Meter,MeterIndicator,MeterProvider,getMeterPercent,getMeterRange,useMeterContext});

package/dist/meter/Meter.d.cts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { MeterContextValue, MeterProps, MeterRange } from './types.cjs';
+export declare const MeterProvider: {
+    (props: MeterContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMeterContext: (consumerName: string) => MeterContextValue;
+/**
+ * @internal Position of `value` within `[min, max]` as a percentage. `0` when
+ * the range is empty (`max === min`), so a degenerate range yields `0%` rather
+ * than `NaN%`.
+ */
+export declare function getMeterPercent(value: number, min: number, max: number): number;
+/**
+ * @internal The band `value` falls in, following the HTML `<meter>` element's
+ * region rules. Returns `undefined` when no threshold was supplied — a meter
+ * with no thresholds has no good or bad end, so it emits no `data-range` at
+ * all rather than pretending everything is optimal.
+ */
+export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;
+/**
+ * Root of a meter: a *static scalar within a known range* — disk usage, a
+ * score, a fuel gauge. Clamps `value` into `[min, max]`, renders
+ * `role="meter"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/
+ * `aria-valuetext`, and exposes `data-value`, `data-min`, `data-max` and the
+ * derived `data-range` (`"optimum"` | `"suboptimal"` | `"poor"`, absent
+ * without thresholds) for styling. Hands the range down to `MeterIndicator`
+ * via context.
+ *
+ * Not `Progress`: `role="progressbar"` is for a task advancing toward
+ * completion and supports an indeterminate state; a meter measures something
+ * that simply *is*, so `value` is a plain number with no `null`.
+ *
+ * A meter announces a bare number unless you name it — always pass
+ * `aria-label` or `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10}>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const Meter: React.ForwardRefExoticComponent<Omit<MeterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/meter/Meter.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import type { MeterContextValue, MeterProps, MeterRange } from './types.js';
+export declare const MeterProvider: {
+    (props: MeterContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useMeterContext: (consumerName: string) => MeterContextValue;
+/**
+ * @internal Position of `value` within `[min, max]` as a percentage. `0` when
+ * the range is empty (`max === min`), so a degenerate range yields `0%` rather
+ * than `NaN%`.
+ */
+export declare function getMeterPercent(value: number, min: number, max: number): number;
+/**
+ * @internal The band `value` falls in, following the HTML `<meter>` element's
+ * region rules. Returns `undefined` when no threshold was supplied — a meter
+ * with no thresholds has no good or bad end, so it emits no `data-range` at
+ * all rather than pretending everything is optimal.
+ */
+export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;
+/**
+ * Root of a meter: a *static scalar within a known range* — disk usage, a
+ * score, a fuel gauge. Clamps `value` into `[min, max]`, renders
+ * `role="meter"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`/
+ * `aria-valuetext`, and exposes `data-value`, `data-min`, `data-max` and the
+ * derived `data-range` (`"optimum"` | `"suboptimal"` | `"poor"`, absent
+ * without thresholds) for styling. Hands the range down to `MeterIndicator`
+ * via context.
+ *
+ * Not `Progress`: `role="progressbar"` is for a task advancing toward
+ * completion and supports an indeterminate state; a meter measures something
+ * that simply *is*, so `value` is a plain number with no `null`.
+ *
+ * A meter announces a bare number unless you name it — always pass
+ * `aria-label` or `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10}>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const Meter: React.ForwardRefExoticComponent<Omit<MeterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/meter/Meter.js

@@ -0,0 +1 @@
+import*as f from"react";import{createSafeContext as P}from"../utils/createContext.js";import{skdxPart as g}from"../utils/part.js";import{Primitive as v}from"../utils/primitive.js";import{jsx as c}from"react/jsx-runtime";var[R,l]=P("Meter");function h(t,e,r){return`${Math.round(d(t,e,r))}%`}function d(t,e,r){return r===e?0:(t-e)/(r-e)*100}function y(t,e,r,a,o,i){if(a==null&&o==null&&i==null)return;let n=Math.min(Math.max(a??e,e),r),m=Math.min(Math.max(o??r,n),r),p=Math.min(Math.max(i??(e+r)/2,e),r);return p<n?t<=n?"optimum":t<=m?"suboptimal":"poor":p>m?t>=m?"optimum":t>=n?"suboptimal":"poor":t>=n&&t<=m?"optimum":"suboptimal"}var C=f.forwardRef(({value:t=0,min:e=0,max:r=100,low:a,high:o,optimum:i,getValueLabel:n=h,...m},p)=>{let u=Math.max(r,e),s=Math.min(Math.max(t,e),u),M=y(s,e,u,a,o,i);return c(R,{value:s,min:e,max:u,range:M,children:c(v.div,{role:"meter","aria-valuemin":e,"aria-valuemax":u,"aria-valuenow":s,"aria-valuetext":n(s,e,u),"data-value":s,"data-min":e,"data-max":u,"data-range":M,...m,...g("meter","root",m.className),ref:p})})});C.displayName="Meter";import*as x from"react";import{skdxPart as S}from"../utils/part.js";import{Primitive as I}from"../utils/primitive.js";import{jsx as V}from"react/jsx-runtime";var b=x.forwardRef((t,e)=>{let{value:r,min:a,max:o,range:i}=l("MeterIndicator");return V(I.div,{"data-value":r,"data-min":a,"data-max":o,"data-range":i,...t,...S("meter","indicator",t.className),ref:e,style:{"--skdx-meter":`${d(r,a,o)}%`,...t.style}})});b.displayName="MeterIndicator";export{C as Meter,b as MeterIndicator,R as MeterProvider,d as getMeterPercent,y as getMeterRange,l as useMeterContext};

package/dist/meter/MeterIndicator.d.cts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { MeterIndicatorProps } from './types.cjs';
+/**
+ * The visual fill of a `Meter`. Mirrors the root's `data-value` / `data-min` /
+ * `data-max` / `data-range` and sets a `--skdx-meter` CSS custom property (a
+ * percentage) so width/transform can be driven purely from CSS. Must be used
+ * inside a `Meter`.
+ *
+ * @example
+ * ```tsx
+ * <Meter aria-label="Disk usage" value={82}>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const MeterIndicator: React.ForwardRefExoticComponent<Omit<MeterIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;