@qeetrix/react 0.0.1 → 0.0.4

package/dist/provider/provider.js

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

package/dist/radio/index.d.ts

@@ -0,0 +1,2 @@
+import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio.js";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioProps };

package/dist/radio/index.js

@@ -0,0 +1 @@
+export { Radio, RadioGroup } from "./radio.js";

package/dist/radio/radio.d.ts

@@ -0,0 +1,31 @@
+import { FieldMessageProps } from "../field/field.js";
+import { ChoiceLabelProps, ChoiceOrientation } from "../field/choice.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+interface RadioOwnProps<Value> extends Omit<Radio.Root.Props<Value>, "className" | "style" | "children"> {
+  /** A line under the label. */
+  description?: ReactNode;
+  /** Placement of the row (or of the control alone, with no label) only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/** Radio props: Base UI's (`value` required), plus `label` — or a required `aria-label`. */
+export type RadioProps<Value = string> = RadioOwnProps<Value> & ChoiceLabelProps;
+/** One option of a RadioGroup (06-component-specs.md §3). The 5px Ember ring is its border. */
+declare function Radio$1<Value = string>({ label, description, className, style, ...props }: RadioProps<Value>): ReactElement;
+export interface RadioGroupProps<Value = string> extends Omit<RadioGroup.Props<Value>, "className" | "style" | "render">, FieldMessageProps {
+  /** The question, shown as the group's legend. */
+  label: ReactNode;
+  /** `vertical` (default) or `horizontal` for short options. */
+  orientation?: ChoiceOrientation;
+  /** Placement only (margin, width, grid placement). */
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * One choice from a set, always answered: arrow keys move and select, and the group is one tab
+ * stop. Generic over the value: `RadioGroup<"monthly" | "yearly">`.
+ */
+declare function RadioGroup$1<Value = string>({ label, description, error, name, disabled, orientation, className, style, children, ...props }: RadioGroupProps<Value>): ReactElement;
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup };

package/dist/radio/radio.js

@@ -0,0 +1,47 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { ChoiceGroup, ChoiceRow } from "../field/choice.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/radio/radio.tsx
+/** One option of a RadioGroup (06-component-specs.md §3). The 5px Ember ring is its border. */
+function Radio$1({ label, description, className, style, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceRow, {
+		kind: "radio",
+		label,
+		description,
+		disabled: props.disabled,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(Radio.Root, {
+			...props,
+			className: cx("qx-radio", label == null ? className : void 0),
+			style: label == null ? style : void 0,
+			"data-slot": "radio-indicator"
+		})
+	});
+}
+/**
+* One choice from a set, always answered: arrow keys move and select, and the group is one tab
+* stop. Generic over the value: `RadioGroup<"monthly" | "yearly">`.
+*/
+function RadioGroup$1({ label, description, error, name, disabled, orientation = "vertical", className, style, children, ...props }) {
+	return /* @__PURE__ */ jsx(ChoiceGroup, {
+		kind: "radio",
+		label,
+		description,
+		error,
+		name,
+		disabled,
+		orientation,
+		className,
+		style,
+		group: /* @__PURE__ */ jsx(RadioGroup, {
+			...props,
+			disabled
+		}),
+		children
+	});
+}
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup };

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./scroll-area.js";
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps };

package/dist/scroll-area/index.js

@@ -0,0 +1 @@
+export { ScrollArea } from "./scroll-area.js";

package/dist/scroll-area/scroll-area.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+export interface ScrollAreaProps extends Omit<ScrollArea.Root.Props, "className" | "style" | "children"> {
+  /** Which way it scrolls. Default `vertical`. */
+  orientation?: ScrollAreaOrientation;
+  /** Its size, e.g. a height (`style={{ blockSize: 320 }}`), and its placement. */
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}
+/**
+ * A scrolling region with Qeetrix scrollbars that show on hover, while scrolling and on keyboard
+ * focus (06-component-specs.md, increment 5). When its content overflows, the region takes keyboard
+ * focus, so it can be scrolled without a pointer.
+ */
+declare function ScrollArea$1({ orientation, className, children, ...props }: ScrollAreaProps): ReactElement;
+export { ScrollArea$1 as ScrollArea };

package/dist/scroll-area/scroll-area.js

@@ -0,0 +1,39 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+// src/scroll-area/scroll-area.tsx
+/**
+* A scrolling region with Qeetrix scrollbars that show on hover, while scrolling and on keyboard
+* focus (06-component-specs.md, increment 5). When its content overflows, the region takes keyboard
+* focus, so it can be scrolled without a pointer.
+*/
+function ScrollArea$1({ orientation = "vertical", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		...props,
+		className: cx("qx-scroll-area", className),
+		"data-slot": "scroll-area",
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				className: "qx-scroll-area-viewport",
+				"data-slot": "scroll-area-viewport",
+				children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+					className: "qx-scroll-area-content",
+					children
+				})
+			}),
+			orientation !== "horizontal" && /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "vertical",
+				className: "qx-scroll-area-scrollbar",
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "qx-scroll-area-thumb" })
+			}),
+			orientation !== "vertical" && /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+				orientation: "horizontal",
+				className: "qx-scroll-area-scrollbar",
+				children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "qx-scroll-area-thumb" })
+			}),
+			orientation === "both" && /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+}
+export { ScrollArea$1 as ScrollArea };

package/dist/select/index.d.ts

@@ -0,0 +1,2 @@
+import { Select, SelectItem, SelectItemGroup, SelectProps } from "./select.js";
+export { Select, type SelectItem, type SelectItemGroup, type SelectProps };

package/dist/select/index.js

@@ -0,0 +1 @@
+export { Select } from "./select.js";

package/dist/select/select.d.ts

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { Select } from "@base-ui/react/select";
+/** One option. */
+export interface SelectItem<Value> {
+  value: Value;
+  label: ReactNode;
+  disabled?: boolean;
+}
+/** Options under a group label. */
+export interface SelectItemGroup<Value> {
+  label: ReactNode;
+  items: ReadonlyArray<SelectItem<Value>>;
+}
+export interface SelectProps<Value, Multiple extends boolean | undefined = false> extends Omit<Select.Root.Props<Value, Multiple>, "items" | "children" | "id"> {
+  /** The options, flat or in groups. */
+  items: ReadonlyArray<SelectItem<Value> | SelectItemGroup<Value>>;
+  /** Shown while nothing is chosen. An example, never an instruction ("e.g. Monthly"). */
+  placeholder?: ReactNode;
+  /** The trigger's id. */
+  id?: string;
+  /** The trigger, which a Field labels. */
+  ref?: Ref<HTMLButtonElement>;
+  /** Without a Field: the trigger's accessible name. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  /** Placement of the trigger only. */
+  className?: string;
+  style?: CSSProperties;
+}
+/**
+ * Pick one option, or several with `multiple`, from up to about 15 (06-component-specs.md §4). It
+ * looks like a field and opens its list below, like a menu. Wrap it in a Field for its label.
+ */
+declare function Select$1<Value, Multiple extends boolean | undefined = false>({ items, placeholder, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ...props }: SelectProps<Value, Multiple>): ReactElement;
+export { Select$1 as Select };

package/dist/select/select.js

@@ -0,0 +1,82 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { ChevronDownIcon } from "@qeetrix/icons/icons/chevron-down";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@qeetrix/icons/icons/check";
+import { Select } from "@base-ui/react/select";
+// src/select/select.tsx
+const isGroup = (entry) => "items" in entry;
+function Option({ item }) {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		value: item.value,
+		disabled: item.disabled,
+		className: "qx-select-option",
+		"data-slot": "select-option",
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "qx-select-option-text",
+			children: item.label
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			className: "qx-select-option-check",
+			children: /* @__PURE__ */ jsx(CheckIcon, {
+				shape: "sharp",
+				size: 16,
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+/**
+* Pick one option, or several with `multiple`, from up to about 15 (06-component-specs.md §4). It
+* looks like a field and opens its list below, like a menu. Wrap it in a Field for its label.
+*/
+function Select$1({ items, placeholder, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, className, style, ...props }) {
+	const flat = items.flatMap((entry) => isGroup(entry) ? entry.items : [entry]);
+	const labelOf = (value) => flat.find((item) => Object.is(item.value, value))?.label;
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		...props,
+		id,
+		items: flat,
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			ref,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			"aria-describedby": ariaDescribedBy,
+			className: cx("qx-select-trigger", className),
+			style,
+			"data-slot": "select-trigger",
+			children: [/* @__PURE__ */ jsx(Select.Value, {
+				className: "qx-select-value",
+				"data-slot": "select-value",
+				placeholder,
+				children: (value) => Array.isArray(value) ? value.length > 0 ? value.map(labelOf).filter((label) => label != null).join(", ") : placeholder : labelOf(value) ?? placeholder
+			}), /* @__PURE__ */ jsx(Select.Icon, {
+				className: "qx-select-icon",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+					shape: "sharp",
+					size: 16,
+					"aria-hidden": true
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+			alignItemWithTrigger: false,
+			sideOffset: 4,
+			className: "qx-select-positioner",
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				className: "qx-select-popup",
+				"data-slot": "select-popup",
+				children: /* @__PURE__ */ jsx(Select.List, {
+					className: "qx-select-list",
+					children: items.map((entry, index) => isGroup(entry) ? /* @__PURE__ */ jsxs(Select.Group, {
+						className: "qx-select-group",
+						children: [/* @__PURE__ */ jsx(Select.GroupLabel, {
+							className: "qx-select-group-label",
+							"data-slot": "select-group-label",
+							children: entry.label
+						}), entry.items.map((item) => /* @__PURE__ */ jsx(Option, { item }, String(item.value)))]
+					}, index) : /* @__PURE__ */ jsx(Option, { item: entry }, String(entry.value)))
+				})
+			})
+		}) })]
+	});
+}
+export { Select$1 as Select };

package/dist/separator/index.d.ts

@@ -0,0 +1,2 @@
+import { Separator, SeparatorOrientation, SeparatorProps, SeparatorTone } from "./separator.js";
+export { Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorTone };

package/dist/separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator.js";

package/dist/separator/separator.d.ts

@@ -0,0 +1,16 @@
+import { RenderProp } from "../internal/render.js";
+import { ComponentProps, ReactElement } from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export type SeparatorTone = "subtle" | "default" | "strong";
+export interface SeparatorProps extends ComponentProps<"div"> {
+  /** Default `horizontal`. A vertical separator stretches to its row. */
+  orientation?: SeparatorOrientation;
+  /** Line colour from the border tokens. Default `subtle`. */
+  tone?: SeparatorTone;
+  /** Purely visual: hidden from assistive technology (`role="none"`). */
+  decorative?: boolean;
+  /** Render a different element. */
+  render?: RenderProp;
+}
+/** A 1px line between groups of content. */
+export declare function Separator({ orientation, tone, decorative, render, className, ...props }: SeparatorProps): ReactElement;

package/dist/separator/separator.js

@@ -0,0 +1,16 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+// src/separator/separator.tsx
+/** A 1px line between groups of content. */
+function Separator({ orientation = "horizontal", tone, decorative, render, className, ...props }) {
+	return renderElement("div", render, {
+		role: decorative ? "none" : "separator",
+		"aria-orientation": decorative || orientation === "horizontal" ? void 0 : orientation,
+		...props,
+		className: cx("qx-separator", className),
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		"data-tone": tone
+	});
+}
+export { Separator };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonVariant } from "./skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactElement } from "react";
+export type SkeletonVariant = "text" | "block" | "circle";
+export interface SkeletonProps extends ComponentProps<"span"> {
+  /** `text` (one line), `block` (a card or image) or `circle` (an avatar). Default `text`. */
+  variant?: SkeletonVariant;
+}
+/**
+ * A placeholder shaped like the content that is loading (06-component-specs.md, increment 6). Size
+ * it with `style` or `className`. It is hidden from assistive technology: set `aria-busy` on the
+ * loading region and announce the wait with a Spinner or text. Server-safe.
+ */
+export declare function Skeleton({ variant, className, ...props }: SkeletonProps): ReactElement;

package/dist/skeleton/skeleton.js

@@ -0,0 +1,18 @@
+import { cx } from "../internal/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/skeleton/skeleton.tsx
+/**
+* A placeholder shaped like the content that is loading (06-component-specs.md, increment 6). Size
+* it with `style` or `className`. It is hidden from assistive technology: set `aria-busy` on the
+* loading region and announce the wait with a Spinner or text. Server-safe.
+*/
+function Skeleton({ variant = "text", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": true,
+		className: cx("qx-skeleton", className),
+		"data-slot": "skeleton",
+		"data-variant": variant
+	});
+}
+export { Skeleton };

package/dist/skip-link/index.d.ts

@@ -0,0 +1,2 @@
+import { SkipLink, SkipLinkProps } from "./skip-link.js";
+export { SkipLink, type SkipLinkProps };

package/dist/skip-link/index.js

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

package/dist/skip-link/skip-link.d.ts

@@ -0,0 +1,13 @@
+import { RenderProp } from "../internal/render.js";
+import { ComponentProps, ReactElement } from "react";
+export interface SkipLinkProps extends ComponentProps<"a"> {
+  /** Where the link jumps to. Default `#main`. */
+  href?: string;
+  /** Render a different element, e.g. a router link. */
+  render?: RenderProp;
+}
+/**
+ * The first focusable element on a page: it jumps past the navigation to the main content
+ * (WCAG 2.4.1 Bypass Blocks). Hidden until focused.
+ */
+export declare function SkipLink({ href, children, render, className, ...props }: SkipLinkProps): ReactElement;

package/dist/skip-link/skip-link.js

@@ -0,0 +1,18 @@
+import { cx } from "../internal/cx.js";
+import { renderElement } from "../internal/render.js";
+import { messages } from "../internal/messages.js";
+// src/skip-link/skip-link.tsx
+/**
+* The first focusable element on a page: it jumps past the navigation to the main content
+* (WCAG 2.4.1 Bypass Blocks). Hidden until focused.
+*/
+function SkipLink({ href = "#main", children = messages.skipLink.label, render, className, ...props }) {
+	return renderElement("a", render, {
+		...props,
+		href,
+		children,
+		className: cx("qx-skip-link", className),
+		"data-slot": "skip-link"
+	});
+}
+export { SkipLink };

package/dist/slider/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider, SliderProps } from "./slider.js";
+export { Slider, type SliderProps };

package/dist/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./slider.js";

package/dist/slider/slider.d.ts

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

package/dist/slider/slider.js

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

package/dist/spinner/index.d.ts

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps, SpinnerSize, SpinnerTone } from "./spinner.js";
+export { Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone };

package/dist/spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/spinner/spinner.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps, ReactElement } from "react";
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
+export type SpinnerTone = "default" | "brand";
+export interface SpinnerProps extends Omit<ComponentProps<"span">, "children"> {
+  /** `sm` 14px, `md` 16px (default), `lg` 20px, `xl` 24px. */
+  size?: SpinnerSize;
+  /** `default` follows the text colour; `brand` is Ember. */
+  tone?: SpinnerTone;
+  /** The accessible name. Default "Loading". */
+  label?: string;
+  /** Hidden from assistive technology, when something else announces the wait (a busy Button). */
+  decorative?: boolean;
+}
+/** An indeterminate wait: a 2px ring that turns, or fades under reduced motion. */
+export declare function Spinner({ size, tone, label, decorative, className, ...props }: SpinnerProps): ReactElement;

package/dist/spinner/spinner.js

@@ -0,0 +1,19 @@
+import { cx } from "../internal/cx.js";
+import { messages } from "../internal/messages.js";
+import { jsx } from "react/jsx-runtime";
+// src/spinner/spinner.tsx
+/** An indeterminate wait: a 2px ring that turns, or fades under reduced motion. */
+function Spinner({ size, tone, label = messages.spinner.label, decorative, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...decorative ? { "aria-hidden": true } : {
+			role: "status",
+			"aria-label": label
+		},
+		...props,
+		className: cx("qx-spinner", className),
+		"data-slot": "spinner",
+		"data-size": size,
+		"data-tone": tone
+	});
+}
+export { Spinner };

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+import { FlowJustify, Stack, StackAlign, StackProps } from "./stack.js";
+export { type FlowJustify, Stack, type StackAlign, type StackProps };

package/dist/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from "./stack.js";