@voyantjs/notifications-ui 0.28.3

package/README.md

@@ -0,0 +1,21 @@
+# @voyantjs/notifications-ui
+
+React components for Voyant notifications: reminder sequence editor (stages + channels), notification settings, and preview.
+
+## Install
+
+```bash
+pnpm add @voyantjs/notifications-ui @voyantjs/notifications-react @voyantjs/ui @tanstack/react-query react react-dom
+```
+
+```ts
+import "@voyantjs/notifications-ui/styles.css"
+```
+
+## Components
+
+- `<StageList />` — reminder rule's ordered stages with reorder + delete.
+- `<StageEditorDialog />` — create / edit a stage (anchor, window, cadence).
+- `<StageChannelEditorDialog />` — create / edit a channel under a stage.
+- `<NotificationSettingsForm />` — quiet hours, blackout dates, weekend skip, recipient rate limit, suppression window.
+- `<RemindersPreviewList />` — what would fire on a given date with reasoning.

package/dist/components/notification-settings-form.d.ts

@@ -0,0 +1,2 @@
+export declare function NotificationSettingsForm(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notification-settings-form.d.ts.map

package/dist/components/notification-settings-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-settings-form.d.ts","sourceRoot":"","sources":["../../src/components/notification-settings-form.tsx"],"names":[],"mappings":"AA0DA,wBAAgB,wBAAwB,4CAgNvC"}

package/dist/components/notification-settings-form.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNotificationSettings, useNotificationSettingsMutation, } from "@voyantjs/notifications-react";
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, } from "@voyantjs/ui/components";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, FieldTitle, } from "@voyantjs/ui/components/field";
+import { Switch } from "@voyantjs/ui/components/switch";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { TimezoneCombobox } from "./timezone-combobox.js";
+let blackoutSeq = 0;
+const nextBlackoutKey = () => `bo-${++blackoutSeq}`;
+const emptyForm = {
+    quietHoursStart: "",
+    quietHoursEnd: "",
+    quietHoursTz: "UTC",
+    blackoutDates: [],
+    skipWeekends: false,
+    recipientRateLimitPerDay: "",
+    suppressionWindowHours: 24,
+};
+export function NotificationSettingsForm() {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { data: settings, isLoading } = useNotificationSettings();
+    const mutation = useNotificationSettingsMutation();
+    const [form, setForm] = useState(emptyForm);
+    useEffect(() => {
+        if (!settings)
+            return;
+        setForm({
+            quietHoursStart: settings.quietHoursLocal?.start ?? "",
+            quietHoursEnd: settings.quietHoursLocal?.end ?? "",
+            quietHoursTz: settings.quietHoursLocal?.tz ?? "UTC",
+            blackoutDates: (settings.blackoutDates ?? []).map((date) => ({
+                rowKey: nextBlackoutKey(),
+                date,
+            })),
+            skipWeekends: settings.skipWeekends,
+            recipientRateLimitPerDay: settings.recipientRateLimitPerDay?.toString() ?? "",
+            suppressionWindowHours: settings.suppressionWindowHours,
+        });
+    }, [settings]);
+    const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const addBlackout = () => setField("blackoutDates", [...form.blackoutDates, { rowKey: nextBlackoutKey(), date: null }]);
+    const removeBlackout = (rowKey) => setField("blackoutDates", form.blackoutDates.filter((row) => row.rowKey !== rowKey));
+    const updateBlackout = (rowKey, date) => setField("blackoutDates", form.blackoutDates.map((row) => (row.rowKey === rowKey ? { ...row, date } : row)));
+    const handleSubmit = async () => {
+        const dates = form.blackoutDates
+            .map((row) => row.date)
+            .filter((d) => Boolean(d && /^\d{4}-\d{2}-\d{2}$/.test(d)));
+        const quiet = form.quietHoursStart && form.quietHoursEnd
+            ? { start: form.quietHoursStart, end: form.quietHoursEnd, tz: form.quietHoursTz || "UTC" }
+            : null;
+        await mutation.mutateAsync({
+            quietHoursLocal: quiet,
+            blackoutDates: dates.length > 0 ? dates : null,
+            skipWeekends: form.skipWeekends,
+            recipientRateLimitPerDay: form.recipientRateLimitPerDay
+                ? Number(form.recipientRateLimitPerDay)
+                : null,
+            suppressionWindowHours: form.suppressionWindowHours,
+        });
+    };
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: messages.settings.heading }), _jsx(CardDescription, { children: messages.settings.description })] }), _jsxs(CardContent, { children: [isLoading && _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }), _jsxs(FieldGroup, { children: [_jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: messages.settings.sections.quietHours }), _jsx(FieldDescription, { children: messages.settings.sections.quietHoursDesc }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsxs(Field, { orientation: "horizontal", children: [_jsx(Switch, { id: "skipWeekends", checked: form.skipWeekends, onCheckedChange: (value) => setField("skipWeekends", value) }), _jsxs(FieldLabel, { htmlFor: "skipWeekends", className: "!w-auto !flex-row", children: [_jsx(FieldTitle, { children: messages.settings.fields.skipWeekends }), _jsx(FieldDescription, { children: messages.settings.fields.skipWeekendsDesc })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "quietHoursStart", children: messages.settings.fields.quietHoursStart }), _jsx(Input, { id: "quietHoursStart", type: "time", value: form.quietHoursStart, onChange: (e) => setField("quietHoursStart", e.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "quietHoursEnd", children: messages.settings.fields.quietHoursEnd }), _jsx(Input, { id: "quietHoursEnd", type: "time", value: form.quietHoursEnd, onChange: (e) => setField("quietHoursEnd", e.target.value) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { children: messages.settings.fields.quietHoursTz }), _jsx(TimezoneCombobox, { value: form.quietHoursTz, onChange: (value) => setField("quietHoursTz", value ?? "UTC"), placeholder: messages.settings.placeholders.tz })] })] })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: messages.settings.sections.blackouts }), _jsx(FieldDescription, { children: messages.settings.sections.blackoutsDesc }), _jsxs("div", { className: "space-y-2", children: [form.blackoutDates.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.settings.placeholders.noBlackouts })), form.blackoutDates.map((row) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(DatePicker, { value: row.date, onChange: (value) => updateBlackout(row.rowKey, value) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => removeBlackout(row.rowKey), "aria-label": messages.settings.actions.removeBlackoutDate, children: _jsx(Trash2, { className: "size-4" }) })] }, row.rowKey))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addBlackout, children: [_jsx(Plus, { className: "size-4" }), " ", messages.settings.actions.addBlackoutDate] })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: messages.settings.sections.rateLimits }), _jsx(FieldDescription, { children: messages.settings.sections.rateLimitsDesc }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "recipientRateLimitPerDay", children: messages.settings.fields.recipientRateLimitPerDay }), _jsx(Input, { id: "recipientRateLimitPerDay", type: "number", min: 1, value: form.recipientRateLimitPerDay, onChange: (e) => setField("recipientRateLimitPerDay", e.target.value), placeholder: messages.common.optionalPlaceholder }), _jsx(FieldDescription, { children: messages.settings.helpers.recipientRateLimitPerDay })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "suppressionWindowHours", children: messages.settings.fields.suppressionWindowHours }), _jsx(Input, { id: "suppressionWindowHours", type: "number", min: 0, value: form.suppressionWindowHours, onChange: (e) => setField("suppressionWindowHours", Number(e.target.value)) }), _jsx(FieldDescription, { children: messages.settings.helpers.suppressionWindowHours })] })] })] })] })] }), _jsx(CardFooter, { className: "justify-end", children: _jsxs(Button, { onClick: handleSubmit, disabled: mutation.isPending, children: [mutation.isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, messages.common.save] }) })] }));
+}

package/dist/components/reminders-preview-list.d.ts

@@ -0,0 +1,6 @@
+export interface RemindersPreviewListProps {
+    ruleId?: string;
+    targetId?: string;
+}
+export declare function RemindersPreviewList({ ruleId, targetId }: RemindersPreviewListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=reminders-preview-list.d.ts.map

package/dist/components/reminders-preview-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reminders-preview-list.d.ts","sourceRoot":"","sources":["../../src/components/reminders-preview-list.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,yBAAyB;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,yBAAyB,2CAyDnF"}

package/dist/components/reminders-preview-list.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRemindersPreview } from "@voyantjs/notifications-react";
+import { Card, CardContent } from "@voyantjs/ui/components";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Field, FieldLabel } from "@voyantjs/ui/components/field";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+function todayIso() {
+    return new Date().toISOString().slice(0, 10);
+}
+export function RemindersPreviewList({ ruleId, targetId }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const [date, setDate] = useState(todayIso());
+    const { data, isFetching } = useRemindersPreview({ date, ruleId, targetId });
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs(Field, { className: "max-w-xs", children: [_jsx(FieldLabel, { htmlFor: "preview-date", children: messages.preview.dateLabel }), _jsx(DatePicker, { value: date, onChange: (next) => setDate(next ?? todayIso()), clearable: false })] }), isFetching ? (_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground", "aria-hidden": true })) : null] }), data && data.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.preview.empty })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.preview.columns.rule }), _jsx(TableHead, { children: messages.preview.columns.stage }), _jsx(TableHead, { children: messages.preview.columns.target }), _jsx(TableHead, { children: messages.preview.columns.anchor }), _jsx(TableHead, { children: messages.preview.columns.scheduledAt }), _jsx(TableHead, { children: messages.preview.columns.reasoning })] }) }), _jsx(TableBody, { children: data?.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: row.ruleName }), _jsxs(TableCell, { children: ["#", row.stageOrderIndex, " ", row.stageName ?? ""] }), _jsx(TableCell, { className: "font-mono text-xs", children: row.targetId }), _jsx(TableCell, { children: row.anchor }), _jsx(TableCell, { className: "font-mono text-xs", children: new Date(row.scheduledAt).toLocaleString() }), _jsx(TableCell, { className: "text-xs text-muted-foreground", children: row.reasoning })] }, `${row.ruleId}:${row.targetId}:${row.stageId}`))) })] }))] }) }));
+}

package/dist/components/stage-channel-editor-dialog.d.ts

@@ -0,0 +1,11 @@
+import { type ReminderStageChannelRecord } from "@voyantjs/notifications-react";
+export interface StageChannelEditorDialogProps {
+    reminderRuleId: string;
+    stageId: string;
+    channel: ReminderStageChannelRecord | null;
+    defaultOrderIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function StageChannelEditorDialog({ reminderRuleId, stageId, channel, defaultOrderIndex, open, onOpenChange, }: StageChannelEditorDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-channel-editor-dialog.d.ts.map

package/dist/components/stage-channel-editor-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-channel-editor-dialog.d.ts","sourceRoot":"","sources":["../../src/components/stage-channel-editor-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,0BAA0B,EAEhC,MAAM,+BAA+B,CAAA;AAwDtC,MAAM,WAAW,6BAA6B;IAC5C,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,0BAA0B,GAAG,IAAI,CAAA;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,cAAc,EACd,OAAO,EACP,OAAO,EACP,iBAAqB,EACrB,IAAI,EACJ,YAAY,GACb,EAAE,6BAA6B,2CA+J/B"}

package/dist/components/stage-channel-editor-dialog.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReminderStageChannelMutation, } from "@voyantjs/notifications-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@voyantjs/ui/components/field";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { TemplatePicker } from "./template-picker.js";
+function fromRecord(channel, orderIndex) {
+    if (!channel) {
+        return {
+            orderIndex,
+            channel: "email",
+            provider: "automatic",
+            templateId: null,
+            recipientKind: "primary",
+        };
+    }
+    const provider = channel.provider === "resend" || channel.provider === "twilio" ? channel.provider : "automatic";
+    return {
+        orderIndex: channel.orderIndex,
+        channel: channel.channel,
+        provider,
+        templateId: channel.templateId ?? null,
+        recipientKind: channel.recipientKind,
+    };
+}
+export function StageChannelEditorDialog({ reminderRuleId, stageId, channel, defaultOrderIndex = 0, open, onOpenChange, }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { create, update } = useReminderStageChannelMutation(reminderRuleId, stageId);
+    const [form, setForm] = useState(() => fromRecord(channel, defaultOrderIndex));
+    const isEdit = Boolean(channel);
+    const isPending = create.isPending || update.isPending;
+    useEffect(() => {
+        if (open)
+            setForm(fromRecord(channel, defaultOrderIndex));
+    }, [open, channel, defaultOrderIndex]);
+    const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const handleSubmit = async () => {
+        const input = {
+            orderIndex: form.orderIndex,
+            channel: form.channel,
+            provider: form.provider === "automatic" ? null : form.provider,
+            templateId: form.templateId,
+            templateSlug: null,
+            recipientKind: form.recipientKind,
+            recipientRole: null,
+        };
+        if (isEdit && channel) {
+            await update.mutateAsync({ channelId: channel.id, input });
+        }
+        else {
+            await create.mutateAsync(input);
+        }
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEdit ? messages.channel.titles.edit : messages.channel.titles.create }) }), _jsx(DialogBody, { children: _jsxs(FieldGroup, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-[1fr_8rem]", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-channel", children: messages.channel.fields.channel }), _jsxs(Select, { value: form.channel, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    const next = v;
+                                                    setForm((prev) => ({
+                                                        ...prev,
+                                                        channel: next,
+                                                        // Picked template no longer matches the new channel — clear it.
+                                                        templateId: null,
+                                                    }));
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-channel", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "email", children: messages.channel.channels.email }), _jsx(SelectItem, { value: "sms", children: messages.channel.channels.sms })] })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-order", children: messages.channel.fields.orderIndex }), _jsx(Input, { id: "channel-order", type: "number", value: form.orderIndex, onChange: (e) => setField("orderIndex", Number(e.target.value)) })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { children: messages.channel.fields.template }), _jsx(TemplatePicker, { value: form.templateId, onChange: (value) => setField("templateId", value), channel: form.channel, placeholder: messages.channel.placeholders.template }), _jsx(FieldDescription, { children: "Filtered by the channel above. Resolved at send time so editing the template doesn't need a rule update." })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-recipient-kind", children: messages.channel.fields.recipientKind }), _jsxs(Select, { value: form.recipientKind, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    setField("recipientKind", v);
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-recipient-kind", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "primary", children: messages.channel.recipientKinds.primary }), _jsx(SelectItem, { value: "cc", children: messages.channel.recipientKinds.cc }), _jsx(SelectItem, { value: "bcc", children: messages.channel.recipientKinds.bcc })] })] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "channel-provider", children: messages.channel.fields.provider }), _jsxs(Select, { value: form.provider, onValueChange: (v) => {
+                                                    if (!v)
+                                                        return;
+                                                    setField("provider", v);
+                                                }, children: [_jsx(SelectTrigger, { id: "channel-provider", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "automatic", children: messages.channel.providers.automatic }), _jsx(SelectItem, { value: "resend", children: messages.channel.providers.resend }), _jsx(SelectItem, { value: "twilio", children: messages.channel.providers.twilio })] })] }), _jsx(FieldDescription, { children: "Use Automatic to fall back to the deployment default for this channel." })] })] })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isPending, children: messages.common.cancel }), _jsxs(Button, { onClick: handleSubmit, disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, isEdit ? messages.common.save : messages.common.create] })] })] }) }));
+}

package/dist/components/stage-channel-list.d.ts

@@ -0,0 +1,6 @@
+export interface StageChannelListProps {
+    reminderRuleId: string;
+    stageId: string;
+}
+export declare function StageChannelList({ reminderRuleId, stageId }: StageChannelListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-channel-list.d.ts.map

package/dist/components/stage-channel-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-channel-list.d.ts","sourceRoot":"","sources":["../../src/components/stage-channel-list.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,CAAA;IACtB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAyElF"}

package/dist/components/stage-channel-list.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReminderStageChannelMutation, useReminderStageChannels, } from "@voyantjs/notifications-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { StageChannelEditorDialog } from "./stage-channel-editor-dialog.js";
+export function StageChannelList({ reminderRuleId, stageId }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { data: channels, isLoading } = useReminderStageChannels(reminderRuleId, stageId);
+    const { remove } = useReminderStageChannelMutation(reminderRuleId, stageId);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    return (_jsxs(Card, { className: "border-dashed", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [_jsx(CardTitle, { className: "text-sm font-medium", children: messages.channel.listHeading }), _jsxs(Button, { size: "sm", variant: "outline", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4" }), " ", messages.channel.addChannel] })] }), _jsxs(CardContent, { className: "space-y-2", children: [isLoading && _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }), channels && channels.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.channel.listEmpty })), channels?.map((channel) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Badge, { variant: "outline", children: messages.channel.channels[channel.channel] }), _jsx(Badge, { variant: "secondary", children: messages.channel.recipientKinds[channel.recipientKind] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "icon", variant: "ghost", onClick: () => setEditing(channel), children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
+                                            if (window.confirm(messages.channel.deleteConfirm)) {
+                                                void remove.mutateAsync(channel.id);
+                                            }
+                                        }, children: _jsx(Trash2, { className: "size-4" }) })] })] }, channel.id)))] }), creating && (_jsx(StageChannelEditorDialog, { reminderRuleId: reminderRuleId, stageId: stageId, channel: null, defaultOrderIndex: channels?.length ?? 0, open: creating, onOpenChange: setCreating })), editing && (_jsx(StageChannelEditorDialog, { reminderRuleId: reminderRuleId, stageId: stageId, channel: editing, open: Boolean(editing), onOpenChange: (open) => !open && setEditing(null) }))] }));
+}

package/dist/components/stage-editor-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type ReminderRuleStageRecord } from "@voyantjs/notifications-react";
+export interface StageEditorDialogProps {
+    reminderRuleId: string;
+    stage: ReminderRuleStageRecord | null;
+    defaultOrderIndex?: number;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export declare function StageEditorDialog({ reminderRuleId, stage, defaultOrderIndex, open, onOpenChange, }: StageEditorDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-editor-dialog.d.ts.map

package/dist/components/stage-editor-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-editor-dialog.d.ts","sourceRoot":"","sources":["../../src/components/stage-editor-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,uBAAuB,EAE7B,MAAM,+BAA+B,CAAA;AAoGtC,MAAM,WAAW,sBAAsB;IACrC,cAAc,EAAE,MAAM,CAAA;IACtB,KAAK,EAAE,uBAAuB,GAAG,IAAI,CAAA;IACrC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACtC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,KAAK,EACL,iBAAqB,EACrB,IAAI,EACJ,YAAY,GACb,EAAE,sBAAsB,2CAuTxB"}

package/dist/components/stage-editor-dialog.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReminderRuleStageMutation, } from "@voyantjs/notifications-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet, FieldTitle, } from "@voyantjs/ui/components/field";
+import { Switch } from "@voyantjs/ui/components/switch";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+let intervalRowSeq = 0;
+const nextIntervalRowKey = () => `iv-${++intervalRowSeq}`;
+const ANCHORS = [
+    "due_date",
+    "booking_created_at",
+    "departure_date",
+    "invoice_issued_at",
+    "last_send_at",
+];
+const CADENCES = ["once", "every_n_days", "escalating"];
+function fromRecord(stage, orderIndex) {
+    if (!stage) {
+        return {
+            name: "",
+            orderIndex,
+            anchor: "due_date",
+            windowStartDays: -7,
+            windowEndDays: 0,
+            cadenceKind: "once",
+            cadenceEveryDays: null,
+            cadenceIntervals: [],
+            maxSendsInStage: null,
+            respectQuietHours: true,
+        };
+    }
+    return {
+        name: stage.name ?? "",
+        orderIndex: stage.orderIndex,
+        anchor: stage.anchor,
+        windowStartDays: stage.windowStartDays,
+        windowEndDays: stage.windowEndDays,
+        cadenceKind: stage.cadenceKind,
+        cadenceEveryDays: stage.cadenceEveryDays,
+        cadenceIntervals: stage.cadenceIntervals?.map((i) => ({
+            rowKey: nextIntervalRowKey(),
+            whenDaysUntilDueGT: i.whenDaysUntilDueGT ?? null,
+            repeatEveryDays: i.repeatEveryDays,
+        })) ?? [],
+        maxSendsInStage: stage.maxSendsInStage,
+        respectQuietHours: stage.respectQuietHours,
+    };
+}
+export function StageEditorDialog({ reminderRuleId, stage, defaultOrderIndex = 0, open, onOpenChange, }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { create, update } = useReminderRuleStageMutation(reminderRuleId);
+    const [form, setForm] = useState(() => fromRecord(stage, defaultOrderIndex));
+    const isEdit = Boolean(stage);
+    const isPending = create.isPending || update.isPending;
+    useEffect(() => {
+        if (open)
+            setForm(fromRecord(stage, defaultOrderIndex));
+    }, [open, stage, defaultOrderIndex]);
+    const setField = (key, value) => setForm((prev) => ({ ...prev, [key]: value }));
+    const addInterval = () => setField("cadenceIntervals", [
+        ...form.cadenceIntervals,
+        { rowKey: nextIntervalRowKey(), whenDaysUntilDueGT: null, repeatEveryDays: 7 },
+    ]);
+    const removeInterval = (rowKey) => setField("cadenceIntervals", form.cadenceIntervals.filter((row) => row.rowKey !== rowKey));
+    const handleSubmit = async () => {
+        const input = {
+            name: form.name || null,
+            orderIndex: form.orderIndex,
+            anchor: form.anchor,
+            windowStartDays: form.windowStartDays,
+            windowEndDays: form.windowEndDays,
+            cadenceKind: form.cadenceKind,
+            cadenceEveryDays: form.cadenceKind === "every_n_days" ? form.cadenceEveryDays : null,
+            cadenceIntervals: form.cadenceKind === "escalating"
+                ? form.cadenceIntervals.map((row) => ({
+                    whenDaysUntilDueGT: row.whenDaysUntilDueGT,
+                    repeatEveryDays: row.repeatEveryDays,
+                }))
+                : null,
+            maxSendsInStage: form.maxSendsInStage,
+            respectQuietHours: form.respectQuietHours,
+        };
+        if (isEdit && stage) {
+            await update.mutateAsync({ stageId: stage.id, input });
+        }
+        else {
+            await create.mutateAsync(input);
+        }
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEdit ? messages.stage.titles.edit : messages.stage.titles.create }) }), _jsx(DialogBody, { children: _jsxs(FieldGroup, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-[1fr_8rem]", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "stage-name", children: messages.stage.fields.name }), _jsx(Input, { id: "stage-name", value: form.name, onChange: (e) => setField("name", e.target.value), placeholder: messages.stage.placeholders.name })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "stage-order", children: messages.stage.fields.orderIndex }), _jsx(Input, { id: "stage-order", type: "number", value: form.orderIndex, onChange: (e) => setField("orderIndex", Number(e.target.value)) })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: messages.stage.fields.anchor }), _jsx(FieldDescription, { children: "When the eligibility window opens, relative to the chosen anchor." }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsx(Field, { children: _jsxs(Select, { value: form.anchor, onValueChange: (v) => setField("anchor", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ANCHORS.map((a) => (_jsx(SelectItem, { value: a, children: messages.stage.anchors[a] }, a))) })] }) }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "window-start", children: messages.stage.fields.windowStartDays }), _jsx(Input, { id: "window-start", type: "number", value: form.windowStartDays, onChange: (e) => setField("windowStartDays", Number(e.target.value)) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "window-end", children: messages.stage.fields.windowEndDays }), _jsx(Input, { id: "window-end", type: "number", value: form.windowEndDays, onChange: (e) => setField("windowEndDays", Number(e.target.value)) })] })] })] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: messages.stage.fields.cadenceKind }), _jsx(FieldDescription, { children: "How often this stage may fire while inside the window." }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsx(Field, { children: _jsxs(Select, { value: form.cadenceKind, onValueChange: (v) => setField("cadenceKind", v), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CADENCES.map((c) => (_jsx(SelectItem, { value: c, children: messages.stage.cadences[c] }, c))) })] }) }), form.cadenceKind === "every_n_days" && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "cadence-every", children: messages.stage.fields.cadenceEveryDays }), _jsx(Input, { id: "cadence-every", type: "number", min: 1, value: form.cadenceEveryDays ?? "", onChange: (e) => setField("cadenceEveryDays", e.target.value ? Number(e.target.value) : null) })] })), form.cadenceKind === "escalating" && (_jsxs(Field, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(FieldLabel, { children: messages.stage.fields.cadenceIntervals }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addInterval, children: [_jsx(Plus, { className: "size-4" }), messages.stage.intervalRow.addInterval] })] }), form.cadenceIntervals.length === 0 ? (_jsx(FieldDescription, { children: "Add buckets keyed on days-until-due to scale cadence as the deadline approaches." })) : null, _jsx("div", { className: "space-y-2", children: form.cadenceIntervals.map((interval) => (_jsxs("div", { className: "grid grid-cols-[1fr_1fr_auto] items-end gap-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { className: "text-xs", children: messages.stage.intervalRow.whenDaysUntilDueGT }), _jsx(Input, { type: "number", value: interval.whenDaysUntilDueGT ?? "", onChange: (e) => setField("cadenceIntervals", form.cadenceIntervals.map((row) => row.rowKey === interval.rowKey
+                                                                                ? {
+                                                                                    ...row,
+                                                                                    whenDaysUntilDueGT: e.target.value
+                                                                                        ? Number(e.target.value)
+                                                                                        : null,
+                                                                                }
+                                                                                : row)) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { className: "text-xs", children: messages.stage.intervalRow.repeatEveryDays }), _jsx(Input, { type: "number", min: 1, value: interval.repeatEveryDays, onChange: (e) => setField("cadenceIntervals", form.cadenceIntervals.map((row) => row.rowKey === interval.rowKey
+                                                                                ? { ...row, repeatEveryDays: Number(e.target.value) }
+                                                                                : row)) })] }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", onClick: () => removeInterval(interval.rowKey), "aria-label": messages.stage.intervalRow.removeInterval, children: _jsx(Trash2, { className: "size-4" }) })] }, interval.rowKey))) })] }))] })] }), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { variant: "label", children: "Stop conditions" }), _jsxs(FieldGroup, { className: "gap-4", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "max-sends", children: messages.stage.fields.maxSendsInStage }), _jsx(Input, { id: "max-sends", type: "number", min: 1, value: form.maxSendsInStage ?? "", onChange: (e) => setField("maxSendsInStage", e.target.value ? Number(e.target.value) : null), placeholder: messages.common.optionalPlaceholder }), _jsx(FieldDescription, { children: "Leave blank for no limit. When reached, the next stage takes over." })] }), _jsxs(Field, { orientation: "horizontal", children: [_jsx(Switch, { id: "respect-quiet-hours", checked: form.respectQuietHours, onCheckedChange: (v) => setField("respectQuietHours", Boolean(v)) }), _jsxs(FieldLabel, { htmlFor: "respect-quiet-hours", className: "!w-auto !flex-row", children: [_jsx(FieldTitle, { children: messages.stage.fields.respectQuietHours }), _jsx(FieldDescription, { children: "Defer fires that would land inside the tenant's quiet-hours window." })] })] })] })] })] }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: isPending, children: messages.common.cancel }), _jsxs(Button, { onClick: handleSubmit, disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "size-4 animate-spin" }) : null, isEdit ? messages.common.save : messages.common.create] })] })] }) }));
+}

package/dist/components/stage-list.d.ts

@@ -0,0 +1,5 @@
+export interface StageListProps {
+    reminderRuleId: string;
+}
+export declare function StageList({ reminderRuleId }: StageListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=stage-list.d.ts.map

package/dist/components/stage-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-list.d.ts","sourceRoot":"","sources":["../../src/components/stage-list.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,SAAS,CAAC,EAAE,cAAc,EAAE,EAAE,cAAc,2CAqH3D"}

package/dist/components/stage-list.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReminderRuleStageMutation, useReminderRuleStages, } from "@voyantjs/notifications-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
+import { ArrowDown, ArrowUp, Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useNotificationsUiMessagesOrDefault } from "../i18n/index.js";
+import { StageChannelList } from "./stage-channel-list.js";
+import { StageEditorDialog } from "./stage-editor-dialog.js";
+export function StageList({ reminderRuleId }) {
+    const messages = useNotificationsUiMessagesOrDefault();
+    const { data: stages, isLoading } = useReminderRuleStages(reminderRuleId);
+    const { remove, reorder } = useReminderRuleStageMutation(reminderRuleId);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const move = async (index, direction) => {
+        if (!stages)
+            return;
+        const target = index + direction;
+        if (target < 0 || target >= stages.length)
+            return;
+        const next = [...stages];
+        const [item] = next.splice(index, 1);
+        if (!item)
+            return;
+        next.splice(target, 0, item);
+        await reorder.mutateAsync({ stageIds: next.map((s) => s.id) });
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-base font-semibold", children: messages.stage.listHeading }), _jsxs(Button, { size: "sm", onClick: () => setCreating(true), children: [_jsx(Plus, { className: "size-4" }), " ", messages.stage.addStage] })] }), isLoading && _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }), stages && stages.length === 0 && (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.stage.listEmpty })), stages?.map((stage, index) => (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0 pb-3", children: [_jsxs(CardTitle, { className: "flex items-center gap-2 text-sm font-medium", children: [_jsxs(Badge, { variant: "outline", children: ["#", stage.orderIndex] }), stage.name ?? messages.stage.placeholders.name, _jsx(Badge, { variant: "secondary", children: messages.stage.anchors[stage.anchor] }), _jsx(Badge, { children: messages.stage.cadences[stage.cadenceKind] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { size: "icon", variant: "ghost", onClick: () => move(index, -1), disabled: index === 0, children: _jsx(ArrowUp, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => move(index, 1), disabled: index === stages.length - 1, children: _jsx(ArrowDown, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => setEditing(stage), children: _jsx(Pencil, { className: "size-4" }) }), _jsx(Button, { size: "icon", variant: "ghost", onClick: () => {
+                                            if (window.confirm(messages.stage.deleteConfirm)) {
+                                                void remove.mutateAsync(stage.id);
+                                            }
+                                        }, children: _jsx(Trash2, { className: "size-4" }) })] })] }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-muted-foreground", children: [_jsxs("span", { children: [messages.stage.fields.windowStartDays, ": ", stage.windowStartDays] }), _jsxs("span", { children: [messages.stage.fields.windowEndDays, ": ", stage.windowEndDays] }), stage.cadenceKind === "every_n_days" && (_jsxs("span", { children: [messages.stage.fields.cadenceEveryDays, ": ", stage.cadenceEveryDays] })), stage.maxSendsInStage != null && (_jsxs("span", { children: [messages.stage.fields.maxSendsInStage, ": ", stage.maxSendsInStage] }))] }), _jsx(StageChannelList, { reminderRuleId: reminderRuleId, stageId: stage.id })] })] }, stage.id))), creating && (_jsx(StageEditorDialog, { reminderRuleId: reminderRuleId, stage: null, defaultOrderIndex: stages?.length ?? 0, open: creating, onOpenChange: setCreating })), editing && (_jsx(StageEditorDialog, { reminderRuleId: reminderRuleId, stage: editing, open: Boolean(editing), onOpenChange: (open) => !open && setEditing(null) }))] }));
+}

package/dist/components/template-picker.d.ts

@@ -0,0 +1,19 @@
+import { type NotificationTemplateRecord } from "@voyantjs/notifications-react";
+export interface TemplatePickerProps {
+    /** Currently selected template id (or null when nothing is picked). */
+    value: string | null;
+    onChange: (value: string | null) => void;
+    /** Restrict results to templates registered for this channel. */
+    channel?: NotificationTemplateRecord["channel"];
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+}
+/**
+ * Async-friendly template picker. Searches active templates by name / slug
+ * filtered by the chosen channel and resolves to the template id. The
+ * currently selected template is fetched separately so its label keeps
+ * rendering even after the search list filters it out.
+ */
+export declare function TemplatePicker({ value, onChange, channel, placeholder, emptyText, disabled, }: TemplatePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=template-picker.d.ts.map

package/dist/components/template-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-picker.d.ts","sourceRoot":"","sources":["../../src/components/template-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,0BAA0B,EAGhC,MAAM,+BAA+B,CAAA;AAItC,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,iEAAiE;IACjE,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAA;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,WAAiC,EACjC,SAAiC,EACjC,QAAQ,GACT,EAAE,mBAAmB,2CA6BrB"}

package/dist/components/template-picker.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useNotificationTemplate, useNotificationTemplates, } from "@voyantjs/notifications-react";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import * as React from "react";
+/**
+ * Async-friendly template picker. Searches active templates by name / slug
+ * filtered by the chosen channel and resolves to the template id. The
+ * currently selected template is fetched separately so its label keeps
+ * rendering even after the search list filters it out.
+ */
+export function TemplatePicker({ value, onChange, channel, placeholder = "Search templates…", emptyText = "No templates found.", disabled, }) {
+    const [search, setSearch] = React.useState("");
+    const { data } = useNotificationTemplates({
+        channel,
+        status: "active",
+        search: search || undefined,
+        limit: 20,
+        offset: 0,
+    });
+    const { data: selected } = useNotificationTemplate(value ?? "", { enabled: Boolean(value) });
+    const items = data?.data ?? [];
+    return (_jsx(AsyncCombobox, { value: value, onChange: onChange, items: items, selectedItem: selected ?? null, getKey: (template) => template.id, getLabel: (template) => template.name, getSecondary: (template) => template.slug, onSearchChange: setSearch, placeholder: placeholder, emptyText: emptyText, disabled: disabled, clearable: true }));
+}

package/dist/components/timezone-combobox.d.ts

@@ -0,0 +1,9 @@
+export interface TimezoneComboboxProps {
+    value: string | null | undefined;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+}
+export declare function TimezoneCombobox({ value, onChange, placeholder, emptyText, disabled, }: TimezoneComboboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=timezone-combobox.d.ts.map

package/dist/components/timezone-combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-combobox.d.ts","sourceRoot":"","sources":["../../src/components/timezone-combobox.tsx"],"names":[],"mappings":"AA6DA,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,WAAiC,EACjC,SAAiC,EACjC,QAAQ,GACT,EAAE,qBAAqB,2CAwCvB"}

package/dist/components/timezone-combobox.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import * as React from "react";
+const TIMEZONES = (() => {
+    const intl = Intl;
+    if (typeof intl.supportedValuesOf === "function") {
+        try {
+            return [...intl.supportedValuesOf("timeZone")].sort();
+        }
+        catch {
+            // fall through
+        }
+    }
+    return [
+        "UTC",
+        "Africa/Cairo",
+        "Africa/Johannesburg",
+        "Africa/Lagos",
+        "America/Chicago",
+        "America/Denver",
+        "America/Los_Angeles",
+        "America/Mexico_City",
+        "America/New_York",
+        "America/Sao_Paulo",
+        "Asia/Bangkok",
+        "Asia/Dubai",
+        "Asia/Hong_Kong",
+        "Asia/Jakarta",
+        "Asia/Kolkata",
+        "Asia/Manila",
+        "Asia/Seoul",
+        "Asia/Shanghai",
+        "Asia/Singapore",
+        "Asia/Tokyo",
+        "Australia/Sydney",
+        "Europe/Amsterdam",
+        "Europe/Berlin",
+        "Europe/Bucharest",
+        "Europe/Istanbul",
+        "Europe/Lisbon",
+        "Europe/London",
+        "Europe/Madrid",
+        "Europe/Moscow",
+        "Europe/Paris",
+        "Europe/Rome",
+        "Europe/Vienna",
+        "Pacific/Auckland",
+    ];
+})();
+export function TimezoneCombobox({ value, onChange, placeholder = "Search timezones…", emptyText = "No timezones found.", disabled, }) {
+    const [inputValue, setInputValue] = React.useState(value ?? "");
+    React.useEffect(() => {
+        setInputValue(value ?? "");
+    }, [value]);
+    return (_jsxs(Combobox, { items: TIMEZONES, value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringLabel: (item) => item, itemToStringValue: (item) => item, onInputValueChange: (next) => {
+            setInputValue(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const tz = next ?? null;
+            onChange(tz);
+            setInputValue(tz ?? "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: Boolean(value) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyText }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (tz) => (_jsx(ComboboxItem, { value: tz, children: tz }, tz)) }) })] })] }));
+}

package/dist/i18n/en.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationsUiMessages } from "./messages.js";
+export declare const notificationsUiEn: NotificationsUiMessages;
+//# sourceMappingURL=en.d.ts.map

package/dist/i18n/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAA;AAE5D,eAAO,MAAM,iBAAiB,EAAE,uBA0I/B,CAAA"}