@qeetrix/react 0.0.1 → 0.0.4

package/dist/link/link.js

@@ -0,0 +1,32 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { messages } from "../internal/messages.js";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpRightIcon } from "@qeetrix/icons/icons/arrow-up-right";
+// src/link/link.tsx
+/** Navigation to a page, a section, a file or a site. An action that changes data is a Button. */
+function Link({ tone, external, render, rel, messages: messages$1, className, children, ...props }) {
+	const externalNote = messages$1?.external ?? messages.link.external;
+	return renderElement("a", render, {
+		...external ? { target: "_blank" } : {},
+		...props,
+		rel: external ? cx(rel, "noopener noreferrer") : rel,
+		className: cx("qx-link", className),
+		"data-slot": "link",
+		"data-tone": tone,
+		"data-external": external ? "" : void 0,
+		children: external ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			children,
+			/* @__PURE__ */ jsx(ArrowUpRightIcon, {
+				shape: "sharp",
+				size: 12,
+				"aria-hidden": true,
+				className: "qx-link-icon",
+				"data-slot": "link-icon"
+			}),
+			/* @__PURE__ */ jsxs(VisuallyHidden, { children: [" ", externalNote] })
+		] }) : children
+	});
+}
+export { Link };

package/dist/locales/hi.d.ts

@@ -0,0 +1,8 @@
+import { QeetrixMessages } from "../internal/messages.js";
+/**
+ * Hindi. The words match Qeet ID's own Hindi strings ("खारिज करें" for Dismiss, "लोड हो रहा है" for
+ * Loading), so a product and the library never disagree.
+ *
+ * `<QeetrixProvider locale="hi-IN" messages={hi}>`
+ */
+export declare const hi: QeetrixMessages;

package/dist/locales/hi.js

@@ -0,0 +1,60 @@
+// src/locales/hi.ts
+/**
+* Hindi. The words match Qeet ID's own Hindi strings ("खारिज करें" for Dismiss, "लोड हो रहा है" for
+* Loading), so a product and the library never disagree.
+*
+* `<QeetrixProvider locale="hi-IN" messages={hi}>`
+*/
+const hi = {
+	skipLink: { label: "मुख्य सामग्री पर जाएँ" },
+	spinner: { label: "लोड हो रहा है" },
+	link: { external: "(नए टैब में खुलता है)" },
+	field: { optional: "(वैकल्पिक)" },
+	overlay: { close: "बंद करें" },
+	toast: {
+		close: "खारिज करें",
+		region: "सूचनाएँ"
+	},
+	slider: {
+		minimum: "न्यूनतम",
+		maximum: "अधिकतम"
+	},
+	appShell: {
+		collapse: "छोटा करें",
+		expand: "बड़ा करें",
+		open: "नेविगेशन खोलें",
+		navigation: "नेविगेशन",
+		tools: "टूल",
+		closePanel: "पैनल बंद करें"
+	},
+	sidebar: {
+		filter: "नेविगेशन में खोजें",
+		noMatches: "कोई पेज नहीं मिला"
+	},
+	breadcrumb: { label: "पेज का पथ" },
+	dataState: {
+		errorTitle: "यह लोड नहीं हो सका",
+		errorDescription: "फिर से कोशिश करें, या अपना कनेक्शन जाँचें।",
+		retry: "फिर से कोशिश करें"
+	},
+	copyButton: {
+		copy: "कॉपी करें",
+		copied: "कॉपी हो गया",
+		failed: "कॉपी नहीं हो सका"
+	},
+	alert: {
+		dismiss: "खारिज करें",
+		info: "जानकारी",
+		success: "सफल",
+		warning: "चेतावनी",
+		danger: "त्रुटि"
+	},
+	passwordInput: {
+		show: "पासवर्ड दिखाएँ",
+		shown: "पासवर्ड दिख रहा है",
+		hidden: "पासवर्ड छिपा है",
+		capsLock: "कैप्स लॉक चालू है"
+	},
+	otpInput: { character: "{length} में से अक्षर {index}" }
+};
+export { hi };

package/dist/menu/index.d.ts

@@ -0,0 +1,2 @@
+import { Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuItemTone, MenuProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSubmenu, MenuSubmenuProps, MenuSubmenuTrigger, MenuSubmenuTriggerProps, MenuTrigger, MenuTriggerProps } from "./menu.js";
+export { Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuItemTone, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSubmenu, type MenuSubmenuProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps };

package/dist/menu/index.js

@@ -0,0 +1 @@
+export { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger } from "./menu.js";

package/dist/menu/menu.d.ts

@@ -0,0 +1,76 @@
+import { QeetrixIcon } from "../internal/control.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Menu } from "@base-ui/react/menu";
+export type MenuProps = Menu.Root.Props;
+export type MenuTriggerProps = Menu.Trigger.Props;
+export type MenuSubmenuProps = Menu.SubmenuRoot.Props;
+export type MenuItemTone = "default" | "danger";
+export interface MenuContentProps extends Omit<Menu.Popup.Props, "className" | "style" | "children"> {
+  /** The side to open on. By default a menu opens below its trigger, a submenu at the inline end. */
+  side?: Menu.Positioner.Props["side"];
+  /** Alignment along that side. Default `start`. */
+  align?: Menu.Positioner.Props["align"];
+  /** Distance from the trigger, in pixels. Default 4 (0 for a submenu). */
+  sideOffset?: number;
+  /** Placement and sizing only. */
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+interface ItemLookProps {
+  /** Text at the end, such as a keyboard shortcut ("Ctrl+D"). Hidden from assistive technology. */
+  shortcut?: ReactNode;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+export interface MenuItemProps extends Omit<Menu.Item.Props, "className" | "style">, ItemLookProps {
+  /** A leading icon from `@qeetrix/icons`: sharp, 16px. */
+  icon?: QeetrixIcon;
+  /** `danger` for a destructive action; put it last, after a separator. */
+  tone?: MenuItemTone;
+}
+export interface MenuCheckboxItemProps extends Omit<Menu.CheckboxItem.Props, "className" | "style">, ItemLookProps {}
+export interface MenuRadioItemProps extends Omit<Menu.RadioItem.Props, "className" | "style">, ItemLookProps {}
+export interface MenuSubmenuTriggerProps extends Omit<Menu.SubmenuTrigger.Props, "className" | "style"> {
+  /** A leading icon from `@qeetrix/icons`: sharp, 16px. */
+  icon?: QeetrixIcon;
+  className?: string;
+  style?: CSSProperties;
+}
+export type MenuGroupProps = Menu.Group.Props;
+export interface MenuGroupLabelProps extends Omit<Menu.GroupLabel.Props, "className"> {
+  className?: string;
+}
+export type MenuRadioGroupProps = Menu.RadioGroup.Props;
+export interface MenuSeparatorProps extends Omit<Menu.Separator.Props, "className"> {
+  className?: string;
+}
+/** Holds a menu's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+declare function Menu$1(props: MenuProps): ReactElement;
+/** Opens the menu. Render your own control: `render={<IconButton aria-label="More" … />}`. */
+export declare function MenuTrigger(props: MenuTriggerProps): ReactElement;
+/**
+ * The list of actions (06-component-specs.md §5): arrow keys move, typing jumps to a match, Escape
+ * closes and returns focus to the trigger. It never traps Tab.
+ */
+export declare function MenuContent({ side, align, sideOffset, className, children, ...props }: MenuContentProps): ReactElement;
+/** An action. */
+export declare function MenuItem({ icon: Icon, shortcut, tone, className, children, ...props }: MenuItemProps): ReactElement;
+/** An option that turns on or off; a sharp check marks it. */
+export declare function MenuCheckboxItem({ shortcut, className, children, ...props }: MenuCheckboxItemProps): ReactElement;
+/** One choice of a MenuRadioGroup; a 6px dot marks it. */
+export declare function MenuRadioItem({ shortcut, className, children, ...props }: MenuRadioItemProps): ReactElement;
+/** Radio items sharing one value: `value` / `defaultValue` / `onValueChange(value, details)`. */
+export declare function MenuRadioGroup(props: MenuRadioGroupProps): ReactElement;
+/** Items under one label. */
+export declare function MenuGroup(props: MenuGroupProps): ReactElement;
+/** A group's label. */
+export declare function MenuGroupLabel({ className, ...props }: MenuGroupLabelProps): ReactElement;
+/** A 1px rule between groups, edge to edge. */
+export declare function MenuSeparator({ className, ...props }: MenuSeparatorProps): ReactElement;
+/** A nested menu: a MenuSubmenuTrigger and its own MenuContent. */
+export declare function MenuSubmenu(props: MenuSubmenuProps): ReactElement;
+/** The item that opens a submenu, with a trailing chevron that mirrors in right-to-left text. */
+export declare function MenuSubmenuTrigger({ icon: Icon, className, children, ...props }: MenuSubmenuTriggerProps): ReactElement;
+export { Menu$1 as Menu };

package/dist/menu/menu.js

@@ -0,0 +1,172 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { CheckIcon } from "@qeetrix/icons/icons/check";
+import { Menu } from "@base-ui/react/menu";
+import { ChevronRightIcon } from "@qeetrix/icons/icons/chevron-right";
+// src/menu/menu.tsx
+/** True inside a submenu, whose content lines its first item up with the trigger item. */
+const InSubmenu = createContext(false);
+/** Holds a menu's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Menu$1(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+/** Opens the menu. Render your own control: `render={<IconButton aria-label="More" … />}`. */
+function MenuTrigger(props) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+}
+/**
+* The list of actions (06-component-specs.md §5): arrow keys move, typing jumps to a match, Escape
+* closes and returns focus to the trigger. It never traps Tab.
+*/
+function MenuContent({ side, align = "start", sideOffset, className, children, ...props }) {
+	const inSubmenu = use(InSubmenu);
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		side,
+		align,
+		sideOffset: sideOffset ?? (inSubmenu ? 0 : 4),
+		alignOffset: inSubmenu ? -5 : 0,
+		className: "qx-menu-positioner",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			...props,
+			className: cx("qx-menu", className),
+			"data-slot": "menu-popup",
+			children
+		})
+	}) });
+}
+function Shortcut({ children }) {
+	if (children == null) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "qx-menu-shortcut",
+		"data-slot": "menu-shortcut",
+		"aria-hidden": true,
+		children
+	});
+}
+/** An action. */
+function MenuItem({ icon: Icon, shortcut, tone, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.Item, {
+		...props,
+		className: cx("qx-menu-item", className),
+		"data-slot": "menu-item",
+		"data-tone": tone,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-menu-item-icon"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-item-label",
+				children
+			}),
+			/* @__PURE__ */ jsx(Shortcut, { children: shortcut })
+		]
+	});
+}
+/** An option that turns on or off; a sharp check marks it. */
+function MenuCheckboxItem({ shortcut, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		...props,
+		className: cx("qx-menu-item", className),
+		"data-slot": "menu-checkbox-item",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-mark",
+				children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+					className: "qx-menu-mark-indicator",
+					children: /* @__PURE__ */ jsx(CheckIcon, {
+						shape: "sharp",
+						size: 16,
+						"aria-hidden": true
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-item-label",
+				children
+			}),
+			/* @__PURE__ */ jsx(Shortcut, { children: shortcut })
+		]
+	});
+}
+/** One choice of a MenuRadioGroup; a 6px dot marks it. */
+function MenuRadioItem({ shortcut, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		...props,
+		className: cx("qx-menu-item", className),
+		"data-slot": "menu-radio-item",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-mark",
+				children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { className: "qx-menu-mark-indicator qx-menu-dot" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-item-label",
+				children
+			}),
+			/* @__PURE__ */ jsx(Shortcut, { children: shortcut })
+		]
+	});
+}
+/** Radio items sharing one value: `value` / `defaultValue` / `onValueChange(value, details)`. */
+function MenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, { ...props });
+}
+/** Items under one label. */
+function MenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, { ...props });
+}
+/** A group's label. */
+function MenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		...props,
+		className: cx("qx-menu-group-label", className),
+		"data-slot": "menu-group-label"
+	});
+}
+/** A 1px rule between groups, edge to edge. */
+function MenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		...props,
+		className: cx("qx-menu-separator", className),
+		"data-slot": "menu-separator"
+	});
+}
+/** A nested menu: a MenuSubmenuTrigger and its own MenuContent. */
+function MenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(InSubmenu, {
+		value: true,
+		children: /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props })
+	});
+}
+/** The item that opens a submenu, with a trailing chevron that mirrors in right-to-left text. */
+function MenuSubmenuTrigger({ icon: Icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		...props,
+		className: cx("qx-menu-item", className),
+		"data-slot": "menu-submenu-trigger",
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-menu-item-icon"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-menu-item-label",
+				children
+			}),
+			/* @__PURE__ */ jsx(ChevronRightIcon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-menu-submenu-icon"
+			})
+		]
+	});
+}
+export { Menu$1 as Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger };

package/dist/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from "./popover.js";
+export { Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/popover/index.js

@@ -0,0 +1 @@
+export { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "./popover.js";

package/dist/popover/popover.d.ts

@@ -0,0 +1,33 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Popover } from "@base-ui/react/popover";
+export type PopoverProps = Popover.Root.Props;
+export type PopoverTriggerProps = Popover.Trigger.Props;
+export type PopoverCloseProps = Popover.Close.Props;
+export interface PopoverContentProps extends Omit<Popover.Popup.Props, "className" | "style" | "title" | "children"> {
+  /** A heading; when set, the popover is labelled by it. */
+  title?: ReactNode;
+  /** A line under the title. */
+  description?: ReactNode;
+  /** The trigger's side to open on. Default `bottom`; it flips when there is no room. */
+  side?: Popover.Positioner.Props["side"];
+  /** Alignment along that side. Default `center`. */
+  align?: Popover.Positioner.Props["align"];
+  /** Distance from the trigger, in pixels. Default 6. */
+  sideOffset?: number;
+  /** Placement and sizing only. */
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+/** Holds a popover's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+declare function Popover$1(props: PopoverProps): ReactElement;
+/** Opens the popover. Render your own control: `render={<Button variant="soft">Filter</Button>}`. */
+export declare function PopoverTrigger(props: PopoverTriggerProps): ReactElement;
+/** Closes the popover, e.g. a footer action: `render={<Button>Apply</Button>}`. */
+export declare function PopoverClose(props: PopoverCloseProps): ReactElement;
+/**
+ * Non-modal content anchored to its trigger (06-component-specs.md, increment 4). Focus moves in on
+ * open and back to the trigger on close; Escape and an outside click close it.
+ */
+export declare function PopoverContent({ title, description, side, align, sideOffset, className, children, ...props }: PopoverContentProps): ReactElement;
+export { Popover$1 as Popover };

package/dist/popover/popover.js

@@ -0,0 +1,48 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+// src/popover/popover.tsx
+/** Holds a popover's open state: `open` / `defaultOpen` / `onOpenChange(open, details)`. */
+function Popover$1(props) {
+	return /* @__PURE__ */ jsx(Popover.Root, { ...props });
+}
+/** Opens the popover. Render your own control: `render={<Button variant="soft">Filter</Button>}`. */
+function PopoverTrigger(props) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
+}
+/** Closes the popover, e.g. a footer action: `render={<Button>Apply</Button>}`. */
+function PopoverClose(props) {
+	return /* @__PURE__ */ jsx(Popover.Close, { ...props });
+}
+/**
+* Non-modal content anchored to its trigger (06-component-specs.md, increment 4). Focus moves in on
+* open and back to the trigger on close; Escape and an outside click close it.
+*/
+function PopoverContent({ title, description, side, align, sideOffset = 6, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side,
+		align,
+		sideOffset,
+		className: "qx-popover-positioner",
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			...props,
+			className: cx("qx-popover", className),
+			"data-slot": "popover-popup",
+			children: [(title != null || description != null) && /* @__PURE__ */ jsxs("div", {
+				className: "qx-popover-header",
+				"data-slot": "popover-header",
+				children: [title != null && /* @__PURE__ */ jsx(Popover.Title, {
+					className: "qx-popover-title",
+					"data-slot": "popover-title",
+					children: title
+				}), description != null && /* @__PURE__ */ jsx(Popover.Description, {
+					className: "qx-popover-description",
+					"data-slot": "popover-description",
+					children: description
+				})]
+			}), children]
+		})
+	}) });
+}
+export { Popover$1 as Popover, PopoverClose, PopoverContent, PopoverTrigger };

package/dist/progress/index.d.ts

@@ -0,0 +1,2 @@
+import { Meter, MeterProps, MeterTone, Progress, ProgressProps } from "./progress.js";
+export { Meter, type MeterProps, type MeterTone, Progress, type ProgressProps };

package/dist/progress/index.js

@@ -0,0 +1 @@
+export { Meter, Progress } from "./progress.js";

package/dist/progress/progress.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Meter } from "@base-ui/react/meter";
+import { Progress } from "@base-ui/react/progress";
+interface BarLook {
+  /** The visible label. Without one, give it an `aria-label`. */
+  label?: ReactNode;
+  /** Show the formatted value at the end of the header. */
+  showValue?: boolean;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+export interface ProgressProps extends Omit<Progress.Root.Props, "className" | "style" | "children">, BarLook {}
+export type MeterTone = "brand" | "success" | "warning" | "danger";
+export interface MeterProps extends Omit<Meter.Root.Props, "className" | "style" | "children">, BarLook {
+  /** The indicator's colour. Default `brand`. */
+  tone?: MeterTone;
+}
+/**
+ * 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.
+ */
+declare function Progress$1({ label, showValue, locale, className, ...props }: ProgressProps): ReactElement;
+/** A measurement within a range, such as storage used. It looks like Progress; it isn't a task. */
+declare function Meter$1({ label, showValue, tone, locale, className, ...props }: MeterProps): ReactElement;
+export { Meter$1 as Meter, Progress$1 as Progress };

package/dist/progress/progress.js

@@ -0,0 +1,62 @@
+"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";
+// src/progress/progress.tsx
+/**
+* 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, 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", {
+			className: "qx-progress-header",
+			"data-slot": "progress-header",
+			children: [label != null && /* @__PURE__ */ jsx(Progress.Label, {
+				className: "qx-progress-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Progress.Value, { className: "qx-progress-value" })]
+		}), /* @__PURE__ */ jsx(Progress.Track, {
+			className: "qx-progress-track",
+			"data-slot": "progress-track",
+			children: /* @__PURE__ */ jsx(Progress.Indicator, {
+				className: "qx-progress-indicator",
+				"data-slot": "progress-indicator"
+			})
+		})]
+	});
+}
+/** 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", 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,
+		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "qx-progress-header",
+			"data-slot": "meter-header",
+			children: [label != null && /* @__PURE__ */ jsx(Meter.Label, {
+				className: "qx-progress-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Meter.Value, { className: "qx-progress-value" })]
+		}), /* @__PURE__ */ jsx(Meter.Track, {
+			className: "qx-progress-track",
+			"data-slot": "meter-track",
+			children: /* @__PURE__ */ jsx(Meter.Indicator, {
+				className: "qx-progress-indicator",
+				"data-slot": "meter-indicator"
+			})
+		})]
+	});
+}
+export { Meter$1 as Meter, Progress$1 as Progress };

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;