@voyantjs/products-ui 0.13.0

package/dist/components/product-itinerary-dialog.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductItineraryMutation } from "@voyantjs/products-react";
+import { Button } from "@voyantjs/voyant-ui/components/button";
+import { Checkbox } from "@voyantjs/voyant-ui/components/checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/voyant-ui/components/dialog";
+import { Input } from "@voyantjs/voyant-ui/components/input";
+import { Label } from "@voyantjs/voyant-ui/components/label";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+export function ProductItineraryDialog({ open, onOpenChange, productId, itinerary, itineraryCount, onSuccess, }) {
+    const isEditing = !!itinerary;
+    const isFirstItinerary = !isEditing && itineraryCount === 0;
+    const defaultLocked = isEditing && itinerary?.isDefault === true;
+    const [name, setName] = React.useState("");
+    const [isDefault, setIsDefault] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const { create, update } = useProductItineraryMutation();
+    const pending = create.isPending || update.isPending;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        setError(null);
+        if (itinerary) {
+            setName(itinerary.name);
+            setIsDefault(itinerary.isDefault);
+        }
+        else {
+            setName("");
+            setIsDefault(isFirstItinerary);
+        }
+    }, [open, itinerary, isFirstItinerary]);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setError(null);
+        const trimmed = name.trim();
+        if (!trimmed) {
+            setError("Name is required");
+            return;
+        }
+        try {
+            if (itinerary) {
+                const patch = {};
+                if (trimmed !== itinerary.name)
+                    patch.name = trimmed;
+                if (isDefault && !itinerary.isDefault)
+                    patch.isDefault = true;
+                if (Object.keys(patch).length > 0) {
+                    await update.mutateAsync({
+                        productId,
+                        itineraryId: itinerary.id,
+                        input: patch,
+                    });
+                }
+                onSuccess?.(itinerary.id);
+            }
+            else {
+                const created = await create.mutateAsync({
+                    productId,
+                    input: {
+                        name: trimmed,
+                        sortOrder: itineraryCount,
+                        isDefault: itineraryCount === 0 ? true : isDefault,
+                    },
+                });
+                onSuccess?.(created.id);
+            }
+            onOpenChange(false);
+        }
+        catch (submissionError) {
+            setError(submissionError instanceof Error ? submissionError.message : "Failed to save itinerary.");
+        }
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-itinerary-dialog", className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing ? "Rename itinerary" : "New itinerary" }), _jsx(DialogDescription, { children: isEditing
+                                ? "Update the itinerary name and default state."
+                                : "Add another itinerary variant for this product." })] }), _jsxs("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-itinerary-name", children: "Name" }), _jsx(Input, { id: "product-itinerary-name", autoFocus: true, value: name, onChange: (event) => setName(event.target.value), placeholder: "e.g. Main itinerary, Family variant" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: "product-itinerary-default", checked: isDefault, disabled: defaultLocked || isFirstItinerary, onCheckedChange: (checked) => setIsDefault(checked === true) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "product-itinerary-default", className: "text-sm font-normal", children: "Set as default itinerary" }), defaultLocked ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "This is the default. Set another itinerary as default to change it." })) : isFirstItinerary ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "The first itinerary is automatically the default." })) : null] })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: pending, children: [pending ? _jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" }) : null, isEditing ? "Save changes" : "Create itinerary"] })] })] })] }) }));
+}

package/dist/components/product-media-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { ProductMediaRecord } from "@voyantjs/products-react";
+export interface ProductMediaDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    dayId?: string;
+    media?: ProductMediaRecord;
+    onSuccess?: (media: ProductMediaRecord) => void;
+}
+export declare function ProductMediaDialog({ open, onOpenChange, productId, dayId, media, onSuccess, }: ProductMediaDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-dialog.d.ts.map

package/dist/components/product-media-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-media-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAYlE,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAChD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,2CAyBzB"}

package/dist/components/product-media-dialog.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/voyant-ui/components/dialog";
+import { ProductMediaForm } from "./product-media-form";
+export function ProductMediaDialog({ open, onOpenChange, productId, dayId, media, onSuccess, }) {
+    const isEdit = Boolean(media);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-media-dialog", className: "sm:max-w-[720px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit ? "Edit media" : "Add media" }), _jsx(DialogDescription, { children: isEdit
+                                ? "Update metadata, sorting, and cover behavior for this media item."
+                                : "Register a product or day-level media item by URL." })] }), _jsx(ProductMediaForm, { mode: media ? { kind: "edit", media } : { kind: "create", productId, dayId }, onSuccess: (savedMedia) => {
+                        onSuccess?.(savedMedia);
+                        onOpenChange(false);
+                    }, onCancel: () => onOpenChange(false) })] }) }));
+}

package/dist/components/product-media-form.d.ts

@@ -0,0 +1,17 @@
+import { type ProductMediaRecord } from "@voyantjs/products-react";
+type Mode = {
+    kind: "create";
+    productId: string;
+    dayId?: string;
+} | {
+    kind: "edit";
+    media: ProductMediaRecord;
+};
+export interface ProductMediaFormProps {
+    mode: Mode;
+    onSuccess?: (media: ProductMediaRecord) => void;
+    onCancel?: () => void;
+}
+export declare function ProductMediaForm({ mode, onSuccess, onCancel }: ProductMediaFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-media-form.d.ts.map

package/dist/components/product-media-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-form.d.ts","sourceRoot":"","sources":["../../src/components/product-media-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,0BAA0B,CAAA;AAkB3F,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAE/C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAgDD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAqLpF"}

package/dist/components/product-media-form.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductMediaMutation } from "@voyantjs/products-react";
+import { Button } from "@voyantjs/voyant-ui/components/button";
+import { Input } from "@voyantjs/voyant-ui/components/input";
+import { Label } from "@voyantjs/voyant-ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/voyant-ui/components/select";
+import { Switch } from "@voyantjs/voyant-ui/components/switch";
+import { Textarea } from "@voyantjs/voyant-ui/components/textarea";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+const MEDIA_TYPES = [
+    { value: "image", label: "Image" },
+    { value: "video", label: "Video" },
+    { value: "document", label: "Document" },
+];
+function initialState(mode) {
+    if (mode.kind === "edit") {
+        return {
+            mediaType: mode.media.mediaType,
+            name: mode.media.name,
+            url: mode.media.url,
+            storageKey: mode.media.storageKey ?? "",
+            mimeType: mode.media.mimeType ?? "",
+            fileSize: mode.media.fileSize == null ? "" : String(mode.media.fileSize),
+            altText: mode.media.altText ?? "",
+            sortOrder: String(mode.media.sortOrder),
+            isCover: mode.media.isCover,
+        };
+    }
+    return {
+        mediaType: "image",
+        name: "",
+        url: "",
+        storageKey: "",
+        mimeType: "",
+        fileSize: "",
+        altText: "",
+        sortOrder: "0",
+        isCover: false,
+    };
+}
+export function ProductMediaForm({ mode, onSuccess, onCancel }) {
+    const [state, setState] = React.useState(() => initialState(mode));
+    const [error, setError] = React.useState(null);
+    const { create, update } = useProductMediaMutation();
+    React.useEffect(() => {
+        setState(initialState(mode));
+        setError(null);
+    }, [mode]);
+    const isSubmitting = create.isPending || update.isPending;
+    const field = (key) => (value) => {
+        setState((previous) => ({ ...previous, [key]: value }));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setError(null);
+        if (!state.name.trim()) {
+            setError("Media name is required.");
+            return;
+        }
+        if (!state.url.trim()) {
+            setError("Media URL is required.");
+            return;
+        }
+        const payload = {
+            mediaType: state.mediaType,
+            name: state.name.trim(),
+            url: state.url.trim(),
+            storageKey: state.storageKey.trim() ? state.storageKey.trim() : null,
+            mimeType: state.mimeType.trim() ? state.mimeType.trim() : null,
+            fileSize: state.fileSize.trim() ? Number.parseInt(state.fileSize, 10) || 0 : null,
+            altText: state.altText.trim() ? state.altText.trim() : null,
+            sortOrder: Number.parseInt(state.sortOrder || "0", 10) || 0,
+            isCover: state.isCover,
+        };
+        try {
+            const media = mode.kind === "create"
+                ? await create.mutateAsync({
+                    productId: mode.productId,
+                    dayId: mode.dayId,
+                    ...payload,
+                })
+                : await update.mutateAsync({ mediaId: mode.media.id, input: payload });
+            onSuccess?.(media);
+        }
+        catch (submissionError) {
+            setError(submissionError instanceof Error ? submissionError.message : "Failed to save media.");
+        }
+    };
+    return (_jsxs("form", { "data-slot": "product-media-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: "Media type" }), _jsxs(Select, { items: MEDIA_TYPES, value: state.mediaType, onValueChange: (value) => field("mediaType")(value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: MEDIA_TYPES.map((type) => (_jsx(SelectItem, { value: type.value, children: type.label }, type.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-name", children: "Name" }), _jsx(Input, { id: "product-media-name", autoFocus: true, required: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: "Hero image" })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-url", children: "URL" }), _jsx(Input, { id: "product-media-url", type: "url", required: true, value: state.url, onChange: (event) => field("url")(event.target.value), placeholder: "https://example.com/media/hero.jpg" })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-storage-key", children: "Storage key" }), _jsx(Input, { id: "product-media-storage-key", value: state.storageKey, onChange: (event) => field("storageKey")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-mime-type", children: "MIME type" }), _jsx(Input, { id: "product-media-mime-type", value: state.mimeType, onChange: (event) => field("mimeType")(event.target.value), placeholder: "image/jpeg" })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-file-size", children: "File size" }), _jsx(Input, { id: "product-media-file-size", type: "number", min: "0", value: state.fileSize, onChange: (event) => field("fileSize")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-sort-order", children: "Sort order" }), _jsx(Input, { id: "product-media-sort-order", type: "number", value: state.sortOrder, onChange: (event) => field("sortOrder")(event.target.value) })] }), _jsxs("div", { className: "flex items-end gap-2 pb-2", children: [_jsx(Switch, { checked: state.isCover, onCheckedChange: (checked) => field("isCover")(checked) }), _jsx(Label, { children: "Cover media" })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-alt-text", children: "Alt text" }), _jsx(Textarea, { id: "product-media-alt-text", value: state.altText, onChange: (event) => field("altText")(event.target.value), placeholder: "Short accessibility description" })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: "Cancel" })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create" ? "Add media" : "Save media"] })] })] }));
+}

package/dist/components/product-media-section.d.ts

@@ -0,0 +1,27 @@
+import { type ProductMediaRecord } from "@voyantjs/products-react";
+export interface ProductMediaUploadResult {
+    url: string;
+    name?: string;
+    mediaType?: ProductMediaRecord["mediaType"];
+    storageKey?: string | null;
+    mimeType?: string | null;
+    fileSize?: number | null;
+    altText?: string | null;
+    sortOrder?: number;
+    isCover?: boolean;
+}
+export type ProductMediaUploadHandler = (file: File, context: {
+    productId: string;
+    dayId?: string;
+}) => Promise<ProductMediaUploadResult>;
+export interface ProductMediaSectionProps {
+    productId: string;
+    dayId?: string;
+    title?: string;
+    description?: string;
+    compact?: boolean;
+    uploadMedia?: ProductMediaUploadHandler;
+    uploadAccept?: string;
+}
+export declare function ProductMediaSection({ productId, dayId, title, description, compact, uploadMedia, uploadAccept, }: ProductMediaSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-media-section.d.ts.map

package/dist/components/product-media-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-section.d.ts","sourceRoot":"","sources":["../../src/components/product-media-section.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAA;AAuBjC,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,yBAAyB,GAAG,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAC3C,OAAO,CAAC,wBAAwB,CAAC,CAAA;AAEtC,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,KAAqC,EACrC,WAE4D,EAC5D,OAAe,EACf,WAAW,EACX,YAAgD,GACjD,EAAE,wBAAwB,2CA6O1B"}

package/dist/components/product-media-section.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProductMedia, useProductMediaMutation, } from "@voyantjs/products-react";
+import { Badge } from "@voyantjs/voyant-ui/components/badge";
+import { Button } from "@voyantjs/voyant-ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyantjs/voyant-ui/components/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/voyant-ui/components/table";
+import { ImageIcon, Loader2, Pencil, Plus, Star, Trash2, Upload } from "lucide-react";
+import * as React from "react";
+import { ProductMediaDialog } from "./product-media-dialog";
+export function ProductMediaSection({ productId, dayId, title = dayId ? "Day media" : "Media", description = dayId
+    ? "Manage media attached to this itinerary day."
+    : "Manage product-level media assets and cover selection.", compact = false, uploadMedia, uploadAccept = "image/*,video/*,application/pdf", }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editingMedia, setEditingMedia] = React.useState();
+    const [isUploading, setIsUploading] = React.useState(false);
+    const [uploadError, setUploadError] = React.useState(null);
+    const fileInputRef = React.useRef(null);
+    const { data, isPending, isError } = useProductMedia(productId, { dayId, limit: 100 });
+    const { create, remove, setCover } = useProductMediaMutation();
+    const media = React.useMemo(() => (data?.data ?? [])
+        .slice()
+        .sort((left, right) => Number(right.isCover) - Number(left.isCover) || left.sortOrder - right.sortOrder), [data?.data]);
+    const header = (_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { className: compact ? "text-base" : undefined, children: title }), _jsx(CardDescription, { children: description })] }));
+    const handleUpload = async (file) => {
+        if (!uploadMedia)
+            return;
+        setUploadError(null);
+        setIsUploading(true);
+        try {
+            const uploaded = await uploadMedia(file, { productId, dayId });
+            const mimeType = uploaded.mimeType?.trim() || file.type || null;
+            const inferredMediaType = uploaded.mediaType ??
+                (mimeType?.startsWith("video/")
+                    ? "video"
+                    : mimeType?.startsWith("image/")
+                        ? "image"
+                        : "document");
+            await create.mutateAsync({
+                productId,
+                dayId,
+                mediaType: inferredMediaType,
+                name: uploaded.name?.trim() || file.name,
+                url: uploaded.url,
+                storageKey: uploaded.storageKey ?? null,
+                mimeType,
+                fileSize: uploaded.fileSize ?? (file.size || null),
+                altText: uploaded.altText ?? null,
+                sortOrder: uploaded.sortOrder ?? media.length,
+                isCover: uploaded.isCover ?? media.length === 0,
+            });
+        }
+        catch (error) {
+            setUploadError(error instanceof Error ? error.message : "Failed to upload media.");
+        }
+        finally {
+            setIsUploading(false);
+        }
+    };
+    const actions = (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [uploadMedia ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: compact ? "outline" : "secondary", disabled: isUploading, onClick: () => fileInputRef.current?.click(), children: [isUploading ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : (_jsx(Upload, { className: "mr-2 size-4", "aria-hidden": "true" })), "Upload"] }), _jsx("input", { ref: fileInputRef, type: "file", accept: uploadAccept, className: "hidden", onChange: (event) => {
+                            const file = event.target.files?.[0];
+                            if (file) {
+                                void handleUpload(file);
+                                event.target.value = "";
+                            }
+                        } })] })) : null, _jsxs(Button, { onClick: () => {
+                    setEditingMedia(undefined);
+                    setDialogOpen(true);
+                }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), "Add media"] })] }));
+    const body = (_jsxs(_Fragment, { children: [uploadError ? _jsx("p", { className: "text-sm text-destructive", children: uploadError }) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: "Failed to load media." })) : media.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No media items configured yet." })) : (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "URL" }), _jsx(TableHead, { children: "Sort" }), _jsx(TableHead, { className: "w-32" })] }) }), _jsx(TableBody, { children: media.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: item.name }), item.altText ? (_jsx("div", { className: "text-xs text-muted-foreground", children: item.altText })) : null] }), item.isCover ? _jsx(Badge, { children: "Cover" }) : null] }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", className: "capitalize", children: item.mediaType }) }), _jsx(TableCell, { className: "max-w-[320px]", children: _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", className: "truncate text-sm text-primary underline-offset-4 hover:underline", children: item.url }) }), _jsx(TableCell, { children: item.sortOrder }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [!item.isCover ? (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setCover.mutate(item.id), children: _jsx(Star, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
+                                                        setEditingMedia(item);
+                                                        setDialogOpen(true);
+                                                    }, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
+                                                        if (confirm("Delete this media item?")) {
+                                                            remove.mutate(item.id);
+                                                        }
+                                                    }, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }) })] }, item.id))) })] }) }))] }));
+    return (_jsxs(_Fragment, { children: [compact ? (_jsxs("div", { "data-slot": "product-media-section", className: "flex flex-col gap-3 rounded-md border bg-background p-3", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), body] })) : (_jsxs(Card, { "data-slot": "product-media-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), _jsx(CardContent, { children: body })] })), _jsx(ProductMediaDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, dayId: dayId, media: editingMedia, onSuccess: () => setEditingMedia(undefined) })] }));
+}

package/dist/components/product-option-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { ProductOptionRecord } from "@voyantjs/products-react";
+export interface ProductOptionDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    option?: ProductOptionRecord;
+    sortOrder?: number;
+    onSuccess?: (option: ProductOptionRecord) => void;
+}
+export declare function ProductOptionDialog({ open, onOpenChange, productId, option, sortOrder, onSuccess, }: ProductOptionDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-dialog.d.ts.map

package/dist/components/product-option-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-option-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAYnE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,wBAAwB,2CAyB1B"}

package/dist/components/product-option-dialog.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/voyant-ui/components/dialog";
+import { ProductOptionForm } from "./product-option-form";
+export function ProductOptionDialog({ open, onOpenChange, productId, option, sortOrder, onSuccess, }) {
+    const isEdit = Boolean(option);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-option-dialog", className: "sm:max-w-[640px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit ? "Edit option" : "New option" }), _jsx(DialogDescription, { children: isEdit
+                                ? "Update option availability, ordering, and default behavior."
+                                : "Create a reusable option under this product." })] }), _jsx(ProductOptionForm, { mode: option ? { kind: "edit", option } : { kind: "create", productId, sortOrder }, onSuccess: (saved) => {
+                        onSuccess?.(saved);
+                        onOpenChange(false);
+                    }, onCancel: () => onOpenChange(false) })] }) }));
+}

package/dist/components/product-option-form.d.ts

@@ -0,0 +1,17 @@
+import { type ProductOptionRecord } from "@voyantjs/products-react";
+type Mode = {
+    kind: "create";
+    productId: string;
+    sortOrder?: number;
+} | {
+    kind: "edit";
+    option: ProductOptionRecord;
+};
+export interface ProductOptionFormProps {
+    mode: Mode;
+    onSuccess?: (option: ProductOptionRecord) => void;
+    onCancel?: () => void;
+}
+export declare function ProductOptionForm({ mode, onSuccess, onCancel }: ProductOptionFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-option-form.d.ts.map

package/dist/components/product-option-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-form.d.ts","sourceRoot":"","sources":["../../src/components/product-option-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,0BAA0B,CAAA;AAiBjC,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,mBAAmB,CAAA;CAAE,CAAA;AAEjD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA+DD,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAsJtF"}

package/dist/components/product-option-form.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductOptionMutation, } from "@voyantjs/products-react";
+import { Button } from "@voyantjs/voyant-ui/components/button";
+import { DatePicker } from "@voyantjs/voyant-ui/components/date-picker";
+import { Input } from "@voyantjs/voyant-ui/components/input";
+import { Label } from "@voyantjs/voyant-ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/voyant-ui/components/select";
+import { Switch } from "@voyantjs/voyant-ui/components/switch";
+import { Textarea } from "@voyantjs/voyant-ui/components/textarea";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+const OPTION_STATUSES = [
+    { value: "draft", label: "Draft" },
+    { value: "active", label: "Active" },
+    { value: "archived", label: "Archived" },
+];
+function initialState(mode) {
+    if (mode.kind === "edit") {
+        return {
+            name: mode.option.name,
+            code: mode.option.code ?? "",
+            description: mode.option.description ?? "",
+            status: mode.option.status,
+            isDefault: mode.option.isDefault,
+            sortOrder: String(mode.option.sortOrder),
+            availableFrom: mode.option.availableFrom ?? "",
+            availableTo: mode.option.availableTo ?? "",
+        };
+    }
+    return {
+        name: "",
+        code: "",
+        description: "",
+        status: "draft",
+        isDefault: false,
+        sortOrder: String(mode.sortOrder ?? 0),
+        availableFrom: "",
+        availableTo: "",
+    };
+}
+function toOptionalString(value) {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
+}
+function toPayload(state) {
+    return {
+        name: state.name.trim(),
+        code: toOptionalString(state.code),
+        description: toOptionalString(state.description),
+        status: state.status,
+        isDefault: state.isDefault,
+        sortOrder: Number.parseInt(state.sortOrder || "0", 10) || 0,
+        availableFrom: toOptionalString(state.availableFrom),
+        availableTo: toOptionalString(state.availableTo),
+    };
+}
+export function ProductOptionForm({ mode, onSuccess, onCancel }) {
+    const [state, setState] = React.useState(() => initialState(mode));
+    const [error, setError] = React.useState(null);
+    const { create, update } = useProductOptionMutation();
+    React.useEffect(() => {
+        setState(initialState(mode));
+        setError(null);
+    }, [mode]);
+    const isSubmitting = create.isPending || update.isPending;
+    const field = (key) => (value) => {
+        setState((prev) => ({ ...prev, [key]: value }));
+    };
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        setError(null);
+        if (!state.name.trim()) {
+            setError("Option name is required.");
+            return;
+        }
+        try {
+            const option = mode.kind === "create"
+                ? await create.mutateAsync({ productId: mode.productId, ...toPayload(state) })
+                : await update.mutateAsync({ id: mode.option.id, input: toPayload(state) });
+            onSuccess?.(option);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to save product option.");
+        }
+    };
+    return (_jsxs("form", { "data-slot": "product-option-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-name", children: "Name" }), _jsx(Input, { id: "product-option-name", required: true, autoFocus: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: "Single room" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-code", children: "Code" }), _jsx(Input, { id: "product-option-code", value: state.code, onChange: (event) => field("code")(event.target.value), placeholder: "single-room" })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-description", children: "Description" }), _jsx(Textarea, { id: "product-option-description", value: state.description, onChange: (event) => field("description")(event.target.value), placeholder: "Optional option description" })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: "Status" }), _jsxs(Select, { value: state.status, onValueChange: (value) => value && field("status")(value), items: OPTION_STATUSES, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: OPTION_STATUSES.map((status) => (_jsx(SelectItem, { value: status.value, children: status.label }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-sort-order", children: "Sort order" }), _jsx(Input, { id: "product-option-sort-order", type: "number", value: state.sortOrder, onChange: (event) => field("sortOrder")(event.target.value) })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-available-from", children: "Available from" }), _jsx(DatePicker, { value: state.availableFrom || null, onChange: (next) => field("availableFrom")(next ?? ""), placeholder: "Select start date", className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-available-to", children: "Available to" }), _jsx(DatePicker, { value: state.availableTo || null, onChange: (next) => field("availableTo")(next ?? ""), placeholder: "Select end date", className: "w-full" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: state.isDefault, onCheckedChange: (checked) => field("isDefault")(checked) }), _jsx(Label, { htmlFor: "product-option-default", children: "Default option" })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: "Cancel" })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create" ? "Create option" : "Save changes"] })] })] }));
+}

package/dist/components/product-options-section.d.ts

@@ -0,0 +1,11 @@
+import { type ProductOptionRecord } from "@voyantjs/products-react";
+import * as React from "react";
+export interface ProductOptionsSectionProps {
+    productId: string;
+    pageSize?: number;
+    title?: string;
+    description?: string;
+    renderOptionDetails?: (option: ProductOptionRecord) => React.ReactNode;
+}
+export declare function ProductOptionsSection({ productId, pageSize, title, description, renderOptionDetails, }: ProductOptionsSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-options-section.d.ts.map

package/dist/components/product-options-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,mBAAmB,EAMzB,MAAM,0BAA0B,CAAA;AAmBjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAA2B,EAC3B,WAAiF,EACjF,mBAAmB,GACpB,EAAE,0BAA0B,2CAqG5B"}

package/dist/components/product-options-section.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDuplicateOptionPricingMutation } from "@voyantjs/pricing-react";
+import { useDuplicateProductOptionMutation, useOptionUnitMutation, useOptionUnits, useProductOptionMutation, useProductOptions, } from "@voyantjs/products-react";
+import { Badge } from "@voyantjs/voyant-ui/components/badge";
+import { Button } from "@voyantjs/voyant-ui/components/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyantjs/voyant-ui/components/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/voyant-ui/components/table";
+import { ChevronDown, ChevronRight, Copy, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { OptionUnitDialog } from "./option-unit-dialog";
+import { ProductOptionDialog } from "./product-option-dialog";
+const optionStatusVariant = {
+    draft: "outline",
+    active: "default",
+    archived: "secondary",
+};
+function formatRange(min, max) {
+    if (min == null && max == null) {
+        return "—";
+    }
+    return `${min ?? 0}–${max ?? "∞"}`;
+}
+export function ProductOptionsSection({ productId, pageSize = 100, title = "Options and units", description = "Manage option variants and the units available under each option.", renderOptionDetails, }) {
+    const [expandedOptionId, setExpandedOptionId] = React.useState(null);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editingOption, setEditingOption] = React.useState(undefined);
+    const { data, isPending, isError } = useProductOptions({
+        productId,
+        limit: pageSize,
+    });
+    const { remove } = useProductOptionMutation();
+    const duplicateOption = useDuplicateProductOptionMutation();
+    const duplicatePricing = useDuplicateOptionPricingMutation();
+    const options = React.useMemo(() => (data?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder), [data?.data]);
+    const nextSortOrder = options.length > 0 ? Math.max(...options.map((option) => option.sortOrder)) + 1 : 0;
+    return (_jsxs(Card, { "data-slot": "product-options-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsxs(Button, { onClick: () => {
+                            setEditingOption(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), "Add option"] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: "Failed to load product options." })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No options configured for this product." })) : (options.map((option) => (_jsx(OptionRow, { option: option, expanded: expandedOptionId === option.id, onToggle: () => setExpandedOptionId((current) => (current === option.id ? null : option.id)), onEdit: () => {
+                            setEditingOption(option);
+                            setDialogOpen(true);
+                        }, onDuplicate: () => {
+                            duplicateOption.mutate({ sourceOptionId: option.id, productId }, {
+                                onSuccess: async ({ option: duplicatedOption, unitIdMap }) => {
+                                    await duplicatePricing.mutateAsync({
+                                        sourceOptionId: option.id,
+                                        targetOptionId: duplicatedOption.id,
+                                        productId,
+                                        unitIdMap,
+                                    });
+                                },
+                            });
+                        }, onDelete: () => {
+                            if (confirm(`Delete option "${option.name}" and all its units?`)) {
+                                remove.mutate(option.id);
+                            }
+                        }, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
+                            setDialogOpen(false);
+                            setEditingOption(undefined);
+                        } })] })] }));
+}
+function OptionRow({ option, expanded, onToggle, onEdit, onDuplicate, onDelete, children, }) {
+    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: option.name }), option.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: option.code })) : null, _jsx(Badge, { variant: optionStatusVariant[option.status] ?? "outline", className: "capitalize", children: option.status }), option.isDefault ? _jsx(Badge, { variant: "secondary", children: "Default" }) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] })] }), expanded ? (_jsxs("div", { className: "flex flex-col gap-4 border-t bg-muted/30 p-3", children: [_jsx(UnitsPanel, { optionId: option.id }), children] })) : null] }));
+}
+function UnitsPanel({ optionId }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editingUnit, setEditingUnit] = React.useState(undefined);
+    const { data, isPending, isError } = useOptionUnits({ optionId, limit: 100 });
+    const { remove } = useOptionUnitMutation();
+    const units = React.useMemo(() => (data?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder), [data?.data]);
+    const nextSortOrder = units.length > 0 ? Math.max(...units.map((unit) => unit.sortOrder)) + 1 : 0;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Units" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Configure the selectable units that belong to this option." })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditingUnit(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 size-3.5", "aria-hidden": "true" }), "Add unit"] })] }), isPending ? (_jsx("div", { className: "flex min-h-20 items-center justify-center rounded-md border bg-background", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: "Failed to load option units." })) : units.length === 0 ? (_jsx("p", { className: "rounded-md border bg-background px-3 py-4 text-sm text-muted-foreground", children: "No units configured for this option." })) : (_jsx("div", { className: "rounded-md border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Quantity" }), _jsx(TableHead, { children: "Age" }), _jsx(TableHead, { children: "Occupancy" }), _jsx(TableHead, { className: "w-[88px] text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: units.map((unit) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: "outline", className: "capitalize", children: unit.unitType }) }), _jsxs(TableCell, { children: [_jsx("div", { className: "font-medium", children: unit.name }), unit.code ? (_jsx("div", { className: "font-mono text-xs text-muted-foreground", children: unit.code })) : null] }), _jsx(TableCell, { className: "font-mono text-xs", children: formatRange(unit.minQuantity, unit.maxQuantity) }), _jsx(TableCell, { className: "font-mono text-xs", children: formatRange(unit.minAge, unit.maxAge) }), _jsx(TableCell, { className: "font-mono text-xs", children: formatRange(unit.occupancyMin, unit.occupancyMax) }), _jsx(TableCell, { className: "text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
+                                                        setEditingUnit(unit);
+                                                        setDialogOpen(true);
+                                                    }, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
+                                                        if (confirm(`Delete unit "${unit.name}"?`)) {
+                                                            remove.mutate(unit.id);
+                                                        }
+                                                    }, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }) })] }, unit.id))) })] }) })), _jsx(OptionUnitDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionId: optionId, unit: editingUnit, sortOrder: nextSortOrder, onSuccess: () => {
+                    setDialogOpen(false);
+                    setEditingUnit(undefined);
+                } })] }));
+}

package/dist/components/product-tag-dialog.d.ts

@@ -0,0 +1,9 @@
+import type { ProductTagRecord } from "@voyantjs/products-react";
+export interface ProductTagDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    tag?: ProductTagRecord;
+    onSuccess?: (tag: ProductTagRecord) => void;
+}
+export declare function ProductTagDialog({ open, onOpenChange, tag, onSuccess }: ProductTagDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-tag-dialog.d.ts.map