@botiverse/raft-ui 0.10.3 → 0.10.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { cn } from "./cn.mjs";
-import { C as ThemeStateContext, S as useTheme, _ as defaultNativeButton, a as DialogDescription, b as resolveThemeScopeProps, c as DialogNav, d as DialogSurface, f as DialogTitle, g as Spinner, h as buttonVariants, i as DialogContent, l as DialogOverlay, m as Button, n as DialogBody, o as DialogFooter, p as DialogTrigger, r as DialogClose, s as DialogHeader, t as Dialog, u as DialogPortal, v as useParentOverlayKind, w as tv, x as useThemeScopeProps, y as withOverlayLayer } from "./dialog-CDPAT3DH.mjs";
+import { A as buttonVariants, C as DialogNav, D as DialogTitle, E as DialogSurface, F as resolveThemeScopeProps, I as useThemeScopeProps, L as useTheme, M as defaultNativeButton, N as useParentOverlayKind, O as DialogTrigger, P as withOverlayLayer, R as ThemeStateContext, S as DialogHeader, T as DialogPortal, _ as DialogBody, a as DrawerContent, b as DialogDescription, c as DrawerHeader, d as DrawerTitle, f as DrawerTrigger, g as Dialog, h as panelHeader, i as DrawerClose, j as Spinner, k as Button, l as DrawerOverlay, m as panelHeadEdges, n as DrawerActions, o as DrawerDescription, p as panelHeadActions, r as DrawerBody, s as DrawerFooter, t as Drawer, u as DrawerPortal, v as DialogClose, w as DialogOverlay, x as DialogFooter, y as DialogContent, z as tv } from "./drawer-yZD16Ybl.mjs";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { AlertTriangle, Bell, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Copy, FileText, Image, Info, Minus, Upload, X, Zap } from "lucide-react";
 import { Children, Fragment, cloneElement, createContext, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
@@ -7,7 +7,6 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
@@ -173,449 +172,6 @@ function AlertDialogCancel({ className, variant, size, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/panel/panel-header.recipe.ts
-/**
-* Where a head's edge controls sit, shared by every head (panel, section,
-* drawer, thread). Phone: a filled thing (a sticker, a pill) puts its shape
-* on 16. A ghost button has no shape, so its empty 44px box overhangs, and
-* the two edge buttons mirror each other: the last action (6px padding,
-* `panelHeadActions`' -3px) and a leading Back (16px padding, -13px) both sit
-* 3px from their edge. Their 22px icon frames are then 14px in and every
-* glyph's centre 25px in, whatever the glyph (an arrow, a gear, a narrow ⋮);
-* aligning ink instead would move each button by its glyph's own side
-* bearing. A Button straight in the head (ghost ones are PanelActions) is a
-* filled control, so its shape ends on the content edge: 20 / 16.
-*/
-const panelHeadEdges = [
-	"pr-3 pl-5 max-md:pr-1.5 max-md:pl-4",
-	"max-md:[&>[data-slot=panel-action]:first-child]:-ml-[13px]",
-	"[&>[data-slot=button]:last-child]:mr-2 max-md:[&>[data-slot=button]:last-child]:mr-2.5"
-];
-/**
-* A head's trailing actions. The last glyph ends on the head's edge: 20px on
-* desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
-* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
-* margin and gap follow the button's size, not the layout: a touch screen
-* from 768px has the desktop head with 44px buttons, so -3px puts its last
-* glyph on 20px too.
-*/
-const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
-/**
-* `header` and `sectionHeader` share one bar, expressed through
-* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
-* On a phone the section head sits on the frame.
-*/
-const panelHeader = tv({
-	slots: {
-		header: [],
-		sectionHeader: [],
-		headerIcon: [
-			"flex size-[27px] shrink-0 items-center justify-center",
-			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
-			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
-			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
-		],
-		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
-		heading: "flex min-w-0 items-center gap-2",
-		title: "truncate font-sans text-headline font-bold text-foreground",
-		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
-		status: [
-			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
-			"font-sans text-caption font-medium normal-case text-foreground-hint",
-			"[&_svg]:size-3.5 [&_svg]:shrink-0"
-		],
-		activity: [
-			"inline-flex shrink-0 items-center gap-1.5",
-			"font-sans text-caption text-foreground-hint",
-			"[&_svg]:size-3.5 [&_svg]:shrink-0"
-		],
-		actions: panelHeadActions
-	},
-	variants: { size: {
-		sm: {},
-		md: { meta: ["text-footnote"] }
-	} },
-	compoundSlots: [{
-		slots: ["header", "sectionHeader"],
-		class: [
-			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
-			panelHeadEdges,
-			"border-b border-line-seam bg-layer-canvas text-foreground",
-			"max-md:sticky max-md:top-0 max-md:z-30"
-		]
-	}, {
-		slots: ["sectionHeader"],
-		class: [
-			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
-			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
-			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
-			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
-			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
-			"max-md:**:data-[slot=panel-action]:hover:bg-fill-frame-pressed max-md:**:data-[slot=panel-action]:active:bg-fill-frame-pressed"
-		]
-	}]
-});
-//#endregion
-//#region src/components/drawer/drawer.recipe.ts
-const drawerMotion = tv({
-	slots: {
-		overlay: [
-			"opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))]",
-			"transition-opacity duration-200 ease-slide",
-			"data-starting-style:opacity-0 data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-150",
-			"motion-reduce:transition-none"
-		],
-		popup: [
-			"[--drawer-blur:2px] [--drawer-ease:var(--ease-slide)]",
-			"[--closed-transform:translate3d(var(--drawer-exit-x,0px),var(--drawer-exit-y,0px),0)]",
-			"[--drawer-stack-peek:16px] [--drawer-stack-step:0.05]",
-			"[--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)]",
-			"[--drawer-stack-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*var(--drawer-stack-peek)))]",
-			"[--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))]",
-			"[--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)]",
-			"[--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))]",
-			"[--drawer-stack-shrink-offset:calc(var(--drawer-stack-shrink)*var(--drawer-stack-size))]",
-			"origin-(--drawer-transform-origin)",
-			"transform-[translate3d(calc(var(--drawer-swipe-x,0px)+var(--drawer-stack-x,0px)),calc(var(--drawer-swipe-y,0px)+var(--drawer-stack-y,0px)),0)_scale(var(--drawer-stack-scale))]",
-			"opacity-100 blur-0",
-			"transition-[transform,height,opacity,filter] duration-240 ease-(--drawer-ease) will-change-transform",
-			"data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*180ms)]",
-			"data-starting-style:transform-(--closed-transform) data-starting-style:opacity-0 data-starting-style:blur-(--drawer-blur)",
-			"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-0 data-ending-style:blur-(--drawer-blur)",
-			"data-swiping:duration-0 data-nested-drawer-swiping:duration-0 motion-reduce:transition-none"
-		],
-		content: ["transition-opacity duration-150 ease-slide motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"],
-		swipeHandle: ["transition-opacity duration-150 motion-reduce:transition-none", "group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100"]
-	},
-	variants: {
-		side: {
-			down: { popup: [
-				"[--drawer-exit-y:calc(100%+var(--drawer-inset)+2px)]",
-				"[--drawer-stack-y:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
-				"[--drawer-transform-origin:50%_100%]"
-			] },
-			up: { popup: [
-				"[--drawer-exit-y:calc(-100%-var(--drawer-inset)-2px)]",
-				"[--drawer-stack-y:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
-				"[--drawer-transform-origin:50%_0%]"
-			] },
-			left: { popup: [
-				"[--drawer-exit-x:calc(-100%-var(--drawer-inset)-2px)]",
-				"[--drawer-stack-x:calc(var(--drawer-stack-offset)+var(--drawer-stack-shrink-offset))]",
-				"[--drawer-transform-origin:0%_50%]"
-			] },
-			right: { popup: [
-				"[--drawer-exit-x:calc(100%+var(--drawer-inset)+2px)]",
-				"[--drawer-stack-x:calc(0px-var(--drawer-stack-offset)-var(--drawer-stack-shrink-offset))]",
-				"[--drawer-transform-origin:100%_50%]"
-			] }
-		},
-		axis: {
-			x: { popup: ["[--drawer-stack-size:100%]", "[--drawer-swipe-x:var(--drawer-swipe-movement-x)]"] },
-			y: { popup: ["[--drawer-stack-size:max(0px,var(--drawer-frontmost-height,var(--drawer-height)))]", "[--drawer-swipe-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y))]"] }
-		},
-		snapPoints: { true: { overlay: ["[--drawer-overlay-min-opacity:0.5]"] } }
-	}
-});
-const drawer = tv({
-	extend: drawerMotion,
-	slots: {
-		overlay: [
-			"fixed inset-0 z-50 min-h-dvh select-none",
-			"supports-[-webkit-touch-callout:none]:absolute",
-			"bg-layer-backdrop"
-		],
-		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
-		popup: [
-			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
-			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
-			"data-nested-drawer-open:overflow-hidden",
-			"bg-layer-popover text-foreground",
-			"shadow-float ring-1 ring-line-seam"
-		],
-		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
-		swipeHandle: [
-			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
-			"before:absolute before:content-['']",
-			"before:rounded-[1px] before:bg-line-seam"
-		],
-		close: ["shrink-0"],
-		closeIcon: ["size-5.5"],
-		header: ["flex flex-col", "items-stretch gap-1 px-4 pt-4 pb-2 text-left"],
-		body: ["flex flex-1 flex-col", "items-stretch px-4 pt-2 pb-4 text-left"],
-		footer: ["mt-auto py-5", "px-4 pt-3 pb-4"],
-		actions: [
-			"flex w-full flex-col items-stretch",
-			"**:data-[slot=button]:w-full",
-			"gap-2"
-		],
-		title: ["text-pretty text-foreground", "max-w-none text-left font-sans text-headline font-bold"],
-		description: ["text-pretty", "max-w-none text-left font-sans text-callout text-foreground-muted"]
-	},
-	variants: {
-		nested: {
-			false: {},
-			true: { overlay: ["bg-layer-backdrop-nested"] }
-		},
-		side: {
-			down: {
-				popup: [
-					"bottom-(--drawer-inset) min-h-64 max-h-[82vh]",
-					"rounded-t-dialog [--drawer-inset:0px]",
-					"pb-[env(safe-area-inset-bottom,0px)]"
-				],
-				swipeHandle: ["before:top-3"]
-			},
-			up: {
-				popup: [
-					"top-(--drawer-inset) max-h-[80vh]",
-					"rounded-b-dialog [--drawer-inset:0px]",
-					"pt-[env(safe-area-inset-top,0px)]"
-				],
-				swipeHandle: ["order-last", "before:bottom-3"]
-			},
-			left: {
-				popup: ["left-(--drawer-inset)"],
-				swipeHandle: ["order-last", "before:right-3"]
-			},
-			right: {
-				popup: ["right-(--drawer-inset)"],
-				swipeHandle: ["before:left-3"]
-			}
-		},
-		axis: {
-			x: {
-				popup: ["flex-row", "inset-y-0 w-full max-w-[420px] [--drawer-inset:0px]"],
-				swipeHandle: [
-					"my-auto h-16 w-11",
-					"before:top-1/2 before:-translate-y-1/2",
-					"before:w-1 before:h-9"
-				],
-				header: [
-					"min-h-14 shrink-0 flex-row items-center justify-between gap-2 py-0 text-left",
-					"border-b border-line-seam",
-					panelHeadEdges
-				],
-				body: ["items-stretch text-left", "min-h-0 overflow-y-auto px-5 py-4"],
-				footer: ["border-t border-line-seam px-5 py-3"],
-				title: ["min-w-0 max-w-none flex-1 text-left"],
-				description: ["max-w-none text-left"],
-				actions: ["flex-row flex-wrap justify-end", "**:data-[slot=button]:w-auto"]
-			},
-			y: {
-				popup: [
-					"data-nested-drawer-open:h-(--drawer-frontmost-height)",
-					"mx-auto md:max-w-md",
-					"inset-x-0"
-				],
-				swipeHandle: [
-					"mx-auto w-16",
-					"before:left-1/2 before:-translate-x-1/2",
-					"h-4",
-					"before:top-1.5 before:h-1 before:w-9"
-				]
-			}
-		}
-	},
-	compoundVariants: [{
-		side: "down",
-		snapPoints: true,
-		class: { header: ["pt-2"] }
-	}, {
-		axis: "y",
-		snapPoints: true,
-		class: { popup: ["[--drawer-content-height:100dvh]"] }
-	}]
-});
-//#endregion
-//#region src/components/drawer/drawer.tsx
-const DrawerConfigContext = createContext(null);
-function useDrawerConfig() {
-	const context = useContext(DrawerConfigContext);
-	if (!context) throw new Error("Drawer parts must be used within Drawer.");
-	return context;
-}
-function Drawer({ modal = true, snapPoints, swipeDirection = "down", children, ...props }) {
-	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
-	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
-	const contextValue = useMemo(() => ({
-		hasSnapPoints,
-		modal,
-		swipeAxis,
-		swipeDirection
-	}), [
-		hasSnapPoints,
-		modal,
-		swipeAxis,
-		swipeDirection
-	]);
-	return /* @__PURE__ */ jsx(DrawerConfigContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx(Drawer$1.Root, {
-			modal,
-			snapPoints,
-			swipeDirection,
-			...props,
-			children: withOverlayLayer("drawer", modal === true, children)
-		})
-	});
-}
-function DrawerTrigger(props) {
-	return /* @__PURE__ */ jsx(Drawer$1.Trigger, {
-		"data-slot": "drawer-trigger",
-		...props
-	});
-}
-function DrawerPortal(props) {
-	return /* @__PURE__ */ jsx(Drawer$1.Portal, {
-		"data-slot": "drawer-portal",
-		...useThemeScopeProps(props)
-	});
-}
-function DrawerOverlay({ className, ...props }) {
-	const { hasSnapPoints } = useDrawerConfig();
-	const nested = useParentOverlayKind() === "dialog";
-	const { overlay } = drawer({
-		snapPoints: hasSnapPoints,
-		nested
-	});
-	return /* @__PURE__ */ jsx(Drawer$1.Backdrop, {
-		"data-slot": "drawer-overlay",
-		"data-nested": nested ? "" : void 0,
-		forceRender: nested,
-		className: overlay({ className }),
-		...props
-	});
-}
-function DrawerSwipeHandle() {
-	const { swipeAxis, swipeDirection } = useDrawerConfig();
-	const { swipeHandle } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis
-	});
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "drawer-swipe-handle",
-		"aria-hidden": "true",
-		className: swipeHandle()
-	});
-}
-function DrawerContent({ className, children, portalProps, ...props }) {
-	const { hasSnapPoints, modal, swipeAxis, swipeDirection } = useDrawerConfig();
-	const { content, popup, viewport } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis,
-		snapPoints: hasSnapPoints
-	});
-	return /* @__PURE__ */ jsxs(DrawerPortal, {
-		...portalProps,
-		children: [modal === true ? /* @__PURE__ */ jsx(DrawerOverlay, {}) : null, /* @__PURE__ */ jsx(Drawer$1.Viewport, {
-			"data-slot": "drawer-viewport",
-			className: cn(viewport(), modal === true && "pointer-events-auto"),
-			children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
-				"data-slot": "drawer-popup",
-				className: popup({ className }),
-				...props,
-				children: [hasSnapPoints ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null, /* @__PURE__ */ jsx(Drawer$1.Content, {
-					"data-slot": "drawer-content",
-					className: content(),
-					children
-				})]
-			})
-		})]
-	});
-}
-function DrawerClose({ className, variant, size, children, render, "aria-label": ariaLabel, ...props }) {
-	const { close, closeIcon } = drawer();
-	if (render) return /* @__PURE__ */ jsx(Drawer$1.Close, {
-		"data-slot": "drawer-close",
-		className,
-		render,
-		"aria-label": ariaLabel,
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsx(Drawer$1.Close, {
-		"data-slot": "drawer-close",
-		render: /* @__PURE__ */ jsx(Button, {
-			variant: variant ?? "ghost",
-			size: size ?? "icon-lg",
-			"aria-label": ariaLabel ?? "Close"
-		}),
-		className: close({ className }),
-		...props,
-		children: children ?? /* @__PURE__ */ jsx(X, { className: closeIcon() })
-	});
-}
-function DrawerHeader({ className, render, ...props }) {
-	const { hasSnapPoints, swipeAxis, swipeDirection } = useDrawerConfig();
-	const { header } = drawer({
-		side: swipeDirection,
-		axis: swipeAxis,
-		snapPoints: hasSnapPoints
-	});
-	const defaultProps = { className: header({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-header" }
-	});
-}
-function DrawerFooter({ className, render, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { footer } = drawer({ axis: swipeAxis });
-	const defaultProps = { className: footer({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-footer" }
-	});
-}
-function DrawerBody({ className, render, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { body } = drawer({ axis: swipeAxis });
-	const defaultProps = { className: body({ className }) };
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-body" }
-	});
-}
-function DrawerActions({ className, render, children, ...props }) {
-	const swipeAxis = useContext(DrawerConfigContext)?.swipeAxis;
-	const { actions } = drawer({ axis: swipeAxis });
-	const defaultProps = {
-		className: actions({ className }),
-		children
-	};
-	return useRender({
-		defaultTagName: "div",
-		render,
-		props: mergeProps(defaultProps, props),
-		state: { slot: "drawer-actions" }
-	});
-}
-function DrawerTitle({ className, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { title } = drawer({ axis: swipeAxis });
-	return /* @__PURE__ */ jsx(Drawer$1.Title, {
-		"data-slot": "drawer-title",
-		className: title({ className }),
-		...props
-	});
-}
-function DrawerDescription({ className, ...props }) {
-	const { swipeAxis } = useDrawerConfig();
-	const { description } = drawer({ axis: swipeAxis });
-	return /* @__PURE__ */ jsx(Drawer$1.Description, {
-		"data-slot": "drawer-description",
-		className: description({ className }),
-		...props
-	});
-}
-//#endregion
 //#region src/components/badge/badge.tsx
 const badge = tv({
 	slots: { root: [

package/dist/style.css

@@ -1300,6 +1300,136 @@
   color: var(--foreground-disabled);
 }
 
+.r-combobox-select__trigger {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: inherit;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  border: 0;
+  outline: 0;
+  flex: 1;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.r-combobox-select__trigger:after {
+  content: "";
+  border-radius: inherit;
+  position: absolute;
+  inset: 0;
+}
+
+.r-combobox-select__trigger:disabled {
+  color: inherit;
+}
+
+.r-combobox-select__value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.r-combobox-select__placeholder {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  color: var(--foreground-hint);
+  overflow: hidden;
+}
+
+.r-combobox-select__trigger .r-combobox-select__chips {
+  margin-inline-start: -6px;
+}
+
+.r-combobox-select__trigger .r-combobox-select__chip {
+  padding-inline-end: 8px;
+}
+
+.r-combobox-select__clear {
+  z-index: 1;
+  position: relative;
+}
+
+.r-combobox-select__arrow {
+  pointer-events: none;
+}
+
+.r-combobox-select__control--trigger[data-popup-open] .r-combobox-select__arrow > svg {
+  transform: rotate(180deg);
+}
+
+.r-combobox-select__popup--anchored .r-combobox-select__list {
+  box-sizing: border-box;
+  max-height: min(calc(16rem + 12px), var(--available-height, 100vh));
+}
+
+.r-combobox-select__sheet-popup {
+  height: 82dvh;
+}
+
+.r-combobox-select__sheet {
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.r-combobox-select__sheet-header {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding-inline-end: 8px;
+}
+
+.r-combobox-select__sheet-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.r-combobox-select__sheet-search {
+  flex: none;
+  padding: 4px 16px 8px;
+}
+
+.r-combobox-select__search-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--foreground-hint);
+  flex: none;
+}
+
+.r-combobox-select__sheet-body {
+  overscroll-behavior: contain;
+  min-height: 0;
+  padding: 0 8px calc(16px + env(safe-area-inset-bottom, 0px));
+  overflow-y: auto;
+}
+
+.r-combobox-select__sheet .r-combobox-select__list {
+  max-height: none;
+  padding: 0;
+  overflow: visible;
+}
+
+.r-combobox-select__sheet .r-combobox-select__option {
+  min-height: 52px;
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  padding: 0 12px;
+}
+
+.r-combobox-select__sheet .r-combobox-select__group-label {
+  padding: 12px 12px 4px;
+}
+
 @keyframes r-combobox-select-spin {
   to {
     transform: rotate(360deg);

package/dist/wip.d.mts

@@ -22,6 +22,12 @@ interface ComboboxSelectMessages {
   chipDescription: string;
   inputDescription: string;
   remove: (label: string) => string;
+  /** The placeholder of the search input at the top of the phone's bottom sheet. */
+  search: string;
+  /** The button that closes the phone's bottom sheet of a multiple select. */
+  done: string;
+  /** The close button of the phone's bottom sheet. */
+  close: string;
 }
 type RootProps = Combobox.Root.Props<unknown, boolean>;
 type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false> = Pick<RootProps, "name" | "form" | "required" | "disabled" | "readOnly" | "open" | "defaultOpen" | "onOpenChange" | "onOpenChangeComplete" | "autoHighlight" | "autoComplete" | "inputValue" | "defaultInputValue" | "onInputValueChange"> & Pick<ComponentPropsWithRef<"input">, "id" | "ref" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid"> & {
@@ -66,16 +72,31 @@ type ComboboxSelectProps<Option = ComboboxSelectOption, Multiple extends boolean
   emptyContent?: ReactNode;
   loadingContent?: ReactNode;
   messages?: Partial<ComboboxSelectMessages>;
+  /**
+   * On a phone (a touch screen under 48rem), more selectable options than this open a
+   * bottom sheet instead of the anchored list.
+   * @default 10
+   */
+  sheetThreshold?: number;
+  /**
+   * The title of the phone's bottom sheet. Defaults to the field's name: `aria-label`,
+   * the text of `aria-labelledby`, or the `<label>` whose `for` is the field's `id`.
+   */
+  sheetTitle?: ReactNode;
+  /** The text input: the field on a desktop, the search input of the bottom sheet on a phone. */
   inputProps?: Omit<Combobox.Input.Props, "value" | "defaultValue" | "size" | "children">;
+  /** The portal of the list, and of the phone's anchored list and bottom sheet. */
   portalProps?: Combobox.Portal.Props;
+  /** The desktop list's positioner. A phone positions its list itself. */
   positionerProps?: Omit<Combobox.Positioner.Props, "children">;
+  /** The desktop list's popup. */
   popupProps?: Omit<Combobox.Popup.Props, "children">;
   className?: string;
   style?: CSSProperties;
 };
 //#endregion
 //#region src/components/combobox-select/combobox-select.d.ts
-export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+export declare function ComboboxSelect<Option = ComboboxSelectOption, Multiple extends boolean | undefined = false>({ options, multiple, value, defaultValue, onValueChange, labelField, valueField, disabledField, fallbackOption, filterable, filter, remote, onSearch, loading, create, creatable, onCreate, clearable, showArrow, clearFilterAfterSelect, onClear, maxTagCount, size, status, placeholder, renderLabel, renderOption, renderTag, renderCreateLabel, emptyContent, loadingContent, messages, sheetThreshold, sheetTitle, inputProps, portalProps, positionerProps, popupProps, className, style, id: idProp, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, inputValue, defaultInputValue, onInputValueChange, disabled, readOnly, autoHighlight, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
 //#endregion
 //#region src/components/announcement-dialog/announcement-dialog.d.ts
 export declare function AnnouncementDialogContent({ className, initialFocus, ref, ...props }: DialogContentProps): import("react").JSX.Element;