@voyantjs/suppliers-ui 0.33.0 → 0.34.0

package/README.md

@@ -12,6 +12,10 @@ pnpm add @voyantjs/suppliers-ui @voyantjs/suppliers-react @voyantjs/ui @tanstack
 
 All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
 
+Page components render with `p-6` outer padding by default and are intended to
+mount directly into an app route outlet. Pass `className` to extend or override
+that spacing when a shell owns the page chrome.
+
 ## I18n
 
 Components render English by default. To localize them, wrap your UI in

package/dist/components/rate-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rate-dialog.d.ts","sourceRoot":"","sources":["../../src/components/rate-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,YAAY,EAA2B,MAAM,2BAA2B,CAAA;AAwClG,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,eAAe,2CAsJjB"}
+{"version":3,"file":"rate-dialog.d.ts","sourceRoot":"","sources":["../../src/components/rate-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,YAAY,EAA2B,MAAM,2BAA2B,CAAA;AAyClG,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,eAAe,2CAsKjB"}

package/dist/components/rate-dialog.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RATE_UNITS, useSupplierRateMutation } from "@voyantjs/suppliers-react";
 import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
 import { zodResolver } from "@voyantjs/ui/lib/zod-resolver";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
@@ -75,7 +76,13 @@ export function RateDialog({ open, onOpenChange, supplierId, serviceId, rate, on
         onSuccess?.(saved);
         onOpenChange(false);
     }
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(Field, { label: dialog.seasonNameLabel, error: form.formState.errors.name?.message, children: _jsx(Input, { ...form.register("name"), placeholder: dialog.seasonNamePlaceholder }) }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsx(Field, { label: dialog.currencyLabel, error: form.formState.errors.currency?.message, children: _jsx(Input, { ...form.register("currency"), maxLength: 3, placeholder: dialog.currencyPlaceholder, className: "uppercase" }) }), _jsx(Field, { label: dialog.amountLabel, error: form.formState.errors.amount?.message, children: _jsx(Input, { ...form.register("amount"), type: "number", min: "0", step: "0.01", placeholder: dialog.amountPlaceholder }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.unitLabel }), _jsxs(Select, { value: form.watch("unit"), onValueChange: (value) => form.setValue("unit", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: RATE_UNITS.map((unit) => (_jsx(SelectItem, { value: unit.value, children: messages.common.rateUnitLabels[unit.value] }, unit.value))) })] })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: dialog.validFromLabel, children: _jsx(Input, { ...form.register("validFrom"), type: "date" }) }), _jsx(Field, { label: dialog.validToLabel, children: _jsx(Input, { ...form.register("validTo"), type: "date" }) })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: dialog.minPaxLabel, children: _jsx(Input, { ...form.register("minPax"), type: "number", min: "1", placeholder: dialog.minPaxPlaceholder }) }), _jsx(Field, { label: dialog.maxPaxLabel, children: _jsx(Input, { ...form.register("maxPax"), type: "number", min: "1", placeholder: dialog.maxPaxPlaceholder }) })] }), _jsx(Field, { label: dialog.notesLabel, children: _jsx(Textarea, { ...form.register("notes"), placeholder: dialog.notesPlaceholder }) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "animate-spin" }), isEditing ? messages.common.save : messages.common.create] })] })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? dialog.editTitle : dialog.newTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(Field, { label: dialog.seasonNameLabel, error: form.formState.errors.name?.message, children: _jsx(Input, { ...form.register("name"), placeholder: dialog.seasonNamePlaceholder }) }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsx(Field, { label: dialog.currencyLabel, error: form.formState.errors.currency?.message, children: _jsx(Input, { ...form.register("currency"), maxLength: 3, placeholder: dialog.currencyPlaceholder, className: "uppercase" }) }), _jsx(Field, { label: dialog.amountLabel, error: form.formState.errors.amount?.message, children: _jsx(Input, { ...form.register("amount"), type: "number", min: "0", step: "0.01", placeholder: dialog.amountPlaceholder }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: dialog.unitLabel }), _jsxs(Select, { value: form.watch("unit"), onValueChange: (value) => form.setValue("unit", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: RATE_UNITS.map((unit) => (_jsx(SelectItem, { value: unit.value, children: messages.common.rateUnitLabels[unit.value] }, unit.value))) })] })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: dialog.validFromLabel, children: _jsx(DatePicker, { value: form.watch("validFrom") || null, onChange: (nextValue) => form.setValue("validFrom", nextValue ?? "", {
+                                                    shouldDirty: true,
+                                                    shouldValidate: true,
+                                                }) }) }), _jsx(Field, { label: dialog.validToLabel, children: _jsx(DatePicker, { value: form.watch("validTo") || null, onChange: (nextValue) => form.setValue("validTo", nextValue ?? "", {
+                                                    shouldDirty: true,
+                                                    shouldValidate: true,
+                                                }) }) })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: dialog.minPaxLabel, children: _jsx(Input, { ...form.register("minPax"), type: "number", min: "1", placeholder: dialog.minPaxPlaceholder }) }), _jsx(Field, { label: dialog.maxPaxLabel, children: _jsx(Input, { ...form.register("maxPax"), type: "number", min: "1", placeholder: dialog.maxPaxPlaceholder }) })] }), _jsx(Field, { label: dialog.notesLabel, children: _jsx(Textarea, { ...form.register("notes"), placeholder: dialog.notesPlaceholder }) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "animate-spin" }), isEditing ? messages.common.save : messages.common.create] })] })] })] }) }));
 }
 function Field({ label, error, children, }) {
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: label }), children, error && _jsx("p", { className: "text-xs text-destructive", children: error })] }));

package/dist/components/supplier-detail-page.d.ts

@@ -6,11 +6,12 @@ export type SupplierDetailPageProps = {
     onBack?: () => void;
     onDeleted?: () => void;
     confirmAction?: (message: string) => boolean;
+    className?: string;
     renderCustomerPaymentPolicy?: (args: {
         supplier: Supplier;
         updateSupplier: (input: UpdateSupplierInput) => Promise<Supplier>;
         isUpdating: boolean;
     }) => React.ReactNode;
 };
-export declare function SupplierDetailPage({ id, locale, onBack, onDeleted, confirmAction, renderCustomerPaymentPolicy, }: SupplierDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SupplierDetailPage({ id, locale, onBack, onDeleted, confirmAction, className, renderCustomerPaymentPolicy, }: SupplierDetailPageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=supplier-detail-page.d.ts.map

package/dist/components/supplier-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"supplier-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/supplier-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EAIb,KAAK,mBAAmB,EAQzB,MAAM,2BAA2B,CAAA;AAWlC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAA;IAC5C,2BAA2B,CAAC,EAAE,CAAC,IAAI,EAAE;QACnC,QAAQ,EAAE,QAAQ,CAAA;QAClB,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;QACjE,UAAU,EAAE,OAAO,CAAA;KACpB,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,MAAgB,EAChB,MAAM,EACN,SAAS,EACT,aAAkE,EAClE,2BAA2B,GAC5B,EAAE,uBAAuB,2CAmSzB"}
+{"version":3,"file":"supplier-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/supplier-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,QAAQ,EAIb,KAAK,mBAAmB,EAQzB,MAAM,2BAA2B,CAAA;AAYlC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2BAA2B,CAAC,EAAE,CAAC,IAAI,EAAE;QACnC,QAAQ,EAAE,QAAQ,CAAA;QAClB,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;QACjE,UAAU,EAAE,OAAO,CAAA;KACpB,KAAK,KAAK,CAAC,SAAS,CAAA;CACtB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,MAAgB,EAChB,MAAM,EACN,SAAS,EACT,aAAkE,EAClE,SAAS,EACT,2BAA2B,GAC5B,EAAE,uBAAuB,2CA6SzB"}

package/dist/components/supplier-detail-page.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { statusVariant, useSupplier, useSupplierMutation, useSupplierNoteMutation, useSupplierNotes, useSupplierRateMutation, useSupplierServiceMutation, useSupplierServices, } from "@voyantjs/suppliers-react";
 import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Textarea, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
 import { ArrowLeft, Loader2, Pencil, Plus, Trash2 } from "lucide-react";
 import * as React from "react";
 import { useSuppliersUiMessagesOrDefault } from "../i18n/index.js";
@@ -9,7 +10,7 @@ import { RateDialog } from "./rate-dialog.js";
 import { ServiceDialog } from "./service-dialog.js";
 import { SupplierDialog } from "./supplier-dialog.js";
 import { SupplierServiceRow } from "./supplier-service-row.js";
-export function SupplierDetailPage({ id, locale = "en-US", onBack, onDeleted, confirmAction = (message) => globalThis.confirm?.(message) ?? true, renderCustomerPaymentPolicy, }) {
+export function SupplierDetailPage({ id, locale = "en-US", onBack, onDeleted, confirmAction = (message) => globalThis.confirm?.(message) ?? true, className, renderCustomerPaymentPolicy, }) {
     const messages = useSuppliersUiMessagesOrDefault();
     const detail = messages.supplierDetailPage;
     const supplierQuery = useSupplier(id);
@@ -52,16 +53,16 @@ export function SupplierDetailPage({ id, locale = "en-US", onBack, onDeleted, co
         setNoteContent("");
     }
     if (supplierQuery.isPending)
-        return _jsx(SupplierDetailSkeleton, {});
+        return _jsx(SupplierDetailSkeleton, { className: className });
     if (supplierQuery.isError) {
-        return (_jsx(EmptyState, { message: detail.loadFailed, onBack: onBack, backLabel: detail.backToSuppliers }));
+        return (_jsx(EmptyState, { message: detail.loadFailed, onBack: onBack, backLabel: detail.backToSuppliers, className: className }));
     }
     if (!supplier) {
-        return (_jsx(EmptyState, { message: detail.notFound, onBack: onBack, backLabel: detail.backToSuppliers }));
+        return (_jsx(EmptyState, { message: detail.notFound, onBack: onBack, backLabel: detail.backToSuppliers, className: className }));
     }
     const services = servicesQuery.data?.data ?? [];
     const notes = notesQuery.data?.data ?? [];
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [onBack && (_jsxs(Button, { type: "button", variant: "ghost", className: "w-fit px-0", onClick: onBack, children: [_jsx(ArrowLeft, {}), detail.backToSuppliers] })), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: supplier.name }), _jsx(Badge, { variant: statusVariant[supplier.status], children: messages.common.supplierStatusLabels[supplier.status] })] }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: supplier.description })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", onClick: () => setEditOpen(true), children: [_jsx(Pencil, {}), messages.common.edit] }), _jsxs(Button, { type: "button", variant: "destructive", onClick: deleteSupplier, disabled: supplierMutation.remove.isPending, children: [_jsx(Trash2, {}), messages.common.delete] })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsx(Detail, { label: detail.labels.type, children: messages.common.supplierTypeLabels[supplier.type] }), _jsx(Detail, { label: detail.labels.status, children: messages.common.supplierStatusLabels[supplier.status] }), _jsx(Detail, { label: detail.labels.city, children: supplier.city ?? messages.common.none }), _jsx(Detail, { label: detail.labels.country, children: supplier.country ?? messages.common.none }), _jsx(Detail, { label: detail.labels.currency, children: supplier.defaultCurrency ?? messages.common.none }), _jsx(Detail, { label: detail.labels.reservationTimeout, children: supplier.reservationTimeoutMinutes == null
+    return (_jsxs("div", { "data-slot": "supplier-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [onBack && (_jsxs(Button, { type: "button", variant: "ghost", className: "w-fit px-0", onClick: onBack, children: [_jsx(ArrowLeft, {}), detail.backToSuppliers] })), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: supplier.name }), _jsx(Badge, { variant: statusVariant[supplier.status], children: messages.common.supplierStatusLabels[supplier.status] })] }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: supplier.description })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", onClick: () => setEditOpen(true), children: [_jsx(Pencil, {}), messages.common.edit] }), _jsxs(Button, { type: "button", variant: "destructive", onClick: deleteSupplier, disabled: supplierMutation.remove.isPending, children: [_jsx(Trash2, {}), messages.common.delete] })] })] }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.details }) }), _jsxs(CardContent, { className: "grid gap-3 text-sm", children: [_jsx(Detail, { label: detail.labels.type, children: messages.common.supplierTypeLabels[supplier.type] }), _jsx(Detail, { label: detail.labels.status, children: messages.common.supplierStatusLabels[supplier.status] }), _jsx(Detail, { label: detail.labels.city, children: supplier.city ?? messages.common.none }), _jsx(Detail, { label: detail.labels.country, children: supplier.country ?? messages.common.none }), _jsx(Detail, { label: detail.labels.currency, children: supplier.defaultCurrency ?? messages.common.none }), _jsx(Detail, { label: detail.labels.reservationTimeout, children: supplier.reservationTimeoutMinutes == null
                                             ? messages.common.none
                                             : String(supplier.reservationTimeoutMinutes) }), _jsx(Detail, { label: detail.labels.created, children: formatDate(supplier.createdAt, locale) }), _jsx(Detail, { label: detail.labels.updated, children: formatDate(supplier.updatedAt, locale) })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: detail.contact }) }), _jsx(CardContent, { className: "grid gap-3 text-sm", children: !hasContactDetails(supplier) ? (_jsx("p", { className: "text-muted-foreground", children: detail.noContact })) : (_jsxs(_Fragment, { children: [_jsx(Detail, { label: detail.labels.email, children: supplier.email ?? messages.common.none }), _jsx(Detail, { label: detail.labels.phone, children: supplier.phone ?? messages.common.none }), _jsx(Detail, { label: detail.labels.website, children: supplier.website ? (_jsx("a", { href: supplier.website, className: "text-primary underline-offset-4 hover:underline", children: supplier.website })) : (messages.common.none) }), _jsx(Detail, { label: detail.labels.address, children: supplier.address ?? messages.common.none }), _jsx(Detail, { label: detail.labels.contactName, children: supplier.contactName ?? messages.common.none }), _jsx(Detail, { label: detail.labels.contactEmail, children: supplier.contactEmail ?? messages.common.none }), _jsx(Detail, { label: detail.labels.contactPhone, children: supplier.contactPhone ?? messages.common.none })] })) })] })] }), renderCustomerPaymentPolicy?.({
                 supplier,
@@ -81,11 +82,11 @@ export function SupplierDetailPage({ id, locale = "en-US", onBack, onDeleted, co
 function Detail({ label, children }) {
     return (_jsxs("div", { className: "grid grid-cols-[10rem_minmax(0,1fr)] gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0 break-words", children: children })] }));
 }
-function EmptyState({ message, onBack, backLabel, }) {
-    return (_jsxs("div", { className: "flex min-h-80 flex-col items-center justify-center gap-4 text-center", children: [_jsx("p", { className: "text-muted-foreground", children: message }), onBack && (_jsxs(Button, { type: "button", variant: "outline", onClick: onBack, children: [_jsx(ArrowLeft, {}), backLabel] }))] }));
+function EmptyState({ message, onBack, backLabel, className, }) {
+    return (_jsxs("div", { className: cn("flex min-h-80 flex-col items-center justify-center gap-4 p-6 text-center", className), children: [_jsx("p", { className: "text-muted-foreground", children: message }), onBack && (_jsxs(Button, { type: "button", variant: "outline", onClick: onBack, children: [_jsx(ArrowLeft, {}), backLabel] }))] }));
 }
-function SupplierDetailSkeleton() {
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "h-9 w-72 animate-pulse rounded bg-muted" }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx("div", { className: "h-64 animate-pulse rounded-md bg-muted" }), _jsx("div", { className: "h-64 animate-pulse rounded-md bg-muted" })] }), _jsx("div", { className: "h-96 animate-pulse rounded-md bg-muted" })] }));
+function SupplierDetailSkeleton({ className }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-6 p-6", className), children: [_jsx("div", { className: "h-9 w-72 animate-pulse rounded bg-muted" }), _jsxs("div", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx("div", { className: "h-64 animate-pulse rounded-md bg-muted" }), _jsx("div", { className: "h-64 animate-pulse rounded-md bg-muted" })] }), _jsx("div", { className: "h-96 animate-pulse rounded-md bg-muted" })] }));
 }
 function LoadingLine() {
     return _jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-muted" });

package/dist/components/suppliers-page.d.ts

@@ -4,6 +4,7 @@ export type SuppliersPageProps = {
     onSupplierOpen?: (supplier: Supplier) => void;
     onSupplierCreated?: (supplier: Supplier) => void;
     initialSearch?: string;
+    className?: string;
 };
-export declare function SuppliersPage({ pageSize, onSupplierOpen, onSupplierCreated, initialSearch, }?: SuppliersPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SuppliersPage({ pageSize, onSupplierOpen, onSupplierCreated, initialSearch, className, }?: SuppliersPageProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=suppliers-page.d.ts.map

package/dist/components/suppliers-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suppliers-page.d.ts","sourceRoot":"","sources":["../../src/components/suppliers-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,QAAQ,EAKd,MAAM,2BAA2B,CAAA;AAmBlC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAa,EACb,cAAc,EACd,iBAAiB,EACjB,aAAkB,GACnB,GAAE,kBAAuB,2CAoPzB"}
+{"version":3,"file":"suppliers-page.d.ts","sourceRoot":"","sources":["../../src/components/suppliers-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,QAAQ,EAKd,MAAM,2BAA2B,CAAA;AAoBlC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAChD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAa,EACb,cAAc,EACd,iBAAiB,EACjB,aAAkB,EAClB,SAAS,GACV,GAAE,kBAAuB,2CAoPzB"}

package/dist/components/suppliers-page.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SUPPLIER_STATUSES, SUPPLIER_TYPES, statusVariant, useSuppliers, } from "@voyantjs/suppliers-react";
 import { Badge, Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { cn } from "@voyantjs/ui/lib/utils";
 import { ArrowDown, ArrowUp, Plus, Search, SlidersHorizontal } from "lucide-react";
 import * as React from "react";
 import { useSuppliersUiMessagesOrDefault } from "../i18n/index.js";
 import { formatMessage } from "./message-format.js";
 import { SupplierDialog } from "./supplier-dialog.js";
 const ALL = "__all__";
-export function SuppliersPage({ pageSize = 25, onSupplierOpen, onSupplierCreated, initialSearch = "", } = {}) {
+export function SuppliersPage({ pageSize = 25, onSupplierOpen, onSupplierCreated, initialSearch = "", className, } = {}) {
     const messages = useSuppliersUiMessagesOrDefault();
     const [search, setSearch] = React.useState(initialSearch);
     const [type, setType] = React.useState(ALL);
@@ -50,7 +51,7 @@ export function SuppliersPage({ pageSize = 25, onSupplierOpen, onSupplierCreated
         setCountry("");
         setCurrency("");
     }
-    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: messages.suppliersPage.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: messages.suppliersPage.description })] }), _jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, {}), messages.suppliersPage.create] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => {
+    return (_jsxs("div", { "data-slot": "suppliers-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-semibold tracking-tight", children: messages.suppliersPage.title }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: messages.suppliersPage.description })] }), _jsxs(Button, { onClick: () => setDialogOpen(true), children: [_jsx(Plus, {}), messages.suppliersPage.create] })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (event) => {
                                     setSearch(event.target.value);
                                     setPageIndex(0);
                                 }, placeholder: messages.suppliersPage.searchPlaceholder, className: "pl-9" })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_10rem_10rem_auto]", children: [_jsxs(Select, { value: type, onValueChange: (value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/suppliers-ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.0.0",
-    "@voyantjs/suppliers-react": "0.33.0",
-    "@voyantjs/ui": "0.33.0"
+    "@voyantjs/suppliers-react": "0.34.0",
+    "@voyantjs/ui": "0.34.0"
   },
   "dependencies": {
-    "@voyantjs/i18n": "0.33.0"
+    "@voyantjs/i18n": "0.34.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.96.2",
@@ -64,10 +64,10 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/i18n": "0.33.0",
-    "@voyantjs/suppliers-react": "0.33.0",
+    "@voyantjs/i18n": "0.34.0",
+    "@voyantjs/suppliers-react": "0.34.0",
     "@voyantjs/voyant-typescript-config": "0.1.0",
-    "@voyantjs/ui": "0.33.0"
+    "@voyantjs/ui": "0.34.0"
   },
   "files": [
     "dist",