@qeetrix/react 0.0.2 → 0.0.4

package/dist/text-field/text-field.d.ts

@@ -1,7 +1,7 @@
 import { FieldProps } from "../field/field.js";
 import { InputProps } from "../input/input.js";
 import { CSSProperties, ReactElement } from "react";
-type FieldOnly = Pick<FieldProps, "label" | "description" | "error" | "optional" | "hideLabel" | "invalid" | "validate" | "validationMode" | "validationDebounceTime" | "dirty" | "touched" | "actionsRef">;
+type FieldOnly = Pick<FieldProps, "label" | "description" | "error" | "optional" | "hideLabel" | "invalid" | "validate" | "validationMode" | "validationDebounceTime" | "dirty" | "touched" | "actionsRef" | "messages">;
 export interface TextFieldProps extends Omit<InputProps, "className" | "style">, FieldOnly {
   /** Placement of the whole row only (margin, width, grid placement). */
   className?: string;
@@ -11,5 +11,5 @@ export interface TextFieldProps extends Omit<InputProps, "className" | "style">,
  * Field + Input in one: the default way to build a text row (D-12). `name`, `disabled` and
  * validation go to the Field; `ref`, `required`, `readOnly` and every other prop go to the input.
  */
-export declare function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, name, disabled, className, style, ...inputProps }: TextFieldProps): ReactElement;
+export declare function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, messages, name, disabled, className, style, ...inputProps }: TextFieldProps): ReactElement;
 export {};

package/dist/text-field/text-field.js

@@ -1,5 +1,6 @@
 "use client";
 import { cx } from "../internal/cx.js";
+import { useMessages } from "../provider/provider.js";
 import { FieldMessages, labelText } from "../field/field.js";
 import { Input } from "../input/input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +10,8 @@ import { Field } from "@base-ui/react/field";
 * Field + Input in one: the default way to build a text row (D-12). `name`, `disabled` and
 * validation go to the Field; `ref`, `required`, `readOnly` and every other prop go to the input.
 */
-function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, name, disabled, className, style, ...inputProps }) {
+function TextField({ label, description, error, optional, hideLabel, invalid, validate, validationMode, validationDebounceTime, dirty, touched, actionsRef, messages, name, disabled, className, style, ...inputProps }) {
+	const strings = useMessages("field", messages);
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		name,
 		disabled,
@@ -28,7 +30,7 @@ function TextField({ label, description, error, optional, hideLabel, invalid, va
 				className: "qx-field-label",
 				"data-slot": "field-label",
 				"data-hidden": hideLabel ? "" : void 0,
-				children: labelText(label, optional)
+				children: labelText(label, optional, strings.optional)
 			}),
 			/* @__PURE__ */ jsx(Input, { ...inputProps }),
 			/* @__PURE__ */ jsx(FieldMessages, {

package/dist/toast/toast.d.ts

@@ -1,3 +1,4 @@
+import { QeetrixMessages } from "../internal/messages.js";
 import { ReactElement, ReactNode } from "react";
 export type ToastTone = "info" | "success" | "warning" | "danger";
 export interface ToastOptions {
@@ -41,6 +42,8 @@ export interface ToastProviderProps {
   limit?: number;
   /** Default milliseconds before a toast closes. Default 5000. */
   timeout?: number;
+  /** The region's name and the close label, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["toast"]>;
 }
 /**
  * Shows toasts from anywhere inside ToastProvider:
@@ -51,4 +54,4 @@ export declare function useToast(): ToastApi;
  * Wrap the app once. It renders the toast region: a landmark named "Notifications" at the bottom
  * end, reachable with F6. Toasts pause while hovered or focused and swipe away on touch.
  */
-export declare function ToastProvider({ children, limit, timeout }: ToastProviderProps): ReactElement;
+export declare function ToastProvider({ children, limit, timeout, messages }: ToastProviderProps): ReactElement;

package/dist/toast/toast.js

@@ -1,6 +1,6 @@
 "use client";
-import { messages } from "../internal/messages.js";
 import { Button, IconButton } from "../button/button.js";
+import { useMessages } from "../provider/provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlertIcon } from "@qeetrix/icons/icons/circle-alert";
 import { XIcon } from "@qeetrix/icons/icons/x";
@@ -60,7 +60,7 @@ function useToast() {
 		})
 	};
 }
-function ToastList() {
+function ToastList({ closeLabel }) {
 	const { toasts } = Toast.useToastManager();
 	return toasts.map((toast) => {
 		const tone = toast.type ?? "info";
@@ -96,7 +96,7 @@ function ToastList() {
 				}),
 				/* @__PURE__ */ jsx(Toast.Close, { render: /* @__PURE__ */ jsx(IconButton, {
 					icon: XIcon,
-					"aria-label": messages.toast.close,
+					"aria-label": closeLabel,
 					size: "sm",
 					tooltip: false
 				}) })
@@ -108,15 +108,16 @@ function ToastList() {
 * Wrap the app once. It renders the toast region: a landmark named "Notifications" at the bottom
 * end, reachable with F6. Toasts pause while hovered or focused and swipe away on touch.
 */
-function ToastProvider({ children, limit = 3, timeout = 5e3 }) {
+function ToastProvider({ children, limit = 3, timeout = 5e3, messages }) {
+	const strings = useMessages("toast", messages);
 	return /* @__PURE__ */ jsxs(Toast.Provider, {
 		limit,
 		timeout,
 		children: [children, /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
 			className: "qx-toast-viewport",
 			"data-slot": "toast-viewport",
-			"aria-label": messages.toast.region,
-			children: /* @__PURE__ */ jsx(ToastList, {})
+			"aria-label": strings.region,
+			children: /* @__PURE__ */ jsx(ToastList, { closeLabel: strings.close })
 		}) })]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qeetrix/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Qeetrix React components: accessible, token-driven primitives on Base UI for every Qeet product.",
   "keywords": [
     "qeetrix",
@@ -71,6 +71,10 @@
       "types": "./dist/drawer/index.d.ts",
       "default": "./dist/drawer/index.js"
     },
+    "./experimental": {
+      "types": "./dist/experimental/index.d.ts",
+      "default": "./dist/experimental/index.js"
+    },
     "./field": {
       "types": "./dist/field/index.d.ts",
       "default": "./dist/field/index.js"
@@ -79,6 +83,10 @@
       "types": "./dist/fieldset/index.d.ts",
       "default": "./dist/fieldset/index.js"
     },
+    "./format": {
+      "types": "./dist/format/index.d.ts",
+      "default": "./dist/format/index.js"
+    },
     "./grid": {
       "types": "./dist/grid/index.d.ts",
       "default": "./dist/grid/index.js"
@@ -111,6 +119,10 @@
       "types": "./dist/progress/index.d.ts",
       "default": "./dist/progress/index.js"
     },
+    "./provider": {
+      "types": "./dist/provider/index.d.ts",
+      "default": "./dist/provider/index.js"
+    },
     "./radio": {
       "types": "./dist/radio/index.d.ts",
       "default": "./dist/radio/index.js"
@@ -183,6 +195,10 @@
       "types": "./dist/visually-hidden/index.d.ts",
       "default": "./dist/visually-hidden/index.js"
     },
+    "./locales/hi": {
+      "types": "./dist/locales/hi.d.ts",
+      "default": "./dist/locales/hi.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./css/*": "./dist/css/*",
     "./package.json": "./package.json"
@@ -206,7 +222,7 @@
   },
   "peerDependencies": {
     "@base-ui/react": "^1.9.0",
-    "@qeetrix/tokens": "^0.0.5",
+    "@qeetrix/tokens": "^0.0.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },