@sanity/workflow-components 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sanity, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# @sanity/workflow-components
+
+Reusable React controls for Editorial Workflows member, assignee, and date
+fields. The package uses `@sanity/ui` but has no dependency on Sanity Studio or
+the App SDK, so the same components can be used in either integration.
+
+Render the components inside a Sanity UI `ThemeProvider`. Member controls take
+project-scoped user ids: the same id namespace returned by GROQ `identity()` and
+stored by `@sanity/workflow-engine` assignee values.
+
+## Member selection
+
+Supply the project directory explicitly. An App SDK integration can load this
+from its project-user data source; a Studio integration can adapt its existing
+project-member query to the same shape.
+
+```tsx
+import {MemberPicker, type ProjectMember} from '@sanity/workflow-components'
+
+const members: ProjectMember[] = [
+  {
+    id: 'project-user-id',
+    displayName: 'Ada Lovelace',
+    email: 'ada@example.com',
+    roles: ['editor'],
+  },
+]
+
+export function OwnerPicker() {
+  return (
+    <MemberPicker
+      error={undefined}
+      loading={false}
+      members={members}
+      onSelect={(member) => console.log(member?.id)}
+      selectedIds={new Set()}
+      unassignRow
+    />
+  )
+}
+```
+
+`MemberPicker` reports a `ProjectMember` or `null` for the optional unassigned
+row. `AssigneePicker` reports the engine's user-or-role `Assignee` values and
+leaves single- versus multi-value behavior to the caller. `AssigneeBadge`,
+`AssigneeBadges`, `MemberAvatar`, and `MemberAvatarGroup` provide matching
+read-only presentation.
+
+## Dates
+
+`DatePicker` emits local JavaScript `Date` values after complete calendar or
+time gestures. Storage remains the caller's responsibility, so the control
+works with an engine field edit, an action parameter, or local application
+state.
+
+```tsx
+import {ClearableDatePicker} from '@sanity/workflow-components'
+;<ClearableDatePicker
+  clearLabel="Clear due date"
+  onClear={() => setDueDate(undefined)}
+  onPick={setDueDate}
+  value={dueDate}
+/>
+```
+
+Set `selectTime` when time-of-day is part of the workflow field.

package/dist/index.cjs

@@ -0,0 +1,603 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+});
+
+var jsxRuntime = require("react/jsx-runtime"), ui = require("@sanity/ui"), Close = require("@sanity/icons/Close"), ChevronLeft = require("@sanity/icons/ChevronLeft"), ChevronRight = require("@sanity/icons/ChevronRight"), addDays = require("date-fns/addDays"), addMonths = require("date-fns/addMonths"), setDate = require("date-fns/setDate"), setHours = require("date-fns/setHours"), setMinutes = require("date-fns/setMinutes"), setMonth = require("date-fns/setMonth"), setYear = require("date-fns/setYear"), react = require("react"), eachWeekOfInterval = require("date-fns/eachWeekOfInterval"), isSameDay = require("date-fns/isSameDay"), isSameMonth = require("date-fns/isSameMonth"), lastDayOfMonth = require("date-fns/lastDayOfMonth"), startOfMonth = require("date-fns/startOfMonth"), Checkmark = require("@sanity/icons/Checkmark"), Empty = require("@sanity/icons/Empty"), Users = require("@sanity/icons/Users");
+
+function roleListLabel(roles) {
+    return `${roles.length === 1 ? "Role" : "Roles"}: ${roles.join(", ")}`;
+}
+
+function AssigneeBadge({assignee: assignee, members: members}) {
+    if (assignee.type === "role") /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Badge, {
+        mode: "outline",
+        children: [ "Role: ", assignee.role ]
+    });
+    const member = members.find(candidate => candidate.id === assignee.id);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Badge, {
+        mode: "outline",
+        children: member?.displayName ?? assignee.id
+    });
+}
+
+function AssigneeBadges({assignees: assignees, members: members}) {
+    const roles = assignees.flatMap(assignee => assignee.type === "role" ? [ assignee.role ] : []), users = assignees.filter(assignee => assignee.type === "user");
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 1,
+        wrap: "wrap",
+        children: [ users.map(assignee => /* @__PURE__ */ jsxRuntime.jsx(AssigneeBadge, {
+            assignee: assignee,
+            members: members
+        }, `user:${assignee.id}`)), roles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
+            mode: "outline",
+            children: roleListLabel(roles)
+        }) : null ]
+    });
+}
+
+const WEEK_DAY_NAMES = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];
+
+function weeksOfMonth(date) {
+    const first = startOfMonth.startOfMonth(date);
+    return eachWeekOfInterval.eachWeekOfInterval({
+        start: first,
+        end: lastDayOfMonth.lastDayOfMonth(first)
+    }).map(weekStart => [ weekStart, ...WEEK_DAY_NAMES.slice(1).map((_, i) => addDays.addDays(weekStart, i + 1)) ]);
+}
+
+function CalendarMonth({focused: focused, onSelect: onSelect, selected: selected}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Grid, {
+        gap: 1,
+        style: {
+            gridTemplateColumns: "repeat(7, minmax(44px, 46px))"
+        },
+        children: [ WEEK_DAY_NAMES.map(weekday => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            paddingY: 2,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                size: 1,
+                style: {
+                    textAlign: "center"
+                },
+                weight: "medium",
+                children: weekday
+            })
+        }, weekday)), weeksOfMonth(focused).map(week => week.map(day => /* @__PURE__ */ jsxRuntime.jsx(CalendarDay, {
+            date: day,
+            focused: isSameDay.isSameDay(day, focused),
+            isCurrentMonth: isSameMonth.isSameMonth(day, focused),
+            isToday: isSameDay.isSameDay(day, /* @__PURE__ */ new Date),
+            onSelect: onSelect,
+            selected: selected !== void 0 && isSameDay.isSameDay(day, selected)
+        }, day.toISOString()))) ]
+    });
+}
+
+function CalendarDay({date: date, focused: focused, isCurrentMonth: isCurrentMonth, isToday: isToday, onSelect: onSelect, selected: selected}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        __unstable_focusRing: !0,
+        "aria-label": date.toDateString(),
+        "aria-pressed": selected,
+        as: "button",
+        "data-focused": focused ? "true" : "",
+        "data-testid": `calendar-day-${date.toDateString().replaceAll(" ", "-")}`,
+        onClick: () => onSelect(date),
+        padding: 2,
+        radius: 2,
+        selected: selected,
+        tabIndex: -1,
+        tone: isToday || selected ? "primary" : "default",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !selected && !isCurrentMonth,
+            size: 1,
+            style: {
+                textAlign: "center"
+            },
+            weight: isCurrentMonth ? "medium" : "regular",
+            children: date.getDate()
+        })
+    });
+}
+
+function pad2(value) {
+    return String(value).padStart(2, "0");
+}
+
+const LazyTextInput = react.forwardRef(function({onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown, value: value, ...rest}, forwardedRef) {
+    const [inputValue, setInputValue] = react.useState(), handleChange = react.useCallback(event => {
+        setInputValue(event.currentTarget.value);
+    }, []), emitIfChanged = react.useCallback(event => {
+        event.currentTarget.value !== `${value}` && onChange && onChange(event), setInputValue(void 0);
+    }, [ onChange, value ]), handleBlur = react.useCallback(event => {
+        emitIfChanged(event), onBlur?.(event);
+    }, [ emitIfChanged, onBlur ]), handleKeyDown = react.useCallback(event => {
+        event.key === "Enter" && emitIfChanged(event), onKeyDown?.(event);
+    }, [ emitIfChanged, onKeyDown ]);
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.TextInput, {
+        ...rest,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value: inputValue === void 0 ? value : inputValue
+    });
+}), MONTH_NAMES = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], ARROW_KEYS = [ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight" ], PRESERVE_FOCUS_ELEMENT = /* @__PURE__ */ jsxRuntime.jsx("span", {
+    "data-preserve-focus": !0,
+    style: {
+        outline: "none",
+        overflow: "hidden",
+        position: "absolute"
+    },
+    tabIndex: -1
+});
+
+function DatePicker({onSelect: onSelect, selectTime: selectTime = !1, value: value}) {
+    const base = react.useMemo(() => {
+        if (value) return value;
+        const now = /* @__PURE__ */ new Date;
+        return now.setSeconds(0, 0), now;
+    }, [ value ]), [focusedDate, setFocusedDate] = react.useState(base), ref = react.useRef(null), handleDaySelect = react.useCallback(date => onSelect(setMinutes.setMinutes(setHours.setHours(date, base.getHours()), base.getMinutes())), [ base, onSelect ]), handleTimeCommit = react.useCallback((hours, minutes) => onSelect(setHours.setHours(setMinutes.setMinutes(base, minutes), hours)), [ base, onSelect ]), handleNowClick = react.useCallback(() => {
+        const now = /* @__PURE__ */ new Date;
+        setFocusedDate(now), onSelect(now);
+    }, [ onSelect ]), handleMonthChange = react.useCallback(event => {
+        const month = Number(event.currentTarget.value);
+        setFocusedDate(current => setDate.setDate(setMonth.setMonth(current, month), 1));
+    }, []), moveFocusedDate = react.useCallback(byMonths => setFocusedDate(current => addMonths.addMonths(current, byMonths)), []), setFocusedYear = react.useCallback(year => setFocusedDate(current => setYear.setYear(current, year)), []), focusCurrentWeekDay = react.useCallback(() => {
+        ref.current?.querySelector('[data-focused="true"]')?.focus();
+    }, []), handleKeyDown = react.useCallback(event => {
+        if (!ARROW_KEYS.includes(event.key)) return;
+        if (event.preventDefault(), event.target instanceof HTMLElement && event.target.hasAttribute("data-calendar-grid")) {
+            focusCurrentWeekDay();
+            return;
+        }
+        const byDays = {
+            ArrowUp: -7,
+            ArrowDown: 7,
+            ArrowLeft: -1,
+            ArrowRight: 1
+        }[event.key] ?? 0;
+        setFocusedDate(current => addDays.addDays(current, byDays)), ref.current?.querySelector("[data-preserve-focus]")?.focus();
+    }, [ focusCurrentWeekDay ]);
+    return react.useEffect(() => {
+        document.activeElement?.matches("[data-calendar-grid], [data-calendar-grid] [data-preserve-focus]") && focusCurrentWeekDay();
+    }, [ focusCurrentWeekDay, focusedDate ]), /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+        "data-testid": "date-picker",
+        ref: ref,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+            padding: 2,
+            children: [ 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                    flex: 1,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select, {
+                        "aria-label": "Month",
+                        fontSize: 1,
+                        onChange: handleMonthChange,
+                        padding: 2,
+                        radius: 2,
+                        value: focusedDate.getMonth(),
+                        children: MONTH_NAMES.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx("option", {
+                            value: i,
+                            children: name
+                        }, name))
+                    })
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                    align: "center",
+                    gap: 1,
+                    marginLeft: 2,
+                    children: [ 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                        "aria-label": "Previous year",
+                        icon: ChevronLeft.ChevronLeftIcon,
+                        mode: "bleed",
+                        onClick: () => moveFocusedDate(-12),
+                        padding: 2
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(YearInput, {
+                        onChange: setFocusedYear,
+                        value: focusedDate.getFullYear()
+                    }), 
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                        "aria-label": "Next year",
+                        icon: ChevronRight.ChevronRightIcon,
+                        mode: "bleed",
+                        onClick: () => moveFocusedDate(12),
+                        padding: 2
+                    }) ]
+                }) ]
+            }), 
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, {
+                "data-calendar-grid": !0,
+                marginTop: 2,
+                onKeyDown: handleKeyDown,
+                overflow: "hidden",
+                tabIndex: 0,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth, {
+                    focused: focusedDate,
+                    onSelect: handleDaySelect,
+                    selected: value
+                }), PRESERVE_FOCUS_ELEMENT ]
+            }) ]
+        }), selectTime ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+            borderTop: !0,
+            padding: 2,
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsxRuntime.jsx(TimeField, {
+                    onCommit: handleTimeCommit,
+                    value: `${pad2(base.getHours())}:${pad2(base.getMinutes())}`
+                }), 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: handleNowClick,
+                    padding: 2,
+                    text: "Set to current time"
+                }) ]
+            })
+        }) : null ]
+    });
+}
+
+function TimeField({onCommit: onCommit, value: value}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(LazyTextInput, {
+        "aria-label": "Select time",
+        fontSize: 1,
+        onChange: event => {
+            const [hours, minutes] = event.currentTarget.value.split(":").map(Number);
+            hours !== void 0 && minutes !== void 0 && !Number.isNaN(hours + minutes) && onCommit(hours, minutes);
+        },
+        padding: 2,
+        type: "time",
+        value: value
+    });
+}
+
+function YearInput({onChange: onChange, value: value}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(LazyTextInput, {
+        "aria-label": "Year",
+        fontSize: 1,
+        inputMode: "numeric",
+        onChange: event => {
+            const year = Number.parseInt(event.currentTarget.value, 10);
+            Number.isNaN(year) || onChange(year);
+        },
+        padding: 2,
+        radius: 2,
+        style: {
+            textAlign: "center",
+            width: 48
+        },
+        value: value
+    });
+}
+
+function ClearableDatePicker({value: value, selectTime: selectTime = !1, clearLabel: clearLabel, onPick: onPick, onClear: onClear}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(ui.Box, {
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(DatePicker, {
+            onSelect: onPick,
+            selectTime: selectTime,
+            value: value
+        }), value ? /* @__PURE__ */ jsxRuntime.jsx(ui.Card, {
+            borderTop: !0,
+            padding: 1,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+                fontSize: 1,
+                icon: Close.CloseIcon,
+                mode: "bleed",
+                onClick: onClear,
+                padding: 2,
+                text: clearLabel
+            })
+        }) : null ]
+    });
+}
+
+function matchesMemberSearch(member, query) {
+    const normalized = query.trim().toLowerCase();
+    return normalized ? member.displayName.toLowerCase().includes(normalized) || (member.email?.toLowerCase().includes(normalized) ?? !1) : !0;
+}
+
+function memberInitials(name) {
+    return name.split(/\s+/).filter(Boolean).map(word => word[0]).slice(0, 2).join("").toUpperCase() || "?";
+}
+
+function MemberAvatar({name: name, imageUrl: imageUrl, size: size = 0}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Avatar, {
+        __unstable_hideInnerStroke: !0,
+        initials: memberInitials(name),
+        size: size,
+        ...imageUrl ? {
+            src: imageUrl
+        } : {}
+    });
+}
+
+function MemberAvatarGroup({members: members, maxLength: maxLength = 3}) {
+    return members.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarStack, {
+        maxLength: maxLength,
+        size: 0,
+        style: {
+            lineHeight: 0
+        },
+        children: members.map(member => /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
+            imageUrl: member.imageUrl,
+            name: member.displayName
+        }, member.id))
+    });
+}
+
+function PickerStatus({loading: loading, error: error}) {
+    return loading ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        align: "center",
+        gap: 2,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: "Loading members…"
+        }) ]
+    }) : error ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, {
+            muted: !0,
+            size: 1,
+            children: [ "Could not list members: ", error ]
+        })
+    }) : null;
+}
+
+const ActiveRowContext = react.createContext(void 0);
+
+function PickerShell({children: children, empty: empty, error: error, loading: loading, placeholder: placeholder, query: query, onQueryChange: onQueryChange}) {
+    const listRef = react.useRef(null), listId = react.useId(), [activeIndex, setActiveIndex] = react.useState(-1), [activeRowId, setActiveRowId] = react.useState(), handleKeyDown = react.useCallback(event => {
+        const rows = listRef.current?.querySelectorAll("[data-picker-row]") ?? [];
+        if (rows.length === 0) return;
+        if (event.key === "Enter" && activeIndex >= 0) {
+            event.preventDefault(), rows[activeIndex]?.click();
+            return;
+        }
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActiveIndex(current => {
+            let startingIndex = current;
+            current < 0 && (startingIndex = direction > 0 ? -1 : 0);
+            const nextIndex = (startingIndex + direction + rows.length) % rows.length, nextRow = rows[nextIndex];
+            return setActiveRowId(nextRow?.id), nextRow?.scrollIntoView?.({
+                block: "nearest"
+            }), nextIndex;
+        });
+    }, [ activeIndex ]);
+    return loading || error ? /* @__PURE__ */ jsxRuntime.jsx(PickerStatus, {
+        error: error,
+        loading: loading
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+        direction: "column",
+        style: {
+            width: 300
+        },
+        children: [ 
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 1,
+            paddingBottom: 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.TextInput, {
+                "aria-activedescendant": activeRowId,
+                "aria-controls": listId,
+                "aria-expanded": !0,
+                "aria-label": placeholder,
+                fontSize: 1,
+                onChange: event => {
+                    setActiveIndex(-1), setActiveRowId(void 0), onQueryChange(event.currentTarget.value);
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: placeholder,
+                radius: 2,
+                role: "combobox",
+                value: query
+            })
+        }), empty ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                muted: !0,
+                size: 1,
+                children: "Nothing matches"
+            })
+        }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, {
+            as: "ul",
+            id: listId,
+            ref: listRef,
+            role: "listbox",
+            padding: 1,
+            space: 1,
+            style: {
+                listStyle: "none",
+                maxHeight: 360,
+                overflowY: "auto"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ActiveRowContext, {
+                value: activeRowId,
+                children: children
+            })
+        }) ]
+    });
+}
+
+function PickerRow({icon: icon, label: label, onSelect: onSelect, rowId: rowId, selected: selected}) {
+    const active = react.useContext(ActiveRowContext) === rowId;
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Box, {
+        as: "li",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
+            "aria-pressed": selected,
+            "aria-selected": active,
+            "data-picker-row": !0,
+            id: rowId,
+            justify: "flex-start",
+            mode: active ? "ghost" : "bleed",
+            onClick: onSelect,
+            padding: 2,
+            style: {
+                width: "100%"
+            },
+            role: "option",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
+                align: "center",
+                gap: 2,
+                style: {
+                    width: "100%"
+                },
+                children: [ icon, 
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
+                    flex: 1,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+                        align: "left",
+                        size: 1,
+                        textOverflow: "ellipsis",
+                        children: label
+                    })
+                }), selected ? /* @__PURE__ */ jsxRuntime.jsx(Checkmark.CheckmarkIcon, {}) : null ]
+            })
+        })
+    });
+}
+
+function Glyph({children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Text, {
+        muted: !0,
+        size: 2,
+        children: children
+    });
+}
+
+function MemberPicker({error: error, loading: loading, members: members, onSelect: onSelect, selectedIds: selectedIds, unassignRow: unassignRow = !1}) {
+    const [query, setQuery] = react.useState(""), matchingMembers = react.useMemo(() => members.filter(member => matchesMemberSearch(member, query)), [ members, query ]), showUnassigned = unassignRow && query.trim() === "";
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(PickerShell, {
+        empty: !showUnassigned && matchingMembers.length === 0,
+        error: error,
+        loading: loading,
+        members: members,
+        onQueryChange: setQuery,
+        placeholder: "Search members…",
+        query: query,
+        children: [ showUnassigned ? /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Glyph, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(Empty.EmptyIcon, {})
+            }),
+            label: "No assignee",
+            onSelect: () => onSelect(null),
+            rowId: "workflow-member-unassigned",
+            selected: selectedIds.size === 0
+        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
+                imageUrl: member.imageUrl,
+                name: member.displayName
+            }),
+            label: member.displayName,
+            onSelect: () => onSelect(member),
+            rowId: `workflow-member-${encodeURIComponent(member.id)}`,
+            selected: selectedIds.has(member.id)
+        }, member.id)) ]
+    });
+}
+
+function GroupHeading({children: children}) {
+    /* @__PURE__ */
+    return jsxRuntime.jsx(ui.Card, {
+        as: "li",
+        borderTop: !0,
+        padding: 2,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
+            muted: !0,
+            size: 0,
+            weight: "medium",
+            children: children
+        })
+    });
+}
+
+function AssigneePicker({error: error, loading: loading, members: members, onToggle: onToggle, value: value}) {
+    const [query, setQuery] = react.useState(""), normalized = query.trim().toLowerCase(), matchingRoles = react.useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]).filter(role => role.toLowerCase().includes(normalized)), matchingMembers = members.filter(member => matchesMemberSearch(member, query)), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : []));
+    /* @__PURE__ */
+    return jsxRuntime.jsxs(PickerShell, {
+        empty: matchingRoles.length === 0 && matchingMembers.length === 0,
+        error: error,
+        loading: loading,
+        members: members,
+        onQueryChange: setQuery,
+        placeholder: "Search roles and members…",
+        query: query,
+        children: [ matchingRoles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, {
+            children: "Roles"
+        }) : null, matchingRoles.map(role => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(Glyph, {
+                children: /* @__PURE__ */ jsxRuntime.jsx(Users.UsersIcon, {})
+            }),
+            label: role,
+            onSelect: () => onToggle({
+                type: "role",
+                role: role
+            }),
+            rowId: `workflow-role-${encodeURIComponent(role)}`,
+            selected: selectedRoles.has(role)
+        }, `role:${role}`)), matchingMembers.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(GroupHeading, {
+            children: "Members"
+        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsxRuntime.jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsxRuntime.jsx(MemberAvatar, {
+                imageUrl: member.imageUrl,
+                name: member.displayName
+            }),
+            label: member.displayName,
+            onSelect: () => onToggle({
+                type: "user",
+                id: member.id
+            }),
+            rowId: `workflow-assignee-${encodeURIComponent(member.id)}`,
+            selected: selectedUsers.has(member.id)
+        }, `user:${member.id}`)) ]
+    });
+}
+
+exports.AssigneeBadge = AssigneeBadge;
+
+exports.AssigneeBadges = AssigneeBadges;
+
+exports.AssigneePicker = AssigneePicker;
+
+exports.ClearableDatePicker = ClearableDatePicker;
+
+exports.DatePicker = DatePicker;
+
+exports.MemberAvatar = MemberAvatar;
+
+exports.MemberAvatarGroup = MemberAvatarGroup;
+
+exports.MemberPicker = MemberPicker;
+
+exports.roleListLabel = roleListLabel;

package/dist/index.js

@@ -0,0 +1,621 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+
+import { Badge, Flex, Grid, Box, Text, Card, TextInput, Select, Button, Avatar, AvatarStack, Stack, Spinner } from "@sanity/ui";
+
+import { CloseIcon } from "@sanity/icons/Close";
+
+import { ChevronLeftIcon } from "@sanity/icons/ChevronLeft";
+
+import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+
+import { addDays } from "date-fns/addDays";
+
+import { addMonths } from "date-fns/addMonths";
+
+import { setDate } from "date-fns/setDate";
+
+import { setHours } from "date-fns/setHours";
+
+import { setMinutes } from "date-fns/setMinutes";
+
+import { setMonth } from "date-fns/setMonth";
+
+import { setYear } from "date-fns/setYear";
+
+import { forwardRef, useState, useCallback, useMemo, useRef, useEffect, createContext, useId, useContext } from "react";
+
+import { eachWeekOfInterval } from "date-fns/eachWeekOfInterval";
+
+import { isSameDay } from "date-fns/isSameDay";
+
+import { isSameMonth } from "date-fns/isSameMonth";
+
+import { lastDayOfMonth } from "date-fns/lastDayOfMonth";
+
+import { startOfMonth } from "date-fns/startOfMonth";
+
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
+
+import { EmptyIcon } from "@sanity/icons/Empty";
+
+import { UsersIcon } from "@sanity/icons/Users";
+
+function roleListLabel(roles) {
+    return `${roles.length === 1 ? "Role" : "Roles"}: ${roles.join(", ")}`;
+}
+
+function AssigneeBadge({assignee: assignee, members: members}) {
+    if (assignee.type === "role") /* @__PURE__ */
+    return jsxs(Badge, {
+        mode: "outline",
+        children: [ "Role: ", assignee.role ]
+    });
+    const member = members.find(candidate => candidate.id === assignee.id);
+    /* @__PURE__ */
+    return jsx(Badge, {
+        mode: "outline",
+        children: member?.displayName ?? assignee.id
+    });
+}
+
+function AssigneeBadges({assignees: assignees, members: members}) {
+    const roles = assignees.flatMap(assignee => assignee.type === "role" ? [ assignee.role ] : []), users = assignees.filter(assignee => assignee.type === "user");
+    /* @__PURE__ */
+    return jsxs(Flex, {
+        align: "center",
+        gap: 1,
+        wrap: "wrap",
+        children: [ users.map(assignee => /* @__PURE__ */ jsx(AssigneeBadge, {
+            assignee: assignee,
+            members: members
+        }, `user:${assignee.id}`)), roles.length > 0 ? /* @__PURE__ */ jsx(Badge, {
+            mode: "outline",
+            children: roleListLabel(roles)
+        }) : null ]
+    });
+}
+
+const WEEK_DAY_NAMES = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ];
+
+function weeksOfMonth(date) {
+    const first = startOfMonth(date);
+    return eachWeekOfInterval({
+        start: first,
+        end: lastDayOfMonth(first)
+    }).map(weekStart => [ weekStart, ...WEEK_DAY_NAMES.slice(1).map((_, i) => addDays(weekStart, i + 1)) ]);
+}
+
+function CalendarMonth({focused: focused, onSelect: onSelect, selected: selected}) {
+    /* @__PURE__ */
+    return jsxs(Grid, {
+        gap: 1,
+        style: {
+            gridTemplateColumns: "repeat(7, minmax(44px, 46px))"
+        },
+        children: [ WEEK_DAY_NAMES.map(weekday => /* @__PURE__ */ jsx(Box, {
+            paddingY: 2,
+            children: /* @__PURE__ */ jsx(Text, {
+                size: 1,
+                style: {
+                    textAlign: "center"
+                },
+                weight: "medium",
+                children: weekday
+            })
+        }, weekday)), weeksOfMonth(focused).map(week => week.map(day => /* @__PURE__ */ jsx(CalendarDay, {
+            date: day,
+            focused: isSameDay(day, focused),
+            isCurrentMonth: isSameMonth(day, focused),
+            isToday: isSameDay(day, /* @__PURE__ */ new Date),
+            onSelect: onSelect,
+            selected: selected !== void 0 && isSameDay(day, selected)
+        }, day.toISOString()))) ]
+    });
+}
+
+function CalendarDay({date: date, focused: focused, isCurrentMonth: isCurrentMonth, isToday: isToday, onSelect: onSelect, selected: selected}) {
+    /* @__PURE__ */
+    return jsx(Card, {
+        __unstable_focusRing: !0,
+        "aria-label": date.toDateString(),
+        "aria-pressed": selected,
+        as: "button",
+        "data-focused": focused ? "true" : "",
+        "data-testid": `calendar-day-${date.toDateString().replaceAll(" ", "-")}`,
+        onClick: () => onSelect(date),
+        padding: 2,
+        radius: 2,
+        selected: selected,
+        tabIndex: -1,
+        tone: isToday || selected ? "primary" : "default",
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !selected && !isCurrentMonth,
+            size: 1,
+            style: {
+                textAlign: "center"
+            },
+            weight: isCurrentMonth ? "medium" : "regular",
+            children: date.getDate()
+        })
+    });
+}
+
+function pad2(value) {
+    return String(value).padStart(2, "0");
+}
+
+const LazyTextInput = forwardRef(function({onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown, value: value, ...rest}, forwardedRef) {
+    const [inputValue, setInputValue] = useState(), handleChange = useCallback(event => {
+        setInputValue(event.currentTarget.value);
+    }, []), emitIfChanged = useCallback(event => {
+        event.currentTarget.value !== `${value}` && onChange && onChange(event), setInputValue(void 0);
+    }, [ onChange, value ]), handleBlur = useCallback(event => {
+        emitIfChanged(event), onBlur?.(event);
+    }, [ emitIfChanged, onBlur ]), handleKeyDown = useCallback(event => {
+        event.key === "Enter" && emitIfChanged(event), onKeyDown?.(event);
+    }, [ emitIfChanged, onKeyDown ]);
+    /* @__PURE__ */
+    return jsx(TextInput, {
+        ...rest,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value: inputValue === void 0 ? value : inputValue
+    });
+}), MONTH_NAMES = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], ARROW_KEYS = [ "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight" ], PRESERVE_FOCUS_ELEMENT = /* @__PURE__ */ jsx("span", {
+    "data-preserve-focus": !0,
+    style: {
+        outline: "none",
+        overflow: "hidden",
+        position: "absolute"
+    },
+    tabIndex: -1
+});
+
+function DatePicker({onSelect: onSelect, selectTime: selectTime = !1, value: value}) {
+    const base = useMemo(() => {
+        if (value) return value;
+        const now = /* @__PURE__ */ new Date;
+        return now.setSeconds(0, 0), now;
+    }, [ value ]), [focusedDate, setFocusedDate] = useState(base), ref = useRef(null), handleDaySelect = useCallback(date => onSelect(setMinutes(setHours(date, base.getHours()), base.getMinutes())), [ base, onSelect ]), handleTimeCommit = useCallback((hours, minutes) => onSelect(setHours(setMinutes(base, minutes), hours)), [ base, onSelect ]), handleNowClick = useCallback(() => {
+        const now = /* @__PURE__ */ new Date;
+        setFocusedDate(now), onSelect(now);
+    }, [ onSelect ]), handleMonthChange = useCallback(event => {
+        const month = Number(event.currentTarget.value);
+        setFocusedDate(current => setDate(setMonth(current, month), 1));
+    }, []), moveFocusedDate = useCallback(byMonths => setFocusedDate(current => addMonths(current, byMonths)), []), setFocusedYear = useCallback(year => setFocusedDate(current => setYear(current, year)), []), focusCurrentWeekDay = useCallback(() => {
+        ref.current?.querySelector('[data-focused="true"]')?.focus();
+    }, []), handleKeyDown = useCallback(event => {
+        if (!ARROW_KEYS.includes(event.key)) return;
+        if (event.preventDefault(), event.target instanceof HTMLElement && event.target.hasAttribute("data-calendar-grid")) {
+            focusCurrentWeekDay();
+            return;
+        }
+        const byDays = {
+            ArrowUp: -7,
+            ArrowDown: 7,
+            ArrowLeft: -1,
+            ArrowRight: 1
+        }[event.key] ?? 0;
+        setFocusedDate(current => addDays(current, byDays)), ref.current?.querySelector("[data-preserve-focus]")?.focus();
+    }, [ focusCurrentWeekDay ]);
+    return useEffect(() => {
+        document.activeElement?.matches("[data-calendar-grid], [data-calendar-grid] [data-preserve-focus]") && focusCurrentWeekDay();
+    }, [ focusCurrentWeekDay, focusedDate ]), /* @__PURE__ */ jsxs(Box, {
+        "data-testid": "date-picker",
+        ref: ref,
+        children: [ 
+        /* @__PURE__ */ jsxs(Box, {
+            padding: 2,
+            children: [ 
+            /* @__PURE__ */ jsxs(Flex, {
+                children: [ 
+                /* @__PURE__ */ jsx(Box, {
+                    flex: 1,
+                    children: /* @__PURE__ */ jsx(Select, {
+                        "aria-label": "Month",
+                        fontSize: 1,
+                        onChange: handleMonthChange,
+                        padding: 2,
+                        radius: 2,
+                        value: focusedDate.getMonth(),
+                        children: MONTH_NAMES.map((name, i) => /* @__PURE__ */ jsx("option", {
+                            value: i,
+                            children: name
+                        }, name))
+                    })
+                }), 
+                /* @__PURE__ */ jsxs(Flex, {
+                    align: "center",
+                    gap: 1,
+                    marginLeft: 2,
+                    children: [ 
+                    /* @__PURE__ */ jsx(Button, {
+                        "aria-label": "Previous year",
+                        icon: ChevronLeftIcon,
+                        mode: "bleed",
+                        onClick: () => moveFocusedDate(-12),
+                        padding: 2
+                    }), 
+                    /* @__PURE__ */ jsx(YearInput, {
+                        onChange: setFocusedYear,
+                        value: focusedDate.getFullYear()
+                    }), 
+                    /* @__PURE__ */ jsx(Button, {
+                        "aria-label": "Next year",
+                        icon: ChevronRightIcon,
+                        mode: "bleed",
+                        onClick: () => moveFocusedDate(12),
+                        padding: 2
+                    }) ]
+                }) ]
+            }), 
+            /* @__PURE__ */ jsxs(Box, {
+                "data-calendar-grid": !0,
+                marginTop: 2,
+                onKeyDown: handleKeyDown,
+                overflow: "hidden",
+                tabIndex: 0,
+                children: [ 
+                /* @__PURE__ */ jsx(CalendarMonth, {
+                    focused: focusedDate,
+                    onSelect: handleDaySelect,
+                    selected: value
+                }), PRESERVE_FOCUS_ELEMENT ]
+            }) ]
+        }), selectTime ? /* @__PURE__ */ jsx(Card, {
+            borderTop: !0,
+            padding: 2,
+            children: /* @__PURE__ */ jsxs(Flex, {
+                align: "center",
+                gap: 2,
+                children: [ 
+                /* @__PURE__ */ jsx(TimeField, {
+                    onCommit: handleTimeCommit,
+                    value: `${pad2(base.getHours())}:${pad2(base.getMinutes())}`
+                }), 
+                /* @__PURE__ */ jsx(Button, {
+                    fontSize: 1,
+                    mode: "bleed",
+                    onClick: handleNowClick,
+                    padding: 2,
+                    text: "Set to current time"
+                }) ]
+            })
+        }) : null ]
+    });
+}
+
+function TimeField({onCommit: onCommit, value: value}) {
+    /* @__PURE__ */
+    return jsx(LazyTextInput, {
+        "aria-label": "Select time",
+        fontSize: 1,
+        onChange: event => {
+            const [hours, minutes] = event.currentTarget.value.split(":").map(Number);
+            hours !== void 0 && minutes !== void 0 && !Number.isNaN(hours + minutes) && onCommit(hours, minutes);
+        },
+        padding: 2,
+        type: "time",
+        value: value
+    });
+}
+
+function YearInput({onChange: onChange, value: value}) {
+    /* @__PURE__ */
+    return jsx(LazyTextInput, {
+        "aria-label": "Year",
+        fontSize: 1,
+        inputMode: "numeric",
+        onChange: event => {
+            const year = Number.parseInt(event.currentTarget.value, 10);
+            Number.isNaN(year) || onChange(year);
+        },
+        padding: 2,
+        radius: 2,
+        style: {
+            textAlign: "center",
+            width: 48
+        },
+        value: value
+    });
+}
+
+function ClearableDatePicker({value: value, selectTime: selectTime = !1, clearLabel: clearLabel, onPick: onPick, onClear: onClear}) {
+    /* @__PURE__ */
+    return jsxs(Box, {
+        children: [ 
+        /* @__PURE__ */ jsx(DatePicker, {
+            onSelect: onPick,
+            selectTime: selectTime,
+            value: value
+        }), value ? /* @__PURE__ */ jsx(Card, {
+            borderTop: !0,
+            padding: 1,
+            children: /* @__PURE__ */ jsx(Button, {
+                fontSize: 1,
+                icon: CloseIcon,
+                mode: "bleed",
+                onClick: onClear,
+                padding: 2,
+                text: clearLabel
+            })
+        }) : null ]
+    });
+}
+
+function matchesMemberSearch(member, query) {
+    const normalized = query.trim().toLowerCase();
+    return normalized ? member.displayName.toLowerCase().includes(normalized) || (member.email?.toLowerCase().includes(normalized) ?? !1) : !0;
+}
+
+function memberInitials(name) {
+    return name.split(/\s+/).filter(Boolean).map(word => word[0]).slice(0, 2).join("").toUpperCase() || "?";
+}
+
+function MemberAvatar({name: name, imageUrl: imageUrl, size: size = 0}) {
+    /* @__PURE__ */
+    return jsx(Avatar, {
+        __unstable_hideInnerStroke: !0,
+        initials: memberInitials(name),
+        size: size,
+        ...imageUrl ? {
+            src: imageUrl
+        } : {}
+    });
+}
+
+function MemberAvatarGroup({members: members, maxLength: maxLength = 3}) {
+    return members.length === 0 ? null : /* @__PURE__ */ jsx(AvatarStack, {
+        maxLength: maxLength,
+        size: 0,
+        style: {
+            lineHeight: 0
+        },
+        children: members.map(member => /* @__PURE__ */ jsx(MemberAvatar, {
+            imageUrl: member.imageUrl,
+            name: member.displayName
+        }, member.id))
+    });
+}
+
+function PickerStatus({loading: loading, error: error}) {
+    return loading ? /* @__PURE__ */ jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        padding: 3,
+        children: [ 
+        /* @__PURE__ */ jsx(Spinner, {
+            muted: !0,
+            size: 1
+        }), 
+        /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 1,
+            children: "Loading members…"
+        }) ]
+    }) : error ? /* @__PURE__ */ jsx(Box, {
+        padding: 3,
+        children: /* @__PURE__ */ jsxs(Text, {
+            muted: !0,
+            size: 1,
+            children: [ "Could not list members: ", error ]
+        })
+    }) : null;
+}
+
+const ActiveRowContext = createContext(void 0);
+
+function PickerShell({children: children, empty: empty, error: error, loading: loading, placeholder: placeholder, query: query, onQueryChange: onQueryChange}) {
+    const listRef = useRef(null), listId = useId(), [activeIndex, setActiveIndex] = useState(-1), [activeRowId, setActiveRowId] = useState(), handleKeyDown = useCallback(event => {
+        const rows = listRef.current?.querySelectorAll("[data-picker-row]") ?? [];
+        if (rows.length === 0) return;
+        if (event.key === "Enter" && activeIndex >= 0) {
+            event.preventDefault(), rows[activeIndex]?.click();
+            return;
+        }
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+        event.preventDefault();
+        const direction = event.key === "ArrowDown" ? 1 : -1;
+        setActiveIndex(current => {
+            let startingIndex = current;
+            current < 0 && (startingIndex = direction > 0 ? -1 : 0);
+            const nextIndex = (startingIndex + direction + rows.length) % rows.length, nextRow = rows[nextIndex];
+            return setActiveRowId(nextRow?.id), nextRow?.scrollIntoView?.({
+                block: "nearest"
+            }), nextIndex;
+        });
+    }, [ activeIndex ]);
+    return loading || error ? /* @__PURE__ */ jsx(PickerStatus, {
+        error: error,
+        loading: loading
+    }) : /* @__PURE__ */ jsxs(Flex, {
+        direction: "column",
+        style: {
+            width: 300
+        },
+        children: [ 
+        /* @__PURE__ */ jsx(Box, {
+            padding: 1,
+            paddingBottom: 0,
+            children: /* @__PURE__ */ jsx(TextInput, {
+                "aria-activedescendant": activeRowId,
+                "aria-controls": listId,
+                "aria-expanded": !0,
+                "aria-label": placeholder,
+                fontSize: 1,
+                onChange: event => {
+                    setActiveIndex(-1), setActiveRowId(void 0), onQueryChange(event.currentTarget.value);
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: placeholder,
+                radius: 2,
+                role: "combobox",
+                value: query
+            })
+        }), empty ? /* @__PURE__ */ jsx(Box, {
+            padding: 3,
+            children: /* @__PURE__ */ jsx(Text, {
+                muted: !0,
+                size: 1,
+                children: "Nothing matches"
+            })
+        }) : /* @__PURE__ */ jsx(Stack, {
+            as: "ul",
+            id: listId,
+            ref: listRef,
+            role: "listbox",
+            padding: 1,
+            space: 1,
+            style: {
+                listStyle: "none",
+                maxHeight: 360,
+                overflowY: "auto"
+            },
+            children: /* @__PURE__ */ jsx(ActiveRowContext, {
+                value: activeRowId,
+                children: children
+            })
+        }) ]
+    });
+}
+
+function PickerRow({icon: icon, label: label, onSelect: onSelect, rowId: rowId, selected: selected}) {
+    const active = useContext(ActiveRowContext) === rowId;
+    /* @__PURE__ */
+    return jsx(Box, {
+        as: "li",
+        children: /* @__PURE__ */ jsx(Button, {
+            "aria-pressed": selected,
+            "aria-selected": active,
+            "data-picker-row": !0,
+            id: rowId,
+            justify: "flex-start",
+            mode: active ? "ghost" : "bleed",
+            onClick: onSelect,
+            padding: 2,
+            style: {
+                width: "100%"
+            },
+            role: "option",
+            children: /* @__PURE__ */ jsxs(Flex, {
+                align: "center",
+                gap: 2,
+                style: {
+                    width: "100%"
+                },
+                children: [ icon, 
+                /* @__PURE__ */ jsx(Box, {
+                    flex: 1,
+                    children: /* @__PURE__ */ jsx(Text, {
+                        align: "left",
+                        size: 1,
+                        textOverflow: "ellipsis",
+                        children: label
+                    })
+                }), selected ? /* @__PURE__ */ jsx(CheckmarkIcon, {}) : null ]
+            })
+        })
+    });
+}
+
+function Glyph({children: children}) {
+    /* @__PURE__ */
+    return jsx(Text, {
+        muted: !0,
+        size: 2,
+        children: children
+    });
+}
+
+function MemberPicker({error: error, loading: loading, members: members, onSelect: onSelect, selectedIds: selectedIds, unassignRow: unassignRow = !1}) {
+    const [query, setQuery] = useState(""), matchingMembers = useMemo(() => members.filter(member => matchesMemberSearch(member, query)), [ members, query ]), showUnassigned = unassignRow && query.trim() === "";
+    /* @__PURE__ */
+    return jsxs(PickerShell, {
+        empty: !showUnassigned && matchingMembers.length === 0,
+        error: error,
+        loading: loading,
+        members: members,
+        onQueryChange: setQuery,
+        placeholder: "Search members…",
+        query: query,
+        children: [ showUnassigned ? /* @__PURE__ */ jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsx(Glyph, {
+                children: /* @__PURE__ */ jsx(EmptyIcon, {})
+            }),
+            label: "No assignee",
+            onSelect: () => onSelect(null),
+            rowId: "workflow-member-unassigned",
+            selected: selectedIds.size === 0
+        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsx(MemberAvatar, {
+                imageUrl: member.imageUrl,
+                name: member.displayName
+            }),
+            label: member.displayName,
+            onSelect: () => onSelect(member),
+            rowId: `workflow-member-${encodeURIComponent(member.id)}`,
+            selected: selectedIds.has(member.id)
+        }, member.id)) ]
+    });
+}
+
+function GroupHeading({children: children}) {
+    /* @__PURE__ */
+    return jsx(Card, {
+        as: "li",
+        borderTop: !0,
+        padding: 2,
+        children: /* @__PURE__ */ jsx(Text, {
+            muted: !0,
+            size: 0,
+            weight: "medium",
+            children: children
+        })
+    });
+}
+
+function AssigneePicker({error: error, loading: loading, members: members, onToggle: onToggle, value: value}) {
+    const [query, setQuery] = useState(""), normalized = query.trim().toLowerCase(), matchingRoles = useMemo(() => [ ...new Set(members.flatMap(member => member.roles)) ].toSorted(), [ members ]).filter(role => role.toLowerCase().includes(normalized)), matchingMembers = members.filter(member => matchesMemberSearch(member, query)), selectedRoles = new Set(value.flatMap(item => item.type === "role" ? [ item.role ] : [])), selectedUsers = new Set(value.flatMap(item => item.type === "user" ? [ item.id ] : []));
+    /* @__PURE__ */
+    return jsxs(PickerShell, {
+        empty: matchingRoles.length === 0 && matchingMembers.length === 0,
+        error: error,
+        loading: loading,
+        members: members,
+        onQueryChange: setQuery,
+        placeholder: "Search roles and members…",
+        query: query,
+        children: [ matchingRoles.length > 0 ? /* @__PURE__ */ jsx(GroupHeading, {
+            children: "Roles"
+        }) : null, matchingRoles.map(role => /* @__PURE__ */ jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsx(Glyph, {
+                children: /* @__PURE__ */ jsx(UsersIcon, {})
+            }),
+            label: role,
+            onSelect: () => onToggle({
+                type: "role",
+                role: role
+            }),
+            rowId: `workflow-role-${encodeURIComponent(role)}`,
+            selected: selectedRoles.has(role)
+        }, `role:${role}`)), matchingMembers.length > 0 ? /* @__PURE__ */ jsx(GroupHeading, {
+            children: "Members"
+        }) : null, matchingMembers.map(member => /* @__PURE__ */ jsx(PickerRow, {
+            icon: /* @__PURE__ */ jsx(MemberAvatar, {
+                imageUrl: member.imageUrl,
+                name: member.displayName
+            }),
+            label: member.displayName,
+            onSelect: () => onToggle({
+                type: "user",
+                id: member.id
+            }),
+            rowId: `workflow-assignee-${encodeURIComponent(member.id)}`,
+            selected: selectedUsers.has(member.id)
+        }, `user:${member.id}`)) ]
+    });
+}
+
+export { AssigneeBadge, AssigneeBadges, AssigneePicker, ClearableDatePicker, DatePicker, MemberAvatar, MemberAvatarGroup, MemberPicker, roleListLabel };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@sanity/workflow-components",
+  "version": "0.0.0",
+  "description": "Reusable React components for Editorial Workflows member, assignee, and date fields.",
+  "keywords": [
+    "react",
+    "sanity",
+    "sanity-io",
+    "sdk",
+    "workflow",
+    "workflows"
+  ],
+  "homepage": "https://github.com/sanity-io/workflows/tree/main/packages/workflow-components#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/workflows/issues"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sanity-io/workflows.git",
+    "directory": "packages/workflow-components"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sanity/icons": "^4.1.0",
+    "date-fns": "^4.4.0",
+    "@sanity/workflow-engine": "0.17.0"
+  },
+  "devDependencies": {
+    "@sanity/pkg-utils": "^10.5.3",
+    "@sanity/ui": "^3.3.5",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "vitest": "^4.1.8"
+  },
+  "peerDependencies": {
+    "@sanity/ui": "^3.3.5",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "pkg-utils build --clean",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  }
+}