@qeetrix/react 0.0.2 → 0.0.4

package/dist/progress/progress.js

@@ -1,5 +1,6 @@
 "use client";
 import { cx } from "../internal/cx.js";
+import { useLocale } from "../provider/provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 import { Progress } from "@base-ui/react/progress";
@@ -8,9 +9,11 @@ import { Progress } from "@base-ui/react/progress";
 * A task advancing, such as an upload (06-component-specs.md, increment 6). `value={null}` is
 * indeterminate: a segment slides along the track, and fades instead under reduced motion.
 */
-function Progress$1({ label, showValue, className, ...props }) {
+function Progress$1({ label, showValue, locale, className, ...props }) {
+	const providerLocale = useLocale();
 	return /* @__PURE__ */ jsxs(Progress.Root, {
 		...props,
+		locale: locale ?? providerLocale,
 		className: cx("qx-progress", className),
 		"data-slot": "progress",
 		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
@@ -31,9 +34,11 @@ function Progress$1({ label, showValue, className, ...props }) {
 	});
 }
 /** A measurement within a range, such as storage used. It looks like Progress; it isn't a task. */
-function Meter$1({ label, showValue, tone = "brand", className, ...props }) {
+function Meter$1({ label, showValue, tone = "brand", locale, className, ...props }) {
+	const providerLocale = useLocale();
 	return /* @__PURE__ */ jsxs(Meter.Root, {
 		...props,
+		locale: locale ?? providerLocale,
 		className: cx("qx-progress", className),
 		"data-slot": "meter",
 		"data-tone": tone,

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+import { QeetrixMessages, QeetrixMessagesInput } from "../internal/messages.js";
+import { ColorScheme, ColorSchemeState, Direction, QeetrixProvider, QeetrixProviderProps, ResolvedColorScheme, useColorScheme, useLocale } from "./provider.js";
+export { type ColorScheme, type ColorSchemeState, type Direction, type QeetrixMessages, type QeetrixMessagesInput, QeetrixProvider, type QeetrixProviderProps, type ResolvedColorScheme, useColorScheme, useLocale };

package/dist/provider/index.js

@@ -0,0 +1 @@
+export { QeetrixProvider, useColorScheme, useLocale } from "./provider.js";

package/dist/provider/provider.d.ts

@@ -0,0 +1,46 @@
+import { QeetrixMessagesInput } from "../internal/messages.js";
+import { ReactElement, ReactNode } from "react";
+export type Direction = "ltr" | "rtl";
+export type ColorScheme = "light" | "dark" | "system";
+export type ResolvedColorScheme = "light" | "dark";
+export interface QeetrixProviderProps {
+  /** A BCP 47 locale for formatting, e.g. `hi-IN`. Default `en-IN`, or the enclosing provider's. */
+  locale?: string;
+  /**
+   * The reading direction, for arrow keys, submenus, sliders and drawers. Default `ltr`, or the
+   * enclosing provider's. Set `dir` on `<html>` too: this doesn't render an element.
+   */
+  direction?: Direction;
+  /** A locale pack (`@qeetrix/react/locales/hi`) or any subset of the strings. */
+  messages?: QeetrixMessagesInput;
+  /**
+   * The colour scheme, controlled. With this or `defaultColorScheme`, the provider sets
+   * `data-qx-color-scheme` on `<html>`, following the operating system while it's `system`.
+   */
+  colorScheme?: ColorScheme;
+  /** The colour scheme when uncontrolled. */
+  defaultColorScheme?: ColorScheme;
+  /** Called when `setColorScheme` asks for a change: persist it, e.g. in a cookie. */
+  onColorSchemeChange?: (colorScheme: ColorScheme) => void;
+  children?: ReactNode;
+}
+export interface ColorSchemeState {
+  /** The chosen scheme, `system` included. */
+  colorScheme: ColorScheme;
+  /** What's showing: `light` or `dark`. */
+  resolvedColorScheme: ResolvedColorScheme;
+  /** Choose a scheme. */
+  setColorScheme: (colorScheme: ColorScheme) => void;
+}
+/**
+ * App-wide settings for Qeetrix components: locale, direction and strings. Nest one to change a
+ * section; it inherits whatever it doesn't set.
+ */
+export declare function QeetrixProvider({ locale, direction, messages: strings, colorScheme, defaultColorScheme, onColorSchemeChange, children }: QeetrixProviderProps): ReactElement;
+/**
+ * The colour scheme, and a way to change it, from the QeetrixProvider that manages it (one with
+ * `colorScheme` or `defaultColorScheme`).
+ */
+export declare function useColorScheme(): ColorSchemeState;
+/** The locale set by the nearest QeetrixProvider; `en-IN` without one. */
+export declare function useLocale(): string;

package/dist/provider/provider.js

@@ -0,0 +1,90 @@
+"use client";
+import { DEFAULT_LOCALE, messages } from "../internal/messages.js";
+import { useMediaQuery } from "../internal/media.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useEffect, useState } from "react";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+// src/provider/provider.tsx
+const SettingsContext = createContext({
+	locale: DEFAULT_LOCALE,
+	messages: {}
+});
+const ColorSchemeContext = createContext({
+	colorScheme: "light",
+	resolvedColorScheme: "light",
+	setColorScheme: () => {}
+});
+function ColorSchemeRoot({ colorScheme, defaultColorScheme, onColorSchemeChange, children }) {
+	const [own, setOwn] = useState(defaultColorScheme ?? "system");
+	const scheme = colorScheme ?? own;
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)", false);
+	const resolved = scheme === "system" ? prefersDark ? "dark" : "light" : scheme;
+	useEffect(() => {
+		document.documentElement.dataset.qxColorScheme = resolved;
+	}, [resolved]);
+	const setColorScheme = (next) => {
+		if (colorScheme === void 0) setOwn(next);
+		onColorSchemeChange?.(next);
+	};
+	return /* @__PURE__ */ jsx(ColorSchemeContext, {
+		value: {
+			colorScheme: scheme,
+			resolvedColorScheme: resolved,
+			setColorScheme
+		},
+		children
+	});
+}
+function merge(outer, inner) {
+	const out = { ...outer };
+	for (const [group, strings] of Object.entries(inner)) out[group] = {
+		...out[group],
+		...strings
+	};
+	return out;
+}
+/**
+* App-wide settings for Qeetrix components: locale, direction and strings. Nest one to change a
+* section; it inherits whatever it doesn't set.
+*/
+function QeetrixProvider({ locale, direction, messages: strings, colorScheme, defaultColorScheme, onColorSchemeChange, children }) {
+	const outer = use(SettingsContext);
+	const settings = {
+		locale: locale ?? outer.locale,
+		messages: strings ? merge(outer.messages, strings) : outer.messages
+	};
+	const directed = direction ? /* @__PURE__ */ jsx(DirectionProvider, {
+		direction,
+		children
+	}) : children;
+	return /* @__PURE__ */ jsx(SettingsContext, {
+		value: settings,
+		children: colorScheme !== void 0 || defaultColorScheme !== void 0 ? /* @__PURE__ */ jsx(ColorSchemeRoot, {
+			colorScheme,
+			defaultColorScheme,
+			onColorSchemeChange,
+			children: directed
+		}) : directed
+	});
+}
+/**
+* The colour scheme, and a way to change it, from the QeetrixProvider that manages it (one with
+* `colorScheme` or `defaultColorScheme`).
+*/
+function useColorScheme() {
+	return use(ColorSchemeContext);
+}
+/** The locale set by the nearest QeetrixProvider; `en-IN` without one. */
+function useLocale() {
+	return use(SettingsContext).locale;
+}
+/** A component's strings: its own prop, then the provider, then the English defaults. */
+function useMessages(group, own) {
+	const provided = use(SettingsContext).messages[group];
+	return {
+		...messages[group],
+		...provided,
+		...own
+	};
+}
+export { QeetrixProvider, useColorScheme, useLocale, useMessages };

package/dist/slider/slider.d.ts

@@ -1,10 +1,13 @@
+import { QeetrixMessages } from "../internal/messages.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { Slider } from "@base-ui/react/slider";
 export interface SliderProps<Value extends number | readonly number[] = number> extends Omit<Slider.Root.Props<Value>, "className" | "style" | "children"> {
   /** The visible label. Without one, give the slider an `aria-label`. */
   label?: ReactNode;
-  /** Show the formatted value at the end of the header. */
+  /** Show the formatted value at the end of the header, in `locale` (default: QeetrixProvider's). */
   showValue?: boolean;
+  /** A range's thumb names, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["slider"]>;
   /** Placement only. */
   className?: string;
   style?: CSSProperties;
@@ -13,5 +16,5 @@ export interface SliderProps<Value extends number | readonly number[] = number>
  * A number, or a range, on a continuous scale (06-component-specs.md, increment 5). An array value
  * renders one thumb per value. Arrow keys step, Page Up and Down take `largeStep`, Home and End jump.
  */
-declare function Slider$1<Value extends number | readonly number[] = number>({ label, showValue, className, value, defaultValue, ...props }: SliderProps<Value>): ReactElement;
+declare function Slider$1<Value extends number | readonly number[] = number>({ label, showValue, messages, "aria-label": ariaLabel, locale, className, value, defaultValue, ...props }: SliderProps<Value>): ReactElement;
 export { Slider$1 as Slider };

package/dist/slider/slider.js

@@ -1,6 +1,6 @@
 "use client";
 import { cx } from "../internal/cx.js";
-import { messages } from "../internal/messages.js";
+import { useLocale, useMessages } from "../provider/provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slider } from "@base-ui/react/slider";
 // src/slider/slider.tsx
@@ -8,14 +8,18 @@ import { Slider } from "@base-ui/react/slider";
 * A number, or a range, on a continuous scale (06-component-specs.md, increment 5). An array value
 * renders one thumb per value. Arrow keys step, Page Up and Down take `largeStep`, Home and End jump.
 */
-function Slider$1({ label, showValue, className, value, defaultValue, ...props }) {
+function Slider$1({ label, showValue, messages, "aria-label": ariaLabel, locale, className, value, defaultValue, ...props }) {
+	const strings = useMessages("slider", messages);
+	const providerLocale = useLocale();
 	const initial = value ?? defaultValue;
 	const thumbs = Array.isArray(initial) ? initial.length : 1;
 	const range = thumbs > 1;
 	return /* @__PURE__ */ jsxs(Slider.Root, {
 		...props,
+		"aria-label": ariaLabel,
 		value,
 		defaultValue,
+		locale: locale ?? providerLocale,
 		className: cx("qx-slider", className),
 		"data-slot": "slider",
 		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
@@ -40,7 +44,10 @@ function Slider$1({ label, showValue, className, value, defaultValue, ...props }
 					"data-slot": "slider-indicator"
 				}), Array.from({ length: thumbs }, (_, index) => /* @__PURE__ */ jsx(Slider.Thumb, {
 					index,
-					getAriaLabel: range ? (i) => i === 0 ? messages.slider.minimum : messages.slider.maximum : null,
+					getAriaLabel: range ? (i) => {
+						const bound = i === 0 ? strings.minimum : strings.maximum;
+						return ariaLabel ? `${ariaLabel}, ${bound}` : bound;
+					} : ariaLabel ? () => ariaLabel : null,
 					className: "qx-slider-thumb",
 					"data-slot": "slider-thumb"
 				}, index))]