@lucasbernardosn/react-ui 0.4.0 → 0.5.0

package/dist/components/overlays/menu/menu-filter-provider.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-filter-provider.tsx
+/**
+* Liga a busca ao `Menu.Root` (ou ao `Menu.SubmenuRoot`) que envolve. Não renderiza elemento.
+* Em Preview no Base UI: a API pode mudar.
+*
+* Com ele, ponha um `Menu.Input` no `Popup` e os itens num `Menu.List`. O filtro padrão casa o
+* texto do item (ou o `label` dele) sem diferenciar acento nem caixa; `filter` troca a regra
+* (`Menu.useFilter` dá as comparações) e `filter={null}` deixa a busca com o app. `value` e
+* `onValueChange` controlam a busca, que zera ao fechar o menu. Cada submenu com busca precisa
+* do próprio provider; sem ele, o submenu não é filtrado.
+*
+* @example
+* ```tsx
+* <Menu.FilterProvider>
+*   <Menu.Root>
+*     <Menu.Trigger>Ações</Menu.Trigger>
+*     <Menu.Portal>
+*       <Menu.Positioner>
+*         <Menu.Popup>
+*           <Menu.Input aria-label="Buscar ação" />
+*           <Menu.Clear />
+*           <Menu.Empty>Nenhuma ação encontrada.</Menu.Empty>
+*           <Menu.List>
+*             <Menu.Item>Editar</Menu.Item>
+*           </Menu.List>
+*         </Menu.Popup>
+*       </Menu.Positioner>
+*     </Menu.Portal>
+*   </Menu.Root>
+* </Menu.FilterProvider>
+* ```
+*/
+const MenuFilterProvider = (props) => {
+	return /* @__PURE__ */ jsx(Menu.FilterProvider, { ...props });
+};
+MenuFilterProvider.displayName = "Menu.FilterProvider";
+//#endregion
+export { MenuFilterProvider };
+
+//# sourceMappingURL=menu-filter-provider.js.map

package/dist/components/overlays/menu/menu-filter-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-filter-provider.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-filter-provider.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\n\nexport type MenuFilterProviderProps = BaseMenu.FilterProvider.Props;\n\nexport type MenuFilterProviderState = BaseMenu.FilterProvider.State;\n\nexport type MenuFilterProviderChangeEventReason =\n  BaseMenu.FilterProvider.ChangeEventReason;\n\nexport type MenuFilterProviderChangeEventDetails =\n  BaseMenu.FilterProvider.ChangeEventDetails;\n\n/**\n * Liga a busca ao `Menu.Root` (ou ao `Menu.SubmenuRoot`) que envolve. Não renderiza elemento.\n * Em Preview no Base UI: a API pode mudar.\n *\n * Com ele, ponha um `Menu.Input` no `Popup` e os itens num `Menu.List`. O filtro padrão casa o\n * texto do item (ou o `label` dele) sem diferenciar acento nem caixa; `filter` troca a regra\n * (`Menu.useFilter` dá as comparações) e `filter={null}` deixa a busca com o app. `value` e\n * `onValueChange` controlam a busca, que zera ao fechar o menu. Cada submenu com busca precisa\n * do próprio provider; sem ele, o submenu não é filtrado.\n *\n * @example\n * ```tsx\n * <Menu.FilterProvider>\n *   <Menu.Root>\n *     <Menu.Trigger>Ações</Menu.Trigger>\n *     <Menu.Portal>\n *       <Menu.Positioner>\n *         <Menu.Popup>\n *           <Menu.Input aria-label=\"Buscar ação\" />\n *           <Menu.Clear />\n *           <Menu.Empty>Nenhuma ação encontrada.</Menu.Empty>\n *           <Menu.List>\n *             <Menu.Item>Editar</Menu.Item>\n *           </Menu.List>\n *         </Menu.Popup>\n *       </Menu.Positioner>\n *     </Menu.Portal>\n *   </Menu.Root>\n * </Menu.FilterProvider>\n * ```\n */\nexport const MenuFilterProvider = (props: MenuFilterProviderProps) => {\n  return <BaseMenu.FilterProvider {...props} />;\n};\n\nMenuFilterProvider.displayName = 'Menu.FilterProvider';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,sBAAsB,UAAmC;CACpE,OAAO,oBAACA,KAAS,gBAAV,EAAyB,GAAI,MAAQ,CAAA;AAC9C;AAEA,mBAAmB,cAAc"}

package/dist/components/overlays/menu/menu-group-label.d.ts

@@ -6,7 +6,7 @@ export type MenuGroupLabelState = Menu.GroupLabel.State;
  * Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu
  * enquanto o grupo rola.
  *
- * Cópia de `selectGroupLabelVariants` (tabela no README de `collections`). A diferença é o recuo:
+ * Cópia de `selectGroupLabelVariants`. A diferença é o recuo:
  * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos
  * itens. Mudar o espaçamento do item pede mudar este valor.
  */

package/dist/components/overlays/menu/menu-group-label.js

@@ -6,7 +6,7 @@ import { Menu } from "@base-ui/react/menu";
 * Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu
 * enquanto o grupo rola.
 *
-* Cópia de `selectGroupLabelVariants` (tabela no README de `collections`). A diferença é o recuo:
+* Cópia de `selectGroupLabelVariants`. A diferença é o recuo:
 * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos
 * itens. Mudar o espaçamento do item pede mudar este valor.
 */

package/dist/components/overlays/menu/menu-group-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-group-label.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-group-label.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuGroupLabelProps = BaseMenu.GroupLabel.Props;\n\nexport type MenuGroupLabelState = BaseMenu.GroupLabel.State;\n\n/**\n * Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu\n * enquanto o grupo rola.\n *\n * Cópia de `selectGroupLabelVariants` (tabela no README de `collections`). A diferença é o recuo:\n * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos\n * itens. Mudar o espaçamento do item pede mudar este valor.\n */\nexport const MenuGroupLabel = (props: MenuGroupLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.GroupLabel\n      data-component=\"Menu.GroupLabel\"\n      className={mergeStateClassNames(\n        [\n          'sticky',\n          'top-0',\n          'z-1',\n\n          // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'pt-2',\n          'pb-1',\n\n          'text-gray-11',\n          'font-medium',\n          'uppercase',\n          'tracking-wider',\n\n          'ps-2.5',\n          'pe-2.5',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuGroupLabel.displayName = 'Menu.GroupLabel';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAGA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"menu-group-label.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-group-label.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuGroupLabelProps = BaseMenu.GroupLabel.Props;\n\nexport type MenuGroupLabelState = BaseMenu.GroupLabel.State;\n\n/**\n * Rótulo do grupo, ligado a ele pelo Base UI (`aria-labelledby`) e grudado no topo do menu\n * enquanto o grupo rola.\n *\n * Cópia de `selectGroupLabelVariants`. A diferença é o recuo:\n * sem a coluna do check, ele é o `px-2.5` do `Menu.Item`, e o texto do rótulo alinha com o dos\n * itens. Mudar o espaçamento do item pede mudar este valor.\n */\nexport const MenuGroupLabel = (props: MenuGroupLabelProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.GroupLabel\n      data-component=\"Menu.GroupLabel\"\n      className={mergeStateClassNames(\n        [\n          'sticky',\n          'top-0',\n          'z-1',\n\n          // Mesmo fundo do popup: fixo no topo, o rótulo cobre os itens que rolam por baixo.\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'pt-2',\n          'pb-1',\n\n          'text-gray-11',\n          'font-medium',\n          'uppercase',\n          'tracking-wider',\n\n          'ps-2.5',\n          'pe-2.5',\n\n          'text-[0.6875rem]', // 11px\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuGroupLabel.displayName = 'Menu.GroupLabel';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAGA;GACA;GAEA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/menu/menu-input.d.ts

@@ -0,0 +1,22 @@
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-input.d.ts
+export type MenuInputProps = Menu.Input.Props;
+export type MenuInputState = Menu.Input.State;
+/**
+ * Campo de busca do menu, com a lupa à esquerda e um separador embaixo, no topo do `Menu.Popup`.
+ * Exige o `Menu.FilterProvider` em volta do `Root`. Em Preview no Base UI. O nome acessível vem de
+ * `aria-label`. As props e a `className` vão para o `input`.
+ *
+ * Abrir o menu por clique ou teclado já foca o campo; as setas movem o realce dos itens com o
+ * foco no campo. O `Menu.Clear` vai logo depois, sobre o fim da linha do campo.
+ *
+ * Cópia do `Command.Input`, a origem do campo de busca, onde a lupa e a moldura estão explicadas.
+ * As diferenças: o `Command` pega o `Ctrl+Enter` para abrir em outra aba, e o menu não; e o campo
+ * reserva o espaço do `Menu.Clear` à direita (`pe-7`).
+ */
+export declare const MenuInput: {
+  (props: MenuInputProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=menu-input.d.ts.map

package/dist/components/overlays/menu/menu-input.js

@@ -0,0 +1,58 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { Icon } from "../../display/icon/icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-input.tsx
+/**
+* Campo de busca do menu, com a lupa à esquerda e um separador embaixo, no topo do `Menu.Popup`.
+* Exige o `Menu.FilterProvider` em volta do `Root`. Em Preview no Base UI. O nome acessível vem de
+* `aria-label`. As props e a `className` vão para o `input`.
+*
+* Abrir o menu por clique ou teclado já foca o campo; as setas movem o realce dos itens com o
+* foco no campo. O `Menu.Clear` vai logo depois, sobre o fim da linha do campo.
+*
+* Cópia do `Command.Input`, a origem do campo de busca, onde a lupa e a moldura estão explicadas.
+* As diferenças: o `Command` pega o `Ctrl+Enter` para abrir em outra aba, e o menu não; e o campo
+* reserva o espaço do `Menu.Clear` à direita (`pe-7`).
+*/
+const MenuInput = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-2",
+			"px-3",
+			"border-b",
+			"border-gray-6",
+			"text-gray-11"
+		]),
+		children: [/* @__PURE__ */ jsx(Icon, {
+			render: /* @__PURE__ */ jsx(MagnifyingGlassIcon, {}),
+			className: "size-4"
+		}), /* @__PURE__ */ jsx(Menu.Input, {
+			"data-component": "Menu.Input",
+			className: mergeStateClassNames([
+				"h-10",
+				"w-full",
+				"min-w-0",
+				"pe-7",
+				"bg-transparent",
+				"outline-none",
+				"font-normal",
+				"text-gray-12",
+				"text-sm",
+				"any-pointer-coarse:text-base",
+				"placeholder:text-gray-11/80"
+			], className),
+			...rest
+		})]
+	});
+};
+MenuInput.displayName = "Menu.Input";
+//#endregion
+export { MenuInput };
+
+//# sourceMappingURL=menu-input.js.map

package/dist/components/overlays/menu/menu-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-input.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-input.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { MagnifyingGlassIcon } from '@phosphor-icons/react';\nimport { Icon } from '#components/display/icon';\nimport { mergeStateClassNames, mergeTwClassNames } from '#utils';\n\nexport type MenuInputProps = BaseMenu.Input.Props;\n\nexport type MenuInputState = BaseMenu.Input.State;\n\n/**\n * Campo de busca do menu, com a lupa à esquerda e um separador embaixo, no topo do `Menu.Popup`.\n * Exige o `Menu.FilterProvider` em volta do `Root`. Em Preview no Base UI. O nome acessível vem de\n * `aria-label`. As props e a `className` vão para o `input`.\n *\n * Abrir o menu por clique ou teclado já foca o campo; as setas movem o realce dos itens com o\n * foco no campo. O `Menu.Clear` vai logo depois, sobre o fim da linha do campo.\n *\n * Cópia do `Command.Input`, a origem do campo de busca, onde a lupa e a moldura estão explicadas.\n * As diferenças: o `Command` pega o `Ctrl+Enter` para abrir em outra aba, e o menu não; e o campo\n * reserva o espaço do `Menu.Clear` à direita (`pe-7`).\n */\nexport const MenuInput = (props: MenuInputProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <div\n      className={mergeTwClassNames([\n        'flex',\n        'items-center',\n        'gap-2',\n\n        'px-3',\n\n        'border-b',\n        'border-gray-6',\n\n        'text-gray-11',\n      ])}\n    >\n      <Icon\n        render={<MagnifyingGlassIcon />}\n        className=\"size-4\"\n      />\n\n      <BaseMenu.Input\n        data-component=\"Menu.Input\"\n        className={mergeStateClassNames(\n          [\n            'h-10',\n            'w-full',\n            'min-w-0',\n            'pe-7',\n\n            'bg-transparent',\n            'outline-none',\n\n            'font-normal',\n            'text-gray-12',\n            'text-sm',\n            // Em tela de toque, 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo.\n            'any-pointer-coarse:text-base',\n\n            'placeholder:text-gray-11/80',\n          ],\n          className,\n        )}\n        {...rest}\n      />\n    </div>\n  );\n};\n\nMenuInput.displayName = 'Menu.Input';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,qBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GAEA;GAEA;GACA;GAEA;EACF,CAAC;EAZH,UAAA,CAcE,oBAAC,MAAD;GACE,QAAQ,oBAAC,qBAAD,CAAsB,CAAA;GAC9B,WAAU;EACX,CAAA,GAED,oBAACA,KAAS,OAAV;GACE,kBAAe;GACf,WAAW,qBACT;IACE;IACA;IACA;IACA;IAEA;IACA;IAEA;IACA;IACA;IAEA;IAEA;GACF,GACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,UAAU,cAAc"}

package/dist/components/overlays/menu/menu-item-variants.d.ts

@@ -11,7 +11,7 @@ export type MenuItemVariants = {
 export declare const menuItemDefaultVariants: Required<MenuItemVariants>;
 /**
  * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está
- * explicado (tabela no README de `collections`). As diferenças:
+ * explicado. As diferenças:
  * - `flex` em linha, sem a coluna do check: ícone, texto e atalho ficam lado a lado;
  * - o realce aparece também no toque: o menu fecha ao tocar no item, e não sobra realce preso;
  * - sem `size`: as medidas são as do `sm` do Select;
@@ -21,7 +21,7 @@ export declare const menuItemDefaultVariants: Required<MenuItemVariants>;
  * (realce), que a base consome. Assim uma cor nova é só um par de variáveis.
  */
 export declare const menuItemVariants: (props?: ({
-  colorScheme?: "gray" | "brand" | "red" | "green" | "blue" | "amber" | null | undefined;
+  colorScheme?: "gray" | "accent" | "red" | "green" | "blue" | "amber" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 //# sourceMappingURL=menu-item-variants.d.ts.map

package/dist/components/overlays/menu/menu-item-variants.js

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 const menuItemDefaultVariants = { colorScheme: "gray" };
 /**
 * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está
-* explicado (tabela no README de `collections`). As diferenças:
+* explicado. As diferenças:
 * - `flex` em linha, sem a coluna do check: ícone, texto e atalho ficam lado a lado;
 * - o realce aparece também no toque: o menu fecha ao tocar no item, e não sobra realce preso;
 * - sem `size`: as medidas são as do `sm` do Select;
@@ -38,12 +38,12 @@ const menuItemVariants = cva([
 	"text-(--menu-item-fg)"
 ], {
 	variants: { colorScheme: {
-		gray: ["[--menu-item-fg:var(--color-gray-12)]", "[--menu-item-highlight-bg:var(--color-gray-4)]"],
-		brand: ["[--menu-item-fg:var(--color-brand-11)]", "[--menu-item-highlight-bg:var(--color-brand-4)]"],
-		red: ["[--menu-item-fg:var(--color-red-11)]", "[--menu-item-highlight-bg:var(--color-red-4)]"],
-		green: ["[--menu-item-fg:var(--color-green-11)]", "[--menu-item-highlight-bg:var(--color-green-4)]"],
-		blue: ["[--menu-item-fg:var(--color-blue-11)]", "[--menu-item-highlight-bg:var(--color-blue-4)]"],
-		amber: ["[--menu-item-fg:var(--color-amber-11)]", "[--menu-item-highlight-bg:var(--color-amber-4)]"]
+		gray: ["[--menu-item-fg:var(--gray-12)]", "[--menu-item-highlight-bg:var(--gray-4)]"],
+		accent: ["[--menu-item-fg:var(--accent-11)]", "[--menu-item-highlight-bg:var(--accent-4)]"],
+		red: ["[--menu-item-fg:var(--red-11)]", "[--menu-item-highlight-bg:var(--red-4)]"],
+		green: ["[--menu-item-fg:var(--green-11)]", "[--menu-item-highlight-bg:var(--green-4)]"],
+		blue: ["[--menu-item-fg:var(--blue-11)]", "[--menu-item-highlight-bg:var(--blue-4)]"],
+		amber: ["[--menu-item-fg:var(--amber-11)]", "[--menu-item-highlight-bg:var(--amber-4)]"]
 	} },
 	defaultVariants: { colorScheme: menuItemDefaultVariants.colorScheme }
 });

package/dist/components/overlays/menu/menu-item-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item-variants.js","names":[],"sources":["../../../../src/components/overlays/menu/menu-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type MenuItemVariants = {\n  /**\n   * Cor do texto, do ícone e do realce. `red` marca a ação destrutiva (excluir, cancelar).\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n};\n\nexport const menuItemDefaultVariants: Required<MenuItemVariants> = {\n  colorScheme: 'gray',\n};\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está\n * explicado (tabela no README de `collections`). As diferenças:\n * - `flex` em linha, sem a coluna do check: ícone, texto e atalho ficam lado a lado;\n * - o realce aparece também no toque: o menu fecha ao tocar no item, e não sobra realce preso;\n * - sem `size`: as medidas são as do `sm` do Select;\n * - `colorScheme`, abaixo.\n *\n * Cada `colorScheme` só declara `--menu-item-fg` (texto e ícone) e `--menu-item-highlight-bg`\n * (realce), que a base consome. Assim uma cor nova é só um par de variáveis.\n */\nexport const menuItemVariants = cva(\n  [\n    'flex',\n    'items-center',\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n    'outline-none',\n\n    'data-disabled:pointer-events-none',\n    'data-disabled:opacity-50',\n\n    'data-highlighted:z-0',\n    'data-highlighted:before:absolute',\n    'data-highlighted:before:inset-x-1',\n    'data-highlighted:before:inset-y-0',\n    'data-highlighted:before:z-[-1]',\n    'data-highlighted:before:rounded',\n    'data-highlighted:before:content-[\"\"]',\n    'data-highlighted:before:bg-(--menu-item-highlight-bg)',\n\n    'px-2.5',\n    'gap-2',\n    'py-1.25',\n\n    'pointer-coarse:py-2.5',\n\n    'text-sm',\n    'text-(--menu-item-fg)',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--menu-item-fg:var(--color-gray-12)]',\n          '[--menu-item-highlight-bg:var(--color-gray-4)]',\n        ],\n        brand: [\n          '[--menu-item-fg:var(--color-brand-11)]',\n          '[--menu-item-highlight-bg:var(--color-brand-4)]',\n        ],\n        red: [\n          '[--menu-item-fg:var(--color-red-11)]',\n          '[--menu-item-highlight-bg:var(--color-red-4)]',\n        ],\n        green: [\n          '[--menu-item-fg:var(--color-green-11)]',\n          '[--menu-item-highlight-bg:var(--color-green-4)]',\n        ],\n        blue: [\n          '[--menu-item-fg:var(--color-blue-11)]',\n          '[--menu-item-highlight-bg:var(--color-blue-4)]',\n        ],\n        amber: [\n          '[--menu-item-fg:var(--color-amber-11)]',\n          '[--menu-item-highlight-bg:var(--color-amber-4)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: menuItemDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;AAYA,MAAa,0BAAsD,EACjE,aAAa,OACf;;;;;;;;;;;;AAaA,MAAa,mBAAmB,IAC9B;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CACJ,yCACA,gDACF;EACA,OAAO,CACL,0CACA,iDACF;EACA,KAAK,CACH,wCACA,+CACF;EACA,OAAO,CACL,0CACA,iDACF;EACA,MAAM,CACJ,yCACA,gDACF;EACA,OAAO,CACL,0CACA,iDACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,wBAAwB,YACvC;AACF,CACF"}
+{"version":3,"file":"menu-item-variants.js","names":[],"sources":["../../../../src/components/overlays/menu/menu-item-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { ColorSchemeSemantic } from '#types';\n\nexport type MenuItemVariants = {\n  /**\n   * Cor do texto, do ícone e do realce. `red` marca a ação destrutiva (excluir, cancelar).\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeSemantic;\n};\n\nexport const menuItemDefaultVariants: Required<MenuItemVariants> = {\n  colorScheme: 'gray',\n};\n\n/**\n * Cópia de `selectItemVariants`, a origem do item das listas em popup, onde o realce está\n * explicado. As diferenças:\n * - `flex` em linha, sem a coluna do check: ícone, texto e atalho ficam lado a lado;\n * - o realce aparece também no toque: o menu fecha ao tocar no item, e não sobra realce preso;\n * - sem `size`: as medidas são as do `sm` do Select;\n * - `colorScheme`, abaixo.\n *\n * Cada `colorScheme` só declara `--menu-item-fg` (texto e ícone) e `--menu-item-highlight-bg`\n * (realce), que a base consome. Assim uma cor nova é só um par de variáveis.\n */\nexport const menuItemVariants = cva(\n  [\n    'flex',\n    'items-center',\n\n    'relative',\n\n    'rounded',\n\n    'cursor-default',\n    'select-none',\n    'outline-none',\n\n    'data-disabled:pointer-events-none',\n    'data-disabled:opacity-50',\n\n    'data-highlighted:z-0',\n    'data-highlighted:before:absolute',\n    'data-highlighted:before:inset-x-1',\n    'data-highlighted:before:inset-y-0',\n    'data-highlighted:before:z-[-1]',\n    'data-highlighted:before:rounded',\n    'data-highlighted:before:content-[\"\"]',\n    'data-highlighted:before:bg-(--menu-item-highlight-bg)',\n\n    'px-2.5',\n    'gap-2',\n    'py-1.25',\n\n    'pointer-coarse:py-2.5',\n\n    'text-sm',\n    'text-(--menu-item-fg)',\n  ],\n  {\n    variants: {\n      colorScheme: {\n        gray: [\n          '[--menu-item-fg:var(--gray-12)]',\n          '[--menu-item-highlight-bg:var(--gray-4)]',\n        ],\n        accent: [\n          '[--menu-item-fg:var(--accent-11)]',\n          '[--menu-item-highlight-bg:var(--accent-4)]',\n        ],\n        red: [\n          '[--menu-item-fg:var(--red-11)]',\n          '[--menu-item-highlight-bg:var(--red-4)]',\n        ],\n        green: [\n          '[--menu-item-fg:var(--green-11)]',\n          '[--menu-item-highlight-bg:var(--green-4)]',\n        ],\n        blue: [\n          '[--menu-item-fg:var(--blue-11)]',\n          '[--menu-item-highlight-bg:var(--blue-4)]',\n        ],\n        amber: [\n          '[--menu-item-fg:var(--amber-11)]',\n          '[--menu-item-highlight-bg:var(--amber-4)]',\n        ],\n      },\n    },\n    defaultVariants: {\n      colorScheme: menuItemDefaultVariants.colorScheme,\n    },\n  },\n);\n"],"mappings":";;AAYA,MAAa,0BAAsD,EACjE,aAAa,OACf;;;;;;;;;;;;AAaA,MAAa,mBAAmB,IAC9B;CACE;CACA;CAEA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CACA;AACF,GACA;CACE,UAAU,EACR,aAAa;EACX,MAAM,CACJ,mCACA,0CACF;EACA,QAAQ,CACN,qCACA,4CACF;EACA,KAAK,CACH,kCACA,yCACF;EACA,OAAO,CACL,oCACA,2CACF;EACA,MAAM,CACJ,mCACA,0CACF;EACA,OAAO,CACL,oCACA,2CACF;CACF,EACF;CACA,iBAAiB,EACf,aAAa,wBAAwB,YACvC;AACF,CACF"}

package/dist/components/overlays/menu/menu-link-item.d.ts

@@ -0,0 +1,19 @@
+import { MenuItemVariants } from "./menu-item-variants.js";
+import { MergeOverride } from "@lucasbernardosn/ts-utils";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-link-item.d.ts
+export type MenuLinkItemProps = MergeOverride<Menu.LinkItem.Props, MenuItemVariants>;
+export type MenuLinkItemState = Menu.LinkItem.State;
+/**
+ * Item que navega, renderizado como `<a>`: passe o destino em `href`. Tem o realce, as medidas e
+ * o `colorScheme` do `Menu.Item`, e o menu fecha ao clicar.
+ *
+ * Para a navegação do router do app, troque a tag em `render` pelo link dele, que recebe as props
+ * do item: `<Menu.LinkItem render={<Link to="/pedidos" />}>Pedidos</Menu.LinkItem>`.
+ */
+export declare const MenuLinkItem: {
+  (props: MenuLinkItemProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=menu-link-item.d.ts.map

package/dist/components/overlays/menu/menu-link-item.js

@@ -0,0 +1,28 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { menuItemVariants } from "./menu-item-variants.js";
+import { createSplitProps } from "@lucasbernardosn/ts-utils";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-link-item.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Item que navega, renderizado como `<a>`: passe o destino em `href`. Tem o realce, as medidas e
+* o `colorScheme` do `Menu.Item`, e o menu fecha ao clicar.
+*
+* Para a navegação do router do app, troque a tag em `render` pelo link dele, que recebe as props
+* do item: `<Menu.LinkItem render={<Link to="/pedidos" />}>Pedidos</Menu.LinkItem>`.
+*/
+const MenuLinkItem = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, ["colorScheme"]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(Menu.LinkItem, {
+		"data-component": "Menu.LinkItem",
+		className: mergeStateClassNames(menuItemVariants(variantProps), className),
+		...rest
+	});
+};
+MenuLinkItem.displayName = "Menu.LinkItem";
+//#endregion
+export { MenuLinkItem };
+
+//# sourceMappingURL=menu-link-item.js.map

package/dist/components/overlays/menu/menu-link-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-link-item.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-link-item.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport {\n  createSplitProps,\n  type MergeOverride,\n} from '@lucasbernardosn/ts-utils';\nimport { mergeStateClassNames } from '#utils';\nimport { type MenuItemVariants, menuItemVariants } from './menu-item-variants';\n\nexport type MenuLinkItemProps = MergeOverride<\n  BaseMenu.LinkItem.Props,\n  MenuItemVariants\n>;\n\nexport type MenuLinkItemState = BaseMenu.LinkItem.State;\n\nconst splitVariantProps = createSplitProps<MenuItemVariants>();\n\n/**\n * Item que navega, renderizado como `<a>`: passe o destino em `href`. Tem o realce, as medidas e\n * o `colorScheme` do `Menu.Item`, e o menu fecha ao clicar.\n *\n * Para a navegação do router do app, troque a tag em `render` pelo link dele, que recebe as props\n * do item: `<Menu.LinkItem render={<Link to=\"/pedidos\" />}>Pedidos</Menu.LinkItem>`.\n */\nexport const MenuLinkItem = (props: MenuLinkItemProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <BaseMenu.LinkItem\n      data-component=\"Menu.LinkItem\"\n      className={mergeStateClassNames(\n        menuItemVariants(variantProps),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuLinkItem.displayName = 'Menu.LinkItem';\n"],"mappings":";;;;;;AAeA,MAAM,oBAAoB,iBAAmC;;;;;;;;AAS7D,MAAa,gBAAgB,UAA6B;CACxD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO,CAC5D,aACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,UAAV;EACE,kBAAe;EACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,aAAa,cAAc"}

package/dist/components/overlays/menu/menu-list.d.ts

@@ -0,0 +1,25 @@
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-list.d.ts
+export type MenuListProps = Menu.List.Props;
+export type MenuListState = Menu.List.State;
+/**
+ * Lista rolável dos itens, dentro do `Menu.Popup`. Os itens de todo menu ficam nela: o popup não
+ * rola, e sem a lista um menu mais alto que a tela fica cortado. Com a busca, é onde o Base UI
+ * filtra os itens.
+ *
+ * Cópia do `Select.List`, a origem da lista rolável dos popups, onde a divisão com o popup está
+ * explicada. As diferenças:
+ * - sem `max-h-(--available-height)`: o teto fica no `Menu.Popup`, e a lista (`min-h-0`) encolhe
+ *   até caber nele;
+ * - `scroll-py-1`, o mesmo respiro do `py-1`, e `overscroll-contain`, para o fim da lista não
+ *   rolar a página;
+ * - `not-has-[>:not([hidden])]:py-0`: uma busca sem resultado esconde os grupos (`hidden`, que
+ *   seguem no DOM), e sem filho visível a lista perde o respiro acima do `Menu.Empty`;
+ * - a regra dos divisores dentro dos grupos, explicada no `Menu.Separator`.
+ */
+export declare const MenuList: {
+  (props: MenuListProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=menu-list.d.ts.map

package/dist/components/overlays/menu/menu-list.js

@@ -0,0 +1,43 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-list.tsx
+/**
+* Lista rolável dos itens, dentro do `Menu.Popup`. Os itens de todo menu ficam nela: o popup não
+* rola, e sem a lista um menu mais alto que a tela fica cortado. Com a busca, é onde o Base UI
+* filtra os itens.
+*
+* Cópia do `Select.List`, a origem da lista rolável dos popups, onde a divisão com o popup está
+* explicada. As diferenças:
+* - sem `max-h-(--available-height)`: o teto fica no `Menu.Popup`, e a lista (`min-h-0`) encolhe
+*   até caber nele;
+* - `scroll-py-1`, o mesmo respiro do `py-1`, e `overscroll-contain`, para o fim da lista não
+*   rolar a página;
+* - `not-has-[>:not([hidden])]:py-0`: uma busca sem resultado esconde os grupos (`hidden`, que
+*   seguem no DOM), e sem filho visível a lista perde o respiro acima do `Menu.Empty`;
+* - a regra dos divisores dentro dos grupos, explicada no `Menu.Separator`.
+*/
+const MenuList = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu.List, {
+		"data-component": "Menu.List",
+		className: mergeStateClassNames([
+			"relative",
+			"min-h-0",
+			"scroll-py-1",
+			"py-1",
+			"not-has-[>:not([hidden])]:py-0",
+			"overflow-y-auto",
+			"overscroll-contain",
+			"outline-none",
+			"[&>:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup'])>[data-component='Menu.Separator']:first-child]:hidden",
+			"[&>:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup']):not([hidden])~:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup']):not([hidden])>[data-component='Menu.Separator']:first-child]:block"
+		], className),
+		...rest
+	});
+};
+MenuList.displayName = "Menu.List";
+//#endregion
+export { MenuList };
+
+//# sourceMappingURL=menu-list.js.map

package/dist/components/overlays/menu/menu-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-list.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-list.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuListProps = BaseMenu.List.Props;\n\nexport type MenuListState = BaseMenu.List.State;\n\n/**\n * Lista rolável dos itens, dentro do `Menu.Popup`. Os itens de todo menu ficam nela: o popup não\n * rola, e sem a lista um menu mais alto que a tela fica cortado. Com a busca, é onde o Base UI\n * filtra os itens.\n *\n * Cópia do `Select.List`, a origem da lista rolável dos popups, onde a divisão com o popup está\n * explicada. As diferenças:\n * - sem `max-h-(--available-height)`: o teto fica no `Menu.Popup`, e a lista (`min-h-0`) encolhe\n *   até caber nele;\n * - `scroll-py-1`, o mesmo respiro do `py-1`, e `overscroll-contain`, para o fim da lista não\n *   rolar a página;\n * - `not-has-[>:not([hidden])]:py-0`: uma busca sem resultado esconde os grupos (`hidden`, que\n *   seguem no DOM), e sem filho visível a lista perde o respiro acima do `Menu.Empty`;\n * - a regra dos divisores dentro dos grupos, explicada no `Menu.Separator`.\n */\nexport const MenuList = (props: MenuListProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.List\n      data-component=\"Menu.List\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'min-h-0',\n\n          'scroll-py-1',\n          'py-1',\n          'not-has-[>:not([hidden])]:py-0',\n\n          'overflow-y-auto',\n          'overscroll-contain',\n          'outline-none',\n\n          // Divisor primeiro filho de um grupo: escondido, e só aparece com um grupo visível antes.\n          \"[&>:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup'])>[data-component='Menu.Separator']:first-child]:hidden\",\n          \"[&>:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup']):not([hidden])~:is([data-component='Menu.Group'],[data-component='Menu.RadioGroup']):not([hidden])>[data-component='Menu.Separator']:first-child]:block\",\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuList.displayName = 'Menu.List';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,MAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAGA;GACA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc"}

package/dist/components/overlays/menu/menu-popup.d.ts

@@ -4,15 +4,16 @@ export type MenuPopupProps = Menu.Popup.Props;
 export type MenuPopupState = Menu.Popup.State;
 /**
  * Caixa dos itens, com `role="menu"`. Tem no mínimo 8rem de largura e cresce com o texto dos
- * itens; acima do espaço livre na tela, ela mesma rola.
+ * itens, até o espaço livre na tela (`--available-height`). Não rola: os itens ficam num
+ * `Menu.List`, que encolhe e rola dentro dela, e sem ele o menu não rola. Sem `overflow` no popup,
+ * o `Menu.Arrow`, que avança para fora dele, não é cortado.
  *
  * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno,
- * sombra, cor do texto e animação estão explicados (tabela no README de `overlays`). As
- * diferenças:
- * - sem `--popover-padding` nem coluna flex: o popup é uma lista, com `py-1` acima e abaixo dos
- *   itens, e o realce de cada item já recua das laterais;
+ * sombra, cor do texto e animação estão explicados. As diferenças:
+ * - sem `--popover-padding`: o respiro de `py-1` acima e abaixo dos itens é do `Menu.List`, e o
+ *   realce de cada item já recua das laterais;
  * - largura mínima `min-w-32`;
- * - rola por inteiro (`overflow-y-auto`), e não por um `Body`.
+ * - a rolagem é do `Menu.List`, como no `Select.List`, e não de um `Body`.
  */
 export declare const MenuPopup: {
   (props: MenuPopupProps): import("react").JSX.Element;

package/dist/components/overlays/menu/menu-popup.js

@@ -4,15 +4,16 @@ import { Menu } from "@base-ui/react/menu";
 //#region src/components/overlays/menu/menu-popup.tsx
 /**
 * Caixa dos itens, com `role="menu"`. Tem no mínimo 8rem de largura e cresce com o texto dos
-* itens; acima do espaço livre na tela, ela mesma rola.
+* itens, até o espaço livre na tela (`--available-height`). Não rola: os itens ficam num
+* `Menu.List`, que encolhe e rola dentro dela, e sem ele o menu não rola. Sem `overflow` no popup,
+* o `Menu.Arrow`, que avança para fora dele, não é cortado.
 *
 * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno,
-* sombra, cor do texto e animação estão explicados (tabela no README de `overlays`). As
-* diferenças:
-* - sem `--popover-padding` nem coluna flex: o popup é uma lista, com `py-1` acima e abaixo dos
-*   itens, e o realce de cada item já recua das laterais;
+* sombra, cor do texto e animação estão explicados. As diferenças:
+* - sem `--popover-padding`: o respiro de `py-1` acima e abaixo dos itens é do `Menu.List`, e o
+*   realce de cada item já recua das laterais;
 * - largura mínima `min-w-32`;
-* - rola por inteiro (`overflow-y-auto`), e não por um `Body`.
+* - a rolagem é do `Menu.List`, como no `Select.List`, e não de um `Body`.
 */
 const MenuPopup = (props) => {
 	const { className, ...rest } = props;
@@ -20,14 +21,13 @@ const MenuPopup = (props) => {
 		"data-component": "Menu.Popup",
 		className: mergeStateClassNames([
 			"relative",
+			"flex",
+			"flex-col",
 			"h-(--popup-height,auto)",
 			"w-(--popup-width,auto)",
 			"max-h-(--available-height)",
 			"min-w-32",
 			"max-w-[min(calc(100dvw-1rem),var(--container-md))]",
-			"py-1",
-			"scroll-py-1",
-			"overflow-y-auto",
 			"rounded-md",
 			"corner-squircle",
 			"outline-1",

package/dist/components/overlays/menu/menu-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-popup.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-popup.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuPopupProps = BaseMenu.Popup.Props;\n\nexport type MenuPopupState = BaseMenu.Popup.State;\n\n/**\n * Caixa dos itens, com `role=\"menu\"`. Tem no mínimo 8rem de largura e cresce com o texto dos\n * itens; acima do espaço livre na tela, ela mesma rola.\n *\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno,\n * sombra, cor do texto e animação estão explicados (tabela no README de `overlays`). As\n * diferenças:\n * - sem `--popover-padding` nem coluna flex: o popup é uma lista, com `py-1` acima e abaixo dos\n *   itens, e o realce de cada item já recua das laterais;\n * - largura mínima `min-w-32`;\n * - rola por inteiro (`overflow-y-auto`), e não por um `Body`.\n */\nexport const MenuPopup = (props: MenuPopupProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.Popup\n      data-component=\"Menu.Popup\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'h-(--popup-height,auto)',\n          'w-(--popup-width,auto)',\n\n          'max-h-(--available-height)',\n          'min-w-32',\n          // Teto fixo, não por tamanho de tela: no celular vale a largura da tela menos um respiro.\n          'max-w-[min(calc(100dvw-1rem),var(--container-md))]',\n\n          'py-1',\n          'scroll-py-1',\n\n          'overflow-y-auto',\n\n          'rounded-md',\n          'corner-squircle',\n          'outline-1',\n          'outline-gray-6',\n\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'shadow-md',\n          'shadow-black/12',\n          'dark:shadow-none',\n\n          // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n          'text-sm',\n          'text-gray-12',\n\n          'not-motion-reduced:origin-(--transform-origin)',\n          'not-motion-reduced:transition-[width,height,opacity,scale]',\n          'not-motion-reduced:ease-enter',\n          'not-motion-reduced:duration-150',\n\n          'not-motion-reduced:data-starting-style:scale-95',\n          'not-motion-reduced:data-ending-style:scale-95',\n          'not-motion-reduced:data-ending-style:ease-exit',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'data-starting-style:opacity-0',\n          'data-ending-style:opacity-0',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuPopup.displayName = 'Menu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,OAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAGA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}
+{"version":3,"file":"menu-popup.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-popup.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuPopupProps = BaseMenu.Popup.Props;\n\nexport type MenuPopupState = BaseMenu.Popup.State;\n\n/**\n * Caixa dos itens, com `role=\"menu\"`. Tem no mínimo 8rem de largura e cresce com o texto dos\n * itens, até o espaço livre na tela (`--available-height`). Não rola: os itens ficam num\n * `Menu.List`, que encolhe e rola dentro dela, e sem ele o menu não rola. Sem `overflow` no popup,\n * o `Menu.Arrow`, que avança para fora dele, não é cortado.\n *\n * Cópia de `popoverPopupVariants`, a origem da superfície dos popups, onde fundo, contorno,\n * sombra, cor do texto e animação estão explicados. As diferenças:\n * - sem `--popover-padding`: o respiro de `py-1` acima e abaixo dos itens é do `Menu.List`, e o\n *   realce de cada item já recua das laterais;\n * - largura mínima `min-w-32`;\n * - a rolagem é do `Menu.List`, como no `Select.List`, e não de um `Body`.\n */\nexport const MenuPopup = (props: MenuPopupProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.Popup\n      data-component=\"Menu.Popup\"\n      className={mergeStateClassNames(\n        [\n          'relative',\n\n          'flex',\n          'flex-col',\n\n          'h-(--popup-height,auto)',\n          'w-(--popup-width,auto)',\n\n          'max-h-(--available-height)',\n          'min-w-32',\n          // Teto fixo, não por tamanho de tela: no celular vale a largura da tela menos um respiro.\n          'max-w-[min(calc(100dvw-1rem),var(--container-md))]',\n\n          'rounded-md',\n          'corner-squircle',\n          'outline-1',\n          'outline-gray-6',\n\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'shadow-md',\n          'shadow-black/12',\n          'dark:shadow-none',\n\n          // O popup vai para o `body` pelo portal: sem cor própria, o texto herdaria a do navegador.\n          'text-sm',\n          'text-gray-12',\n\n          'not-motion-reduced:origin-(--transform-origin)',\n          'not-motion-reduced:transition-[width,height,opacity,scale]',\n          'not-motion-reduced:ease-enter',\n          'not-motion-reduced:duration-150',\n\n          'not-motion-reduced:data-starting-style:scale-95',\n          'not-motion-reduced:data-ending-style:scale-95',\n          'not-motion-reduced:data-ending-style:ease-exit',\n          'not-motion-reduced:data-ending-style:duration-100',\n          'data-starting-style:opacity-0',\n          'data-ending-style:opacity-0',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nMenuPopup.displayName = 'Menu.Popup';\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,aAAa,UAA0B;CAClD,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,OAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GAEA;GACA;GAEA;GACA;GAEA;GACA;GAEA;GAEA;GACA;GACA;GACA;GAEA;GACA;GAEA;GACA;GACA;GAGA;GACA;GAEA;GACA;GACA;GACA;GAEA;GACA;GACA;GACA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,UAAU,cAAc"}

package/dist/components/overlays/menu/menu-positioner.d.ts

@@ -7,8 +7,12 @@ export type MenuPositionerState = Menu.Positioner.State;
  * centralizado, como no padrão do Base UI, o menu de um botão largo abriria longe do ponto
  * clicado.
  *
+ * Dentro de um `Menu.SubmenuRoot`, `sideOffset` e `alignOffset` valem por função: `-4` ao lado
+ * do trigger (`left` e `right`), que encosta o popup no pai e alinha o primeiro item ao do
+ * trigger (descontando o `py-1` do `List`), e `4` acima ou abaixo. As props de quem usa vencem.
+ *
  * Cópia do `Popover.Positioner`, a origem do positioner dos popups, onde o deslize entre
- * triggers está explicado (tabela no README de `overlays`). A diferença é o `align="start"`.
+ * triggers está explicado. As diferenças são o `align="start"` e os offsets do submenu.
  */
 export declare const MenuPositioner: {
   (props: MenuPositionerProps): import("react").JSX.Element;

package/dist/components/overlays/menu/menu-positioner.js

@@ -1,17 +1,25 @@
 import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useMenuSubmenuContext } from "./use-menu-submenu-context.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/overlays/menu/menu-positioner.tsx
+/** Offset do submenu: negativo ao lado do trigger, positivo acima ou abaixo. */
+const getSubmenuOffset = ({ side }) => side === "top" || side === "bottom" ? 4 : -4;
 /**
 * Posiciona o menu junto ao trigger, embaixo e alinhado à borda inicial dele (`align="start"`):
 * centralizado, como no padrão do Base UI, o menu de um botão largo abriria longe do ponto
 * clicado.
 *
+* Dentro de um `Menu.SubmenuRoot`, `sideOffset` e `alignOffset` valem por função: `-4` ao lado
+* do trigger (`left` e `right`), que encosta o popup no pai e alinha o primeiro item ao do
+* trigger (descontando o `py-1` do `List`), e `4` acima ou abaixo. As props de quem usa vencem.
+*
 * Cópia do `Popover.Positioner`, a origem do positioner dos popups, onde o deslize entre
-* triggers está explicado (tabela no README de `overlays`). A diferença é o `align="start"`.
+* triggers está explicado. As diferenças são o `align="start"` e os offsets do submenu.
 */
 const MenuPositioner = (props) => {
 	const { className, ...rest } = props;
+	const isSubmenu = useMenuSubmenuContext();
 	return /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-component": "Menu.Positioner",
 		className: mergeStateClassNames([
@@ -23,7 +31,8 @@ const MenuPositioner = (props) => {
 			"not-motion-reduced:ease-move",
 			"data-instant:transition-none"
 		], className),
-		sideOffset: 6,
+		sideOffset: isSubmenu ? getSubmenuOffset : 6,
+		alignOffset: isSubmenu ? getSubmenuOffset : void 0,
 		collisionPadding: 12,
 		align: "start",
 		...rest

package/dist/components/overlays/menu/menu-positioner.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-positioner.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-positioner.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuPositionerProps = BaseMenu.Positioner.Props;\n\nexport type MenuPositionerState = BaseMenu.Positioner.State;\n\n/**\n * Posiciona o menu junto ao trigger, embaixo e alinhado à borda inicial dele (`align=\"start\"`):\n * centralizado, como no padrão do Base UI, o menu de um botão largo abriria longe do ponto\n * clicado.\n *\n * Cópia do `Popover.Positioner`, a origem do positioner dos popups, onde o deslize entre\n * triggers está explicado (tabela no README de `overlays`). A diferença é o `align=\"start\"`.\n */\nexport const MenuPositioner = (props: MenuPositionerProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.Positioner\n      data-component=\"Menu.Positioner\"\n      className={mergeStateClassNames(\n        [\n          'w-(--positioner-width)',\n          'h-(--positioner-height)',\n          'max-w-(--available-width)',\n\n          'not-motion-reduced:transition-[top,left,right,bottom,transform]',\n          'not-motion-reduced:duration-200',\n          'not-motion-reduced:ease-move',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      sideOffset={6}\n      collisionPadding={12}\n      align=\"start\"\n      {...rest}\n    />\n  );\n};\n\nMenuPositioner.displayName = 'Menu.Positioner';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,YAAY;EACZ,kBAAkB;EAClB,OAAM;EACN,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}
+{"version":3,"file":"menu-positioner.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-positioner.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\nimport { useMenuSubmenuContext } from './use-menu-submenu-context';\n\nexport type MenuPositionerProps = BaseMenu.Positioner.Props;\n\nexport type MenuPositionerState = BaseMenu.Positioner.State;\n\n/** Offset do submenu: negativo ao lado do trigger, positivo acima ou abaixo. */\nconst getSubmenuOffset = ({ side }: { side: string }) =>\n  side === 'top' || side === 'bottom' ? 4 : -4;\n\n/**\n * Posiciona o menu junto ao trigger, embaixo e alinhado à borda inicial dele (`align=\"start\"`):\n * centralizado, como no padrão do Base UI, o menu de um botão largo abriria longe do ponto\n * clicado.\n *\n * Dentro de um `Menu.SubmenuRoot`, `sideOffset` e `alignOffset` valem por função: `-4` ao lado\n * do trigger (`left` e `right`), que encosta o popup no pai e alinha o primeiro item ao do\n * trigger (descontando o `py-1` do `List`), e `4` acima ou abaixo. As props de quem usa vencem.\n *\n * Cópia do `Popover.Positioner`, a origem do positioner dos popups, onde o deslize entre\n * triggers está explicado. As diferenças são o `align=\"start\"` e os offsets do submenu.\n */\nexport const MenuPositioner = (props: MenuPositionerProps) => {\n  const { className, ...rest } = props;\n\n  const isSubmenu = useMenuSubmenuContext();\n\n  return (\n    <BaseMenu.Positioner\n      data-component=\"Menu.Positioner\"\n      className={mergeStateClassNames(\n        [\n          'w-(--positioner-width)',\n          'h-(--positioner-height)',\n          'max-w-(--available-width)',\n\n          'not-motion-reduced:transition-[top,left,right,bottom,transform]',\n          'not-motion-reduced:duration-200',\n          'not-motion-reduced:ease-move',\n\n          'data-instant:transition-none',\n        ],\n        className,\n      )}\n      sideOffset={isSubmenu ? getSubmenuOffset : 6}\n      alignOffset={isSubmenu ? getSubmenuOffset : undefined}\n      collisionPadding={12}\n      align=\"start\"\n      {...rest}\n    />\n  );\n};\n\nMenuPositioner.displayName = 'Menu.Positioner';\n"],"mappings":";;;;;;AASA,MAAM,oBAAoB,EAAE,WAC1B,SAAS,SAAS,SAAS,WAAW,IAAI;;;;;;;;;;;;;AAc5C,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,YAAY,sBAAsB;CAExC,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBACT;GACE;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF,GACA,SACF;EACA,YAAY,YAAY,mBAAmB;EAC3C,aAAa,YAAY,mBAAmB,KAAA;EAC5C,kBAAkB;EAClB,OAAM;EACN,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/menu/menu-radio-group.d.ts

@@ -0,0 +1,17 @@
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-radio-group.d.ts
+export type MenuRadioGroupProps = Menu.RadioGroup.Props;
+export type MenuRadioGroupState = Menu.RadioGroup.State;
+export type MenuRadioGroupChangeEventReason = Menu.RadioGroup.ChangeEventReason;
+export type MenuRadioGroupChangeEventDetails = Menu.RadioGroup.ChangeEventDetails;
+/**
+ * Agrupa os `Menu.RadioItem` de uma escolha única, com `role="group"`. O valor do item marcado
+ * vem de `value` e `onValueChange`, ou fica com o grupo por `defaultValue`. Nomeie o grupo com um
+ * `Menu.GroupLabel`.
+ */
+export declare const MenuRadioGroup: {
+  (props: MenuRadioGroupProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=menu-radio-group.d.ts.map

package/dist/components/overlays/menu/menu-radio-group.js

@@ -0,0 +1,22 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-radio-group.tsx
+/**
+* Agrupa os `Menu.RadioItem` de uma escolha única, com `role="group"`. O valor do item marcado
+* vem de `value` e `onValueChange`, ou fica com o grupo por `defaultValue`. Nomeie o grupo com um
+* `Menu.GroupLabel`.
+*/
+const MenuRadioGroup = (props) => {
+	const { className, ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-component": "Menu.RadioGroup",
+		className: mergeStateClassNames([], className),
+		...rest
+	});
+};
+MenuRadioGroup.displayName = "Menu.RadioGroup";
+//#endregion
+export { MenuRadioGroup };
+
+//# sourceMappingURL=menu-radio-group.js.map

package/dist/components/overlays/menu/menu-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-group.js","names":["BaseMenu"],"sources":["../../../../src/components/overlays/menu/menu-radio-group.tsx"],"sourcesContent":["import { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { mergeStateClassNames } from '#utils';\n\nexport type MenuRadioGroupProps = BaseMenu.RadioGroup.Props;\n\nexport type MenuRadioGroupState = BaseMenu.RadioGroup.State;\n\nexport type MenuRadioGroupChangeEventReason =\n  BaseMenu.RadioGroup.ChangeEventReason;\n\nexport type MenuRadioGroupChangeEventDetails =\n  BaseMenu.RadioGroup.ChangeEventDetails;\n\n/**\n * Agrupa os `Menu.RadioItem` de uma escolha única, com `role=\"group\"`. O valor do item marcado\n * vem de `value` e `onValueChange`, ou fica com o grupo por `defaultValue`. Nomeie o grupo com um\n * `Menu.GroupLabel`.\n */\nexport const MenuRadioGroup = (props: MenuRadioGroupProps) => {\n  const { className, ...rest } = props;\n\n  return (\n    <BaseMenu.RadioGroup\n      data-component=\"Menu.RadioGroup\"\n      className={mergeStateClassNames([], className)}\n      {...rest}\n    />\n  );\n};\n\nMenuRadioGroup.displayName = 'Menu.RadioGroup';\n"],"mappings":";;;;;;;;;AAkBA,MAAa,kBAAkB,UAA+B;CAC5D,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAACA,KAAS,YAAV;EACE,kBAAe;EACf,WAAW,qBAAqB,CAAC,GAAG,SAAS;EAC7C,GAAI;CACL,CAAA;AAEL;AAEA,eAAe,cAAc"}

package/dist/components/overlays/menu/menu-radio-item-indicator.d.ts

@@ -0,0 +1,16 @@
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/overlays/menu/menu-radio-item-indicator.d.ts
+export type MenuRadioItemIndicatorProps = Menu.RadioItemIndicator.Props;
+export type MenuRadioItemIndicatorState = Menu.RadioItemIndicator.State;
+/**
+ * Ponto da opção marcada, à esquerda do texto: um círculo cheio na cor do texto (`bg-current`),
+ * centrado numa caixa de `1em`, a mesma medida do check do `Menu.CheckboxItemIndicator`. Fica
+ * sempre no DOM (`keepMounted` por padrão; `keepMounted={false}` o remove) e some só visualmente
+ * quando a opção está desmarcada (`data-unchecked`): a coluna não muda de largura ao marcar.
+ */
+export declare const MenuRadioItemIndicator: {
+  (props: MenuRadioItemIndicatorProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=menu-radio-item-indicator.d.ts.map