@voyantjs/extras-ui 0.13.0

package/README.md

@@ -0,0 +1,13 @@
+# @voyantjs/extras-ui
+
+Importable React UI components for Voyant extras. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/extras-ui @voyantjs/extras-react @voyantjs/voyant-ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/voyant-ui` provides the design-system primitives. `@voyantjs/extras-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/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":"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,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAgC,EAChC,QAAQ,GACT,EAAE,KAAK,2CAkEP"}

package/dist/components/product-combobox.js

@@ -0,0 +1,42 @@
+"use client";
+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/index.d.ts

@@ -0,0 +1,2 @@
+export { ProductCombobox } from "./components/product-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"}

package/dist/index.js

@@ -0,0 +1 @@
+export { ProductCombobox } from "./components/product-combobox";

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@voyantjs/extras-ui",
+  "version": "0.13.0",
+  "license": "FSL-1.1-Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/voyantjs/voyant.git",
+    "directory": "packages/extras-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/extras-react": "workspace:*",
+    "@voyantjs/products-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/extras-react": "workspace:*",
+    "@voyantjs/products-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"
+  }
+}