@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/menu/Menu.d.ts

@@ -0,0 +1,223 @@
+/**
+ * A dropdown menu of actions from a trigger.
+ *
+ *   <Menu items={actions} onSelect={run} trigger={<Button iconEnd="lucide:chevron-down">Actions</Button>} />
+ *
+ *   <Menu onSelect={run} trigger={<Button>File</Button>}>
+ *     <Menu.Item value="new" icon="lucide:file-plus" shortcut="⌘N">New</Menu.Item>
+ *     <Menu.Submenu label="Share" icon="lucide:share-2"><Menu.Item value="email">Email</Menu.Item></Menu.Submenu>
+ *     <Menu.Separator />
+ *     <Menu.Group label="Danger zone"><Menu.Item value="delete" danger>Delete</Menu.Item></Menu.Group>
+ *   </Menu>
+ *
+ * Arrow keys move through the items (right and left open and close
+ * submenus), typing jumps to one, Enter selects, and Escape or a click outside
+ * closes it, returning focus to the trigger. Items come from `items`, from
+ * child components (after any `items`), or both.
+ *
+ * - `items`: strings or objects with `labelKey`/`valueKey`/`disabledKey` (the
+ *   label stands in for a missing value), plus optional `icon`, `shortcut`,
+ *   `danger` and `href` (a link); `{ separator: true }` draws a line,
+ *   `{ group: 'Label' }` a group heading, and `{ label, icon, items: […] }` a
+ *   submenu with its own items
+ * - Checkbox and radio entries: `{ type: 'checkbox', value, label, checked }`
+ *   and `{ type: 'radio', name, value, label, checked }` (one checked per
+ *   `name`). The menu keeps them checked and calls `onChange` with
+ *   `{ type, name, value, checked }`
+ * - `onSelect`: called with the chosen action's value, from submenus too
+ * - `trigger`: the element that opens it (it gets the trigger's props, so a
+ *   component must pass them on, as Button does)
+ * - `placement`: 'bottom-start' (default), 'bottom-end', …
+ * - `label`: a small label above the items
+ * - `keepOpen`: stay open after an item is chosen (to tick several); an
+ *   item's own `keepOpen` overrides it
+ * - `context`: open on right-click (or long-press) of the trigger, at the
+ *   pointer (see ContextMenu)
+ * - `open`, `defaultOpen`; `onOpenChange`
+ * - Child components: Menu.Item, Menu.Separator, Menu.Group, Menu.Submenu,
+ *   Menu.Checkbox, and Menu.RadioGroup with Menu.Radio (also exported as
+ *   MenuItem, MenuSeparator…)
+ *
+ * By hand, Ark's parts are here too: Menu.Root, Trigger, ContextTrigger,
+ * Positioner, Content, ItemText, ItemIndicator, CheckboxItem, RadioItem…
+ */
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { Menu as Ark } from '@ark-ui/react/menu';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './menu.css';
+type Value = string | number;
+export type MenuEntry = string | number | {
+    label?: ReactNode;
+    value?: Value;
+    icon?: string;
+    shortcut?: string;
+    danger?: boolean;
+    href?: string;
+    disabled?: boolean;
+    keepOpen?: boolean | null;
+    separator?: boolean;
+    group?: ReactNode;
+    items?: MenuEntry[];
+    type?: 'checkbox' | 'radio';
+    name?: string;
+    checked?: boolean;
+    [key: string]: unknown;
+};
+export type MenuOptionChange = {
+    type: 'checkbox' | 'radio';
+    name: string | null;
+    value: unknown;
+    checked: boolean;
+};
+type ItemExtras = {
+    icon?: string | null;
+    shortcut?: ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    keepOpen?: boolean | null;
+};
+export type MenuItemProps = Omit<ComponentProps<'div'>, 'onSelect'> & ItemExtras & {
+    value?: Value;
+    href?: string | null;
+    onSelect?: () => void;
+};
+/**
+ * One action in a Menu or Menu.Submenu; its content is the label.
+ *
+ *   <Menu.Item value="edit" icon="lucide:pencil" shortcut="⌘E">Edit</Menu.Item>
+ *
+ * - `value`: what the menu's `onSelect` gets (the label's text if unset)
+ * - `href`: makes it a link
+ * - `icon`, `shortcut`, `danger`, `disabled` and `keepOpen`: as on `items` entries
+ * - `onSelect`: runs when it's chosen, by pointer or keyboard
+ */
+declare function Item({ value, href, icon, shortcut, danger, disabled, keepOpen, onSelect, className, children, ...rest }: MenuItemProps): import("react").JSX.Element;
+/** A line between items in a Menu or Menu.Submenu. */
+declare function Separator(props: ComponentProps<'hr'>): import("react").JSX.Element;
+/**
+ * A group of items in a Menu or Menu.Submenu, under a heading.
+ *
+ *   <Menu.Group label="Student"><Menu.Item value="message">Send message</Menu.Item></Menu.Group>
+ */
+declare function Group({ label, children, ...rest }: ComponentProps<'div'> & {
+    label?: ReactNode;
+}): import("react").JSX.Element;
+export type MenuCheckboxProps = ItemExtras & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    value?: Value;
+    children?: ReactNode;
+};
+/**
+ * A checkbox item in a Menu or Menu.Submenu; its content is the label.
+ *
+ *   <Menu.Checkbox checked={showGrid} onCheckedChange={setShowGrid} keepOpen>Show grid</Menu.Checkbox>
+ *
+ * - `checked`, `defaultChecked`; `onCheckedChange`
+ * - `value`, `icon`, `shortcut`, `disabled` and `keepOpen`: as on Menu.Item
+ */
+declare function Checkbox({ checked, defaultChecked, onCheckedChange, value, icon, shortcut, disabled, keepOpen, children }: MenuCheckboxProps): import("react").JSX.Element;
+/**
+ * Radio items in a Menu or Menu.Submenu, one of which is checked.
+ *
+ *   <Menu.RadioGroup value={sort} onValueChange={setSort} label="Sort by">
+ *     <Menu.Radio value="name">Name</Menu.Radio>
+ *     <Menu.Radio value="date">Date</Menu.Radio>
+ *   </Menu.RadioGroup>
+ *
+ * - `value`, `defaultValue`; `onValueChange`: called with the checked radio's value
+ * - `label`: an optional heading
+ */
+declare function RadioGroup({ value, defaultValue, onValueChange, label, children }: {
+    value?: Value | null;
+    defaultValue?: Value | null;
+    onValueChange?: (value: Value) => void;
+    label?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * One radio item in a Menu.RadioGroup; its content is the label.
+ *
+ * - `value`: what the group's value becomes
+ * - `icon`, `shortcut`, `disabled` and `keepOpen`: as on Menu.Item
+ */
+declare function Radio({ value, icon, shortcut, disabled, keepOpen, children }: ItemExtras & {
+    value: Value;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A submenu inside a Menu (or another Submenu): a row that opens a nested
+ * menu of its own items, from `items` or child components like Menu's.
+ *
+ *   <Menu.Submenu label="Share" icon="lucide:share-2">
+ *     <Menu.Item value="email">Email</Menu.Item>
+ *   </Menu.Submenu>
+ *
+ * - `label`: the row's text; `icon`: an optional Iconify name before it
+ * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ *
+ * Its items' selections reach the outer Menu's `onSelect`.
+ */
+declare function Submenu({ label, icon, items, keepOpen, className, children }: {
+    label: ReactNode;
+    icon?: string | null;
+    items?: MenuEntry[];
+    keepOpen?: boolean | null;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+export type MenuProps = Omit<Ark.ContentProps, 'onSelect' | 'onChange'> & {
+    items?: MenuEntry[];
+    labelKey?: string;
+    valueKey?: string;
+    disabledKey?: string;
+    trigger?: ReactElement | null;
+    placement?: NonNullable<Ark.RootProps['positioning']>['placement'];
+    label?: ReactNode;
+    keepOpen?: boolean;
+    context?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSelect?: (value: unknown) => void;
+    onChange?: (change: MenuOptionChange) => void;
+    classes?: Classes<'positioner' | 'content' | 'menuLabel'>;
+};
+declare function MenuShortcut({ items, labelKey, valueKey, disabledKey, trigger, placement, label, keepOpen, context, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }: MenuProps): import("react").JSX.Element;
+export declare const Menu: typeof MenuShortcut & {
+    Item: typeof Item;
+    Separator: typeof Separator;
+    Group: typeof Group;
+    Checkbox: typeof Checkbox;
+    RadioGroup: typeof RadioGroup;
+    Radio: typeof Radio;
+    Submenu: typeof Submenu;
+    Root: (props: Ark.RootProps) => import("react").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<Ark.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ContextTrigger: import("react").ForwardRefExoticComponent<Ark.ContextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Positioner: import("react").ForwardRefExoticComponent<Ark.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<Ark.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemText: import("react").ForwardRefExoticComponent<Ark.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemIndicator: import("react").ForwardRefExoticComponent<Ark.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroup: import("react").ForwardRefExoticComponent<Ark.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<Ark.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<Ark.CheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItemGroup: import("react").ForwardRefExoticComponent<Ark.RadioItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<Ark.RadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    TriggerItem: import("react").ForwardRefExoticComponent<Ark.TriggerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<Ark.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<Ark.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+/**
+ * A Menu opened by right-clicking (or long-pressing on touch) an area, at the pointer.
+ *
+ *   <ContextMenu items={actions} onSelect={run} trigger={<div>…the area…</div>} />
+ *
+ * Takes the same props, `items` and child components (submenus too) as Menu.
+ */
+export declare function ContextMenu(props: Omit<MenuProps, 'context'>): import("react").JSX.Element;
+export { Item as MenuItem, Separator as MenuSeparator, Group as MenuGroup, Checkbox as MenuCheckbox, RadioGroup as MenuRadioGroup, Radio as MenuRadio, Submenu };

package/dist/menu/Menu.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A dropdown menu of actions from a trigger.
+ *
+ *   <Menu items={actions} onSelect={run} trigger={<Button iconEnd="lucide:chevron-down">Actions</Button>} />
+ *
+ *   <Menu onSelect={run} trigger={<Button>File</Button>}>
+ *     <Menu.Item value="new" icon="lucide:file-plus" shortcut="⌘N">New</Menu.Item>
+ *     <Menu.Submenu label="Share" icon="lucide:share-2"><Menu.Item value="email">Email</Menu.Item></Menu.Submenu>
+ *     <Menu.Separator />
+ *     <Menu.Group label="Danger zone"><Menu.Item value="delete" danger>Delete</Menu.Item></Menu.Group>
+ *   </Menu>
+ *
+ * Arrow keys move through the items (right and left open and close
+ * submenus), typing jumps to one, Enter selects, and Escape or a click outside
+ * closes it, returning focus to the trigger. Items come from `items`, from
+ * child components (after any `items`), or both.
+ *
+ * - `items`: strings or objects with `labelKey`/`valueKey`/`disabledKey` (the
+ *   label stands in for a missing value), plus optional `icon`, `shortcut`,
+ *   `danger` and `href` (a link); `{ separator: true }` draws a line,
+ *   `{ group: 'Label' }` a group heading, and `{ label, icon, items: […] }` a
+ *   submenu with its own items
+ * - Checkbox and radio entries: `{ type: 'checkbox', value, label, checked }`
+ *   and `{ type: 'radio', name, value, label, checked }` (one checked per
+ *   `name`). The menu keeps them checked and calls `onChange` with
+ *   `{ type, name, value, checked }`
+ * - `onSelect`: called with the chosen action's value, from submenus too
+ * - `trigger`: the element that opens it (it gets the trigger's props, so a
+ *   component must pass them on, as Button does)
+ * - `placement`: 'bottom-start' (default), 'bottom-end', …
+ * - `label`: a small label above the items
+ * - `keepOpen`: stay open after an item is chosen (to tick several); an
+ *   item's own `keepOpen` overrides it
+ * - `context`: open on right-click (or long-press) of the trigger, at the
+ *   pointer (see ContextMenu)
+ * - `open`, `defaultOpen`; `onOpenChange`
+ * - Child components: Menu.Item, Menu.Separator, Menu.Group, Menu.Submenu,
+ *   Menu.Checkbox, and Menu.RadioGroup with Menu.Radio (also exported as
+ *   MenuItem, MenuSeparator…)
+ *
+ * By hand, Ark's parts are here too: Menu.Root, Trigger, ContextTrigger,
+ * Positioner, Content, ItemText, ItemIndicator, CheckboxItem, RadioItem…
+ */
+import { createContext, useContext, useId, useRef, useState } from 'react';
+import { Menu as Ark, useMenuContext } from '@ark-ui/react/menu';
+import 'iconify-icon';
+import { cx, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './menu.css';
+const MenuContext = createContext(null);
+const useMenu = () => {
+    const menu = useContext(MenuContext);
+    if (!menu)
+        throw new Error('Menu parts go inside a Menu');
+    return menu;
+};
+// Zag's per-item closeOnSelect for a `keepOpen` (unset follows the menu); left out when unset.
+const closeFor = (keepOpen) => (keepOpen == null ? {} : { closeOnSelect: !keepOpen });
+// A label's text, when it's plain text, to stand in for a missing value.
+const textOf = (node) => (typeof node === 'string' || typeof node === 'number' ? String(node) : '');
+// An item's inside: icon, label and shortcut.
+function ItemInside({ part, icon, shortcut, children }) {
+    return _jsxs(_Fragment, { children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx(Ark.ItemText, { ...part('label'), children: children }), shortcut && _jsx("kbd", { ...part('shortcut'), children: shortcut })] });
+}
+/**
+ * One action in a Menu or Menu.Submenu; its content is the label.
+ *
+ *   <Menu.Item value="edit" icon="lucide:pencil" shortcut="⌘E">Edit</Menu.Item>
+ *
+ * - `value`: what the menu's `onSelect` gets (the label's text if unset)
+ * - `href`: makes it a link
+ * - `icon`, `shortcut`, `danger`, `disabled` and `keepOpen`: as on `items` entries
+ * - `onSelect`: runs when it's chosen, by pointer or keyboard
+ */
+function Item({ value, href = null, icon = null, shortcut = null, danger = false, disabled = false, keepOpen = null, onSelect, className, children, ...rest }) {
+    const menu = useMenu();
+    const id = useId();
+    const itemValue = value ?? (textOf(children) || id);
+    const key = String(itemValue);
+    menu.remember(key, itemValue);
+    const inside = _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children });
+    return (_jsx(Ark.Item, { ...rest, ...menu.part('item'), className: className, value: key, disabled: !!disabled, ...closeFor(keepOpen), "data-danger": danger || undefined, ...(onSelect && { onSelect }), asChild: !!href, children: href ? _jsx("a", { href: href, children: inside }) : inside }));
+}
+/** A line between items in a Menu or Menu.Submenu. */
+function Separator(props) {
+    const menu = useMenu();
+    return _jsx(Ark.Separator, { ...props, ...menu.part('separator') });
+}
+/**
+ * A group of items in a Menu or Menu.Submenu, under a heading.
+ *
+ *   <Menu.Group label="Student"><Menu.Item value="message">Send message</Menu.Item></Menu.Group>
+ */
+function Group({ label = null, children, ...rest }) {
+    const menu = useMenu();
+    return (_jsxs(Ark.ItemGroup, { ...rest, ...menu.part('item-group'), children: [label && _jsx(Ark.ItemGroupLabel, { ...menu.part('group-label'), children: label }), children] }));
+}
+/**
+ * A checkbox item in a Menu or Menu.Submenu; its content is the label.
+ *
+ *   <Menu.Checkbox checked={showGrid} onCheckedChange={setShowGrid} keepOpen>Show grid</Menu.Checkbox>
+ *
+ * - `checked`, `defaultChecked`; `onCheckedChange`
+ * - `value`, `icon`, `shortcut`, `disabled` and `keepOpen`: as on Menu.Item
+ */
+function Checkbox({ checked, defaultChecked = false, onCheckedChange, value, icon = null, shortcut = null, disabled = false, keepOpen = null, children }) {
+    const menu = useMenu();
+    const id = useId();
+    const [own, setOwn] = useState(defaultChecked);
+    const on = checked ?? own;
+    return (_jsxs(Ark.CheckboxItem, { ...menu.part('item'), value: String(value ?? id), checked: on, disabled: !!disabled, ...closeFor(keepOpen), onCheckedChange: (next) => { setOwn(next); onCheckedChange?.(next); }, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "checkbox", children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+}
+// A radio group's id and value, for its radios.
+const RadioContext = createContext(null);
+/**
+ * Radio items in a Menu or Menu.Submenu, one of which is checked.
+ *
+ *   <Menu.RadioGroup value={sort} onValueChange={setSort} label="Sort by">
+ *     <Menu.Radio value="name">Name</Menu.Radio>
+ *     <Menu.Radio value="date">Date</Menu.Radio>
+ *   </Menu.RadioGroup>
+ *
+ * - `value`, `defaultValue`; `onValueChange`: called with the checked radio's value
+ * - `label`: an optional heading
+ */
+function RadioGroup({ value, defaultValue = null, onValueChange, label = null, children }) {
+    const menu = useMenu();
+    const id = useId();
+    const [own, setOwn] = useState(defaultValue);
+    const current = value !== undefined ? value : own;
+    // Radios register their own values, keyed by the group (two groups can share values).
+    const values = useRef(new Map());
+    return (_jsx(RadioContext.Provider, { value: { id, value: current }, children: _jsxs(Ark.RadioItemGroup, { ...menu.part('item-group'), value: current == null ? '' : `${id}/${current}`, onValueChange: (details) => {
+                const next = values.current.get(details.value);
+                if (next === undefined)
+                    return;
+                setOwn(next);
+                onValueChange?.(next);
+            }, children: [label && _jsx(Ark.ItemGroupLabel, { ...menu.part('group-label'), children: label }), _jsx(RadioValues.Provider, { value: values.current, children: children })] }) }));
+}
+const RadioValues = createContext(null);
+/**
+ * One radio item in a Menu.RadioGroup; its content is the label.
+ *
+ * - `value`: what the group's value becomes
+ * - `icon`, `shortcut`, `disabled` and `keepOpen`: as on Menu.Item
+ */
+function Radio({ value, icon = null, shortcut = null, disabled = false, keepOpen = null, children }) {
+    const menu = useMenu();
+    const group = useContext(RadioContext);
+    const values = useContext(RadioValues);
+    const key = `${group?.id}/${value}`;
+    values?.set(key, value);
+    return (_jsxs(Ark.RadioItem, { ...menu.part('item'), value: key, disabled: !!disabled, ...closeFor(keepOpen), children: [_jsx("span", { ...menu.part('indicator'), children: _jsx(Ark.ItemIndicator, { ...menu.part('item-indicator'), "data-type": "radio" }) }), _jsx(ItemInside, { part: menu.part, icon: icon, shortcut: shortcut, children: children })] }));
+}
+/**
+ * A submenu inside a Menu (or another Submenu): a row that opens a nested
+ * menu of its own items, from `items` or child components like Menu's.
+ *
+ *   <Menu.Submenu label="Share" icon="lucide:share-2">
+ *     <Menu.Item value="email">Email</Menu.Item>
+ *   </Menu.Submenu>
+ *
+ * - `label`: the row's text; `icon`: an optional Iconify name before it
+ * - `items`: as on Menu; `keepOpen` for its items (it follows its menu)
+ *
+ * Its items' selections reach the outer Menu's `onSelect`.
+ */
+function Submenu({ label, icon = null, items = [], keepOpen = null, className, children }) {
+    const outer = useMenu();
+    const part = outer.part;
+    const stays = keepOpen ?? outer.keepOpen;
+    return (_jsxs(Ark.Root, { closeOnSelect: !stays, positioning: { placement: 'right-start', strategy: 'fixed', gutter: 2 }, navigate: (details) => details.node.click(), onSelect: (details) => outer.select(details.value), children: [_jsxs(Ark.TriggerItem, { ...part('item'), children: [icon && _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }), _jsx("span", { ...part('label'), children: label }), _jsx("iconify-icon", { ...part('chevron'), icon: "lucide:chevron-right", "aria-hidden": "true" })] }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...part('content'), className: className, children: _jsxs(MenuContext.Provider, { value: { ...outer, keepOpen: stays }, children: [_jsx(Entries, { items: items }), children] }) }) })] }));
+}
+// A checkbox or radio entry from `items`, checked by the root menu. Zag's
+// option props straight onto it: Ark's RadioItem wants a RadioItemGroup round it.
+function Option({ entry, optionKey, label, disabled, siblings }) {
+    const menu = useMenu();
+    const api = useMenuContext();
+    const props = {
+        type: entry.type, value: optionKey, checked: menu.isChecked(optionKey, !!entry.checked), disabled,
+        valueText: typeof label === 'string' ? label : optionKey, ...closeFor(entry.keepOpen),
+        onCheckedChange: (on) => menu.check(entry, optionKey, on, siblings),
+    };
+    return (_jsxs("div", { ...api.getOptionItemProps(props), ...menu.part('item'), "data-danger": entry.danger || undefined, children: [_jsx("span", { ...menu.part('indicator'), children: _jsx("span", { ...api.getItemIndicatorProps(props), ...menu.part('item-indicator'), "data-type": entry.type, children: entry.type === 'checkbox' && _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }) }), entry.icon && _jsx("iconify-icon", { ...menu.part('icon'), icon: entry.icon, "aria-hidden": "true" }), _jsx("span", { ...menu.part('label'), children: label }), entry.shortcut && _jsx("kbd", { ...menu.part('shortcut'), children: entry.shortcut })] }));
+}
+// A menu's `items` array, as the components above.
+function Entries({ items }) {
+    const menu = useMenu();
+    const { labelKey, valueKey, disabledKey } = menu.keys;
+    const field = (entry, key) => entry[key];
+    return _jsx(_Fragment, { children: items.map((entry, i) => {
+            if (typeof entry !== 'object')
+                return _jsx(Item, { value: entry, children: entry }, i);
+            const label = field(entry, labelKey);
+            const value = (field(entry, valueKey) ?? label);
+            const disabled = !!field(entry, disabledKey);
+            if (entry.separator)
+                return _jsx(Separator, {}, i);
+            if (entry.group)
+                return _jsx("div", { ...menu.part('group-label'), children: entry.group }, i);
+            if (entry.items)
+                return _jsx(Submenu, { label: label, icon: entry.icon, items: entry.items }, i);
+            if (entry.type === 'checkbox' || entry.type === 'radio') {
+                // Radio keys include their `name`, so two groups can share values.
+                const key = entry.type === 'radio' ? `${entry.name ?? ''}/${value}` : String(value);
+                return _jsx(Option, { entry: entry, optionKey: key, label: label, disabled: disabled, siblings: items }, i);
+            }
+            return (_jsx(Item, { value: value, href: entry.href, icon: entry.icon, shortcut: entry.shortcut, danger: entry.danger, disabled: disabled, keepOpen: entry.keepOpen, children: label }, i));
+        }) });
+}
+function MenuShortcut({ items = [], labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', trigger = null, placement = 'bottom-start', label = null, keepOpen = false, context = false, open, defaultOpen, onOpenChange, onSelect, onChange, className, classes, children, ...rest }) {
+    const part = partsOf('menu', classes);
+    const values = useRef(new Map());
+    // `items` checkbox and radio entries, starting from their own `checked`.
+    const [checks, setChecks] = useState({});
+    const shared = {
+        part, keepOpen, keys: { labelKey, valueKey, disabledKey },
+        remember: (key, value) => { values.current.set(key, value); },
+        select: (key) => { if (values.current.has(key))
+            onSelect?.(values.current.get(key)); },
+        isChecked: (key, initial) => checks[key] ?? initial,
+        check: (entry, key, on, siblings) => {
+            const next = { ...checks };
+            if (entry.type === 'radio') {
+                if (next[key] ?? entry.checked)
+                    return;
+                for (const other of siblings) {
+                    if (typeof other === 'object' && other.type === 'radio' && other.name === entry.name) {
+                        next[`${other.name ?? ''}/${other[valueKey] ?? other[labelKey]}`] = false;
+                    }
+                }
+            }
+            next[key] = on;
+            setChecks(next);
+            onChange?.({ type: entry.type, name: entry.name ?? null, value: entry[valueKey] ?? entry[labelKey], checked: on });
+        },
+    };
+    const Trigger = context ? Ark.ContextTrigger : Ark.Trigger;
+    return (_jsxs(Ark.Root, { closeOnSelect: !keepOpen, positioning: { placement, strategy: 'fixed', gutter: 4 }, ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...(onOpenChange && { onOpenChange: (details) => onOpenChange(details.open) }), 
+        // Enter on a link: Zag's own click doesn't bubble, so routers listening
+        // on the document would miss it.
+        navigate: (details) => details.node.click(), onSelect: (details) => shared.select(details.value), children: [trigger && _jsx(Trigger, { asChild: true, children: trigger }), _jsx(Ark.Positioner, { ...part('positioner'), children: _jsx(Ark.Content, { ...rest, ...part('content'), className: cx(className, classes?.content), children: _jsxs(MenuContext.Provider, { value: shared, children: [label && _jsx("div", { ...part('menu-label'), children: label }), _jsx(Entries, { items: items }), children] }) }) })] }));
+}
+export const Menu = withParts(MenuShortcut, {
+    Item, Separator, Group, Checkbox, RadioGroup, Radio, Submenu,
+    Root: Ark.Root,
+    Trigger: Ark.Trigger,
+    ContextTrigger: Ark.ContextTrigger,
+    Positioner: Ark.Positioner,
+    Content: Ark.Content,
+    ItemText: Ark.ItemText,
+    ItemIndicator: Ark.ItemIndicator,
+    ItemGroup: Ark.ItemGroup,
+    ItemGroupLabel: Ark.ItemGroupLabel,
+    CheckboxItem: Ark.CheckboxItem,
+    RadioItemGroup: Ark.RadioItemGroup,
+    RadioItem: Ark.RadioItem,
+    TriggerItem: Ark.TriggerItem,
+    Arrow: Ark.Arrow,
+    ArrowTip: Ark.ArrowTip,
+    Context: Ark.Context,
+});
+/**
+ * A Menu opened by right-clicking (or long-pressing on touch) an area, at the pointer.
+ *
+ *   <ContextMenu items={actions} onSelect={run} trigger={<div>…the area…</div>} />
+ *
+ * Takes the same props, `items` and child components (submenus too) as Menu.
+ */
+export function ContextMenu(props) {
+    return _jsx(MenuShortcut, { ...props, context: true });
+}
+export { Item as MenuItem, Separator as MenuSeparator, Group as MenuGroup, Checkbox as MenuCheckbox, RadioGroup as MenuRadioGroup, Radio as MenuRadio, Submenu };

package/dist/menu/menu.css

@@ -0,0 +1,38 @@
+/* Shared by Menu, its child components and submenus. Zag names most parts:
+   item, option-item, trigger-item, separator, item-group-label… */
+@layer ui {
+  /* Zag copies the content's z-index onto its positioner. */
+  [data-scope=menu][data-part=content] {
+    z-index: 50; font-weight: 400; min-width: 12rem; padding: 0.5rem 0.25rem; box-sizing: border-box; text-align: left; outline: none;
+    background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-shadow);
+    transform-origin: var(--transform-origin);
+    &[data-state=open] { animation: ui-menu-in 120ms ease-out; }
+    &[data-state=closed] { animation: ui-menu-out 100ms ease-in forwards; }
+  }
+  [data-scope=menu]:is([data-part=item], [data-part=option-item], [data-part=trigger-item]) {
+    display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem; height: 2rem; border-radius: 4px; font-size: 13px;
+    color: inherit; text-decoration: none; cursor: pointer; user-select: none; outline: none;
+    &[data-highlighted], &[data-state=open] { background: var(--ui-hover); }
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; }
+    &[data-danger] { color: var(--ui-danger); }
+  }
+  [data-scope=menu][data-part=icon] { display: block; font-size: 15px; color: var(--ui-muted); flex-shrink: 0;
+    [data-danger] > & { color: inherit; } }
+  [data-scope=menu][data-part=label] { flex: 1; }
+  [data-scope=menu][data-part=shortcut] { margin-left: 1rem; color: var(--ui-muted); font-size: 11px; font-family: inherit; }
+  [data-scope=menu][data-part=indicator] { display: grid; place-items: center; width: 15px; height: 15px; flex-shrink: 0; }
+  /* Checked marks in the accent: a tick, and a dot in a soft halo. Zag hides them when unchecked. */
+  [data-scope=menu][data-part=item-indicator] {
+    &[data-type=checkbox] { display: block; font-size: 14px; color: var(--ui-accent); }
+    &[data-type=radio] { display: block; width: 6px; height: 6px; border-radius: 9999px; background: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); } }
+  [data-scope=menu][data-part=chevron] { display: block; font-size: 14px; margin-left: auto; color: var(--ui-muted); }
+  /* A div or an <hr> (Ark's): no border of its own. */
+  [data-scope=menu][data-part=separator] { display: block; height: 1px; margin: 0.25rem -0.25rem; border: none; background: var(--ui-border); }
+  [data-scope=menu]:is([data-part=group-label], [data-part=item-group-label], [data-part=menu-label]) {
+    padding: 0.5rem 0.5rem 0.25rem; font-size: 12px; font-weight: 500; color: var(--ui-muted); }
+  /* The menu's own label reads a little stronger than its group headings. */
+  [data-scope=menu][data-part=menu-label] { padding-top: 0.375rem; color: var(--ui-text); font-weight: 600; }
+  @keyframes ui-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
+  @keyframes ui-menu-out { to { opacity: 0; transform: scale(0.98); } }
+}

package/dist/native-select/NativeSelect.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The browser's own select, styled like our inputs: the phone's own picker,
+ * long lists without search, and plain form posts.
+ *
+ *   <NativeSelect label="Species" items={['Dog', 'Cat', 'Rabbit']} value={species} onValueChange={setSpecies} />
+ *
+ * Inside a Field it takes the field's label, hint and error.
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`;
+ *   a `group` puts them under that heading)
+ * - `value`, `defaultValue`: the item's own value; `onValueChange`: called with it
+ * - `placeholder`: an empty first option (it can be chosen to clear it)
+ * - `label`: a label above it (skipped inside a Field); `size`: 'sm', 'md' or 'lg'
+ * - `name`, `required`, `disabled`: as on a <select>
+ */
+import { type ReactNode, type SelectHTMLAttributes } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './native-select.css';
+type Value<T, K extends string> = T extends Record<string, unknown> ? T[K] : T;
+export type NativeSelectProps<T, K extends string = 'value'> = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'defaultValue' | 'size'> & {
+    items: readonly T[];
+    value?: NoInfer<Value<T, K>> | null;
+    defaultValue?: NoInfer<Value<T, K>> | null;
+    onValueChange?: (value: NoInfer<Value<T, K>> | null) => void;
+    placeholder?: string | null;
+    label?: ReactNode;
+    labelKey?: string;
+    valueKey?: K;
+    disabledKey?: string;
+    size?: 'sm' | 'md' | 'lg';
+    classes?: Classes<'root' | 'label' | 'control' | 'select' | 'indicator'>;
+};
+export declare function NativeSelect<T, K extends string = 'value'>({ items, value, defaultValue, onValueChange, placeholder, label, labelKey, valueKey, disabledKey, size, className, classes, ...rest }: NativeSelectProps<T, K>): import("react").JSX.Element;
+export {};

package/dist/native-select/NativeSelect.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The browser's own select, styled like our inputs: the phone's own picker,
+ * long lists without search, and plain form posts.
+ *
+ *   <NativeSelect label="Species" items={['Dog', 'Cat', 'Rabbit']} value={species} onValueChange={setSpecies} />
+ *
+ * Inside a Field it takes the field's label, hint and error.
+ *
+ * - `items`: strings, or objects (see `labelKey`, `valueKey`, `disabledKey`;
+ *   a `group` puts them under that heading)
+ * - `value`, `defaultValue`: the item's own value; `onValueChange`: called with it
+ * - `placeholder`: an empty first option (it can be chosen to clear it)
+ * - `label`: a label above it (skipped inside a Field); `size`: 'sm', 'md' or 'lg'
+ * - `name`, `required`, `disabled`: as on a <select>
+ */
+import { useId } from 'react';
+import { Field, useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, useControllable } from '../utils.js';
+import '../theme.css';
+import './native-select.css';
+export function NativeSelect({ items, value, defaultValue, onValueChange, placeholder = null, label = null, labelKey = 'label', valueKey = 'value', disabledKey = 'disabled', size = 'md', className, classes, ...rest }) {
+    const field = useFieldContext();
+    const part = partsOf('native-select', classes);
+    const id = useId();
+    const [current, setCurrent] = useControllable(value, defaultValue ?? null, onValueChange);
+    const key = (item, k) => item[k];
+    const isObject = (item) => typeof item === 'object' && item !== null;
+    const labelOf = (item) => String(isObject(item) ? key(item, labelKey) : item);
+    const valueOf = (item) => (isObject(item) ? key(item, valueKey) : item);
+    const groupOf = (item) => (isObject(item) ? key(item, 'group') : undefined);
+    const option = (item) => (_jsx("option", { value: String(valueOf(item)), disabled: isObject(item) && !!key(item, disabledKey), children: labelOf(item) }, String(valueOf(item))));
+    // Grouped items under their headings, in order of first appearance.
+    const groups = [...new Set(items.map(groupOf))];
+    // <select> values are strings: map back to the item's own.
+    function change(raw) {
+        const item = items.find((i) => String(valueOf(i)) === raw);
+        setCurrent(item === undefined ? null : valueOf(item));
+    }
+    const props = {
+        ...rest, ...part('select'), value: current == null ? '' : String(current),
+        onChange: (e) => { rest.onChange?.(e); change(e.target.value); },
+    };
+    const options = _jsxs(_Fragment, { children: [placeholder !== null && _jsx("option", { value: "", children: placeholder }), groups.length > 1 || groups[0]
+                ? groups.map((group) => group
+                    ? _jsx("optgroup", { label: group, children: items.filter((i) => groupOf(i) === group).map(option) }, group)
+                    : items.filter((i) => !groupOf(i)).map(option))
+                : items.map(option)] });
+    return (_jsxs("div", { ...part('root'), className: cx(className, classes?.root), "data-size": size, children: [label && !field && _jsx("label", { ...part('label'), htmlFor: id, children: label }), _jsxs("div", { ...part('control'), children: [field ? _jsx(Field.Select, { ...props, children: options }) : _jsx("select", { id: id, ...props, children: options }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevron-down", "aria-hidden": "true" })] })] }));
+}

package/dist/native-select/native-select.css

@@ -0,0 +1,16 @@
+@layer ui {
+  [data-scope=native-select][data-part=root] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=native-select][data-part=label] { display: block; font-size: 14px; font-weight: 500; margin-bottom: 0.375rem; }
+  [data-scope=native-select][data-part=control] { position: relative; display: flex; align-items: center; min-width: 0; }
+  [data-scope=native-select][data-part=select] { appearance: none; width: 100%; min-width: 0; box-sizing: border-box;
+    height: var(--ui-control-height); padding: 0 2rem 0 0.75rem; background: var(--ui-surface); border: 1px solid var(--ui-border);
+    border-radius: var(--ui-radius); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px; cursor: pointer;
+    &:focus-visible { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[aria-invalid=true], &[data-invalid] { border-color: var(--ui-danger); }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+    /* The placeholder (the empty value) looks like one. */
+    &:has(option[value=""]:checked) { color: var(--ui-muted); }
+    [data-size=sm] > [data-part=control] > & { height: var(--ui-control-height-sm); padding-left: 0.625rem; font-size: 13px; }
+    [data-size=lg] > [data-part=control] > & { height: var(--ui-control-height-lg); font-size: 15px; } }
+  [data-scope=native-select][data-part=indicator] { position: absolute; right: 0.625rem; color: var(--ui-muted); font-size: 16px; pointer-events: none; }
+}