@delmaredigital/payload-experiments 0.2.0-rc.6 → 0.3.0-rc.1

package/dist/ui/Dialog.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import './ui.css';
+function focusable(node) {
+    return [
+        ...node.querySelectorAll('button, a[href], input, select, textarea, [tabindex]')
+    ].filter((el)=>{
+        if (el.tabIndex < 0 || el.matches(':disabled, input[type="hidden"]') || el.closest('[hidden], [inert]') || el.getAttribute('aria-disabled') === 'true') return false;
+        for(let parent = el; parent && parent !== node; parent = parent.parentElement){
+            const style = node.ownerDocument.defaultView?.getComputedStyle(parent);
+            if (style?.display === 'none' || style?.visibility === 'hidden' || style?.visibility === 'collapse') return false;
+        }
+        return true;
+    });
+}
+/** Native modal stays in its rendering document, including a Puck canvas iframe.
+ * `initialFocus="cancel"` targets the focusable control marked `data-dialog-cancel`.
+ */ export function Dialog({ open, title, onClose, children, dismissible = true, initialFocus }) {
+    const ref = useRef(null);
+    const heading = useId();
+    const closeRequested = useRef(false);
+    const requestClose = ()=>{
+        if (!open || !dismissible || closeRequested.current) return;
+        closeRequested.current = true;
+        onClose();
+    };
+    useEffect(()=>{
+        const node = ref.current;
+        if (!node || !open) return;
+        const doc = node.ownerDocument;
+        const previous = doc.activeElement;
+        closeRequested.current = false;
+        node.showModal();
+        const elements = focusable(node);
+        const preferred = initialFocus === 'cancel' ? elements.find((element)=>element.hasAttribute('data-dialog-cancel')) : undefined;
+        (preferred ?? elements[0] ?? node).focus();
+        return ()=>{
+            node.close();
+            if (previous?.isConnected) previous.focus();
+        };
+    }, [
+        open,
+        initialFocus
+    ]);
+    return /*#__PURE__*/ _jsxs("dialog", {
+        ref: ref,
+        "aria-labelledby": heading,
+        className: "xp-ui-dialog",
+        tabIndex: -1,
+        onCancel: (event)=>{
+            event.preventDefault();
+            requestClose();
+        },
+        onKeyDown: (event)=>{
+            if (event.defaultPrevented) return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                requestClose();
+                return;
+            }
+            if (event.key !== 'Tab') return;
+            const node = event.currentTarget;
+            const elements = focusable(node);
+            const first = elements[0], last = elements.at(-1), active = node.ownerDocument.activeElement;
+            if (!first) {
+                event.preventDefault();
+                node.focus();
+            } else if (event.shiftKey && (active === first || active === node)) {
+                event.preventDefault();
+                last?.focus();
+            } else if (!event.shiftKey && (active === last || active === node)) {
+                event.preventDefault();
+                first.focus();
+            }
+        },
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                id: heading,
+                children: title
+            }),
+            children
+        ]
+    });
+}

package/dist/ui/EmptyState.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { EmptyState } from './Feedback.js';

package/dist/ui/EmptyState.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { EmptyState } from './Feedback.js';

package/dist/ui/Feedback.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import './ui.css';
+export declare const statusLabels: {
+    readonly draft: "Draft";
+    readonly ready: "Ready";
+    readonly running: "Running";
+    readonly 'needs-attention': "Needs attention";
+    readonly decided: "Decided";
+    readonly archived: "Archived";
+    readonly stopped: "Stopped";
+};
+export type UIStatus = keyof typeof statusLabels;
+export declare function StatusChip({ status }: {
+    status: UIStatus;
+}): import("react").JSX.Element;
+export declare function Banner({ tone, children, action }: {
+    tone?: 'info' | 'warning' | 'error';
+    children: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+export declare function EmptyState({ children, action }: {
+    children: ReactNode;
+    action: ReactNode;
+}): import("react").JSX.Element;

package/dist/ui/Feedback.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ui.css';
+export const statusLabels = {
+    draft: 'Draft',
+    ready: 'Ready',
+    running: 'Running',
+    'needs-attention': 'Needs attention',
+    decided: 'Decided',
+    archived: 'Archived',
+    stopped: 'Stopped'
+};
+export function StatusChip({ status }) {
+    return /*#__PURE__*/ _jsx("span", {
+        className: `xp-ui-status xp-ui-status--${status}`,
+        children: statusLabels[status]
+    });
+}
+export function Banner({ tone = 'info', children, action }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: `xp-ui-banner xp-ui-banner--${tone}`,
+        role: tone === 'error' ? 'alert' : 'status',
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: children
+            }),
+            action
+        ]
+    });
+}
+export function EmptyState({ children, action }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-empty",
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                children: children
+            }),
+            action
+        ]
+    });
+}

package/dist/ui/Inputs.d.ts

@@ -0,0 +1,34 @@
+import type { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
+import './ui.css';
+export interface FieldProps {
+    id: string;
+    label: string;
+    help?: string;
+    error?: string;
+}
+export type TextInputProps = FieldProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'id'>;
+export declare function TextInput({ label, help, error, className, ...props }: TextInputProps): import("react").JSX.Element;
+export declare function NumberInput(props: TextInputProps): import("react").JSX.Element;
+export declare function SearchInput(props: TextInputProps): import("react").JSX.Element;
+export type SelectProps = FieldProps & {
+    labelAction?: ReactNode;
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'id'>;
+export declare function Select({ label, labelAction, help, error, className, ...props }: SelectProps): import("react").JSX.Element;
+export declare function Toggle({ label, help, error, className, ...props }: Omit<TextInputProps, 'type'>): import("react").JSX.Element;
+export type TextareaProps = FieldProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id'>;
+export declare function Textarea({ label, help, error, className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Checkbox({ label, help, error, className, ...props }: Omit<TextInputProps, 'type'>): import("react").JSX.Element;
+export interface CheckboxListProps extends FieldProps {
+    children?: ReactNode;
+    value: readonly string[];
+    options: readonly {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    onChange: (value: string[]) => void;
+    disabled?: boolean;
+    'aria-describedby'?: string;
+}
+export declare function CheckboxList({ value, options, onChange, disabled, children, ...field }: CheckboxListProps): import("react").JSX.Element;
+export declare function Range({ label, help, error, className, ...props }: Omit<TextInputProps, 'type'>): import("react").JSX.Element;

package/dist/ui/Inputs.js

@@ -0,0 +1,225 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ui.css';
+function described(props, extra) {
+    return [
+        extra,
+        props.help ? `${props.id}-help` : '',
+        props.error ? `${props.id}-error` : ''
+    ].filter(Boolean).join(' ') || undefined;
+}
+function Field({ id, label, labelAction, help, error, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-field",
+        children: [
+            labelAction ? /*#__PURE__*/ _jsxs("div", {
+                className: "xp-ui-field-label",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: id,
+                        children: label
+                    }),
+                    labelAction
+                ]
+            }) : /*#__PURE__*/ _jsx("label", {
+                htmlFor: id,
+                children: label
+            }),
+            children,
+            help ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                id: `${id}-help`,
+                children: help
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-error",
+                id: `${id}-error`,
+                role: "alert",
+                children: error
+            }) : null
+        ]
+    });
+}
+export function TextInput({ label, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsx(Field, {
+        ...field,
+        children: /*#__PURE__*/ _jsx("input", {
+            ...props,
+            className: `xp-ui-input ${className}`,
+            "aria-invalid": Boolean(error) || undefined,
+            "aria-describedby": described(field, props['aria-describedby'])
+        })
+    });
+}
+export function NumberInput(props) {
+    return /*#__PURE__*/ _jsx(TextInput, {
+        ...props,
+        type: "number",
+        className: `xp-ui-input--number ${props.className ?? ''}`
+    });
+}
+export function SearchInput(props) {
+    return /*#__PURE__*/ _jsx(TextInput, {
+        ...props,
+        type: "search"
+    });
+}
+export function Select({ label, labelAction, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsx(Field, {
+        ...field,
+        labelAction: labelAction,
+        children: /*#__PURE__*/ _jsx("select", {
+            ...props,
+            className: `xp-ui-input xp-ui-select ${className}`,
+            "aria-invalid": Boolean(error) || undefined,
+            "aria-describedby": described(field, props['aria-describedby'])
+        })
+    });
+}
+export function Toggle({ label, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsx(Field, {
+        ...field,
+        children: /*#__PURE__*/ _jsx("input", {
+            ...props,
+            type: "checkbox",
+            role: "switch",
+            className: `xp-ui-toggle ${className}`,
+            "aria-invalid": Boolean(error) || undefined,
+            "aria-describedby": described(field, props['aria-describedby']),
+            onKeyDown: (event)=>{
+                props.onKeyDown?.(event);
+                if (event.key === ' ' && !event.defaultPrevented && !props.disabled) {
+                    event.preventDefault();
+                    event.currentTarget.click();
+                }
+            }
+        })
+    });
+}
+export function Textarea({ label, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsx(Field, {
+        ...field,
+        children: /*#__PURE__*/ _jsx("textarea", {
+            ...props,
+            className: `xp-ui-input xp-ui-textarea ${className}`,
+            "aria-invalid": Boolean(error) || undefined,
+            "aria-describedby": described(field, props['aria-describedby'])
+        })
+    });
+}
+export function Checkbox({ label, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-field",
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                className: "xp-ui-checkbox-label",
+                htmlFor: props.id,
+                children: [
+                    /*#__PURE__*/ _jsx("input", {
+                        ...props,
+                        type: "checkbox",
+                        className: `xp-ui-checkbox ${className}`,
+                        "aria-invalid": Boolean(error) || props['aria-invalid'] || undefined,
+                        "aria-describedby": described(field, props['aria-describedby'])
+                    }),
+                    label
+                ]
+            }),
+            help ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                id: `${props.id}-help`,
+                children: help
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-error",
+                id: `${props.id}-error`,
+                role: "alert",
+                children: error
+            }) : null
+        ]
+    });
+}
+export function CheckboxList({ value, options, onChange, disabled, children, ...field }) {
+    return /*#__PURE__*/ _jsxs("fieldset", {
+        id: field.id,
+        className: "xp-ui-field xp-ui-checkbox-list",
+        disabled: disabled,
+        "aria-invalid": Boolean(field.error) || undefined,
+        "aria-describedby": described(field, field['aria-describedby']),
+        children: [
+            /*#__PURE__*/ _jsx("legend", {
+                children: field.label
+            }),
+            children,
+            options.map((option, index)=>/*#__PURE__*/ _jsx(Checkbox, {
+                    id: `${field.id}-${index}`,
+                    label: option.label,
+                    checked: value.includes(option.value),
+                    disabled: disabled || option.disabled,
+                    onChange: (event)=>onChange(event.target.checked ? [
+                            ...value,
+                            option.value
+                        ] : value.filter((item)=>item !== option.value))
+                }, option.value)),
+            field.help ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                id: `${field.id}-help`,
+                children: field.help
+            }) : null,
+            field.error ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-error",
+                id: `${field.id}-error`,
+                role: "alert",
+                children: field.error
+            }) : null
+        ]
+    });
+}
+export function Range({ label, help, error, className = '', ...props }) {
+    const field = {
+        id: props.id,
+        label,
+        help,
+        error
+    };
+    return /*#__PURE__*/ _jsx(Field, {
+        ...field,
+        children: /*#__PURE__*/ _jsx("input", {
+            ...props,
+            type: "range",
+            className: `xp-ui-range ${className}`,
+            "aria-invalid": Boolean(error) || undefined,
+            "aria-describedby": described(field, props['aria-describedby'])
+        })
+    });
+}

package/dist/ui/NumberInput.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { NumberInput } from './Inputs.js';

package/dist/ui/NumberInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { NumberInput } from './Inputs.js';

package/dist/ui/Range.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Range } from './Inputs.js';

package/dist/ui/Range.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Range } from './Inputs.js';

package/dist/ui/SearchInput.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SearchInput } from './Inputs.js';

package/dist/ui/SearchInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SearchInput } from './Inputs.js';

package/dist/ui/SectionCard.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SectionCard } from './Card.js';

package/dist/ui/SectionCard.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { SectionCard } from './Card.js';

package/dist/ui/Select.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Select } from './Inputs.js';

package/dist/ui/Select.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Select } from './Inputs.js';

package/dist/ui/StatusChip.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { StatusChip } from './Feedback.js';

package/dist/ui/StatusChip.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { StatusChip } from './Feedback.js';

package/dist/ui/Tabs.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import './ui.css';
+export interface Tab {
+    id: string;
+    label: string;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export declare function Tabs({ items, label, value, onChange }: {
+    items: Tab[];
+    label: string;
+    value?: string;
+    onChange?: (id: string) => void;
+}): import("react").JSX.Element;

package/dist/ui/Tabs.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import './ui.css';
+export function Tabs({ items, label, value, onChange }) {
+    const prefix = useId();
+    const [local, setLocal] = useState(()=>items.find((item)=>!item.disabled)?.id);
+    const requested = value ?? local;
+    const selected = items.find((item)=>item.id === requested && !item.disabled)?.id ?? items.find((item)=>!item.disabled)?.id;
+    function select(id) {
+        setLocal(id);
+        onChange?.(id);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-ui-tabs",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                role: "tablist",
+                "aria-label": label,
+                className: "xp-ui-tablist",
+                children: items.map((item)=>/*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        role: "tab",
+                        id: `${prefix}-tab-${item.id}`,
+                        "aria-controls": `${prefix}-panel-${item.id}`,
+                        "aria-selected": selected === item.id,
+                        tabIndex: selected === item.id ? 0 : -1,
+                        disabled: item.disabled,
+                        className: "xp-ui-tab",
+                        onClick: ()=>select(item.id),
+                        onKeyDown: (event)=>{
+                            const enabled = items.filter((tab)=>!tab.disabled);
+                            const index = enabled.findIndex((tab)=>tab.id === item.id);
+                            const next = event.key === 'ArrowRight' ? enabled[(index + 1) % enabled.length] : event.key === 'ArrowLeft' ? enabled[(index - 1 + enabled.length) % enabled.length] : event.key === 'Home' ? enabled[0] : event.key === 'End' ? enabled.at(-1) : undefined;
+                            if (!next) return;
+                            event.preventDefault();
+                            select(next.id);
+                            event.currentTarget.ownerDocument.getElementById(`${prefix}-tab-${next.id}`)?.focus();
+                        },
+                        children: item.label
+                    }, item.id))
+            }),
+            items.map((item)=>/*#__PURE__*/ _jsx("div", {
+                    role: "tabpanel",
+                    id: `${prefix}-panel-${item.id}`,
+                    "aria-labelledby": `${prefix}-tab-${item.id}`,
+                    hidden: selected !== item.id,
+                    tabIndex: 0,
+                    className: "xp-ui-tabpanel",
+                    children: item.content
+                }, item.id))
+        ]
+    });
+}

package/dist/ui/TextInput.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { TextInput } from './Inputs.js';

package/dist/ui/TextInput.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { TextInput } from './Inputs.js';

package/dist/ui/Textarea.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Textarea } from './Inputs.js';

package/dist/ui/Textarea.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Textarea } from './Inputs.js';

package/dist/ui/Toggle.d.ts

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Toggle } from './Inputs.js';

package/dist/ui/Toggle.js

@@ -0,0 +1,2 @@
+import './ui.css';
+export { Toggle } from './Inputs.js';

package/dist/ui/accent.d.ts

@@ -0,0 +1,21 @@
+export interface AccentSet {
+    accent: string;
+    hover: string;
+    active: string;
+    subtle: string;
+    fg: string;
+    focus: string;
+    accentText: string;
+    accentTextDecoration: 'none' | 'underline';
+}
+/** WCAG 2.x relative luminance contrast. */
+export declare function contrast(a: string, b: string): number;
+/** Pure shared host-accent derivation. Reference surfaces match theme.css's Payload
+ * 3.90.2 white / elevation-50 dark. Dark adjustment increases HSL lightness until
+ * the quantised hex reaches 3:1. Hover/active move up to 12/24% in the interaction direction, clamped to preserve text contrast; subtle is 8% tint. */
+export declare function deriveAccent(input: string): {
+    light: AccentSet;
+    dark: AccentSet;
+};
+/** Validated hex values only; specificity exceeds theme.css regardless of load order. */
+export declare function accentStyles(input?: string): string | undefined;