@qeetrix/react 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,80 @@
+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 { 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 "./field/index.js";
+import { Fieldset, FieldsetProps } from "./fieldset/fieldset.js";
+import "./fieldset/index.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";
+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 { 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 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 };

package/dist/index.js

@@ -0,0 +1,38 @@
+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 { 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 { 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, 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 };

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/messages.js

@@ -0,0 +1,22 @@
+// 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.
+*/
+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"
+	}
+};
+export { 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,13 @@
+import { RenderProp } from "../internal/render.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;
+}
+/** 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;

package/dist/link/link.js

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

package/dist/menu/index.d.ts

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

package/dist/menu/index.js

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

package/dist/menu/menu.d.ts

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