@qeetrix/react 0.0.1 → 0.0.4

package/dist/heading/heading.js

@@ -0,0 +1,30 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { truncation } from "../internal/text.js";
+// src/heading/heading.tsx
+const DEFAULT_SIZE = {
+	1: "heading-lg",
+	2: "heading-md",
+	3: "heading-sm",
+	4: "title-lg",
+	5: "title-md",
+	6: "title-sm"
+};
+/** A section heading: the level sets the element, the size sets the look. */
+function Heading({ level, size, tone, truncate, align, render, className, style, ...props }) {
+	const clamp = truncation(truncate);
+	return renderElement(`h${level}`, render, {
+		...props,
+		className: cx("qx-heading", className),
+		style: clamp.style || style ? {
+			...clamp.style,
+			...style
+		} : void 0,
+		"data-slot": "heading",
+		"data-size": size ?? DEFAULT_SIZE[level],
+		"data-tone": tone,
+		"data-truncate": clamp.attribute,
+		"data-align": align
+	});
+}
+export { Heading };

package/dist/heading/index.d.ts

@@ -0,0 +1,2 @@
+import { Heading, HeadingLevel, HeadingProps, HeadingSize, HeadingTone } from "./heading.js";
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize, type HeadingTone };

package/dist/heading/index.js

@@ -0,0 +1 @@
+export { Heading } from "./heading.js";

package/dist/index.d.ts

@@ -1 +1,84 @@
-export {}
+import { RenderProp } from "./internal/render.js";
+import { Inset, Space, TextAlign } from "./internal/space.js";
+import { TextTone, Truncate } from "./internal/text.js";
+import { Heading, HeadingLevel, HeadingProps, HeadingSize, HeadingTone } from "./heading/heading.js";
+import { Accordion, AccordionItem, AccordionItemProps, AccordionProps, Collapsible, CollapsiblePanel, CollapsiblePanelProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps } from "./accordion/accordion.js";
+import "./accordion/index.js";
+import { Avatar, AvatarProps, AvatarSize } from "./avatar/avatar.js";
+import "./avatar/index.js";
+import { ControlSize, QeetrixIcon } from "./internal/control.js";
+import { Badge, BadgeProps, BadgeTone } from "./badge/badge.js";
+import "./badge/index.js";
+import { Box, BoxBackground, BoxBorder, BoxProps, BoxRadius } from "./box/box.js";
+import "./box/index.js";
+import { Button, ButtonProps, ButtonTone, ButtonVariant, IconButton, IconButtonProps } from "./button/button.js";
+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";
+import "./checkbox/index.js";
+import { Dialog, DialogBody, DialogBodyProps, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogFooter, DialogFooterProps, DialogIntent, DialogProps, DialogSize, DialogTrigger, DialogTriggerProps } from "./dialog/dialog.js";
+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/index.js";
+import { Link, LinkProps, LinkTone } from "./link/link.js";
+import "./link/index.js";
+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/menu.js";
+import "./menu/index.js";
+import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from "./popover/popover.js";
+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";
+import "./scroll-area/index.js";
+import { Select, SelectItem, SelectItemGroup, SelectProps } from "./select/select.js";
+import "./select/index.js";
+import { Separator, SeparatorOrientation, SeparatorProps, SeparatorTone } from "./separator/separator.js";
+import "./separator/index.js";
+import { Skeleton, SkeletonProps, SkeletonVariant } from "./skeleton/skeleton.js";
+import "./skeleton/index.js";
+import { SkipLink, SkipLinkProps } from "./skip-link/skip-link.js";
+import "./skip-link/index.js";
+import { Slider, SliderProps } from "./slider/slider.js";
+import "./slider/index.js";
+import { Spinner, SpinnerProps, SpinnerSize, SpinnerTone } from "./spinner/spinner.js";
+import "./spinner/index.js";
+import "./stack/index.js";
+import { Switch, SwitchProps } from "./switch/switch.js";
+import "./switch/index.js";
+import { Table, TableAlign, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./table/table.js";
+import "./table/index.js";
+import { Tab, TabProps, Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsProps } from "./tabs/tabs.js";
+import "./tabs/index.js";
+import { Text, TextProps, TextSize, TextWeight } from "./text/text.js";
+import "./text/index.js";
+import { TextField, TextFieldProps } from "./text-field/text-field.js";
+import "./text-field/index.js";
+import { ToastApi, ToastOptions, ToastPromiseOptions, ToastProvider, ToastProviderProps, ToastTone, useToast } from "./toast/toast.js";
+import "./toast/index.js";
+import { Toggle, ToggleGroup, ToggleGroupProps, ToggleGroupVariant, ToggleProps } from "./toggle/toggle.js";
+import "./toggle/index.js";
+import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./tooltip/tooltip.js";
+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 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

@@ -0,0 +1,40 @@
+import { Accordion, AccordionItem, Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./accordion/accordion.js";
+import { Avatar } from "./avatar/avatar.js";
+import { Badge } from "./badge/badge.js";
+import { Box } from "./box/box.js";
+import { Spinner } from "./spinner/spinner.js";
+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";
+import { VisuallyHidden } from "./visually-hidden/visually-hidden.js";
+import { Link } from "./link/link.js";
+import { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger } from "./menu/menu.js";
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from "./popover/popover.js";
+import { Meter, Progress } from "./progress/progress.js";
+import { Radio, RadioGroup } from "./radio/radio.js";
+import { ScrollArea } from "./scroll-area/scroll-area.js";
+import { Select } from "./select/select.js";
+import { Separator } from "./separator/separator.js";
+import { Skeleton } from "./skeleton/skeleton.js";
+import { SkipLink } from "./skip-link/skip-link.js";
+import { Slider } from "./slider/slider.js";
+import { Stack } from "./stack/stack.js";
+import { Switch } from "./switch/switch.js";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "./table/table.js";
+import { Tab, Tabs, TabsList, TabsPanel } from "./tabs/tabs.js";
+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, 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/inline/index.d.ts

@@ -0,0 +1,2 @@
+import { Inline, InlineAlign, InlineProps } from "./inline.js";
+export { Inline, type InlineAlign, type InlineProps };

package/dist/inline/index.js

@@ -0,0 +1 @@
+export { Inline } from "./inline.js";

package/dist/inline/inline.d.ts

@@ -0,0 +1,19 @@
+import { RenderProp } from "../internal/render.js";
+import { Space } from "../internal/space.js";
+import { FlowJustify } from "../stack/stack.js";
+import { ComponentProps, ReactElement } from "react";
+export type InlineAlign = "start" | "center" | "end" | "baseline" | "stretch";
+export interface InlineProps extends ComponentProps<"div"> {
+  /** Space between children, from the space scale. Default `sm` (8px). */
+  gap?: Space;
+  /** Cross-axis alignment. Default `center`. */
+  align?: InlineAlign;
+  /** Main-axis distribution. */
+  justify?: FlowJustify;
+  /** Wrap onto new lines when space runs out. Default `true`. */
+  wrap?: boolean;
+  /** Render a different element, e.g. `<ul />`. */
+  render?: RenderProp;
+}
+/** A horizontal flow with token gaps that wraps by default. */
+export declare function Inline({ gap, align, justify, wrap, render, className, ...props }: InlineProps): ReactElement;

package/dist/inline/inline.js

@@ -0,0 +1,16 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/inline/inline.tsx
+/** A horizontal flow with token gaps that wraps by default. */
+function Inline({ gap = "sm", align, justify, wrap = true, render, className, ...props }) {
+	return renderElement("div", render, {
+		...props,
+		className: cx("qx-inline", className),
+		"data-slot": "inline",
+		"data-gap": gap,
+		"data-align": align,
+		"data-justify": justify,
+		"data-wrap": wrap ? void 0 : "false"
+	});
+}
+export { Inline };

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+import { Input, InputProps, Textarea, TextareaProps } from "./input.js";
+export { Input, type InputProps, Textarea, type TextareaProps };

package/dist/input/index.js

@@ -0,0 +1 @@
+export { Input, Textarea } from "./input.js";

package/dist/input/input.d.ts

@@ -0,0 +1,37 @@
+import { QeetrixIcon } from "../internal/control.js";
+import { CSSProperties, ComponentProps, ReactElement, ReactNode } from "react";
+import { Input } from "@base-ui/react/input";
+export interface InputProps extends Omit<Input.Props, "className" | "style" | "render"> {
+  /** A leading icon from `@qeetrix/icons` (search, mail): sharp, 16px, decorative. */
+  icon?: QeetrixIcon;
+  /** Before the value: a text affix such as ₹. */
+  startAdornment?: ReactNode;
+  /** After the value: an affix such as % or .qeet.in, or a tool such as a show-password button. */
+  endAdornment?: ReactNode;
+  /** Placement of the box only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * The single-line text control: a filled box with a bottom line (06-component-specs.md §2). `ref`
+ * and every other prop go to the `<input>`; `className` and `style` place the box.
+ */
+declare function Input$1({ icon: Icon, startAdornment, endAdornment, className, style, ...props }: InputProps): ReactElement;
+export interface TextareaProps extends Omit<ComponentProps<"textarea">, "defaultValue" | "value" | "rows" | "children"> {
+  /** Controlled value. */
+  value?: string;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the new value and Base UI's event details. */
+  onValueChange?: Input.Props["onValueChange"];
+  /** The height before it grows, in lines. Default 3. */
+  rows?: number;
+  /** The most lines it grows to; after that it scrolls. Default: no limit. */
+  maxRows?: number;
+}
+/**
+ * Multi-line text with the Input look. It grows with its content where the browser supports CSS
+ * `field-sizing`; elsewhere it keeps `rows` and can be dragged taller. No script measures it.
+ */
+export declare function Textarea({ rows, maxRows, className, style, ...props }: TextareaProps): ReactElement;
+export { Input$1 as Input };

package/dist/input/input.js

@@ -0,0 +1,63 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Input } from "@base-ui/react/input";
+// src/input/input.tsx
+/**
+* The single-line text control: a filled box with a bottom line (06-component-specs.md §2). `ref`
+* and every other prop go to the `<input>`; `className` and `style` place the box.
+*/
+function Input$1({ icon: Icon, startAdornment, endAdornment, className, style, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("qx-input", className),
+		style,
+		"data-slot": "input",
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true,
+				className: "qx-input-icon",
+				"data-slot": "input-icon"
+			}),
+			startAdornment != null && /* @__PURE__ */ jsx("span", {
+				className: "qx-input-adornment",
+				"data-slot": "input-start",
+				children: startAdornment
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				...props,
+				className: "qx-input-control",
+				"data-slot": "input-control"
+			}),
+			endAdornment != null && /* @__PURE__ */ jsx("span", {
+				className: "qx-input-adornment",
+				"data-slot": "input-end",
+				children: endAdornment
+			})
+		]
+	});
+}
+/**
+* Multi-line text with the Input look. It grows with its content where the browser supports CSS
+* `field-sizing`; elsewhere it keeps `rows` and can be dragged taller. No script measures it.
+*/
+function Textarea({ rows = 3, maxRows, className, style, ...props }) {
+	const lines = {
+		"--qx-textarea-rows": rows,
+		...maxRows === void 0 ? {} : { "--qx-textarea-max-rows": maxRows }
+	};
+	return /* @__PURE__ */ jsx(Field.Control, {
+		...props,
+		render: /* @__PURE__ */ jsx("textarea", { rows }),
+		className: cx("qx-input qx-textarea", className),
+		style: {
+			...lines,
+			...style
+		},
+		"data-slot": "textarea",
+		"data-max-rows": maxRows === void 0 ? void 0 : ""
+	});
+}
+export { Input$1 as Input, Textarea };

package/dist/internal/control.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from "react";
+import { IconProps } from "@qeetrix/icons";
+/** The control heights: sm, md and lg follow the density tokens (size.control.*). */
+export type ControlSize = "sm" | "md" | "lg";
+/**
+ * A component from `@qeetrix/icons`: every icon has an outline drawing, so any icon fits. Qeetrix
+ * renders it in the sharp shape at the right size.
+ */
+export type QeetrixIcon = ComponentType<IconProps<"outline">>;

package/dist/internal/control.js

@@ -0,0 +1,4 @@
+// src/internal/control.ts
+/** Icon size inside a control: 16px, or 20px in a large control. */
+const iconSize = (size) => size === "lg" ? 20 : 16;
+export { iconSize };

package/dist/internal/cx.js

@@ -0,0 +1,7 @@
+// src/internal/cx.ts
+/** Join class names, skipping empty values. */
+function cx(...names) {
+	const joined = names.filter(Boolean).join(" ");
+	return joined === "" ? void 0 : joined;
+}
+export { cx };

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

@@ -0,0 +1,61 @@
+// src/internal/messages.ts
+/**
+* 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" },
+	spinner: { label: "Loading" },
+	link: { external: "(opens in a new tab)" },
+	field: { optional: "(optional)" },
+	overlay: { close: "Close" },
+	toast: {
+		close: "Dismiss",
+		region: "Notifications"
+	},
+	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}" }
+};
+/** The default locale: English with Indian number grouping (lakh, crore). */
+const DEFAULT_LOCALE = "en-IN";
+export { DEFAULT_LOCALE, messages };

package/dist/internal/refs.js

@@ -0,0 +1,23 @@
+// src/internal/refs.ts
+/** One ref callback that sets every given ref, and clears them all on detach. */
+function mergeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => {
+			if (typeof ref === "function") {
+				const cleanup = ref(node);
+				return typeof cleanup === "function" ? cleanup : () => ref(null);
+			}
+			if (ref) {
+				ref.current = node;
+				return () => {
+					ref.current = null;
+				};
+			}
+			return () => {};
+		});
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+		};
+	};
+}
+export { mergeRefs };

package/dist/internal/render.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+/**
+ * An element to render instead of a component's default one: `render={<section />}`. It receives the
+ * component's props; its own props win, and class names and styles merge (decision D-12).
+ */
+export type RenderProp = ReactElement<Record<string, unknown>>;

package/dist/internal/render.js

@@ -0,0 +1,22 @@
+import { cx } from "./cx.js";
+import { cloneElement, createElement, isValidElement } from "react";
+// src/internal/render.ts
+/**
+* Render `tag`, or the `render` element with the props merged in. Built on cloneElement rather than a
+* hook, so server-safe primitives stay server-safe.
+*/
+function renderElement(tag, render, props) {
+	if (render === void 0 || !isValidElement(render)) return createElement(tag, props);
+	const own = render.props;
+	return cloneElement(render, {
+		...props,
+		...own,
+		className: cx(props.className, own.className),
+		style: props.style || own.style ? {
+			...props.style,
+			...own.style
+		} : void 0,
+		children: own.children ?? props.children
+	});
+}
+export { renderElement };

package/dist/internal/space.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The space scale shared by Box, Stack, Inline and Grid: none, then the gap tokens (xs–xl), then the
+ * layout tokens (2xl–4xl). 0 · 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64px.
+ */
+export type Space = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+/** Padding inside a surface: the inset tokens. 0 · 4 · 8 · 12 · 16 · 24px. */
+export type Inset = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+/** Text alignment, in logical directions so it follows right-to-left layouts. */
+export type TextAlign = "start" | "center" | "end";

package/dist/internal/text.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from "react";
+/** Text colours from the tokens; unset means the text inherits its colour. */
+export type TextTone = "default" | "subtle" | "subtlest" | "disabled" | "inverse" | "brand" | "danger" | "success" | "warning" | "info";
+/** `true` for one line with an ellipsis, or a number of lines (2 or more) before clamping. */
+export type Truncate = boolean | number;

package/dist/internal/text.js

@@ -0,0 +1,18 @@
+// src/internal/text.ts
+/** The data attribute and line-count variable for a truncate prop. */
+function truncation(truncate) {
+	if (truncate === void 0 || truncate === false) return {
+		attribute: void 0,
+		style: void 0
+	};
+	const lines = truncate === true ? 1 : Math.max(1, Math.trunc(truncate) || 1);
+	if (lines === 1) return {
+		attribute: "line",
+		style: void 0
+	};
+	return {
+		attribute: "lines",
+		style: { "--qx-text-lines": lines }
+	};
+}
+export { truncation };

package/dist/link/index.d.ts

@@ -0,0 +1,2 @@
+import { Link, LinkProps, LinkTone } from "./link.js";
+export { Link, type LinkProps, type LinkTone };

package/dist/link/index.js

@@ -0,0 +1 @@
+export { Link } from "./link.js";

package/dist/link/link.d.ts

@@ -0,0 +1,19 @@
+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"> {
+  /** `default` (link colour), `subtle` (footers, metadata) or `inherit`. */
+  tone?: LinkTone;
+  /** Opens in a new tab: adds `rel="noopener noreferrer"`, an arrow and "(opens in a new tab)". */
+  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, messages, className, children, ...props }: LinkProps): ReactElement;