@nanisoft/prism-ui 0.10.2 → 0.15.0

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

@@ -0,0 +1,193 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the NavigationMenu root 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 NavigationMenuProps extends Omit<ComponentProps<'nav'>, 'defaultValue'> {
+    /**
+     * The accessible name of this region of links.
+     *
+     * Required rather than defaulted, because the root renders a `<nav>`, and a
+     * `<nav>` with no name is a landmark a screen reader announces 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. The name is the caller's word and it is usually the region: primary,
+     * product, footer.
+     */
+    label: string;
+    /** The controlled value of the open group. */
+    value?: string | null;
+    /** The group open initially, for an uncontrolled menu. */
+    defaultValue?: string | null;
+    /** Called when the open group changes. */
+    onValueChange?: (value: string | null) => void;
+    /** Whether the groups stack. @defaultValue horizontal */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * How long the pointer must rest on a trigger before the group opens, in
+     * milliseconds.
+     *
+     * The default is short because this is a menu of links rather than of
+     * previews: the reader is about to take one of these addresses, and a rest
+     * followed by a long wait is a rest they will conclude did nothing.
+     *
+     * @defaultValue 50
+     */
+    delay?: number;
+    /** How long the group stays open after the pointer leaves it, in milliseconds. @defaultValue 50 */
+    closeDelay?: number;
+}
+/** The props NavigationMenuList forwards to Base UI. */
+export interface NavigationMenuListProps extends ComponentProps<'ul'> {
+}
+/**
+ * The props NavigationMenuItem 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 NavigationMenuItemProps extends ComponentProps<'li'> {
+    /** The value this item contributes to the root, and the value its trigger opens. */
+    value: string;
+}
+/** The props NavigationMenuTrigger forwards to Base UI. */
+export interface NavigationMenuTriggerProps extends ComponentProps<'button'> {
+}
+/** The props NavigationMenuContent forwards to Base UI. */
+export interface NavigationMenuContentProps extends ComponentProps<'div'> {
+    /**
+     * Whether the closed group stays in the DOM.
+     *
+     * A navigation menu is the one overlay here a crawler reads. Every other
+     * popup is unmounted when closed, and that is right for them, but a closed
+     * navigation group holding the links of a site header is the only place a
+     * reader, a crawler and a reader with JavaScript off all see the same set of
+     * addresses, so a consumer who needs the header to read the same either way
+     * turns this on and owns the layout shift that follows.
+     *
+     * @defaultValue false
+     */
+    keepMounted?: boolean;
+}
+/**
+ * The props NavigationMenuLink 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 NavigationMenuLinkProps extends ComponentProps<'a'> {
+    /**
+     * Whether this link is the page the reader is on.
+     *
+     * Required, and required for a reason a colour cannot express: a navigation
+     * menu that does not say where the reader is has made them guess. It is
+     * rendered as `aria-current="page"` rather than as a fill, so a reader who
+     * cannot distinguish the active colour still knows they are in the right
+     * place, and so the marking survives a theme change.
+     */
+    active?: boolean;
+    /** Whether taking the link closes the group. @defaultValue false */
+    closeOnClick?: boolean;
+}
+/** The props NavigationMenuIcon forwards to Base UI. */
+export interface NavigationMenuIconProps extends ComponentProps<'span'> {
+}
+/**
+ * The props NavigationMenuPortal forward 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 NavigationMenuPortalProps extends ComponentProps<'div'> {
+}
+/** The props NavigationMenuPositioner forwards to Base UI. */
+export interface NavigationMenuPositionerProps extends ComponentProps<'div'> {
+    /** The distance in pixels between the trigger and the group. @defaultValue 8 */
+    sideOffset?: number;
+    /** The offset in pixels along the alignment axis. @defaultValue 0 */
+    alignOffset?: number;
+}
+/** The props NavigationMenuPopup forwards to Base UI. */
+export interface NavigationMenuPopupProps extends ComponentProps<'nav'> {
+}
+/** The props NavigationMenuViewport forwards to Base UI. */
+export interface NavigationMenuViewportProps extends ComponentProps<'div'> {
+}
+/** The props NavigationMenuBackdrop forwards to Base UI. */
+export interface NavigationMenuBackdropProps extends ComponentProps<'div'> {
+}
+/**
+ * A list of links with groups that expand and collapse.
+ *
+ * **It knows it holds links, and that is what every part is for.** A link can be
+ * opened in a new tab, copied by address, middle-clicked and crawled; a command
+ * cannot do any of those, and a menu that renders a command where a reader
+ * expected a destination gives them a middle-click that does nothing. So
+ * `NavigationMenuLink` is the only interactive leaf here and it is a native
+ * anchor, there is no command part to reach for by mistake, and a caller who
+ * wants commands in a header is using a Menubar or a DropdownMenu instead.
+ * `active` is a required prop on the link because a navigation menu that does
+ * not say where the reader is has made them guess.
+ *
+ * **A closed group shows nothing, and that is deliberate.** The list is a
+ * `<ul>` of triggers, and the links live in a group that is only in the document
+ * while it is open. A reader with JavaScript off, and a crawler, therefore see
+ * the triggers and nothing else, which is why `NavigationMenuContent` takes
+ * `keepMounted` for the consumer who needs the header to read the same either
+ * way and owns the layout shift that follows. Do not put a destination only in
+ * a closed group.
+ *
+ * The bar is one Tab stop: Tab moves through the triggers and into the open
+ * group, Escape closes the group and returns focus to the trigger that opened
+ * it. Use a Menubar for an application window's commands and a DropdownMenu for
+ * a menu attached to one control.
+ */
+declare function NavigationMenu({ className, label, orientation, ...props }: NavigationMenuProps): import("react").JSX.Element;
+/** The row of group triggers. */
+declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+/** One group: a trigger and the links it opens. */
+declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+/**
+ * The control that opens a group, and the only Tab stop for it.
+ *
+ * It is a real button and it owns the expanded state, so a reader knows the
+ * group is open before they enter it. The chevron rotates on the open state
+ * rather than on a timer, which is the only motion here: something happened and
+ * the reader can see that it did.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. The groups sit beside
+ * each other along the list with a `gap-1`, so a band on one trigger is a press aimed
+ * at its neighbour, which is condition 1 of the three in `DESIGN.md` failing. The cost
+ * is that the bar is 44 tall on touch rather than 36, and a navigation bar that a
+ * finger has to hit is the last thing that should still be 36. See The coarse-pointer
+ * floor.
+ */
+declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+/** The group of links a trigger opens. */
+declare function NavigationMenuContent({ className, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+/**
+ * One destination, rendered as a native anchor.
+ *
+ * This is the only interactive leaf the Component ships, and the reason is the
+ * difference between a link and a command: a link carries an address, so the
+ * browser can open it in a new tab, copy it, and a crawler can follow it. A
+ * command has none of those, and a header that renders commands where a reader
+ * expected destinations is a header whose links cannot be shared.
+ */
+declare function NavigationMenuLink({ className, active, ...props }: NavigationMenuLinkProps): import("react").JSX.Element;
+/** The chevron slot, so a caller can put their own mark beside a trigger's words. */
+declare function NavigationMenuIcon({ className, ...props }: NavigationMenuIconProps): import("react").JSX.Element;
+/** The portal the open group is rendered into. */
+declare function NavigationMenuPortal({ ...props }: NavigationMenuPortalProps): import("react").JSX.Element;
+/** The positioned wrapper around the open group. */
+declare function NavigationMenuPositioner({ className, sideOffset, alignOffset, ...props }: NavigationMenuPositionerProps): import("react").JSX.Element;
+/** The surface the open group sits on. */
+declare function NavigationMenuPopup({ className, ...props }: NavigationMenuPopupProps): import("react").JSX.Element;
+/** The area one group's content is measured and animated in. */
+declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
+/** The scrim behind an open group, so the page behind does not read as live. */
+declare function NavigationMenuBackdrop({ className, ...props }: NavigationMenuBackdropProps): import("react").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIcon, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuBackdrop, };
+//# sourceMappingURL=navigation-menu.d.ts.map

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

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

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

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * A list of links with groups that expand and collapse.
+ *
+ * **It knows it holds links, and that is what every part is for.** A link can be
+ * opened in a new tab, copied by address, middle-clicked and crawled; a command
+ * cannot do any of those, and a menu that renders a command where a reader
+ * expected a destination gives them a middle-click that does nothing. So
+ * `NavigationMenuLink` is the only interactive leaf here and it is a native
+ * anchor, there is no command part to reach for by mistake, and a caller who
+ * wants commands in a header is using a Menubar or a DropdownMenu instead.
+ * `active` is a required prop on the link because a navigation menu that does
+ * not say where the reader is has made them guess.
+ *
+ * **A closed group shows nothing, and that is deliberate.** The list is a
+ * `<ul>` of triggers, and the links live in a group that is only in the document
+ * while it is open. A reader with JavaScript off, and a crawler, therefore see
+ * the triggers and nothing else, which is why `NavigationMenuContent` takes
+ * `keepMounted` for the consumer who needs the header to read the same either
+ * way and owns the layout shift that follows. Do not put a destination only in
+ * a closed group.
+ *
+ * The bar is one Tab stop: Tab moves through the triggers and into the open
+ * group, Escape closes the group and returns focus to the trigger that opened
+ * it. Use a Menubar for an application window's commands and a DropdownMenu for
+ * a menu attached to one control.
+ */
+function NavigationMenu({ className, label, orientation = 'horizontal', ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "aria-label": label, orientation: orientation, className: cn('relative flex max-w-max flex-1 items-center justify-center', 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', className), ...props }));
+}
+/** The row of group triggers. */
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('flex flex-1 list-none items-center gap-1', 'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', className), ...props }));
+}
+/** One group: a trigger and the links it opens. */
+function NavigationMenuItem({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props }));
+}
+/**
+ * The control that opens a group, and the only Tab stop for it.
+ *
+ * It is a real button and it owns the expanded state, so a reader knows the
+ * group is open before they enter it. The chevron rotates on the open state
+ * rather than on a timer, which is the only motion here: something happened and
+ * the reader can see that it did.
+ *
+ * `pointer-coarse:h-11` is the coarse-pointer floor, as a step. The groups sit beside
+ * each other along the list with a `gap-1`, so a band on one trigger is a press aimed
+ * at its neighbour, which is condition 1 of the three in `DESIGN.md` failing. The cost
+ * is that the bar is 44 tall on touch rather than 36, and a navigation bar that a
+ * finger has to hit is the last thing that should still be 36. See The coarse-pointer
+ * floor.
+ */
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn('text-foreground group inline-flex h-9 items-center gap-1.5 rounded-md 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/60 data-[popup-open]:text-accent-foreground', 'pointer-coarse:h-11', className), ...props, children: [children, _jsx(NavigationMenuIcon, { children: _jsx(ChevronDownIcon, { className: "size-4 transition-transform duration-base ease-out group-data-[popup-open]:rotate-180" }) })] }));
+}
+/** The group of links a trigger opens. */
+function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('p-2', className), ...props }));
+}
+/**
+ * One destination, rendered as a native anchor.
+ *
+ * This is the only interactive leaf the Component ships, and the reason is the
+ * difference between a link and a command: a link carries an address, so the
+ * browser can open it in a new tab, copy it, and a crawler can follow it. A
+ * command has none of those, and a header that renders commands where a reader
+ * expected destinations is a header whose links cannot be shared.
+ */
+function NavigationMenuLink({ className, active, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", active: active, className: cn('hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring focus-visible:ring-[3px] block rounded-md px-3 py-2 text-sm outline-none', 'transition-[color,background-color,box-shadow] duration-fast ease-out', 'data-[active]:bg-accent data-[active]:text-accent-foreground data-[active]:font-medium', className), ...props }));
+}
+/** The chevron slot, so a caller can put their own mark beside a trigger's words. */
+function NavigationMenuIcon({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Icon, { "data-slot": "navigation-menu-icon", className: cn('flex size-4 items-center justify-center', className), ...props }));
+}
+/** The portal the open group is rendered into. */
+function NavigationMenuPortal({ ...props }) {
+    return _jsx(NavigationMenuPrimitive.Portal, { ...props });
+}
+/** The positioned wrapper around the open group. */
+function NavigationMenuPositioner({ className, sideOffset = 8, alignOffset = 0, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Positioner, { "data-slot": "navigation-menu-positioner", sideOffset: sideOffset, alignOffset: alignOffset, className: cn('z-50', className), ...props }));
+}
+/** The surface the open group sits on. */
+function NavigationMenuPopup({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Popup, { "data-slot": "navigation-menu-popup", className: cn('bg-popover text-popover-foreground origin-(--transform-origin) rounded-lg border p-2 shadow-md outline-none', 'transition-[opacity,transform] duration-base 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', className), ...props }));
+}
+/** The area one group's content is measured and animated in. */
+function NavigationMenuViewport({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('relative h-full w-full overflow-hidden', className), ...props }));
+}
+/** The scrim behind an open group, so the page behind does not read as live. */
+function NavigationMenuBackdrop({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Backdrop, { "data-slot": "navigation-menu-backdrop", className: cn('fixed inset-0 z-40 bg-background/40 transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', className), ...props }));
+}
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuIcon, NavigationMenuPortal, NavigationMenuPositioner, NavigationMenuPopup, NavigationMenuViewport, NavigationMenuBackdrop, };

package/dist/components/ui/nested-tabs.d.ts

@@ -0,0 +1,188 @@
+/**
+ * One panel on the inner axis of a section, and the panel it holds.
+ *
+ * The axis is nested rather than parallel because the inner axis belongs to the
+ * section it sits in: a reader who has chosen a section and then an inner panel is
+ * in one place, and the two are announced as two axes inside it rather than as two
+ * sets of tabs on a page.
+ */
+export type NestedTabPanel = {
+    /** The panel's stable key. */
+    value: string;
+    /** The tab's visible name. */
+    label: React.ReactNode;
+    /** The panel's own content. */
+    content?: React.ReactNode;
+};
+/**
+ * One section on the outer axis, and the inner axis inside it.
+ *
+ * `panels` is required and may be empty, because a section with no inner axis is a
+ * real shape: it is a page-level switch between subjects where one of them has
+ * nothing to subdivide, and a type that required an inner axis would force that
+ * caller to invent one. An empty `panels` draws the section as a plain panel and no
+ * inner tab list at all, which is the honest drawing rather than an empty strip of
+ * tabs.
+ */
+export type NestedTabSection = {
+    /** The section's stable key. */
+    value: string;
+    /** The tab's visible name. */
+    label: React.ReactNode;
+    /** One line under the section's name, for a reader who has arrived at it. */
+    description?: React.ReactNode;
+    /** The inner axis, in the order a reader should meet it. */
+    panels?: readonly NestedTabPanel[];
+    /**
+     * The inner panel shown when the reader first arrives at this section.
+     *
+     * Optional and defaulted to the first panel rather than required, because the
+     * ordinary case is the first panel and a caller who has to write it is a caller
+     * writing the same value twice. The cost of the default is that a caller who
+     * reorders `panels` has changed what a reader sees on arrival, which is the same
+     * property `Tabs` has and is not this Component's to fix.
+     */
+    defaultPanel?: string;
+};
+/**
+ * The props a NestedTabs accepts.
+ *
+ * Two axes, two controlled values and two callbacks, and no state of its own beyond
+ * what it has to hold to make the two agree. The reason there is no combined value
+ * is that the two axes change for different reasons and at different times: a reader
+ * who changes the inner panel has not chosen a different section, and a Component
+ * that reported the pair as one thing would call that a section change and reset a
+ * rail for a reader who only moved a tab.
+ */
+export interface NestedTabsProps {
+    /**
+     * The sections, in the order a reader should meet them.
+     *
+     * Required, and the order is a claim rather than a layout: these are peer views of
+     * one subject, which is what makes them tabs and not steps. A caller with a
+     * *sequence* here wants `Tabs` for a single axis and `FormWizard` for the other,
+     * and a nested tab list whose sections must be visited in order is a wizard with
+     * the gating left out.
+     */
+    sections: readonly NestedTabSection[];
+    /**
+     * The section being shown.
+     *
+     * Controlled and required rather than defaulted, for the reason every axis in this
+     * package is: the caller owns where the reader is, because the caller's own
+     * navigation, its address and its analytics all need to know, and a Component that
+     * kept its own copy would be a second source of truth about a position.
+     */
+    value: string;
+    /** Called when the reader moves to another section. */
+    onValueChange: (value: string) => void;
+    /**
+     * The inner panel being shown, within the current section.
+     *
+     * Controlled and required on the same terms as `value`, and required even though a
+     * section may have no panels because the answer has to be about the section the
+     * reader is in rather than about the page: a single `panel` prop that the
+     * Component reset whenever the section changed would silently discard a reader's
+     * choice of inner panel every time they came back to a section, and a control that
+     * forgets is worse than one that never offered the choice. Pass the current
+     * section's `defaultPanel` when the caller has none.
+     */
+    panel: string;
+    /** Called when the reader moves to another inner panel. */
+    onPanelChange: (value: string) => void;
+    /**
+     * The accessible name of the outer axis.
+     *
+     * Required, and the subject's noun rather than this Component's: a page with two
+     * nested tab sets is a page where a reader cannot tell which one they are in, and
+     * a tab list with no name is announced as "tab list" and nothing else.
+     */
+    label: string;
+    /**
+     * The accessible name of the inner axis.
+     *
+     * Required, and required even where a section has no panels, because the name is
+     * the difference between a reader being told "General, tab 1 of 3" and being told
+     * "tab 1 of 3". The word is the caller's, and it is usually the section's own noun
+     * followed by what the axis divides: "Deployment, files".
+     */
+    panelLabel: string;
+    /**
+     * The words shown where a section's inner axis would be, for a section that has
+     * no panels.
+     *
+     * Optional rather than required, because a section with no inner axis draws its own
+     * content and a section that needs a line saying so passes one; the omission is
+     * not a gap, it is the section having nothing to say.
+     */
+    fallback?: React.ReactNode;
+    /** Layout only. Changing a Prism-owned visual property from here is prohibited. */
+    className?: string;
+}
+/**
+ * Two tab axes, one inside the other, with a roving tab stop each.
+ *
+ * **The whole cost of this Component is two tab stops that look like one.** Both
+ * axes draw `TabsList`, both are a single Tab stop, both respond to the arrow keys,
+ * and they sit on the same screen a few centimetres apart. A reader who tabs onto
+ * the outer axis, presses the down arrow and lands in what looks like the same kind
+ * of control has to work out from the announcement which axis they are on, and there
+ * is no visual cue that tells them: two identically drawn tab lists are two
+ * identically drawn tab lists. So both axes are named, and the names are the whole
+ * mitigation. That is an honest cost rather than a solved problem, and a caller who
+ * finds it confusing in a particular page is being told the truth about their page,
+ * not about this Component.
+ *
+ * **The inner axis moves; the outer axis does not. That is the rule everything else
+ * follows from.** Changing the inner panel is a reader refining what they are
+ * looking at within a subject they have already chosen, so the outer value is
+ * untouched: no callback fires, no rail moves, and a reader who is on "Deployment,
+ * files" and switches to "logs" is still on Deployment. The alternative, where the
+ * outer axis follows the inner one, is what a naive composition of two `Tabs` roots
+ * produces when a caller puts the inner list outside the outer panel, and it is
+ * wrong in a way a reader cannot correct: the section they are in changes under
+ * them, so the panel they chose is no longer the panel they are reading.
+ *
+ * **Coming back to a section restores the panel they were on, and that is why
+ * `panel` is a single controlled value rather than one per section.** A Component
+ * that remembered a panel per section would need a record keyed by section, which is
+ * a second piece of state the caller cannot see and cannot put in an address. Here
+ * the caller holds one `panel` value and it survives a trip to another section and
+ * back, because nothing in this module resets it. The cost is real and stated: if
+ * the caller changes `panel` while the reader is on a different section, the value
+ * belongs to the section they are on and not the one they left, so a caller driving
+ * both axes from one store has to keep them in step. That is one value they already
+ * hold, not a new one.
+ *
+ * **A section with no panels draws no inner axis at all.** An empty tab list is a
+ * row of nothing that a reader tabs onto and cannot move within, and a section whose
+ * content does not subdivide should look like a section that does not subdivide.
+ * `panels` is therefore optional and an empty array is a real shape, which is the
+ * reason this is not a type that requires at least one panel: a caller with one
+ * subject that happens to have no sub-views would otherwise invent a panel to
+ * satisfy it.
+ *
+ * **`Tabs` is composed twice and redrawn nowhere.** Both axes are the same
+ * Component with the same keyboard model, the same roving tab stop and the same
+ * announcement behaviour, and a second implementation of a tab axis inside this
+ * module would be a third place for the same rule to disagree in. The composition is
+ * the outer `Tabs` with the inner one inside its panel, so the inner axis inherits
+ * the outer one's DOM position and the two nest the way the reader's understanding
+ * nests.
+ *
+ * **The two axes are announced as two axes, which is the accessibility half of the
+ * cost above.** `label` names the outer list and `panelLabel` names the inner one,
+ * both through `aria-label` on each `TabsList`, so the reader is told which axis
+ * every arrow key and every Tab is currently about. That is the mitigation and it is
+ * a mitigation rather than a fix: two names in sequence do not make two identical
+ * shapes distinguishable at a glance for a reader scanning rather than listening.
+ *
+ * **It is a client Component**, because both axes move 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 one section with its panel
+ * already chosen, and what it may not do is let the reader move on either axis.
+ */
+declare function NestedTabs({ sections, value, onValueChange, panel, onPanelChange, label, panelLabel, fallback, className, }: NestedTabsProps): import("react").JSX.Element;
+export { NestedTabs };
+//# sourceMappingURL=nested-tabs.d.ts.map

package/dist/components/ui/nested-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nested-tabs.d.ts","sourceRoot":"","sources":["../../../src/components/ui/nested-tabs.tsx"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,cAAc,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACrC;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,2DAA2D;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,iBAAS,UAAU,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,aAAa,EACb,KAAK,EACL,aAAa,EACb,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GACV,EAAE,eAAe,+BAsEjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/nested-tabs.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * Two tab axes, one inside the other, with a roving tab stop each.
+ *
+ * **The whole cost of this Component is two tab stops that look like one.** Both
+ * axes draw `TabsList`, both are a single Tab stop, both respond to the arrow keys,
+ * and they sit on the same screen a few centimetres apart. A reader who tabs onto
+ * the outer axis, presses the down arrow and lands in what looks like the same kind
+ * of control has to work out from the announcement which axis they are on, and there
+ * is no visual cue that tells them: two identically drawn tab lists are two
+ * identically drawn tab lists. So both axes are named, and the names are the whole
+ * mitigation. That is an honest cost rather than a solved problem, and a caller who
+ * finds it confusing in a particular page is being told the truth about their page,
+ * not about this Component.
+ *
+ * **The inner axis moves; the outer axis does not. That is the rule everything else
+ * follows from.** Changing the inner panel is a reader refining what they are
+ * looking at within a subject they have already chosen, so the outer value is
+ * untouched: no callback fires, no rail moves, and a reader who is on "Deployment,
+ * files" and switches to "logs" is still on Deployment. The alternative, where the
+ * outer axis follows the inner one, is what a naive composition of two `Tabs` roots
+ * produces when a caller puts the inner list outside the outer panel, and it is
+ * wrong in a way a reader cannot correct: the section they are in changes under
+ * them, so the panel they chose is no longer the panel they are reading.
+ *
+ * **Coming back to a section restores the panel they were on, and that is why
+ * `panel` is a single controlled value rather than one per section.** A Component
+ * that remembered a panel per section would need a record keyed by section, which is
+ * a second piece of state the caller cannot see and cannot put in an address. Here
+ * the caller holds one `panel` value and it survives a trip to another section and
+ * back, because nothing in this module resets it. The cost is real and stated: if
+ * the caller changes `panel` while the reader is on a different section, the value
+ * belongs to the section they are on and not the one they left, so a caller driving
+ * both axes from one store has to keep them in step. That is one value they already
+ * hold, not a new one.
+ *
+ * **A section with no panels draws no inner axis at all.** An empty tab list is a
+ * row of nothing that a reader tabs onto and cannot move within, and a section whose
+ * content does not subdivide should look like a section that does not subdivide.
+ * `panels` is therefore optional and an empty array is a real shape, which is the
+ * reason this is not a type that requires at least one panel: a caller with one
+ * subject that happens to have no sub-views would otherwise invent a panel to
+ * satisfy it.
+ *
+ * **`Tabs` is composed twice and redrawn nowhere.** Both axes are the same
+ * Component with the same keyboard model, the same roving tab stop and the same
+ * announcement behaviour, and a second implementation of a tab axis inside this
+ * module would be a third place for the same rule to disagree in. The composition is
+ * the outer `Tabs` with the inner one inside its panel, so the inner axis inherits
+ * the outer one's DOM position and the two nest the way the reader's understanding
+ * nests.
+ *
+ * **The two axes are announced as two axes, which is the accessibility half of the
+ * cost above.** `label` names the outer list and `panelLabel` names the inner one,
+ * both through `aria-label` on each `TabsList`, so the reader is told which axis
+ * every arrow key and every Tab is currently about. That is the mitigation and it is
+ * a mitigation rather than a fix: two names in sequence do not make two identical
+ * shapes distinguishable at a glance for a reader scanning rather than listening.
+ *
+ * **It is a client Component**, because both axes move 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 one section with its panel
+ * already chosen, and what it may not do is let the reader move on either axis.
+ */
+function NestedTabs({ sections, value, onValueChange, panel, onPanelChange, label, panelLabel, fallback, className, }) {
+    const section = sections.find((candidate) => candidate.value === value) ?? sections[0];
+    const panels = section?.panels ?? [];
+    const active = panels.some((candidate) => candidate.value === panel) ? panel : undefined;
+    return (_jsx("div", { "data-slot": "nested-tabs", className: cn('flex w-full flex-col gap-4', className), children: _jsxs(Tabs, { value: section?.value, onValueChange: onValueChange, className: "w-full", children: [_jsx(TabsList, { "aria-label": label, children: sections.map((candidate) => (_jsx(TabsTrigger, { value: candidate.value, children: candidate.label }, candidate.value))) }), sections.map((candidate) => (_jsx(TabsContent, { value: candidate.value, children: _jsxs("div", { "data-slot": "nested-tabs-section", className: "flex flex-col gap-4 pt-2", children: [candidate.description === undefined ? null : (_jsx("p", { "data-slot": "nested-tabs-description", className: "text-muted-foreground text-sm", children: candidate.description })), panels.length === 0 ? (fallback) : (_jsxs(Tabs, { value: active ?? candidate.defaultPanel ?? panels[0]?.value, onValueChange: onPanelChange, className: "w-full", children: [_jsx(TabsList, { "aria-label": panelLabel, className: "max-w-full overflow-x-auto", children: panels.map((inner) => (_jsx(TabsTrigger, { value: inner.value, children: inner.label }, inner.value))) }), panels.map((inner) => (_jsx(TabsContent, { value: inner.value, children: inner.content }, inner.value)))] }))] }) }, candidate.value)))] }) }));
+}
+export { NestedTabs };