@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/list-panel.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { ScrollArea } from './scroll-area.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A titled panel whose body is a scrolling list, with slots above and below it.
+ *
+ * **This is the third thing, and the reason it exists is that the other two were
+ * already taken.** `item.tsx` is a row: media, a name, a description, a value
+ * and trailing controls, with no opinion at all about what encloses it. And
+ * `fact-list.tsx` is a definition list: a term beside its answer, scanned down a
+ * column, short enough that the whole set is meant to be read. Neither is a
+ * container, and a long list needs one. So this is the third thing: a titled,
+ * bounded, scrollable region that gives a long list a place to end. The three
+ * compose, and none of them can be derived from another: rows without a panel is
+ * a page that never ends, and a panel without rows is a frame.
+ *
+ * **A `ListPanel` is not a table, and the difference is the reader's job rather
+ * than the markup's.** A panel holds a list: each row is one thing, read top to
+ * bottom, and the reader is scanning for the one they want. The moment the reader
+ * needs to compare a value in one row against the same value in another, the
+ * content is records with columns, the answer is `table.tsx`, and putting rows in
+ * a panel instead is a table a reader has to read cell by cell because the
+ * semantics are not there. The reverse is equally wrong: a two-column table of
+ * one thing per row, where the second column is a status nobody compares against
+ * anything, is a list that paid for column semantics it does not use.
+ *
+ * **The region is a real `<section>` and it is named by its own title.** Not a
+ * `div`, because a panel of forty rows is a landmark a screen reader user walks
+ * past on the way to something else, and a landmark they cannot name is a
+ * landmark they walk past twice. The name comes from `aria-labelledby` pointing
+ * at the title element rather than from a string prop, so the name a reader hears
+ * and the name a sighted reader reads are the same text by construction and
+ * cannot drift.
+ *
+ * **With no title there is no invented one.** The panel renders a `section` with
+ * no name and says nothing, and `label` is the only way to name it. This is the
+ * one place in this package where a region is allowed to arrive anonymous, and it
+ * is the right answer rather than a gap: a panel named "Panel" is a claim that
+ * is wrong in every consumer's product, and a screen reader user hearing "Panel"
+ * learns less than hearing nothing, because a name is a promise that something
+ * follows it. An anonymous region is honestly absent from the landmark list and
+ * the reader moves on. A caller who wants a name passes one.
+ *
+ * **The scroll is `ScrollArea` and not `overflow: auto`, and that is the whole
+ * reason the body is not written inline.** The browser's scrollbar is the one
+ * control on a page that belongs to no design system: it is a rectangle the
+ * operating system drew, in a colour chosen for the OS's own background rather
+ * than for the card the content is on, and it is the only control that is resized
+ * by dragging and appears on a timer. Composing this panel around `overflow-auto`
+ * would give the reader a Prism surface beside an operating system scrollbar on
+ * every panel in every consumer. The scrolling itself is still the browser's, so
+ * the arrow keys, Page Up, Page Down, Home, End, the scroll position and
+ * scroll-into-view all keep working, and only the bar's appearance is taken over.
+ *
+ * **The bound is on the panel and the body absorbs it.** `maxHeight` is set on
+ * the `section`, which is a flex column, and the body is the flex item that
+ * shrinks, so a list shorter than the bound grows the panel to fit and a list
+ * longer than it scrolls inside what is left after the header and the footer. The
+ * alternative, a `max-height` on the scroll region alone, leaves the region's own
+ * height content-driven and clips the rows without giving the reader anything to
+ * scroll.
+ *
+ * **The title's id is generated, and `useId` is why this module needs no
+ * `'use client'`.** Pointing `aria-labelledby` at an element the Component drew
+ * itself needs an id, and the Component may not invent one by counting: two panels
+ * on a page would both reach for the same first id. `useId` is the one hook React
+ * runs during a server render as well as a client one, so the panel is an ordinary
+ * server Component with the `'use client'` line and the client runtime left off.
+ * What that costs is stated rather than implied: a panel whose body scrolls is in
+ * the client graph anyway, through `ScrollArea`, and a panel with `scroll={false}`
+ * and no caller state of its own ships no JavaScript from this file.
+ *
+ * The four exported parts are the panel's own pieces, and they are exported
+ * rather than kept private for the reason `Card`'s parts are: a caller who wants
+ * the header's geometry inside a `Card` they built, or a footer on a section of
+ * their own, should not have to re-derive `border-b px-4 py-3` to get it. The
+ * `title`, `description`, `count`, `actions` and `footer` props are the shorthand
+ * for the ordinary case, and the two are the same markup.
+ */
+function ListPanel({ title, description, count, actions, footer, children, scroll, maxHeight, label, className, style, ...props }) {
+    const titleId = useId();
+    const named = title !== undefined;
+    const hasHeader = named || description !== undefined || count !== undefined || actions !== undefined;
+    const hasFooter = footer !== undefined && footer !== null && footer !== false;
+    return (_jsxs("section", { "data-slot": "list-panel", "aria-labelledby": named ? titleId : undefined, "aria-label": named ? undefined : label, style: maxHeight === undefined ? style : { maxHeight, ...style }, className: cn('bg-card text-card-foreground flex min-h-0 flex-col overflow-hidden rounded-lg border', className), ...props, children: [hasHeader ? (_jsx(ListPanelHeader, { titleId: titleId, title: title, description: description, count: count, actions: actions })) : null, scroll === false ? (_jsx(ListPanelBody, { label: label, children: children })) : (_jsx(ListPanelBody, { scroll: true, label: label, children: children })), hasFooter ? _jsx(ListPanelFooter, { children: footer }) : null] }));
+}
+/**
+ * The row above a panel's list: the title, its supporting lines, and a toolbar
+ * slot at the trailing edge.
+ *
+ * Rendered by `ListPanel` when any of its four slots is present, and not rendered
+ * at all when none is, because a bordered band with nothing in it is a gap the
+ * reader looks through. The title element is a `span` carrying the id the panel
+ * points `aria-labelledby` at, rather than a heading: a panel's title is not
+ * always the heading of the region it sits in, four panels in a grid are four
+ * titles under one section heading, and four `h3`s under one `h2` is right while
+ * four `h2`s is four sections. A caller who wants a heading there passes an
+ * element as `title` and keeps the name.
+ */
+function ListPanelHeader({ titleId, title, description, count, actions, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "list-panel-header", className: cn('flex items-start justify-between gap-4 border-b px-4 py-3', className), ...props, children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [title === undefined ? null : (_jsx("span", { id: titleId, "data-slot": "list-panel-title", className: "text-sm font-medium", children: title })), description === undefined ? null : (_jsx("span", { "data-slot": "list-panel-description", className: "text-muted-foreground text-sm", children: description })), count === undefined ? null : (_jsx("span", { "data-slot": "list-panel-count", className: "text-muted-foreground text-xs tabular-nums", children: count }))] }), actions === undefined ? null : (_jsx("div", { "data-slot": "list-panel-actions", className: "flex shrink-0 items-center gap-2", children: actions }))] }));
+}
+/**
+ * A panel's body: the list, and the scroll region it scrolls in.
+ *
+ * **The scroll region is `ScrollArea` and the rows are the caller's own element.**
+ * The panel draws the frame and the scrollbar; the caller writes the `ul`, the
+ * `ol` or the table inside it, because the shape of the list is a fact about the
+ * data and a list of records in a `ul` is a different thing from the same records
+ * in a table. That is the same decision `Item` makes about the row, applied one
+ * level up, and it is why this Component takes `children` and no `items`.
+ *
+ * The vertical scrollbar only. A panel scrolls because it is tall, and a panel
+ * whose content is also wider than the panel is a caller who has put a table in
+ * the wrong place: `table.tsx` already owns a horizontal region for exactly that,
+ * and two nested scrollers is a reader with two axes to guess about.
+ */
+function ListPanelBody({ scroll, label, className, children, ...props }) {
+    return (_jsx("div", { "data-slot": "list-panel-body", className: cn('min-w-0 flex-1', 
+        // The two states differ in more than a wrapper. A bounded body clips and
+        // hands the overflow to the scroll region; an unbounded one is allowed to
+        // grow, because the caller has said the list is short.
+        scroll === true ? 'min-h-0 overflow-hidden' : '', className), ...props, children: scroll === true ? (_jsx(ScrollArea, { label: label, orientation: "vertical", className: "h-full", children: children })) : (children) }));
+}
+/**
+ * The band under a panel's list, where the actions that belong to the whole list
+ * sit and where a count that is not the caller's headline number belongs.
+ *
+ * On the muted surface and above a rule rather than on the card, because it is the
+ * one band in the panel that does not scroll: a control the reader has to reach
+ * after scrolling to the end of a long list cannot be in the list. A footer that
+ * scrolls away with the rows is a footer that only exists for a reader who never
+ * needed it.
+ */
+function ListPanelFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "list-panel-footer", className: cn('bg-muted/50 flex items-center gap-3 border-t px-4 py-3 text-sm', className), ...props }));
+}
+export { ListPanel, ListPanelHeader, ListPanelBody, ListPanelFooter };

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 }) {