@estiva-app/ui 0.24.1 → 0.25.0

package/src/Menu.mdx

@@ -140,8 +140,11 @@ Four surfaces used to claim menu items of nothing.
 
 A menu whose rows are `px-3` (tall picker rows) aligns its headings by passing
 `className="px-3"` to `MenuSection` — the heading row is `px-2` by default,
-matching the default rows. A `Divider` inside a menu needs nothing: the panel
-already runs it the width of the rows it separates.
+matching the default rows.
+
+**Between groups, a `MenuSeparator`**: the line, the width of the rows it
+separates, with its own 4px above and below. Not a `Divider`, whose room is
+its caller's.
 
 ## Props
 

package/src/Menu.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconCopy, IconDots, IconPencil, IconSquareRounded, IconTrash } from '@tabler/icons-react'
 import { Button } from './Button'
-import { Divider } from './Divider'
 import { IconButton } from './IconButton'
-import { Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub } from './Menu'
+import { Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSeparator, MenuSub } from './Menu'
 import { SectionLabel } from './SectionLabel'
 
 /**
@@ -41,7 +40,7 @@ export const Items: Story = {
     <MenuPanel className="min-w-[180px]">
       <MenuItem label="Rename" leading={icon(IconPencil)} onClick={() => {}} />
       <MenuItem label="Duplicate" leading={icon(IconCopy)} shortcut="Ctrl+D" onClick={() => {}} />
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
     </MenuPanel>
   ),
@@ -57,7 +56,7 @@ export const Sections: Story = {
         <MenuItem label="Item one" selected onClick={() => {}} />
         <MenuItem label="Item two" onClick={() => {}} />
       </MenuSection>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuSection label="Another section">
         <MenuItem label="Option one" onClick={() => {}} />
         <MenuItem label="Option two" onClick={() => {}} />
@@ -75,7 +74,7 @@ export const WithARow: Story = {
         <span className="min-w-0 flex-1 truncate text-body-2 text-text-primary">Item one</span>
         <SectionLabel tone="secondary">Label</SectionLabel>
       </MenuRow>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="An action" onClick={() => {}} />
     </MenuPanel>
   ),
@@ -99,7 +98,7 @@ export const FromATrigger: Story = {
         <MenuItem label="Item two" onClick={() => {}} />
         <MenuItem label="Item three" onClick={() => {}} />
       </MenuSub>
-      <Divider className="my-1" />
+      <MenuSeparator />
       <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
     </Menu>
   ),
@@ -149,7 +148,7 @@ export const OnACard: Story = {
             <MenuItem label="Item two" onClick={() => {}} />
           </MenuSub>
         </MenuSection>
-        <Divider className="my-1" />
+        <MenuSeparator />
         <MenuItem label="Delete" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
       </Menu>
     </div>

package/src/Menu.test.tsx

@@ -11,7 +11,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Button } from './Button'
-import { Menu, MenuItem, MenuPanel, MenuSection, MenuSub } from './Menu'
+import { Menu, MenuItem, MenuPanel, MenuSection, MenuSeparator, MenuSub } from './Menu'
 
 afterEach(cleanup)
 
@@ -269,6 +269,24 @@ describe('Menu', () => {
  * plugin already owns the keyboard — so `MenuItem` and `MenuSection` have to
  * work with no `Menu` above them.
  */
+describe('MenuSeparator', () => {
+  // UIG-14: the line between groups brings its own 4px above and below; a plain
+  // Divider left that to each caller, and Peek's main menus had none.
+  it('is a separator with its own room, the width of the rows', async () => {
+    render(
+      <Menu open trigger={<Button>More</Button>}>
+        <MenuItem label="One" />
+        <MenuSeparator />
+        <MenuItem label="Two" />
+      </Menu>,
+    )
+    const line = await screen.findByRole('separator')
+    const classes = (line.getAttribute('class') ?? '').split(' ')
+    expect(classes).toContain('my-1')
+    expect(classes).toContain('mx-0')
+  })
+})
+
 describe('rows on a bare MenuPanel', () => {
   /**
    * It is a button, and it does NOT claim to be a menu item. ARIA requires a

package/src/Menu.tsx

@@ -2,7 +2,7 @@ import { createContext, useContext, type ComponentPropsWithRef, type ReactElemen
 import { IconChevronRight } from '@tabler/icons-react'
 import { Menu as BaseMenu } from '@base-ui/react/menu'
 import { cn } from './cn'
-import { DividerInPanel } from './Divider'
+import { Divider, DividerInPanel } from './Divider'
 import { triggerDisabled } from './triggerDisabled'
 import { ScrollArea } from './ScrollArea'
 import { Kbd } from './Kbd'
@@ -590,6 +590,16 @@ export function MenuSection({ label, children, className }: { label: string; chi
   )
 }
 
+/**
+ * The line between two groups of a menu, with its own 4px above and below
+ * (UIG-14, Katerina 19 September). A plain `Divider` left that room to each
+ * caller, and Peek's menus drew it three ways — none, 4px, 4px and inset — so
+ * the lines in its main menus touched the rows.
+ */
+export function MenuSeparator() {
+  return <Divider className="my-1" />
+}
+
 /** A non-interactive row inside a menu, at the item's own geometry. */
 export function MenuRow({ children, className }: { children: ReactNode; className?: string }) {
   return <div className={cn('flex items-center gap-2 px-2 py-1.5', className)}>{children}</div>

package/src/SectionHeader.mdx

@@ -16,6 +16,9 @@ title the toggle — that is where a section folds.
 
 - A sidebar or panel section that carries its own actions — add, sort,
   filter.
+- **A heading over a group of rows, even with nothing to act on**: no
+  `actions`, and `hover="none"` so the row stays still under the pointer.
+  Never a row drawn by hand with a SectionLabel in it.
 - `showActions="always"` keeps the actions visible — for touch, or for a
   section whose actions are the point.
 
@@ -25,7 +28,8 @@ title the toggle — that is where a section folds.
 
 - A section that opens and closes → **CollapsibleSection**: the header,
   the rows, the slide, and a `storageKey` that remembers.
-- A title with no chevron and no actions → **SectionLabel** alone.
+- A label inside a row of another shape — a dialog's section, a panel's
+  title, a card's line → **SectionLabel**.
 - A heading inside a menu → **MenuSection**.
 - Page-level headings → the `h*` type tokens.
 

package/src/SectionLabel.mdx

@@ -15,13 +15,15 @@ how).
 ## When
 
 - **It is a bare label**: the row it sits in, and the room around it, are yours.
-- Titling a group of rows in a sidebar, a panel, a rail.
+- A label inside a row of another shape: a dialog's section, a panel's
+  title, a card's line.
 - Inside a menu it arrives via **MenuSection** — don't place it there by
   hand.
 
 ## When not
 
-- A heading that also collapses or carries actions → **SectionHeader**.
+- A heading over a group of rows → **SectionHeader**, even with nothing to
+  act on; a group that folds → **CollapsibleSection**.
 - The label above a stacked control → **Property** `stacked` — a field
   label is a different voice, at a different size, on purpose.
 - Page-level headings → the `h*` type tokens.

package/src/index.ts

@@ -60,10 +60,11 @@ export { DialogShell, type DialogShellProps } from './DialogShell'
 export { Divider, type DividerProps } from './Divider'
 export { EditableText, type EditableTextProps } from './EditableText'
 export { EmptyState, type EmptyStateProps } from './EmptyState'
+export { ErrorBoundary, type ErrorBoundaryProps } from './ErrorBoundary'
 export { ProgressBar, type ProgressBarProps, type ProgressBarVariant } from './ProgressBar'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
-export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
+export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSeparator, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 84 names over 55 files: 77 components, 6 helpers and 1 hook (ListColumn and ToolbarLink joined in UIG-14)', () => {
+  it('counts 86 names over 56 files: 79 components, 6 helpers and 1 hook (ErrorBoundary and MenuSeparator joined in UIG-14)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 77, helper: 6, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(55)
+    expect(kinds).toEqual({ component: 79, helper: 6, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(56)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(55)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(29)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(56)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(30)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {
@@ -278,7 +278,7 @@ describe('the ids point at something', () => {
 describe('a second parser agrees', async () => {
   const docgen = await import('react-docgen').catch(() => null)
 
-  it.skipIf(!docgen)('finds the same props on all 77 components', async () => {
+  it.skipIf(!docgen)('finds the same props on all 79 components', async () => {
     if (!docgen) return
     const resolver = new docgen.builtinResolvers.FindExportedDefinitionsResolver({ limit: 0 })
     const byName = new Map(registry.entries.map((one) => [one.name, one]))