@idyeah/diya 0.0.0-stage → 1.0.0

package/dist/messages-defaults.d.ts

@@ -0,0 +1,201 @@
+/** Every built-in English string in the full library, for reference and translation. */
+export declare const defaultMessages: {
+    alert: {
+        dismiss: string;
+        brand: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    avatar: {
+        user: string;
+        online: string;
+        away: string;
+        busy: string;
+    };
+    badge: {
+        count: (count: number, label: string) => string;
+    };
+    breadcrumbs: {
+        label: string;
+        morePages: string;
+    };
+    calendar: {
+        previousMonth: string;
+        nextMonth: string;
+        chooseStart: string;
+        chooseEnd: string;
+        unavailableDay: (date: string) => string;
+    };
+    chart: {
+        total: string;
+        empty: string;
+        showData: string;
+        hideData: string;
+        dataTable: (title: string) => string;
+        dataCaption: (title: string) => string;
+        category: string;
+        value: string;
+    };
+    chatbot: {
+        you: string;
+        assistant: string;
+        message: string;
+        placeholder: string;
+        send: string;
+        stop: string;
+        retry: string;
+        copy: string;
+        copied: string;
+        copyUnavailable: string;
+        attach: string;
+        attachFiles: string;
+        remove: string;
+        preparing: string;
+        openChat: string;
+        closeChat: string;
+        messages: (title: string) => string;
+    };
+    choice: {
+        selectAll: string;
+    };
+    codeBlock: {
+        code: string;
+        namedCode: (label: string) => string;
+        copy: string;
+        copied: string;
+        copyFailed: string;
+    };
+    combobox: {
+        placeholder: string;
+        addAnother: string;
+        noResults: string;
+        openOptions: string;
+        closeOptions: string;
+        remove: (label: string) => string;
+    };
+    datePicker: {
+        chooseDate: string;
+        chooseRange: string;
+        chooseStart: string;
+        chooseEnd: string;
+        endDate: string;
+        previousMonth: string;
+        nextMonth: string;
+        today: string;
+        clear: string;
+        unavailableDay: (date: string) => string;
+    };
+    dialog: {
+        open: string;
+        confirm: string;
+        dismiss: string;
+        closeAction: string;
+        close: string;
+        error: string;
+    };
+    drawer: {
+        close: string;
+    };
+    fileUpload: {
+        title: string;
+        description: string;
+        choose: string;
+        remove: (name: string) => string;
+        rejected: (count: number) => string;
+        selected: (count: number) => string;
+        kilobytes: (size: string) => string;
+        megabytes: (size: string) => string;
+    };
+    form: {
+        submit: string;
+        cancel: string;
+    };
+    list: {
+        unread: string;
+    };
+    metric: {
+        increased: string;
+        decreased: string;
+        unchanged: string;
+        positive: string;
+        negative: string;
+        neutral: string;
+    };
+    pagination: {
+        label: string;
+        previous: string;
+        next: string;
+        perPage: string;
+        resultsPerPage: string;
+        page: (page: number) => string;
+        range: (start: number, end: number, total: number) => string;
+        noResults: string;
+    };
+    progress: {
+        inProgress: string;
+    };
+    rating: {
+        rated: (value: string, max: string) => string;
+        reviews: (count: number, formatted: string) => string;
+        count: (formatted: string) => string;
+    };
+    select: {
+        placeholder: string;
+    };
+    sideNavigation: {
+        label: string;
+        count: (label: string, count: number) => string;
+    };
+    siteHeader: {
+        home: string;
+        navigation: string;
+        openNavigation: string;
+        closeNavigation: string;
+        search: string;
+    };
+    slider: {
+        minimum: (label: string) => string;
+        maximum: (label: string) => string;
+    };
+    table: {
+        loading: string;
+        emptyTitle: string;
+        emptyDescription: string;
+        noMatches: string;
+        noMatchesDescription: string;
+        clearAll: string;
+        clearFilters: string;
+        clearSelection: string;
+        selected: (count: number) => string;
+        search: string;
+        searchLabel: (label: string) => string;
+        filterValue: (filter: string, value: string) => string;
+        noValue: string;
+        all: string;
+        open: string;
+        actions: string;
+        rowActions: (row: string) => string;
+        selectPage: string;
+        selectRow: (row: string) => string;
+        scrollHint: (label: string) => string;
+    };
+    tag: {
+        remove: (label: string) => string;
+    };
+    textInput: {
+        clear: (label: string) => string;
+    };
+    toast: {
+        label: string;
+    };
+    wizard: {
+        label: string;
+        progress: string;
+        back: string;
+        next: string;
+        complete: string;
+        step: (step: number, total: number) => string;
+    };
+};

package/dist/messages-defaults.js

@@ -0,0 +1,61 @@
+import { alertMessages } from './alert/messages.js';
+import { avatarMessages } from './avatar/messages.js';
+import { badgeMessages } from './badge/messages.js';
+import { breadcrumbsMessages } from './breadcrumbs/messages.js';
+import { calendarMessages } from './calendar/messages.js';
+import { chartMessages } from './data-viz/messages.js';
+import { chatbotMessages } from './application-patterns/chatbot-messages.js';
+import { choiceMessages } from './choice/messages.js';
+import { codeBlockMessages } from './code-block/messages.js';
+import { comboboxMessages } from './combobox/messages.js';
+import { datePickerMessages } from './date-picker/messages.js';
+import { dialogMessages } from './dialog/messages.js';
+import { drawerMessages } from './workflow/drawer-messages.js';
+import { fileUploadMessages } from './workflow/file-upload-messages.js';
+import { formMessages } from './workflow/form-messages.js';
+import { listMessages } from './list/messages.js';
+import { metricMessages } from './metric/messages.js';
+import { paginationMessages } from './pagination/messages.js';
+import { progressMessages } from './progress/messages.js';
+import { ratingMessages } from './rating/messages.js';
+import { selectMessages } from './select/messages.js';
+import { sideNavigationMessages } from './application-patterns/side-navigation-messages.js';
+import { siteHeaderMessages } from './site-header/messages.js';
+import { sliderMessages } from './slider/messages.js';
+import { tableMessages } from './table/messages.js';
+import { tagMessages } from './tag/messages.js';
+import { textInputMessages } from './text-input/messages.js';
+import { toastMessages } from './toast/messages.js';
+import { wizardMessages } from './workflow/wizard-messages.js';
+/** Every built-in English string in the full library, for reference and translation. */
+export const defaultMessages = {
+    alert: alertMessages,
+    avatar: avatarMessages,
+    badge: badgeMessages,
+    breadcrumbs: breadcrumbsMessages,
+    calendar: calendarMessages,
+    chart: chartMessages,
+    chatbot: chatbotMessages,
+    choice: choiceMessages,
+    codeBlock: codeBlockMessages,
+    combobox: comboboxMessages,
+    datePicker: datePickerMessages,
+    dialog: dialogMessages,
+    drawer: drawerMessages,
+    fileUpload: fileUploadMessages,
+    form: formMessages,
+    list: listMessages,
+    metric: metricMessages,
+    pagination: paginationMessages,
+    progress: progressMessages,
+    rating: ratingMessages,
+    select: selectMessages,
+    sideNavigation: sideNavigationMessages,
+    siteHeader: siteHeaderMessages,
+    slider: sliderMessages,
+    table: tableMessages,
+    tag: tagMessages,
+    textInput: textInputMessages,
+    toast: toastMessages,
+    wizard: wizardMessages,
+};

package/dist/messages.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Built-in strings, by component. Each component that has strings adds its
+ * own entry (see its messages module), so a bundle types exactly the
+ * components it contains. Values are strings, or functions for strings that
+ * interpolate values.
+ */
+export interface DiyaMessages {
+}
+/** Override any subset: `{ table: { emptyTitle: 'Nothing here' } }`. */
+export type DiyaMessagesInput = {
+    [K in keyof DiyaMessages]?: Partial<DiyaMessages[K]>;
+};

package/dist/messages.js

@@ -0,0 +1 @@
+export {};

package/dist/metric/Metric.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes } from 'react';
+import { metricMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        metric: typeof metricMessages;
+    }
+}
+export type MetricChange = {
+    /** Visible change text, already formatted, such as '+12%'. */
+    value: string;
+    /** Draws an up, down or flat arrow and is announced as increased, decreased or unchanged. */
+    direction: 'up' | 'down' | 'flat';
+    /** Whether the change is good ('positive', green), bad ('negative', red) or neither; independent of direction, and announced. */
+    meaning: 'positive' | 'negative' | 'neutral';
+    /** Visible context after the change, such as 'vs last month'. */
+    comparison?: string;
+};
+export type MetricProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The headline figure as visible text, already formatted, such as '2,481'. */
+    value: string;
+    /** Visible caption above the figure. */
+    label?: string;
+    /** Visible unit after the figure, such as 'ms' or '%'. */
+    unit?: string;
+    /** Figure size. Defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** A change against an earlier value, shown under the figure. */
+    change?: MetricChange;
+};
+/** One headline number with an optional caption, unit and change. */
+export declare const Metric: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The headline figure as visible text, already formatted, such as '2,481'. */
+    value: string;
+    /** Visible caption above the figure. */
+    label?: string;
+    /** Visible unit after the figure, such as 'ms' or '%'. */
+    unit?: string;
+    /** Figure size. Defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** A change against an earlier value, shown under the figure. */
+    change?: MetricChange;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/metric/Metric.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { metricMessages } from './messages.js';
+/** One headline number with an optional caption, unit and change. */
+export const Metric = forwardRef(function Metric({ value, label, unit, change, size = 'medium', className, ...props }, ref) {
+    const t = useDiyaMessages('metric', metricMessages);
+    return _jsxs("div", { ...props, ref: ref, className: cx('diya-metric', className), "data-size": size, children: [label && _jsx("span", { className: "diya-metric-label", children: label }), _jsxs("div", { className: "diya-metric-number", children: [value, unit && _jsx("span", { className: "diya-metric-unit", children: unit })] }), change && _jsxs("div", { className: "diya-metric-comparison", children: [_jsxs("span", { className: "diya-metric-change", "data-meaning": change.meaning, children: [_jsx("span", { "aria-hidden": "true", children: change.direction === 'flat' ? '→' : change.direction === 'up' ? '↑' : '↓' }), _jsxs("span", { className: "diya-metric-sr", children: [change.direction === 'flat' ? t.unchanged : change.direction === 'up' ? t.increased : t.decreased, ": "] }), change.value, _jsxs("span", { className: "diya-metric-sr", children: [" (", t[change.meaning], ")"] })] }), change.comparison && _jsx("span", { children: change.comparison })] })] });
+});

package/dist/metric/messages.d.ts

@@ -0,0 +1,9 @@
+/** metric: English defaults, overridable through DiyaProvider `messages`. */
+export declare const metricMessages: {
+    increased: string;
+    decreased: string;
+    unchanged: string;
+    positive: string;
+    negative: string;
+    neutral: string;
+};

package/dist/metric/messages.js

@@ -0,0 +1,2 @@
+/** metric: English defaults, overridable through DiyaProvider `messages`. */
+export const metricMessages = { increased: 'Increased', decreased: 'Decreased', unchanged: 'Unchanged', positive: 'positive', negative: 'negative', neutral: 'neutral' };

package/dist/overlay/FloatingSurface.d.ts

@@ -0,0 +1,29 @@
+import { type ButtonHTMLAttributes, type ReactElement, type ReactNode, type KeyboardEvent } from 'react';
+/** Root props shared by Menu and Popover: everything except `children` lands on the trigger. An interface, so declaration files keep these docs. */
+export interface FloatingTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'type' | 'role'> {
+    /** Your own trigger element, such as `<Button iconOnly aria-label="More">…</Button>`; DIYA wires its click, keys and ARIA. Defaults to a DIYA Button showing `label`. */
+    trigger?: ReactElement;
+    /** Whether the panel is open; leave it out to let the trigger manage it. */
+    open?: boolean;
+    /** Called with the next open state whenever the panel opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/** The shared trigger button and floating panel behind Menu and Popover. */
+export declare const FloatingSurface: import("react").ForwardRefExoticComponent<FloatingTriggerProps & {
+    /** Shows this icon as an icon-only trigger; `label` then becomes its accessible name. */
+    triggerIcon?: ReactNode;
+    /** The trigger's visible text (or accessible name with `triggerIcon`) and the panel's accessible name. */
+    label: string;
+    /** 'menu' for a list of menu items, 'dialog' for free content with its own tab order. Defaults to 'dialog'. */
+    role?: "menu" | "dialog";
+    /** Preferred side for the panel; it moves to stay on screen. Defaults to 'bottom'. */
+    placement?: "top" | "bottom";
+    /** Disables the trigger and closes an open panel. */
+    disabled?: boolean;
+    /** The panel's content, or a function that renders it; call `close` to shut it and return focus to the trigger. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /** Handles keys other than Tab inside the panel, such as menu arrow keys. */
+    onPanelKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    /** Focuses the last control instead of the first when the panel opens. */
+    focusLast?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/overlay/FloatingSurface.js

@@ -0,0 +1,254 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { Button } from '../button/Button.js';
+import { useDiyaPortal } from '../DiyaProvider.js';
+import { composeRefs, mergeSlotProps, renderSlot } from '../internal/slot.js';
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+// Scrolls this soon after opening only reposition, even if the trigger is briefly out of view:
+// the browser may still be bringing it in after focus moved to it.
+const OPEN_SETTLE_MS = 300;
+/** Whether a trigger rectangle still shows any part inside the viewport. */
+function inViewport(rect, view) {
+    return rect.bottom > 0 && rect.right > 0 && rect.top < view.innerHeight && rect.left < view.innerWidth;
+}
+const tabbableSelector = 'a[href], area[href], button, input:not([type="hidden"]), select, textarea, iframe, object, embed, audio[controls], video[controls], summary, [contenteditable], [tabindex]';
+function tabStops(scope, surface) {
+    const document = scope.ownerDocument ?? scope;
+    const view = document.defaultView;
+    const stops = Array.from(scope.querySelectorAll(tabbableSelector)).filter((element) => {
+        if (surface?.contains(element) || element.matches(':disabled'))
+            return false;
+        const editable = element.hasAttribute('contenteditable') &&
+            element.contentEditable !== 'false' &&
+            !element.parentElement?.isContentEditable;
+        if (element.tabIndex < 0 && (element.hasAttribute('tabindex') || !editable))
+            return false;
+        for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) {
+            if (ancestor.hidden || ancestor.hasAttribute('inert'))
+                return false;
+            const style = view?.getComputedStyle(ancestor);
+            if (style?.display === 'none' ||
+                style?.visibility === 'hidden' ||
+                style?.visibility === 'collapse' ||
+                style?.contentVisibility === 'hidden')
+                return false;
+            if (ancestor !== element &&
+                ancestor.tagName === 'DETAILS' &&
+                !ancestor.hasAttribute('open')) {
+                const summary = Array.from(ancestor.children).find((child) => child.tagName === 'SUMMARY');
+                if (!summary?.contains(element))
+                    return false;
+            }
+        }
+        return true;
+    });
+    const ordered = stops
+        .filter((element) => {
+        if (element.tagName !== 'INPUT')
+            return true;
+        const radio = element;
+        return (radio.type !== 'radio' ||
+            !radio.name ||
+            radio.checked ||
+            !stops.some((candidate) => {
+                if (candidate.tagName !== 'INPUT')
+                    return false;
+                const other = candidate;
+                return (other.type === 'radio' &&
+                    other.name === radio.name &&
+                    other.form === radio.form &&
+                    other.checked);
+            }));
+    })
+        .map((element, index) => ({ element, index, order: Math.max(0, element.tabIndex) }))
+        .sort((a, b) => {
+        if (a.order === b.order)
+            return a.index - b.index;
+        if (a.order === 0)
+            return 1;
+        if (b.order === 0)
+            return -1;
+        return a.order - b.order;
+    });
+    return ordered.map(({ element }) => element);
+}
+function adjacentTabStop(anchor, surface, backwards) {
+    const modal = anchor.closest('dialog[open]');
+    const ordered = tabStops(modal ?? anchor.ownerDocument, surface);
+    const index = ordered.indexOf(anchor);
+    if (index < 0)
+        return undefined;
+    const next = index + (backwards ? -1 : 1);
+    return ordered[modal ? (next + ordered.length) % ordered.length : next];
+}
+/** The shared trigger button and floating panel behind Menu and Popover. */
+export const FloatingSurface = forwardRef(function FloatingSurface({ label, role = 'dialog', placement = 'bottom', disabled, children, onPanelKeyDown, focusLast = false, triggerIcon, trigger: triggerElement, open: controlledOpen, onOpenChange, ...rest }, ref) {
+    const providerPortal = useDiyaPortal();
+    const id = useId();
+    const trigger = useRef(null);
+    const setTrigger = useMemo(() => composeRefs(trigger, ref), [ref]);
+    const panel = useRef(null);
+    const [localOpen, setLocalOpen] = useState(false);
+    const open = controlledOpen ?? localOpen;
+    // Document listeners outlive a render, so they read the latest state and callback from here.
+    const current = useRef(open);
+    current.current = open;
+    const latest = useRef({ controlled: controlledOpen !== undefined, onOpenChange });
+    latest.current = { controlled: controlledOpen !== undefined, onOpenChange };
+    const openedAt = useRef(0);
+    const last = useRef(focusLast);
+    const modal = open ? trigger.current?.closest('dialog[open]') : null;
+    const portal = modal && !modal.contains(providerPortal) ? modal : providerPortal;
+    function setOpen(next) {
+        if (next === current.current)
+            return;
+        current.current = next;
+        if (!latest.current.controlled)
+            setLocalOpen(next);
+        latest.current.onOpenChange?.(next);
+    }
+    function close(restore = true) {
+        setOpen(false);
+        if (restore)
+            trigger.current?.focus({ preventScroll: true });
+    }
+    // Anchors the panel to the trigger, flipping above it or clamping so it stays on screen.
+    // Written straight to the panel's style, so following a scroll doesn't re-render the content.
+    function place() {
+        const node = panel.current;
+        const anchor = trigger.current?.getBoundingClientRect();
+        if (!node || !anchor)
+            return;
+        const box = node.getBoundingClientRect();
+        let top = placement === 'top' ? anchor.top - box.height - 10 : anchor.bottom + 10;
+        if (top + box.height > window.innerHeight - 12)
+            top = anchor.top - box.height - 10;
+        if (top < 12)
+            top = 12;
+        const left = Math.max(12, Math.min(anchor.left + (anchor.width - box.width) / 2, window.innerWidth - box.width - 12));
+        node.style.left = `${left}px`;
+        node.style.top = `${top}px`;
+    }
+    function handleKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'Tab') {
+            onPanelKeyDown?.(event);
+            return;
+        }
+        const anchor = trigger.current;
+        if (role === 'dialog' && panel.current) {
+            const controls = tabStops(panel.current);
+            const current = controls.indexOf(panel.current.ownerDocument.activeElement);
+            if (current >= 0 && (event.shiftKey ? current > 0 : current < controls.length - 1))
+                return;
+            if (event.shiftKey) {
+                event.preventDefault();
+                close();
+                return;
+            }
+        }
+        const destination = anchor && adjacentTabStop(anchor, panel.current, event.shiftKey);
+        close(false);
+        if (destination) {
+            destination.focus();
+            if (destination.ownerDocument.activeElement === destination)
+                event.preventDefault();
+        }
+    }
+    useClientLayoutEffect(() => {
+        if (!open || !trigger.current || !panel.current)
+            return;
+        openedAt.current = performance.now();
+        place();
+        const targets = role === 'dialog' && panel.current ? tabStops(panel.current)
+            : panel.current?.querySelectorAll('[role^="menuitem"]:not(:disabled), input:not(:disabled), [tabindex="0"]');
+        const target = last.current ? targets?.[targets.length - 1] : targets?.[0];
+        (target ?? panel.current)?.focus({ preventScroll: true });
+    }, [open, placement]);
+    useEffect(() => {
+        if (!open)
+            return;
+        function outside(event) {
+            if (!panel.current?.contains(event.target) &&
+                !trigger.current?.contains(event.target))
+                setOpen(false);
+        }
+        function escape(event) {
+            if (event.key === 'Escape' && !event.isComposing && !event.defaultPrevented) {
+                event.preventDefault();
+                setOpen(false);
+                trigger.current?.focus();
+            }
+        }
+        // A scroll or resize outside the panel moves it with its trigger, once per frame. It closes only
+        // when the trigger has left the viewport, and never in the first moments after opening.
+        let frame = 0;
+        const follow = () => {
+            frame = 0;
+            const anchor = trigger.current?.getBoundingClientRect();
+            if (anchor && !inViewport(anchor, window) && performance.now() - openedAt.current > OPEN_SETTLE_MS) {
+                close(!!panel.current?.contains(document.activeElement));
+                return;
+            }
+            place();
+        };
+        const schedule = (event) => {
+            if (event.type === 'scroll' && panel.current?.contains(event.target))
+                return;
+            if (!frame)
+                frame = requestAnimationFrame(follow);
+        };
+        // The panel's own size changes too, such as switching Tabs inside it.
+        const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(() => schedule(new Event('resize'))) : null;
+        if (panel.current)
+            observer?.observe(panel.current);
+        if (trigger.current)
+            observer?.observe(trigger.current);
+        document.addEventListener('pointerdown', outside);
+        document.addEventListener('keydown', escape);
+        window.addEventListener('resize', schedule);
+        window.addEventListener('scroll', schedule, true);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+            document.removeEventListener('pointerdown', outside);
+            document.removeEventListener('keydown', escape);
+            window.removeEventListener('resize', schedule);
+            window.removeEventListener('scroll', schedule, true);
+        };
+    }, [open, placement]);
+    useEffect(() => {
+        if (disabled && open)
+            close(false);
+    }, [disabled, open]);
+    const triggerProps = {
+        ...(triggerElement ? rest : {}),
+        disabled: disabled || undefined,
+        'aria-haspopup': role,
+        'aria-expanded': open,
+        'aria-controls': open ? id : undefined,
+        onClick: () => {
+            last.current = false;
+            setOpen(!current.current);
+        },
+        onKeyDown: (event) => {
+            if (role === 'menu' && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+                event.preventDefault();
+                last.current = event.key === 'ArrowUp';
+                setOpen(true);
+            }
+        },
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("span", { children: triggerElement
+                    ? renderSlot(triggerElement, triggerProps, setTrigger)
+                    : _jsx(Button, { ref: setTrigger, variant: triggerIcon ? 'quiet' : 'outline', iconOnly: !!triggerIcon, "aria-label": triggerIcon ? label : undefined, disabled: disabled, ...mergeSlotProps(triggerProps, rest), children: triggerIcon ?? label }) }), open &&
+                portal &&
+                createPortal(_jsx("div", { ref: panel, id: id, role: role, "aria-label": label, tabIndex: -1, className: `diya-floating-surface diya-floating-${role}`, onKeyDown: handleKeyDown, onBlur: (event) => {
+                        if (!event.currentTarget.contains(event.relatedTarget) &&
+                            event.relatedTarget !== trigger.current)
+                            close(false);
+                    }, children: typeof children === 'function' ? children(() => close()) : children }), portal)] }));
+});

package/dist/page-header/PageHeader.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type PageHeaderProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
+    /** The page heading; it also names the section for assistive technology. */
+    title: ReactNode;
+    /** Heading element level, h1 to h6; defaults to 2. Use 1 for the page's only top heading. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Slot above the heading, usually a Breadcrumbs element. */
+    breadcrumbs?: ReactNode;
+    /** Supporting text under the heading. */
+    description?: ReactNode;
+    /** Slot under the description for Tag or Badge elements. */
+    tags?: ReactNode;
+    /** Slot beside the heading for page-level buttons. */
+    actions?: ReactNode;
+    /** Slot along the bottom edge, usually Tabs for sub-pages. */
+    navigation?: ReactNode;
+    /** Draws the header on its own panel; defaults to true. Pass false to set it straight on the page, as an app screen's title. */
+    surface?: boolean;
+};
+/** A page's heading block with optional breadcrumbs, description, tags, actions and tabs. Data and actions belong to the host app. Optional slots reserve no empty space. */
+export declare const PageHeader: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
+    /** The page heading; it also names the section for assistive technology. */
+    title: ReactNode;
+    /** Heading element level, h1 to h6; defaults to 2. Use 1 for the page's only top heading. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Slot above the heading, usually a Breadcrumbs element. */
+    breadcrumbs?: ReactNode;
+    /** Supporting text under the heading. */
+    description?: ReactNode;
+    /** Slot under the description for Tag or Badge elements. */
+    tags?: ReactNode;
+    /** Slot beside the heading for page-level buttons. */
+    actions?: ReactNode;
+    /** Slot along the bottom edge, usually Tabs for sub-pages. */
+    navigation?: ReactNode;
+    /** Draws the header on its own panel; defaults to true. Pass false to set it straight on the page, as an app screen's title. */
+    surface?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;