@delmaredigital/payload-experiments 0.2.0-rc.7 → 0.3.0-rc.4

package/dist/ui/Breadcrumb.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ui.css';
+export function Breadcrumb({ items }) {
+    return /*#__PURE__*/ _jsx("nav", {
+        className: "xp-ui-breadcrumb",
+        "aria-label": "Breadcrumb",
+        children: /*#__PURE__*/ _jsx("ol", {
+            children: items.map((item, index)=>/*#__PURE__*/ _jsxs("li", {
+                    children: [
+                        index ? /*#__PURE__*/ _jsx("span", {
+                            "aria-hidden": "true",
+                            children: "›"
+                        }) : null,
+                        index === items.length - 1 ? /*#__PURE__*/ _jsx("span", {
+                            "aria-current": "page",
+                            children: item.label
+                        }) : /*#__PURE__*/ _jsx("a", {
+                            href: item.href,
+                            children: item.label
+                        })
+                    ]
+                }, index))
+        })
+    });
+}

package/dist/ui/Button.d.ts

@@ -0,0 +1,15 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import './ui.css';
+type Shared = {
+    variant?: 'primary' | 'secondary' | 'quiet' | 'link' | 'danger';
+    size?: 'md' | 'sm';
+    disabled?: boolean;
+    busy?: boolean;
+};
+export type ButtonProps = Shared & (ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+} | AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+});
+export declare function Button({ variant, size, disabled, busy, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+export {};

package/dist/ui/Button.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import './ui.css';
+export function Button({ variant = 'secondary', size = 'md', disabled, busy, className = '', children, ...props }) {
+    const classes = `xp-ui-button xp-ui-button--${variant} xp-ui-button--${size} ${className}`;
+    const blocked = disabled || busy;
+    if (props.href !== undefined) {
+        const { href, onClick, ...rest } = props;
+        return /*#__PURE__*/ _jsx("a", {
+            ...rest,
+            className: classes,
+            href: blocked ? undefined : href,
+            role: blocked ? 'link' : undefined,
+            "aria-disabled": blocked || undefined,
+            "aria-busy": busy || undefined,
+            tabIndex: blocked ? -1 : rest.tabIndex,
+            onClick: (event)=>{
+                if (blocked) event.preventDefault();
+                else onClick?.(event);
+            },
+            children: children
+        });
+    }
+    return /*#__PURE__*/ _jsx("button", {
+        ...props,
+        type: props.type ?? 'button',
+        className: classes,
+        disabled: blocked,
+        "aria-busy": busy || undefined,
+        children: children
+    });
+}

package/dist/ui/Card.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './ui.css';
+export declare function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function SectionCard({ number, title, complete, children, id, headingId, className }: {
+    number: number;
+    title: string;
+    complete?: boolean;
+    children: ReactNode;
+    id?: string;
+    headingId?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/ui/Card.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './ui.css';
+export function Card({ className = '', ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        ...props,
+        className: `xp-ui-card ${className}`
+    });
+}
+export function SectionCard({ number, title, complete = false, children, id, headingId, className = '' }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        id: id,
+        "aria-labelledby": headingId,
+        className: `xp-ui-card xp-ui-section ${className}`,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: "xp-ui-section-head",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "xp-ui-section-number",
+                        children: number
+                    }),
+                    /*#__PURE__*/ _jsx("h2", {
+                        id: headingId,
+                        tabIndex: -1,
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "xp-ui-section-complete",
+                        "aria-label": complete ? 'Complete' : 'Incomplete',
+                        children: complete ? '✓' : '○'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "xp-ui-section-body",
+                children: children
+            })
+        ]
+    });
+}

package/dist/ui/Checkbox.d.ts

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

package/dist/ui/Checkbox.js

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

package/dist/{admin/components → ui}/ChipsInput.d.ts

@@ -1,12 +1,13 @@
-import '../theme.css';
-import './chipsInput.css';
+import './ui.css';
 export interface ChipsInputProps {
     value: string[];
     onChange: (value: string[]) => void;
     label: string;
     description?: string;
+    help?: string;
+    error?: string;
     placeholder?: string;
     disabled?: boolean;
     id: string;
 }
-export declare function ChipsInput({ value, onChange, label, description, placeholder, disabled, id }: ChipsInputProps): import("react").JSX.Element;
+export declare function ChipsInput({ value, onChange, label, description, help, error, placeholder, disabled, id }: ChipsInputProps): import("react").JSX.Element;

package/dist/{admin/components → ui}/ChipsInput.js

@@ -1,10 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
-import { AUDIENCE_COPY } from '../copy/audience.js';
-import '../theme.css';
-import './chipsInput.css';
-export function ChipsInput({ value, onChange, label, description, placeholder, disabled = false, id }) {
+import './ui.css';
+export function ChipsInput({ value, onChange, label, description, help = description, error, placeholder, disabled = false, id }) {
     const [draft, setDraft] = useState('');
     const input = useRef(null);
     const commit = (text)=>{
@@ -24,7 +22,7 @@ export function ChipsInput({ value, onChange, label, description, placeholder, d
         input.current?.focus();
     };
     return /*#__PURE__*/ _jsxs("div", {
-        className: "xp-chips",
+        className: "xp-ui-chips",
         role: "group",
         "aria-labelledby": `${id}-label`,
         "aria-disabled": disabled,
@@ -35,10 +33,10 @@ export function ChipsInput({ value, onChange, label, description, placeholder, d
                 children: label
             }),
             /*#__PURE__*/ _jsxs("div", {
-                className: "xp-chips-control",
+                className: `xp-ui-chips-control${error ? ' xp-ui-chips-control--invalid' : ''}`,
                 children: [
                     value.map((item, index)=>/*#__PURE__*/ _jsxs("span", {
-                            className: "xp-chips-item",
+                            className: "xp-ui-chips-item",
                             children: [
                                 /*#__PURE__*/ _jsx("span", {
                                     children: item
@@ -46,9 +44,9 @@ export function ChipsInput({ value, onChange, label, description, placeholder, d
                                 /*#__PURE__*/ _jsx("button", {
                                     type: "button",
                                     disabled: disabled,
-                                    "aria-label": AUDIENCE_COPY.removeValue(item),
+                                    "aria-label": `Remove ${item}`,
                                     onClick: ()=>remove(index),
-                                    children: AUDIENCE_COPY.removeSymbol
+                                    children: '×'
                                 })
                             ]
                         }, item)),
@@ -59,7 +57,11 @@ export function ChipsInput({ value, onChange, label, description, placeholder, d
                         value: draft,
                         disabled: disabled,
                         placeholder: placeholder,
-                        "aria-describedby": description ? `${id}-description` : undefined,
+                        "aria-invalid": Boolean(error) || undefined,
+                        "aria-describedby": [
+                            help ? `${id}-description` : '',
+                            error ? `${id}-error` : ''
+                        ].filter(Boolean).join(' ') || undefined,
                         onChange: (event)=>setDraft(event.target.value),
                         onBlur: ()=>{
                             if (draft.trim()) commit(draft);
@@ -87,9 +89,15 @@ export function ChipsInput({ value, onChange, label, description, placeholder, d
                     })
                 ]
             }),
-            description ? /*#__PURE__*/ _jsx("p", {
+            help ? /*#__PURE__*/ _jsx("p", {
                 id: `${id}-description`,
-                children: description
+                children: help
+            }) : null,
+            error ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-error",
+                id: `${id}-error`,
+                role: "alert",
+                children: error
             }) : null
         ]
     });

package/dist/ui/Dialog.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import './ui.css';
+/** Native modal stays in its rendering document, including a Puck canvas iframe.
+ * `initialFocus="cancel"` targets the focusable control marked `data-dialog-cancel`.
+ */
+export declare function Dialog({ open, title, onClose, children, dismissible, initialFocus }: {
+    open: boolean;
+    dismissible?: boolean;
+    initialFocus?: 'cancel';
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;

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';