@salemcobalt/ui 0.1.0 → 0.2.0-rc.0

package/README.md

@@ -1,24 +1,40 @@
 # @salemcobalt/ui
 
-React 19 components for the Salem Cobalt design system: `Button`, `Badge`, `Card`, `Stack`, `Inline`, `Kbd`, `Dialog`. Requires `@salemcobalt/tokens`.
+React 19 components for the Salem Cobalt design system: `Button`, `IconButton`, `Icon` and a shipped icon set, `Badge`, `Card`, `Stack`, `Inline`, `Kbd`, `Dialog`, `Tooltip`, `Menu`. Requires `@salemcobalt/tokens`.
 
 ```ts
 import '@salemcobalt/tokens/css'; // custom properties, light + dark
 import '@salemcobalt/ui/fonts'; // self-hosted IBM Plex Sans (variable) and Plex Mono, optional
 import '@salemcobalt/ui/styles.css'; // the components, inside @layer sc
-import { Button, Badge, Card, Stack, Inline, Kbd, Dialog } from '@salemcobalt/ui';
+import {
+  Button,
+  IconButton,
+  Badge,
+  Card,
+  Stack,
+  Inline,
+  Kbd,
+  Dialog,
+  Tooltip,
+  Menu,
+  PlusIcon,
+} from '@salemcobalt/ui';
 ```
 
-Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS always wins. Every value in it is a token custom property; theme with `data-theme="light|dark"` on `<html>` and density with `data-density="compact"` on any ancestor. Interactive behaviour (Dialog focus management, `render` composition) comes from Base UI; see `docs/adr/0001-headless-primitives.md`.
+Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS always wins. Every value in it is a token custom property; theme with `data-theme="light|dark"` on `<html>` and density with `data-density="compact"` on any ancestor. Interactive behaviour (Dialog, Tooltip and Menu focus and keyboard handling, `render` composition) comes from Base UI; see `docs/adr/0001-headless-primitives.md`.
 
-| Component         | Notes                                                                                                                                                          |
-| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Button`          | `variant` primary · secondary · ghost · danger; `size` sm · md · lg; `iconStart`/`iconEnd`; `loading` (keeps width, `aria-busy`); `fullWidth`.                 |
-| `Badge`           | `tone` neutral · accent · success · warning · danger · info; `variant` soft · solid · outline; `size` sm · md; `dot`. Text only.                               |
-| `Card`            | `variant` outlined · elevated · filled; `padding` none · sm · md · lg; `interactive`; `selected`; `as` or `render` to make it an `a`/`button`/`li`.            |
-| `Stack`, `Inline` | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.                                                 |
-| `Kbd`             | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).                                                        |
-| `Dialog`          | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`), `Trigger`, `Content` (`size` sm · md · lg), `Title`, `Description`, `Body`, `Actions`, `Close`. |
+| Component         | Notes                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Button`          | `variant` primary · secondary · ghost · danger; `size` sm · md · lg; `iconStart`/`iconEnd`; `loading` (keeps width, `aria-busy`); `fullWidth`.                                                                                                                                                                                                                                                                                                                         |
+| `IconButton`      | Square Button for one icon. Required `label` (the accessible name); `variant` ghost (default) · secondary · primary · danger; `size`; `tooltip` (`true` shows `label`, or a string); `tooltipSide`; `round`; `loading`.                                                                                                                                                                                                                                                |
+| `Icon`, `*Icon`   | 47 outline icons on a 16px grid in `currentColor`, one component each (`PlayIcon`, `ChevronDownIcon` …, listed in `iconNames`); `size` xs 12 · sm 14 · md 16 · lg 20 · xl 24 · em; decorative unless `title` is given. `Icon` wraps your own paths.                                                                                                                                                                                                                    |
+| `Badge`           | `tone` neutral · accent · success · warning · danger · info; `variant` soft · solid · outline; `size` sm · md; `dot`. Text only.                                                                                                                                                                                                                                                                                                                                       |
+| `Card`            | `variant` outlined · elevated · filled; `padding` none · sm · md · lg; `interactive`; `selected`; `as` or `render` to make it an `a`/`button`/`li`.                                                                                                                                                                                                                                                                                                                    |
+| `Stack`, `Inline` | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.                                                                                                                                                                                                                                                                                                                                                         |
+| `Kbd`             | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).                                                                                                                                                                                                                                                                                                                                                                |
+| `Dialog`          | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`), `Trigger`, `Content` (`size` sm · md · lg), `Title`, `Description`, `Body`, `Actions`, `Close`.                                                                                                                                                                                                                                                                                                         |
+| `Tooltip`         | `content`; `children` is the trigger (an `IconButton`, `Button` or focusable `Badge`); `side` top · bottom · left · right; `align`; `delay` (300ms); `open`/`onOpenChange`; `disabled`. `Tooltip.Provider` around a row skips the delay between siblings.                                                                                                                                                                                                              |
+| `Menu`            | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI. |
 
 ```tsx
 <Dialog.Root>
@@ -35,4 +51,33 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
 </Dialog.Root>
 ```
 
-Accessibility baseline: native elements, one focus ring on `:focus-visible`, WCAG AA text on every fill in both themes, 44px touch targets on coarse pointers, `prefers-reduced-motion` honoured, logical properties throughout, and Dialog traps focus, closes on Esc and returns focus to its trigger.
+```tsx
+<Tooltip.Provider>
+  <Inline gap="2xs">
+    <IconButton label="Pause my sweeps" tooltip>
+      <PauseIcon />
+    </IconButton>
+    <Menu.Root>
+      <Menu.Trigger render={<IconButton label="More actions" tooltip />}>
+        <MoreHorizontalIcon />
+      </Menu.Trigger>
+      <Menu.Content align="end">
+        <Menu.Item icon={<ClockIcon />} onClick={snooze}>
+          Snooze
+        </Menu.Item>
+        <Menu.CheckboxItem checked={stale} onCheckedChange={setStale}>
+          Show stale
+        </Menu.CheckboxItem>
+        <Menu.Separator />
+        <Menu.Item tone="danger" onClick={remove}>
+          Delete
+        </Menu.Item>
+      </Menu.Content>
+    </Menu.Root>
+  </Inline>
+</Tooltip.Provider>
+```
+
+Icons are generated from `src/icons/svg/*.svg` by `scripts/build-icons.mjs` (run by `pnpm build`): the folder is the manifest, every fill and stroke must be `currentColor` or `none`, and the output is committed. The package has no side effects besides CSS, so a bundler keeps only the icons an app imports.
+
+Accessibility baseline: native elements, one focus ring on `:focus-visible`, WCAG AA text on every fill in both themes, 44px touch targets on coarse pointers, `prefers-reduced-motion` honoured, logical properties throughout, Dialog traps focus, closes on Esc and returns focus to its trigger, Menu is fully keyboard operable, and every IconButton is named. Tooltips are hints only: they never open on touch and the trigger must already carry its own name.

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import * as react from 'react';
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode, ReactElement } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
+import * as _base_ui_react from '@base-ui/react';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
@@ -700,14 +702,14 @@ interface DialogRootProps {
     children?: ReactNode | undefined;
 }
 /** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
-declare function Root({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
+declare function Root$1({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
 interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
     /** `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely. */
     size?: DialogSize | undefined;
     className?: string | undefined;
 }
 /** Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close. */
-declare function Content({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
+declare function Content$1({ size, className, children, ...rest }: DialogContentProps): react.JSX.Element;
 interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
     className?: string | undefined;
 }
@@ -731,9 +733,9 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
 declare function Close({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
 /** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
 declare const Dialog: {
-    Root: typeof Root;
+    Root: typeof Root$1;
     Trigger: Dialog$1.Trigger;
-    Content: typeof Content;
+    Content: typeof Content$1;
     Title: typeof Title;
     Description: typeof Description;
     Body: typeof Body;
@@ -741,7 +743,289 @@ declare const Dialog: {
     Close: typeof Close;
 };
 
-declare const version = "0.1.0";
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';
+interface IconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
+    /** `xs` 12, `sm` 14, `md` 16 (default), `lg` 20, `xl` 24, or `em` to follow the surrounding font size. */
+    size?: IconSize | undefined;
+    /** Gives the icon an accessible name (`role="img"`). Without it the icon is decorative and hidden from assistive tech. */
+    title?: string | undefined;
+    /** The glyph: `<path>`, `<circle>` … on a 16×16 grid, stroke `currentColor`. */
+    children: ReactNode;
+}
+/** Props of a shipped icon such as `PlayIcon`: everything `Icon` takes except the glyph. */
+type IconGlyphProps = Omit<IconProps, 'children'>;
+/**
+ * The frame every icon renders in: a 16×16 outline in `currentColor`, sized by `size`, decorative unless
+ * `title` is given. Use the shipped `<Name>Icon` components, or wrap your own paths.
+ */
+declare function Icon({ size, title, className, children, ...rest }: IconProps): react.JSX.Element;
+
+/** `archive` */
+declare function ArchiveIcon(props: IconGlyphProps): react.JSX.Element;
+/** `arrow-left` */
+declare function ArrowLeftIcon(props: IconGlyphProps): react.JSX.Element;
+/** `arrow-right` */
+declare function ArrowRightIcon(props: IconGlyphProps): react.JSX.Element;
+/** `bell` */
+declare function BellIcon(props: IconGlyphProps): react.JSX.Element;
+/** `briefcase` */
+declare function BriefcaseIcon(props: IconGlyphProps): react.JSX.Element;
+/** `calendar` */
+declare function CalendarIcon(props: IconGlyphProps): react.JSX.Element;
+/** `check` */
+declare function CheckIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-down` */
+declare function ChevronDownIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-left` */
+declare function ChevronLeftIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-right` */
+declare function ChevronRightIcon(props: IconGlyphProps): react.JSX.Element;
+/** `chevron-up` */
+declare function ChevronUpIcon(props: IconGlyphProps): react.JSX.Element;
+/** `circle-check` */
+declare function CircleCheckIcon(props: IconGlyphProps): react.JSX.Element;
+/** `circle-x` */
+declare function CircleXIcon(props: IconGlyphProps): react.JSX.Element;
+/** `clock` */
+declare function ClockIcon(props: IconGlyphProps): react.JSX.Element;
+/** `copy` */
+declare function CopyIcon(props: IconGlyphProps): react.JSX.Element;
+/** `document` */
+declare function DocumentIcon(props: IconGlyphProps): react.JSX.Element;
+/** `download` */
+declare function DownloadIcon(props: IconGlyphProps): react.JSX.Element;
+/** `edit` */
+declare function EditIcon(props: IconGlyphProps): react.JSX.Element;
+/** `external-link` */
+declare function ExternalLinkIcon(props: IconGlyphProps): react.JSX.Element;
+/** `eye` */
+declare function EyeIcon(props: IconGlyphProps): react.JSX.Element;
+/** `filter` */
+declare function FilterIcon(props: IconGlyphProps): react.JSX.Element;
+/** `flag` */
+declare function FlagIcon(props: IconGlyphProps): react.JSX.Element;
+/** `inbox` */
+declare function InboxIcon(props: IconGlyphProps): react.JSX.Element;
+/** `info` */
+declare function InfoIcon(props: IconGlyphProps): react.JSX.Element;
+/** `link` */
+declare function LinkIcon(props: IconGlyphProps): react.JSX.Element;
+/** `mail` */
+declare function MailIcon(props: IconGlyphProps): react.JSX.Element;
+/** `map-pin` */
+declare function MapPinIcon(props: IconGlyphProps): react.JSX.Element;
+/** `menu` */
+declare function MenuIcon(props: IconGlyphProps): react.JSX.Element;
+/** `minus` */
+declare function MinusIcon(props: IconGlyphProps): react.JSX.Element;
+/** `moon` */
+declare function MoonIcon(props: IconGlyphProps): react.JSX.Element;
+/** `more-horizontal` */
+declare function MoreHorizontalIcon(props: IconGlyphProps): react.JSX.Element;
+/** `more-vertical` */
+declare function MoreVerticalIcon(props: IconGlyphProps): react.JSX.Element;
+/** `pause` */
+declare function PauseIcon(props: IconGlyphProps): react.JSX.Element;
+/** `play` */
+declare function PlayIcon(props: IconGlyphProps): react.JSX.Element;
+/** `plus` */
+declare function PlusIcon(props: IconGlyphProps): react.JSX.Element;
+/** `refresh` */
+declare function RefreshIcon(props: IconGlyphProps): react.JSX.Element;
+/** `search` */
+declare function SearchIcon(props: IconGlyphProps): react.JSX.Element;
+/** `settings` */
+declare function SettingsIcon(props: IconGlyphProps): react.JSX.Element;
+/** `star` */
+declare function StarIcon(props: IconGlyphProps): react.JSX.Element;
+/** `sun` */
+declare function SunIcon(props: IconGlyphProps): react.JSX.Element;
+/** `thumbs-down` */
+declare function ThumbsDownIcon(props: IconGlyphProps): react.JSX.Element;
+/** `thumbs-up` */
+declare function ThumbsUpIcon(props: IconGlyphProps): react.JSX.Element;
+/** `trash` */
+declare function TrashIcon(props: IconGlyphProps): react.JSX.Element;
+/** `undo` */
+declare function UndoIcon(props: IconGlyphProps): react.JSX.Element;
+/** `user` */
+declare function UserIcon(props: IconGlyphProps): react.JSX.Element;
+/** `warning` */
+declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
+/** `x` */
+declare function XIcon(props: IconGlyphProps): react.JSX.Element;
+
+/** Every icon shipped by this package, as `<Name>Icon` components. */
+declare const iconNames: readonly ["archive", "arrow-left", "arrow-right", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
+type IconName = (typeof iconNames)[number];
+
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+type TooltipAlign = 'start' | 'center' | 'end';
+interface TooltipProps {
+    /** The hint. Short text; never anything the user cannot do without. */
+    content: ReactNode;
+    /** The trigger: one element that takes a ref and spreads props, such as `IconButton`, `Button` or `Badge`. */
+    children: ReactElement;
+    /** Which side of the trigger the hint opens on; flips when there is no room. Default `top`. */
+    side?: TooltipSide | undefined;
+    /** Alignment along that side. Default `center`. */
+    align?: TooltipAlign | undefined;
+    /** Hover delay in ms before opening. Default 300; inside `Tooltip.Provider` sibling tooltips open instantly once one is open. */
+    delay?: number | undefined;
+    /** Delay in ms before closing. Default 0. */
+    closeDelay?: number | undefined;
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Called when the hint opens or closes. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Never opens. */
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * A hint that opens on hover and keyboard focus. Supplementary only: touch devices never see it and
+ * screen readers hear the trigger's own name, so the trigger must already be labelled.
+ */
+declare function TooltipBase({ content, children, side, align, delay, closeDelay, open, defaultOpen, onOpenChange, disabled, className, }: TooltipProps): react.JSX.Element;
+declare const Tooltip: typeof TooltipBase & {
+    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
+};
+
+interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
+    /** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
+    label: string;
+    /** The icon, usually a shipped `<Name>Icon`. It is decorative; `label` names the button. Optional only so a popup trigger can supply it through `render`. */
+    children?: ReactNode | undefined;
+    /** `ghost` (default) in toolbars and rows, `secondary` when it must read as a button, `primary` and `danger` rarely. */
+    variant?: ButtonVariant | undefined;
+    /** Square: 32, 40 or 48px. Compact density shrinks each by one step. */
+    size?: ButtonSize | undefined;
+    /** `true` shows `label` as a tooltip on hover and focus; a string shows that text instead. */
+    tooltip?: boolean | string | undefined;
+    /** Side the tooltip opens on. Default `top`. */
+    tooltipSide?: TooltipSide | undefined;
+    /** Fully round, for avatars and floating actions. */
+    round?: boolean | undefined;
+    /** Shows a spinner, sets `aria-busy` and ignores clicks. */
+    loading?: boolean | undefined;
+}
+/** A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover. */
+declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, ...rest }: IconButtonProps): react.JSX.Element;
+
+type MenuSide = 'top' | 'bottom' | 'left' | 'right';
+type MenuAlign = 'start' | 'center' | 'end';
+type MenuItemTone = 'default' | 'danger';
+interface MenuRootProps {
+    /** Controlled open state. */
+    open?: boolean | undefined;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean | undefined;
+    /** Called when the menu opens or closes. */
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    /** Disables the trigger. */
+    disabled?: boolean | undefined;
+    /** Default `true`: the page behind the menu is inert until it closes. */
+    modal?: boolean | undefined;
+    children?: ReactNode | undefined;
+}
+/** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
+declare function Root({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
+interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
+    className?: string | undefined;
+}
+/**
+ * Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or
+ * IconButton through `render`: `<Menu.Trigger render={<IconButton label="More" />}><MoreHorizontalIcon /></Menu.Trigger>`.
+ */
+declare function Trigger({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
+interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
+    /** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */
+    side?: MenuSide | undefined;
+    /** Alignment along that side. Default `start`. */
+    align?: MenuAlign | undefined;
+    /** Distance from the trigger in px. Default 4. */
+    sideOffset?: number | undefined;
+    className?: string | undefined;
+}
+/** Portal, positioner and the popup. Items go inside. */
+declare function Content({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
+interface ItemSlots {
+    /** A 16px icon before the label. */
+    icon?: ReactNode | undefined;
+    /** Muted text at the end: a shortcut (`<Kbd>`) or a count. */
+    trailing?: ReactNode | undefined;
+    /** `danger` for destructive actions; put them last, after a separator. */
+    tone?: MenuItemTone | undefined;
+}
+interface MenuItemProps extends Omit<Menu$1.Item.Props, 'className'>, ItemSlots {
+    className?: string | undefined;
+}
+/** One action. Closes the menu when activated. */
+declare function Item({ icon, trailing, tone, className, children, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, ItemSlots {
+    className?: string | undefined;
+}
+/** An item that navigates: renders an `<a href>`. */
+declare function LinkItem({ icon, trailing, tone, className, children, ...rest }: MenuLinkItemProps): react.JSX.Element;
+interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, 'className' | 'onCheckedChange'> {
+    /** Called with the next checked state. */
+    onCheckedChange?: ((checked: boolean) => void) | undefined;
+    /** Muted text at the end. */
+    trailing?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** A toggle. Stays open when activated so several can be flipped at once; pass `closeOnClick` to close. */
+declare function CheckboxItem({ trailing, onCheckedChange, className, children, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+interface MenuRadioGroupProps<Value extends string = string> extends Omit<Menu$1.RadioGroup.Props, 'className' | 'value' | 'defaultValue' | 'onValueChange'> {
+    /** Controlled selected value. */
+    value?: Value | undefined;
+    /** Initial value when uncontrolled. */
+    defaultValue?: Value | undefined;
+    /** Called with the next selected value. */
+    onValueChange?: ((value: Value) => void) | undefined;
+    /** A heading for the group, rendered above the items. */
+    label?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** A set of `Menu.RadioItem`s where exactly one is selected. */
+declare function RadioGroup<Value extends string = string>({ label, onValueChange, className, children, ...rest }: MenuRadioGroupProps<Value>): react.JSX.Element;
+interface MenuRadioItemProps extends Omit<Menu$1.RadioItem.Props, 'className' | 'value'> {
+    value: string;
+    /** Muted text at the end. */
+    trailing?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** One choice in a `Menu.RadioGroup`. Stays open when chosen; pass `closeOnClick` to close. */
+declare function RadioItem({ trailing, className, children, ...rest }: MenuRadioItemProps): react.JSX.Element;
+interface MenuGroupProps extends Omit<Menu$1.Group.Props, 'className'> {
+    /** A heading for the group, rendered above the items. */
+    label?: ReactNode | undefined;
+    className?: string | undefined;
+}
+/** Labels a run of items. */
+declare function Group({ label, className, children, ...rest }: MenuGroupProps): react.JSX.Element;
+interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
+    className?: string | undefined;
+}
+/** A hairline between runs of items. */
+declare function Separator({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
+/** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
+declare const Menu: {
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Item: typeof Item;
+    LinkItem: typeof LinkItem;
+    CheckboxItem: typeof CheckboxItem;
+    RadioGroup: typeof RadioGroup;
+    RadioItem: typeof RadioItem;
+    Group: typeof Group;
+    Separator: typeof Separator;
+};
+
+declare const version = "0.1.1";
 
-export { Badge, Button, Card, Dialog, Inline, Kbd, Stack, version };
-export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, InlineAlign, InlineElement, InlineJustify, InlineProps, KbdGroupProps, KbdProps, SpacingSize, StackAlign, StackElement, StackJustify, StackProps };
+export { ArchiveIcon, ArrowLeftIcon, ArrowRightIcon, Badge, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, DocumentIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, FilterIcon, FlagIcon, Icon, IconButton, InboxIcon, InfoIcon, Inline, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SettingsIcon, Stack, StarIcon, SunIcon, ThumbsDownIcon, ThumbsUpIcon, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, SpacingSize, StackAlign, StackElement, StackJustify, StackProps, TooltipAlign, TooltipProps, TooltipSide };