@a4ui/core 0.37.1 → 0.38.0

package/src/ui/InputGroup.tsx

@@ -0,0 +1,219 @@
+// InputGroup — one bordered, focus-ringed shell around a borderless input or
+// textarea plus addons (icons, text, buttons, hints) on any side. The group
+// owns the border and the focus ring (focus-within via the shared `a4-field`
+// class), so the inner controls draw none of their own.
+import type { JSX, ParentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+
+export interface InputGroupProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string
+}
+
+/**
+ * Wrapper that owns a single border and focus ring for an input and its addons.
+ * Addons are placed by their `align` prop, whatever their order in the DOM.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon><Search class="h-4 w-4" /></InputGroupAddon>
+ *   <InputGroupInput value={q()} onInput={setQ} placeholder="Search" />
+ * </InputGroup>
+ * ```
+ */
+export function InputGroup(props: InputGroupProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <div
+      role="group"
+      data-slot="input-group"
+      class={cn(
+        'a4-field group/input-group relative flex w-full min-w-0 flex-wrap items-center rounded-md border border-input bg-background text-sm text-foreground',
+        'has-[[data-slot=input-group-control][aria-invalid=true]]:border-destructive',
+        'has-[[data-slot=input-group-control]:disabled]:opacity-50',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+export type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end'
+
+export interface InputGroupAddonProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+  /** Where the addon sits. Defaults to `inline-start`. */
+  align?: InputGroupAddonAlign
+  class?: string
+}
+
+// Inline addons share the control's row (control is flex-1); block addons take
+// a full row above/below it via `basis-full` + flex-wrap on the group.
+const ADDON_ALIGN: Record<InputGroupAddonAlign, string> = {
+  'inline-start': 'order-1 pl-3',
+  'inline-end': 'order-3 pr-3',
+  'block-start': 'order-0 basis-full px-3 pt-2',
+  'block-end': 'order-4 basis-full px-3 pb-2',
+}
+
+/**
+ * Adornment around the control. Clicking anywhere on it (except on a button)
+ * focuses the group's input or textarea.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon>
+ * ```
+ */
+export function InputGroupAddon(props: InputGroupAddonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'align', 'children', 'onClick'])
+  const align = (): InputGroupAddonAlign => local.align ?? 'inline-start'
+  return (
+    <div
+      role="presentation"
+      data-slot="input-group-addon"
+      data-align={align()}
+      class={cn(
+        'flex cursor-text select-none items-center gap-2 py-1.5 text-sm text-muted-foreground [&>svg]:h-4 [&>svg]:w-4',
+        ADDON_ALIGN[align()],
+        local.class,
+      )}
+      onClick={(e) => {
+        if (typeof local.onClick === 'function') local.onClick(e)
+        if ((e.target as HTMLElement).closest('button')) return
+        e.currentTarget.parentElement?.querySelector<HTMLElement>('[data-slot=input-group-control]')?.focus()
+      }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/**
+ * Plain text inside an addon (a prefix like `https://` or a unit).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
+ * ```
+ */
+export function InputGroupText(props: ParentProps<{ class?: string }>): JSX.Element {
+  return (
+    <span
+      class={cn('flex items-center gap-2 text-sm text-muted-foreground [&>svg]:h-4 [&>svg]:w-4', props.class)}
+    >
+      {props.children}
+    </span>
+  )
+}
+
+/** Compact sizes for {@link InputGroupButton}. */
+export type InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm'
+
+const BUTTON_SIZE: Record<InputGroupButtonSize, string> = {
+  xs: 'h-6 gap-1 rounded px-2 py-0 text-xs',
+  sm: 'h-7 gap-1.5 px-2.5 py-0 text-sm',
+  'icon-xs': 'h-6 w-6 rounded p-0',
+  'icon-sm': 'h-7 w-7 p-0',
+}
+
+export interface InputGroupButtonProps
+  extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** Compact size. Defaults to `xs`. */
+  size?: InputGroupButtonSize
+  /** Button variant; ghost by default so it blends into the group. */
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+  type?: 'button' | 'submit' | 'reset'
+  class?: string
+}
+
+/**
+ * Compact {@link Button} for use inside an addon. Ghost by default.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupButton size="icon-xs" aria-label="Show password"><Eye /></InputGroupButton>
+ * ```
+ */
+export function InputGroupButton(props: InputGroupButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'size', 'variant', 'children'])
+  return (
+    <Button
+      variant={local.variant ?? 'ghost'}
+      class={cn('shadow-none [&>svg]:h-3.5 [&>svg]:w-3.5', BUTTON_SIZE[local.size ?? 'xs'], local.class)}
+      {...rest}
+    >
+      {local.children}
+    </Button>
+  )
+}
+
+const CONTROL_BASE =
+  'order-2 min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-foreground shadow-none outline-none ring-0 placeholder:text-muted-foreground disabled:cursor-not-allowed'
+
+export interface InputGroupInputProps extends Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onInput'
+> {
+  value: string
+  /** Called with the raw string value on every input event. */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Borderless `<input>` for an {@link InputGroup} (same value/onInput API as `Input`).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupInput value={url()} onInput={setUrl} placeholder="example.com" />
+ * ```
+ */
+export function InputGroupInput(props: InputGroupInputProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <input
+      data-slot="input-group-control"
+      class={cn(CONTROL_BASE, local.class)}
+      value={local.value}
+      onInput={(e) => local.onInput(e.currentTarget.value)}
+      {...rest}
+    />
+  )
+}
+
+export interface InputGroupTextareaProps extends Omit<
+  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'value' | 'onInput'
+> {
+  value: string
+  /** Called with the new string value on every input event. */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Borderless `<textarea>` for an {@link InputGroup}.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupTextarea value={msg()} onInput={setMsg} rows={3} />
+ * ```
+ */
+export function InputGroupTextarea(props: InputGroupTextareaProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <textarea
+      data-slot="input-group-control"
+      class={cn(CONTROL_BASE, 'min-h-[72px] resize-none', local.class)}
+      value={local.value}
+      onInput={(e) => local.onInput(e.currentTarget.value)}
+      {...rest}
+    />
+  )
+}

package/src/ui/Item.tsx

@@ -0,0 +1,185 @@
+// Composable row primitive: media + title/description + actions, with optional
+// header/footer. Plain HTML + Tailwind. `List` stays the data-driven shortcut;
+// `Item` is the building block when a row needs custom structure (attachments,
+// settings rows, sidebar entries, notification rows).
+import { splitProps, type JSX, type ParentProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+export type ItemVariant = 'default' | 'outline' | 'muted'
+export type ItemSize = 'default' | 'sm' | 'xs'
+
+interface ItemProps extends ParentProps {
+  /** @default 'default' (transparent) */
+  variant?: ItemVariant
+  /** Padding + gap density. @default 'default' */
+  size?: ItemSize
+  /**
+   * Render the row as a link. The whole row becomes the hit target and gets a
+   * hover/focus state.
+   */
+  href?: string
+  /** Render the row as a `<button>` with this click handler (when no `href`). */
+  onClick?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>
+  /** Element to render when neither `href` nor `onClick` is set. @default 'div' */
+  as?: 'div' | 'li' | 'article' | 'section'
+  class?: string
+}
+
+export type { ItemProps }
+
+const VARIANT: Record<ItemVariant, string> = {
+  default: 'border border-transparent',
+  outline: 'border border-border',
+  muted: 'border border-transparent bg-muted/50',
+}
+
+const SIZE: Record<ItemSize, string> = {
+  default: 'gap-4 p-4',
+  sm: 'gap-3 px-3 py-2.5',
+  xs: 'gap-2 px-2 py-1.5 text-sm',
+}
+
+/**
+ * A row of content: optional `ItemMedia`, an `ItemContent` column with
+ * `ItemTitle`/`ItemDescription`, and trailing `ItemActions`. `ItemHeader` and
+ * `ItemFooter` span the full width above/below. Group rows with `ItemGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon"><Bell /></ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Weekly digest</ItemTitle>
+ *     <ItemDescription>Every Monday at 9:00</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions><Switch checked /></ItemActions>
+ * </Item>
+ * ```
+ */
+export function Item(props: ItemProps): JSX.Element {
+  const [local] = splitProps(props, ['variant', 'size', 'href', 'onClick', 'as', 'class', 'children'])
+  const interactive = (): boolean => local.href !== undefined || local.onClick !== undefined
+  const tag = (): string => (local.href !== undefined ? 'a' : local.onClick ? 'button' : (local.as ?? 'div'))
+  return (
+    <Dynamic
+      component={tag()}
+      href={local.href}
+      type={tag() === 'button' ? 'button' : undefined}
+      onClick={local.onClick}
+      data-slot="item"
+      data-variant={local.variant ?? 'default'}
+      data-size={local.size ?? 'default'}
+      class={cn(
+        'group/item flex w-full flex-wrap items-center rounded-lg text-left text-foreground outline-none transition-colors',
+        VARIANT[local.variant ?? 'default'],
+        SIZE[local.size ?? 'default'],
+        interactive() && 'cursor-pointer hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring',
+        local.class,
+      )}
+    >
+      {local.children}
+    </Dynamic>
+  )
+}
+
+interface SlotProps extends ParentProps {
+  class?: string
+}
+
+/** Vertical stack of `Item`s. */
+export function ItemGroup(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-group" class={cn('flex flex-col', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+/** Thin divider between `Item`s inside an `ItemGroup`. */
+export function ItemSeparator(props: { class?: string }): JSX.Element {
+  return <div role="separator" data-slot="item-separator" class={cn('mx-4 h-px bg-border', props.class)} />
+}
+
+export type ItemMediaVariant = 'default' | 'icon' | 'image'
+
+const MEDIA: Record<ItemMediaVariant, string> = {
+  default: '',
+  icon: 'grid h-9 w-9 place-items-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:h-4 [&>svg]:w-4',
+  image: 'h-10 w-10 overflow-hidden rounded-md [&>img]:h-full [&>img]:w-full [&>img]:object-cover',
+}
+
+/** Leading visual: an icon tile, an image thumbnail, or anything (`default`). */
+export function ItemMedia(props: SlotProps & { variant?: ItemMediaVariant }): JSX.Element {
+  return (
+    <div
+      data-slot="item-media"
+      class={cn('flex shrink-0 items-center justify-center', MEDIA[props.variant ?? 'default'], props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** The flexible text column (title + description). */
+export function ItemContent(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-content" class={cn('flex min-w-0 flex-1 flex-col gap-0.5', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+export function ItemTitle(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-title"
+      class={cn('flex items-center gap-2 text-sm font-medium leading-snug', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** Muted secondary text, clamped to two lines. */
+export function ItemDescription(props: SlotProps): JSX.Element {
+  return (
+    <p data-slot="item-description" class={cn('line-clamp-2 text-sm text-muted-foreground', props.class)}>
+      {props.children}
+    </p>
+  )
+}
+
+/** Trailing controls (buttons, a switch, a badge). */
+export function ItemActions(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-actions" class={cn('flex shrink-0 items-center gap-2', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+/** Full-width row above the media/content line. */
+export function ItemHeader(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-header"
+      class={cn('flex basis-full items-center justify-between gap-2', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** Full-width row below the media/content line. */
+export function ItemFooter(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-footer"
+      class={cn('flex basis-full items-center justify-between gap-2', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/ui/Label.tsx

@@ -0,0 +1,50 @@
+import { Show, splitProps, type JSX, type ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface LabelProps extends ParentProps, Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, 'for'> {
+  /** Id of the control this label names. */
+  for?: string
+  /** Appends an `*` marker (hidden from assistive tech; set `required` on the control too). */
+  required?: boolean
+  /** Dims the label. It also dims when it follows a disabled `.peer` control. */
+  disabled?: boolean
+  class?: string
+}
+
+export type { LabelProps }
+
+/**
+ * Styled `<label>`. Clicking it focuses/activates the control matching `for`.
+ * Dims when `disabled`, inside a `.group` with `data-disabled`, or after a
+ * disabled `.peer` control.
+ *
+ * @example
+ * ```tsx
+ * <Label for="email" required>Email</Label>
+ * <Input id="email" value={email()} onInput={setEmail} required />
+ * ```
+ */
+export function Label(props: LabelProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['required', 'disabled', 'class', 'children'])
+  return (
+    <label
+      data-disabled={local.disabled ? '' : undefined}
+      class={cn(
+        'inline-flex select-none items-center gap-1 text-sm font-medium leading-none text-foreground',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-50',
+        'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={local.required}>
+        <span aria-hidden="true" class="text-destructive">
+          *
+        </span>
+      </Show>
+    </label>
+  )
+}

package/src/ui/Menubar.tsx

@@ -0,0 +1,212 @@
+// Application menubar (File / Edit / View …) on Kobalte's Menubar primitive:
+// roving focus across the top-level triggers, hover-to-switch once a menu is
+// open, checkbox/radio items and nested submenus. Styled with the same glass
+// overlay surface as the other menus.
+import { Menubar as KMenubar } from '@kobalte/core/menubar'
+import { Check, ChevronRight, Circle } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Kbd } from './Kbd'
+
+const CONTENT =
+  'bg-glass z-50 min-w-[12rem] overflow-hidden rounded-xl p-1 text-sm text-foreground shadow-xl outline-none'
+const ITEM =
+  'relative flex cursor-pointer select-none items-center gap-2 rounded-md py-1.5 pl-8 pr-2 outline-none transition-colors data-[highlighted]:bg-muted data-[expanded]:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:ring-2 focus-visible:ring-ring'
+
+interface ClassProps extends ParentProps {
+  class?: string
+}
+
+/** Props of {@link Menubar}. */
+export interface MenubarProps extends ClassProps {
+  /** Accessible name of the menubar. @default 'Application menu' */
+  label?: string
+}
+
+/**
+ * Horizontal bar of top-level menus. Arrow Left/Right moves between the
+ * triggers; once one menu is open, hovering another trigger switches to it.
+ *
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu label="File">
+ *     <MenubarItem shortcut={['⌘', 'N']}>New project</MenubarItem>
+ *     <MenubarSeparator />
+ *     <MenubarItem>Quit</MenubarItem>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ */
+export function Menubar(props: MenubarProps): JSX.Element {
+  return (
+    <KMenubar
+      aria-label={props.label ?? 'Application menu'}
+      class={cn(
+        'inline-flex items-center gap-0.5 rounded-xl border border-border bg-card/60 p-1',
+        props.class,
+      )}
+    >
+      {props.children}
+    </KMenubar>
+  )
+}
+
+/** Props of {@link MenubarMenu}. */
+export interface MenubarMenuProps extends ClassProps {
+  /** Text of the top-level trigger. */
+  label: string
+  /** Extra classes for the popover content. */
+  contentClass?: string
+}
+
+/** One top-level menu: a trigger button plus its popover of items. */
+export function MenubarMenu(props: MenubarMenuProps): JSX.Element {
+  return (
+    <KMenubar.Menu>
+      <KMenubar.Trigger
+        class={cn(
+          'rounded-lg px-3 py-1.5 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted data-[expanded]:bg-muted focus-visible:ring-2 focus-visible:ring-ring',
+          props.class,
+        )}
+      >
+        {props.label}
+      </KMenubar.Trigger>
+      <KMenubar.Portal>
+        <KMenubar.Content class={cn(CONTENT, props.contentClass)}>{props.children}</KMenubar.Content>
+      </KMenubar.Portal>
+    </KMenubar.Menu>
+  )
+}
+
+/** Props of {@link MenubarItem}. */
+export interface MenubarItemProps extends ClassProps {
+  disabled?: boolean
+  /** Called when the item is chosen (click, Enter or Space). */
+  onSelect?: () => void
+  /** Keys shown right-aligned as keycaps, e.g. `['⌘', 'N']`. */
+  shortcut?: string[]
+  /** Styles the item as destructive (e.g. "Delete"). */
+  destructive?: boolean
+}
+
+function Shortcut(props: { keys?: string[] }): JSX.Element {
+  return (
+    <Show when={props.keys?.length}>
+      <span class="ml-auto flex gap-0.5 pl-6" aria-hidden="true">
+        <For each={props.keys}>{(k) => <Kbd class="min-w-[1.25rem] px-1 py-0 text-[11px]">{k}</Kbd>}</For>
+      </span>
+    </Show>
+  )
+}
+
+/** A plain action row, with an optional keyboard-shortcut hint. */
+export function MenubarItem(props: MenubarItemProps): JSX.Element {
+  return (
+    <KMenubar.Item
+      class={cn(ITEM, props.destructive && 'text-destructive', props.class)}
+      disabled={props.disabled}
+      onSelect={() => props.onSelect?.()}
+    >
+      {props.children}
+      <Shortcut keys={props.shortcut} />
+    </KMenubar.Item>
+  )
+}
+
+/** Props of {@link MenubarCheckboxItem}. */
+export interface MenubarCheckboxItemProps extends ClassProps {
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  disabled?: boolean
+  shortcut?: string[]
+}
+
+/** A toggle row exposing `role="menuitemcheckbox"` / `aria-checked`. */
+export function MenubarCheckboxItem(props: MenubarCheckboxItemProps): JSX.Element {
+  return (
+    <KMenubar.CheckboxItem
+      class={cn(ITEM, props.class)}
+      checked={props.checked}
+      onChange={(v) => props.onChange?.(v)}
+      disabled={props.disabled}
+    >
+      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+        <Check class="h-3.5 w-3.5" />
+      </KMenubar.ItemIndicator>
+      {props.children}
+      <Shortcut keys={props.shortcut} />
+    </KMenubar.CheckboxItem>
+  )
+}
+
+/** Props of {@link MenubarRadioGroup}. */
+export interface MenubarRadioGroupProps extends ParentProps {
+  value?: string
+  onChange?: (value: string) => void
+}
+
+/** Groups {@link MenubarRadioItem}s so exactly one is selected. */
+export function MenubarRadioGroup(props: MenubarRadioGroupProps): JSX.Element {
+  return (
+    <KMenubar.RadioGroup value={props.value} onChange={(v) => props.onChange?.(v)}>
+      {props.children}
+    </KMenubar.RadioGroup>
+  )
+}
+
+/** Props of {@link MenubarRadioItem}. */
+export interface MenubarRadioItemProps extends ClassProps {
+  value: string
+  disabled?: boolean
+}
+
+/** A single-choice row inside a {@link MenubarRadioGroup} (`role="menuitemradio"`). */
+export function MenubarRadioItem(props: MenubarRadioItemProps): JSX.Element {
+  return (
+    <KMenubar.RadioItem class={cn(ITEM, props.class)} value={props.value} disabled={props.disabled}>
+      <KMenubar.ItemIndicator class="absolute left-2 inline-flex items-center">
+        <Circle class="h-2 w-2 fill-current" />
+      </KMenubar.ItemIndicator>
+      {props.children}
+    </KMenubar.RadioItem>
+  )
+}
+
+/** Props of {@link MenubarSub}. */
+export interface MenubarSubProps extends ClassProps {
+  /** Text of the submenu trigger row. */
+  label: string
+}
+
+/** A nested submenu: opens with ArrowRight / hover, closes with ArrowLeft. */
+export function MenubarSub(props: MenubarSubProps): JSX.Element {
+  return (
+    <KMenubar.Sub overlap gutter={4} shift={-5}>
+      <KMenubar.SubTrigger class={cn(ITEM, props.class)}>
+        {props.label}
+        <ChevronRight class="ml-auto h-3.5 w-3.5 text-muted-foreground" />
+      </KMenubar.SubTrigger>
+      <KMenubar.Portal>
+        <KMenubar.SubContent class={CONTENT}>{props.children}</KMenubar.SubContent>
+      </KMenubar.Portal>
+    </KMenubar.Sub>
+  )
+}
+
+/** Thin divider between groups of items. */
+export function MenubarSeparator(props: { class?: string }): JSX.Element {
+  return <KMenubar.Separator class={cn('-mx-1 my-1 h-px border-0 bg-border', props.class)} />
+}
+
+/** Non-interactive section heading inside a menu. */
+export function MenubarLabel(props: ClassProps): JSX.Element {
+  const [local] = splitProps(props, ['class', 'children'])
+  return (
+    <div class={cn('px-2 py-1.5 pl-8 text-xs font-semibold text-muted-foreground', local.class)}>
+      {local.children}
+    </div>
+  )
+}