@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/search/search-entity.d.mts

@@ -0,0 +1,24 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-entity.d.ts
+export type SearchEntityResultProps = useRender.ComponentProps<"button"> & {
+  selected?: boolean;
+};
+export declare function SearchEntityResult({ selected, className, render, ...props }: SearchEntityResultProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultContentProps = useRender.ComponentProps<"div">;
+export declare function SearchEntityResultContent({ className, render, ...props }: SearchEntityResultContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultHeaderProps = useRender.ComponentProps<"div">;
+export declare function SearchEntityResultHeader({ className, render, ...props }: SearchEntityResultHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultLeadingProps = useRender.ComponentProps<"div">;
+export declare function SearchEntityResultLeading({ className, render, ...props }: SearchEntityResultLeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultIconProps = useRender.ComponentProps<"div">;
+export declare function SearchEntityResultIcon({ className, render, ...props }: SearchEntityResultIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultActivityProps = useRender.ComponentProps<"span">;
+export declare function SearchEntityResultActivity({ className, render, ...props }: SearchEntityResultActivityProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+type SearchEntityResultTextProps = useRender.ComponentProps<"span"> & {
+  muted?: boolean;
+};
+export type SearchEntityResultTitleProps = SearchEntityResultTextProps;
+export declare function SearchEntityResultTitle({ muted, className, render, ...props }: SearchEntityResultTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchEntityResultDescriptionProps = SearchEntityResultTextProps;
+export declare function SearchEntityResultDescription({ muted, className, render, ...props }: SearchEntityResultDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/search/search-entity.mjs

@@ -0,0 +1,106 @@
+import { searchEntity } from "./search-entity.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-entity.tsx
+function SearchEntityResult({ selected = false, className, render, ...props }) {
+	const { entity } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result",
+		"data-selected": selected ? "true" : void 0,
+		className: entity({ className }),
+		type: render ? void 0 : "button"
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultContent({ className, render, ...props }) {
+	const { entityContent } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-content",
+		className: entityContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultHeader({ className, render, ...props }) {
+	const { entityHeader } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-header",
+		className: entityHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultLeading({ className, render, ...props }) {
+	const { entityLeading } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-leading",
+		className: entityLeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultIcon({ className, render, ...props }) {
+	const { entityIcon } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-icon",
+		className: entityIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultActivity({ className, render, ...props }) {
+	const { entityActivity } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-activity",
+		className: entityActivity({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultTitle({ muted = false, className, render, ...props }) {
+	const { entityTitle } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-title",
+		"data-muted": muted ? "" : void 0,
+		className: entityTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchEntityResultDescription({ muted = false, className, render, ...props }) {
+	const { entityDescription } = searchEntity();
+	const defaultProps = {
+		"data-slot": "search-entity-result-description",
+		"data-muted": muted ? "" : void 0,
+		className: entityDescription({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SearchEntityResult, SearchEntityResultActivity, SearchEntityResultContent, SearchEntityResultDescription, SearchEntityResultHeader, SearchEntityResultIcon, SearchEntityResultLeading, SearchEntityResultTitle };

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

@@ -0,0 +1,41 @@
+import { tv } from "../../lib/tv.mjs";
+import { listCell, listCellFocus, listCellStates } from "../../lib/list-cell.mjs";
+//#region src/components/search/search-entity.recipe.ts
+const searchEntity = tv({ slots: {
+	entity: [
+		"flex min-w-0 w-full items-center gap-3 text-left",
+		"rounded-none border-0 py-3 text-foreground",
+		"pointer-coarse:min-h-16",
+		listCell,
+		listCellStates,
+		"disabled:cursor-default",
+		"data-[selected=true]:before:bg-brand-soft",
+		listCellFocus
+	],
+	entityLeading: ["relative flex shrink-0"],
+	entityIcon: [
+		"flex items-center justify-center overflow-hidden",
+		"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+		"[&_svg]:size-3.5"
+	],
+	entityActivity: [
+		"absolute inline-block shrink-0",
+		"right-[-3px] bottom-[-3px] size-[9px] rounded-[2px]",
+		"border-[1.5px] border-sticker-ink bg-presence-online",
+		"shadow-[0_0_0_2px_var(--layer-canvas)]"
+	],
+	entityContent: ["min-w-0 flex-1", "flex flex-col gap-0.5"],
+	entityHeader: ["flex min-w-0 items-center gap-2"],
+	entityTitle: [
+		"truncate",
+		"font-sans text-body font-semibold text-foreground",
+		"data-muted:text-foreground-hint"
+	],
+	entityDescription: [
+		"block truncate",
+		"text-callout text-foreground-muted",
+		"data-muted:text-foreground-hint"
+	]
+} });
+//#endregion
+export { searchEntity };

package/dist/components/search/search-message.d.mts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-message.d.ts
+type SearchMessageResultBaseProps = useRender.ComponentProps<"button"> & {
+  selected?: boolean;
+  nested?: boolean;
+};
+export type SearchMessageResultProps = Omit<SearchMessageResultBaseProps, "nested">;
+export declare function SearchMessageResult(props: SearchMessageResultProps): import("react").JSX.Element;
+export type SearchThreadMessageResultProps = Omit<SearchMessageResultBaseProps, "nested">;
+export declare function SearchThreadMessageResult(props: SearchThreadMessageResultProps): import("react").JSX.Element;
+export type SearchMessageResultHeaderProps = useRender.ComponentProps<"div">;
+export declare function SearchMessageResultHeader({ className, render, ...props }: SearchMessageResultHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultBodyProps = useRender.ComponentProps<"div">;
+export declare function SearchMessageResultBody({ className, render, ...props }: SearchMessageResultBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultMetaProps = useRender.ComponentProps<"span">;
+export declare function SearchMessageResultMeta({ className, render, ...props }: SearchMessageResultMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultThreadMetaProps = useRender.ComponentProps<"span">;
+export declare function SearchMessageResultThreadMeta({ className, render, ...props }: SearchMessageResultThreadMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultSenderProps = useRender.ComponentProps<"span">;
+export declare function SearchMessageResultSender({ className, render, ...props }: SearchMessageResultSenderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultTimestampProps = useRender.ComponentProps<"span">;
+export declare function SearchMessageResultTimestamp({ className, render, ...props }: SearchMessageResultTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchMessageResultMatchProps = useRender.ComponentProps<"mark">;
+export declare function SearchMessageResultMatch({ className, render, ...props }: SearchMessageResultMatchProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/search/search-message.mjs

@@ -0,0 +1,115 @@
+import { searchMessage } from "./search-message.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-message.tsx
+function SearchMessageResultBase({ nested = false, selected = false, className, render, ...props }) {
+	const { message } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result",
+		"data-nested": nested ? "true" : void 0,
+		"data-selected": selected ? "true" : void 0,
+		className: message({ className }),
+		type: render ? void 0 : "button"
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResult(props) {
+	return /* @__PURE__ */ jsx(SearchMessageResultBase, { ...props });
+}
+function SearchThreadMessageResult(props) {
+	return /* @__PURE__ */ jsx(SearchMessageResultBase, {
+		...props,
+		nested: true
+	});
+}
+function SearchMessageResultHeader({ className, render, ...props }) {
+	const { messageHeader } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-header",
+		className: messageHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultBody({ className, render, ...props }) {
+	const { messageBody } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-body",
+		className: messageBody({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultMeta({ className, render, ...props }) {
+	const { messageMeta } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-meta",
+		className: messageMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultThreadMeta({ className, render, ...props }) {
+	const { messageThreadMeta } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-thread-meta",
+		className: messageThreadMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultSender({ className, render, ...props }) {
+	const { messageSender } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-sender",
+		className: messageSender({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultTimestamp({ className, render, ...props }) {
+	const { messageTimestamp } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-timestamp",
+		className: messageTimestamp({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchMessageResultMatch({ className, render, ...props }) {
+	const { messageMatch } = searchMessage();
+	const defaultProps = {
+		"data-slot": "search-message-result-match",
+		className: messageMatch({ className })
+	};
+	return useRender({
+		defaultTagName: "mark",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SearchMessageResult, SearchMessageResultBody, SearchMessageResultHeader, SearchMessageResultMatch, SearchMessageResultMeta, SearchMessageResultSender, SearchMessageResultThreadMeta, SearchMessageResultTimestamp, SearchThreadMessageResult };

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

@@ -0,0 +1,32 @@
+import { tv } from "../../lib/tv.mjs";
+import { listCell, listCellFocus, listCellStates } from "../../lib/list-cell.mjs";
+import { searchHit } from "../../lib/search-hit.mjs";
+//#region src/components/search/search-message.recipe.ts
+const searchMessage = tv({ slots: {
+	message: [
+		"w-full text-left",
+		"block rounded-none border-0 py-3 text-foreground",
+		listCell,
+		listCellStates,
+		"disabled:cursor-default",
+		"data-[selected=true]:before:bg-brand-soft",
+		listCellFocus
+	],
+	messageHeader: [
+		"flex items-center",
+		"min-w-0 flex-nowrap gap-1.5",
+		"font-mono text-mono-meta text-foreground-hint"
+	],
+	messageBody: ["min-w-0 line-clamp-2", "mt-0.5 font-sans text-callout text-foreground-muted"],
+	messageMeta: ["min-w-0 shrink-1000 truncate"],
+	messageThreadMeta: ["inline-flex items-center gap-1", "shrink-0 [&_svg]:size-3"],
+	messageSender: [
+		"inline-flex items-center",
+		"order-first shrink-0 gap-1.5 whitespace-nowrap",
+		"font-sans text-callout font-bold text-foreground"
+	],
+	messageTimestamp: ["ml-auto min-w-0 truncate"],
+	messageMatch: searchHit
+} });
+//#endregion
+export { searchMessage };

package/dist/components/search/search-thread.d.mts

@@ -0,0 +1,17 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-thread.d.ts
+export type SearchThreadResultProps = useRender.ComponentProps<"div"> & {
+  selected?: boolean;
+};
+export declare function SearchThreadResult({ selected, className, render, ...props }: SearchThreadResultProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchThreadResultHeaderProps = useRender.ComponentProps<"div">;
+export declare function SearchThreadResultHeader({ className, render, ...props }: SearchThreadResultHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchThreadResultMetaProps = useRender.ComponentProps<"div">;
+export declare function SearchThreadResultMeta({ className, render, ...props }: SearchThreadResultMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchThreadResultTimestampProps = useRender.ComponentProps<"span">;
+export declare function SearchThreadResultTimestamp({ className, render, ...props }: SearchThreadResultTimestampProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchThreadResultTitleProps = useRender.ComponentProps<"div">;
+export declare function SearchThreadResultTitle({ className, render, ...props }: SearchThreadResultTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchThreadResultMessagesProps = useRender.ComponentProps<"div">;
+export declare function SearchThreadResultMessages({ className, render, ...props }: SearchThreadResultMessagesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/search/search-thread.mjs

@@ -0,0 +1,79 @@
+import { searchThread } from "./search-thread.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-thread.tsx
+function SearchThreadResult({ selected = false, className, render, ...props }) {
+	const { thread } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result",
+		"data-selected": selected ? "true" : void 0,
+		className: thread({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchThreadResultHeader({ className, render, ...props }) {
+	const { threadHeader } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result-header",
+		className: threadHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchThreadResultMeta({ className, render, ...props }) {
+	const { threadMeta } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result-meta",
+		className: threadMeta({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchThreadResultTimestamp({ className, render, ...props }) {
+	const { threadTimestamp } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result-timestamp",
+		className: threadTimestamp({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchThreadResultTitle({ className, render, ...props }) {
+	const { threadTitle } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result-title",
+		className: threadTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchThreadResultMessages({ className, render, ...props }) {
+	const { threadMessages } = searchThread();
+	const defaultProps = {
+		"data-slot": "search-thread-result-messages",
+		className: threadMessages({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SearchThreadResult, SearchThreadResultHeader, SearchThreadResultMessages, SearchThreadResultMeta, SearchThreadResultTimestamp, SearchThreadResultTitle };

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

@@ -0,0 +1,16 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/search/search-thread.recipe.ts
+const searchThread = tv({ slots: {
+	thread: ["overflow-hidden", "relative rounded-none border-0 bg-transparent text-foreground shadow-none"],
+	threadHeader: ["py-2", "px-5 pt-3 pb-0"],
+	threadMeta: [
+		"flex flex-wrap items-center",
+		"mb-0.5 gap-1.5",
+		"font-mono text-mono-meta font-normal text-foreground-hint"
+	],
+	threadTimestamp: ["normal-case", "ml-auto"],
+	threadTitle: ["font-sans text-callout font-semibold text-foreground"],
+	threadMessages: ["flex flex-col gap-0.5 py-2", "border-t-0 bg-transparent"]
+} });
+//#endregion
+export { searchThread };

package/dist/components/search/search-trigger.d.mts

@@ -0,0 +1,15 @@
+import { KbdProps } from "../kbd/kbd.mjs";
+import "../kbd/index.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-trigger.d.ts
+export type SearchTriggerProps = useRender.ComponentProps<"button">;
+/** The top bar's search box. Children: a search icon, a `SearchTriggerLabel`
+ *  and an optional `SearchTriggerShortcut`. */
+export declare function SearchTrigger({ className, render, ...props }: SearchTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchTriggerLabelProps = useRender.ComponentProps<"span">;
+/** The placeholder ("Search Raft"), truncated before the shortcut gives way. */
+export declare function SearchTriggerLabel({ className, render, ...props }: SearchTriggerLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchTriggerShortcutProps = KbdProps;
+/** The shortcut that opens search, at the right end. */
+export declare function SearchTriggerShortcut({ className, ...props }: SearchTriggerShortcutProps): import("react").JSX.Element;
+//#endregion

package/dist/components/search/search-trigger.mjs

@@ -0,0 +1,59 @@
+import { tv } from "../../lib/tv.mjs";
+import { Kbd } from "../kbd/kbd.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search-trigger.tsx
+const searchTrigger = tv({ slots: {
+	root: [
+		"relative inline-flex h-9 w-[clamp(360px,32vw,520px)] max-w-full min-w-0 shrink-0 items-center gap-2 px-3",
+		"rounded-control border-[1.5px] border-line-field bg-layer-card",
+		"text-left font-sans text-body font-normal text-foreground-hint",
+		"select-none outline-none transition-colors duration-100",
+		"active:overlay-medium focus-visible:shadow-focus",
+		"disabled:cursor-not-allowed disabled:border-line-hairline disabled:bg-fill-muted disabled:bg-none disabled:text-foreground-disabled",
+		"aria-disabled:cursor-not-allowed aria-disabled:border-line-hairline aria-disabled:bg-fill-muted aria-disabled:bg-none aria-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-[18px]"
+	],
+	label: ["min-w-0 flex-1 truncate"],
+	shortcut: ["ml-auto shrink-0"]
+} });
+/** The top bar's search box. Children: a search icon, a `SearchTriggerLabel`
+*  and an optional `SearchTriggerShortcut`. */
+function SearchTrigger({ className, render, ...props }) {
+	const { root } = searchTrigger();
+	const defaultProps = {
+		"data-slot": "search-trigger",
+		className: root({ className }),
+		...render ? {} : { type: "button" }
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The placeholder ("Search Raft"), truncated before the shortcut gives way. */
+function SearchTriggerLabel({ className, render, ...props }) {
+	const { label } = searchTrigger();
+	const defaultProps = {
+		"data-slot": "search-trigger-label",
+		className: label({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The shortcut that opens search, at the right end. */
+function SearchTriggerShortcut({ className, ...props }) {
+	const { shortcut } = searchTrigger();
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "search-trigger-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+//#endregion
+export { SearchTrigger, SearchTriggerLabel, SearchTriggerShortcut };

package/dist/components/search/search.d.mts

@@ -0,0 +1,23 @@
+import { Panel } from "../panel/panel.mjs";
+import { ComponentPropsWithRef } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search.d.ts
+export type SearchShellRootProps = useRender.ComponentProps<"div"> & {
+  edge?: ComponentPropsWithRef<typeof Panel>["edge"];
+};
+export declare function SearchShellRoot({ className, edge, render, ...props }: SearchShellRootProps): import("react").JSX.Element;
+export type SearchShellFiltersProps = ComponentPropsWithRef<"div">;
+export declare function SearchShellFilters({ className, ...props }: SearchShellFiltersProps): import("react").JSX.Element;
+export type SearchShellViewportProps = ComponentPropsWithRef<"div">;
+/** The results' scroller. It publishes its scrollbar's width for the result
+ *  cells (useScrollbarSize), so their fills sit 8px from both edges. */
+export declare function SearchShellViewport({ className, ref, ...props }: SearchShellViewportProps): import("react").JSX.Element;
+export type SearchResultsSummaryProps = useRender.ComponentProps<"span">;
+export declare function SearchResultsSummary({ className, render, ...props }: SearchResultsSummaryProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchResultsSectionProps = useRender.ComponentProps<"div">;
+export declare function SearchResultsSection({ className, render, ...props }: SearchResultsSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchResultsSectionHeadingProps = useRender.ComponentProps<"div">;
+export declare function SearchResultsSectionHeading({ className, render, ...props }: SearchResultsSectionHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SearchResultsListProps = useRender.ComponentProps<"div">;
+export declare function SearchResultsList({ className, render, ...props }: SearchResultsListProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/search/search.mjs

@@ -0,0 +1,88 @@
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { Panel } from "../panel/panel.mjs";
+import { useScrollbarSize } from "../../lib/use-scrollbar-size.mjs";
+import { search } from "./search.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/search/search.tsx
+function SearchShellRoot({ className, edge = "inset", render, ...props }) {
+	const { frame } = search();
+	return /* @__PURE__ */ jsx(Panel, {
+		...props,
+		render: render ?? /* @__PURE__ */ jsx("div", {}),
+		edge,
+		className: frame({ className })
+	});
+}
+function SearchShellFilters({ className, ...props }) {
+	const { filtersRow } = search();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "search-shell-filters",
+		className: filtersRow({ className }),
+		...props
+	});
+}
+/** The results' scroller. It publishes its scrollbar's width for the result
+*  cells (useScrollbarSize), so their fills sit 8px from both edges. */
+function SearchShellViewport({ className, ref, ...props }) {
+	const { viewport } = search();
+	const scrollbarRef = useScrollbarSize();
+	const [setRef] = useMergedRef(ref, scrollbarRef);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "search-shell-viewport",
+		className: viewport({ className }),
+		...props,
+		ref: setRef
+	});
+}
+function SearchResultsSummary({ className, render, ...props }) {
+	const { summary } = search();
+	const defaultProps = {
+		"data-slot": "search-results-summary",
+		className: summary({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchResultsSection({ className, render, ...props }) {
+	const { section } = search();
+	const defaultProps = {
+		"data-slot": "search-results-section",
+		className: section({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchResultsSectionHeading({ className, render, ...props }) {
+	const { sectionHeading } = search();
+	const defaultProps = {
+		"data-slot": "search-results-section-heading",
+		className: sectionHeading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SearchResultsList({ className, render, ...props }) {
+	const { list } = search();
+	const defaultProps = {
+		"data-slot": "search-results-list",
+		className: list({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SearchResultsList, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSummary, SearchShellFilters, SearchShellRoot, SearchShellViewport };