@voyantjs/extras-ui 0.16.0 → 0.17.0

package/README.md

@@ -11,3 +11,17 @@ pnpm add @voyantjs/extras-ui @voyantjs/extras-react @voyantjs/ui @tanstack/react
 `@voyantjs/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.
+
+## I18n
+
+Components render English by default. To localize them, wrap your UI in
+`ExtrasUiMessagesProvider` and import only the locales your app supports.
+
+```tsx
+import { ExtrasUiMessagesProvider } from "@voyantjs/extras-ui"
+import { extrasUiEn } from "@voyantjs/extras-ui/i18n/en"
+import { extrasUiRo } from "@voyantjs/extras-ui/i18n/ro"
+```
+
+English-only apps should import only `./i18n/en`. Bilingual apps can import
+`./i18n/en` and `./i18n/ro`.

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

@@ -4,6 +4,6 @@ type Props = {
     placeholder?: string;
     disabled?: boolean;
 };
-export declare function ProductCombobox({ value, onChange, placeholder, disabled, }: Props): import("react/jsx-runtime").JSX.Element;
+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

@@ -1 +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"}
+{"version":3,"file":"product-combobox.d.ts","sourceRoot":"","sources":["../../src/components/product-combobox.tsx"],"names":[],"mappings":"AAgBA,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,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyEhF"}

package/dist/components/product-combobox.js

@@ -3,8 +3,10 @@ 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/ui/components/combobox";
 import * as React from "react";
+import { useExtrasUiMessagesOrDefault } from "../i18n";
 const PAGE_SIZE = 25;
-export function ProductCombobox({ value, onChange, placeholder = "Search products…", disabled, }) {
+export function ProductCombobox({ value, onChange, placeholder, disabled }) {
+    const messages = useExtrasUiMessagesOrDefault();
     const [search, setSearch] = React.useState("");
     const listQuery = useProducts({ search: search || undefined, limit: PAGE_SIZE });
     const selectedQuery = useProduct(value ?? undefined, { enabled: !!value });
@@ -33,10 +35,12 @@ export function ProductCombobox({ value, onChange, placeholder = "Search product
             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) => {
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder ?? messages.productCombobox.placeholder, showClear: !!value }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: listQuery.isPending || selectedQuery.isPending
+                            ? messages.productCombobox.loading
+                            : messages.productCombobox.empty }), _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));
+                                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: [messages.productCombobox.statusLabels[item.status], " \u00B7", " ", messages.productCombobox.bookingModeLabels[item.bookingMode]] })] }) }, item.id));
                             } }) })] })] }));
 }

package/dist/i18n/en.d.ts

@@ -0,0 +1,22 @@
+export declare const extrasUiEn: {
+    productCombobox: {
+        placeholder: string;
+        loading: string;
+        empty: string;
+        statusLabels: {
+            draft: string;
+            active: string;
+            archived: string;
+        };
+        bookingModeLabels: {
+            date: string;
+            date_time: string;
+            open: string;
+            stay: string;
+            transfer: string;
+            itinerary: string;
+            other: string;
+        };
+    };
+};
+//# sourceMappingURL=en.d.ts.map

package/dist/i18n/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;CAoBK,CAAA"}

package/dist/i18n/en.js

@@ -0,0 +1,21 @@
+export const extrasUiEn = {
+    productCombobox: {
+        placeholder: "Search products...",
+        loading: "Loading...",
+        empty: "No products found.",
+        statusLabels: {
+            draft: "Draft",
+            active: "Active",
+            archived: "Archived",
+        },
+        bookingModeLabels: {
+            date: "Date",
+            date_time: "Date and time",
+            open: "Open",
+            stay: "Stay",
+            transfer: "Transfer",
+            itinerary: "Itinerary",
+            other: "Other",
+        },
+    },
+};

package/dist/i18n/index.d.ts

@@ -0,0 +1,5 @@
+export { extrasUiEn } from "./en";
+export type { ExtrasUiMessages, ProductBookingMode, ProductStatus } from "./messages";
+export { type ExtrasUiMessageOverrides, ExtrasUiMessagesProvider, extrasUiMessageDefinitions, getExtrasUiI18n, resolveExtrasUiMessages, useExtrasUiI18n, useExtrasUiI18nOrDefault, useExtrasUiMessages, useExtrasUiMessagesOrDefault, } from "./provider";
+export { extrasUiRo } from "./ro";
+//# sourceMappingURL=index.d.ts.map

package/dist/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/i18n/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AACjC,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACrF,OAAO,EACL,KAAK,wBAAwB,EAC7B,wBAAwB,EACxB,0BAA0B,EAC1B,eAAe,EACf,uBAAuB,EACvB,eAAe,EACf,wBAAwB,EACxB,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA"}

package/dist/i18n/index.js

@@ -0,0 +1,3 @@
+export { extrasUiEn } from "./en";
+export { ExtrasUiMessagesProvider, extrasUiMessageDefinitions, getExtrasUiI18n, resolveExtrasUiMessages, useExtrasUiI18n, useExtrasUiI18nOrDefault, useExtrasUiMessages, useExtrasUiMessagesOrDefault, } from "./provider";
+export { extrasUiRo } from "./ro";

package/dist/i18n/messages.d.ts

@@ -0,0 +1,13 @@
+import type { ProductRecord } from "@voyantjs/products-react";
+export type ProductStatus = ProductRecord["status"];
+export type ProductBookingMode = ProductRecord["bookingMode"];
+export type ExtrasUiMessages = {
+    productCombobox: {
+        placeholder: string;
+        loading: string;
+        empty: string;
+        statusLabels: Record<ProductStatus, string>;
+        bookingModeLabels: Record<ProductBookingMode, string>;
+    };
+};
+//# sourceMappingURL=messages.d.ts.map

package/dist/i18n/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE7D,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAA;AACnD,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;AAE7D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,EAAE;QACf,WAAW,EAAE,MAAM,CAAA;QACnB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,EAAE,MAAM,CAAA;QACb,YAAY,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAC3C,iBAAiB,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;KACtD,CAAA;CACF,CAAA"}

package/dist/i18n/messages.js

@@ -0,0 +1 @@
+export {};

package/dist/i18n/provider.d.ts

@@ -0,0 +1,66 @@
+import { type LocaleMessageOverrides, type PackageI18nValue } from "@voyantjs/i18n";
+import type { ReactNode } from "react";
+import type { ExtrasUiMessages } from "./messages";
+export declare const extrasUiMessageDefinitions: {
+    en: {
+        productCombobox: {
+            placeholder: string;
+            loading: string;
+            empty: string;
+            statusLabels: {
+                draft: string;
+                active: string;
+                archived: string;
+            };
+            bookingModeLabels: {
+                date: string;
+                date_time: string;
+                open: string;
+                stay: string;
+                transfer: string;
+                itinerary: string;
+                other: string;
+            };
+        };
+    };
+    ro: {
+        productCombobox: {
+            placeholder: string;
+            loading: string;
+            empty: string;
+            statusLabels: {
+                draft: string;
+                active: string;
+                archived: string;
+            };
+            bookingModeLabels: {
+                date: string;
+                date_time: string;
+                open: string;
+                stay: string;
+                transfer: string;
+                itinerary: string;
+                other: string;
+            };
+        };
+    };
+};
+export type ExtrasUiMessageOverrides = LocaleMessageOverrides<ExtrasUiMessages>;
+export declare function resolveExtrasUiMessages({ locale, overrides, }: {
+    locale: string | null | undefined;
+    overrides?: ExtrasUiMessageOverrides | null;
+}): ExtrasUiMessages;
+export declare function getExtrasUiI18n({ locale, overrides, }: {
+    locale?: string | null | undefined;
+    overrides?: ExtrasUiMessageOverrides | null;
+}): PackageI18nValue<ExtrasUiMessages>;
+export declare function ExtrasUiMessagesProvider({ children, locale, overrides, }: {
+    children: ReactNode;
+    locale: string | null | undefined;
+    overrides?: ExtrasUiMessageOverrides | null;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const useExtrasUiI18n: () => PackageI18nValue<ExtrasUiMessages>;
+export declare const useExtrasUiMessages: () => ExtrasUiMessages;
+export declare function useExtrasUiI18nOrDefault(): PackageI18nValue<ExtrasUiMessages>;
+export declare function useExtrasUiMessagesOrDefault(): ExtrasUiMessages;
+//# sourceMappingURL=provider.d.ts.map

package/dist/i18n/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/i18n/provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EAEtB,MAAM,gBAAgB,CAAA;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAKlD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGe,CAAA;AAEtD,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,CAAC,gBAAgB,CAAC,CAAA;AAS/E,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACjC,SAAS,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAA;CAC5C,oBAOA;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAClC,SAAS,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAA;CAC5C,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CASrC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACjC,SAAS,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAA;CAC5C,2CAWA;AAED,eAAO,MAAM,eAAe,0CAA0B,CAAA;AACtD,eAAO,MAAM,mBAAmB,wBAA8B,CAAA;AAE9D,wBAAgB,wBAAwB,uCAEvC;AAED,wBAAgB,4BAA4B,qBAE3C"}

package/dist/i18n/provider.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createLocaleFormatters, createPackageMessagesContext, resolvePackageMessages, } from "@voyantjs/i18n";
+import { extrasUiEn } from "./en";
+import { extrasUiRo } from "./ro";
+const fallbackLocale = "en";
+export const extrasUiMessageDefinitions = {
+    en: extrasUiEn,
+    ro: extrasUiRo,
+};
+const extrasUiContext = createPackageMessagesContext("ExtrasUiMessages");
+const defaultExtrasUiI18n = {
+    messages: extrasUiEn,
+    ...createLocaleFormatters(fallbackLocale),
+};
+export function resolveExtrasUiMessages({ locale, overrides, }) {
+    return resolvePackageMessages({
+        definitions: extrasUiMessageDefinitions,
+        fallbackLocale,
+        locale,
+        overrides,
+    });
+}
+export function getExtrasUiI18n({ locale, overrides, }) {
+    const resolvedLocale = locale ?? fallbackLocale;
+    return {
+        messages: resolveExtrasUiMessages({
+            locale: resolvedLocale,
+            overrides,
+        }),
+        ...createLocaleFormatters(resolvedLocale),
+    };
+}
+export function ExtrasUiMessagesProvider({ children, locale, overrides, }) {
+    return (_jsx(extrasUiContext.ResolvedMessagesProvider, { definitions: extrasUiMessageDefinitions, fallbackLocale: fallbackLocale, locale: locale, overrides: overrides, children: children }));
+}
+export const useExtrasUiI18n = extrasUiContext.useI18n;
+export const useExtrasUiMessages = extrasUiContext.useMessages;
+export function useExtrasUiI18nOrDefault() {
+    return extrasUiContext.useOptionalI18n() ?? defaultExtrasUiI18n;
+}
+export function useExtrasUiMessagesOrDefault() {
+    return useExtrasUiI18nOrDefault().messages;
+}

package/dist/i18n/ro.d.ts

@@ -0,0 +1,22 @@
+export declare const extrasUiRo: {
+    productCombobox: {
+        placeholder: string;
+        loading: string;
+        empty: string;
+        statusLabels: {
+            draft: string;
+            active: string;
+            archived: string;
+        };
+        bookingModeLabels: {
+            date: string;
+            date_time: string;
+            open: string;
+            stay: string;
+            transfer: string;
+            itinerary: string;
+            other: string;
+        };
+    };
+};
+//# sourceMappingURL=ro.d.ts.map

package/dist/i18n/ro.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ro.d.ts","sourceRoot":"","sources":["../../src/i18n/ro.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;CAoBK,CAAA"}

package/dist/i18n/ro.js

@@ -0,0 +1,21 @@
+export const extrasUiRo = {
+    productCombobox: {
+        placeholder: "Cauta produse...",
+        loading: "Se incarca...",
+        empty: "Nu s-au gasit produse.",
+        statusLabels: {
+            draft: "Ciorna",
+            active: "Activ",
+            archived: "Arhivat",
+        },
+        bookingModeLabels: {
+            date: "Data",
+            date_time: "Data si ora",
+            open: "Deschis",
+            stay: "Sejur",
+            transfer: "Transfer",
+            itinerary: "Itinerar",
+            other: "Altul",
+        },
+    },
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { ProductCombobox } from "./components/product-combobox";
+export { type ExtrasUiMessageOverrides, type ExtrasUiMessages, ExtrasUiMessagesProvider, extrasUiEn, extrasUiMessageDefinitions, extrasUiRo, getExtrasUiI18n, resolveExtrasUiMessages, useExtrasUiI18n, useExtrasUiI18nOrDefault, useExtrasUiMessages, useExtrasUiMessagesOrDefault, } from "./i18n";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA"}
+{"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,EACL,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,EACrB,wBAAwB,EACxB,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,eAAe,EACf,wBAAwB,EACxB,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,QAAQ,CAAA"}

package/dist/index.js

@@ -1 +1,2 @@
 export { ProductCombobox } from "./components/product-combobox";
+export { ExtrasUiMessagesProvider, extrasUiEn, extrasUiMessageDefinitions, extrasUiRo, getExtrasUiI18n, resolveExtrasUiMessages, useExtrasUiI18n, useExtrasUiI18nOrDefault, useExtrasUiMessages, useExtrasUiMessagesOrDefault, } from "./i18n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/extras-ui",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "license": "FSL-1.1-Apache-2.0",
   "repository": {
     "type": "git",
@@ -14,6 +14,18 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n/index.js"
+    },
+    "./i18n/en": {
+      "types": "./dist/i18n/en.d.ts",
+      "import": "./dist/i18n/en.js"
+    },
+    "./i18n/ro": {
+      "types": "./dist/i18n/ro.d.ts",
+      "import": "./dist/i18n/ro.js"
+    },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js"
@@ -25,10 +37,13 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
-    "zod": "^3.25.76",
-    "@voyantjs/extras-react": "0.16.0",
-    "@voyantjs/products-react": "0.16.0",
-    "@voyantjs/ui": "0.16.0"
+    "zod": "^4.3.6",
+    "@voyantjs/extras-react": "0.17.0",
+    "@voyantjs/products-react": "0.17.0",
+    "@voyantjs/ui": "0.17.0"
+  },
+  "dependencies": {
+    "@voyantjs/i18n": "0.17.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.96.2",
@@ -41,11 +56,12 @@
     "react-hook-form": "^7.60.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
-    "zod": "^3.25.76",
-    "@voyantjs/extras-react": "0.16.0",
-    "@voyantjs/products-react": "0.16.0",
+    "zod": "^4.3.6",
+    "@voyantjs/extras-react": "0.17.0",
+    "@voyantjs/i18n": "0.17.0",
+    "@voyantjs/products-react": "0.17.0",
     "@voyantjs/voyant-typescript-config": "0.1.0",
-    "@voyantjs/ui": "0.16.0"
+    "@voyantjs/ui": "0.17.0"
   },
   "files": [
     "dist"