@sesamehr/react-design-system 3.1.0-beta.2 → 3.1.0

package/dist/Navigation/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,31 @@
+export interface DropdownMenuProps {
+    children?: React.ReactNode;
+    /** Open on first render, for a menu the caller does not otherwise control. */
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Modal, which is Radix's default and the design's: while the menu is open
+     * the page behind it takes no pointer events and is hidden from screen
+     * readers, so the menu is the only thing to answer.
+     */
+    modal?: boolean;
+}
+/**
+ * A menu of actions that drops out of a control the caller owns: the trigger,
+ * the rows, the groups and the submenus are all composed, and this root only
+ * holds the open state and hands it down.
+ *
+ * It renders no element of its own — Radix's root is a provider — so there is
+ * nothing here to style and nothing for a `className` to land on.
+ *
+ * Both paths stay open the way Vue's `v-model:open` does, and they come free:
+ * Radix's own root holds the state when `open` is absent and defers to the
+ * caller when it is present, so there is no gating to write here. The
+ * components that do need it are the checkbox row and the radio group, whose
+ * Radix primitives are controlled-only.
+ */
+export declare const DropdownMenu: {
+    ({ children, defaultOpen, open, onOpenChange, modal, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Navigation/DropdownMenu/DropdownMenuCheckboxItem.d.ts

@@ -0,0 +1,20 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, 'checked' | 'onCheckedChange'> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    dataTestid?: string;
+}
+/**
+ * A row that carries a tick. The indicator is handed to `MenuItem`
+ * unconditionally even though the check inside it only mounts when ticked:
+ * that is what keeps the 32px text column while a row is unticked, so the
+ * labels in a menu do not shuffle sideways as boxes are ticked.
+ *
+ * Radix's `CheckboxItem` is controlled-only — it renders whatever `checked`
+ * says and holds nothing — where the Vue original's `defineModel` keeps
+ * driving itself when the parent passes a value and does not listen. Both
+ * paths are kept here, gated on the **handler** rather than on the value:
+ * `<OxDropdownMenuCheckboxItem checked={false} />` with nobody listening is an
+ * ordinary row that ticks, not one pinned to false forever.
+ */
+export declare const DropdownMenuCheckboxItem: import('react').ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuContent.d.ts

@@ -0,0 +1,10 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+    dataTestid?: string;
+}
+/**
+ * The panel the rows sit on. The fill, the border, the radius, the shadow and
+ * the open/close animation come from `Surface`, which `asChild` renders as
+ * this very element; what is left here is the part only a menu has.
+ */
+export declare const DropdownMenuContent: import('react').ForwardRefExoticComponent<DropdownMenuContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuGroup.d.ts

@@ -0,0 +1,8 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
+/**
+ * A set of rows that belong together, as `role="group"`. Purely semantic — it
+ * draws nothing, so what separates two groups visually is still a
+ * `DropdownMenuSeparator`.
+ */
+export declare const DropdownMenuGroup: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuItem.d.ts

@@ -0,0 +1,26 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    /**
+     * `destructive` is the red row: delete, revoke, sign out. The name is the
+     * system's for the variant, while the colour it reaches for is `error`.
+     */
+    variant?: 'default' | 'destructive';
+    /**
+     * The leading glyph, placed in the shared left column. A prop rather than
+     * part of `children`, which is what the Vue original's `#icon` slot is:
+     * the design puts every adornment a row can carry — the check of a checkbox
+     * row, the dot of a radio row, and this — in one 32px column on the left, so
+     * that a menu which mixes them keeps a single text column. An icon dropped
+     * into `children` sits in the text instead and takes that alignment away
+     * from every other row.
+     */
+    icon?: React.ReactNode;
+    dataTestid?: string;
+}
+/**
+ * A row that runs something. `asChild` hands Radix's item behaviour —
+ * `role="menuitem"`, `data-highlighted`, typeahead, the keyboard, closing the
+ * menu on select — to the shared row, which is the one thing every kind of
+ * menu row may share.
+ */
+export declare const DropdownMenuItem: import('react').ForwardRefExoticComponent<DropdownMenuItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuLabel.d.ts

@@ -0,0 +1,20 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    /**
+     * Start the heading on the text column rather than the panel edge, for a
+     * menu whose rows carry icons or ticks. Without it a heading sits 24px to
+     * the left of every label beneath it.
+     */
+    inset?: boolean;
+}
+/**
+ * The heading over a group of rows. Content is `children`, never a string
+ * prop: the heading is the caller's word for their own category, and taking it
+ * as a prop would decide for them that it can only ever be text.
+ *
+ * Not `ListboxLabel`. A select's group heading is small, grey and secondary —
+ * it names a category inside a list of like things. A menu's is the same size
+ * and weight as a row and reads as a title over a section of a panel, which is
+ * what the design draws.
+ */
+export declare const DropdownMenuLabel: import('react').ForwardRefExoticComponent<DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuRadioGroup.d.ts

@@ -0,0 +1,14 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
+/**
+ * The one-of-many set. It owns the value, so the rows under it need no state
+ * of their own — each says what it is worth and the group says which one is
+ * chosen.
+ *
+ * Radix's `RadioGroup` is controlled-only, where the Vue original's
+ * `defineModel` keeps driving itself when the parent passes a value and does
+ * not listen. Both paths are kept, gated on the **handler**: a group given a
+ * `value` and no `onValueChange` still moves when a row is chosen, instead of
+ * being pinned to the value it started on.
+ */
+export declare const DropdownMenuRadioGroup: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -0,0 +1,13 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    dataTestid?: string;
+}
+/**
+ * One option of a `DropdownMenuRadioGroup`. The dot is a styled span rather
+ * than an icon, the same way `OxRadioButton`'s is: the design draws an 8px
+ * filled circle, and there is no asset to fetch for a circle.
+ *
+ * `bg-current` is what makes it follow the row — a destructive or highlighted
+ * row changes `color`, and the dot goes with it.
+ */
+export declare const DropdownMenuRadioItem: import('react').ForwardRefExoticComponent<DropdownMenuRadioItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuSeparator.d.ts

@@ -0,0 +1,13 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
+/**
+ * The rule between two sections of a menu.
+ *
+ * `ListboxSeparator` and not a menu-specific twin: a 1px full-bleed rule in
+ * `border-default` is the same three declarations in both places, and the
+ * `-mx-1` that cancels the panel's padding assumes the same 4px here as it
+ * does on a select. A second file would be a second thing to keep in step for
+ * no difference at all — the rest of the menu row diverges from a listbox row,
+ * this does not.
+ */
+export declare const DropdownMenuSeparator: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuShortcut.d.ts

@@ -0,0 +1,14 @@
+export type DropdownMenuShortcutProps = React.ComponentPropsWithoutRef<'span'>;
+/**
+ * The key combination printed at the end of a row — `⇧⌘P`, `⌘S`.
+ *
+ * It goes inside the row's children, after the label, and pushes itself to the
+ * far end. Faded rather than a secondary colour: the design draws it at 60% of
+ * whatever the row is, so it follows a destructive row's red instead of
+ * turning grey on it.
+ *
+ * Decoration, not an announcement: the shortcut is already bound somewhere the
+ * screen reader user reaches by other means, and read aloud after every label
+ * it is noise. Hence `aria-hidden` on the element itself.
+ */
+export declare const DropdownMenuShortcut: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuSub.d.ts

@@ -0,0 +1,14 @@
+export interface DropdownMenuSubProps {
+    children?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A submenu: pairs a `DropdownMenuSubTrigger` with a `DropdownMenuSubContent`
+ * and holds the open state between them. Renders no element of its own.
+ */
+export declare const DropdownMenuSub: {
+    ({ children, defaultOpen, open, onOpenChange, }: DropdownMenuSubProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Navigation/DropdownMenu/DropdownMenuSubContent.d.ts

@@ -0,0 +1,9 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
+    dataTestid?: string;
+}
+/**
+ * The panel a submenu opens onto. No `side`: a submenu's side is decided by the
+ * room beside its trigger, not by the caller, and Radix flips it on its own.
+ */
+export declare const DropdownMenuSubContent: import('react').ForwardRefExoticComponent<DropdownMenuSubContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuSubTrigger.d.ts

@@ -0,0 +1,17 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+    /** The leading glyph, placed in the shared left column. */
+    icon?: React.ReactNode;
+    dataTestid?: string;
+}
+/**
+ * The row that opens a submenu. Reads as an ordinary row with a chevron at the
+ * end, and keeps its fill while the submenu is showing — `MenuItem` treats
+ * `data-state="open"` as the same lit row `data-highlighted` gives it, so the
+ * trigger does not go cold the moment the pointer travels into the panel it
+ * opened.
+ *
+ * The chevron goes inside the row's children rather than into `MenuItem`,
+ * because it is this row's alone.
+ */
+export declare const DropdownMenuSubTrigger: import('react').ForwardRefExoticComponent<DropdownMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/DropdownMenu/DropdownMenuTrigger.d.ts

@@ -0,0 +1,17 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export interface DropdownMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {
+    dataTestid?: string;
+}
+/**
+ * The control that opens the menu. Always `asChild`: the design system has no
+ * opinion on what opens a menu — the file draws a `Button`, an `IconButton`
+ * and an avatar row — so this contributes the behaviour (`aria-haspopup`,
+ * `aria-expanded`, `data-state`, the keyboard) and nothing else, and the
+ * caller's element is what renders.
+ *
+ * That makes the single child a requirement rather than a convention, and
+ * Radix enforces it: its `Slot` throws on a second child rather than letting
+ * it through the way reka does, so the Vue port's silent failure mode cannot
+ * happen here.
+ */
+export declare const DropdownMenuTrigger: import('react').ForwardRefExoticComponent<DropdownMenuTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Navigation/DropdownMenu/index.d.ts

@@ -0,0 +1,14 @@
+export { DropdownMenu, type DropdownMenuProps } from './DropdownMenu.tsx';
+export { DropdownMenuTrigger, type DropdownMenuTriggerProps, } from './DropdownMenuTrigger.tsx';
+export { DropdownMenuContent, type DropdownMenuContentProps, } from './DropdownMenuContent.tsx';
+export { DropdownMenuGroup, type DropdownMenuGroupProps, } from './DropdownMenuGroup.tsx';
+export { DropdownMenuLabel, type DropdownMenuLabelProps, } from './DropdownMenuLabel.tsx';
+export { DropdownMenuItem, type DropdownMenuItemProps, } from './DropdownMenuItem.tsx';
+export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem.tsx';
+export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup.tsx';
+export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem.tsx';
+export { DropdownMenuSeparator, type DropdownMenuSeparatorProps, } from './DropdownMenuSeparator.tsx';
+export { DropdownMenuShortcut, type DropdownMenuShortcutProps, } from './DropdownMenuShortcut.tsx';
+export { DropdownMenuSub, type DropdownMenuSubProps, } from './DropdownMenuSub.tsx';
+export { DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, } from './DropdownMenuSubTrigger.tsx';
+export { DropdownMenuSubContent, type DropdownMenuSubContentProps, } from './DropdownMenuSubContent.tsx';

package/dist/internal/Menu/MenuItem.d.ts

@@ -0,0 +1,34 @@
+export interface MenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The left column: a tick, a radio dot, a leading glyph. Pass it — even as a
+     * node that renders nothing while the row is unchecked — and the row reserves
+     * the space; leave it out and the label starts at the row's own padding.
+     */
+    indicator?: React.ReactNode;
+    /**
+     * `destructive` colours the label red. The row's own fill is left alone: the
+     * design draws the error row at rest only, with no hover of its own.
+     */
+    variant?: 'default' | 'destructive';
+}
+/**
+ * One row of a menu: `DropdownMenu`'s item, its checkbox and radio items, and
+ * its sub-trigger. Port of `core/src/internal/Menu/MenuItem`.
+ *
+ * Not `ListboxItem`, and the difference is structural rather than a matter of
+ * sizing. A listbox row puts its check mark on the *right* and is padded for
+ * it there; every adornment a menu row can carry sits on the *left*, because a
+ * menu mixes plain rows with checkable ones and they have to share one text
+ * column. That is not reachable through `ListboxItem`'s handoff properties, and
+ * the note in that file says what to do when a sixth thing has to differ.
+ *
+ * Whether the row reserves the left column is decided by the presence of the
+ * `indicator` prop, not by whether the row is checked — a menu that has check
+ * marks in it always passes one, so the text column does not jump the moment a
+ * row is ticked.
+ *
+ * `forwardRef` is not optional: `asChild` composes the primitive's ref onto
+ * this component, and a plain function component would drop it — the row would
+ * be invisible to the menu's roving focus and typeahead.
+ */
+export declare const MenuItem: import('react').ForwardRefExoticComponent<MenuItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/internal/index.d.ts

@@ -2,8 +2,9 @@
  * Shared presentational parts. Deliberately absent from `src/main.ts`: each is
  * an inert element with no keyboard, no roles and no positioning, so publishing
  * one would ship something that looks like an option and behaves like a div.
- * The public way to build a list stays `OxSelect`, `OxCombobox` or
- * `OxSearchPanel`, each of which pairs these with its own primitive.
+ * The public way to build a list stays `OxSelect`, `OxCombobox`,
+ * `OxSearchPanel` or `OxDropdownMenu`, each of which pairs these with its own
+ * primitive.
  */
 export { Surface, type SurfaceProps } from './Surface/Surface.tsx';
 export { ListboxEmpty, type ListboxEmptyProps, } from './Listbox/ListboxEmpty.tsx';
@@ -11,3 +12,4 @@ export { ListboxItem, type ListboxItemProps } from './Listbox/ListboxItem.tsx';
 export { ListboxLabel, type ListboxLabelProps, } from './Listbox/ListboxLabel.tsx';
 export { ListboxSeparator, type ListboxSeparatorProps, } from './Listbox/ListboxSeparator.tsx';
 export { ListboxViewport, type ListboxViewportProps, } from './Listbox/ListboxViewport.tsx';
+export { MenuItem, type MenuItemProps } from './Menu/MenuItem.tsx';

package/dist/main.d.ts

@@ -44,6 +44,7 @@ export { Popover as OxPopover, PopoverContent as OxPopoverContent, PopoverClose
 export { Accordion as OxAccordion, AccordionItem as OxAccordionItem, AccordionTrigger as OxAccordionTrigger, AccordionContent as OxAccordionContent, } from './Navigation/Accordion/index.ts';
 export { ToggleTabs as OxToggleTabs, ToggleTabsList as OxToggleTabsList, ToggleTabsTrigger as OxToggleTabsTrigger, ToggleTabsContent as OxToggleTabsContent, } from './Navigation/ToggleTabs/index.ts';
 export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, type PageControlDot, type PageControlDotSize, } from './Navigation/PageControl/index.ts';
+export { DropdownMenu as OxDropdownMenu, DropdownMenuTrigger as OxDropdownMenuTrigger, DropdownMenuContent as OxDropdownMenuContent, DropdownMenuGroup as OxDropdownMenuGroup, DropdownMenuLabel as OxDropdownMenuLabel, DropdownMenuItem as OxDropdownMenuItem, DropdownMenuCheckboxItem as OxDropdownMenuCheckboxItem, DropdownMenuRadioGroup as OxDropdownMenuRadioGroup, DropdownMenuRadioItem as OxDropdownMenuRadioItem, DropdownMenuSeparator as OxDropdownMenuSeparator, DropdownMenuShortcut as OxDropdownMenuShortcut, DropdownMenuSub as OxDropdownMenuSub, DropdownMenuSubTrigger as OxDropdownMenuSubTrigger, DropdownMenuSubContent as OxDropdownMenuSubContent, } from './Navigation/DropdownMenu/index.ts';
 export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
 export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';