{
  "name": "MenuSection",
  "source": "../../node_modules/.pnpm/react-stately@3.48.0_react@19.2.8/node_modules/react-stately/dist/types/src/collections/Section.d.ts",
  "propsType": null,
  "import": "import { MenuSection } from 'ionbase-ui';",
  "status": "stable",
  "summary": "A named group of MenuItems. Re-exported from react-stately's collection Section — `title` is Figma's Menu Section Title.",
  "useWhen": [
    "a Menu has more than one kind of action, such as editing actions and destructive ones",
    "the rows fall into groups the user scans by name"
  ],
  "useInstead": [
    {
      "when": "the menu has one group",
      "use": "MenuItem",
      "why": "a single section adds a heading the user must hear before every menu, and says nothing the menu's own label does not"
    }
  ],
  "composition": {
    "order": [
      "Menu",
      "MenuSection",
      "MenuItem"
    ],
    "note": "A collection element: Menu reads it from its direct children. With `title`, the heading is drawn with a rule after it; without one, `aria-label` names the group and a rule is drawn above it instead.",
    "example": "<MenuSection title=\"Sort by\"><MenuItem key=\"name\">Name</MenuItem><MenuItem key=\"updated\">Last updated</MenuItem></MenuSection>"
  },
  "a11y": {
    "role": "group",
    "guarantees": [
      "the group is named by its title, so a screen reader announces it on entering the first row"
    ],
    "requires": [
      "a `title`; an untitled section still needs a label for the group, or it is announced as an unnamed group"
    ],
    "notes": [
      "The accessible-name lint rule is deliberately not driven from here: a titled section is named by its title and needs nothing more, so demanding a label on every MenuSection would be wrong for the common case."
    ]
  },
  "antiPatterns": [
    {
      "dont": "nesting a MenuSection inside another",
      "why": "a menu has one level of grouping; a section inside a section renders nothing"
    }
  ],
  "stylesheet": "src/styles/menu.css",
  "tokens": [
    "--border-focus",
    "--border-strong",
    "--border-subtle",
    "--border-width-default",
    "--border-width-thick",
    "--font-family-sans",
    "--font-weight-regular",
    "--icon-default",
    "--icon-disabled",
    "--icon-primary",
    "--icon-size-sm",
    "--ion-menu-min-width",
    "--ion-shadow-shadow-lg",
    "--radius-sm",
    "--radius-xl",
    "--spacing-12",
    "--spacing-2",
    "--spacing-4",
    "--spacing-40",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-hover",
    "--surface-primary-subtle",
    "--text-disabled",
    "--text-primary",
    "--text-secondary",
    "--text-tertiary",
    "--type-body",
    "--type-body-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {},
  "propCounts": {
    "own": 0,
    "aria": 0,
    "dom": 0,
    "other": 0
  }
}