@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/search/search.recipe.mjs

@@ -0,0 +1,22 @@
+import { listColumnMargin } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/search/search.recipe.ts
+const search = tv({ slots: {
+	frame: [
+		"flex h-full min-h-0 flex-1 flex-col",
+		"bg-layer-canvas text-foreground",
+		listColumnMargin
+	],
+	filtersRow: ["shrink-0", "border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3"],
+	viewport: ["min-h-0 flex-1 overflow-y-auto scrollbar-list p-4", "bg-layer-canvas px-0 pt-0 pb-4"],
+	summary: ["block", "mb-0 px-5 pt-2 font-sans text-footnote text-foreground-hint"],
+	section: ["mb-0"],
+	sectionHeading: [
+		"py-2",
+		"flex items-center gap-2 px-5 pt-3 pb-0",
+		"font-sans text-footnote font-bold text-foreground-hint"
+	],
+	list: ["flex flex-col", "gap-0.5 py-2"]
+} });
+//#endregion
+export { search };

package/dist/components/segmented-control/index.d.mts

@@ -0,0 +1,2 @@
+import { SegmentedControl, SegmentedControlCount, SegmentedControlCountProps, SegmentedControlIconsOnlyBelow, SegmentedControlIconsOnlyPreset, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlLabel, SegmentedControlLabelProps, SegmentedControlProps } from "./segmented-control.mjs";
+export { SegmentedControl, SegmentedControlCount, type SegmentedControlCountProps, type SegmentedControlIconsOnlyBelow, type SegmentedControlIconsOnlyPreset, SegmentedControlItem, type SegmentedControlItemProps, SegmentedControlLabel, type SegmentedControlLabelProps, type SegmentedControlProps };

package/dist/components/segmented-control/segmented-control.d.mts

@@ -0,0 +1,38 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/segmented-control/segmented-control.d.ts
+/** Tailwind's container sizes, `@xs` (20rem) to `@2xl` (42rem). */
+export type SegmentedControlIconsOnlyPreset = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * When the segments show only their icons: `auto` when their labels don't fit
+ * the width the control is given, a container size preset, or a CSS length
+ * (`px`, `rem` or `em`) the row is narrower than.
+ */
+export type SegmentedControlIconsOnlyBelow = "auto" | SegmentedControlIconsOnlyPreset | `${number}px` | `${number}rem` | `${number}em`;
+export type SegmentedControlProps<T extends string = string> = StyledProps<RadioGroup.Props<T>> & {
+  /**
+   * When every segment shows only its icon (give each one); its label stays
+   * the accessible name and shows in a tooltip. `auto`: when the labelled
+   * segments don't fit the width the control is given. A preset (`xs` to
+   * `2xl`) or a CSS length (`"18.5rem"`, `"296px"`): when the nearest
+   * `@container` ancestor (the row the control sits in) is narrower than it.
+   */
+  iconsOnlyBelow?: SegmentedControlIconsOnlyBelow;
+  /**
+   * `on-frame` in the frame (a top bar): the track the frame's medium fill and
+   * the selected segment in the frame's active colours (white on the yellow
+   * frame, yellow on the dark one), since a yellow sticker on yellow would
+   * not read as selected.
+   */
+  variant?: "default" | "on-frame";
+};
+export declare function SegmentedControl<T extends string = string>({ disabled, iconsOnlyBelow, variant, className, ref, ...props }: SegmentedControlProps<T>): import("react").JSX.Element;
+export type SegmentedControlItemProps<T extends string = string> = StyledProps<Radio.Root.Props<T>>;
+export declare function SegmentedControlItem<T extends string = string>({ className, ref, ...props }: SegmentedControlItemProps<T>): import("react").JSX.Element;
+export type SegmentedControlLabelProps = ComponentPropsWithRef<"span">;
+export declare function SegmentedControlLabel({ className, ...props }: SegmentedControlLabelProps): import("react").JSX.Element;
+export type SegmentedControlCountProps = ComponentPropsWithRef<"span">;
+export declare function SegmentedControlCount({ className, ...props }: SegmentedControlCountProps): import("react").JSX.Element;
+//#endregion

package/dist/components/segmented-control/segmented-control.mjs

@@ -0,0 +1,306 @@
+import { tv } from "../../lib/tv.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/segmented-control/segmented-control.tsx
+const segmentedControl = tv({
+	slots: {
+		root: [
+			"inline-flex min-w-0 items-center",
+			"w-fit max-w-full flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]",
+			"data-overflowing:overflow-x-auto data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
+		],
+		item: [
+			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
+			"outline-none disabled:pointer-events-none",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"font-sans text-callout font-semibold text-foreground-muted",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"hover:bg-fill-medium active:bg-fill-medium",
+			"data-checked:border-sticker-ink data-checked:bg-selected data-checked:font-bold data-checked:text-sticker-ink data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
+			"data-checked:hover:bg-selected data-checked:active:bg-selected data-checked:active:overlay-sticker-medium",
+			"focus-visible:shadow-focus",
+			"data-disabled:cursor-not-allowed data-disabled:text-foreground-disabled data-disabled:hover:bg-transparent"
+		],
+		label: ["truncate"],
+		count: ["font-mono", "text-mono-meta font-normal"]
+	},
+	variants: {
+		variant: {
+			default: {},
+			"on-frame": { root: [
+				"bg-fill-frame-medium",
+				"**:data-[slot=segmented-control-item]:text-foreground-on-frame-muted **:data-[slot=segmented-control-item]:hover:text-foreground-on-frame",
+				"**:data-[slot=segmented-control-item]:hover:bg-transparent **:data-[slot=segmented-control-item]:hover:overlay-frame-medium **:data-[slot=segmented-control-item]:active:bg-transparent **:data-[slot=segmented-control-item]:active:overlay-frame-medium",
+				"**:data-[slot=segmented-control-item]:data-checked:border-line-frame-active **:data-[slot=segmented-control-item]:data-checked:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:text-foreground-on-frame-active",
+				"**:data-[slot=segmented-control-item]:data-checked:hover:bg-layer-frame-active **:data-[slot=segmented-control-item]:data-checked:hover:bg-none **:data-[slot=segmented-control-item]:data-checked:active:bg-layer-frame-active"
+			] }
+		},
+		iconsOnlyBelow: {
+			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-8 @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
+			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-8 @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
+			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-8 @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
+			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
+			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
+			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-8 @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
+		},
+		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-8 data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
+	}
+});
+const ICONS_ONLY_PRESETS = /* @__PURE__ */ new Set([
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"2xl"
+]);
+function isIconsOnlyPreset(value) {
+	return value !== void 0 && ICONS_ONLY_PRESETS.has(value);
+}
+const SegmentedControlIconsOnlyContext = createContext(false);
+/**
+* A length threshold in CSS pixels, or `undefined` for a value that isn't a
+* `px`, `rem` or `em` length. `em` is the container's font size, as in a
+* container query.
+*/
+function lengthToPx(value, container) {
+	const match = /^(\d*\.?\d+)(px|rem|em)$/.exec(value.trim());
+	if (!match) return void 0;
+	const amount = Number(match[1]);
+	if (match[2] === "px") return amount;
+	const fontOf = match[2] === "rem" ? document.documentElement : container;
+	return amount * parseFloat(getComputedStyle(fontOf).fontSize);
+}
+/** The nearest size container above the track, as a container query finds it; else its parent. */
+function queryContainerOf(track) {
+	for (let el = track.parentElement; el; el = el.parentElement) if (getComputedStyle(el).containerType !== "normal") return el;
+	return track.parentElement;
+}
+function contentInlineSize(el) {
+	const style = getComputedStyle(el);
+	return el.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+}
+/**
+* Whether the labelled segments fit the track's box: the segments, first to
+* last, and the track's padding take no more than its `clientWidth` (half a
+* pixel of rounding aside; `scrollWidth` would let the last segment eat into
+* the end padding first, and Base UI's visually hidden radio inputs must not
+* count), and no label is truncated (a track stretched with `*:flex-1`
+* shrinks its labels instead). Measured in the labelled layout
+* whatever the control shows now: the attribute comes off for the read and
+* goes back before anything paints. The track is `w-fit max-w-full min-w-0`,
+* so its box is the width it is given, a shrinking flex item's included,
+* never more than its labels need: the answer depends only on the room
+* around it, not on what it shows, and so can't flap at the boundary.
+*/
+function labelsFit(track) {
+	const iconsOnly = track.hasAttribute("data-icons-only");
+	if (iconsOnly) track.removeAttribute("data-icons-only");
+	const segments = Array.from(track.querySelectorAll(":scope > [data-slot=segmented-control-item]"));
+	let fits = true;
+	if (segments.length > 0) {
+		const style = getComputedStyle(track);
+		fits = segments[segments.length - 1].getBoundingClientRect().right - segments[0].getBoundingClientRect().left + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) - track.clientWidth <= .5;
+	}
+	if (fits) {
+		for (const label of Array.from(track.querySelectorAll("[data-slot=segmented-control-label]"))) if (label.scrollWidth - label.clientWidth > 1) {
+			fits = false;
+			break;
+		}
+	}
+	if (iconsOnly) track.setAttribute("data-icons-only", "");
+	return fits;
+}
+/**
+* Lays the track out and reports whether its segments run past its box. The
+* track comes from a callback ref, so a swapped element is measured too.
+*
+* With `iconsOnlyBelow="auto"` or a length, it decides here whether the
+* segments show only their icons, and sets `data-icons-only` on the track
+* (the presets are container queries in CSS and need nothing here). The
+* decision is taken synchronously, in the layout effect and in the observers'
+* callbacks, so the first frame and every resize paint the right layout.
+* Taken again when the track, a segment, the element it is measured against
+* (the parent for `auto`, the container for a length) or one of that
+* element's children resizes or comes and goes, a label, a count or the
+* selection changes, or a web font arrives.
+*
+* The overflow is the track's own `scrollWidth` against its `clientWidth`
+* after that decision, measured in the next frame.
+*/
+function useTrackFit(track, iconsOnlyBelow) {
+	const [overflowing, setOverflowing] = useState(false);
+	const measured = iconsOnlyBelow !== void 0 && !isIconsOnlyPreset(iconsOnlyBelow);
+	useLayoutEffect(() => {
+		if (!track || typeof ResizeObserver === "undefined") return void 0;
+		const reference = !measured ? null : iconsOnlyBelow === "auto" ? track.parentElement : queryContainerOf(track);
+		if (measured && iconsOnlyBelow !== "auto" && reference && lengthToPx(iconsOnlyBelow, reference) === void 0 && process.env.NODE_ENV !== "production") console.warn(`raft-ui: SegmentedControl iconsOnlyBelow="${iconsOnlyBelow}" is not a preset, "auto" or a px, rem or em length; the segments keep their labels.`);
+		const fitIcons = () => {
+			if (!measured) return;
+			let iconsOnly = false;
+			if (iconsOnlyBelow === "auto") iconsOnly = !labelsFit(track);
+			else if (reference) {
+				const threshold = lengthToPx(iconsOnlyBelow, reference);
+				iconsOnly = threshold !== void 0 && contentInlineSize(reference) < threshold;
+			}
+			if (iconsOnly !== track.hasAttribute("data-icons-only")) track.toggleAttribute("data-icons-only", iconsOnly);
+		};
+		let frame = 0;
+		const measure = () => {
+			frame = 0;
+			setOverflowing(track.scrollWidth - track.clientWidth > 1);
+		};
+		const schedule = () => {
+			if (frame === 0) frame = requestAnimationFrame(measure);
+		};
+		const update = () => {
+			fitIcons();
+			schedule();
+		};
+		const resize = new ResizeObserver(update);
+		const observeAll = () => {
+			resize.disconnect();
+			resize.observe(track);
+			for (const child of Array.from(track.children)) resize.observe(child);
+			if (reference) {
+				resize.observe(reference);
+				for (const child of Array.from(reference.children)) resize.observe(child);
+			}
+		};
+		observeAll();
+		const mutation = new MutationObserver(() => {
+			observeAll();
+			update();
+		});
+		mutation.observe(track, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributeFilter: ["data-checked"]
+		});
+		if (reference) mutation.observe(reference, { childList: true });
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener("loadingdone", update);
+		fitIcons();
+		measure();
+		return () => {
+			if (frame !== 0) cancelAnimationFrame(frame);
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", update);
+			track.removeAttribute("data-icons-only");
+		};
+	}, [
+		track,
+		measured,
+		iconsOnlyBelow
+	]);
+	return overflowing;
+}
+/** In development, warns when segments that may show only their icons have none. */
+function useIconsOnlyWarning(ref, iconsOnlyBelow) {
+	useLayoutEffect(() => {
+		if (process.env.NODE_ENV === "production" || iconsOnlyBelow === void 0) return;
+		const items = ref.current?.querySelectorAll("[data-slot=segmented-control-item]") ?? [];
+		for (const item of Array.from(items)) if (!item.querySelector("svg, img")) {
+			console.warn("raft-ui: a SegmentedControl with iconsOnlyBelow has a segment with no icon; it would be left empty when the segments show only their icons. Give every segment an icon.");
+			return;
+		}
+	}, [ref, iconsOnlyBelow]);
+}
+function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ref, ...props }) {
+	const preset = isIconsOnlyPreset(iconsOnlyBelow);
+	const { root } = segmentedControl({
+		iconsOnlyBelow: preset ? iconsOnlyBelow : void 0,
+		iconsOnlyMeasured: iconsOnlyBelow !== void 0 && !preset ? true : void 0,
+		variant
+	});
+	const rootRef = useRef(null);
+	const [track, setTrack] = useState(null);
+	const [setRef] = useMergedRef(rootRef, setTrack, ref);
+	const overflowing = useTrackFit(track, iconsOnlyBelow);
+	useIconsOnlyWarning(rootRef, iconsOnlyBelow);
+	const value = props.value;
+	useLayoutEffect(() => {
+		const track = rootRef.current;
+		if (!overflowing || !track) return;
+		const checked = track.querySelector("[data-checked]");
+		if (!checked) return;
+		const trackLeft = track.getBoundingClientRect().left;
+		const box = checked.getBoundingClientRect();
+		const start = box.left - trackLeft + track.scrollLeft;
+		const end = start + box.width;
+		if (start < track.scrollLeft) track.scrollLeft = start;
+		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
+	}, [overflowing, value]);
+	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
+		value: iconsOnlyBelow !== void 0,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			ref: setRef,
+			disabled,
+			"data-slot": "segmented-control",
+			"data-overflowing": overflowing ? "" : void 0,
+			className: root({ className }),
+			...props
+		})
+	});
+}
+function SegmentedControlItem({ className, ref, ...props }) {
+	const { item } = segmentedControl();
+	const iconsOnly = use(SegmentedControlIconsOnlyContext);
+	const tapRef = useTapActivation();
+	const [setRef] = useMergedRef(tapRef, ref);
+	const radio = /* @__PURE__ */ jsx(Radio.Root, {
+		ref: setRef,
+		render: /* @__PURE__ */ jsx("button", { type: "button" }),
+		nativeButton: true,
+		"data-slot": "segmented-control-item",
+		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...props
+	});
+	return iconsOnly ? /* @__PURE__ */ jsx(SegmentedControlItemTooltip, { children: radio }) : radio;
+}
+function SegmentedControlItemTooltip({ children }) {
+	const [text, setText] = useState("");
+	const triggerRef = useRef(null);
+	const handleOpenChange = useCallback((open, details) => {
+		if (!open) return;
+		const label = triggerRef.current?.querySelector("[data-slot=segmented-control-label]");
+		if (!label || label.getBoundingClientRect().width > 1) {
+			details.cancel();
+			return;
+		}
+		setText(label.textContent ?? "");
+	}, []);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			ref: triggerRef,
+			render: children
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: text })]
+	});
+}
+function SegmentedControlLabel({ className, ...props }) {
+	const { label } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-label",
+		className: label({ className }),
+		...props
+	});
+}
+function SegmentedControlCount({ className, ...props }) {
+	const { count } = segmentedControl();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "segmented-control-count",
+		className: count({ className }),
+		...props
+	});
+}
+//#endregion
+export { SegmentedControl, SegmentedControlCount, SegmentedControlItem, SegmentedControlLabel };

package/dist/components/select/index.d.mts

@@ -0,0 +1,2 @@
+import { Select, SelectActionItem, SelectActionItemProps, SelectArrow, SelectArrowProps, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectIcon, SelectIconProps, SelectItem, SelectItemDescription, SelectItemDescriptionProps, SelectItemIndicator, SelectItemIndicatorProps, SelectItemLeading, SelectItemLeadingProps, SelectItemProps, SelectItemText, SelectItemTextProps, SelectLabel, SelectLabelProps, SelectList, SelectListProps, SelectPopup, SelectPopupProps, SelectPortal, SelectPortalProps, SelectProps, SelectScrollDownArrow, SelectScrollDownArrowProps, SelectScrollUpArrow, SelectScrollUpArrowProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./select.mjs";
+export { Select, SelectActionItem, type SelectActionItemProps, SelectArrow, type SelectArrowProps, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, SelectItem, SelectItemDescription, type SelectItemDescriptionProps, SelectItemIndicator, type SelectItemIndicatorProps, SelectItemLeading, type SelectItemLeadingProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, type SelectProps, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/components/select/select.d.mts

@@ -0,0 +1,95 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Select } from "@base-ui/react/select";
+//#region src/components/select/select.d.ts
+export type SelectChrome = "default" | "field";
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Select.Root.Props<Value, Multiple> & {
+  /**
+   * `field` opts this Select into the field metric axis, so it reads as a form
+   * field rather than a button. Defaults to `default`, leaving every existing
+   * Select untouched.
+   */
+  chrome?: SelectChrome;
+};
+declare function Select$1<Value, Multiple extends boolean | undefined = false>({ chrome, onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }: SelectProps<Value, Multiple>): import("react").JSX.Element;
+export type SelectTriggerProps = StyledProps<Select.Trigger.Props> & DataAttributes;
+export declare function SelectTrigger({ className, children, render, "data-invalid": dataInvalid, ...props }: SelectTriggerProps): import("react").JSX.Element;
+export type SelectValueProps = StyledProps<Select.Value.Props>;
+export declare function SelectValue({ className, ref, title, ...props }: SelectValueProps): import("react").JSX.Element;
+export type SelectIconProps = StyledProps<Select.Icon.Props>;
+export declare function SelectIcon({ className, children, ...props }: SelectIconProps): import("react").JSX.Element;
+export type SelectPortalProps = Select.Portal.Props;
+export declare function SelectPortal(props: SelectPortalProps): import("react").JSX.Element;
+export type SelectPopupProps = ComponentPropsWithRef<"div">;
+export declare function SelectPopup({ className, ...props }: SelectPopupProps): import("react").JSX.Element;
+export type SelectContentProps = StyledProps<Select.Popup.Props> & Pick<Select.Positioner.Props, "align" | "alignItemWithTrigger" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
+  /**
+   * Additional space to maintain from the edge of the collision boundary: 8px
+   * from the window's edge, and 8px from a frame inset where a shell keeps one.
+   * A value you pass is kept as it is.
+   * @default 8
+   */
+  collisionPadding?: Select.Positioner.Props["collisionPadding"];
+  portalProps?: SelectPortalProps;
+};
+export declare function SelectContent({ align, alignItemWithTrigger, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, ...props }: SelectContentProps): import("react").JSX.Element;
+export type SelectListProps = StyledProps<Select.List.Props>;
+export declare function SelectList({ className, ...props }: SelectListProps): import("react").JSX.Element;
+export type SelectItemProps = StyledProps<Select.Item.Props>;
+export declare function SelectItem({ className, ...props }: SelectItemProps): import("react").JSX.Element;
+export type SelectItemLeadingProps = StyledProps<ComponentPropsWithRef<"span">>;
+export declare function SelectItemLeading({ className, ...props }: SelectItemLeadingProps): import("react").JSX.Element;
+export type SelectItemIndicatorProps = StyledProps<Select.ItemIndicator.Props>;
+export declare function SelectItemIndicator({ className, children, ...props }: SelectItemIndicatorProps): import("react").JSX.Element;
+export type SelectItemTextProps = StyledProps<Select.ItemText.Props>;
+export declare function SelectItemText({ className, id, ref, title, ...props }: SelectItemTextProps): import("react").JSX.Element;
+export type SelectItemDescriptionProps = StyledProps<ComponentPropsWithRef<"span">>;
+/**
+ * A second line under an option's label: what it means, not its name again.
+ * It sits beside `SelectItemText`, not inside it, so the selected value in the
+ * trigger stays the label alone. The option grows to fit it.
+ */
+export declare function SelectItemDescription({ className, id, ...props }: SelectItemDescriptionProps): import("react").JSX.Element;
+export type SelectActionItemProps = StyledProps<Omit<Select.Item.Props, "value" | "label" | "onClick">> & {
+  /**
+   * Runs when the row is pressed: clicked, or Enter or Space while it is
+   * highlighted. The row never becomes the Select's value and never calls
+   * `onValueChange`.
+   */
+  onAction?: (event: Event) => void;
+  /**
+   * Whether pressing the row closes the list. Off by default: a list action
+   * such as Show All changes what the list shows, so the list stays open.
+   * @default false
+   */
+  closeOnAction?: boolean;
+  /**
+   * The text typeahead matches, when the row's content is not plain text.
+   */
+  label?: string;
+};
+/**
+ * An action row inside the list, placed last after a `SelectSeparator`, such as
+ * Show All. It is reached by the arrow keys and typeahead like an item, but
+ * pressing it runs `onAction` instead of choosing a value. It is an option to
+ * assistive technology, so it takes no `aria-expanded`: its label says what it
+ * does.
+ */
+export declare function SelectActionItem({ className, onAction, closeOnAction, ...props }: SelectActionItemProps): import("react").JSX.Element;
+export type SelectLabelProps = StyledProps<Select.Label.Props>;
+export declare function SelectLabel({ className, ...props }: SelectLabelProps): import("react").JSX.Element;
+export type SelectGroupProps = StyledProps<Select.Group.Props>;
+export declare function SelectGroup({ className, ...props }: SelectGroupProps): import("react").JSX.Element;
+export type SelectGroupLabelProps = StyledProps<Select.GroupLabel.Props>;
+export declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): import("react").JSX.Element;
+export type SelectSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+export type SelectScrollUpArrowProps = StyledProps<Select.ScrollUpArrow.Props>;
+export declare function SelectScrollUpArrow({ className, children, ...props }: SelectScrollUpArrowProps): import("react").JSX.Element;
+export type SelectScrollDownArrowProps = StyledProps<Select.ScrollDownArrow.Props>;
+export declare function SelectScrollDownArrow({ className, children, ...props }: SelectScrollDownArrowProps): import("react").JSX.Element;
+export type SelectArrowProps = StyledProps<Select.Arrow.Props>;
+export declare function SelectArrow({ className, ...props }: SelectArrowProps): import("react").JSX.Element;
+//#endregion
+export { Select$1 as Select };