@voyantjs/products-ui 0.16.0 → 0.18.0

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

@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voy
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
 import { ChevronDown, ChevronRight, Copy, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
 import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 import { OptionUnitDialog } from "./option-unit-dialog";
 import { ProductOptionDialog } from "./product-option-dialog";
 const optionStatusVariant = {
@@ -21,7 +22,8 @@ function formatRange(min, max) {
     }
     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, }) {
+export function ProductOptionsSection({ productId, pageSize = 100, title, description, renderOptionDetails, }) {
+    const messages = useProductsUiMessagesOrDefault();
     const [expandedOptionId, setExpandedOptionId] = React.useState(null);
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const [editingOption, setEditingOption] = React.useState(undefined);
@@ -34,10 +36,12 @@ export function ProductOptionsSection({ productId, pageSize = 100, title = "Opti
     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: () => {
+    const resolvedTitle = title ?? messages.productOptionsSection.titles.default;
+    const resolvedDescription = description ?? messages.productOptionsSection.descriptions.default;
+    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: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }), _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: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productOptionsSection.actions.addOption] })] }), _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: messages.productOptionsSection.loadingError.options })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productOptionsSection.empty.options })) : (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: () => {
@@ -52,35 +56,35 @@ export function ProductOptionsSection({ productId, pageSize = 100, title = "Opti
                                 },
                             });
                         }, onDelete: () => {
-                            if (confirm(`Delete option "${option.name}" and all its units?`)) {
+                            if (confirm(messages.productOptionsSection.deleteConfirm.option.replace("{name}", option.name))) {
                                 remove.mutate(option.id);
                             }
-                        }, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
+                        }, messages: messages, 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 OptionRow({ option, expanded, onToggle, onEdit, onDuplicate, onDelete, messages, 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", children: messages.common.optionStatusLabels[option.status] }), option.isDefault ? (_jsx(Badge, { variant: "secondary", children: messages.productOptionsSection.badges.defaultOption })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, "aria-label": messages.productOptionsSection.actions.duplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, "aria-label": messages.productOptionsSection.actions.delete, 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, messages: messages }), children] })) : null] }));
 }
-function UnitsPanel({ optionId }) {
+function UnitsPanel({ optionId, messages, }) {
     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: () => {
+    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: messages.productOptionsSection.titles.units }), _jsx("p", { className: "text-xs text-muted-foreground", children: messages.productOptionsSection.descriptions.units })] }), _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: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 size-3.5", "aria-hidden": "true" }), messages.productOptionsSection.actions.addUnit] })] }), 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: messages.productOptionsSection.loadingError.units })) : units.length === 0 ? (_jsx("p", { className: "rounded-md border bg-background px-3 py-4 text-sm text-muted-foreground", children: messages.productOptionsSection.empty.units })) : (_jsx("div", { className: "rounded-md border bg-background", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.productOptionsSection.columns.unitType }), _jsx(TableHead, { children: messages.productOptionsSection.columns.unitName }), _jsx(TableHead, { children: messages.productOptionsSection.columns.quantity }), _jsx(TableHead, { children: messages.productOptionsSection.columns.age }), _jsx(TableHead, { children: messages.productOptionsSection.columns.occupancy }), _jsx(TableHead, { className: "w-[88px] text-right", children: messages.productOptionsSection.columns.actions })] }) }), _jsx(TableBody, { children: units.map((unit) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: messages.common.optionUnitTypeLabels[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}"?`)) {
+                                                    }, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
+                                                        if (confirm(messages.productOptionsSection.deleteConfirm.unit.replace("{name}", 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: () => {
+                                                    }, "aria-label": messages.productOptionsSection.actions.delete, 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.map

@@ -1 +1 @@
-{"version":3,"file":"product-tag-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAYhE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAyB7F"}
+{"version":3,"file":"product-tag-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAahE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CA8B7F"}

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

@@ -1,12 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 import { ProductTagForm } from "./product-tag-form";
 export function ProductTagDialog({ open, onOpenChange, tag, onSuccess }) {
     const isEdit = Boolean(tag);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-tag-dialog", className: "sm:max-w-[480px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit ? "Edit product tag" : "New product tag" }), _jsx(DialogDescription, { children: isEdit
-                                ? "Update the tag used to label and filter products."
-                                : "Create a reusable tag for filtering and classification." })] }), _jsx(ProductTagForm, { mode: tag ? { kind: "edit", tag } : { kind: "create" }, onSuccess: (saved) => {
+    const messages = useProductsUiMessagesOrDefault();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-tag-dialog", className: "sm:max-w-[480px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit
+                                ? messages.productTagDialog.titles.edit
+                                : messages.productTagDialog.titles.create }), _jsx(DialogDescription, { children: isEdit
+                                ? messages.productTagDialog.descriptions.edit
+                                : messages.productTagDialog.descriptions.create })] }), _jsx(ProductTagForm, { mode: tag ? { kind: "edit", tag } : { kind: "create" }, onSuccess: (saved) => {
                         onSuccess?.(saved);
                         onOpenChange(false);
                     }, onCancel: () => onOpenChange(false) })] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"product-tag-form.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,0BAA0B,CAAA;AAOjC,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,gBAAgB,CAAA;CAAE,CAAA;AAExE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAYD,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA+DhF"}
+{"version":3,"file":"product-tag-form.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,0BAA0B,CAAA;AASjC,KAAK,IAAI,GAAG;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,gBAAgB,CAAA;CAAE,CAAA;AAExE,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAYD,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAkEhF"}

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

@@ -6,6 +6,7 @@ import { Input } from "@voyantjs/ui/components/input";
 import { Label } from "@voyantjs/ui/components/label";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 function initialState(mode) {
     return {
         name: mode.kind === "edit" ? mode.tag.name : "",
@@ -18,6 +19,7 @@ export function ProductTagForm({ mode, onSuccess, onCancel }) {
     const [state, setState] = React.useState(() => initialState(mode));
     const [error, setError] = React.useState(null);
     const { create, update } = useProductTagMutation();
+    const messages = useProductsUiMessagesOrDefault();
     React.useEffect(() => {
         setState(initialState(mode));
         setError(null);
@@ -27,7 +29,7 @@ export function ProductTagForm({ mode, onSuccess, onCancel }) {
         event.preventDefault();
         setError(null);
         if (!state.name.trim()) {
-            setError("Tag name is required.");
+            setError(messages.productTagForm.validation.nameRequired);
             return;
         }
         try {
@@ -37,8 +39,10 @@ export function ProductTagForm({ mode, onSuccess, onCancel }) {
             onSuccess?.(tag);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Failed to save product tag.");
+            setError(err instanceof Error ? err.message : messages.productTagForm.validation.saveFailed);
         }
     };
-    return (_jsxs("form", { "data-slot": "product-tag-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-tag-name", children: "Name" }), _jsx(Input, { id: "product-tag-name", required: true, autoFocus: true, value: state.name, onChange: (event) => setState({ name: event.target.value }), placeholder: "Family Friendly" })] }), 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, 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 === "edit" ? "Save changes" : "Create tag"] })] })] }));
+    return (_jsxs("form", { "data-slot": "product-tag-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-tag-name", children: messages.productTagForm.fields.name }), _jsx(Input, { id: "product-tag-name", required: true, autoFocus: true, value: state.name, onChange: (event) => setState({ name: event.target.value }), placeholder: messages.productTagForm.placeholders.name })] }), 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, children: messages.common.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 === "edit"
+                                ? messages.common.saveChanges
+                                : messages.productTagForm.actions.createTag] })] })] }));
 }

package/dist/components/product-tag-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-tag-list.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-list.tsx"],"names":[],"mappings":"AA6BA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAc,EAAE,GAAE,mBAAwB,2CA6I1E"}
+{"version":3,"file":"product-tag-list.d.ts","sourceRoot":"","sources":["../../src/components/product-tag-list.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAc,EAAE,GAAE,mBAAwB,2CAkJ1E"}

package/dist/components/product-tag-list.js

@@ -7,6 +7,7 @@ import { Input } from "@voyantjs/ui/components/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
 import { Loader2, MoreHorizontal, Pencil, Plus, Search, Trash2 } from "lucide-react";
 import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 import { ProductTagDialog } from "./product-tag-dialog";
 export function ProductTagList({ pageSize = 200 } = {}) {
     const [search, setSearch] = React.useState("");
@@ -19,22 +20,25 @@ export function ProductTagList({ pageSize = 200 } = {}) {
         offset,
     });
     const { remove } = useProductTagMutation();
+    const messages = useProductsUiMessagesOrDefault();
     const tags = data?.data ?? [];
     const total = data?.total ?? 0;
     const page = Math.floor(offset / pageSize) + 1;
     const pageCount = Math.max(1, Math.ceil(total / pageSize));
-    return (_jsxs("div", { "data-slot": "product-tag-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: "Search product tags\u2026", value: search, onChange: (event) => {
+    return (_jsxs("div", { "data-slot": "product-tag-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: messages.productTagList.searchPlaceholder, value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     setOffset(0);
                                 }, className: "pl-9" })] }), _jsxs(Button, { onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), "Add tag"] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Name" }), _jsx(TableHead, { className: "w-[80px] text-right", children: "Actions" })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center text-sm text-destructive", children: "Failed to load product tags." }) })) : tags.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center text-sm text-muted-foreground", children: "No product tags found." }) })) : (tags.map((tag) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: tag.name }), _jsx(TableCell, { className: "text-right", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-hidden hover:bg-accent hover:text-accent-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productTagList.addTag] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.productTagList.columns.name }), _jsx(TableHead, { className: "w-[80px] text-right", children: messages.productTagList.columns.actions })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center text-sm text-destructive", children: messages.productTagList.loadingError }) })) : tags.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, className: "h-24 text-center text-sm text-muted-foreground", children: messages.productTagList.empty }) })) : (tags.map((tag) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: tag.name }), _jsx(TableCell, { className: "text-right", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-hidden hover:bg-accent hover:text-accent-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
                                                                 setEditing(tag);
                                                                 setDialogOpen(true);
-                                                            }, children: [_jsx(Pencil, { className: "size-4" }), "Edit"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => {
-                                                                if (confirm("Delete this product tag?")) {
+                                                            }, children: [_jsx(Pencil, { className: "size-4" }), messages.productTagList.edit] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => {
+                                                                if (confirm(messages.productTagList.deleteConfirm)) {
                                                                     remove.mutate(tag.id);
                                                                 }
-                                                            }, children: [_jsx(Trash2, { className: "size-4" }), "Delete"] })] })] }) })] }, tag.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsxs("span", { children: ["Showing ", tags.length, " of ", total] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: "Previous" }), _jsxs("span", { children: ["Page ", page, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: "Next" })] })] }), _jsx(ProductTagDialog, { open: dialogOpen, onOpenChange: setDialogOpen, tag: editing })] }));
+                                                            }, children: [_jsx(Trash2, { className: "size-4" }), messages.productTagList.delete] })] })] }) })] }, tag.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: messages.productTagList.showingSummary
+                            .replace("{count}", String(tags.length))
+                            .replace("{total}", String(total)) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: messages.common.previous }), _jsxs("span", { children: [messages.common.page, " ", page, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: messages.common.next })] })] }), _jsx(ProductTagDialog, { open: dialogOpen, onOpenChange: setDialogOpen, tag: editing })] }));
 }

package/dist/components/product-type-combobox.d.ts

@@ -4,6 +4,6 @@ type Props = {
     placeholder?: string;
     disabled?: boolean;
 };
-export declare function ProductTypeCombobox({ value, onChange, placeholder, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ProductTypeCombobox({ value, onChange, placeholder, disabled }: Props): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=product-type-combobox.d.ts.map

package/dist/components/product-type-combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-type-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-type-combobox.tsx"],"names":[],"mappings":"AAYA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,WAAqC,EACrC,QAAQ,GACT,EAAE,KAAK,2CAoEP"}
+{"version":3,"file":"product-type-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-type-combobox.tsx"],"names":[],"mappings":"AAcA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAID,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA0EpF"}

package/dist/components/product-type-combobox.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useProductType, useProductTypes } from "@voyantjs/products-react";
 import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
 import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 const PAGE_SIZE = 25;
-export function ProductTypeCombobox({ value, onChange, placeholder = "Search product types…", disabled, }) {
+export function ProductTypeCombobox({ value, onChange, placeholder, disabled }) {
+    const messages = useProductsUiMessagesOrDefault();
     const [search, setSearch] = React.useState("");
     const listQuery = useProductTypes({ active: true, search: search || undefined, limit: PAGE_SIZE });
     const selectedQuery = useProductType(value, { enabled: !!value });
@@ -35,7 +37,9 @@ export function ProductTypeCombobox({ value, onChange, placeholder = "Search pro
             onChange(id);
             const item = id ? itemMap.get(id) : null;
             setInputValue(item ? `${item.name} · ${item.code}` : "");
-        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending ? "Loading…" : "No product types found." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder ?? messages.comboboxes.productType.placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending
+                            ? messages.common.loading
+                            : messages.comboboxes.productType.empty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
                                 const item = itemMap.get(id);
                                 if (!item)
                                     return null;

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

@@ -1 +1 @@
-{"version":3,"file":"product-version-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-version-dialog.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,yBAAyB,2CAqE3B"}
+{"version":3,"file":"product-version-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-version-dialog.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,yBAAyB,2CAqE3B"}

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

@@ -7,17 +7,19 @@ import { Label } from "@voyantjs/ui/components/label";
 import { Textarea } from "@voyantjs/ui/components/textarea";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
+import { useProductsUiMessagesOrDefault } from "../i18n/provider";
 export function ProductVersionDialog({ open, onOpenChange, productId, onSuccess, }) {
     const [notes, setNotes] = React.useState("");
     const [error, setError] = React.useState(null);
     const { create } = useProductVersionMutation();
+    const messages = useProductsUiMessagesOrDefault();
     React.useEffect(() => {
         if (open) {
             setNotes("");
             setError(null);
         }
     }, [open]);
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-version-dialog", className: "sm:max-w-[560px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Create version snapshot" }), _jsx(DialogDescription, { children: "Save the current product state, including itinerary and option structure, as a new version." })] }), _jsxs("form", { className: "flex flex-col gap-4", onSubmit: async (event) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-version-dialog", className: "sm:max-w-[560px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: messages.productVersionDialog.title }), _jsx(DialogDescription, { children: messages.productVersionDialog.description })] }), _jsxs("form", { className: "flex flex-col gap-4", onSubmit: async (event) => {
                         event.preventDefault();
                         setError(null);
                         try {
@@ -31,7 +33,7 @@ export function ProductVersionDialog({ open, onOpenChange, productId, onSuccess,
                         catch (submissionError) {
                             setError(submissionError instanceof Error
                                 ? submissionError.message
-                                : "Failed to create version snapshot.");
+                                : messages.productVersionDialog.validation.saveFailed);
                         }
-                    }, children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-version-notes", children: "Notes" }), _jsx(Textarea, { id: "product-version-notes", value: notes, onChange: (event) => setNotes(event.target.value), placeholder: "What changed in this version?" })] }), 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: create.isPending, children: [create.isPending ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, "Create version"] })] })] })] }) }));
+                    }, children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-version-notes", children: messages.productVersionDialog.fields.notes }), _jsx(Textarea, { id: "product-version-notes", value: notes, onChange: (event) => setNotes(event.target.value), placeholder: messages.productVersionDialog.placeholders.notes })] }), 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: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: create.isPending, children: [create.isPending ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, messages.productVersionDialog.actions.createVersion] })] })] })] }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"product-versions-section.d.ts","sourceRoot":"","sources":["../../src/components/product-versions-section.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAkB,EAClB,WAA8D,GAC/D,EAAE,2BAA2B,2CAoD7B"}
+{"version":3,"file":"product-versions-section.d.ts","sourceRoot":"","sources":["../../src/components/product-versions-section.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,2BAA2B;IAC1C,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,KAAK,EACL,WAAW,GACZ,EAAE,2BAA2B,2CA0D7B"}

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

@@ -5,10 +5,15 @@ import { Button } from "@voyantjs/ui/components/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voyantjs/ui/components/card";
 import { FileText, Loader2, Plus } from "lucide-react";
 import * as React from "react";
+import { useProductsUiI18nOrDefault, useProductsUiMessagesOrDefault } from "../i18n/provider";
 import { ProductVersionDialog } from "./product-version-dialog";
-export function ProductVersionsSection({ productId, title = "Versions", description = "Create and browse immutable product snapshots.", }) {
+export function ProductVersionsSection({ productId, title, description, }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);
     const { data, isPending, isError } = useProductVersions(productId);
     const versions = data?.data ?? [];
-    return (_jsxs(Card, { "data-slot": "product-versions-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, { variant: "outline", onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), "Create version"] })] }), _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 versions." })) : versions.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: "No version snapshots created yet." })) : (versions.map((version) => (_jsxs("div", { className: "flex items-center gap-4 rounded-md border p-3", children: [_jsx(FileText, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1", children: [_jsxs("p", { className: "text-sm font-medium", children: ["Version ", version.versionNumber] }), version.notes ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: version.notes })) : null] }), _jsxs("div", { className: "text-right text-xs text-muted-foreground", children: [_jsx("div", { children: new Date(version.createdAt).toLocaleString() }), _jsx("div", { children: version.authorId })] })] }, version.id)))), _jsx(ProductVersionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId })] })] }));
+    const messages = useProductsUiMessagesOrDefault();
+    const { formatDateTime } = useProductsUiI18nOrDefault();
+    const resolvedTitle = title ?? messages.productVersionsSection.titles.default;
+    const resolvedDescription = description ?? messages.productVersionsSection.descriptions.default;
+    return (_jsxs(Card, { "data-slot": "product-versions-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: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }), _jsxs(Button, { variant: "outline", onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productVersionsSection.actions.createVersion] })] }), _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: messages.productVersionsSection.loadingError })) : versions.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productVersionsSection.empty })) : (versions.map((version) => (_jsxs("div", { className: "flex items-center gap-4 rounded-md border p-3", children: [_jsx(FileText, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1", children: [_jsxs("p", { className: "text-sm font-medium", children: [messages.productVersionsSection.versionLabel, " ", version.versionNumber] }), version.notes ? (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: version.notes })) : null] }), _jsxs("div", { className: "text-right text-xs text-muted-foreground", children: [_jsx("div", { children: formatDateTime(version.createdAt) }), _jsx("div", { children: version.authorId })] })] }, version.id)))), _jsx(ProductVersionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId })] })] }));
 }