@qeetrix/react 0.0.1 → 0.0.2

package/dist/menu/menu.js

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

package/dist/popover/index.d.ts

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

package/dist/popover/index.js

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

package/dist/popover/popover.d.ts

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

package/dist/popover/popover.js

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

package/dist/progress/index.d.ts

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

package/dist/progress/index.js

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

package/dist/progress/progress.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactElement, ReactNode } from "react";
+import { Meter } from "@base-ui/react/meter";
+import { Progress } from "@base-ui/react/progress";
+interface BarLook {
+  /** The visible label. Without one, give it an `aria-label`. */
+  label?: ReactNode;
+  /** Show the formatted value at the end of the header. */
+  showValue?: boolean;
+  /** Placement only. */
+  className?: string;
+  style?: CSSProperties;
+}
+export interface ProgressProps extends Omit<Progress.Root.Props, "className" | "style" | "children">, BarLook {}
+export type MeterTone = "brand" | "success" | "warning" | "danger";
+export interface MeterProps extends Omit<Meter.Root.Props, "className" | "style" | "children">, BarLook {
+  /** The indicator's colour. Default `brand`. */
+  tone?: MeterTone;
+}
+/**
+ * A task advancing, such as an upload (06-component-specs.md, increment 6). `value={null}` is
+ * indeterminate: a segment slides along the track, and fades instead under reduced motion.
+ */
+declare function Progress$1({ label, showValue, 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;
+export { Meter$1 as Meter, Progress$1 as Progress };

package/dist/progress/progress.js

@@ -0,0 +1,57 @@
+"use client";
+import { cx } from "../internal/cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+import { Progress } from "@base-ui/react/progress";
+// src/progress/progress.tsx
+/**
+* A task advancing, such as an upload (06-component-specs.md, increment 6). `value={null}` is
+* indeterminate: a segment slides along the track, and fades instead under reduced motion.
+*/
+function Progress$1({ label, showValue, className, ...props }) {
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...props,
+		className: cx("qx-progress", className),
+		"data-slot": "progress",
+		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "qx-progress-header",
+			"data-slot": "progress-header",
+			children: [label != null && /* @__PURE__ */ jsx(Progress.Label, {
+				className: "qx-progress-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Progress.Value, { className: "qx-progress-value" })]
+		}), /* @__PURE__ */ jsx(Progress.Track, {
+			className: "qx-progress-track",
+			"data-slot": "progress-track",
+			children: /* @__PURE__ */ jsx(Progress.Indicator, {
+				className: "qx-progress-indicator",
+				"data-slot": "progress-indicator"
+			})
+		})]
+	});
+}
+/** A measurement within a range, such as storage used. It looks like Progress; it isn't a task. */
+function Meter$1({ label, showValue, tone = "brand", className, ...props }) {
+	return /* @__PURE__ */ jsxs(Meter.Root, {
+		...props,
+		className: cx("qx-progress", className),
+		"data-slot": "meter",
+		"data-tone": tone,
+		children: [(label != null || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "qx-progress-header",
+			"data-slot": "meter-header",
+			children: [label != null && /* @__PURE__ */ jsx(Meter.Label, {
+				className: "qx-progress-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Meter.Value, { className: "qx-progress-value" })]
+		}), /* @__PURE__ */ jsx(Meter.Track, {
+			className: "qx-progress-track",
+			"data-slot": "meter-track",
+			children: /* @__PURE__ */ jsx(Meter.Indicator, {
+				className: "qx-progress-indicator",
+				"data-slot": "meter-indicator"
+			})
+		})]
+	});
+}
+export { Meter$1 as Meter, Progress$1 as Progress };

package/dist/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;