@qeetrix/react 0.0.2 → 0.0.4

package/dist/experimental/top-bar/top-bar.js

@@ -0,0 +1,162 @@
+"use client";
+import { cx } from "../../internal/cx.js";
+import { renderElement } from "../../internal/render.js";
+import { IconButton } from "../../button/button.js";
+import { useShellState } from "../app-shell/app-shell.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as Fragment$1, isValidElement } from "react";
+import { Button } from "@base-ui/react/button";
+import { SearchIcon } from "@qeetrix/icons/icons/search";
+import { ChevronsUpDownIcon } from "@qeetrix/icons/icons/chevrons-up-down";
+import { MenuIcon } from "@qeetrix/icons/icons/menu";
+// src/experimental/top-bar/top-bar.tsx
+/** Context items one by one, looking through fragments, so each gets its slash. */
+function items(nodes) {
+	return Children.toArray(nodes).flatMap((node) => isValidElement(node) && node.type === Fragment$1 ? items(node.props.children) : [node]);
+}
+/**
+* The scope bar of a Qeet console (07-components.md, C1): launcher, product, the scope path,
+* search, tools and account across the full width. It's black in light and dark alike (it renders
+* the dark scheme on itself), topped by a 2px Ember line.
+*/
+function TopBar({ launcher, logo, product, href, render, context, search, actions, account, className, ...props }) {
+	const shell = useShellState();
+	return /* @__PURE__ */ jsxs("header", {
+		...props,
+		className: cx("qx-top-bar", className),
+		"data-slot": "top-bar",
+		"data-qx-color-scheme": "dark",
+		"data-search": search != null ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-top-bar-start",
+				children: [
+					shell.narrow && /* @__PURE__ */ jsx("div", {
+						className: "qx-top-bar-cell",
+						children: /* @__PURE__ */ jsx(IconButton, {
+							icon: MenuIcon,
+							"aria-label": shell.strings.open,
+							tone: "neutral",
+							tooltip: false,
+							onClick: shell.openNavigation
+						})
+					}),
+					launcher != null && /* @__PURE__ */ jsx("div", {
+						className: "qx-top-bar-cell",
+						"data-slot": "top-bar-launcher",
+						children: launcher
+					}),
+					renderElement("a", render, {
+						href,
+						className: "qx-top-bar-identity",
+						"data-slot": "top-bar-identity",
+						children: /* @__PURE__ */ jsxs(Fragment, { children: [logo, /* @__PURE__ */ jsx("span", {
+							className: "qx-top-bar-product",
+							children: product
+						})] })
+					}),
+					items(context).map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "qx-top-bar-slash",
+						"aria-hidden": true
+					}), item] }, index))
+				]
+			}),
+			search != null && /* @__PURE__ */ jsx("div", {
+				className: "qx-top-bar-search",
+				"data-slot": "top-bar-search",
+				children: search
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "qx-top-bar-end",
+				children: [
+					shell.drawers.length > 0 && /* @__PURE__ */ jsx("div", {
+						role: "group",
+						"aria-label": shell.strings.tools,
+						className: "qx-top-bar-tools",
+						children: shell.drawers.map((drawer) => /* @__PURE__ */ jsx("span", {
+							className: "qx-top-bar-tool",
+							"data-badge": drawer.badge ? "" : void 0,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								icon: drawer.icon,
+								"aria-label": drawer.label,
+								"aria-pressed": shell.activeDrawer === drawer.id,
+								tone: "neutral",
+								onClick: () => shell.toggleDrawer(drawer.id)
+							})
+						}, drawer.id))
+					}),
+					actions,
+					account != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "qx-top-bar-rule",
+						"aria-hidden": true
+					}), account] })
+				]
+			})
+		]
+	});
+}
+/**
+* A step of the TopBar's scope path: the current organisation or environment, which opens a Menu
+* to switch it. Use it as the trigger: `<MenuTrigger render={<TopBarSwitcher label="Acme" />} />`.
+*/
+function TopBarSwitcher({ label, mark, status, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cx("qx-top-bar-switcher", className),
+		"data-slot": "top-bar-switcher",
+		children: [
+			mark != null && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-mark",
+				"aria-hidden": true,
+				children: mark
+			}),
+			status && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-status",
+				"data-status": status,
+				"aria-hidden": true
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-switcher-label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+				shape: "round",
+				size: 14,
+				"aria-hidden": true,
+				className: "qx-top-bar-caret"
+			})
+		]
+	});
+}
+/**
+* The global search in the TopBar: a field-shaped button that opens the product's search or command
+* palette, with its shortcut shown at the end.
+*/
+function TopBarSearch({ placeholder, shortcut, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		className: cx("qx-top-bar-search-trigger", className),
+		"data-slot": "top-bar-search-trigger",
+		children: [
+			/* @__PURE__ */ jsx(SearchIcon, {
+				shape: "round",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-top-bar-search-icon"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-search-text",
+				children: placeholder
+			}),
+			shortcut && shortcut.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "qx-top-bar-keys",
+				"aria-hidden": true,
+				children: shortcut.map((key) => /* @__PURE__ */ jsx("kbd", {
+					className: "qx-top-bar-key",
+					children: key
+				}, key))
+			})
+		]
+	});
+}
+export { TopBar, TopBarSearch, TopBarSwitcher };

package/dist/field/field.d.ts

@@ -1,3 +1,4 @@
+import { QeetrixMessages } from "../internal/messages.js";
 import { CSSProperties, ReactElement, ReactNode } from "react";
 import { Field } from "@base-ui/react/field";
 /** The help text and error every labelled field shares. */
@@ -17,6 +18,8 @@ export interface FieldProps extends Omit<Field.Root.Props, "className" | "style"
   optional?: boolean;
   /** Hides the label visually and keeps it for assistive technology. Only for a toolbar search. */
   hideLabel?: boolean;
+  /** This field's strings, over QeetrixProvider's and the English defaults. */
+  messages?: Partial<QeetrixMessages["field"]>;
   /** Placement only (margin, width, grid placement). */
   className?: string;
   style?: CSSProperties;
@@ -24,5 +27,5 @@ export interface FieldProps extends Omit<Field.Root.Props, "className" | "style"
   children?: ReactNode;
 }
 /** The label, help text and error for one control (06-component-specs.md §2). */
-declare function Field$1({ label, description, error, optional, hideLabel, invalid, className, children, ...props }: FieldProps): ReactElement;
+declare function Field$1({ label, description, error, optional, hideLabel, invalid, messages, className, children, ...props }: FieldProps): ReactElement;
 export { Field$1 as Field };

package/dist/field/field.js

@@ -1,6 +1,6 @@
 "use client";
 import { cx } from "../internal/cx.js";
-import { messages } from "../internal/messages.js";
+import { useMessages } from "../provider/provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext } from "react";
 import { Field } from "@base-ui/react/field";
@@ -37,7 +37,7 @@ function FieldMessages({ description, error }) {
 	})] });
 }
 /** The label text, with "(optional)" when the field may be left empty. */
-function labelText(label, optional) {
+function labelText(label, optional, optionalText) {
 	if (!optional) return label;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		label,
@@ -45,12 +45,13 @@ function labelText(label, optional) {
 		/* @__PURE__ */ jsx("span", {
 			className: "qx-field-optional",
 			"data-slot": "field-optional",
-			children: messages.field.optional
+			children: optionalText
 		})
 	] });
 }
 /** The label, help text and error for one control (06-component-specs.md §2). */
-function Field$1({ label, description, error, optional, hideLabel, invalid, className, children, ...props }) {
+function Field$1({ label, description, error, optional, hideLabel, invalid, messages, className, children, ...props }) {
+	const strings = useMessages("field", messages);
 	return /* @__PURE__ */ jsxs(Field.Root, {
 		...props,
 		invalid: invalid ?? (error != null ? true : void 0),
@@ -61,7 +62,7 @@ function Field$1({ label, description, error, optional, hideLabel, invalid, clas
 				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(InFieldContext, {
 				value: true,

package/dist/format/format.d.ts

@@ -0,0 +1,12 @@
+/** A number in the locale's digits and grouping: 1234567 → "12,34,567" in `en-IN`. */
+export declare function formatNumber(value: number, locale?: string, options?: Intl.NumberFormatOptions): string;
+/**
+ * An amount of money: `formatCurrency(124500, "INR")` → "₹1,24,500.00". Whole amounts can drop the
+ * decimals with `{ maximumFractionDigits: 0 }`.
+ */
+export declare function formatCurrency(value: number, currency: string, locale?: string, options?: Intl.NumberFormatOptions): string;
+/**
+ * How long ago or how soon, in the largest whole unit: "2 minutes ago", "in 3 days", "yesterday".
+ * `now` is a parameter so server and client render the same text.
+ */
+export declare function formatRelativeTime(date: Date | number, locale?: string, now?: Date | number): string;

package/dist/format/format.js

@@ -0,0 +1,50 @@
+import { DEFAULT_LOCALE } from "../internal/messages.js";
+// src/format/format.ts
+/**
+* Locale-aware formatting on Intl (decision D-13). Pure and server-safe: on the client, pass
+* `useLocale()`. Formatters are cached per locale and options, since constructing one is the slow
+* part.
+*/
+const cache = /* @__PURE__ */ new Map();
+function cached(key, create) {
+	let formatter = cache.get(key);
+	if (!formatter) {
+		formatter = create();
+		cache.set(key, formatter);
+	}
+	return formatter;
+}
+/** A number in the locale's digits and grouping: 1234567 → "12,34,567" in `en-IN`. */
+function formatNumber(value, locale = DEFAULT_LOCALE, options = {}) {
+	return cached(`n|${locale}|${JSON.stringify(options)}`, () => new Intl.NumberFormat(locale, options)).format(value);
+}
+/**
+* An amount of money: `formatCurrency(124500, "INR")` → "₹1,24,500.00". Whole amounts can drop the
+* decimals with `{ maximumFractionDigits: 0 }`.
+*/
+function formatCurrency(value, currency, locale = DEFAULT_LOCALE, options = {}) {
+	return formatNumber(value, locale, {
+		style: "currency",
+		currency,
+		...options
+	});
+}
+const UNITS = [
+	["year", 31536e6],
+	["month", 2592e6],
+	["week", 6048e5],
+	["day", 864e5],
+	["hour", 36e5],
+	["minute", 6e4],
+	["second", 1e3]
+];
+/**
+* How long ago or how soon, in the largest whole unit: "2 minutes ago", "in 3 days", "yesterday".
+* `now` is a parameter so server and client render the same text.
+*/
+function formatRelativeTime(date, locale = DEFAULT_LOCALE, now = Date.now()) {
+	const delta = Number(date) - Number(now);
+	const [unit, size] = UNITS.find(([, ms]) => Math.abs(delta) >= ms) ?? ["second", 1e3];
+	return cached(`r|${locale}`, () => new Intl.RelativeTimeFormat(locale, { numeric: "auto" })).format(Math.round(delta / size), unit);
+}
+export { formatCurrency, formatNumber, formatRelativeTime };

package/dist/format/index.d.ts

@@ -0,0 +1,2 @@
+import { formatCurrency, formatNumber, formatRelativeTime } from "./format.js";
+export { formatCurrency, formatNumber, formatRelativeTime };

package/dist/format/index.js

@@ -0,0 +1 @@
+export { formatCurrency, formatNumber, formatRelativeTime } from "./format.js";

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import { Button, ButtonProps, ButtonTone, ButtonVariant, IconButton, IconButtonP
 import "./button/index.js";
 import { Card, CardProps } from "./card/card.js";
 import "./card/index.js";
+import { QeetrixMessages, QeetrixMessagesInput } from "./internal/messages.js";
 import { Field, FieldMessageProps, FieldProps } from "./field/field.js";
 import { ChoiceLabelProps, ChoiceOrientation } from "./field/choice.js";
 import { Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps } from "./checkbox/checkbox.js";
@@ -23,16 +24,17 @@ import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, Dia
 import "./dialog/index.js";
 import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerFooter, DrawerFooterProps, DrawerProps, DrawerSide, DrawerSize, DrawerTrigger, DrawerTriggerProps } from "./drawer/drawer.js";
 import "./drawer/index.js";
+import { Input, InputProps, Textarea, TextareaProps } from "./input/input.js";
 import "./field/index.js";
 import { Fieldset, FieldsetProps } from "./fieldset/fieldset.js";
 import "./fieldset/index.js";
+import { formatCurrency, formatNumber, formatRelativeTime } from "./format/format.js";
 import { Grid, GridAlign, GridColumnCount, GridColumns, GridProps } from "./grid/grid.js";
 import "./grid/index.js";
 import "./heading/index.js";
 import { FlowJustify, Stack, StackAlign, StackProps } from "./stack/stack.js";
 import { Inline, InlineAlign, InlineProps } from "./inline/inline.js";
 import "./inline/index.js";
-import { Input, InputProps, Textarea, TextareaProps } from "./input/input.js";
 import "./input/index.js";
 import { Link, LinkProps, LinkTone } from "./link/link.js";
 import "./link/index.js";
@@ -42,6 +44,8 @@ import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverConten
 import "./popover/index.js";
 import { Meter, MeterProps, MeterTone, Progress, ProgressProps } from "./progress/progress.js";
 import "./progress/index.js";
+import { ColorScheme, ColorSchemeState, Direction, QeetrixProvider, QeetrixProviderProps, ResolvedColorScheme, useColorScheme, useLocale } from "./provider/provider.js";
+import "./provider/index.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio/radio.js";
 import "./radio/index.js";
 import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./scroll-area/scroll-area.js";
@@ -77,4 +81,4 @@ import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./
 import "./tooltip/index.js";
 import { VisuallyHidden, VisuallyHiddenProps } from "./visually-hidden/visually-hidden.js";
 import "./visually-hidden/index.js";
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, Button, type ButtonProps, type ButtonTone, type ButtonVariant, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceLabelProps, type ChoiceOrientation, Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ControlSize, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogFooter, type DialogFooterProps, type DialogIntent, type DialogProps, type DialogSize, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, type DrawerProps, type DrawerSide, type DrawerSize, DrawerTrigger, type DrawerTriggerProps, Field, type FieldMessageProps, type FieldProps, Fieldset, type FieldsetProps, type FlowJustify, Grid, type GridAlign, type GridColumnCount, type GridColumns, type GridProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingTone, IconButton, type IconButtonProps, Inline, type InlineAlign, type InlineProps, Input, type InputProps, type Inset, Link, type LinkProps, type LinkTone, 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, Meter, type MeterProps, type MeterTone, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, type QeetrixIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RenderProp, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, Select, type SelectItem, type SelectItemGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, Skeleton, type SkeletonProps, type SkeletonVariant, SkipLink, type SkipLinkProps, Slider, type SliderProps, type Space, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone, Stack, type StackAlign, type StackProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, Text, type TextAlign, TextField, type TextFieldProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, type ToastApi, type ToastOptions, type ToastPromiseOptions, ToastProvider, type ToastProviderProps, type ToastTone, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleGroupVariant, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, type Truncate, VisuallyHidden, type VisuallyHiddenProps, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, Button, type ButtonProps, type ButtonTone, type ButtonVariant, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceLabelProps, type ChoiceOrientation, Collapsible, CollapsiblePanel, type CollapsiblePanelProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColorScheme, type ColorSchemeState, type ControlSize, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogFooter, type DialogFooterProps, type DialogIntent, type DialogProps, type DialogSize, DialogTrigger, type DialogTriggerProps, type Direction, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, type DrawerFooterProps, type DrawerProps, type DrawerSide, type DrawerSize, DrawerTrigger, type DrawerTriggerProps, Field, type FieldMessageProps, type FieldProps, Fieldset, type FieldsetProps, type FlowJustify, Grid, type GridAlign, type GridColumnCount, type GridColumns, type GridProps, Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingTone, IconButton, type IconButtonProps, Inline, type InlineAlign, type InlineProps, Input, type InputProps, type Inset, Link, type LinkProps, type LinkTone, 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, Meter, type MeterProps, type MeterTone, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, type QeetrixIcon, type QeetrixMessages, type QeetrixMessagesInput, QeetrixProvider, type QeetrixProviderProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RenderProp, type ResolvedColorScheme, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, Select, type SelectItem, type SelectItemGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorTone, Skeleton, type SkeletonProps, type SkeletonVariant, SkipLink, type SkipLinkProps, Slider, type SliderProps, type Space, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone, Stack, type StackAlign, type StackProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableAlign, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, Text, type TextAlign, TextField, type TextFieldProps, type TextProps, type TextSize, type TextTone, type TextWeight, Textarea, type TextareaProps, type ToastApi, type ToastOptions, type ToastPromiseOptions, ToastProvider, type ToastProviderProps, type ToastTone, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleGroupVariant, type ToggleProps, Tooltip, type TooltipProps, TooltipProvider, type TooltipProviderProps, type Truncate, VisuallyHidden, type VisuallyHiddenProps, formatCurrency, formatNumber, formatRelativeTime, useColorScheme, useLocale, useToast };

package/dist/index.js

@@ -7,11 +7,13 @@ import { Tooltip, TooltipProvider } from "./tooltip/tooltip.js";
 import { Button, IconButton } from "./button/button.js";
 import { Heading } from "./heading/heading.js";
 import { Card } from "./card/card.js";
+import { QeetrixProvider, useColorScheme, useLocale } from "./provider/provider.js";
 import { Field } from "./field/field.js";
 import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger } from "./dialog/dialog.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger } from "./drawer/drawer.js";
 import { Fieldset } from "./fieldset/fieldset.js";
+import { formatCurrency, formatNumber, formatRelativeTime } from "./format/format.js";
 import { Grid } from "./grid/grid.js";
 import { Inline } from "./inline/inline.js";
 import { Input, Textarea } from "./input/input.js";
@@ -35,4 +37,4 @@ import { Text } from "./text/text.js";
 import { TextField } from "./text-field/text-field.js";
 import { ToastProvider, useToast } from "./toast/toast.js";
 import { Toggle, ToggleGroup } from "./toggle/toggle.js";
-export { Accordion, AccordionItem, Avatar, Badge, Box, Button, Card, Checkbox, CheckboxGroup, Collapsible, CollapsiblePanel, CollapsibleTrigger, Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger, Field, Fieldset, Grid, Heading, IconButton, Inline, Input, Link, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, ScrollArea, Select, Separator, Skeleton, SkipLink, Slider, Spinner, Stack, Switch, Tab, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, Text, TextField, Textarea, ToastProvider, Toggle, ToggleGroup, Tooltip, TooltipProvider, VisuallyHidden, useToast };
+export { Accordion, AccordionItem, Avatar, Badge, Box, Button, Card, Checkbox, CheckboxGroup, Collapsible, CollapsiblePanel, CollapsibleTrigger, Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerTrigger, Field, Fieldset, Grid, Heading, IconButton, Inline, Input, Link, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Meter, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, QeetrixProvider, Radio, RadioGroup, ScrollArea, Select, Separator, Skeleton, SkipLink, Slider, Spinner, Stack, Switch, Tab, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, Text, TextField, Textarea, ToastProvider, Toggle, ToggleGroup, Tooltip, TooltipProvider, VisuallyHidden, formatCurrency, formatNumber, formatRelativeTime, useColorScheme, useLocale, useToast };

package/dist/internal/media.js

@@ -0,0 +1,15 @@
+"use client";
+import { useSyncExternalStore } from "react";
+// src/internal/media.ts
+/**
+* Whether a media query matches, kept in sync as it changes. On the server, and in the first client
+* render, it's `serverValue`, so server and client markup agree.
+*/
+function useMediaQuery(query, serverValue) {
+	return useSyncExternalStore((onChange) => {
+		const list = window.matchMedia(query);
+		list.addEventListener("change", onChange);
+		return () => list.removeEventListener("change", onChange);
+	}, () => window.matchMedia(query).matches, () => serverValue);
+}
+export { useMediaQuery };

package/dist/internal/messages.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Every user-facing string in the library, in English (decision D-13). A string resolves from the
+ * component's own `messages` prop, then QeetrixProvider, then these defaults. Locale packs
+ * (src/locales/) are typed as the complete catalogue, so a missing key fails the typecheck.
+ */
+export declare const messages: {
+  readonly skipLink: {
+    readonly label: "Skip to main content";
+  };
+  readonly spinner: {
+    readonly label: "Loading";
+  };
+  readonly link: {
+    readonly external: "(opens in a new tab)";
+  };
+  readonly field: {
+    readonly optional: "(optional)";
+  };
+  readonly overlay: {
+    readonly close: "Close";
+  };
+  readonly toast: {
+    readonly close: "Dismiss";
+    readonly region: "Notifications";
+  };
+  readonly slider: {
+    readonly minimum: "Minimum";
+    readonly maximum: "Maximum";
+  };
+  readonly appShell: {
+    readonly collapse: "Collapse";
+    readonly expand: "Expand";
+    readonly open: "Open navigation";
+    readonly navigation: "Navigation";
+    readonly tools: "Tools";
+    readonly closePanel: "Close panel";
+  };
+  readonly sidebar: {
+    readonly filter: "Filter navigation";
+    readonly noMatches: "No pages match";
+  };
+  readonly breadcrumb: {
+    readonly label: "Breadcrumb";
+  };
+  readonly dataState: {
+    readonly errorTitle: "Couldn't load this";
+    readonly errorDescription: "Try again, or check your connection.";
+    readonly retry: "Try again";
+  };
+  readonly copyButton: {
+    readonly copy: "Copy";
+    readonly copied: "Copied";
+    readonly failed: "Couldn't copy";
+  };
+  readonly alert: {
+    readonly dismiss: "Dismiss";
+    readonly info: "Information";
+    readonly success: "Success";
+    readonly warning: "Warning";
+    readonly danger: "Error";
+  };
+  readonly passwordInput: {
+    readonly show: "Show password";
+    readonly shown: "Password shown";
+    readonly hidden: "Password hidden";
+    readonly capsLock: "Caps Lock is on";
+  };
+  readonly otpInput: {
+    readonly character: "Character {index} of {length}";
+  };
+};
+/** The complete catalogue, as a locale pack provides it. */
+export type QeetrixMessages = { [Group in keyof typeof messages]: { [Key in keyof (typeof messages)[Group]]: string; }; };
+/** Any subset of the catalogue, group by group: what a provider or a component takes. */
+export type QeetrixMessagesInput = { [Group in keyof QeetrixMessages]?: Partial<QeetrixMessages[Group]>; };

package/dist/internal/messages.js

@@ -1,8 +1,8 @@
 // src/internal/messages.ts
 /**
-* The default English strings (decision D-13). Components take overrides through their own props;
-* the provider and locale packs arrive with the first component that needs a translated string it
-* can't take as a prop.
+* Every user-facing string in the library, in English (decision D-13). A string resolves from the
+* component's own `messages` prop, then QeetrixProvider, then these defaults. Locale packs
+* (src/locales/) are typed as the complete catalogue, so a missing key fails the typecheck.
 */
 const messages = {
 	skipLink: { label: "Skip to main content" },
@@ -17,6 +17,45 @@ const messages = {
 	slider: {
 		minimum: "Minimum",
 		maximum: "Maximum"
-	}
+	},
+	appShell: {
+		collapse: "Collapse",
+		expand: "Expand",
+		open: "Open navigation",
+		navigation: "Navigation",
+		tools: "Tools",
+		closePanel: "Close panel"
+	},
+	sidebar: {
+		filter: "Filter navigation",
+		noMatches: "No pages match"
+	},
+	breadcrumb: { label: "Breadcrumb" },
+	dataState: {
+		errorTitle: "Couldn't load this",
+		errorDescription: "Try again, or check your connection.",
+		retry: "Try again"
+	},
+	copyButton: {
+		copy: "Copy",
+		copied: "Copied",
+		failed: "Couldn't copy"
+	},
+	alert: {
+		dismiss: "Dismiss",
+		info: "Information",
+		success: "Success",
+		warning: "Warning",
+		danger: "Error"
+	},
+	passwordInput: {
+		show: "Show password",
+		shown: "Password shown",
+		hidden: "Password hidden",
+		capsLock: "Caps Lock is on"
+	},
+	otpInput: { character: "Character {index} of {length}" }
 };
-export { messages };
+/** The default locale: English with Indian number grouping (lakh, crore). */
+const DEFAULT_LOCALE = "en-IN";
+export { DEFAULT_LOCALE, messages };

package/dist/link/link.d.ts

@@ -1,4 +1,5 @@
 import { RenderProp } from "../internal/render.js";
+import { QeetrixMessages } from "../internal/messages.js";
 import { ComponentProps, ReactElement } from "react";
 export type LinkTone = "default" | "subtle" | "inherit";
 export interface LinkProps extends ComponentProps<"a"> {
@@ -8,6 +9,11 @@ export interface LinkProps extends ComponentProps<"a"> {
   external?: boolean;
   /** Render a router link, e.g. `render={<RouterLink to="/x" />}`. */
   render?: RenderProp;
+  /**
+   * The screen-reader note on an external link, in place of "(opens in a new tab)". Link is
+   * server-safe, so QeetrixProvider's strings don't reach it: pass them here.
+   */
+  messages?: Partial<QeetrixMessages["link"]>;
 }
 /** Navigation to a page, a section, a file or a site. An action that changes data is a Button. */
-export declare function Link({ tone, external, render, rel, className, children, ...props }: LinkProps): ReactElement;
+export declare function Link({ tone, external, render, rel, messages, className, children, ...props }: LinkProps): ReactElement;

package/dist/link/link.js

@@ -6,7 +6,8 @@ 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, className, children, ...props }) {
+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,
@@ -24,7 +25,7 @@ function Link({ tone, external, render, rel, className, children, ...props }) {
 				className: "qx-link-icon",
 				"data-slot": "link-icon"
 			}),
-			/* @__PURE__ */ jsxs(VisuallyHidden, { children: [" ", messages.link.external] })
+			/* @__PURE__ */ jsxs(VisuallyHidden, { children: [" ", externalNote] })
 		] }) : children
 	});
 }

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/progress/progress.d.ts

@@ -20,7 +20,7 @@ export interface MeterProps extends Omit<Meter.Root.Props, "className" | "style"
  * 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, className, ...props }: ProgressProps): ReactElement;
+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, className, ...props }: MeterProps): ReactElement;
+declare function Meter$1({ label, showValue, tone, locale, className, ...props }: MeterProps): ReactElement;
 export { Meter$1 as Meter, Progress$1 as Progress };