@skdx/react 0.26.0 → 0.28.0

package/dist/menubar/types.d.ts

@@ -4,31 +4,210 @@ 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';
+import type { AutoFocusEvent } from '../utils/useFocusTrap.js';
+/**
+ * One menu entry: a discriminated union where the plain action variant carries no `type` field,
+ * so `{ label: 'Cut', onSelect: cut }` needs no annotation. Narrow with `'type' in item`, never with a cast.
+ * Submenus recurse through this same type, so nesting is unrestricted.
+ */
+export type MenuItem = {
+    /** Text rendered inside the item, and fallback typeahead. */
+    label: string;
+    /**
+     * Called when this item is activated, before the recipe's own `onSelect`. Both fire.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: () => void;
+    /**
+     * Keyboard hint rendered as a `MenubarShortcut` at the item's trailing edge, `aria-hidden`.
+     * @default undefined — no shortcut.
+     */
+    shortcut?: string;
+    /**
+     * Marks item `aria-disabled` and blocks selection, staying in roving order and focusable for discoverability.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text typeahead matches this item by, reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    /** Renders a `MenubarSeparator`: a horizontal rule between item groups. */
+    type: 'separator';
+} | {
+    /** Renders a `MenubarCheckboxItem` (`role="menuitemcheckbox"`) with a `MenubarItemIndicator` shown while checked. */
+    type: 'checkbox';
+    /** Text rendered inside the checkbox item. */
+    label: string;
+    /**
+     * Checked state, externally controlled: reports state via `onCheckedChange`.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Fires with the new checked state when the item is selected.
+     * @default undefined — no-op if omitted.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Keyboard hint rendered as a `MenubarShortcut` at the item's trailing edge.
+     * @default undefined — no shortcut.
+     */
+    shortcut?: string;
+    /**
+     * Marks item `aria-disabled` and blocks selection, staying focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text typeahead matches this item by, reflected to `data-text-value`.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    /** Renders a `MenubarRadioGroup` of mutually-exclusive options. */
+    type: 'radio-group';
+    /**
+     * Selected radio option's value, externally controlled.
+     * @default undefined — no option selected.
+     */
+    value?: string;
+    /**
+     * Fires with the newly selected option's `value`.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (value: string) => void;
+    /** The radio options, one `MenubarRadioItem` each. */
+    items: {
+        /** Text rendered inside the radio item. */
+        label: string;
+        /** Compared against group `value` to decide checked state. */
+        value: string;
+        /**
+         * Marks option `aria-disabled` and blocks selection, staying focusable.
+         * @default false
+         */
+        disabled?: boolean;
+        /**
+         * Text typeahead matches this option by, reflected to `data-text-value`.
+         * @default undefined — the option's rendered text is used.
+         */
+        textValue?: string;
+    }[];
+} | {
+    /** Renders a nested submenu trio: `MenubarSubTrigger` and `MenubarSubContent`. */
+    type: 'submenu';
+    /** Text rendered inside the submenu trigger. */
+    label: string;
+    /** Submenu entries, recursing through the `MenuItem` union. */
+    items: MenuItem[];
+    /**
+     * Marks submenu trigger `aria-disabled` and blocks opening, staying focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Text typeahead matches the trigger by, reflected to `data-text-value`.
+     * @default undefined — the trigger's rendered text is used.
+     */
+    textValue?: string;
+} | {
+    /** Renders a `MenubarGroup` (`role="group"`) with optional `MenubarLabel` caption. */
+    type: 'group';
+    /**
+     * Group heading rendered as `MenubarLabel`, the group's accessible name.
+     * @default undefined — the group is unnamed.
+     */
+    label?: string;
+    /** Group entries, recursing through the `MenuItem` union. */
+    items: MenuItem[];
+};
+/**
+ * One menu on the bar: a trigger label and its panel's entries.
+ */
+export interface MenubarMenu {
+    /** Text rendered inside the menu's trigger. */
+    label: string;
+    /** The menu panel's entries. */
+    items: MenuItem[];
+    /**
+     * Identifier matched against the bar's open `menu` to open/report by name.
+     * @default undefined — the menu's index, as a string.
+     */
+    value?: string;
+    /**
+     * Marks trigger disabled and skips it in the bar's roving focus.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Which menu end focus lands on when opened: `'first'` (Enter/Space/ArrowDown)
+ * or `'last'` (ArrowUp), following WAI-ARIA menubar semantics.
+ */
+export type MenubarOpenIntent = 'first' | 'last';
+/** Axis the bar lays triggers on, reflected as `data-orientation`. */
+export type MenubarOrientation = 'horizontal' | 'vertical';
 /** @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;
+    menu: string;
+    onMenuChange: (menu: string) => void;
+    /** The bar's axis, read by Trigger to know which arrows open a menu and which rove along the bar. */
+    orientation: MenubarOrientation;
     /** 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'> {
+/**
+ * Props for the {@link Menubar} recipe. Standard attributes pass to the `<div role="menubar">`.
+ * For full manual composition use `MenubarRoot` from `@skdx/react/primitives/menubar`.
+ */
+export interface MenubarProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect' | 'children'> {
     /**
-     * Value of the currently open menu, for controlled usage. Pair with `onValueChange`.
-     * @default undefined — uncontrolled, tracks its own open menu internally.
+     * The bar's menus, one trigger and panel each.
+     * @default undefined — an empty bar.
      */
-    value?: string;
+    menus?: MenubarMenu[];
+    /**
+     * Fires with the activated entry (plain, checkbox, submenu item, or radio option)
+     * after that entry's own `onSelect`/`onCheckedChange`/`onValueChange`.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: (item: MenuItem) => void;
+    /**
+     * Renders an entry's content in place of its `label`; the item element's role, id, wiring
+     * and disabled state stay the library's. Not called for separators or groups.
+     * @default undefined — renders the entry's `label`.
+     */
+    renderItem?: (item: MenuItem) => React.ReactNode;
+    /**
+     * Currently open menu, for controlled usage; pair with `onMenuChange`.
+     * @default undefined — uncontrolled.
+     */
+    menu?: string;
     /**
      * Initially open menu's value, for uncontrolled usage.
      * @default ''
      */
-    defaultValue?: string;
+    defaultMenu?: string;
     /**
-     * Fires with the new value whenever the open menu changes, controlled or not.
+     * Fires with the newly open menu's value, controlled or uncontrolled.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onMenuChange?: (menu: string) => void;
+    /**
+     * Layout axis for the bar, reflected as `aria-orientation`; sets which arrows rove
+     * along the bar. An open menu is always vertical.
+     * @default 'horizontal'
+     */
+    orientation?: MenubarOrientation;
+    /**
+     * Whether roving focus across the bar wraps from the last trigger to the first.
+     * @default true
+     */
+    loop?: boolean;
 }
 /** @internal Per-menu state distributed from {@link MenubarMenu} to its descendants via context. Not part of the public API. */
 export interface MenubarMenuContextValue {
@@ -36,40 +215,66 @@ export interface MenubarMenuContextValue {
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
+    /**
+     * This menu's Trigger id, which Content points `aria-labelledby` at.
+     * Owned by `MenubarMenu` so `MenubarContent` can reach it.
+     */
+    triggerId: 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. */
+    /** True once opened by explicit click vs. hover/focus. */
     openedExplicitlyRef: React.RefObject<boolean>;
     onOpen: () => void;
     onClose: () => void;
+    /**
+     * Returns focus to this menu's Trigger, firing `close-auto-focus`
+     * from Escape, Tab, and item selection.
+     */
+    focusTrigger: () => void;
+    /**
+     * Content's `onCloseAutoFocus` handler, parked here so focusTrigger can reach it.
+     * A ref: Content declares the event but MenubarMenu owns the focus move.
+     */
+    closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
+    /**
+     * Which menu end the last open request asked for: `'first'` or `'last'`.
+     * Read once on open, never rendered.
+     */
+    openIntentRef: React.RefObject<MenubarOpenIntent>;
+    /**
+     * Bumped on every `onOpen()` call, including one that re-requests an
+     * already-open menu (e.g. `defaultMenu` pre-opened it, then its trigger is
+     * clicked). Content's auto-focus effect keys off this alongside `open` so a
+     * request that doesn't flip the boolean still moves focus into the panel.
+     */
+    openRequestId: number;
 }
 /** Props for a single {@link MenubarMenu}. */
 export interface MenubarMenuProps {
-    /** Unique identifier matched against the root's open `value`. */
+    /** Unique identifier matched against the bar's open `menu`. */
     value: string;
     /**
-     * The menu's trigger and content, typically a `MenubarTrigger` paired with
-     * a `MenubarPortal`/`MenubarContent`.
+     * The menu's trigger and content, typically `MenubarTrigger` with `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.
+     * Fires once the menu's open state change has finished on screen, after animation ends.
      * @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'> {
+    /**
+     * Disables trigger and excludes it from roving-focus navigation.
+     * @default false
+     */
+    disabled?: boolean;
 }
-/** Props for {@link MenubarPortal}, which teleports a menu's content elsewhere in the DOM while open. */
+/** Props for {@link MenubarPortal}, which teleports menu content elsewhere in the DOM. */
 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.
+     * Keep portal mounted while closed, for animation libraries needing outgoing content during exit.
      * @default false
      */
     forceMount?: boolean;
@@ -77,61 +282,72 @@ export interface MenubarPortalProps extends PortalProps {
 /** 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.
+     * Keep panel mounted while closed, for animation libraries needing outgoing content during exit.
      * @default false
      */
     forceMount?: boolean;
     /**
-     * Whether arrow-key navigation wraps from the last item back to the first
-     * (and vice versa).
+     * Whether arrow-key navigation wraps from last item to first.
      * @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.
+     * Fires on Escape press while open; call `preventDefault()` to keep open.
      * @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.
+     * Fires on pointerdown outside content; call `preventDefault()` to keep open.
      * @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.
+     * Fires when focus moves outside content and menubar; call `preventDefault()` to keep open.
+     * Receives a cancelable stand-in for `focusin` (not itself cancelable) carrying the original.
      * @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.
+     * Fires for either outside interaction (pointerdown or focus) before specific handlers,
+     * so one `preventDefault()` vetoes both paths.
      * @default undefined — no-op if omitted.
      */
     onInteractOutside?: (event: InteractOutsideEvent) => void;
+    /**
+     * Fires just before focus returns to trigger on Escape, Tab, or item selection;
+     * call `preventDefault()` to place focus yourself.
+     * @default undefined — no-op if omitted.
+     */
+    onCloseAutoFocus?: (event: AutoFocusEvent) => 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.
+     * Marks item `aria-disabled` and blocks selection, staying in roving order and focusable for discoverability.
      * @default false
      */
     disabled?: boolean;
     /**
-     * Called when the item is activated. `event.preventDefault()` keeps the menu open.
+     * Text typeahead matches this item by, reflected to `data-text-value`.
+     * Important for items rendering more than their label or icon-only items.
+     * @default undefined — the item's rendered text is used.
+     */
+    textValue?: string;
+    /**
+     * Called when the item is activated; call `preventDefault()` to keep menu open.
      * @default undefined — no-op if omitted, menu closes on select.
      */
     onSelect?: (event: Event) => void;
 }
-/** Props for {@link MenubarCheckboxItem}, a togglable menu item. */
+/** Props for {@link MenubarCheckboxItem}, a toggleable menu item. */
 export interface MenubarCheckboxItemProps extends MenubarItemProps {
     /**
-     * Whether the item currently renders as checked.
+     * Whether the item renders as checked.
      * @default false
      */
     checked?: boolean;
     /**
-     * Fires with the next checked state when the item is selected.
+     * Fires with the new checked state when the item is selected.
      * @default undefined — no-op if omitted.
      */
     onCheckedChange?: (checked: boolean) => void;
@@ -141,15 +357,15 @@ export interface MenuRadioGroupContextValue {
     value?: string;
     onValueChange?: (value: string) => void;
 }
-/** Props for the {@link MenubarRadioGroup} wrapping a set of `MenubarRadioItem`s. */
+/** Props for {@link MenubarRadioGroup}, wrapping mutually-exclusive radio items. */
 export interface MenubarRadioGroupProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Value of the currently checked radio item.
+     * Selected item's value; compared against each radio item's own `value`.
      * @default undefined — no item checked.
      */
     value?: string;
     /**
-     * Fires with the new value when a `MenubarRadioItem` in this group is selected.
+     * Fires with the new value when a radio item in this group is selected.
      * @default undefined — no-op if omitted.
      */
     onValueChange?: (value: string) => void;
@@ -159,11 +375,10 @@ 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`. */
+/** Props for {@link MenubarItemIndicator}, shown while checkbox or radio item is checked. */
 export interface MenubarItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Keep this indicator mounted even while unchecked, instead of unmounting
-     * it.
+     * Keep indicator mounted while unchecked, for animation libraries needing outgoing content.
      * @default false
      */
     forceMount?: boolean;
@@ -177,6 +392,9 @@ 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 MenubarShortcut}, the keyboard hint at an item's trailing edge. */
+export interface MenubarShortcutProps extends PrimitivePropsWithRef<'span'> {
+}
 /** Props for {@link MenubarSub}, the root of a nested submenu. */
 export interface MenubarSubProps extends MenuSubProps {
 }

package/dist/meter/Meter.cjs

@@ -1 +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});
+"use strict";var Z=Object.create;var M=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var ee=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var te=(e,r)=>{for(var t in r)M(e,t,{get:r[t],enumerable:!0})},V=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of j(r))!re.call(e,a)&&a!==t&&M(e,a,{get:()=>r[a],enumerable:!(n=_(r,a))||n.enumerable});return e};var b=(e,r,t)=>(t=e!=null?Z(ee(e)):{},V(r||!e||!e.__esModule?M(t,"default",{value:e,enumerable:!0}):t,e)),ae=e=>V(M({},"__esModule",{value:!0}),e);var me={};te(me,{Meter:()=>y,MeterIndicator:()=>c,MeterLabel:()=>v,MeterProvider:()=>G,MeterValue:()=>R,getMeterPercent:()=>x,getMeterRange:()=>J,useMeterContext:()=>d});module.exports=ae(me);var l=b(require("react"),1),q=require("../utils/createContext.cjs"),z=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var C=b(require("react"),1),N=require("../utils/part.cjs"),w=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),c=C.forwardRef((e,r)=>{let{value:t,min:n,max:a,range:o}=d("MeterIndicator");return(0,H.jsx)(w.Primitive.div,{"data-value":t,"data-min":n,"data-max":a,"data-range":o,...e,...(0,N.skdxPart)("meter","indicator",e.className),ref:r,style:{"--skdx-meter":`${x(t,n,a)}%`,...e.style}})});c.displayName="MeterIndicator";var P=b(require("react"),1),k=require("../utils/part.cjs"),E=require("../utils/primitive.cjs");var T=require("react/jsx-runtime"),v=P.forwardRef((e,r)=>{let{labelId:t,setHasLabel:n,range:a}=d("MeterLabel");return P.useEffect(()=>(n(!0),()=>n(!1)),[n]),(0,T.jsx)(E.Primitive.span,{id:t,"data-range":a,...e,...(0,k.skdxPart)("meter","label",e.className),ref:r})});v.displayName="MeterLabel";var $=b(require("react"),1),F=require("../utils/part.cjs"),A=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),R=$.forwardRef(({children:e,...r},t)=>{let{valueLabel:n,range:a}=d("MeterValue");return(0,D.jsx)(A.Primitive.span,{"aria-hidden":!0,"data-range":a,...r,...(0,F.skdxPart)("meter","value",r.className),ref:t,children:e??n})});R.displayName="MeterValue";var i=require("react/jsx-runtime"),W=({label:e,showValue:r})=>(0,i.jsxs)(i.Fragment,{children:[e?(0,i.jsx)(v,{children:e}):null,(0,i.jsx)(c,{}),r?(0,i.jsx)(R,{}):null]});var g=require("react/jsx-runtime"),[G,d]=(0,q.createSafeContext)("Meter");function ne(e,r,t,n,a,o){return n!==void 0?n(e,r,t):a!==void 0||o!==void 0?new Intl.NumberFormat(o,a).format(e):`${Math.round(x(e,r,t))}%`}function oe(e,r,t,n,a){return e!==void 0||r!==void 0||t!==void 0||n===0&&a===100}function x(e,r,t){return t===r?0:(e-r)/(t-r)*100}function J(e,r,t,n,a,o){if(n==null&&a==null&&o==null)return;let m=Math.min(Math.max(n??r,r),t),u=Math.min(Math.max(a??t,m),t),f=Math.min(Math.max(o??(r+t)/2,r),t);return f<m?e<=m?"optimum":e<=u?"suboptimal":"poor":f>u?e>=u?"optimum":e>=m?"suboptimal":"poor":e>=m&&e<=u?"optimum":"suboptimal"}var y=l.forwardRef(({value:e=0,min:r=0,max:t=100,low:n,high:a,optimum:o,getValueLabel:m,formatOptions:u,locale:f,label:K,showValue:O=!1,children:Q,...L},U)=>{let s=Math.max(t,r),p=Math.min(Math.max(e,r),s),h=J(p,r,s,n,a,o),I=`${l.useId()}-label`,[X,Y]=l.useState(!1),S=ne(p,r,s,m,u,f);return(0,g.jsx)(G,{value:p,min:r,max:s,range:h,labelId:I,setHasLabel:Y,valueLabel:S,children:(0,g.jsx)(B.Primitive.div,{role:"meter","aria-valuemin":r,"aria-valuemax":s,"aria-valuenow":p,"aria-valuetext":oe(m,u,f,r,s)?S:void 0,"aria-labelledby":X?I:void 0,"data-value":p,"data-min":r,"data-max":s,"data-range":h,...L,...(0,z.skdxPart)("meter","root",L.className),ref:U,children:Q??(0,g.jsx)(W,{label:K,showValue:O})})})});y.displayName="Meter";0&&(module.exports={Meter,MeterIndicator,MeterLabel,MeterProvider,MeterValue,getMeterPercent,getMeterRange,useMeterContext});

package/dist/meter/Meter.d.cts

@@ -6,17 +6,13 @@ export declare const MeterProvider: {
     }): 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%`.
- */
+/** @internal Position of `value` within `[min, max]` as a percentage; `0` (not `NaN%`) when the range is empty. */
 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.
+ * region rules. Returns `undefined` when no threshold was supplied, so a
+ * meter with no thresholds emits no `data-range` rather than pretending
+ * everything is optimal.
  */
 export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;
 /**
@@ -28,18 +24,19 @@ export declare function getMeterRange(value: number, min: number, max: number, l
  * 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`.
+ * Not `Progress`: `role="progressbar"` supports an indeterminate task; a
+ * meter measures something that simply *is*, so `value` is never `null`.
  *
  * A meter announces a bare number unless you name it — always pass
  * `aria-label` or `aria-labelledby`.
  *
+ * Given no `children` it draws the derived anatomy from `label`/`showValue`;
+ * given children, they render verbatim for manual composition — reach for
+ * `@skdx/react/primitives/meter` for the parts.
+ *
  * @example
  * ```tsx
- * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10}>
- *   <MeterIndicator />
- * </Meter>
+ * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10} showValue />
  * ```
  */
 export declare const Meter: React.ForwardRefExoticComponent<Omit<MeterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/meter/Meter.d.ts

@@ -6,17 +6,13 @@ export declare const MeterProvider: {
     }): 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%`.
- */
+/** @internal Position of `value` within `[min, max]` as a percentage; `0` (not `NaN%`) when the range is empty. */
 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.
+ * region rules. Returns `undefined` when no threshold was supplied, so a
+ * meter with no thresholds emits no `data-range` rather than pretending
+ * everything is optimal.
  */
 export declare function getMeterRange(value: number, min: number, max: number, low?: number, high?: number, optimum?: number): MeterRange | undefined;
 /**
@@ -28,18 +24,19 @@ export declare function getMeterRange(value: number, min: number, max: number, l
  * 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`.
+ * Not `Progress`: `role="progressbar"` supports an indeterminate task; a
+ * meter measures something that simply *is*, so `value` is never `null`.
  *
  * A meter announces a bare number unless you name it — always pass
  * `aria-label` or `aria-labelledby`.
  *
+ * Given no `children` it draws the derived anatomy from `label`/`showValue`;
+ * given children, they render verbatim for manual composition — reach for
+ * `@skdx/react/primitives/meter` for the parts.
+ *
  * @example
  * ```tsx
- * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10}>
- *   <MeterIndicator />
- * </Meter>
+ * <Meter aria-label="Disk usage" value={82} low={50} high={80} optimum={10} showValue />
  * ```
  */
 export declare const Meter: React.ForwardRefExoticComponent<Omit<MeterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/meter/Meter.js

@@ -1 +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};
+import*as d from"react";import{createSafeContext as K}from"../utils/createContext.js";import{skdxPart as O}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import*as h from"react";import{skdxPart as T}from"../utils/part.js";import{Primitive as $}from"../utils/primitive.js";import{jsx as F}from"react/jsx-runtime";var M=h.forwardRef((r,e)=>{let{value:t,min:a,max:n,range:o}=s("MeterIndicator");return F($.div,{"data-value":t,"data-min":a,"data-max":n,"data-range":o,...r,...T("meter","indicator",r.className),ref:e,style:{"--skdx-meter":`${b(t,a,n)}%`,...r.style}})});M.displayName="MeterIndicator";import*as p from"react";import{skdxPart as A}from"../utils/part.js";import{Primitive as D}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var c=p.forwardRef((r,e)=>{let{labelId:t,setHasLabel:a,range:n}=s("MeterLabel");return p.useEffect(()=>(a(!0),()=>a(!1)),[a]),W(D.span,{id:t,"data-range":n,...r,...A("meter","label",r.className),ref:e})});c.displayName="MeterLabel";import*as I from"react";import{skdxPart as q}from"../utils/part.js";import{Primitive as z}from"../utils/primitive.js";import{jsx as B}from"react/jsx-runtime";var x=I.forwardRef(({children:r,...e},t)=>{let{valueLabel:a,range:n}=s("MeterValue");return B(z.span,{"aria-hidden":!0,"data-range":n,...e,...q("meter","value",e.className),ref:t,children:r??a})});x.displayName="MeterValue";import{Fragment as G,jsx as P,jsxs as J}from"react/jsx-runtime";var S=({label:r,showValue:e})=>J(G,{children:[r?P(c,{children:r}):null,P(M,{}),e?P(x,{}):null]});import{jsx as v}from"react/jsx-runtime";var[U,s]=K("Meter");function X(r,e,t,a,n,o){return a!==void 0?a(r,e,t):n!==void 0||o!==void 0?new Intl.NumberFormat(o,n).format(r):`${Math.round(b(r,e,t))}%`}function Y(r,e,t,a,n){return r!==void 0||e!==void 0||t!==void 0||a===0&&n===100}function b(r,e,t){return t===e?0:(r-e)/(t-e)*100}function Z(r,e,t,a,n,o){if(a==null&&n==null&&o==null)return;let m=Math.min(Math.max(a??e,e),t),i=Math.min(Math.max(n??t,m),t),l=Math.min(Math.max(o??(e+t)/2,e),t);return l<m?r<=m?"optimum":r<=i?"suboptimal":"poor":l>i?r>=i?"optimum":r>=m?"suboptimal":"poor":r>=m&&r<=i?"optimum":"suboptimal"}var V=d.forwardRef(({value:r=0,min:e=0,max:t=100,low:a,high:n,optimum:o,getValueLabel:m,formatOptions:i,locale:l,label:C,showValue:N=!1,children:w,...R},H)=>{let u=Math.max(t,e),f=Math.min(Math.max(r,e),u),g=Z(f,e,u,a,n,o),y=`${d.useId()}-label`,[k,E]=d.useState(!1),L=X(f,e,u,m,i,l);return v(U,{value:f,min:e,max:u,range:g,labelId:y,setHasLabel:E,valueLabel:L,children:v(Q.div,{role:"meter","aria-valuemin":e,"aria-valuemax":u,"aria-valuenow":f,"aria-valuetext":Y(m,i,l,e,u)?L:void 0,"aria-labelledby":k?y:void 0,"data-value":f,"data-min":e,"data-max":u,"data-range":g,...R,...O("meter","root",R.className),ref:H,children:w??v(S,{label:C,showValue:N})})})});V.displayName="Meter";export{V as Meter,M as MeterIndicator,c as MeterLabel,U as MeterProvider,x as MeterValue,b as getMeterPercent,Z as getMeterRange,s as useMeterContext};

package/dist/meter/MeterAnatomy.d.cts

@@ -0,0 +1,10 @@
+/**
+ * The anatomy a {@link Meter} draws when given no children: a `MeterLabel` when
+ * given, an `MeterIndicator`, and a `MeterValue` when `showValue`.
+ *
+ * @internal
+ */
+export declare const MeterAnatomy: ({ label, showValue }: {
+    label?: string;
+    showValue: boolean;
+}) => import("react").JSX.Element;

package/dist/meter/MeterAnatomy.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The anatomy a {@link Meter} draws when given no children: a `MeterLabel` when
+ * given, an `MeterIndicator`, and a `MeterValue` when `showValue`.
+ *
+ * @internal
+ */
+export declare const MeterAnatomy: ({ label, showValue }: {
+    label?: string;
+    showValue: boolean;
+}) => import("react").JSX.Element;

package/dist/meter/MeterIndicator.d.cts

@@ -1,10 +1,7 @@
 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`.
+ * Visual fill of a meter. Mirrors root state and sets `--skdx-meter` CSS property.
  *
  * @example
  * ```tsx

package/dist/meter/MeterIndicator.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { MeterIndicatorProps } from './types.js';
 /**
- * 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`.
+ * Visual fill of a meter. Mirrors root state and sets `--skdx-meter` CSS property.
  *
  * @example
  * ```tsx

package/dist/meter/MeterLabel.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { MeterLabelProps } from './types.cjs';
+/**
+ * Visible name for a meter. Rendered as `<span>` so the root can wire `aria-labelledby`.
+ *
+ * @example
+ * ```tsx
+ * <Meter value={82}>
+ *   <MeterLabel>Disk usage</MeterLabel>
+ *   <MeterIndicator />
+ * </Meter>
+ * ```
+ */
+export declare const MeterLabel: React.ForwardRefExoticComponent<Omit<MeterLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;