@voyantjs/ui 0.6.7

package/dist/components/notification-template-detail-page.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNotificationDeliveries, useNotificationTemplate, useNotificationTemplateAuthoring, useNotificationTemplateTools, } from "@voyantjs/notifications-react";
+import { ArrowLeft, Loader2, Pencil } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Label } from "./label";
+import { NotificationDeliveryDetailDialog } from "./notification-delivery-detail-dialog";
+import { NotificationTemplateDialog } from "./notification-template-dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { Textarea } from "./textarea";
+function parsePath(path) {
+    return path
+        .replace(/\[(\d+)\]/g, ".$1")
+        .split(".")
+        .filter(Boolean);
+}
+function setDeepValue(target, path, value) {
+    const segments = parsePath(path);
+    let current = target;
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        const isLast = index === segments.length - 1;
+        const nextSegment = segments[index + 1];
+        const nextIsIndex = nextSegment ? /^\d+$/.test(nextSegment) : false;
+        if (Array.isArray(current)) {
+            const arrayIndex = Number(segment);
+            if (Number.isNaN(arrayIndex))
+                return;
+            if (isLast) {
+                current[arrayIndex] = value;
+                return;
+            }
+            if (current[arrayIndex] == null) {
+                current[arrayIndex] = nextIsIndex ? [] : {};
+            }
+            current = current[arrayIndex];
+            continue;
+        }
+        if (typeof current !== "object" || current == null)
+            return;
+        const record = current;
+        if (isLast) {
+            record[segment] = value;
+            return;
+        }
+        if (record[segment] == null) {
+            record[segment] = nextIsIndex ? [] : {};
+        }
+        current = record[segment];
+    }
+}
+function buildSamplePayload(variableGroups) {
+    const sample = {};
+    for (const group of variableGroups) {
+        for (const variable of group.variables) {
+            setDeepValue(sample, variable.key, variable.example);
+        }
+    }
+    return sample;
+}
+export function NotificationTemplateDetailPage({ id }) {
+    const [editOpen, setEditOpen] = useState(false);
+    const [previewDataInput, setPreviewDataInput] = useState("");
+    const [selectedDeliveryId, setSelectedDeliveryId] = useState(null);
+    const { data: template, isPending, error, refetch } = useNotificationTemplate(id);
+    const { variableCatalog } = useNotificationTemplateAuthoring();
+    const variableGroups = useMemo(() => variableCatalog.map((group) => ({
+        ...group,
+        variables: group.variables.map((variable) => ({
+            ...variable,
+            example: String(variable.example),
+        })),
+    })), [variableCatalog]);
+    const defaultPreviewData = useMemo(() => JSON.stringify(buildSamplePayload(variableGroups), null, 2), [variableGroups]);
+    const { preview } = useNotificationTemplateTools();
+    const deliveries = useNotificationDeliveries({
+        templateSlug: template?.slug,
+        limit: 20,
+        offset: 0,
+        enabled: Boolean(template?.slug),
+    });
+    const parsePreviewData = () => {
+        try {
+            const parsed = previewDataInput.trim() ? JSON.parse(previewDataInput) : {};
+            if (typeof parsed !== "object" || parsed == null || Array.isArray(parsed)) {
+                throw new Error("Preview data must be a JSON object.");
+            }
+            return parsed;
+        }
+        catch (previewError) {
+            throw new Error(previewError instanceof Error ? previewError.message : "Preview data is invalid JSON.");
+        }
+    };
+    const handlePreview = async () => {
+        if (!template)
+            return;
+        try {
+            const data = parsePreviewData();
+            await preview.mutateAsync({
+                channel: template.channel,
+                provider: null,
+                fromAddress: template.fromAddress,
+                subjectTemplate: template.subjectTemplate,
+                htmlTemplate: template.htmlTemplate,
+                textTemplate: template.textTemplate,
+                data,
+            });
+        }
+        catch (previewError) {
+            toast.error(previewError instanceof Error ? previewError.message : "Preview failed");
+        }
+    };
+    if (isPending) {
+        return (_jsx("div", { className: "flex items-center justify-center py-16", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }));
+    }
+    if (error || !template) {
+        return (_jsxs("div", { className: "flex flex-col gap-4 p-6", children: [_jsxs("a", { href: "/notifications/templates", className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to templates"] }), _jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: error instanceof Error ? error.message : "Notification template not found." })] }));
+    }
+    const renderedPreview = preview.data;
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("a", { href: "/notifications/templates", className: "inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back to templates"] }), _jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: template.name }), _jsx("p", { className: "font-mono text-xs text-muted-foreground", children: template.slug })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: template.channel }), _jsx(Badge, { variant: template.status === "active" ? "default" : "secondary", children: template.status })] })] }), _jsxs(Button, { onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Edit Template"] })] }), _jsxs("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4", children: [_jsx(MetaCard, { label: "Channel", value: template.channel }), _jsx(MetaCard, { label: "From", value: template.fromAddress ?? "Default sender" }), _jsx(MetaCard, { label: "Updated", value: new Date(template.updatedAt).toLocaleString() })] }), _jsxs(Tabs, { defaultValue: "overview", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "overview", children: "Overview" }), _jsx(TabsTrigger, { value: "preview", children: "Preview" }), _jsx(TabsTrigger, { value: "deliveries", children: "Recent deliveries" })] }), _jsx(TabsContent, { value: "overview", className: "mt-4 space-y-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Message structure" }) }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsx(KeyValue, { label: "Subject", value: template.subjectTemplate ?? "—" }), _jsx(KeyValue, { label: "Text fallback", value: template.textTemplate ?? "—" }), _jsx(KeyValue, { label: "Description", value: template.metadata ? JSON.stringify(template.metadata) : "—" })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "HTML body" }) }), _jsx(CardContent, { children: template.htmlTemplate ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
+                                                // biome-ignore lint/security/noDangerouslySetInnerHtml: Notification template HTML is rendered for preview.
+                                                dangerouslySetInnerHTML: { __html: template.htmlTemplate } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: "No HTML body configured." })) })] })] }) }), _jsx(TabsContent, { value: "preview", className: "mt-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Sample data" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(Label, { children: "Render with custom JSON" }), _jsx(Textarea, { value: previewDataInput || defaultPreviewData, onChange: (event) => setPreviewDataInput(event.target.value), rows: 16, className: "font-mono text-xs" }), _jsxs(Button, { type: "button", variant: "outline", onClick: handlePreview, disabled: preview.isPending, children: [preview.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, "Render Preview"] })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Rendered output" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx(KeyValue, { label: "Subject", value: renderedPreview?.subject ?? "Not rendered yet." }), template.channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "HTML body" }), renderedPreview?.html ? (_jsx("div", { className: "prose prose-sm max-w-none rounded-md border bg-background px-4 py-4 dark:prose-invert", 
+                                                                    // biome-ignore lint/security/noDangerouslySetInnerHtml: Rendered preview HTML is generated server-side for preview.
+                                                                    dangerouslySetInnerHTML: { __html: renderedPreview.html } })) : (_jsx("div", { className: "rounded-md border bg-muted/20 px-4 py-3 text-sm text-muted-foreground", children: "No rendered HTML yet." }))] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Text fallback" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? "No rendered text yet." })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "SMS body" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: renderedPreview?.text ?? "No rendered text yet." })] }))] })] })] }) }), _jsx(TabsContent, { value: "deliveries", className: "mt-4", children: _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Recent deliveries" }) }), _jsx(CardContent, { children: deliveries.isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : deliveries.data?.data && deliveries.data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Recipient" }), _jsx("th", { className: "px-4 py-3", children: "Provider" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Created" }), _jsx("th", { className: "px-4 py-3 text-right", children: "View" })] }) }), _jsx("tbody", { children: deliveries.data.data.map((delivery) => (_jsxs("tr", { className: "border-t", children: [_jsxs("td", { className: "px-4 py-3", children: [_jsx("div", { children: delivery.toAddress }), delivery.subject ? (_jsx("div", { className: "text-xs text-muted-foreground", children: delivery.subject })) : null] }), _jsx("td", { className: "px-4 py-3", children: delivery.provider }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: delivery.status === "sent"
+                                                                        ? "default"
+                                                                        : delivery.status === "failed"
+                                                                            ? "destructive"
+                                                                            : "secondary", children: delivery.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(delivery.createdAt).toLocaleString() }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSelectedDeliveryId(delivery.id), children: "Inspect" }) })] }, delivery.id))) })] }) })) : (_jsx("div", { className: "rounded-md border border-dashed px-4 py-8 text-center text-sm text-muted-foreground", children: "No deliveries recorded for this template yet." })) })] }) })] }), _jsx(NotificationTemplateDialog, { open: editOpen, onOpenChange: setEditOpen, template: template, onSuccess: () => {
+                    setEditOpen(false);
+                    void refetch();
+                } }), _jsx(NotificationDeliveryDetailDialog, { deliveryId: selectedDeliveryId, open: Boolean(selectedDeliveryId), onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedDeliveryId(null);
+                } })] }));
+}
+function MetaCard({ label, value }) {
+    return (_jsxs("div", { className: "rounded-md border p-4", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "mt-2 text-sm", children: value })] }));
+}
+function KeyValue({ label, value }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: label }), _jsx("div", { className: "break-words text-sm", children: value })] }));
+}

package/dist/components/notification-template-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type NotificationTemplateRecord } from "@voyantjs/notifications-react";
+type NotificationTemplateDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    template?: NotificationTemplateRecord;
+    onSuccess: () => void;
+};
+export declare function NotificationTemplateDialog({ open, onOpenChange, template, onSuccess, }: NotificationTemplateDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=notification-template-dialog.d.ts.map

package/dist/components/notification-template-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-template-dialog.d.ts","sourceRoot":"","sources":["../../src/components/notification-template-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAIhC,MAAM,+BAA+B,CAAA;AAkDtC,KAAK,+BAA+B,GAAG;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,0BAA0B,CAAA;IACrC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAuED,wBAAgB,0BAA0B,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,SAAS,GACV,EAAE,+BAA+B,2CAghBjC"}

package/dist/components/notification-template-dialog.js

@@ -0,0 +1,296 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useNotificationTemplateAuthoring, useNotificationTemplateMutation, useNotificationTemplateTools, } from "@voyantjs/notifications-react";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod/v4";
+import { zodResolver } from "../lib/zod-resolver";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "./index";
+import { Input } from "./input";
+import { Label } from "./label";
+import { NotificationTemplateAuthoringHelp } from "./notification-template-authoring-help";
+import { RichTextEditor } from "./rich-text-editor";
+import { insertPlainText, insertVariableToken } from "./rich-text-variable-extension";
+import { ScrollArea } from "./scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+import { Switch } from "./switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { Textarea } from "./textarea";
+const CHANNEL_ITEMS = [
+    { label: "Email", value: "email" },
+    { label: "SMS", value: "sms" },
+];
+const STATUS_ITEMS = [
+    { label: "Draft", value: "draft" },
+    { label: "Active", value: "active" },
+    { label: "Archived", value: "archived" },
+];
+const templateFormSchema = z.object({
+    name: z.string().min(1, "Name is required"),
+    slug: z
+        .string()
+        .min(1, "Slug is required")
+        .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, "Must be kebab-case"),
+    channel: z.enum(["email", "sms"]),
+    status: z.enum(["draft", "active", "archived"]).default("draft"),
+    subjectTemplate: z.string().optional(),
+    htmlTemplate: z.string().optional(),
+    textTemplate: z.string().optional(),
+    fromAddress: z.string().optional(),
+    active: z.boolean(),
+});
+function parsePath(path) {
+    return path
+        .replace(/\[(\d+)\]/g, ".$1")
+        .split(".")
+        .filter(Boolean);
+}
+function setDeepValue(target, path, value) {
+    const segments = parsePath(path);
+    let current = target;
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        const isLast = index === segments.length - 1;
+        const nextSegment = segments[index + 1];
+        const nextIsIndex = nextSegment ? /^\d+$/.test(nextSegment) : false;
+        if (Array.isArray(current)) {
+            const arrayIndex = Number(segment);
+            if (Number.isNaN(arrayIndex))
+                return;
+            if (isLast) {
+                current[arrayIndex] = value;
+                return;
+            }
+            if (current[arrayIndex] == null) {
+                current[arrayIndex] = nextIsIndex ? [] : {};
+            }
+            current = current[arrayIndex];
+            continue;
+        }
+        if (typeof current !== "object" || current == null)
+            return;
+        const record = current;
+        if (isLast) {
+            record[segment] = value;
+            return;
+        }
+        if (record[segment] == null) {
+            record[segment] = nextIsIndex ? [] : {};
+        }
+        current = record[segment];
+    }
+}
+function buildSamplePayload(variableGroups) {
+    const sample = {};
+    for (const group of variableGroups) {
+        for (const variable of group.variables) {
+            setDeepValue(sample, variable.key, variable.example);
+        }
+    }
+    return sample;
+}
+function appendTemplateValue(current, addition) {
+    if (!current?.trim())
+        return addition;
+    return `${current}${current.endsWith("\n") ? "" : "\n"}${addition}`;
+}
+function variableReference(key) {
+    return `{{ ${key} }}`;
+}
+export function NotificationTemplateDialog({ open, onOpenChange, template, onSuccess, }) {
+    const isEditing = Boolean(template);
+    const { create, update } = useNotificationTemplateMutation();
+    const { preview, testSend } = useNotificationTemplateTools();
+    const { variableCatalog, liquidSnippets } = useNotificationTemplateAuthoring();
+    const [editorInstance, setEditorInstance] = useState(null);
+    const [insertionTarget, setInsertionTarget] = useState("body");
+    const [previewDataInput, setPreviewDataInput] = useState("{}");
+    const [testRecipient, setTestRecipient] = useState("");
+    const variableGroups = useMemo(() => variableCatalog.map((group) => ({
+        ...group,
+        variables: group.variables.map((variable) => ({
+            ...variable,
+            example: String(variable.example),
+        })),
+    })), [variableCatalog]);
+    const defaultPreviewData = useMemo(() => JSON.stringify(buildSamplePayload(variableGroups), null, 2), [variableGroups]);
+    const form = useForm({
+        resolver: zodResolver(templateFormSchema),
+        defaultValues: {
+            name: "",
+            slug: "",
+            channel: "email",
+            status: "draft",
+            subjectTemplate: "",
+            htmlTemplate: "",
+            textTemplate: "",
+            fromAddress: "",
+            active: true,
+        },
+    });
+    const channel = form.watch("channel");
+    useEffect(() => {
+        if (open && template) {
+            form.reset({
+                name: template.name,
+                slug: template.slug,
+                channel: template.channel,
+                status: template.status,
+                subjectTemplate: template.subjectTemplate ?? "",
+                htmlTemplate: template.htmlTemplate ?? "",
+                textTemplate: template.textTemplate ?? "",
+                fromAddress: template.fromAddress ?? "",
+                active: template.status === "active",
+            });
+            return;
+        }
+        if (open) {
+            form.reset();
+        }
+    }, [open, template, form]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setInsertionTarget((current) => channel === "sms" ? "text" : current === "text" ? "body" : current);
+    }, [channel, open]);
+    useEffect(() => {
+        if (!open)
+            return;
+        setPreviewDataInput(defaultPreviewData);
+        setTestRecipient("");
+        preview.reset();
+        testSend.reset();
+    }, [defaultPreviewData, open, preview, testSend]);
+    const onSubmit = async (values) => {
+        const payload = {
+            name: values.name,
+            slug: values.slug,
+            channel: values.channel,
+            provider: null,
+            status: values.active ? (values.status === "archived" ? "active" : values.status) : "draft",
+            subjectTemplate: values.channel === "email" ? values.subjectTemplate || null : null,
+            htmlTemplate: values.channel === "email" ? values.htmlTemplate || null : null,
+            textTemplate: values.textTemplate || null,
+            fromAddress: values.channel === "email" ? values.fromAddress || null : null,
+            isSystem: template?.isSystem ?? false,
+            metadata: template?.metadata ?? null,
+        };
+        if (isEditing && template) {
+            await update.mutateAsync({ id: template.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    const isPending = create.isPending || update.isPending;
+    const parsePreviewData = () => {
+        try {
+            const parsed = previewDataInput.trim() ? JSON.parse(previewDataInput) : {};
+            if (typeof parsed !== "object" || parsed == null || Array.isArray(parsed)) {
+                throw new Error("Preview data must be a JSON object.");
+            }
+            return parsed;
+        }
+        catch (error) {
+            throw new Error(error instanceof Error ? error.message : "Preview data is invalid JSON.");
+        }
+    };
+    const insertIntoTarget = (content, kind) => {
+        if (insertionTarget === "body" && channel === "email" && editorInstance) {
+            if (kind === "variable") {
+                insertVariableToken(editorInstance, content);
+            }
+            else {
+                insertPlainText(editorInstance, content);
+            }
+            return;
+        }
+        const fieldName = insertionTarget === "subject" ? "subjectTemplate" : "textTemplate";
+        const current = form.getValues(fieldName) ?? "";
+        const nextValue = kind === "variable"
+            ? `${current}${current ? " " : ""}${variableReference(content)}`
+            : appendTemplateValue(current, content);
+        form.setValue(fieldName, nextValue, {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+        });
+    };
+    const handlePreview = async () => {
+        try {
+            const data = parsePreviewData();
+            await preview.mutateAsync({
+                channel,
+                provider: null,
+                fromAddress: channel === "email" ? form.getValues("fromAddress") || null : null,
+                subjectTemplate: channel === "email" ? form.getValues("subjectTemplate") || null : null,
+                htmlTemplate: channel === "email" ? form.getValues("htmlTemplate") || null : null,
+                textTemplate: form.getValues("textTemplate") || null,
+                data,
+            });
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : "Preview failed");
+        }
+    };
+    const handleTestSend = async () => {
+        if (!testRecipient.trim()) {
+            toast.error(channel === "email" ? "Recipient email is required." : "Recipient phone is required.");
+            return;
+        }
+        try {
+            const data = parsePreviewData();
+            await testSend.mutateAsync({
+                to: testRecipient.trim(),
+                channel,
+                provider: null,
+                from: channel === "email" ? form.getValues("fromAddress") || null : null,
+                subject: channel === "email" ? form.getValues("subjectTemplate") || null : null,
+                html: channel === "email" ? form.getValues("htmlTemplate") || null : null,
+                text: form.getValues("textTemplate") || null,
+                data,
+                targetType: "other",
+            });
+            toast.success(`Test ${channel === "email" ? "email" : "SMS"} queued successfully.`);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : "Test send failed");
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { size: "xl", className: "h-[calc(100vh-2rem)]", children: _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "grid min-h-0 flex-1 grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? "Edit Notification Template" : "New Notification Template" }) }), _jsx(ScrollArea, { className: "min-h-0 flex-1", children: _jsxs("div", { className: "grid gap-4 py-4 pr-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Booking confirmation" }), form.formState.errors.name ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Slug" }), _jsx(Input, { ...form.register("slug"), placeholder: "booking-confirmation" }), form.formState.errors.slug ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.slug.message })) : null] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Channel" }), _jsxs(Select, { items: CHANNEL_ITEMS, value: form.watch("channel"), onValueChange: (value) => {
+                                                        if (!value)
+                                                            return;
+                                                        form.setValue("channel", value);
+                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: CHANNEL_ITEMS.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { items: STATUS_ITEMS, value: form.watch("status"), onValueChange: (value) => {
+                                                        if (!value)
+                                                            return;
+                                                        form.setValue("status", value);
+                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: STATUS_ITEMS.map((item) => (_jsx(SelectItem, { value: item.value, children: item.label }, item.value))) })] })] })] }), channel === "email" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "From address" }), _jsx(Input, { ...form.register("fromAddress"), placeholder: "reservations@example.com" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Subject" }), _jsx(Input, { ...form.register("subjectTemplate"), placeholder: "Your booking {{ booking.reference }}" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "HTML body" }), _jsx(RichTextEditor, { value: form.watch("htmlTemplate") ?? "", onChange: (value) => form.setValue("htmlTemplate", value, {
+                                                        shouldDirty: true,
+                                                        shouldTouch: true,
+                                                        shouldValidate: true,
+                                                    }), placeholder: "Compose the email body using Liquid variables...", enableVariables: true, onEditorReady: setEditorInstance })] })] })) : null, _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "sms" ? "SMS body" : "Plain-text fallback" }), _jsx(Textarea, { ...form.register("textTemplate"), placeholder: channel === "sms"
+                                                ? 'Hi {{ traveler.firstName | default: "traveler" }}, your booking is confirmed.'
+                                                : "Optional plain-text version for email clients.", rows: 6, className: "font-mono text-xs" })] }), _jsxs(Tabs, { defaultValue: "authoring", children: [_jsxs(TabsList, { className: "w-full", children: [_jsx(TabsTrigger, { value: "authoring", children: "Authoring" }), _jsx(TabsTrigger, { value: "preview", children: "Preview & Test" })] }), _jsxs(TabsContent, { value: "authoring", className: "mt-4 space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-[180px_1fr] sm:items-center", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: "Insert into" }), _jsxs(Select, { items: [
+                                                                        ...(channel === "email"
+                                                                            ? [
+                                                                                { label: "Subject", value: "subject" },
+                                                                                { label: "HTML body", value: "body" },
+                                                                            ]
+                                                                            : []),
+                                                                        {
+                                                                            label: channel === "sms" ? "SMS body" : "Plain-text fallback",
+                                                                            value: "text",
+                                                                        },
+                                                                    ], value: insertionTarget, onValueChange: (value) => {
+                                                                        if (!value)
+                                                                            return;
+                                                                        setInsertionTarget(value);
+                                                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [channel === "email" ? (_jsx(SelectItem, { value: "subject", children: "Subject" })) : null, channel === "email" ? (_jsx(SelectItem, { value: "body", children: "HTML body" })) : null, _jsx(SelectItem, { value: "text", children: channel === "sms" ? "SMS body" : "Plain-text fallback" })] })] })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Variables insert as Liquid tags in text fields and as inline chips in the rich-text HTML body." })] }), _jsx(NotificationTemplateAuthoringHelp, { variableGroups: variableGroups, snippets: liquidSnippets, onInsertVariable: (variable) => insertIntoTarget(variable.key, "variable"), onInsertSnippet: (snippet) => insertIntoTarget(snippet.code, "snippet") })] }), _jsx(TabsContent, { value: "preview", className: "mt-4 space-y-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]", children: [_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Preview data (JSON)" }), _jsx(Textarea, { value: previewDataInput, onChange: (event) => setPreviewDataInput(event.target.value), rows: 14, className: "font-mono text-xs", placeholder: '{"booking":{"reference":"BKG-2026-00125"}}' }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Use sample JSON to preview Liquid rendering and send a safe test message." })] }), _jsx("div", { className: "flex gap-2", children: _jsxs(Button, { type: "button", variant: "outline", onClick: handlePreview, disabled: preview.isPending, children: [preview.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : null, "Refresh Preview"] }) }), _jsxs("div", { className: "space-y-3 rounded-md border p-4", children: [_jsx("div", { className: "text-sm font-medium", children: "Rendered preview" }), channel === "email" ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Subject" }), _jsx("div", { className: "rounded-md border bg-muted/20 px-3 py-2 text-sm", children: preview.data?.subject || "No subject rendered yet." })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "HTML body" }), _jsx("div", { className: "rounded-md border bg-background", children: preview.data?.html ? (_jsx("div", { className: "prose prose-sm max-w-none px-3 py-3 dark:prose-invert", 
+                                                                                            // biome-ignore lint/security/noDangerouslySetInnerHtml: Preview HTML is generated server-side for template preview.
+                                                                                            dangerouslySetInnerHTML: { __html: preview.data.html } })) : (_jsx("div", { className: "px-3 py-3 text-sm text-muted-foreground", children: "No HTML content rendered yet." })) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Plain-text fallback" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || "No plain-text content rendered yet." })] })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "SMS body" }), _jsx("pre", { className: "whitespace-pre-wrap rounded-md border bg-muted/20 px-3 py-3 text-xs", children: preview.data?.text || "No SMS content rendered yet." })] }))] })] }), _jsxs("div", { className: "space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-sm font-medium", children: "Test send" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Sends the current unsaved content through the configured provider path." })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: channel === "email" ? "Recipient email" : "Recipient phone" }), _jsx(Input, { value: testRecipient, onChange: (event) => setTestRecipient(event.target.value), placeholder: channel === "email" ? "qa@example.com" : "+40 721 111 222" })] }), _jsxs("div", { className: "space-y-1 text-xs text-muted-foreground", children: [_jsx("div", { children: "Provider is selected automatically by the app runtime." }), channel === "email" ? (_jsxs("div", { children: ["From: ", form.watch("fromAddress") || "Default sender"] })) : null] }), _jsxs(Button, { type: "button", className: "w-full", onClick: handleTestSend, disabled: testSend.isPending, children: [testSend.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : null, "Send Test ", channel === "email" ? "Email" : "SMS"] }), testSend.data ? (_jsxs("div", { className: "rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-200", children: ["Delivery queued with status ", _jsx("strong", { children: testSend.data.status }), testSend.data.provider ? ` via ${testSend.data.provider}` : "", "."] })) : null] })] }) })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (checked) => form.setValue("active", checked) }), _jsx(Label, { className: "cursor-pointer", children: "Mark template active after saving" })] })] }) }), _jsxs(DialogFooter, { className: "mt-0", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: isPending, children: [isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? "Save Changes" : "Create Template"] })] })] }) }) }));
+}

package/dist/components/notification-templates-page.d.ts

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

package/dist/components/notification-templates-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-templates-page.d.ts","sourceRoot":"","sources":["../../src/components/notification-templates-page.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,yBAAyB,4CAgJxC"}

package/dist/components/notification-templates-page.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useNotificationTemplates, } from "@voyantjs/notifications-react";
+import { Loader2, Pencil, Plus, Search } from "lucide-react";
+import { useState } from "react";
+import { Badge } from "./badge";
+import { Button } from "./button";
+import { Input } from "./input";
+import { NotificationTemplateDialog } from "./notification-template-dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select";
+export function NotificationTemplatesPage() {
+    const [search, setSearch] = useState("");
+    const [channel, setChannel] = useState("all");
+    const [status, setStatus] = useState("all");
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    const { data, isPending, refetch } = useNotificationTemplates({
+        search,
+        channel: channel === "all" ? undefined : channel,
+        status: status === "all" ? undefined : status,
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: "Notification Templates" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Manage email and SMS templates rendered with Liquid." })] }), _jsxs(Button, { onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "New Template"] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "relative max-w-sm flex-1", children: [_jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Search templates...", value: search, onChange: (event) => setSearch(event.target.value), className: "pl-9" })] }), _jsxs(Select, { value: channel, onValueChange: (value) => setChannel(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Channel" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All channels" }), _jsx(SelectItem, { value: "email", children: "Email" }), _jsx(SelectItem, { value: "sms", children: "SMS" })] })] }), _jsxs(Select, { value: status, onValueChange: (value) => setStatus(value ?? "all"), children: [_jsx(SelectTrigger, { className: "w-[140px]", children: _jsx(SelectValue, { placeholder: "Status" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "all", children: "All statuses" }), _jsx(SelectItem, { value: "draft", children: "Draft" }), _jsx(SelectItem, { value: "active", children: "Active" }), _jsx(SelectItem, { value: "archived", children: "Archived" })] })] })] }), isPending ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })) : null, !isPending && (!data?.data || data.data.length === 0) ? (_jsx("div", { className: "rounded-md border border-dashed p-8 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No notification templates yet. Create one to start sending branded emails and SMS messages." }) })) : null, !isPending && data?.data && data.data.length > 0 ? (_jsx("div", { className: "rounded-md border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-left text-xs uppercase tracking-wide text-muted-foreground", children: _jsxs("tr", { children: [_jsx("th", { className: "px-4 py-3", children: "Template" }), _jsx("th", { className: "px-4 py-3", children: "Channel" }), _jsx("th", { className: "px-4 py-3", children: "Status" }), _jsx("th", { className: "px-4 py-3", children: "Updated" }), _jsx("th", { className: "px-4 py-3 text-right", children: "Actions" })] }) }), _jsx("tbody", { children: data.data.map((template) => (_jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "px-4 py-3", children: _jsxs("a", { href: `/notifications/templates/${template.id}`, className: "block rounded-sm outline-none transition-colors hover:text-primary focus-visible:text-primary", children: [_jsx("div", { className: "font-medium", children: template.name }), _jsx("div", { className: "font-mono text-xs text-muted-foreground", children: template.slug })] }) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: "outline", children: template.channel }) }), _jsx("td", { className: "px-4 py-3", children: _jsx(Badge, { variant: template.status === "active" ? "default" : "secondary", children: template.status }) }), _jsx("td", { className: "px-4 py-3", children: new Date(template.updatedAt).toLocaleString() }), _jsx("td", { className: "px-4 py-3 text-right", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => {
+                                                setEditing(template);
+                                                setDialogOpen(true);
+                                            }, children: _jsx(Pencil, { className: "h-4 w-4" }) }) })] }, template.id))) })] }) })) : null, _jsx(NotificationTemplateDialog, { open: dialogOpen, onOpenChange: setDialogOpen, template: editing, onSuccess: () => {
+                    setDialogOpen(false);
+                    setEditing(undefined);
+                    void refetch();
+                } })] }));
+}

package/dist/components/overview-metric.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+type IconComponent = React.ComponentType<{
+    className?: string;
+}>;
+declare function OverviewMetric({ title, value, description, icon: Icon, }: {
+    title: string;
+    value: string | number;
+    description: string;
+    icon: IconComponent;
+}): import("react/jsx-runtime").JSX.Element;
+export { OverviewMetric };
+//# sourceMappingURL=overview-metric.d.ts.map

package/dist/components/overview-metric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overview-metric.d.ts","sourceRoot":"","sources":["../../src/components/overview-metric.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAGnC,KAAK,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAEhE,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EAAE,IAAI,GACX,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,aAAa,CAAA;CACpB,2CAaA;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/overview-metric.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+function OverviewMetric({ title, value, description, icon: Icon, }) {
+    return (_jsxs(Card, { size: "sm", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between gap-3", children: [_jsx(CardTitle, { className: "text-sm text-muted-foreground", children: title }), _jsx(Icon, { className: "h-4 w-4 text-muted-foreground" })] }), _jsxs(CardContent, { className: "space-y-1", children: [_jsx("div", { className: "text-2xl font-semibold tracking-tight", children: value }), _jsx("p", { className: "text-xs text-muted-foreground", children: description })] })] }));
+}
+export { OverviewMetric };

package/dist/components/pagination.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import { Button } from "./button";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, text, ...props }: React.ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/components/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASvE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ7E;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE3B,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAiB5F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAYjE;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,2CAYjE;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAehF;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAA"}

package/dist/components/pagination.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex items-center gap-1", className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+    return (_jsx(Button, { variant: isActive ? "outline" : "ghost", size: size, className: cn(className), nativeButton: false, render: _jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, ...props }) }));
+}
+function PaginationPrevious({ className, text = "Previous", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("pl-2!", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: text })] }));
+}
+function PaginationNext({ className, text = "Next", ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("pr-2!", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRightIcon, { "data-icon": "inline-end" })] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/components/popover.d.ts

@@ -0,0 +1,10 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import type * as React from "react";
+declare function Popover({ ...props }: PopoverPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react/jsx-runtime").JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };
+//# sourceMappingURL=popover.d.ts.map