@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/components/ui/mega-menu.d.ts

@@ -0,0 +1,244 @@
+/**
+ * One column of a mega-menu panel, and the links in it.
+ *
+ * A column and not a link, because a column is a claim about how the caller's
+ * information is grouped and Prism cannot make it: four columns of two links and two
+ * columns of five links are two products' answers to the same panel, and a Component
+ * that decided the number would be deciding the caller's information architecture.
+ */
+export type MegaMenuColumn = {
+    /**
+     * The column's name.
+     *
+     * Required, and required rather than optional because an unlabelled column of
+     * links is a list a reader scans twice: once to work out what it is and once to
+     * find the link. `null` is not offered for the same reason a page heading cannot
+     * be omitted: the grouping is the thing that makes the panel readable.
+     */
+    label: React.ReactNode;
+    /** The links, in the order a reader should meet them. */
+    links: readonly MegaMenuLink[];
+};
+/** One destination in a mega-menu column. */
+export type MegaMenuLink = {
+    /** Where the link goes. */
+    href: string;
+    /** The words on the link. */
+    label: React.ReactNode;
+    /** One line under the link saying where it goes. */
+    description?: React.ReactNode;
+    /** Whether this is the page the reader is on. */
+    active?: boolean;
+    /**
+     * Whether taking the link closes the panel.
+     *
+     * Optional and false by default rather than true, and the reason is which link a
+     * reader is most likely to press. A panel of destinations is read, compared and
+     * scanned, and a reader who has found the one they want and clicked it expects to
+     * be somewhere new; closing on every click means a reader who clicks to find out
+     * where something is loses the panel they were comparing in. A caller whose links
+     * are commands rather than addresses sets it on each one.
+     */
+    closeOnClick?: boolean;
+};
+/**
+ * The tabbed panels inside one disclosure, and the tabs that choose between them.
+ *
+ * A tab axis rather than a column per tab because the two are different claims. A
+ * column per tab says "here are six things you may want", all six of which are
+ * peers. A tab axis says "here are four *views of one subject*, and at any moment
+ * exactly one is the view you are looking at", which is the structure a documentation
+ * index, a pricing comparison and an API reference all have, and which a reader
+ * navigating by Tab has to be told about.
+ */
+export type MegaMenuPanel = {
+    /** The panel's stable key. */
+    value: string;
+    /** The tab's visible name. */
+    label: React.ReactNode;
+    /** The columns this panel holds. */
+    columns: readonly MegaMenuColumn[];
+};
+/**
+ * One disclosure in the bar, and the panels it opens.
+ *
+ * `panels` is required and may hold one entry, and a single panel is a real shape:
+ * it is a disclosure whose content is one column of links and no axis to choose on.
+ * A Component that required two would make that caller invent a second tab they do
+ * not have, and a reader who tabs onto a one-tab axis has learned nothing.
+ */
+export type MegaMenuGroup = {
+    /** The group's stable key, and what the disclosure's open state refers to. */
+    value: string;
+    /** The words on the trigger. */
+    label: React.ReactNode;
+    /** The panels the trigger opens. */
+    panels: readonly MegaMenuPanel[];
+};
+/**
+ * The props a MegaMenu accepts.
+ *
+ * Declared rather than extended from `NavigationMenu`'s, and the reason is that
+ * every prop here is about the *inside* of the panel, which `NavigationMenu` has no
+ * opinion about at all: it knows about triggers and links and nothing between them.
+ * The open state is forwarded rather than re-declared, so a caller reading this
+ * Component's signature can see the whole contract in one place.
+ */
+export interface MegaMenuProps {
+    /**
+     * The accessible name of this region of links.
+     *
+     * Required, and required for the reason `NavigationMenu` requires it: the root
+     * renders a `<nav>`, and a `<nav>` with no name is a landmark announced only as
+     * "navigation". A site header's primary links and a footer link list are both
+     * `<nav>`, and a reader moving between them is told nothing about which is which.
+     */
+    label: string;
+    /**
+     * The disclosures, in the order a reader meets them.
+     *
+     * Required, and the order is a reading order rather than a sort: a header's
+     * disclosures are ordered by how often they are used, which is the caller's fact
+     * and not something a sort here could know.
+     */
+    groups: readonly MegaMenuGroup[];
+    /**
+     * The open group, or `null` for none open.
+     *
+     * Controlled and required, for the reason it is on `NavigationMenu`: the caller's
+     * page, its address and its analytics all need to know what is open, and a
+     * Component holding its own copy would be a second source of truth about a state
+     * that a reader can see on the page.
+     */
+    value: string | null;
+    /** Called when the open group changes. */
+    onValueChange: (value: string | null) => void;
+    /**
+     * The accessible name of each panel's tab axis, given the group's value.
+     *
+     * Required and a function of the group, because the inner axis is a *second*
+     * navigation region and it needs a name of its own: a reader who has tabbed out
+     * of the header's tab list and into a panel's tab list has to be told which of the
+     * two they are in, and the only word this package could invent would be a word
+     * that is wrong in every consumer's product.
+     */
+    panelLabel: (group: string) => string;
+    /**
+     * The inner tab shown for one group, given the group's value.
+     *
+     * Required and a function of the group rather than a single value, because the
+     * inner axis belongs to the group that holds it: two groups' panels are two
+     * different lists of tabs, and one shared value would give a reader who has the
+     * second tab of one open whichever tab happened to be last in the other. So the
+     * caller holds one value per group and this Component asks for the group it needs
+     * rather than keeping a record the caller cannot see and cannot put in an address.
+     *
+     * The cost is a caller who opens two groups and has set the same value in both has
+     * a reader who lands on the same tab index in each, which is right when the panels
+     * are parallel and wrong when they are not. Telling the two apart is the caller's
+     * knowledge about their own content rather than a fact this package holds.
+     */
+    panel: (group: string) => string;
+    /**
+     * Called when the reader moves to another inner tab, given the group and the tab.
+     *
+     * Required, and the group comes first because the caller is holding a value per
+     * group and a callback that reported only the tab would leave them to guess which
+     * of their values to write.
+     */
+    onPanelChange: (group: string, value: string) => void;
+    /**
+     * How long the pointer must rest on a trigger before the group opens, in
+     * milliseconds.
+     *
+     * Optional and defaulted the way `NavigationMenu` defaults it, because the panel is
+     * a set of addresses rather than a preview: the reader is about to take one of
+     * these links and a long rest followed by a wait is a rest they conclude did
+     * nothing. The value is forwarded rather than re-decided so a caller who needs a
+     * different one has one place to set it.
+     */
+    delay?: number;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * A multi-column disclosure whose panel is a second navigation axis, with its own
+ * focus order inside the header's.
+ *
+ * **`NavigationMenu` is a disclosure of links. This is a disclosure whose contents
+ * are themselves a set of views, and the difference is a focus order rather than a
+ * drawing.** `NavigationMenu` opens a panel and the panel is links: Tab moves from
+ * the trigger into a flat list and out of it, and there is nothing inside to
+ * navigate. Here the panel opens onto a *tab axis*, so a reader who has tabbed off
+ * the trigger is on a second list with its own roving tab stop, and from there into
+ * the links of whichever panel is showing. That is three levels of navigation inside
+ * one disclosure, and it is why this Component exists rather than a caller
+ * composing `NavigationMenu` and dropping a `Tabs` into its content: a hand-placed
+ * `Tabs` inside a `NavigationMenuContent` works until the reader tabs, at which
+ * point two arrow-key models are live in one panel and the reader cannot tell which
+ * one their key press is about.
+ *
+ * **The composition is deliberate and it is the argument.** `NavigationMenu`
+ * supplies the disclosure: the trigger, the open state, the portal, the viewport
+ * that absorbs the width change between panels, the Escape that closes and returns
+ * focus, and the outside press. `Tabs` supplies the inner axis: the roving tab
+ * stop, the arrow keys, `aria-selected` on the trigger and the panel relationship.
+ * Neither is reimplemented here, for the reason every composition in this package is
+ * one: two implementations of a focus model disagree within a release and a consumer
+ * cannot tell which they installed. What this Component owns is the third thing, and
+ * it is the third thing that is the Component: **the panel's focus order**, which is
+ * the ordering of the two axes relative to each other and to the trigger.
+ *
+ * **The inner panel's value is the caller's, one per group, and that is what keeps
+ * the two axes from colliding.** A reader who has the second tab of the Developers
+ * panel open expects it to still be open when they come back to it, and a Component
+ * with one shared `panel` value would give them whichever tab happened to be last.
+ * So `panel` is a function of the group and the caller's map of group to tab value is
+ * the truth. What this Component adds is the part the caller cannot: it asks for the
+ * group it needs at the moment the panel is drawn, and it never resets a value the
+ * reader chose. The cost is stated on the prop, and it is the same cost the whole
+ * composition has: a caller who has set the same value in two groups has a reader who
+ * lands on the same index in each.
+ *
+ * **The inner axis is named, and the name is per group.** The outer list is a
+ * `<nav>` named by `label`, and the inner axis is a second navigation region that a
+ * reader has to be told about separately: "Pricing, tab list" is a different
+ * sentence from "Primary, tab list", and a reader who has tabbed off the header's
+ * triggers and onto a panel's tabs has to know which one their arrow keys are about.
+ * `panelLabel` is a function of the group for the same reason: "Pricing" and "Docs"
+ * have different panels and a single word would be wrong for one of them.
+ *
+ * **A group with one panel draws one panel and no axis, and that is the honest
+ * drawing.** One panel is a disclosure whose content is a set of links, which is what
+ * `NavigationMenu` already is, and a one-tab axis is a tab stop that goes nowhere.
+ * So the tab list is drawn only when there is more than one panel to choose between,
+ * and a group with one panel renders its columns directly. The cost is that the
+ * panel's markup differs between the two shapes, and a caller styling across both
+ * has to account for a missing tab list, which is a selector rather than a
+ * behaviour.
+ *
+ * **`NavigationMenuLink` is composed for every destination and it is the only
+ * interactive leaf inside the panel.** That is `NavigationMenu`'s rule and it is
+ * load-bearing: a link carries an address, so the browser can open it in a new tab,
+ * copy it, and a crawler can follow it. A mega-menu whose panel holds buttons is a
+ * header whose links cannot be shared, and the second navigation axis makes it more
+ * tempting rather than less, because a tab axis looks like a set of controls. So
+ * every leaf here is a native anchor and there is no command part to reach for by
+ * mistake.
+ *
+ * **`active` is a required prop on every link rather than a derived one, and this is
+ * the Component that most needs it.** A mega-menu is the widest panel a header draws
+ * and the one a reader is most likely to be inside already: they are looking for
+ * where they are. The marking is `aria-current="page"` on the anchor, so it is the
+ * attribute and not a fill, which is the order the whole package keeps meaning in.
+ *
+ * **It is a client Component**, because the disclosure opens after the reader acts,
+ * because the inner axis moves after the reader acts, and because every one of its
+ * value props is a function the caller hands it, which is a client-to-client boundary
+ * wherever it is written. What that costs is the price of every client control: a
+ * server Component may render the bar's triggers once with every panel closed, and
+ * what it may not do is open one.
+ */
+declare function MegaMenu({ label, groups, value, onValueChange, panelLabel, panel, onPanelChange, delay, className, }: MegaMenuProps): import("react").JSX.Element;
+export { MegaMenu };
+//# sourceMappingURL=mega-menu.d.ts.map

package/dist/components/ui/mega-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mega-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/mega-menu.tsx"],"names":[],"mappings":"AAiBA;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;;;;;;OAOG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,yDAAyD;IACzD,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;CAC/B,CAAA;AAED,6CAA6C;AAC7C,MAAM,MAAM,YAAY,GAAG;IACzB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oDAAoD;IACpD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oCAAoC;IACpC,OAAO,EAAE,SAAS,cAAc,EAAE,CAAA;CACnC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oCAAoC;IACpC,MAAM,EAAE,SAAS,aAAa,EAAE,CAAA;CACjC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,MAAM,EAAE,SAAS,aAAa,EAAE,CAAA;IAChC;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,0CAA0C;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C;;;;;;;;OAQG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAChC;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACrD;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,MAAM,EACN,KAAK,EACL,aAAa,EACb,UAAU,EACV,KAAK,EACL,aAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE,aAAa,+BAuHf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/mega-menu.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuPopup, NavigationMenuPositioner, NavigationMenuTrigger, NavigationMenuViewport, } from './navigation-menu.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * One column's links, and the column's own frame.
+ *
+ * `min-w-0` on the list so a long link wraps rather than widening the panel, and the
+ * panel's width is the panel's business: a mega-menu that sizes itself to its widest
+ * column is a panel whose width changes as the reader moves between tabs, which is
+ * the layout shift `NavigationMenu`'s viewport exists to absorb and this column list
+ * helps by not asking for more than it needs.
+ */
+const COLUMN = 'flex min-w-0 flex-1 flex-col gap-3';
+/**
+ * A multi-column disclosure whose panel is a second navigation axis, with its own
+ * focus order inside the header's.
+ *
+ * **`NavigationMenu` is a disclosure of links. This is a disclosure whose contents
+ * are themselves a set of views, and the difference is a focus order rather than a
+ * drawing.** `NavigationMenu` opens a panel and the panel is links: Tab moves from
+ * the trigger into a flat list and out of it, and there is nothing inside to
+ * navigate. Here the panel opens onto a *tab axis*, so a reader who has tabbed off
+ * the trigger is on a second list with its own roving tab stop, and from there into
+ * the links of whichever panel is showing. That is three levels of navigation inside
+ * one disclosure, and it is why this Component exists rather than a caller
+ * composing `NavigationMenu` and dropping a `Tabs` into its content: a hand-placed
+ * `Tabs` inside a `NavigationMenuContent` works until the reader tabs, at which
+ * point two arrow-key models are live in one panel and the reader cannot tell which
+ * one their key press is about.
+ *
+ * **The composition is deliberate and it is the argument.** `NavigationMenu`
+ * supplies the disclosure: the trigger, the open state, the portal, the viewport
+ * that absorbs the width change between panels, the Escape that closes and returns
+ * focus, and the outside press. `Tabs` supplies the inner axis: the roving tab
+ * stop, the arrow keys, `aria-selected` on the trigger and the panel relationship.
+ * Neither is reimplemented here, for the reason every composition in this package is
+ * one: two implementations of a focus model disagree within a release and a consumer
+ * cannot tell which they installed. What this Component owns is the third thing, and
+ * it is the third thing that is the Component: **the panel's focus order**, which is
+ * the ordering of the two axes relative to each other and to the trigger.
+ *
+ * **The inner panel's value is the caller's, one per group, and that is what keeps
+ * the two axes from colliding.** A reader who has the second tab of the Developers
+ * panel open expects it to still be open when they come back to it, and a Component
+ * with one shared `panel` value would give them whichever tab happened to be last.
+ * So `panel` is a function of the group and the caller's map of group to tab value is
+ * the truth. What this Component adds is the part the caller cannot: it asks for the
+ * group it needs at the moment the panel is drawn, and it never resets a value the
+ * reader chose. The cost is stated on the prop, and it is the same cost the whole
+ * composition has: a caller who has set the same value in two groups has a reader who
+ * lands on the same index in each.
+ *
+ * **The inner axis is named, and the name is per group.** The outer list is a
+ * `<nav>` named by `label`, and the inner axis is a second navigation region that a
+ * reader has to be told about separately: "Pricing, tab list" is a different
+ * sentence from "Primary, tab list", and a reader who has tabbed off the header's
+ * triggers and onto a panel's tabs has to know which one their arrow keys are about.
+ * `panelLabel` is a function of the group for the same reason: "Pricing" and "Docs"
+ * have different panels and a single word would be wrong for one of them.
+ *
+ * **A group with one panel draws one panel and no axis, and that is the honest
+ * drawing.** One panel is a disclosure whose content is a set of links, which is what
+ * `NavigationMenu` already is, and a one-tab axis is a tab stop that goes nowhere.
+ * So the tab list is drawn only when there is more than one panel to choose between,
+ * and a group with one panel renders its columns directly. The cost is that the
+ * panel's markup differs between the two shapes, and a caller styling across both
+ * has to account for a missing tab list, which is a selector rather than a
+ * behaviour.
+ *
+ * **`NavigationMenuLink` is composed for every destination and it is the only
+ * interactive leaf inside the panel.** That is `NavigationMenu`'s rule and it is
+ * load-bearing: a link carries an address, so the browser can open it in a new tab,
+ * copy it, and a crawler can follow it. A mega-menu whose panel holds buttons is a
+ * header whose links cannot be shared, and the second navigation axis makes it more
+ * tempting rather than less, because a tab axis looks like a set of controls. So
+ * every leaf here is a native anchor and there is no command part to reach for by
+ * mistake.
+ *
+ * **`active` is a required prop on every link rather than a derived one, and this is
+ * the Component that most needs it.** A mega-menu is the widest panel a header draws
+ * and the one a reader is most likely to be inside already: they are looking for
+ * where they are. The marking is `aria-current="page"` on the anchor, so it is the
+ * attribute and not a fill, which is the order the whole package keeps meaning in.
+ *
+ * **It is a client Component**, because the disclosure opens after the reader acts,
+ * because the inner axis moves after the reader acts, and because every one of its
+ * value props is a function the caller hands it, which is a client-to-client boundary
+ * wherever it is written. What that costs is the price of every client control: a
+ * server Component may render the bar's triggers once with every panel closed, and
+ * what it may not do is open one.
+ */
+function MegaMenu({ label, groups, value, onValueChange, panelLabel, panel, onPanelChange, delay, className, }) {
+    return (_jsx(NavigationMenu, { label: label, value: value, onValueChange: onValueChange, delay: delay, className: cn('w-full', className), children: _jsx(NavigationMenuList, { children: groups.map((group) => (_jsxs(NavigationMenuItem, { value: group.value, children: [_jsx(NavigationMenuTrigger, { children: group.label }), _jsx(NavigationMenuPortal, { children: _jsx(NavigationMenuPositioner, { children: _jsx(NavigationMenuPopup, { children: _jsx(NavigationMenuViewport, { className: "p-4", children: _jsxs(Tabs, { value: panel(group.value), onValueChange: (next) => onPanelChange(group.value, next), children: [group.panels.length <= 1 ? null : (_jsx(TabsList, { "aria-label": panelLabel(group.value), children: group.panels.map((panel) => (_jsx(TabsTrigger, { value: panel.value, children: panel.label }, panel.value))) })), group.panels.map((panel) => (_jsx(TabsContent, { value: panel.value, children: _jsx("div", { "data-slot": "mega-menu-columns", className: "flex flex-col gap-6 sm:flex-row sm:gap-8", children: panel.columns.map((column) => (_jsxs("div", { "data-slot": "mega-menu-column", className: COLUMN, children: [_jsx("p", { "data-slot": "mega-menu-column-label", className: "text-muted-foreground text-xs font-medium tracking-wide uppercase", children: column.label }), _jsx("ul", { className: "flex list-none flex-col gap-1", children: column.links.map((link) => (_jsx("li", { children: _jsx(NavigationMenuLink, { href: link.href, active: link.active, closeOnClick: link.closeOnClick, children: _jsxs("span", { "data-slot": "mega-menu-link", className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: link.label }), link.description === undefined ? null : (_jsx("span", { className: "text-muted-foreground text-xs", children: link.description }))] }) }) }, link.href))) })] }, String(column.label)))) }) }, panel.value)))] }) }) }) }) })] }, group.value))) }) }));
+}
+export { MegaMenu };

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

@@ -158,6 +158,15 @@ declare function MenubarMenu({ ...props }: MenubarMenuProps): import("react").JS
  *
  * 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. */

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

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/menubar.js

@@ -49,9 +49,18 @@ function MenubarMenu({ ...props }) {
  *
  * 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', 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 }) {

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

@@ -0,0 +1,123 @@
+import type { ComponentProps, ReactNode } from 'react';
+/**
+ * A change against the previous reading, as a number whose sign is the direction.
+ *
+ * The sign is the direction, and that is the whole of the type. The shape this
+ * refuses is `{ value: number, direction: 'up' | 'down' }`, which is the shape a
+ * caller reaches for first and which is wrong twice over: it lets a caller put a
+ * rising mark on a falling number, and it gives one fact two spellings, so a
+ * call site holding one of them wrong reads the wrong way with nothing to catch
+ * it. A number has exactly one sign and there is nothing left to declare.
+ *
+ * **There is no flat member, and a zero draws no direction mark.** A zero is a
+ * real reading and the number is still shown, but nothing is drawn beside it,
+ * because a mark on a figure that did not move is a claim the data does not
+ * make. An arrow says the reading changed, and a reader who believes it is
+ * looking at movement that is not there.
+ *
+ * The number is the caller's own figure in the caller's own units. A delta of
+ * `0.12` is not a mistake here, and Prism does not attach a percent sign to it
+ * on the chance that it is one; see `MetricProps.deltaFormat` for what it prints
+ * instead.
+ */
+export type MetricDelta = number;
+/** The props the Metric accepts. */
+export interface MetricProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * The figure itself, the number the whole Item exists to show.
+     *
+     * A `ReactNode` rather than a `number`, for the reason a Component cannot
+     * print a figure it cannot see the unit of: a caller's figure is often a value
+     * it formatted itself, and a `number` prop would make it either ship that as a
+     * string outside this Component or lose the unit it belongs to. Prism takes the
+     * node and formats nothing.
+     */
+    value: ReactNode;
+    /**
+     * What the figure measures, read under it rather than above it.
+     *
+     * Required, because a figure with nothing saying what it is is a number a
+     * reader has to guess the meaning of, which is the one thing a headline figure
+     * cannot afford.
+     */
+    label: ReactNode;
+    /**
+     * The unit, set beside the figure at the Label step.
+     *
+     * A prop rather than part of `value` so a consumer that wants the unit to scale
+     * with the figure puts it in `value` and a consumer that wants it quiet puts
+     * it here. Omit it for a figure that is self-describing.
+     */
+    unit?: ReactNode;
+    /** The change against the previous reading. See `MetricDelta`. */
+    delta?: MetricDelta;
+    /**
+     * The words for the delta, given the number.
+     *
+     * There is no default that knows the unit, and that is the point: a delta of
+     * `0.12` is twelve percent, twelve cents or twelve milliseconds, and a
+     * Component that guessed would be claiming a caller's units. The fallback is
+     * the number itself, so a caller who passes a fraction and no formatter gets
+     * `0.12` printed, which is honest and usually not what was wanted. Pass the
+     * formatter.
+     */
+    deltaFormat?: (value: number) => string;
+    /**
+     * The line under the label, for whatever the caller wants said about the
+     * figure: the period it covers, the source it came from, the caveat that
+     * matters this week.
+     */
+    hint?: ReactNode;
+}
+/**
+ * One figure, read first, with the words that say what it is underneath it.
+ *
+ * **A metric is read as a number, so the label goes under the value.** The
+ * label-first arrangement is the one most stat tiles use, and it asks a reader
+ * to read a heading before they know what the heading is about. A Metric
+ * inverts it: the figure lands first, at the Title step of the type scale, and
+ * the name is the second thing read. The cost is real and worth naming, because
+ * a column of metrics read top to bottom puts the names at different heights. A
+ * dashboard row is scanned by the figures and settled by the names, and a caller
+ * who wants a column of named figures is looking for a table rather than for
+ * this.
+ *
+ * **The direction is derived, never declared.** See `MetricDelta`. A Metric that
+ * took a `direction` beside the number would be able to draw a rising mark on a
+ * falling reading, which is a defect a reader sees and a type checker does not,
+ * so the direction has nowhere to be written but the sign it already came from.
+ *
+ * **The mark is a glyph rather than a drawing, and that is what makes the
+ * direction localisable.** The mark is a character, not an icon set and not a
+ * CSS triangle, so assistive technology announces it with the platform's own
+ * name for the character, in the reader's own language. The rejected
+ * alternative is a `title` attribute, or an `aria-label`, holding the word up or
+ * down, which would put a sentence in English into every consumer's product and
+ * leave the consumer no way to translate it. The cost of the glyph is that not
+ * every screen reader names every arrow, so the number beside it is the reading
+ * and the mark is the quicker one.
+ *
+ * **A string value is set in the mono face and a composed value is not.** The
+ * mono stack in this system annotates machine-readable readings, and a figure a
+ * consumer formatted itself is one of them: a caller's grouped thousands, its
+ * percentage, its currency. The rejected alternative is a `monospace` prop,
+ * which pushes the same decision onto every caller, and the decision is the same
+ * for all of them. A value that arrives as a node rather than a string is a
+ * figure the consumer composed out of several parts, and setting that in mono
+ * would put a machine face on a sentence.
+ *
+ * **Prism formats only the delta, and the fallback is the bare number.** The
+ * figure is a node and the unit is a node, so the only number this Component
+ * prints is the delta, and it prints it with the caller's formatter when there is
+ * one and with the number itself when there is not. A Component cannot print a
+ * delta it has no unit for, and a default that guessed a percent sign would be a
+ * claim about the caller's domain. The cost of that refusal is visible: a caller
+ * who passes a fraction and no formatter gets `0.12` printed, which is honest and
+ * usually not what was wanted. See `deltaFormat`.
+ *
+ * It is a server Component: no hook, no state, no effect, and nothing here is
+ * decided at hydration time. The whole figure is markup.
+ */
+declare function Metric({ className, value, label, unit, delta, deltaFormat, hint, ...props }: MetricProps): import("react").JSX.Element;
+export { Metric };
+//# sourceMappingURL=metric.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metric.d.ts","sourceRoot":"","sources":["../../../src/components/ui/metric.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAQhC,oCAAoC;AACpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1E;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kEAAkE;IAClE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,WAAW,+BAoDb;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/ui/metric.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** The mark a rising reading takes. A glyph, not a drawing, and the reason is in the JSDoc. */
+const RISING = '↑';
+/** The mark a falling reading takes. */
+const FALLING = '↓';
+/**
+ * One figure, read first, with the words that say what it is underneath it.
+ *
+ * **A metric is read as a number, so the label goes under the value.** The
+ * label-first arrangement is the one most stat tiles use, and it asks a reader
+ * to read a heading before they know what the heading is about. A Metric
+ * inverts it: the figure lands first, at the Title step of the type scale, and
+ * the name is the second thing read. The cost is real and worth naming, because
+ * a column of metrics read top to bottom puts the names at different heights. A
+ * dashboard row is scanned by the figures and settled by the names, and a caller
+ * who wants a column of named figures is looking for a table rather than for
+ * this.
+ *
+ * **The direction is derived, never declared.** See `MetricDelta`. A Metric that
+ * took a `direction` beside the number would be able to draw a rising mark on a
+ * falling reading, which is a defect a reader sees and a type checker does not,
+ * so the direction has nowhere to be written but the sign it already came from.
+ *
+ * **The mark is a glyph rather than a drawing, and that is what makes the
+ * direction localisable.** The mark is a character, not an icon set and not a
+ * CSS triangle, so assistive technology announces it with the platform's own
+ * name for the character, in the reader's own language. The rejected
+ * alternative is a `title` attribute, or an `aria-label`, holding the word up or
+ * down, which would put a sentence in English into every consumer's product and
+ * leave the consumer no way to translate it. The cost of the glyph is that not
+ * every screen reader names every arrow, so the number beside it is the reading
+ * and the mark is the quicker one.
+ *
+ * **A string value is set in the mono face and a composed value is not.** The
+ * mono stack in this system annotates machine-readable readings, and a figure a
+ * consumer formatted itself is one of them: a caller's grouped thousands, its
+ * percentage, its currency. The rejected alternative is a `monospace` prop,
+ * which pushes the same decision onto every caller, and the decision is the same
+ * for all of them. A value that arrives as a node rather than a string is a
+ * figure the consumer composed out of several parts, and setting that in mono
+ * would put a machine face on a sentence.
+ *
+ * **Prism formats only the delta, and the fallback is the bare number.** The
+ * figure is a node and the unit is a node, so the only number this Component
+ * prints is the delta, and it prints it with the caller's formatter when there is
+ * one and with the number itself when there is not. A Component cannot print a
+ * delta it has no unit for, and a default that guessed a percent sign would be a
+ * claim about the caller's domain. The cost of that refusal is visible: a caller
+ * who passes a fraction and no formatter gets `0.12` printed, which is honest and
+ * usually not what was wanted. See `deltaFormat`.
+ *
+ * It is a server Component: no hook, no state, no effect, and nothing here is
+ * decided at hydration time. The whole figure is markup.
+ */
+function Metric({ className, value, label, unit, delta, deltaFormat, hint, ...props }) {
+    // A delta that is not a finite number is dropped rather than printed, because
+    // "NaN" under a figure is a second claim about the figure and "Infinity" is a
+    // third, and neither is a reading.
+    const shown = typeof delta === 'number' && Number.isFinite(delta) ? delta : undefined;
+    const read = deltaFormat ?? ((change) => String(change));
+    return (_jsxs("div", { "data-slot": "metric", className: cn('flex w-full flex-col', className), ...props, children: [_jsxs("div", { "data-slot": "metric-figure", className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { "data-slot": "metric-value", className: cn('text-2xl font-semibold tracking-tight tabular-nums', 
+                        // A string is a machine-readable reading, and the mono stack is what
+                        // this system annotates one with. A node is a composed figure and
+                        // stays in the interface face.
+                        typeof value === 'string' && 'font-mono'), children: value }), unit === undefined ? null : (_jsx("span", { "data-slot": "metric-unit", className: "text-muted-foreground text-sm font-medium", children: unit }))] }), shown === undefined ? null : (_jsxs("span", { "data-slot": "metric-delta", className: "text-muted-foreground mt-1 flex items-baseline gap-1 text-sm tabular-nums", children: [shown === 0 ? null : (_jsx("span", { "data-slot": "metric-delta-mark", children: shown > 0 ? RISING : FALLING })), read(shown)] })), _jsx("span", { "data-slot": "metric-label", className: "text-muted-foreground text-sm font-medium", children: label }), hint === undefined ? null : (_jsx("span", { "data-slot": "metric-hint", className: "text-muted-foreground text-xs", children: hint }))] }));
+}
+export { Metric };