@idyeah/diya 0.0.0 → 1.0.0

package/dist/internal/brand.js

@@ -0,0 +1,57 @@
+// The brand color, worked out once per provider into the four accent tokens.
+/** DIYA's own accent when the provider sets no `brandColor`: a true neutral ink in Light, its pale twin in Dark. */
+export const DIYA_DEFAULT_BRAND = { light: '#262626', dark: '#e8e8e8' };
+// DIYA's default surface, raised and text per theme, kept equal to styles.css by a test.
+export const BRAND_GROUNDS = {
+    light: { surface: '#ffffff', raised: '#ffffff', text: '#202627' },
+    dark: { surface: '#111113', raised: '#18181b', text: '#f1f3f2' },
+};
+// Text on the fill: the first of these that reaches 4.5:1. White wins whenever it can.
+const TEXT_ON_FILL = ['#fafafa', '#ffffff', '#1c1c1c', '#000000'];
+// The same formula as Customize's theme export (apps/diya lib/customize/tokens.ts), so both give the same pixels.
+// The alphas the soft tint renders at (#…1f and #…33), so contrast is checked on the pixels people see.
+const SOFT_ALPHA = { light: 31 / 255, dark: 51 / 255 };
+const AA = 4.5;
+/** `#rgb` or `#rrggbb`, with or without the hash, as lowercase `#rrggbb`; anything else is undefined. */
+export function normalizeHex(value) {
+    const hex = value.trim().replace(/^#/, '');
+    if (/^[\da-f]{3}$/i.test(hex))
+        return `#${[...hex].map(x => x + x).join('').toLowerCase()}`;
+    return /^[\da-f]{6}$/i.test(hex) ? `#${hex.toLowerCase()}` : undefined;
+}
+const rgb = (hex) => [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
+const toHex = (color) => `#${color.map(c => Math.round(Math.min(255, Math.max(0, c))).toString(16).padStart(2, '0')).join('')}`;
+const linear = (c) => { const v = c / 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
+const luminance = ([r, g, b]) => 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+/** WCAG 2 contrast ratio between two opaque hex colors. */
+export function contrast(a, b) {
+    const [x, y] = [luminance(rgb(a)), luminance(rgb(b))];
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+const over = (top, alpha, ground) => top.map((c, i) => c * alpha + ground[i] * (1 - alpha));
+/** The four accent tokens for one theme, from a hex brand color; contrast is checked against DIYA's default grounds. */
+export function brandTokens(color, theme) {
+    const accent = normalizeHex(color) ?? DIYA_DEFAULT_BRAND[theme];
+    // One of pure white or black always reaches 4.5:1, so the search never falls through.
+    const accentText = TEXT_ON_FILL.find(text => contrast(accent, text) >= AA) ?? '#000000';
+    const alpha = SOFT_ALPHA[theme];
+    const accentSoft = `${accent}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`;
+    // Ink reads on the surface, raised surfaces and the soft tint over each; it moves toward the text color only as far as that needs.
+    const { surface, raised, text } = BRAND_GROUNDS[theme];
+    const grounds = [surface, raised].flatMap(ground => [ground, toHex(over(rgb(accent), alpha, rgb(ground)))]);
+    const passes = (candidate) => grounds.every(ground => contrast(candidate, ground) >= AA);
+    let accentInk = text;
+    for (let step = 0; step <= 40; step++) {
+        const candidate = toHex(over(rgb(text), step / 40, rgb(accent)));
+        if (passes(candidate)) {
+            accentInk = candidate;
+            break;
+        }
+    }
+    return { accent, accentText, accentSoft, accentInk };
+}
+/** A provider's `brandColor`, one color or one per theme, as the accent tokens for both themes. */
+export function resolveBrand(brandColor) {
+    const source = brandColor === undefined ? DIYA_DEFAULT_BRAND : typeof brandColor === 'string' ? { light: brandColor, dark: brandColor } : brandColor;
+    return { light: brandTokens(source.light, 'light'), dark: brandTokens(source.dark, 'dark') };
+}

package/dist/internal/cx.d.ts

@@ -0,0 +1,2 @@
+/** Joins class names, skipping empty ones, so a caller's className never leaves stray spaces. */
+export declare function cx(...names: Array<string | false | null | undefined>): string;

package/dist/internal/cx.js

@@ -0,0 +1,4 @@
+/** Joins class names, skipping empty ones, so a caller's className never leaves stray spaces. */
+export function cx(...names) {
+    return names.filter(Boolean).join(' ');
+}

package/dist/internal/link.d.ts

@@ -0,0 +1,14 @@
+import { type AnchorHTMLAttributes, type ComponentType, type ExoticComponent, type Ref } from 'react';
+/** The props DIYA passes to a router link. */
+export type DiyaLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+    ref?: Ref<HTMLAnchorElement>;
+};
+/**
+ * A router link that takes anchor props, such as Next.js `Link` or a React Router `Link` adapter.
+ * Exotic components (forwardRef, memo) count too: React 18's types keep them apart from ComponentType.
+ */
+export type DiyaLinkComponent = ComponentType<DiyaLinkProps> | ExoticComponent<DiyaLinkProps>;
+export declare const LinkComponentContext: import("react").Context<DiyaLinkComponent | "a">;
+/** The link element DIYA renders for items with an `href`: the provider's `linkComponent`, or a plain anchor. */
+export declare function useDiyaLinkComponent(): DiyaLinkComponent | "a";

package/dist/internal/link.js

@@ -0,0 +1,7 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const LinkComponentContext = createContext('a');
+/** The link element DIYA renders for items with an `href`: the provider's `linkComponent`, or a plain anchor. */
+export function useDiyaLinkComponent() {
+    return useContext(LinkComponentContext);
+}

package/dist/internal/slot.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement, type ReactNode, type Ref } from 'react';
+type AnyProps = Record<string, unknown>;
+/** The caller's single child element, unwrapped first if it arrived lazily from a Server Component. */
+export declare function onlyChild(children: ReactNode): ReactNode;
+/** Points every ref at the same node. */
+export declare function composeRefs<T>(...refs: Array<Ref<T> | undefined>): (node: T | null) => void;
+/** Merges DIYA's props into the caller's own element: classes join, styles merge, handlers both run (the child's first, and it can call preventDefault to stop DIYA's). */
+export declare function mergeSlotProps(slot: AnyProps, child: AnyProps): AnyProps;
+/**
+ * Renders the caller's single child element with DIYA's props merged in; powers `asChild`.
+ * `<Button asChild><Link href="/billing">Billing</Link></Button>` renders the Link, styled as a Button.
+ * A function, not a component, so a forwarded ref reaches the child on React 18 too.
+ */
+export declare function renderSlot(children: ReactNode, slotProps: AnyProps, ref?: Ref<unknown>): ReactElement | null;
+export {};

package/dist/internal/slot.js

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Children, cloneElement, isValidElement, version } from 'react';
+import { cx } from './cx.js';
+// In development, a Server Component hands elements to a client component as
+// lazy references, which Children.only rejects; React 19's `use` unwraps them.
+// The name is looked up at run time so React 18 builds don't expect the export.
+const use = React[' use '.trim()];
+const lazyType = Symbol.for('react.lazy');
+/** The caller's single child element, unwrapped first if it arrived lazily from a Server Component. */
+export function onlyChild(children) {
+    const node = children;
+    if (use && node && typeof node === 'object' && node.$$typeof === lazyType && typeof node._payload?.then === 'function')
+        return Children.only(use(node._payload));
+    return Children.only(children);
+}
+/** Points every ref at the same node. */
+export function composeRefs(...refs) {
+    return (node) => {
+        for (const ref of refs) {
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }
+    };
+}
+// React 19 keeps an element's ref in props; React 18 keeps it on the element.
+const refInProps = Number(version.split('.')[0]) >= 19;
+function childRef(child) {
+    return refInProps ? child.props.ref : child.ref;
+}
+/** Merges DIYA's props into the caller's own element: classes join, styles merge, handlers both run (the child's first, and it can call preventDefault to stop DIYA's). */
+export function mergeSlotProps(slot, child) {
+    const merged = { ...slot, ...child };
+    for (const key of Object.keys(slot)) {
+        const ours = slot[key];
+        const theirs = child[key];
+        if (/^on[A-Z]/.test(key) && typeof ours === 'function' && typeof theirs === 'function') {
+            merged[key] = (event, ...rest) => {
+                ;
+                theirs(event, ...rest);
+                if (!event?.defaultPrevented)
+                    ours(event, ...rest);
+            };
+        }
+    }
+    merged.className = cx(slot.className, child.className) || undefined;
+    if (slot.style || child.style)
+        merged.style = { ...slot.style, ...child.style };
+    return merged;
+}
+/**
+ * Renders the caller's single child element with DIYA's props merged in; powers `asChild`.
+ * `<Button asChild><Link href="/billing">Billing</Link></Button>` renders the Link, styled as a Button.
+ * A function, not a component, so a forwarded ref reaches the child on React 18 too.
+ */
+export function renderSlot(children, slotProps, ref) {
+    const child = onlyChild(children);
+    if (!isValidElement(child))
+        return null;
+    const merged = mergeSlotProps(slotProps, child.props);
+    const theirRef = childRef(child);
+    const combined = ref && theirRef ? composeRefs(ref, theirRef) : (ref ?? theirRef);
+    if (combined)
+        merged.ref = combined;
+    return cloneElement(child, merged);
+}

package/dist/layout/Inline.d.ts

@@ -0,0 +1,4 @@
+import { type LayoutProps } from './layout.js';
+export type InlineProps = LayoutProps;
+/** Lays children out side by side, centered on one line, wrapping onto the next when they run out of room. */
+export declare const Inline: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLElement>>;

package/dist/layout/Inline.js

@@ -0,0 +1,7 @@
+import { createElement, forwardRef } from 'react';
+import { cx } from '../internal/cx.js';
+import { layoutAttributes } from './layout.js';
+/** Lays children out side by side, centered on one line, wrapping onto the next when they run out of room. */
+export const Inline = forwardRef(function Inline({ as = 'div', gap = 2, align = 'center', justify, wrap = true, className, style, children, ...rest }, ref) {
+    return createElement(as, { ...rest, ref, className: cx('diya-inline', className), ...layoutAttributes(gap, align, justify, wrap, style) }, children);
+});

package/dist/layout/Stack.d.ts

@@ -0,0 +1,4 @@
+import { type LayoutProps } from './layout.js';
+export type StackProps = LayoutProps;
+/** Lays children out top to bottom with even space between them. */
+export declare const Stack: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLElement>>;

package/dist/layout/Stack.js

@@ -0,0 +1,7 @@
+import { createElement, forwardRef } from 'react';
+import { cx } from '../internal/cx.js';
+import { layoutAttributes } from './layout.js';
+/** Lays children out top to bottom with even space between them. */
+export const Stack = forwardRef(function Stack({ as = 'div', gap = 4, align, justify, wrap = false, className, style, children, ...rest }, ref) {
+    return createElement(as, { ...rest, ref, className: cx('diya-stack', className), ...layoutAttributes(gap, align, justify, wrap, style) }, children);
+});

package/dist/layout/layout.d.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/** A step on DIYA's spacing scale (0 is none; 1 is 4px, 2 is 8px, 3 is 12px, 4 is 16px, 5 is 24px, 6 is 32px, 7 is 48px, 8 is 64px), or any CSS length such as '10px' or '1.5rem'. */
+export type DiyaSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
+/** Cross-axis alignment of the children. */
+export type DiyaAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** Main-axis distribution of the children. */
+export type DiyaJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+/** Elements a layout primitive can render as. */
+export type DiyaLayoutElement = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav' | 'form' | 'fieldset' | 'ul' | 'ol' | 'li' | 'span';
+/** Props shared by Stack and Inline. An interface, so declaration files keep these docs. */
+export interface LayoutProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** What to lay out. */
+    children?: ReactNode;
+    /** Space between children: a scale step from 0 to 8, or a CSS length. */
+    gap?: DiyaSpace;
+    /** Cross-axis alignment of the children. */
+    align?: DiyaAlign;
+    /** Main-axis distribution of the children. */
+    justify?: DiyaJustify;
+    /** Whether children move onto a new line when they run out of room. */
+    wrap?: boolean;
+    /** The element to render, such as 'section' or 'ul'. Defaults to 'div'. */
+    as?: DiyaLayoutElement;
+}
+/** Data attributes and the custom gap for a Stack or Inline root. */
+export declare function layoutAttributes(gap: DiyaSpace, align: DiyaAlign | undefined, justify: DiyaJustify | undefined, wrap: boolean, style: CSSProperties | undefined): {
+    'data-gap': string;
+    'data-align': DiyaAlign | undefined;
+    'data-justify': DiyaJustify | undefined;
+    'data-wrap': string | undefined;
+    style: CSSProperties | undefined;
+};

package/dist/layout/layout.js

@@ -0,0 +1,12 @@
+const STEPS = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8']);
+/** Data attributes and the custom gap for a Stack or Inline root. */
+export function layoutAttributes(gap, align, justify, wrap, style) {
+    const step = STEPS.has(String(gap));
+    return {
+        'data-gap': step ? String(gap) : 'custom',
+        'data-align': align,
+        'data-justify': justify,
+        'data-wrap': wrap ? 'true' : undefined,
+        style: step ? style : { '--diya-internal-gap': String(gap), ...style },
+    };
+}

package/dist/link/TextLink.d.ts

@@ -0,0 +1,23 @@
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+/** Native anchor attributes (href, target, rel…) pass through to the link. */
+export type TextLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Decorative icon before the text; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** Decorative icon after the text; hidden from assistive tech. */
+    trailingIcon?: ReactNode;
+    /** Flows inside a sentence and inherits its type size; off, it is a standalone body-size link. */
+    inline?: boolean;
+    /** Styles your single child element as the link instead of rendering an anchor, such as a router `Link`; the icons go inside it. */
+    asChild?: boolean;
+};
+/** A styled anchor; its children are the visible link text. Needs no provider, so it renders in server components. */
+export declare const TextLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    /** Decorative icon before the text; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** Decorative icon after the text; hidden from assistive tech. */
+    trailingIcon?: ReactNode;
+    /** Flows inside a sentence and inherits its type size; off, it is a standalone body-size link. */
+    inline?: boolean;
+    /** Styles your single child element as the link instead of rendering an anchor, such as a router `Link`; the icons go inside it. */
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/link/TextLink.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement } from 'react';
+import { cx } from '../internal/cx.js';
+import { onlyChild, renderSlot } from '../internal/slot.js';
+/** A styled anchor; its children are the visible link text. Needs no provider, so it renders in server components. */
+export const TextLink = forwardRef(function TextLink({ children, leadingIcon, trailingIcon, inline = false, asChild = false, className, ...props }, ref) {
+    const icons = (inner) => _jsxs(_Fragment, { children: [leadingIcon && _jsx("span", { "aria-hidden": "true", children: leadingIcon }), inner, trailingIcon && _jsx("span", { "aria-hidden": "true", children: trailingIcon })] });
+    if (asChild) {
+        const child = onlyChild(children);
+        if (!isValidElement(child))
+            return null;
+        const own = child;
+        const filled = leadingIcon || trailingIcon ? cloneElement(own, undefined, icons(own.props.children)) : own;
+        return renderSlot(filled, { ...props, className: cx('diya-text-link', className), 'data-inline': inline }, ref);
+    }
+    return _jsx("a", { ...props, ref: ref, className: cx('diya-text-link', className), "data-inline": inline, children: icons(children) });
+});

package/dist/list/List.d.ts

@@ -0,0 +1,48 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { listMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        list: typeof listMessages;
+    }
+}
+export type ListItem = {
+    /** Unique key for the row. */
+    id: string;
+    /** Visible main text. */
+    label: string;
+    /** Visible secondary text under the label. */
+    description?: string;
+    /** Decorative content before the text, such as an icon or Avatar; hidden from screen readers. */
+    leading?: ReactNode;
+    /** Visible content at the end of the row, such as a Badge or a value; must be noninteractive. */
+    trailing?: ReactNode;
+    /** Makes the whole row a button that calls this. */
+    onSelect?: () => void;
+    /** Disables a selectable row. */
+    disabled?: boolean;
+    /** Marks the open item, such as the message being read: a selected background and `aria-current="true"`. Defaults to false. */
+    current?: boolean;
+    /** Marks the item as not yet seen: a heavier label and a dot at the end of the row, and "unread" after the label for screen readers. Defaults to false. */
+    unread?: boolean;
+};
+export type ListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
+    /** The rows, in order. */
+    items: ListItem[];
+    /** Accessible name for the list; not shown. */
+    label: string;
+    /** Draws lines between rows. */
+    divided?: boolean;
+    /** Row height and text size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+};
+/** A vertical list of rows. Selectable rows use a native button; leading/trailing slots must be noninteractive. */
+export declare const List: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
+    /** The rows, in order. */
+    items: ListItem[];
+    /** Accessible name for the list; not shown. */
+    label: string;
+    /** Draws lines between rows. */
+    divided?: boolean;
+    /** Row height and text size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/list/List.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { listMessages } from './messages.js';
+/** A vertical list of rows. Selectable rows use a native button; leading/trailing slots must be noninteractive. */
+export const List = forwardRef(function List({ items, label, divided = false, size = 'medium', className, ...props }, ref) {
+    const t = useDiyaMessages('list', listMessages);
+    return _jsx("ul", { ...props, ref: ref, className: cx('diya-list', className), "aria-label": label, "data-divided": divided, "data-size": size, children: items.map((item) => {
+            // The open item is current on the row people reach: its button, or the list item itself.
+            const current = item.current ? 'true' : undefined;
+            const unread = item.unread ? true : undefined;
+            const content = _jsxs(_Fragment, { children: [item.leading && _jsx("span", { className: "diya-list-leading", "aria-hidden": "true", children: item.leading }), _jsxs("span", { className: "diya-list-copy", children: [_jsxs("span", { className: "diya-list-label", children: [item.label, unread && _jsxs("span", { className: "diya-sr-only", children: [", ", t.unread] })] }), item.description && _jsx("span", { className: "diya-list-description", children: item.description })] }), item.trailing && _jsx("span", { className: "diya-list-trailing", children: item.trailing }), unread && _jsx("span", { className: "diya-list-unread", "aria-hidden": "true" })] });
+            return _jsx("li", { "aria-current": item.onSelect ? undefined : current, children: item.onSelect ? _jsx("button", { type: "button", className: "diya-list-row", "aria-current": current, "data-unread": unread, disabled: item.disabled, onClick: item.onSelect, children: content }) : _jsx("div", { className: "diya-list-row", "data-unread": unread, children: content }) }, item.id);
+        }) });
+});

package/dist/list/messages.d.ts

@@ -0,0 +1,4 @@
+/** list: English defaults, overridable through DiyaProvider `messages`. */
+export declare const listMessages: {
+    unread: string;
+};

package/dist/list/messages.js

@@ -0,0 +1,2 @@
+/** list: English defaults, overridable through DiyaProvider `messages`. */
+export const listMessages = { unread: 'unread' };

package/dist/menu/Menu.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { type FloatingTriggerProps } from '../overlay/FloatingSurface.js';
+export type MenuItem = {
+    /** 'action' runs and closes; 'checkbox' toggles and keeps the menu open; 'radio' picks one of a set and closes. Defaults to 'action'. */
+    type?: 'action' | 'checkbox' | 'radio';
+    /** Whether a checkbox or radio item is on; you own this state. */
+    checked?: boolean;
+    /** Unique key for the item. */
+    id: string;
+    /** Visible item text; typing its first letter moves focus to it. */
+    label: string;
+    /** Decorative icon before the label; hidden from screen readers. */
+    icon?: ReactNode;
+    /** Visible keyboard hint, such as '⌘K'; it does not bind the key and is hidden from screen readers. */
+    shortcut?: string;
+    /** Shows the item but makes it unselectable. */
+    disabled?: boolean;
+    /** Styles the item as a destructive action, such as Delete. */
+    destructive?: boolean;
+    /** Draws a separator line above this item. */
+    separatorBefore?: boolean;
+    /** Makes the item a real link to this URL, through the provider's `linkComponent`; a plain click calls `onSelect` instead of navigating when both are given. */
+    href?: string;
+    /** Marks a link item as the page you're on (`aria-current="page"`). */
+    current?: boolean;
+    /** Called when the item is chosen; optional for link items. */
+    onSelect?: () => void;
+};
+export type MenuProps = FloatingTriggerProps & {
+    /** The trigger button's visible text, or only its accessible name when `triggerIcon` is set; also names the menu. */
+    label: string;
+    /** Shows this icon as an icon-only trigger instead of the label text. */
+    triggerIcon?: ReactNode;
+    /** The menu's items, in order. */
+    items: MenuItem[];
+    /** Disables the trigger. */
+    disabled?: boolean;
+};
+/** A button that opens a list of actions, links, checkboxes or radio choices, with arrow-key and typeahead navigation; `className`, `style`, other attributes and the ref go to the trigger. */
+export declare const Menu: import("react").ForwardRefExoticComponent<FloatingTriggerProps & {
+    /** The trigger button's visible text, or only its accessible name when `triggerIcon` is set; also names the menu. */
+    label: string;
+    /** Shows this icon as an icon-only trigger instead of the label text. */
+    triggerIcon?: ReactNode;
+    /** The menu's items, in order. */
+    items: MenuItem[];
+    /** Disables the trigger. */
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/menu/Menu.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { FloatingSurface } from '../overlay/FloatingSurface.js';
+import { useDiyaLinkComponent } from '../internal/link.js';
+/** A button that opens a list of actions, links, checkboxes or radio choices, with arrow-key and typeahead navigation; `className`, `style`, other attributes and the ref go to the trigger. */
+export const Menu = forwardRef(function Menu({ label, items, disabled = false, triggerIcon, ...props }, ref) {
+    const Link = useDiyaLinkComponent();
+    function navigate(event) {
+        const entries = Array.from(event.currentTarget.querySelectorAll('[role^="menuitem"]:not(:disabled)'));
+        if (!entries.length)
+            return;
+        const current = entries.indexOf(document.activeElement);
+        let next = -1;
+        if (event.key === 'ArrowDown')
+            next = (current + 1) % entries.length;
+        else if (event.key === 'ArrowUp')
+            next = current < 0 ? entries.length - 1 : (current - 1 + entries.length) % entries.length;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = entries.length - 1;
+        else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && event.key !== ' ') {
+            const ordered = [...entries.slice(current + 1), ...entries.slice(0, current + 1)];
+            const match = ordered.find((entry) => entry.dataset.label?.toLowerCase().startsWith(event.key.toLowerCase()));
+            if (match) {
+                event.preventDefault();
+                match.focus();
+            }
+            ;
+            return;
+        }
+        else
+            return;
+        event.preventDefault();
+        entries[next]?.focus();
+    }
+    return _jsx(FloatingSurface, { ...props, ref: ref, triggerIcon: triggerIcon, label: label, role: "menu", disabled: disabled, onPanelKeyDown: navigate, children: (close) => items.map((item) => _jsxs("div", { role: "none", children: [item.separatorBefore && _jsx("div", { role: "separator", className: "diya-menu-separator" }), item.href && !item.disabled && item.type !== 'checkbox' && item.type !== 'radio'
+                    ? _jsx(Link, { href: item.href, role: "menuitem", tabIndex: -1, "data-label": item.label, className: "diya-menu-item", "data-destructive": item.destructive, "aria-current": item.current ? 'page' : undefined, onKeyDown: (event) => { if (event.key === ' ') {
+                            event.preventDefault();
+                            event.currentTarget.click();
+                        } }, onClick: (event) => {
+                            if (item.onSelect && !event.defaultPrevented && !event.button && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+                                event.preventDefault();
+                                item.onSelect();
+                            }
+                            close();
+                        }, children: content(item) })
+                    : _jsx("button", { type: "button", role: item.type === 'checkbox' ? 'menuitemcheckbox' : item.type === 'radio' ? 'menuitemradio' : 'menuitem', "aria-checked": item.type === 'checkbox' || item.type === 'radio' ? !!item.checked : undefined, tabIndex: -1, "data-label": item.label, className: "diya-menu-item", "data-destructive": item.destructive, disabled: item.disabled, onClick: () => { item.onSelect?.(); if (item.type !== 'checkbox')
+                            close(); }, children: content(item) })] }, item.id)) });
+});
+function content(item) {
+    return _jsxs(_Fragment, { children: [(item.type === 'checkbox' || item.type === 'radio') && _jsx("span", { className: "diya-menu-icon", "aria-hidden": "true", children: item.checked ? (item.type === 'radio' ? '●' : '✓') : '' }), item.icon && _jsx("span", { className: "diya-menu-icon", "aria-hidden": "true", children: item.icon }), _jsx("span", { children: item.label }), item.shortcut && _jsx("span", { className: "diya-menu-shortcut", "aria-hidden": "true", children: item.shortcut })] });
+}