@nanisoft/prism-ui 0.10.2 → 0.15.0

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

@@ -0,0 +1,206 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props Menubar forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface MenubarProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * The accessible name of the bar, read before its menus.
+     *
+     * Required rather than defaulted, because a menubar is a single Tab stop and
+     * nothing on the page tells a screen reader it is there until focus lands on
+     * it. A bar named "menu" beside a row of buttons named "menu" is a page where
+     * a reader cannot tell which is which. The name is the caller's word, and it
+     * is usually the application's own name, because that is what the bar acts on.
+     */
+    label: string;
+    /** Whether the bar is vertical rather than horizontal. @defaultValue horizontal */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether every menu in the bar ignores user interaction. @defaultValue false */
+    disabled?: boolean;
+    /**
+     * Whether an open menu makes the rest of the page inert.
+     *
+     * `true` by default, and the default is the right one for a bar: a menu that
+     * leaves the page live is a menu a pointer reader can click straight through,
+     * and an application menu bar is the one menu where the reader is expected to
+     * be somewhere else while it is open.
+     */
+    modal?: boolean;
+    /** Whether the arrow keys wrap past the end of the bar. @defaultValue true */
+    loopFocus?: boolean;
+}
+/** The props MenubarMenu forwards to Base UI. */
+export interface MenubarMenuProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled menu. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether this menu ignores user interaction. @defaultValue false */
+    disabled?: boolean;
+    /** The trigger and the menu content. */
+    children?: React.ReactNode;
+}
+/** The props MenubarTrigger forwards to Base UI. */
+export interface MenubarTriggerProps extends ComponentProps<'button'> {
+}
+/**
+ * The props MenubarContent forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface MenubarContentProps extends ComponentProps<'div'> {
+    /** The distance in pixels between the trigger and the menu. @defaultValue 4 */
+    sideOffset?: number;
+    /** The offset in pixels along the alignment axis. @defaultValue 0 */
+    alignOffset?: number;
+}
+/** The props MenubarItem forwards to Base UI. */
+export interface MenubarItemProps extends ComponentProps<'div'> {
+    /** Whether the item reads as a destructive action. @defaultValue default */
+    variant?: 'default' | 'destructive';
+    /** Whether the item ignores user interaction. */
+    disabled?: boolean;
+}
+/** The props MenubarLinkItem forwards to Base UI. */
+export interface MenubarLinkItemProps extends ComponentProps<'a'> {
+    /** Whether the link reads as a destructive action. @defaultValue default */
+    variant?: 'default' | 'destructive';
+}
+/**
+ * The props MenubarCheckboxItem forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6). An unchecked item needs this
+ * group to hold its state, and without it a tick in a menu has nowhere to live.
+ */
+export interface MenubarCheckboxItemProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /** The controlled ticked state. */
+    checked?: boolean;
+    /** The initially ticked state, for an uncontrolled item. */
+    defaultChecked?: boolean;
+    /** Called when the ticked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Whether the item ignores user interaction. */
+    disabled?: boolean;
+    /** Whether the menu closes when the item is chosen. @defaultValue false */
+    closeOnClick?: boolean;
+}
+/** The props MenubarLabel forwards to Base UI. */
+export interface MenubarLabelProps extends ComponentProps<'div'> {
+}
+/** The props MenubarSeparator forwards to Base UI. */
+export interface MenubarSeparatorProps extends ComponentProps<'div'> {
+}
+/** The props MenubarGroup forwards to Base UI. */
+export interface MenubarGroupProps extends ComponentProps<'div'> {
+}
+/** The props MenubarSub forwards to Base UI. */
+export interface MenubarSubProps {
+    /** The controlled open state of the submenu. */
+    open?: boolean;
+    /** The initially open state of the submenu. */
+    defaultOpen?: boolean;
+    /** Called when the submenu opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** The submenu trigger and its content. */
+    children?: React.ReactNode;
+}
+/** The props MenubarSubTrigger forwards to Base UI. */
+export interface MenubarSubTriggerProps extends ComponentProps<'div'> {
+}
+/** The props MenubarSubContent forwards to Base UI. */
+export interface MenubarSubContentProps extends ComponentProps<'div'> {
+    /** The distance in pixels between the submenu and the trigger. @defaultValue 0 */
+    sideOffset?: number;
+    /** The offset in pixels along the alignment axis. @defaultValue 0 */
+    alignOffset?: number;
+}
+/**
+ * The bar at the top of an application window that owns its commands.
+ *
+ * **A menubar is one Tab stop, and that is the whole difference from a row of
+ * dropdowns.** Arrow keys move along the bar and open a menu; Tab leaves the bar
+ * and enters the page. A consumer who composes the same set of menus as a row of
+ * buttons gets the Tab order of the document instead, which is every button in
+ * the bar and none of the arrows, and the bar becomes a keyboard trap that
+ * happens to sit at the top of the page. That is why this Component ships the
+ * bar as a part rather than leaving it to a wrapper: the one-Tab-stop model is
+ * the reason the parts exist.
+ *
+ * **Every menu in a bar is modal while it is open.** A menu that leaves the page
+ * live is a menu a pointer reader clicks straight through, and an application
+ * menu bar is the one menu where the reader is elsewhere while it is open. Pass
+ * `modal={false}` on the bar when that is not the case.
+ *
+ * **`label` is required.** A bar is one Tab stop and nothing announces it until
+ * focus lands there, so two unnamed bars are two things a screen reader calls
+ * "menu". Use the DropdownMenu for a menu attached to a control rather than to
+ * the application, and the NavigationMenu for links rather than commands.
+ */
+declare function Menubar({ className, label, orientation, ...props }: MenubarProps): import("react").JSX.Element;
+/**
+ * One menu in the bar, holding its trigger and its rows.
+ *
+ * It is a menu root rather than a bare element because the bar needs to know
+ * which menu is open, and the arrow keys only work between menus that share a
+ * parent. A consumer who drops the trigger and the content inside a plain `div`
+ * gets two independent dropdowns and no bar.
+ */
+declare function MenubarMenu({ ...props }: MenubarMenuProps): import("react").JSX.Element;
+/**
+ * The control that opens one menu in the bar.
+ *
+ * It is a real button and it is a menu item in the bar's own model, so Enter and
+ * Arrow Down open the menu and the arrows along the bar move between triggers.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. A band was rejected
+ * on condition 1 and this is the sharpest case of it in the package: the triggers sit
+ * beside each other along the bar, so a 44px band on one trigger is a press aimed at
+ * its neighbour. That is the same argument `DESIGN.md` makes for a checkbox beside the
+ * next row's own checkbox, and the same one that made `NumberField` turn its steppers
+ * side by side rather than stack two 44px bands on two 18px rows. Growing the bar's
+ * height from 32 to 44 on touch input is the cost, and it is the cost the platform's
+ * own menu bars pay. See DESIGN.md, The coarse-pointer floor.
+ */
+declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
+/** The floating menu surface. */
+declare function MenubarContent({ className, sideOffset, alignOffset, ...props }: MenubarContentProps): import("react").JSX.Element;
+/** One command in the menu. It does something rather than going somewhere. */
+declare function MenubarItem({ className, variant, ...props }: MenubarItemProps): import("react").JSX.Element;
+/**
+ * One destination in the menu, rendered as a native anchor.
+ *
+ * `File > Recent` is a list of places rather than a list of things to do, and a
+ * `div` styled like a link cannot be opened in a new tab or copied by address.
+ * A command belongs in `MenubarItem`; a place belongs here.
+ */
+declare function MenubarLinkItem({ className, variant, ...props }: MenubarLinkItemProps): import("react").JSX.Element;
+/**
+ * A menu row that toggles a setting, and leaves the menu open while it does.
+ *
+ * `closeOnClick` defaults to false here, and that is the decision: a setting is
+ * something a reader turns on, checks, and turns off again in the same visit, so
+ * a menu that closes on the tick makes the second of those impossible without a
+ * round trip through the bar. A command still closes.
+ */
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: MenubarCheckboxItemProps): import("react").JSX.Element;
+/** A non-interactive heading inside a group of rows. */
+declare function MenubarLabel({ className, ...props }: MenubarLabelProps): import("react").JSX.Element;
+/** A rule between groups of rows. */
+declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
+/** A labelled set of related rows. */
+declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
+/** A group of rows that opens into a second menu. */
+declare function MenubarSub({ ...props }: MenubarSubProps): import("react").JSX.Element;
+/** The row that opens a submenu. */
+declare function MenubarSubTrigger({ className, children, ...props }: MenubarSubTriggerProps): import("react").JSX.Element;
+/** The nested menu surface. */
+declare function MenubarSubContent({ className, sideOffset, alignOffset, ...props }: MenubarSubContentProps): import("react").JSX.Element;
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLinkItem, MenubarCheckboxItem, MenubarLabel, MenubarSeparator, MenubarGroup, MenubarSub, MenubarSubTrigger, MenubarSubContent, };
+//# sourceMappingURL=menubar.d.ts.map

package/dist/components/ui/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAY3C;;;;;GAKG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,mFAAmF;IACnF,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,iDAAiD;AACjD,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,oDAAoD;AACpD,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAExE;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAChE,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,qDAAqD;AACrD,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,GAAG,CAAC;IAC/D,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;CACpC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvF,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,kDAAkD;AAClD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,sDAAsD;AACtD,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEvE,kDAAkD;AAClD,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,gDAAgD;AAChD,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAExE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACnE,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,OAAO,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,WAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAcxF;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAElD;AAED;;;;;;;;;;;;;;GAcG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAgBnE;AAED,iCAAiC;AACjC,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,UAAc,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAYpG;AAED,8EAA8E;AAC9E,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAalF;AAED;;;;;;GAMG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAa1F;AAED;;;;;;;GAOG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAc1B;AAED,wDAAwD;AACxD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED,qCAAqC;AACrC,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,+BAQvE;AAED,sCAAsC;AACtC,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAE/D;AAED,qDAAqD;AACrD,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAEhD;AAED,oCAAoC;AACpC,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAWnF;AAED,+BAA+B;AAC/B,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,UAAc,EAAE,WAAe,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAY1G;AAED,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,cAAc,EACd,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/menubar.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/** The menu surface's own class string, shared by a top-level menu and a submenu. */
+const POPUP = 'bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-48 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none transition-[opacity,transform] duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px] data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0';
+/** One row in a menubar menu, whether it is a command or a link. */
+const ROW = 'focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
+/**
+ * The bar at the top of an application window that owns its commands.
+ *
+ * **A menubar is one Tab stop, and that is the whole difference from a row of
+ * dropdowns.** Arrow keys move along the bar and open a menu; Tab leaves the bar
+ * and enters the page. A consumer who composes the same set of menus as a row of
+ * buttons gets the Tab order of the document instead, which is every button in
+ * the bar and none of the arrows, and the bar becomes a keyboard trap that
+ * happens to sit at the top of the page. That is why this Component ships the
+ * bar as a part rather than leaving it to a wrapper: the one-Tab-stop model is
+ * the reason the parts exist.
+ *
+ * **Every menu in a bar is modal while it is open.** A menu that leaves the page
+ * live is a menu a pointer reader clicks straight through, and an application
+ * menu bar is the one menu where the reader is elsewhere while it is open. Pass
+ * `modal={false}` on the bar when that is not the case.
+ *
+ * **`label` is required.** A bar is one Tab stop and nothing announces it until
+ * focus lands there, so two unnamed bars are two things a screen reader calls
+ * "menu". Use the DropdownMenu for a menu attached to a control rather than to
+ * the application, and the NavigationMenu for links rather than commands.
+ */
+function Menubar({ className, label, orientation = 'horizontal', ...props }) {
+    return (_jsx(MenubarPrimitive, { "data-slot": "menubar", "aria-label": label, orientation: orientation, className: cn('bg-background flex items-center gap-1 rounded-md border p-1', 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', className), ...props }));
+}
+/**
+ * One menu in the bar, holding its trigger and its rows.
+ *
+ * It is a menu root rather than a bare element because the bar needs to know
+ * which menu is open, and the arrow keys only work between menus that share a
+ * parent. A consumer who drops the trigger and the content inside a plain `div`
+ * gets two independent dropdowns and no bar.
+ */
+function MenubarMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { ...props });
+}
+/**
+ * The control that opens one menu in the bar.
+ *
+ * It is a real button and it is a menu item in the bar's own model, so Enter and
+ * Arrow Down open the menu and the arrows along the bar move between triggers.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. A band was rejected
+ * on condition 1 and this is the sharpest case of it in the package: the triggers sit
+ * beside each other along the bar, so a 44px band on one trigger is a press aimed at
+ * its neighbour. That is the same argument `DESIGN.md` makes for a checkbox beside the
+ * next row's own checkbox, and the same one that made `NumberField` turn its steppers
+ * side by side rather than stack two 44px bands on two 18px rows. Growing the bar's
+ * height from 32 to 44 on touch input is the cost, and it is the cost the platform's
+ * own menu bars pay. See DESIGN.md, The coarse-pointer floor.
+ */
+function MenubarTrigger({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn('text-foreground inline-flex h-8 items-center gap-1.5 rounded-sm px-3 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[popup-open]:bg-accent data-[popup-open]:text-accent-foreground', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', 'pointer-coarse:h-11', className), ...props }));
+}
+/** The floating menu surface. */
+function MenubarContent({ className, sideOffset = 4, alignOffset = 0, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { sideOffset: sideOffset, alignOffset: alignOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "menubar-content", className: cn(POPUP, className), ...props }) }) }));
+}
+/** One command in the menu. It does something rather than going somewhere. */
+function MenubarItem({ className, variant = 'default', ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "menubar-item", "data-variant": variant, className: cn(ROW, 'data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10', className), ...props }));
+}
+/**
+ * One destination in the menu, rendered as a native anchor.
+ *
+ * `File > Recent` is a list of places rather than a list of things to do, and a
+ * `div` styled like a link cannot be opened in a new tab or copied by address.
+ * A command belongs in `MenubarItem`; a place belongs here.
+ */
+function MenubarLinkItem({ className, variant = 'default', ...props }) {
+    return (_jsx(MenuPrimitive.LinkItem, { "data-slot": "menubar-link-item", "data-variant": variant, className: cn(ROW, 'data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10', className), ...props }));
+}
+/**
+ * A menu row that toggles a setting, and leaves the menu open while it does.
+ *
+ * `closeOnClick` defaults to false here, and that is the decision: a setting is
+ * something a reader turns on, checks, and turns off again in the same visit, so
+ * a menu that closes on the tick makes the second of those impossible without a
+ * round trip through the bar. A command still closes.
+ */
+function MenubarCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", checked: checked, className: cn(ROW, 'pr-8 pl-8', className), ...props, children: [_jsx(MenuPrimitive.CheckboxItemIndicator, { className: "absolute left-2 flex size-4 items-center justify-center", children: _jsx(CheckIcon, { className: "size-4" }) }), children] }));
+}
+/** A non-interactive heading inside a group of rows. */
+function MenubarLabel({ className, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "menubar-label", className: cn('px-2 py-1.5 text-xs font-medium', className), ...props }));
+}
+/** A rule between groups of rows. */
+function MenubarSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "menubar-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
+}
+/** A labelled set of related rows. */
+function MenubarGroup({ className, ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "menubar-group", className: cn(className), ...props });
+}
+/** A group of rows that opens into a second menu. */
+function MenubarSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { ...props });
+}
+/** The row that opens a submenu. */
+function MenubarSubTrigger({ className, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "menubar-sub-trigger", className: cn(ROW, className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+/** The nested menu surface. */
+function MenubarSubContent({ className, sideOffset = 0, alignOffset = 0, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { sideOffset: sideOffset, alignOffset: alignOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "menubar-sub-content", className: cn(POPUP, className), ...props }) }) }));
+}
+export { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarLinkItem, MenubarCheckboxItem, MenubarLabel, MenubarSeparator, MenubarGroup, MenubarSub, MenubarSubTrigger, MenubarSubContent, };

package/dist/components/ui/meter.d.ts

@@ -0,0 +1,121 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * The tones a Meter's fill can take, and what each one is for.
+ *
+ * A tone is a judgement the caller makes, not something the Component infers. The
+ * Component can see that a value is 95 percent of a maximum; it cannot see that
+ * 95 percent is a problem. The same number is routine on a latency budget and
+ * urgent on a disk quota, so a Component that coloured itself would be making a
+ * claim about the caller's product on the caller's behalf.
+ */
+export type MeterTone = 'neutral' | 'success' | 'warning' | 'destructive';
+/**
+ * A line on the scale, and the tone the fill takes once the value is past it.
+ *
+ * Thresholds are how a bounded measure earns its keep. A fill alone says "this
+ * much"; a fill with a notch on it says "this much, and the limit is there". That
+ * is the information a quota, a budget and a usage limit actually need, and it is
+ * the reason this is a Meter rather than a Progress.
+ *
+ * The list is sorted and the last threshold that `value` has passed wins, so a
+ * caller does not have to get the order right. Equal thresholds resolve to the
+ * later one, which is the same rule a ladder of limits follows.
+ */
+export type MeterThreshold = {
+    /** The value at which this threshold begins to apply. */
+    at: number;
+    /** The tone the fill takes from here up to the next threshold. */
+    tone: MeterTone;
+};
+/** The props the Meter accepts. */
+export interface MeterProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * The measured value.
+     *
+     * There is no default. A meter with no value is a scale with no reading, which
+     * is a picture rather than a measurement, and the caller states the number.
+     */
+    value: number;
+    /**
+     * The upper bound of the scale. @defaultValue 100
+     *
+     * A percentage is a special case of a bounded measure, not the general one, so
+     * `max` exists and a meter of 4096 gigabytes is as ordinary as one of 100
+     * percent.
+     */
+    max?: number;
+    /** The lower bound of the scale. @defaultValue 0 */
+    min?: number;
+    /**
+     * The accessible name of the meter, read before its value.
+     *
+     * Required rather than defaulted, because a page with two meters is a page where
+     * a reader cannot tell which is which, and the name is the caller's word. A
+     * meter that ships its own name is a meter every consumer inherits in English.
+     */
+    label: string;
+    /**
+     * The words for the value, read instead of the number.
+     *
+     * A bare number is a poor announcement: "72" says nothing about what is being
+     * measured or in what unit. A caller with a formatted value passes it here, and
+     * a caller whose number is self-describing leaves it unset.
+     */
+    valueText?: string;
+    /**
+     * The lines on the scale, in any order.
+     *
+     * Each is a notch the reader can see and the tone the fill takes past it. A
+     * meter with no thresholds is a neutral fill, which is the honest default: most
+     * measurements are not near a limit.
+     */
+    thresholds?: readonly MeterThreshold[];
+    /**
+     * The tone of the fill when no threshold applies, or above the last one.
+     *
+     * Left unset the fill is the foreground colour, which is the neutral reading.
+     * Set it when the high end of the scale is itself the alarm.
+     */
+    tone?: MeterTone;
+    /**
+     * The text under the scale, which is where the reading goes.
+     *
+     * The visible value belongs beside the track rather than inside it, because a
+     * number printed on a two-pixel bar is unreadable at any size worth reading. A
+     * caller that wants no text passes nothing and gets the track alone, which is
+     * correct for a meter inside a dense row where the number is in the row.
+     */
+    children?: ReactNode;
+}
+/**
+ * A bounded measure, drawn as a scale with its limits on it.
+ *
+ * A Meter and a Progress both show a value against a maximum, and the difference
+ * is the whole reason this is a separate Component. A Progress is a task moving
+ * toward an end whose length is not known in advance, and it is read while it
+ * moves. A Meter is a quantity that already has an answer, bounded by a limit the
+ * caller knows, and it is read as a standing measurement. A disk at 95 percent, a
+ * token budget, a score out of a hundred, a queue depth against its ceiling.
+ *
+ * **The thresholds are the design.** A fill on its own is one number, and a number
+ * with no limit beside it cannot be acted on: 72 percent of what, and is that
+ * much? Drawing the caller's own limits as notches on the track puts the answer
+ * next to the reading, and a consumer who passes a latency budget gets a latency
+ * budget rather than a generic bar that happens to be filled to a similar
+ * fraction. The Component has no opinion about which numbers matter; the notches
+ * are the caller's.
+ *
+ * **It is drawn as a hairline, not a bar.** The Progress in this system is a
+ * two-pixel rounded bar, and a Meter that looked like one would be read as one.
+ * The difference is visible before it is read: a Meter is a scale, drawn on a rule
+ * with ticks, where a Progress is a task, drawn as a fill in a trough.
+ *
+ * **It is not a live region.** A meter's value changing is usually the result of
+ * something else happening, and that something else is what should be announced. A
+ * consumer that wants the reading announced wraps it in a LiveRegion, which is
+ * the same split every other Component here makes between the thing that changed
+ * and the thing that reports it.
+ */
+declare function Meter({ className, value, max, min, label, valueText, thresholds, tone, children, ...props }: MeterProps): import("react").JSX.Element;
+export { Meter };
+//# sourceMappingURL=meter.d.ts.map

package/dist/components/ui/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","sourceRoot":"","sources":["../../../src/components/ui/meter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;GAQG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAA;AAEzE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAA;IACV,kEAAkE;IAClE,IAAI,EAAE,SAAS,CAAA;CAChB,CAAA;AAED,mCAAmC;AACnC,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzE;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IACtC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAuCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,KAAK,EACL,GAAS,EACT,GAAO,EACP,KAAK,EACL,SAAS,EACT,UAAe,EACf,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,UAAU,+BA0DZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/meter.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** The fill and the ring, per tone, from the existing semantic roles. */
+const TONE_FILL = {
+    neutral: 'bg-foreground',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    destructive: 'bg-destructive',
+};
+const TONE_NOTCH = {
+    // A neutral notch is the border colour, because a notch that is the same weight
+    // as the fill disappears into it, and a scale whose own ticks cannot be seen is
+    // a scale with no limit on it.
+    neutral: 'bg-border',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    destructive: 'bg-destructive',
+};
+/** The value clamped into the scale, so a reading outside the bounds is not drawn outside the track. */
+function clamp(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+/** The tone the fill takes, which is the last threshold passed and then the caller's default. */
+function toneFor(value, thresholds, fallback) {
+    const passed = [...thresholds]
+        .filter((threshold) => Number.isFinite(threshold.at) && value >= threshold.at)
+        .sort((a, b) => a.at - b.at)
+        .at(-1);
+    return passed?.tone ?? fallback ?? 'neutral';
+}
+/**
+ * A bounded measure, drawn as a scale with its limits on it.
+ *
+ * A Meter and a Progress both show a value against a maximum, and the difference
+ * is the whole reason this is a separate Component. A Progress is a task moving
+ * toward an end whose length is not known in advance, and it is read while it
+ * moves. A Meter is a quantity that already has an answer, bounded by a limit the
+ * caller knows, and it is read as a standing measurement. A disk at 95 percent, a
+ * token budget, a score out of a hundred, a queue depth against its ceiling.
+ *
+ * **The thresholds are the design.** A fill on its own is one number, and a number
+ * with no limit beside it cannot be acted on: 72 percent of what, and is that
+ * much? Drawing the caller's own limits as notches on the track puts the answer
+ * next to the reading, and a consumer who passes a latency budget gets a latency
+ * budget rather than a generic bar that happens to be filled to a similar
+ * fraction. The Component has no opinion about which numbers matter; the notches
+ * are the caller's.
+ *
+ * **It is drawn as a hairline, not a bar.** The Progress in this system is a
+ * two-pixel rounded bar, and a Meter that looked like one would be read as one.
+ * The difference is visible before it is read: a Meter is a scale, drawn on a rule
+ * with ticks, where a Progress is a task, drawn as a fill in a trough.
+ *
+ * **It is not a live region.** A meter's value changing is usually the result of
+ * something else happening, and that something else is what should be announced. A
+ * consumer that wants the reading announced wraps it in a LiveRegion, which is
+ * the same split every other Component here makes between the thing that changed
+ * and the thing that reports it.
+ */
+function Meter({ className, value, max = 100, min = 0, label, valueText, thresholds = [], tone, children, ...props }) {
+    const reading = clamp(value, min, max);
+    const span = max - min;
+    // A zero-width scale has no fraction, and dividing by it yields a NaN that
+    // reaches the DOM as a width. A degenerate scale draws empty and still
+    // announces, because a Component that renders nothing is worse than one that
+    // renders an empty track.
+    const percent = span === 0 ? 0 : ((reading - min) / span) * 100;
+    const resolved = toneFor(reading, thresholds, tone);
+    return (_jsxs("div", { "data-slot": "meter", className: cn('flex w-full flex-col gap-1.5', className), ...props, children: [_jsxs("div", { "data-slot": "meter-track", 
+                // `role="meter"` and not `role="progressbar"`: the two are distinguished
+                // by exactly the distinction this Component exists for, and assistive
+                // technology reports them differently. A meter is a standing measurement.
+                role: "meter", "aria-label": label, "aria-valuenow": reading, "aria-valuemin": min, "aria-valuemax": max, ...(valueText === undefined ? null : { 'aria-valuetext': valueText }), className: "bg-border relative block h-px w-full", children: [_jsx("div", { "data-slot": "meter-fill", className: cn('absolute inset-y-0 left-0', TONE_FILL[resolved]), style: { width: `${percent}%` } }), thresholds.map((threshold, index) => {
+                        const at = clamp(threshold.at, min, max);
+                        if (span === 0)
+                            return null;
+                        return (_jsx("span", { "data-slot": "meter-threshold", "aria-hidden": "true", className: cn('absolute inset-y-0 w-px', TONE_NOTCH[threshold.tone]), style: { left: `${((at - min) / span) * 100}%` } }, `${threshold.at}-${index}`));
+                    })] }), children === undefined ? null : (_jsx("div", { "data-slot": "meter-caption", className: "text-muted-foreground flex items-baseline justify-between gap-3 text-xs", children: children }))] }));
+}
+export { Meter };