@voyantjs/sellability-ui 0.13.0

package/README.md

@@ -0,0 +1,13 @@
+# @voyantjs/sellability-ui
+
+Importable React UI components for Voyant sellability. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/sellability-ui @voyantjs/sellability-react @voyantjs/voyant-ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/voyant-ui` provides the design-system primitives. `@voyantjs/sellability-react` provides the data-layer hooks. Both are required peers.
+
+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.

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"channel-combobox.d.ts","sourceRoot":"","sources":["../../src/components/channel-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,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAA+B,EAC/B,QAAQ,GACT,EAAE,KAAK,2CAwEP"}

package/dist/components/channel-combobox.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChannel, useChannels } from "@voyantjs/distribution-react";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
+import * as React from "react";
+const PAGE_SIZE = 100;
+export function ChannelCombobox({ value, onChange, placeholder = "Select channel…", disabled, }) {
+    const [search, setSearch] = React.useState("");
+    const listQuery = useChannels({ limit: PAGE_SIZE });
+    const selectedQuery = useChannel(value ?? undefined, { enabled: !!value });
+    const items = React.useMemo(() => {
+        const map = new Map();
+        for (const item of listQuery.data?.data ?? []) {
+            const matches = !search ||
+                item.name.toLowerCase().includes(search.toLowerCase()) ||
+                item.kind.toLowerCase().includes(search.toLowerCase());
+            if (matches)
+                map.set(item.id, item);
+        }
+        if (selectedQuery.data)
+            map.set(selectedQuery.data.id, selectedQuery.data);
+        return Array.from(map.values());
+    }, [listQuery.data?.data, search, selectedQuery.data]);
+    const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selected = value ? itemMap.get(value) : undefined;
+    const selectedLabel = selected ? selected.name : "";
+    const [inputValue, setInputValue] = React.useState(selectedLabel);
+    React.useEffect(() => {
+        if (selectedLabel)
+            setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+            setInputValue(next);
+            setSearch(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const id = next ?? null;
+            onChange(id);
+            setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending ? "Loading…" : "No channels found." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                const item = itemMap.get(id);
+                                if (!item)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: [item.kind, item.status].filter(Boolean).join(" · ") })] }) }, item.id));
+                            } }) })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"market-combobox.d.ts","sourceRoot":"","sources":["../../src/components/market-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,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,WAA+B,EAC/B,QAAQ,GACT,EAAE,KAAK,2CAkEP"}

package/dist/components/market-combobox.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMarket, useMarkets } from "@voyantjs/markets-react";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
+import * as React from "react";
+const PAGE_SIZE = 25;
+export function MarketCombobox({ value, onChange, placeholder = "Search markets…", disabled, }) {
+    const [search, setSearch] = React.useState("");
+    const listQuery = useMarkets({ search: search || undefined, limit: PAGE_SIZE });
+    const selectedQuery = useMarket(value ?? undefined, { enabled: !!value });
+    const items = React.useMemo(() => {
+        const map = new Map();
+        for (const item of listQuery.data?.data ?? [])
+            map.set(item.id, item);
+        if (selectedQuery.data)
+            map.set(selectedQuery.data.id, selectedQuery.data);
+        return Array.from(map.values());
+    }, [listQuery.data?.data, selectedQuery.data]);
+    const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selected = value ? itemMap.get(value) : undefined;
+    const selectedLabel = selected ? selected.name : "";
+    const [inputValue, setInputValue] = React.useState(selectedLabel);
+    React.useEffect(() => {
+        if (selectedLabel)
+            setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+            setInputValue(next);
+            setSearch(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const id = next ?? null;
+            onChange(id);
+            setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending ? "Loading…" : "No markets found." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                const item = itemMap.get(id);
+                                if (!item)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), _jsx("span", { className: "truncate text-xs text-muted-foreground", children: [item.code, item.defaultCurrency].filter(Boolean).join(" · ") })] }) }, item.id));
+                            } }) })] })] }));
+}

package/dist/components/policy-dialog.d.ts

@@ -0,0 +1,10 @@
+import { type SellabilityPolicyRecord } from "@voyantjs/sellability-react";
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    policy?: SellabilityPolicyRecord;
+    onSuccess?: (policy: SellabilityPolicyRecord) => void;
+};
+export declare function PolicyDialog({ open, onOpenChange, policy, onSuccess }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=policy-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"policy-dialog.d.ts","sourceRoot":"","sources":["../../src/components/policy-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAE7B,MAAM,6BAA6B,CAAA;AA4EpC,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,CAAC,EAAE,uBAAuB,CAAA;IAChC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAA;CACtD,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAiQ5E"}

package/dist/components/policy-dialog.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSellabilityPolicyMutation, } from "@voyantjs/sellability-react";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/voyant-ui/components";
+import { zodResolver } from "@voyantjs/voyant-ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { ChannelCombobox } from "./channel-combobox";
+import { MarketCombobox } from "./market-combobox";
+import { ProductCombobox } from "./product-combobox";
+import { ProductOptionCombobox } from "./product-option-combobox";
+const POLICY_SCOPES = ["global", "product", "option", "market", "channel"];
+const POLICY_TYPES = [
+    "capability",
+    "occupancy",
+    "pickup",
+    "question",
+    "allotment",
+    "availability_window",
+    "currency",
+    "custom",
+];
+const jsonStringSchema = z.string().refine((value) => {
+    if (!value || value.trim() === "")
+        return true;
+    try {
+        const parsed = JSON.parse(value);
+        return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed);
+    }
+    catch {
+        return false;
+    }
+}, { message: "Must be a JSON object" });
+const formSchema = z.object({
+    name: z.string().min(1, "Name is required").max(255),
+    scope: z.enum(POLICY_SCOPES),
+    policyType: z.enum(POLICY_TYPES),
+    productId: z.string().optional().nullable(),
+    optionId: z.string().optional().nullable(),
+    marketId: z.string().optional().nullable(),
+    channelId: z.string().optional().nullable(),
+    priority: z.coerce.number().int(),
+    active: z.boolean(),
+    conditionsJson: jsonStringSchema,
+    effectsJson: jsonStringSchema,
+    notes: z.string().optional().nullable(),
+});
+export function PolicyDialog({ open, onOpenChange, policy, onSuccess }) {
+    const isEditing = !!policy;
+    const { create, update } = useSellabilityPolicyMutation();
+    const form = useForm({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            name: "",
+            scope: "global",
+            policyType: "custom",
+            productId: "",
+            optionId: "",
+            marketId: "",
+            channelId: "",
+            priority: 0,
+            active: true,
+            conditionsJson: "{}",
+            effectsJson: "{}",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open && policy) {
+            form.reset({
+                name: policy.name,
+                scope: policy.scope,
+                policyType: policy.policyType,
+                productId: policy.productId ?? "",
+                optionId: policy.optionId ?? "",
+                marketId: policy.marketId ?? "",
+                channelId: policy.channelId ?? "",
+                priority: policy.priority,
+                active: policy.active,
+                conditionsJson: JSON.stringify(policy.conditions ?? {}, null, 2),
+                effectsJson: JSON.stringify(policy.effects ?? {}, null, 2),
+                notes: policy.notes ?? "",
+            });
+        }
+        else if (open) {
+            form.reset({
+                name: "",
+                scope: "global",
+                policyType: "custom",
+                productId: "",
+                optionId: "",
+                marketId: "",
+                channelId: "",
+                priority: 0,
+                active: true,
+                conditionsJson: "{}",
+                effectsJson: "{}",
+                notes: "",
+            });
+        }
+    }, [form, open, policy]);
+    const scope = form.watch("scope");
+    const isSubmitting = create.isPending || update.isPending;
+    const onSubmit = async (values) => {
+        const parseJson = (value) => {
+            if (!value || value.trim() === "")
+                return {};
+            return JSON.parse(value);
+        };
+        const payload = {
+            name: values.name,
+            scope: values.scope,
+            policyType: values.policyType,
+            productId: values.productId || null,
+            optionId: values.optionId || null,
+            marketId: values.marketId || null,
+            channelId: values.channelId || null,
+            priority: values.priority,
+            active: values.active,
+            conditions: parseJson(values.conditionsJson),
+            effects: parseJson(values.effectsJson),
+            notes: values.notes || null,
+        };
+        const saved = isEditing
+            ? await update.mutateAsync({ id: policy.id, input: payload })
+            : await create.mutateAsync(payload);
+        onSuccess?.(saved);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing ? "Edit Policy" : "Add Policy" }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Name" }), _jsx(Input, { ...form.register("name"), placeholder: "Block bookings without capability" }), form.formState.errors.name ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message })) : null] }), _jsxs("div", { className: "grid grid-cols-3 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Scope" }), _jsxs(Select, { items: POLICY_SCOPES.map((x) => ({ label: x.replace(/_/g, " "), value: x })), value: form.watch("scope"), onValueChange: (value) => form.setValue("scope", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: POLICY_SCOPES.map((value) => (_jsx(SelectItem, { value: value, className: "capitalize", children: value }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Type" }), _jsxs(Select, { items: POLICY_TYPES.map((x) => ({ label: x.replace(/_/g, " "), value: x })), value: form.watch("policyType"), onValueChange: (value) => form.setValue("policyType", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: POLICY_TYPES.map((value) => (_jsx(SelectItem, { value: value, className: "capitalize", children: value.replace(/_/g, " ") }, value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Priority" }), _jsx(Input, { ...form.register("priority"), type: "number" })] })] }), scope === "product" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Product" }), _jsx(ProductCombobox, { value: form.watch("productId") ?? null, onChange: (value) => form.setValue("productId", value) })] })) : null, scope === "option" ? (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Product" }), _jsx(ProductCombobox, { value: form.watch("productId") ?? null, onChange: (value) => {
+                                                        form.setValue("productId", value);
+                                                        form.setValue("optionId", null);
+                                                    } })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Option" }), _jsx(ProductOptionCombobox, { productId: form.watch("productId"), value: form.watch("optionId") ?? null, onChange: (value) => form.setValue("optionId", value) })] })] })) : null, scope === "market" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Market" }), _jsx(MarketCombobox, { value: form.watch("marketId") ?? null, onChange: (value) => form.setValue("marketId", value) })] })) : null, scope === "channel" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Channel" }), _jsx(ChannelCombobox, { value: form.watch("channelId") ?? null, onChange: (value) => form.setValue("channelId", value) })] })) : null, _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Conditions (JSON)" }), _jsx(Textarea, { ...form.register("conditionsJson"), rows: 6, className: "font-mono text-xs" }), form.formState.errors.conditionsJson ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.conditionsJson.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Effects (JSON)" }), _jsx(Textarea, { ...form.register("effectsJson"), rows: 6, className: "font-mono text-xs" }), form.formState.errors.effectsJson ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.effectsJson.message })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (value) => form.setValue("active", value) }), _jsx(Label, { children: "Active" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Notes" }), _jsx(Textarea, { ...form.register("notes") })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: "Cancel" }), _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, isEditing ? "Save Changes" : "Add Policy"] })] })] })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-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,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,QAAQ,GACT,EAAE,KAAK,2CAkEP"}

package/dist/components/product-combobox.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProduct, useProducts } from "@voyantjs/products-react";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
+import * as React from "react";
+const PAGE_SIZE = 25;
+export function ProductCombobox({ value, onChange, placeholder = "Search products…", disabled, }) {
+    const [search, setSearch] = React.useState("");
+    const listQuery = useProducts({ search: search || undefined, limit: PAGE_SIZE });
+    const selectedQuery = useProduct(value ?? undefined, { enabled: !!value });
+    const items = React.useMemo(() => {
+        const map = new Map();
+        for (const item of listQuery.data?.data ?? [])
+            map.set(item.id, item);
+        if (selectedQuery.data)
+            map.set(selectedQuery.data.id, selectedQuery.data);
+        return Array.from(map.values());
+    }, [listQuery.data?.data, selectedQuery.data]);
+    const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selected = value ? itemMap.get(value) : undefined;
+    const selectedLabel = selected ? selected.name : "";
+    const [inputValue, setInputValue] = React.useState(selectedLabel);
+    React.useEffect(() => {
+        if (selectedLabel)
+            setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+            setInputValue(next);
+            setSearch(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const id = next ?? null;
+            onChange(id);
+            setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending ? "Loading…" : "No products found." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                const item = itemMap.get(id);
+                                if (!item)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [item.status, " \u00B7 ", item.bookingMode] })] }) }, item.id));
+                            } }) })] })] }));
+}

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

@@ -0,0 +1,10 @@
+type Props = {
+    productId?: string | null;
+    value: string | null | undefined;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+};
+export declare function ProductOptionCombobox({ productId, value, onChange, placeholder, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-option-combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-option-combobox.tsx"],"names":[],"mappings":"AAgBA,KAAK,KAAK,GAAG;IACX,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,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,qBAAqB,CAAC,EACpC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAsC,EACtC,QAAQ,GACT,EAAE,KAAK,2CA4EP"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductOption, useProductOptions, } from "@voyantjs/products-react";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/voyant-ui/components/combobox";
+import * as React from "react";
+const PAGE_SIZE = 100;
+export function ProductOptionCombobox({ productId, value, onChange, placeholder = "Select product option…", disabled, }) {
+    const [search, setSearch] = React.useState("");
+    const listQuery = useProductOptions({
+        productId: productId || undefined,
+        limit: PAGE_SIZE,
+        enabled: !!productId,
+    });
+    const selectedQuery = useProductOption(value, { enabled: !!value });
+    const items = React.useMemo(() => {
+        const map = new Map();
+        for (const item of listQuery.data?.data ?? []) {
+            if (!search || item.name.toLowerCase().includes(search.toLowerCase()))
+                map.set(item.id, item);
+        }
+        if (selectedQuery.data)
+            map.set(selectedQuery.data.id, selectedQuery.data);
+        return Array.from(map.values());
+    }, [listQuery.data?.data, search, selectedQuery.data]);
+    const itemMap = React.useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const selected = value ? itemMap.get(value) : undefined;
+    const selectedLabel = selected ? selected.name : "";
+    const [inputValue, setInputValue] = React.useState(selectedLabel);
+    React.useEffect(() => {
+        if (selectedLabel)
+            setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: items.map((item) => item.id), value: value ?? null, inputValue: inputValue, autoHighlight: true, disabled: disabled || !productId, itemToStringValue: (id) => itemMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+            setInputValue(next);
+            setSearch(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const id = next ?? null;
+            onChange(id);
+            setInputValue(id ? (itemMap.get(id)?.name ?? "") : "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending
+                            ? "Loading…"
+                            : productId
+                                ? "No product options found."
+                                : "Select a product first." }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                const item = itemMap.get(id);
+                                if (!item)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: item.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: item.name }), item.code ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: item.code })) : null] }) }, item.id));
+                            } }) })] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ChannelCombobox } from "./components/channel-combobox";
+export { MarketCombobox } from "./components/market-combobox";
+export { PolicyDialog } from "./components/policy-dialog";
+export { ProductCombobox } from "./components/product-combobox";
+export { ProductOptionCombobox } from "./components/product-option-combobox";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAA"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { ChannelCombobox } from "./components/channel-combobox";
+export { MarketCombobox } from "./components/market-combobox";
+export { PolicyDialog } from "./components/policy-dialog";
+export { ProductCombobox } from "./components/product-combobox";
+export { ProductOptionCombobox } from "./components/product-option-combobox";

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@voyantjs/sellability-ui",
+  "version": "0.13.0",
+  "license": "FSL-1.1-Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/sellability-ui"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": "./src/index.ts",
+    "./components/*": "./src/components/*.tsx"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "prepack": "pnpm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "biome check src/",
+    "test": "vitest run --passWithNoTests"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "@tanstack/react-table": "^8.0.0",
+    "@voyantjs/distribution-react": "workspace:*",
+    "@voyantjs/markets-react": "workspace:*",
+    "@voyantjs/products-react": "workspace:*",
+    "@voyantjs/sellability-react": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.96.2",
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@voyantjs/distribution-react": "workspace:*",
+    "@voyantjs/markets-react": "workspace:*",
+    "@voyantjs/products-react": "workspace:*",
+    "@voyantjs/sellability-react": "workspace:*",
+    "@voyantjs/voyant-typescript-config": "workspace:*",
+    "@voyantjs/voyant-ui": "workspace:*",
+    "lucide-react": "^0.475.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.60.0",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2",
+    "zod": "^3.25.76"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js"
+      },
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
+}