@idyeah/diya 0.0.0 → 1.0.1

package/dist/text-input/TextInput.d.ts

@@ -0,0 +1,53 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { textInputMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        textInput: typeof textInputMessages;
+    }
+}
+/** Native input attributes, including `name`, `onChange`, `onBlur` and the ref, go on the input; `className` and `style` go on the outer field wrapper. */
+export type TextInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue'> & {
+    /** Visible label above the input; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the input's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the input, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the input; marks the field invalid while set. */
+    error?: string;
+    /** Control height and type size; defaults to 'medium'. */
+    size?: 'small' | 'medium' | 'large';
+    /** Decorative icon inside the input's start edge; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** Shows a clear button while there is text; it empties the value and refocuses the input. */
+    clearable?: boolean;
+    /** The current text when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The starting text when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the new text on every edit and when cleared. */
+    onValueChange?: (value: string) => void;
+};
+/** A single-line labeled text field with optional helper text, error, icon and clear button. */
+export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "size" | "defaultValue"> & {
+    /** Visible label above the input; also its accessible name. Hide it with hideLabel. */
+    label: string;
+    /** Hides the label visually but keeps it as the input's accessible name. */
+    hideLabel?: boolean;
+    /** Visible hint below the input, announced with it; `error` replaces it while set. */
+    helperText?: string;
+    /** Visible error message below the input; marks the field invalid while set. */
+    error?: string;
+    /** Control height and type size; defaults to 'medium'. */
+    size?: "small" | "medium" | "large";
+    /** Decorative icon inside the input's start edge; hidden from assistive tech. */
+    leadingIcon?: ReactNode;
+    /** Shows a clear button while there is text; it empties the value and refocuses the input. */
+    clearable?: boolean;
+    /** The current text when controlled; pair it with `onValueChange`. */
+    value?: string;
+    /** The starting text when uncontrolled; a form reset returns to it. */
+    defaultValue?: string;
+    /** Called with the new text on every edit and when cleared. */
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/text-input/TextInput.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useRef } from 'react';
+import { Icon } from '../Icon.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { textInputMessages } from './messages.js';
+import { setNativeValue, useFormReset, useMergedRef, useNativeMirror } from './native-field.js';
+/** A single-line labeled text field with optional helper text, error, icon and clear button. */
+export const TextInput = forwardRef(function TextInput({ label, hideLabel = false, helperText, error, size = 'medium', leadingIcon, clearable = false, value, defaultValue, onValueChange, onChange, id, disabled, readOnly, className, style, 'aria-invalid': ariaInvalid, 'aria-describedby': describedBy, ...props }, ref) {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const description = error || helperText;
+    const descriptionId = `${inputId}-description`;
+    const input = useRef(null);
+    const inputRef = useMergedRef(ref, input);
+    const controlled = value !== undefined;
+    const [current, sync] = useNativeMirror(() => input.current?.value, value ?? defaultValue ?? '');
+    useFormReset(input, sync);
+    const text = controlled ? value : current;
+    const t = useDiyaMessages('textInput', textInputMessages);
+    return (_jsxs("div", { className: cx('diya-text-field', className), style: style, "data-size": size, "data-disabled": disabled || undefined, "data-invalid": !!error || undefined, children: [_jsx("label", { htmlFor: inputId, className: hideLabel ? 'diya-sr-only' : undefined, children: label }), _jsxs("div", { className: "diya-text-field-control", children: [leadingIcon && (_jsx("span", { className: "diya-text-field-leading", "aria-hidden": "true", children: leadingIcon })), _jsx("input", { ...props, ref: inputRef, id: inputId, ...(controlled ? { value } : { defaultValue }), onChange: (event) => {
+                            onChange?.(event);
+                            if (!controlled)
+                                sync();
+                            onValueChange?.(event.target.value);
+                        }, disabled: disabled, readOnly: readOnly, "aria-invalid": error ? true : ariaInvalid, "aria-describedby": [describedBy, description ? descriptionId : undefined].filter(Boolean).join(' ') ||
+                            undefined }), clearable && text.length > 0 && (_jsx("button", { type: "button", className: "diya-text-field-clear", "aria-label": t.clear(label), disabled: disabled || readOnly || !text, onClick: () => {
+                            if (!input.current)
+                                return;
+                            // Clearing goes through the input itself, so onChange and form libraries see it.
+                            setNativeValue(input.current, '');
+                            input.current.focus();
+                        }, children: _jsx(Icon, { name: "close", size: 14 }) }))] }), description && (_jsxs("p", { id: descriptionId, className: "diya-text-field-description", children: [error && _jsx("span", { "aria-hidden": "true", children: "!" }), description] }))] }));
+});

package/dist/text-input/messages.d.ts

@@ -0,0 +1,4 @@
+/** textInput: English defaults, overridable through DiyaProvider `messages`. */
+export declare const textInputMessages: {
+    clear: (label: string) => string;
+};

package/dist/text-input/messages.js

@@ -0,0 +1,3 @@
+/** textInput: English defaults, overridable through DiyaProvider `messages`. */
+// The label keeps its case: "Clear Search Fieldbook", never "Clear search fieldbook".
+export const textInputMessages = { clear: (label) => `Clear ${label}` };

package/dist/text-input/native-field.d.ts

@@ -0,0 +1,15 @@
+import { type ForwardedRef, type RefObject } from 'react';
+/** Points a forwarded ref and DIYA's own ref at the same node. */
+export declare function useMergedRef<T>(forwarded: ForwardedRef<T>, own: {
+    current: T | null;
+}): (node: T | null) => void;
+/**
+ * DIYA's own picture of an uncontrolled control's value, for the parts it draws itself
+ * (clear button, count, fill). It rereads the DOM after every render and after a form
+ * reset, so values written straight to the element, by react-hook-form for example, show up.
+ */
+export declare function useNativeMirror<T>(read: () => T | undefined, initial: T, same?: (a: T, b: T) => boolean): readonly [T, () => void];
+/** Calls `onReset` after the owning form has been reset, once the browser has restored default values. */
+export declare function useFormReset(element: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null>, onReset: () => void): void;
+/** Sets a native control's value the way typing does, so React's onChange (and any form library) sees it. */
+export declare function setNativeValue(element: HTMLInputElement | HTMLTextAreaElement, value: string): void;

package/dist/text-input/native-field.js

@@ -0,0 +1,56 @@
+'use client';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+const useClientLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+/** Points a forwarded ref and DIYA's own ref at the same node. */
+export function useMergedRef(forwarded, own) {
+    return useCallback((node) => {
+        own.current = node;
+        if (typeof forwarded === 'function')
+            forwarded(node);
+        else if (forwarded)
+            forwarded.current = node;
+    }, [forwarded, own]);
+}
+/**
+ * DIYA's own picture of an uncontrolled control's value, for the parts it draws itself
+ * (clear button, count, fill). It rereads the DOM after every render and after a form
+ * reset, so values written straight to the element, by react-hook-form for example, show up.
+ */
+export function useNativeMirror(read, initial, same = Object.is) {
+    const [value, setValue] = useState(initial);
+    const reader = useRef(read);
+    reader.current = read;
+    const sameRef = useRef(same);
+    sameRef.current = same;
+    const sync = useCallback(() => {
+        const next = reader.current();
+        if (next !== undefined)
+            setValue((previous) => sameRef.current(previous, next) ? previous : next);
+    }, []);
+    useClientLayoutEffect(sync);
+    return [value, sync];
+}
+/** Calls `onReset` after the owning form has been reset, once the browser has restored default values. */
+export function useFormReset(element, onReset) {
+    const callback = useRef(onReset);
+    callback.current = onReset;
+    useEffect(() => {
+        const form = element.current?.form;
+        if (!form)
+            return;
+        // The reset event fires before the browser restores defaults; read them afterwards.
+        const reset = () => queueMicrotask(() => callback.current());
+        form.addEventListener('reset', reset);
+        return () => form.removeEventListener('reset', reset);
+    });
+}
+/** Sets a native control's value the way typing does, so React's onChange (and any form library) sees it. */
+export function setNativeValue(element, value) {
+    const prototype = Object.getPrototypeOf(element);
+    const setter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set;
+    if (setter)
+        setter.call(element, value);
+    else
+        element.value = value;
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+}

package/dist/toast/Toast.d.ts

@@ -0,0 +1,24 @@
+import { type AlertProps } from '../alert/Alert.js';
+import { toastMessages } from './messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        toast: typeof toastMessages;
+    }
+}
+export type ToastProps = Omit<AlertProps, 'onDismiss'> & {
+    /** Called once when the toast goes, by timer, close button or Escape; unmount the toast here. */
+    onDismiss: () => void;
+    /** Milliseconds before it dismisses itself, paused while hovered, focused or the tab is hidden; 0 or less keeps it until dismissed. Toasts with an `action` never time out. Defaults to 8000. */
+    duration?: number;
+    /** Shows a close button; a toast with an `action` always has one. Defaults to true. */
+    showClose?: boolean;
+};
+/** A temporary Alert floated above the page that dismisses itself after a while. `className`, `style` and the ref reach the Alert. */
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<AlertProps, "onDismiss"> & {
+    /** Called once when the toast goes, by timer, close button or Escape; unmount the toast here. */
+    onDismiss: () => void;
+    /** Milliseconds before it dismisses itself, paused while hovered, focused or the tab is hidden; 0 or less keeps it until dismissed. Toasts with an `action` never time out. Defaults to 8000. */
+    duration?: number;
+    /** Shows a close button; a toast with an `action` always has one. Defaults to true. */
+    showClose?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/toast/Toast.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Alert } from '../alert/Alert.js';
+import { useDiyaMessages, useDiyaPortal } from '../DiyaProvider.js';
+import { toastMessages } from './messages.js';
+/** A temporary Alert floated above the page that dismisses itself after a while. `className`, `style` and the ref reach the Alert. */
+export const Toast = forwardRef(function Toast({ onDismiss, duration = 8000, ...props }, ref) {
+    const portal = useDiyaPortal();
+    const t = useDiyaMessages('toast', toastMessages);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    const region = useRef(null);
+    const returnFocus = useRef(null);
+    const remaining = useRef(duration);
+    const callback = useRef(onDismiss);
+    callback.current = onDismiss;
+    // A toast is dismissed once, whether by the timer, the button or Escape,
+    // even if the host keeps it mounted afterwards.
+    const dismissed = useRef(false);
+    const settle = () => {
+        if (dismissed.current)
+            return;
+        dismissed.current = true;
+        callback.current();
+    };
+    useEffect(() => {
+        remaining.current = duration;
+    }, [duration]);
+    useEffect(() => {
+        setMounted(true);
+        returnFocus.current = document.activeElement;
+        const visibility = () => setHidden(document.hidden);
+        visibility();
+        document.addEventListener('visibilitychange', visibility);
+        return () => document.removeEventListener('visibilitychange', visibility);
+    }, []);
+    useEffect(() => {
+        // Actionable messages remain until dismissed so actions are not time-limited.
+        if (!mounted || hovered || focused || hidden || props.action || duration <= 0 || dismissed.current)
+            return;
+        const started = Date.now();
+        const timer = setTimeout(settle, remaining.current);
+        return () => {
+            clearTimeout(timer);
+            remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+        };
+    }, [mounted, hovered, focused, hidden, props.action, duration]);
+    function dismiss() {
+        if (region.current?.contains(document.activeElement))
+            returnFocus.current?.focus();
+        settle();
+    }
+    if (!mounted || !portal)
+        return null;
+    const { showClose = true, ...alertProps } = props;
+    const modal = returnFocus.current?.closest('dialog[open]');
+    const target = modal && !modal.contains(portal) ? modal : portal;
+    return createPortal(_jsx("div", { ref: region, className: "diya-toast-region", "aria-label": t.label, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setFocused(false);
+        }, onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                dismiss();
+            }
+        }, children: _jsx(Alert, { ...alertProps, ref: ref, action: alertProps.action
+                ? {
+                    ...alertProps.action,
+                    onClick: () => {
+                        returnFocus.current?.focus();
+                        alertProps.action?.onClick();
+                    },
+                }
+                : undefined, onDismiss: showClose || props.action ? dismiss : undefined }) }), target);
+});

package/dist/toast/messages.d.ts

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

package/dist/toast/messages.js

@@ -0,0 +1,2 @@
+/** toast: English defaults, overridable through DiyaProvider `messages`. */
+export const toastMessages = { label: 'Notification' };

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'children'> & {
+    /** Visible text in the bubble, shown on hover, focus or tap; also read as the trigger's description. */
+    content: string;
+    /** Accessible name for the tooltip's own trigger button, not shown, such as 'Billing help'. Leave it out when the child is your own trigger. */
+    label?: string;
+    /** With `label`, noninteractive content for the tooltip's own button, such as an icon. Without it, your single trigger element, such as `<Button iconOnly aria-label="Delete">`, which gets the hover, focus and description wiring. */
+    children: ReactNode;
+    /** Preferred side for the bubble; it moves to stay on screen. Defaults to 'top'. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+};
+/** A short hint in a bubble beside its trigger: your own child element, or the tooltip's button when `label` is set. The ref reaches the trigger. */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "children" | "content"> & {
+    /** Visible text in the bubble, shown on hover, focus or tap; also read as the trigger's description. */
+    content: string;
+    /** Accessible name for the tooltip's own trigger button, not shown, such as 'Billing help'. Leave it out when the child is your own trigger. */
+    label?: string;
+    /** With `label`, noninteractive content for the tooltip's own button, such as an icon. Without it, your single trigger element, such as `<Button iconOnly aria-label="Delete">`, which gets the hover, focus and description wiring. */
+    children: ReactNode;
+    /** Preferred side for the bubble; it moves to stay on screen. Defaults to 'top'. */
+    placement?: "top" | "bottom" | "left" | "right";
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,92 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDiyaPortal } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { composeRefs, onlyChild, renderSlot } from '../internal/slot.js';
+/** A short hint in a bubble beside its trigger: your own child element, or the tooltip's button when `label` is set. The ref reaches the trigger. */
+export const Tooltip = forwardRef(function Tooltip({ content, label, children, placement = 'top', className, ...props }, ref) {
+    const providerPortal = useDiyaPortal();
+    const id = useId();
+    const leaveTimer = useRef(undefined);
+    const trigger = useRef(null);
+    const setTrigger = useMemo(() => composeRefs(trigger, ref), [ref]);
+    const tip = useRef(null);
+    const [open, setOpen] = useState(false);
+    const modal = open ? trigger.current?.closest('dialog[open]') : null;
+    const portal = modal && !modal.contains(providerPortal) ? modal : providerPortal;
+    const [position, setPosition] = useState({ left: 0, top: 0, ready: false });
+    useEffect(() => {
+        if (!open)
+            return;
+        const anchor = trigger.current?.getBoundingClientRect();
+        const box = tip.current?.getBoundingClientRect();
+        if (anchor && box) {
+            let left = anchor.left + (anchor.width - box.width) / 2;
+            let top = placement === 'bottom' ? anchor.bottom + 10 : anchor.top - box.height - 10;
+            if (placement === 'left' || placement === 'right') {
+                left = placement === 'left' ? anchor.left - box.width - 10 : anchor.right + 10;
+                top = anchor.top + (anchor.height - box.height) / 2;
+            }
+            if (top < 8)
+                top = anchor.bottom + 10;
+            if (top + box.height > window.innerHeight - 8)
+                top = anchor.top - box.height - 10;
+            setPosition({
+                left: Math.max(8, Math.min(left, window.innerWidth - box.width - 8)),
+                top: Math.max(8, top),
+                ready: true,
+            });
+        }
+        const close = () => setOpen(false);
+        const escape = (event) => {
+            if (event.key === 'Escape')
+                close();
+        };
+        window.addEventListener('keydown', escape);
+        window.addEventListener('scroll', close, true);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('keydown', escape);
+            window.removeEventListener('scroll', close, true);
+            window.removeEventListener('resize', close);
+        };
+    }, [open, placement, content, portal]);
+    useEffect(() => () => clearTimeout(leaveTimer.current), []);
+    function hideSoon() {
+        leaveTimer.current = setTimeout(() => setOpen(false), 120);
+    }
+    function show() {
+        clearTimeout(leaveTimer.current);
+        if (!open)
+            setPosition((old) => ({ ...old, ready: false }));
+        setOpen(true);
+    }
+    const bubble = open &&
+        portal &&
+        createPortal(_jsx("span", { ref: tip, id: id, role: "tooltip", className: "diya-tooltip-bubble", style: {
+                left: position.left,
+                top: position.top,
+                visibility: position.ready ? 'visible' : 'hidden',
+            }, onMouseEnter: () => {
+                clearTimeout(leaveTimer.current);
+                setOpen(true);
+            }, onMouseLeave: hideSoon, children: content }), portal);
+    if (label === undefined) {
+        const child = onlyChild(children);
+        if (!isValidElement(child))
+            return null;
+        const own = child;
+        const described = cx(own.props['aria-describedby'], open ? id : undefined) || undefined;
+        return (_jsxs(_Fragment, { children: [renderSlot(cloneElement(own, { 'aria-describedby': described }), {
+                    ...props,
+                    className,
+                    onMouseEnter: show,
+                    onMouseLeave: hideSoon,
+                    onFocus: show,
+                    onBlur: () => setOpen(false),
+                }, setTrigger), bubble] }));
+    }
+    return (_jsxs("span", { ...props, className: cx('diya-tooltip-anchor', className), onMouseEnter: show, onMouseLeave: hideSoon, children: [_jsx("button", { ref: setTrigger, className: "diya-tooltip-trigger", type: "button", "aria-label": label, "aria-describedby": open ? id : undefined, onFocus: show, onBlur: () => setOpen(false), onClick: show, children: children }), bubble] }));
+});

package/dist/workflow/ContentState.d.ts

@@ -0,0 +1,44 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ContentStateProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** Visible heading that says what happened, e.g. "No projects yet". */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text that says what to do next. */
+    description?: ReactNode;
+    /** Decorative icon above the title; hidden from assistive technology. */
+    icon?: ReactNode;
+    /** One pill button under the text. */
+    action?: {
+        /** Visible button text. */
+        label: string;
+        /** Called when the button is pressed. */
+        onClick: () => void;
+        /** Disables the button. */
+        disabled?: boolean;
+    };
+    /** Announce immediately (an error), rather than politely; defaults to false. */
+    urgent?: boolean;
+};
+/** An empty, error or finished state for a region, with an optional next-step button. */
+export declare const ContentState: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    /** Visible heading that says what happened, e.g. "No projects yet". */
+    title: string;
+    /** Heading level of the title, h1 to h6. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text that says what to do next. */
+    description?: ReactNode;
+    /** Decorative icon above the title; hidden from assistive technology. */
+    icon?: ReactNode;
+    /** One pill button under the text. */
+    action?: {
+        /** Visible button text. */
+        label: string;
+        /** Called when the button is pressed. */
+        onClick: () => void;
+        /** Disables the button. */
+        disabled?: boolean;
+    };
+    /** Announce immediately (an error), rather than politely; defaults to false. */
+    urgent?: boolean;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/workflow/ContentState.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Button } from '../button/Button.js';
+import { cx } from '../internal/cx.js';
+/** An empty, error or finished state for a region, with an optional next-step button. */
+export const ContentState = forwardRef(function ContentState({ title, headingLevel = 3, description, icon, action, urgent = false, className, ...props }, ref) {
+    const id = useId();
+    const Heading = `h${headingLevel}`;
+    return _jsxs("section", { "aria-labelledby": id, ...props, ref: ref, className: cx('diya-workflow-surface diya-content-state', className), children: [icon && _jsx("span", { className: "diya-workflow-symbol", "aria-hidden": "true", children: icon }), _jsxs("div", { role: urgent ? 'alert' : 'status', "aria-atomic": "true", children: [_jsx(Heading, { id: id, className: "diya-content-state-title", children: title }), description && _jsx("p", { children: description })] }), action && _jsx(Button, { disabled: action.disabled, onClick: action.onClick, children: action.label })] });
+});

package/dist/workflow/Drawer.d.ts

@@ -0,0 +1,48 @@
+import { type DialogHTMLAttributes, type ReactNode } from 'react';
+import { drawerMessages } from './drawer-messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        drawer: typeof drawerMessages;
+    }
+}
+export type DrawerProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'title' | 'children' | 'open'> & {
+    /** Whether the drawer is shown; the caller owns this state. */
+    open: boolean;
+    /** Called with false when the person closes it (close button, Escape or the browser); update `open` in response. */
+    onOpenChange: (open: boolean) => void;
+    /** Visible heading; it is also the drawer's accessible name. */
+    title: string;
+    /** The title's heading level, 1 to 6; it looks the same at every level. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text under the title, also read as the drawer's description. */
+    description?: ReactNode;
+    /** Scrollable drawer body. */
+    children: ReactNode;
+    /** Content pinned to the bottom, usually action buttons. */
+    footer?: ReactNode;
+    /** Which edge of the page the drawer sits on; defaults to 'right'. */
+    side?: 'left' | 'right';
+    /** Shows the close icon button in the header; defaults to true. */
+    showClose?: boolean;
+};
+/** A modal panel at the side of the page that traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
+export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DialogHTMLAttributes<HTMLDialogElement>, "children" | "open" | "title"> & {
+    /** Whether the drawer is shown; the caller owns this state. */
+    open: boolean;
+    /** Called with false when the person closes it (close button, Escape or the browser); update `open` in response. */
+    onOpenChange: (open: boolean) => void;
+    /** Visible heading; it is also the drawer's accessible name. */
+    title: string;
+    /** The title's heading level, 1 to 6; it looks the same at every level. Defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Supporting text under the title, also read as the drawer's description. */
+    description?: ReactNode;
+    /** Scrollable drawer body. */
+    children: ReactNode;
+    /** Content pinned to the bottom, usually action buttons. */
+    footer?: ReactNode;
+    /** Which edge of the page the drawer sits on; defaults to 'right'. */
+    side?: "left" | "right";
+    /** Shows the close icon button in the header; defaults to true. */
+    showClose?: boolean;
+} & import("react").RefAttributes<HTMLDialogElement>>;

package/dist/workflow/Drawer.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useMemo, useRef } from 'react';
+import { Button } from '../button/Button.js';
+import { Icon } from '../Icon.js';
+import { useDiyaMessages } from '../DiyaProvider.js';
+import { cx } from '../internal/cx.js';
+import { composeRefs } from '../internal/slot.js';
+import { drawerMessages } from './drawer-messages.js';
+/** A modal panel at the side of the page that traps focus and returns it on close. The ref, `className`, `style` and other attributes go to the native `dialog` element. */
+export const Drawer = forwardRef(function Drawer({ open, onOpenChange, title, headingLevel = 3, description, children, footer, side = 'right', showClose = true, className, onCancel, onClose, onClick, ...props }, ref) {
+    const t = useDiyaMessages('drawer', drawerMessages);
+    const dialog = useRef(null);
+    const setDialog = useMemo(() => composeRefs(dialog, ref), [ref]);
+    const Heading = `h${headingLevel}`;
+    const returnFocus = useRef(null);
+    const id = useId();
+    function restoreFocus() {
+        if (returnFocus.current?.isConnected)
+            returnFocus.current.focus();
+        returnFocus.current = null;
+    }
+    useEffect(() => {
+        const node = dialog.current;
+        if (!node)
+            return;
+        if (open && !node.open) {
+            returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            node.showModal();
+        }
+        else if (!open && node.open)
+            node.close();
+    }, [open]);
+    useEffect(() => {
+        const node = dialog.current;
+        return () => { if (node?.open)
+            node.close(); restoreFocus(); };
+    }, []);
+    return _jsxs("dialog", { ...props, ref: setDialog, className: cx('diya-workflow-surface diya-drawer-modal', className), "data-side": side, "aria-labelledby": `${id}-title`, "aria-describedby": description ? `${id}-description` : undefined, onCancel: event => { onCancel?.(event); if (event.defaultPrevented)
+            return; event.preventDefault(); onOpenChange(false); }, onClose: event => { onClose?.(event); if (event.currentTarget.open)
+            return; restoreFocus(); if (open)
+            onOpenChange(false); }, onClick: event => {
+            onClick?.(event);
+            // A click on the dimmed page (the dialog's backdrop) closes it, as it does a Dialog.
+            if (event.target !== event.currentTarget)
+                return;
+            const box = event.currentTarget.getBoundingClientRect();
+            if (event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom)
+                onOpenChange(false);
+        }, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsx(Heading, { id: `${id}-title`, className: "diya-drawer-title", children: title }), description && _jsx("p", { id: `${id}-description`, children: description })] }), showClose && _jsx(Button, { variant: "quiet", iconOnly: true, "aria-label": t.close, onClick: () => onOpenChange(false), children: _jsx(Icon, { name: "close" }) })] }), _jsx("div", { className: "diya-drawer-body", children: children }), footer && _jsx("footer", { children: footer })] });
+});

package/dist/workflow/FileUpload.d.ts

@@ -0,0 +1,67 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { fileUploadMessages } from './file-upload-messages.js';
+declare module '../messages.js' {
+    interface DiyaMessages {
+        fileUpload: typeof fileUploadMessages;
+    }
+}
+export type FileRejection = {
+    /** The file that was not added. */
+    file: File;
+    /** Why: 'type' fails `accept`, 'size' exceeds `maxBytes`. */
+    reason: 'type' | 'size';
+};
+/** Other attributes, `className`, `style` and the ref go on the outer section. */
+export type FileUploadProps = Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    /** The selected files; the caller owns this list. */
+    files: readonly File[];
+    /** Called with the full next list after files are added or removed. */
+    onFilesChange: (files: File[]) => void;
+    /** Accepted types, as in the native input: extensions and MIME types, e.g. ".pdf,image/*". Others are rejected. */
+    accept?: string;
+    /** Largest allowed file size in bytes; larger files are rejected. */
+    maxBytes?: number;
+    /** Keeps adding to the list instead of replacing the single file; defaults to false. */
+    multiple?: boolean;
+    /** Disables dropping, choosing and removing; defaults to false. */
+    disabled?: boolean;
+    /** Visible heading in the drop zone; it is also the region's accessible name. Defaults to "Add your files". */
+    title?: string;
+    /** Heading level of the title, 1–6; defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text under the heading; defaults to "Drop files here or choose from your device." Pass null to hide it. */
+    description?: ReactNode;
+    /** Small text under the button, e.g. accepted types and size limit. */
+    helperText?: ReactNode;
+    /** Choose button text; defaults to "Choose files". */
+    chooseLabel?: string;
+    /** Called with the files that were not added and why; a short error also shows. */
+    onReject?: (rejections: FileRejection[]) => void;
+};
+/** A drop zone and file picker with a removable file list. Selects local files; upload, persistence and server validation belong to the caller. */
+export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    /** The selected files; the caller owns this list. */
+    files: readonly File[];
+    /** Called with the full next list after files are added or removed. */
+    onFilesChange: (files: File[]) => void;
+    /** Accepted types, as in the native input: extensions and MIME types, e.g. ".pdf,image/*". Others are rejected. */
+    accept?: string;
+    /** Largest allowed file size in bytes; larger files are rejected. */
+    maxBytes?: number;
+    /** Keeps adding to the list instead of replacing the single file; defaults to false. */
+    multiple?: boolean;
+    /** Disables dropping, choosing and removing; defaults to false. */
+    disabled?: boolean;
+    /** Visible heading in the drop zone; it is also the region's accessible name. Defaults to "Add your files". */
+    title?: string;
+    /** Heading level of the title, 1–6; defaults to 3. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Text under the heading; defaults to "Drop files here or choose from your device." Pass null to hide it. */
+    description?: ReactNode;
+    /** Small text under the button, e.g. accepted types and size limit. */
+    helperText?: ReactNode;
+    /** Choose button text; defaults to "Choose files". */
+    chooseLabel?: string;
+    /** Called with the files that were not added and why; a short error also shows. */
+    onReject?: (rejections: FileRejection[]) => void;
+} & import("react").RefAttributes<HTMLElement>>;