@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/overlays/menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlays/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/overlays/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlays/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/overlays/menu/menu.module.css

@@ -0,0 +1,268 @@
+/*
+ * Menu (§9.7), shared by Context Menu and the Menubar's menus. CVA
+ * functions `menu` (the popup) and `menuItem` (an item) in Menu.tsx.
+ * Parts: positioner (the layer), base (the popup), item, itemIcon (the
+ * --size-px-5 leading slot), itemLabel, checkGlyph (✓ or ●), dangerGlyph
+ * (◆ with ×), shortcut, submenuChevron, groupLabel, separator.
+ *
+ * The §9.1 overlay panel: the `white` scope's --primary1 face, a
+ * --border-size-2 --primary12 edge in both modes, never --role-rule
+ * [D92, D156], --radius-2-25, --size-px-1 padding, no shadow or backdrop.
+ * The list highlight is --primary4 plus a --border-size-2-25 start-edge bar in
+ * --primary12 (a destructive item: the danger fill, its label and bar
+ * --role-danger-label [D192]); a checked option is a leading ✓ or ● and --font-weight-6,
+ * with no fill and no bar [D145]. Motion is the outline morph (a Menu's
+ * popup answers `data-outline-morph` while it draws its frame) [D204] or
+ * none: the popup opens and closes at once [D205].
+ * Colors are role variables only; local custom properties carry
+ * dimensions only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.shortcut {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  .positioner {
+    z-index: var(--layer-3);
+  }
+
+  /* 200 px to --size-px-14, at least the trigger's width, at most the viewport less its margins. */
+  .base {
+    --menu-item-radius: calc(var(--radius-2-25) - var(--size-px-1));
+
+    box-sizing: border-box;
+    min-inline-size: min(
+      max(var(--fgd-size-menu-min), var(--anchor-width, 0px)),
+      calc(100vw - 2 * var(--fgd-space-margin))
+    );
+    max-inline-size: min(var(--size-px-14), calc(100vw - 2 * var(--fgd-space-margin)));
+    max-block-size: var(--available-height);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--size-px-1);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-2-25);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+  }
+
+  /* A row: --fgd-size-hit tall at every breakpoint, --size-px-2-5 padding. */
+  .item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--fgd-size-hit);
+    padding-inline: var(--size-px-2-5);
+    border-radius: var(--menu-item-radius);
+    color: var(--primary12);
+    cursor: default;
+    user-select: none;
+    /* The highlight is the indicator inside the popup, not a ring (§9.7). */
+    outline: none;
+  }
+
+  /* The start-edge bar: a border, so it survives forced colors. Shown by the highlight. */
+  .item::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    display: none;
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+    border-start-start-radius: var(--menu-item-radius);
+    border-end-start-radius: var(--menu-item-radius);
+  }
+
+  /* The leading slot: glyph, ✓, ● or the danger glyph, at the inline tier. */
+  .itemIcon {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--size-px-5);
+    block-size: var(--size-px-5);
+  }
+
+  .itemLabel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .checkGlyph {
+    display: inline-flex;
+    color: var(--primary12);
+  }
+
+  /* ◆ with its inner × at the inline tier; the knockout takes the face [D58]. */
+  .dangerGlyph {
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    fill: var(--primary1);
+    stroke: var(--primary1);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Shortcut: mono, end-aligned (P4). */
+  .shortcut {
+    flex: none;
+    margin-inline-start: auto;
+    padding-inline-start: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  .submenuChevron {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  .groupLabel {
+    display: flex;
+    align-items: center;
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-2-5);
+    color: var(--role-muted);
+  }
+
+  /* Full width across the popup's padding, --size-px-1 above and below. */
+  .separator {
+    margin-block: var(--size-px-1);
+    margin-inline: calc(-1 * var(--size-px-1));
+    border: 0;
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  @media (forced-colors: active) {
+    .dangerGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Destructive: the danger glyph in --secondary11 of the item's danger
+   * scale [D129] and the label in --role-danger-text (--red11 on the white
+   * face: 5.11:1 light, 8.92:1 dark) [D192].
+   */
+  .destructive .itemIcon {
+    color: var(--secondary11);
+  }
+
+  .destructive .itemLabel {
+    color: var(--role-danger-text);
+  }
+}
+
+@layer states {
+  /*
+   * Outline morph [D204] (Menu's `morph`, the default): while the overlay
+   * draws the frame, the popup's own edge takes its face. Without the morph
+   * (hover opens, submenus, context menus, `morph={false}`) the popup opens
+   * and closes at once [D205].
+   */
+  .base[data-outline-morph] {
+    border-color: var(--primary1);
+    transition: none;
+  }
+
+  /* Highlight (pointer or keyboard) and an open submenu's trigger: the soft fill plus the bar [D145]. */
+  .item[data-highlighted],
+  .item[data-popup-open] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before,
+  .item[data-popup-open]::before {
+    display: block;
+  }
+
+  /*
+   * A destructive item's highlight: the danger fill with --role-danger-label
+   * (5.11:1 light, 4.75:1 dark) for the label, the glyph and the bar; the
+   * glyph's knockout takes the fill [D192].
+   */
+  .destructive[data-highlighted] {
+    background-color: var(--role-danger);
+    color: var(--role-danger-label);
+  }
+
+  .destructive[data-highlighted]::before {
+    border-inline-start-color: var(--role-danger-label);
+  }
+
+  .destructive[data-highlighted] .itemIcon,
+  .destructive[data-highlighted] .itemLabel {
+    color: var(--role-danger-label);
+  }
+
+  .destructive[data-highlighted] .dangerGlyph {
+    fill: var(--role-danger);
+    stroke: var(--role-danger);
+  }
+
+  /* Checked: the leading glyph and --font-weight-6; no fill, no bar. */
+  .item[data-checked] .itemLabel {
+    font-weight: var(--font-weight-6);
+  }
+
+  /* Disabled: --role-muted throughout and no highlight; still announced. Declared last to win. */
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  .item[data-disabled] .itemIcon,
+  .item[data-disabled] .itemLabel,
+  .item[data-disabled] .checkGlyph {
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled] .dangerGlyph {
+    fill: var(--primary1);
+    stroke: var(--primary1);
+  }
+
+  /* Forced colors: the knockout stays the system Canvas, as at rest. */
+  @media (forced-colors: active) {
+    .destructive[data-highlighted] .dangerGlyph,
+    .item[data-disabled] .dangerGlyph {
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden; the state a menu sets prints as a caption (§9.1). */
+    .positioner,
+    .base {
+      display: none;
+    }
+  }
+}

package/overlays/menu/morph.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import type { OutlineMorphRefs } from '../../foundations/outline-morph';
+/** The nearest menu's morph refs, or `null` (no morph: a submenu, a context menu, `morph={false}`). */
+export declare const MenuMorphContext: React.Context<OutlineMorphRefs | null>;
+/**
+ * Set by the Menubar around its menus: switching between them (hover, the
+ * arrow keys, focus) is instant, as Base UI makes it, so only a press opens
+ * with the morph and only Escape, a choice or an outside press closes with it.
+ */
+export declare const MenubarMorphContext: React.Context<boolean>;
+/** Open changes that switch between a menubar's menus: Base UI's instant `group` reasons. */
+export declare const MENUBAR_SWITCH_REASONS: ReadonlySet<string>;
+/** Base UI's Menu.Trigger, wired as the nearest menu's morph source. */
+export declare function MenuMorphTrigger(props: BaseMenu.Trigger.Props): React.JSX.Element;
+//# sourceMappingURL=morph.d.ts.map

package/overlays/menu/morph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph.d.ts","sourceRoot":"","sources":["../../src/overlays/menu/morph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AAYvE,uGAAuG;AACvG,eAAO,MAAM,gBAAgB,wCAAqD,CAAA;AAElF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,wBAA6B,CAAA;AAE7D,6FAA6F;AAC7F,eAAO,MAAM,sBAAsB,EAAE,WAAW,CAAC,MAAM,CAMrD,CAAA;AAEF,wEAAwE;AACxE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,qBAK7D"}

package/overlays/menu/morph.js

@@ -0,0 +1,36 @@
+'use client';
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { useMergedRef } from '../../utils/assignRef';
+/*
+ * Internal: the outline morph's wiring through a menu's parts [D204]. Not
+ * exported from the Menu index. `Menu` provides the refs; the trigger
+ * (`MenuMorphTrigger`, behind MenuTrigger, the Menubar's triggers and the
+ * Code Block's ⋮) takes the source ref, and the popup build
+ * (`MenuPopupFrame`) takes the target ref and renders the frame. A
+ * `MenuSubmenu` provides `null`, so a submenu keeps its own reveal.
+ */
+/** The nearest menu's morph refs, or `null` (no morph: a submenu, a context menu, `morph={false}`). */
+export const MenuMorphContext = React.createContext(null);
+/**
+ * Set by the Menubar around its menus: switching between them (hover, the
+ * arrow keys, focus) is instant, as Base UI makes it, so only a press opens
+ * with the morph and only Escape, a choice or an outside press closes with it.
+ */
+export const MenubarMorphContext = React.createContext(false);
+/** Open changes that switch between a menubar's menus: Base UI's instant `group` reasons. */
+export const MENUBAR_SWITCH_REASONS = new Set([
+    'trigger-hover',
+    'trigger-focus',
+    'focus-out',
+    'list-navigation',
+    'sibling-open',
+]);
+/** Base UI's Menu.Trigger, wired as the nearest menu's morph source. */
+export function MenuMorphTrigger(props) {
+    const { ref, ...rest } = props;
+    const morph = React.useContext(MenuMorphContext);
+    const mergedRef = useMergedRef(ref, morph?.sourceRef);
+    return React.createElement(BaseMenu.Trigger, { ...rest, ref: mergedRef });
+}
+//# sourceMappingURL=morph.js.map

package/overlays/menu/morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"morph.js","sourceRoot":"","sources":["../../src/overlays/menu/morph.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD;;;;;;;GAOG;AAEH,uGAAuG;AACvG,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI,CAAC,CAAA;AAElF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AAE7D,6FAA6F;AAC7F,MAAM,CAAC,MAAM,sBAAsB,GAAwB,IAAI,GAAG,CAAC;IACjE,eAAe;IACf,eAAe;IACf,WAAW;IACX,iBAAiB;IACjB,cAAc;CACf,CAAC,CAAA;AAEF,wEAAwE;AACxE,MAAM,UAAU,gBAAgB,CAAC,KAA6B;IAC5D,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAChD,MAAM,SAAS,GAAG,YAAY,CAAoB,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IACxE,OAAO,oBAAC,QAAQ,CAAC,OAAO,OAAK,IAAI,EAAE,GAAG,EAAE,SAAS,GAAI,CAAA;AACvD,CAAC"}

package/overlays/menu/popup.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { type VariantProps } from 'class-variance-authority';
+/** Menu classes (§9.7): the popup. Shared by Context Menu and Menubar. */
+export declare const menu: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MenuVariants = VariantProps<typeof menu>;
+type PositionerProps = BaseMenu.Positioner.Props;
+/** Props for a menu popup: Base UI Menu.Popup props plus placement, color axes and portal options. */
+export type MenuPopupProps = BaseMenu.Popup.Props & {
+    /**
+     * Primary Radix scale inside the popup's `white` scope. Omitted, the
+     * white preset's default: the popup never takes the trigger's scales [D133].
+     */
+    primary?: MenuVariants['primary'];
+    /** Secondary Radix scale inside the popup. It drives nothing but a destructive item's fallback. */
+    secondary?: MenuVariants['secondary'];
+    /** Side of the trigger. Default `bottom` for a menu, the end side for a submenu. */
+    side?: PositionerProps['side'];
+    /** Alignment to the trigger. Default `start`. */
+    align?: PositionerProps['align'];
+    /** Distance from the trigger in px. Default 8 (`--size-px-2`). */
+    sideOffset?: PositionerProps['sideOffset'];
+    /** Offset along the alignment axis in px. */
+    alignOffset?: PositionerProps['alignOffset'];
+    /** Clearance from the viewport edge in px before the popup shifts or flips. Default 16. */
+    collisionPadding?: PositionerProps['collisionPadding'];
+    /** The element the portal renders into. Default: `document.body`. */
+    container?: BaseMenu.Portal.Props['container'];
+    /** Keeps the portal mounted while closed. */
+    keepMounted?: boolean;
+};
+/**
+ * The portal, positioner and popup. `placement` supplies defaults for the
+ * positioner; any prop left undefined falls through to Base UI's own
+ * defaults (the end side for submenus, the pointer for context menus).
+ * Inside a Menu with the outline morph, the popup is its target and the
+ * frame renders beside it [D204].
+ */
+export declare function MenuPopupFrame(props: MenuPopupProps & {
+    placement?: Pick<MenuPopupProps, 'align' | 'sideOffset'>;
+}): React.JSX.Element;
+export {};
+//# sourceMappingURL=popup.d.ts.map

package/overlays/menu/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/overlays/menu/popup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAsBjE,0EAA0E;AAC1E,eAAO,MAAM,IAAI;;;8EAMf,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AAEpD,KAAK,eAAe,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAA;AAEhD,sGAAsG;AACtG,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,mGAAmG;IACnG,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,oFAAoF;IACpF,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,iDAAiD;IACjD,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAA;IAChC,kEAAkE;IAClE,UAAU,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAA;IAC1C,6CAA6C;IAC7C,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAA;IAC5C,2FAA2F;IAC3F,gBAAgB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAA;IACtD,qEAAqE;IACrE,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;IAC9C,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,cAAc,GAAG;IAAE,SAAS,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,YAAY,CAAC,CAAA;CAAE,qBAmDrF"}

package/overlays/menu/popup.js

@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { cva } from 'class-variance-authority';
+import { OutlineMorphFrame } from '../../foundations/outline-morph';
+import { useMergedRef } from '../../utils/assignRef';
+import { cx, resolveClassName } from '../../utils/className';
+import { OVERLAY_COLLISION_PADDING, OverlayScope, overlayActionClassName, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { MenuMorphContext } from './morph';
+import styles from './menu.module.css';
+/*
+ * Internal: the menu popup build shared by Menu, Context Menu and Menubar
+ * (§9.7). Not exported from the Menu index; Menu.tsx re-exports `menu` and
+ * wraps `MenuPopupFrame` as MenuPopup.
+ */
+/** Menu classes (§9.7): the popup. Shared by Context Menu and Menubar. */
+export const menu = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; the popup computes the overlay preset's defaults.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * The portal, positioner and popup. `placement` supplies defaults for the
+ * positioner; any prop left undefined falls through to Base UI's own
+ * defaults (the end side for submenus, the pointer for context menus).
+ * Inside a Menu with the outline morph, the popup is its target and the
+ * frame renders beside it [D204].
+ */
+export function MenuPopupFrame(props) {
+    const { primary, secondary, side, align, sideOffset, alignOffset, collisionPadding = OVERLAY_COLLISION_PADDING, container, keepMounted, placement, className, children, ref, ...rest } = props;
+    const scales = overlayScales(primary, secondary);
+    const morph = React.useContext(MenuMorphContext);
+    const popupRef = useMergedRef(ref, morph?.targetRef);
+    return (React.createElement(BaseMenu.Portal, { container: container, keepMounted: keepMounted },
+        React.createElement(BaseMenu.Positioner, { className: styles.positioner, side: side, align: align ?? placement?.align, sideOffset: sideOffset ?? placement?.sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding },
+            React.createElement(BaseMenu.Popup, { ...rest, ref: popupRef, ...overlayAttributes, className: resolveClassName(className, (extra) => menu({
+                    primary: scales.primary,
+                    secondary: scales.secondary,
+                    className: cx(overlayActionClassName, extra),
+                })) },
+                React.createElement(OverlayScope, null, children)),
+            morph ? React.createElement(OutlineMorphFrame, { ref: morph.frameRef }) : null)));
+}
+//# sourceMappingURL=popup.js.map

package/overlays/menu/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../src/overlays/menu/popup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,EAAE,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EACL,yBAAyB,EACzB,YAAY,EACZ,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC;;;;GAIG;AAEH,0EAA0E;AAC1E,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACnC,QAAQ,EAAE;QACR,wFAAwF;QACxF,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AA+BF;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAC5B,KAAoF;IAEpF,MAAM,EACJ,OAAO,EACP,SAAS,EACT,IAAI,EACJ,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,GAAG,yBAAyB,EAC5C,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;IAChD,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IAChD,MAAM,QAAQ,GAAG,YAAY,CAAiB,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,CAAA;IAEpE,OAAO,CACL,oBAAC,QAAQ,CAAC,MAAM,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW;QAC7D,oBAAC,QAAQ,CAAC,UAAU,IAClB,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,KAAK,EAChC,UAAU,EAAE,UAAU,IAAI,SAAS,EAAE,UAAU,EAC/C,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB;YAElC,oBAAC,QAAQ,CAAC,KAAK,OACT,IAAI,EACR,GAAG,EAAE,QAAQ,KACT,iBAAiB,EACrB,SAAS,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC/C,IAAI,CAAC;oBACH,OAAO,EAAE,MAAM,CAAC,OAAO;oBACvB,SAAS,EAAE,MAAM,CAAC,SAAS;oBAC3B,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,KAAK,CAAC;iBAC7C,CAAC,CACH;gBAED,oBAAC,YAAY,QAAE,QAAQ,CAAgB,CACxB;YAChB,KAAK,CAAC,CAAC,CAAC,oBAAC,iBAAiB,IAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI,CACtC,CACN,CACnB,CAAA;AACH,CAAC"}

package/overlays/menubar/Menubar.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Menu as BaseMenu } from '@base-ui/react/menu';
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import { type VariantProps } from 'class-variance-authority';
+import { type MenuPopupProps } from '../menu';
+export declare const menubar: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type MenubarVariants = VariantProps<typeof menubar>;
+/** Props for Menubar: Base UI Menubar props plus the color axes and the collapsed label. */
+export type MenubarProps = BaseMenubar.Props & {
+    /** Primary Radix scale for the bar: triggers, rule, open bar and ring. Never defaulted [D133]. */
+    primary?: MenubarVariants['primary'];
+    /** Secondary Radix scale for the bar. Never defaulted. */
+    secondary?: MenubarVariants['secondary'];
+    /**
+     * The single trigger's label below --lg-n-above, where the menus collapse
+     * into one menu of labelled groups. Title case. Default "Menu".
+     */
+    collapsedLabel?: string;
+    /** Props for the collapsed menu's popup. */
+    collapsedPopupProps?: MenuPopupProps;
+    /**
+     * The outline morph for every menu of the bar: a press grows the
+     * trigger's ring (or box) into the popup's frame, and Escape, a choice
+     * or an outside press shrinks it back; moving between menus stays
+     * instant. Default `true`; `false` opens and closes them at once.
+     */
+    morph?: boolean;
+};
+/**
+ * The bar (Base UI Menubar): --fgd-size-hit tall with a --border-size-1
+ * --role-rule under it, holding `MenubarMenu`s. Below --lg-n-above it
+ * collapses into one `collapsedLabel` trigger whose popup lists each menu
+ * as a labelled group.
+ */
+export declare function Menubar(props: MenubarProps): React.JSX.Element;
+/** Props for MenubarMenu: Base UI Menu.Root props plus the trigger label and the popup's props. */
+export type MenubarMenuProps = Omit<BaseMenu.Root.Props, 'children'> & {
+    /**
+     * The trigger's label, authored in title case with no tracking ("File",
+     * "Edit", "View Options") [D160, D165]; the group label when collapsed.
+     */
+    label: string;
+    /** Disables the trigger. */
+    disabled?: boolean;
+    /** Props for the menu's popup (placement, color axes). */
+    popupProps?: MenuPopupProps;
+    /** The menu's items: MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuSubmenu … */
+    children?: React.ReactNode;
+    /** The outline morph for this menu. Default: the Menubar's `morph`. */
+    morph?: boolean;
+};
+/**
+ * One menu of the bar: a `type-button-sm` trigger and a Menu popup of its
+ * items. Inside the collapsed "Menu" it renders as a MenuGroup under a
+ * MenuGroupLabel of the same label.
+ */
+export declare function MenubarMenu(props: MenubarMenuProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Menubar.d.ts.map

package/overlays/menubar/Menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.d.ts","sourceRoot":"","sources":["../../src/overlays/menubar/Menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAA8C,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AAsCzF,eAAO,MAAM,OAAO;;;8EAMlB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AAWnD,4FAA4F;AAC5F,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,KAAK,GAAG;IAC7C,kGAAkG;IAClG,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,cAAc,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAwC1C;AAED,mGAAmG;AACnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IACrE;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,kFAAkF;IAClF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAsBlD"}

package/overlays/menubar/Menubar.js

@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import { cva } from 'class-variance-authority';
+import { Menu, MenuGroup, MenuGroupLabel, MenuPopup } from '../menu';
+import { MenuMorphTrigger, MenubarMorphContext } from '../menu/morph';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { useMediaQuery } from '../../utils/useMediaQuery';
+import styles from './menubar.module.css';
+/*
+ * Menubar (§9.7): an application row of menus, only on application screens
+ * with three or more command groups. No case shows one; derived from P4,
+ * P5 and §9.11.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: menubar.module.css; CVA function `menubar`. Its menus' popups
+ *   are Menu popups (menu.module.css).
+ * - Axes: `primary`, `secondary` → scales module classes, on the bar.
+ *   Orientation is Base UI's own prop (data-orientation).
+ * - Compound variants: none. Defaults: color axes: none.
+ * - Color fallback: inherits the scope; the popups take the `white`
+ *   preset's defaults like every Menu popup.
+ * - States: data-orientation → the bar's direction and rule edge;
+ *   trigger data-popup-open → the --border-size-2-25 bar in --primary12;
+ *   trigger :hover (not disabled) → the §9.2 `text` Button hover: label
+ *   --role-link-hover, underlined only where that is --primary12 [D181];
+ *   :focus-visible → the ring; data-disabled → --role-muted.
+ * - Parts: base (the bar and its rule), trigger.
+ * - Scope: none on the bar (it writes its host's scope attributes); the
+ *   popups are portaled `white` scopes.
+ * - Container: none; below --lg-n-above (the viewport tier of the page
+ *   frame) the bar collapses into one "Menu" trigger whose popup lists the
+ *   former menus as labelled groups.
+ * - Outline morph [D204]: on by default (`morph={false}` on the bar or a
+ *   menu opts out). A press opens a menu with the trigger's ring (or box)
+ *   growing into its popup, and Escape, a choice or an outside press
+ *   closes it back; moving between menus (hover, arrow keys) stays
+ *   instant, as Base UI switches them.
+ */
+export const menubar = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133]; omitted, the bar inherits the scope.
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** The page frame's --lg-n-above tier, restated for matchMedia. */
+const WIDE_QUERY = '(min-width: 1024px)';
+/** Inside the collapsed "Menu", each MenubarMenu renders as a labelled group. */
+const CollapsedContext = React.createContext(false);
+/** The bar's `morph`, the default for each of its menus. */
+const MorphContext = React.createContext(true);
+/**
+ * The bar (Base UI Menubar): --fgd-size-hit tall with a --border-size-1
+ * --role-rule under it, holding `MenubarMenu`s. Below --lg-n-above it
+ * collapses into one `collapsedLabel` trigger whose popup lists each menu
+ * as a labelled group.
+ */
+export function Menubar(props) {
+    const { primary, secondary, collapsedLabel = 'Menu', collapsedPopupProps, morph = true, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    // True from --lg-n-above; false on the server and below it (mobile first).
+    const wide = useMediaQuery(WIDE_QUERY);
+    return (React.createElement(BaseMenubar, { ...rest, ...scope, className: resolveClassName(className, (extra) => menubar({ primary, secondary, className: extra })) },
+        React.createElement(MenubarMorphContext.Provider, { value: true },
+            React.createElement(MorphContext.Provider, { value: morph }, wide ? (children) : (React.createElement(Menu, { morph: morph },
+                React.createElement(MenuMorphTrigger, { className: styles.trigger }, collapsedLabel),
+                React.createElement(MenuPopup, { ...collapsedPopupProps },
+                    React.createElement(CollapsedContext.Provider, { value: true }, children))))))));
+}
+/**
+ * One menu of the bar: a `type-button-sm` trigger and a Menu popup of its
+ * items. Inside the collapsed "Menu" it renders as a MenuGroup under a
+ * MenuGroupLabel of the same label.
+ */
+export function MenubarMenu(props) {
+    const { label, disabled, popupProps, children, morph, ...rest } = props;
+    const collapsed = React.useContext(CollapsedContext);
+    const barMorph = React.useContext(MorphContext);
+    if (collapsed) {
+        return (React.createElement(MenuGroup, null,
+            React.createElement(MenuGroupLabel, null, label),
+            children));
+    }
+    return (React.createElement(Menu, { ...rest, morph: morph ?? barMorph },
+        React.createElement(MenuMorphTrigger, { className: styles.trigger, disabled: disabled }, label),
+        React.createElement(MenuPopup, { ...popupProps }, children)));
+}
+//# sourceMappingURL=Menubar.js.map

package/overlays/menubar/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","sourceRoot":"","sources":["../../src/overlays/menubar/Menubar.tsx"],"names":[],"mappings":"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"}

package/overlays/menubar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlays/menubar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/overlays/menubar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/overlays/menubar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}