@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/code-block/code-block.recipe.mjs

@@ -0,0 +1,47 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/code-block/code-block.recipe.ts
+const codeBlock = tv({ slots: {
+	root: [
+		"group/code-block relative my-2 min-w-0",
+		"[--code-block-header-height:--spacing(10)]",
+		"overflow-clip px-0 pb-0",
+		"rounded-container border border-line-hairline bg-layer-code text-foreground"
+	],
+	header: [
+		"flex h-(--code-block-header-height) items-center",
+		"gap-2 border-b border-line-hairline pr-[calc(var(--control-embedded-inset)-1px)] pl-3",
+		"font-mono text-mono-meta text-foreground-hint"
+	],
+	title: ["min-w-0 flex-1 truncate font-mono", "text-mono-meta"],
+	actions: [
+		"ml-auto flex items-center gap-1",
+		"[[data-slot=code-block-body]>&]:col-start-2 [[data-slot=code-block-body]>&]:row-start-1",
+		"[[data-slot=code-block-body]>&]:z-10 [[data-slot=code-block-body]>&]:ml-3",
+		"[[data-slot=code-block-body]>&]:my-[calc(var(--control-embedded-inset)-0.5rem-1px)] [[data-slot=code-block-body]>&]:mr-[calc(var(--control-embedded-inset)-0.75rem-1px)]"
+	],
+	corner: [
+		"pointer-events-none absolute z-20 size-1",
+		"data-[y=top]:top-0 data-[y=bottom]:bottom-0",
+		"data-[x=left]:left-0 data-[x=right]:right-0",
+		"hidden"
+	],
+	body: [
+		"relative grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start *:col-start-1",
+		"p-4 font-mono [&_pre]:overflow-x-auto",
+		"[&_pre]:outline-none [&_pre]:focus-visible:keyboard:inset-ring-2 [&_pre]:focus-visible:keyboard:inset-ring-foreground",
+		"px-3 py-2 text-mono-code text-foreground",
+		"[&_pre_span]:text-(--shiki-light,currentColor)",
+		"dark:[&_pre_span]:text-(--shiki-dark,currentColor)"
+	],
+	action: [
+		"inline-flex shrink-0 items-center justify-center",
+		"transition-[color,background-color,opacity]",
+		"focus-visible:outline-none",
+		"size-8 rounded-chip text-foreground",
+		"hover:bg-fill-medium active:bg-fill-medium",
+		"focus-visible:ring-0 focus-visible:shadow-focus",
+		"[&_svg:not([class*='size-'])]:size-4.5"
+	]
+} });
+//#endregion
+export { codeBlock };

package/dist/components/code-block/index.d.mts

@@ -0,0 +1,2 @@
+import { CodeBlock, CodeBlockAction, CodeBlockActionProps, CodeBlockActions, CodeBlockActionsProps, CodeBlockBody, CodeBlockBodyProps, CodeBlockHeader, CodeBlockHeaderProps, CodeBlockPre, CodeBlockPreProps, CodeBlockProps, CodeBlockTitle, CodeBlockTitleProps } from "./code-block.mjs";
+export { CodeBlock, CodeBlockAction, type CodeBlockActionProps, CodeBlockActions, type CodeBlockActionsProps, CodeBlockBody, type CodeBlockBodyProps, CodeBlockHeader, type CodeBlockHeaderProps, CodeBlockPre, type CodeBlockPreProps, type CodeBlockProps, CodeBlockTitle, type CodeBlockTitleProps };

package/dist/components/combobox/combobox.d.mts

@@ -0,0 +1,69 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox/combobox.d.ts
+export type ComboboxProps<Value, Multiple extends boolean | undefined = false> = Combobox.Root.Props<Value, Multiple>;
+declare function Combobox$1<Value, Multiple extends boolean | undefined = false>({ defaultInputValue, defaultValue, inputValue, onInputValueChange, onValueChange, value, ...props }: ComboboxProps<Value, Multiple>): import("react").JSX.Element;
+export type ComboboxLabelProps = StyledProps<Combobox.Label.Props>;
+export declare function ComboboxLabel({ className, ...props }: ComboboxLabelProps): import("react").JSX.Element;
+export type ComboboxValueProps = Combobox.Value.Props;
+export declare function ComboboxValue(props: ComboboxValueProps): import("react").JSX.Element;
+export type ComboboxTriggerProps = StyledProps<Combobox.Trigger.Props>;
+export declare function ComboboxTrigger({ className, children, render, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
+export type ComboboxTriggerCountProps = StyledProps<ComponentPropsWithRef<"span">>;
+export declare function ComboboxTriggerCount({ className, ...props }: ComboboxTriggerCountProps): import("react").JSX.Element;
+export type ComboboxTriggerIndicatorProps = StyledProps<ComponentPropsWithRef<"span">>;
+export declare function ComboboxTriggerIndicator({ className, ...props }: ComboboxTriggerIndicatorProps): import("react").JSX.Element;
+export type ComboboxInputGroupProps = StyledProps<Combobox.InputGroup.Props>;
+export declare function ComboboxInputGroup({ className, ...props }: ComboboxInputGroupProps): import("react").JSX.Element;
+export type ComboboxControlProps = StyledProps<Combobox.InputGroup.Props>;
+export declare function ComboboxControl({ className, ...props }: ComboboxControlProps): import("react").JSX.Element;
+export type ComboboxInputProps = StyledProps<Combobox.Input.Props> & {
+  suppressPasswordManager?: boolean;
+};
+export declare function ComboboxInput({ suppressPasswordManager, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
+export type ComboboxPortalProps = Combobox.Portal.Props;
+export declare function ComboboxPortal(props: ComboboxPortalProps): import("react").JSX.Element;
+export type ComboboxPopupProps = ComponentPropsWithRef<"div">;
+export declare function ComboboxPopup({ className, ...props }: ComboboxPopupProps): import("react").JSX.Element;
+export type ComboboxHeaderProps = ComponentPropsWithRef<"div">;
+export declare function ComboboxHeader({ className, ...props }: ComboboxHeaderProps): import("react").JSX.Element;
+export type ComboboxSeparatorProps = StyledProps<ComponentPropsWithRef<"div">>;
+export declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps): import("react").JSX.Element;
+export type ComboboxContentProps = StyledProps<Combobox.Popup.Props> & Pick<Combobox.Positioner.Props, "align" | "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?: Combobox.Positioner.Props["collisionPadding"];
+  portalProps?: ComboboxPortalProps;
+};
+export declare function ComboboxContent({ align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod, side, sideOffset, sticky, portalProps, className, initialFocus, finalFocus, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export type ComboboxListProps = StyledProps<Combobox.List.Props>;
+export declare function ComboboxList({ className, ...props }: ComboboxListProps): import("react").JSX.Element;
+export type ComboboxItemProps = StyledProps<Combobox.Item.Props>;
+export declare function ComboboxItem({ className, ...props }: ComboboxItemProps): import("react").JSX.Element;
+export type ComboboxItemIndicatorProps = StyledProps<Combobox.ItemIndicator.Props>;
+export declare function ComboboxItemIndicator({ className, children, ...props }: ComboboxItemIndicatorProps): import("react").JSX.Element;
+export type ComboboxClearProps = StyledProps<Combobox.Clear.Props>;
+export declare function ComboboxClear({ className, children, keepMounted, ...props }: ComboboxClearProps): import("react").JSX.Element;
+export type ComboboxEmptyProps = StyledProps<Combobox.Empty.Props>;
+export declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
+export type ComboboxGroupProps = StyledProps<Combobox.Group.Props>;
+export declare function ComboboxGroup({ className, ...props }: ComboboxGroupProps): import("react").JSX.Element;
+export type ComboboxGroupLabelProps = StyledProps<Combobox.GroupLabel.Props>;
+export declare function ComboboxGroupLabel({ className, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
+export type ComboboxRowProps = StyledProps<Combobox.Row.Props>;
+export declare function ComboboxRow({ className, ...props }: ComboboxRowProps): import("react").JSX.Element;
+export type ComboboxCollectionProps = Combobox.Collection.Props;
+export declare function ComboboxCollection(props: ComboboxCollectionProps): import("react").JSX.Element;
+export type ComboboxChipsProps = StyledProps<Combobox.Chips.Props>;
+export declare function ComboboxChips({ className, ...props }: ComboboxChipsProps): import("react").JSX.Element;
+export type ComboboxChipProps = StyledProps<Combobox.Chip.Props>;
+export declare function ComboboxChip({ className, ref, title, ...props }: ComboboxChipProps): import("react").JSX.Element;
+export type ComboboxChipRemoveProps = StyledProps<Combobox.ChipRemove.Props>;
+export declare function ComboboxChipRemove({ className, children, ...props }: ComboboxChipRemoveProps): import("react").JSX.Element;
+//#endregion
+export { Combobox$1 as Combobox };

package/dist/components/combobox/combobox.mjs

@@ -0,0 +1,438 @@
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { Button } from "../button/button.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { useOverflowTitle } from "../../lib/use-overflow-title.mjs";
+import { chipRemoveBase } from "../../lib/chip-remove.mjs";
+import { Check, X } from "lucide-react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+//#region src/components/combobox/combobox.tsx
+const combobox = tv({
+	slots: {
+		trigger: [
+			"inline-flex select-none items-center justify-between",
+			"outline-none transition-colors",
+			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
+			"[&>span[data-slot='combobox-trigger-content']]:min-w-0 [&>span[data-slot='combobox-trigger-content']]:flex-1",
+			"[&>span[data-slot='combobox-trigger-content']>svg]:shrink-0",
+			"h-8 gap-1.5 rounded-control border-transparent bg-transparent px-2.5",
+			"text-control font-semibold text-foreground-muted",
+			"inset-ring inset-ring-line-seam hover:bg-transparent",
+			"data-has-value:bg-info-soft data-has-value:text-foreground data-has-value:inset-ring-0 data-has-value:hover:bg-info-soft",
+			"focus-visible:shadow-focus",
+			"disabled:inset-ring-0 aria-disabled:inset-ring-0",
+			"[&>span[data-slot='combobox-trigger-content']>svg:not([class*='size-'])]:size-3.5",
+			"[&>span[data-slot='combobox-trigger-content']>svg:not([class*='stroke-'])]:stroke-2"
+		],
+		triggerCount: ["inline-flex shrink-0 items-center justify-center", "h-auto min-w-0 px-0 font-mono text-mono-meta font-bold"],
+		triggerIndicator: [
+			"ml-auto flex shrink-0 items-center justify-center",
+			"transition-[background-color,color] duration-100",
+			"[&>svg]:shrink-0",
+			"rounded-sticker text-foreground-hint opacity-100",
+			"[&>svg]:size-3.5 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
+		],
+		control: [
+			"flex min-w-0 items-center gap-2",
+			"outline-none",
+			"[&>svg]:pointer-events-none [&>svg]:shrink-0",
+			"**:data-[slot='combobox-clear']:size-control-embedded [&_[data-slot='combobox-clear']]:px-0 **:data-[slot='combobox-clear']:shrink-0",
+			"[&>[data-slot=combobox-clear]:last-child]:me-[calc(var(--control-embedded-inset)-0.75rem-1px)]",
+			"[&_[data-slot='combobox-trigger-indicator']]:size-4",
+			"[&_[data-slot='combobox-trigger-indicator']>svg]:shrink-0",
+			"min-h-control rounded-control border-[1.5px] border-line-field bg-layer-card px-3 py-0",
+			"font-sans text-body text-foreground",
+			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
+			"[&>svg]:text-foreground-hint [&>svg:not([class*='size-'])]:size-4.5",
+			"[&>svg:not([class*='stroke-'])]:stroke-2",
+			"[&_[data-slot='combobox-trigger-indicator']>svg]:size-4"
+		],
+		inputGroup: [
+			"flex items-center border-b",
+			"h-10 gap-2 border-line-hairline bg-transparent px-3 py-0",
+			"text-callout text-foreground-hint",
+			"[&>svg]:size-4 [&>svg]:shrink-0",
+			"first:rounded-t-container has-focus-visible:keyboard:inset-ring-2 has-focus-visible:keyboard:inset-ring-foreground"
+		],
+		input: ["w-full outline-none"],
+		positioner: ["isolate z-50 outline-none"],
+		content: [
+			"h-auto max-h-(--available-height) min-w-[220px] overflow-hidden",
+			"max-w-[min(var(--available-width),max(var(--anchor-width),24rem))]",
+			"outline-none",
+			"rounded-container bg-layer-popover text-foreground",
+			"shadow-float ring-1 ring-line-seam"
+		],
+		header: ["flex items-center justify-between px-3", "gap-2 py-1.5 pr-1.5 pl-4"],
+		separator: ["h-px shrink-0 border-0", "bg-line-hairline"],
+		list: ["max-h-64 overflow-y-auto overscroll-contain", "flex flex-col p-1 scroll-py-1"],
+		item: [
+			"flex w-full shrink-0 cursor-default select-none items-center justify-between overflow-hidden",
+			"text-left outline-none transition-colors",
+			"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+			"font-sans text-callout font-medium text-foreground wrap-anywhere",
+			"bg-transparent hover:bg-brand-soft data-highlighted:bg-brand-soft",
+			"data-selected:font-bold",
+			"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
+			"[&_svg:not([class*='size-'])]:size-4",
+			"[&_svg:not([class*='stroke-'])]:stroke-2"
+		],
+		itemIndicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "text-foreground [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-2 [&>svg_*]:stroke-2"],
+		label: ["m-0", "font-sans text-caption font-bold text-foreground-hint"],
+		clear: [
+			"inline-flex items-center justify-center",
+			"pointer-events-none opacity-0 outline-none transition-[background-color,color] duration-100",
+			"data-visible:pointer-events-auto data-visible:opacity-100",
+			"h-7 min-w-0 rounded-chip px-2",
+			"font-sans text-control font-semibold text-foreground-muted",
+			"hover:bg-fill-medium hover:text-foreground active:bg-fill-medium",
+			"focus-visible:shadow-focus",
+			"[&>svg]:size-4 [&>svg]:stroke-2 [&>svg_*]:stroke-2"
+		],
+		empty: ["px-4 py-3.5 text-left text-callout text-foreground-hint"],
+		groupLabel: ["py-2", "px-2.5 pt-2 pb-1 text-caption font-bold text-foreground-hint"],
+		chips: [
+			"flex flex-wrap items-center",
+			"min-h-control gap-1.5 rounded-control border-[1.5px] border-line-field bg-layer-card py-[calc(var(--control-embedded-inset)-1.5px)] pr-3 pl-[calc(var(--control-embedded-inset)-1px)]",
+			"*:data-[slot=combobox-input]:h-control-embedded",
+			"transition-shadow duration-90 ease-out has-focus-visible:shadow-focus"
+		],
+		chip: [
+			"inline-flex min-w-0 max-w-full items-center overflow-hidden",
+			"[&>:not([data-slot=combobox-chip-remove])]:min-w-0 [&>:not([data-slot=combobox-chip-remove])]:truncate",
+			"h-control-embedded gap-1.5 rounded-chip bg-fill-muted pr-0.5 pl-2",
+			"text-footnote font-semibold text-foreground"
+		],
+		chipRemove: [...chipRemoveBase, "size-[calc(var(--control-embedded-size)-4px)]"]
+	},
+	variants: { inputOwner: {
+		group: { input: ["min-w-0 flex-1 border-0 bg-transparent p-0", "font-sans text-callout text-foreground placeholder:text-foreground-hint"] },
+		control: { input: [
+			"min-w-0 flex-1 rounded-none border-0 bg-transparent p-0 shadow-none",
+			"outline-none ring-0 focus:border-transparent focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0",
+			"font-sans text-body font-normal text-foreground",
+			"placeholder:text-foreground-hint"
+		] }
+	} }
+});
+const ComboboxContext = createContext({
+	hasValue: false,
+	visible: false
+});
+const ComboboxInputOwnerContext = createContext("group");
+function hasClearableValue(value) {
+	if (Array.isArray(value)) return value.length > 0;
+	return value != null;
+}
+function hasClearableInputValue(value) {
+	if (Array.isArray(value)) return value.length > 0;
+	if (typeof value === "string") return value.length > 0;
+	if (typeof value === "number") return true;
+	return value != null;
+}
+function Combobox$1({ defaultInputValue, defaultValue, inputValue, onInputValueChange, onValueChange, value, ...props }) {
+	const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultInputValue ?? "");
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const resolvedInputValue = inputValue === void 0 ? uncontrolledInputValue : inputValue;
+	const hasValue = hasClearableValue(value === void 0 ? uncontrolledValue : value);
+	const visible = hasValue || hasClearableInputValue(resolvedInputValue);
+	const contextValue = useMemo(() => ({
+		hasValue,
+		visible
+	}), [hasValue, visible]);
+	const handleInputValueChange = useCallback((nextInputValue, eventDetails) => {
+		if (inputValue === void 0) setUncontrolledInputValue(nextInputValue);
+		onInputValueChange?.(nextInputValue, eventDetails);
+	}, [inputValue, onInputValueChange]);
+	const handleValueChange = useCallback((nextValue, eventDetails) => {
+		if (value === void 0) setUncontrolledValue(nextValue);
+		onValueChange?.(nextValue, eventDetails);
+	}, [value, onValueChange]);
+	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Combobox.Root, {
+			"data-slot": "combobox",
+			defaultInputValue,
+			defaultValue,
+			inputValue,
+			value,
+			onInputValueChange: handleInputValueChange,
+			onValueChange: handleValueChange,
+			...props
+		})
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	const { label } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Label, {
+		"data-slot": "combobox-label",
+		className: label({ className }),
+		...props
+	});
+}
+function ComboboxValue(props) {
+	return /* @__PURE__ */ jsx(Combobox.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+function ComboboxTrigger({ className, children, render, ...props }) {
+	const { hasValue } = use(ComboboxContext);
+	const { trigger } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Trigger, {
+		"data-slot": "combobox-trigger",
+		"data-has-value": hasValue ? "" : void 0,
+		render: render ?? /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "md",
+			className: trigger({ className })
+		}),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-slot": "combobox-trigger-content",
+			"data-picker-trigger-content": "combobox",
+			className: "flex min-w-0 flex-1 items-center gap-1.5",
+			children
+		})
+	});
+}
+function ComboboxTriggerCount({ className, ...props }) {
+	const { triggerCount } = combobox();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "combobox-trigger-count",
+		className: triggerCount({ className }),
+		...props
+	});
+}
+function ComboboxTriggerIndicator({ className, ...props }) {
+	const { triggerIndicator } = combobox();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "combobox-trigger-indicator",
+		"data-picker-trigger-indicator": "",
+		className: triggerIndicator({ className }),
+		...props
+	});
+}
+function ComboboxInputGroup({ className, ...props }) {
+	const { inputGroup } = combobox();
+	return /* @__PURE__ */ jsx(ComboboxInputOwnerContext, {
+		value: "group",
+		children: /* @__PURE__ */ jsx(Combobox.InputGroup, {
+			"data-slot": "combobox-input-group",
+			className: inputGroup({ className }),
+			...props
+		})
+	});
+}
+function ComboboxControl({ className, ...props }) {
+	const { control } = combobox();
+	return /* @__PURE__ */ jsx(ComboboxInputOwnerContext, {
+		value: "control",
+		children: /* @__PURE__ */ jsx(Combobox.InputGroup, {
+			"data-slot": "combobox-control",
+			className: control({ className }),
+			...props
+		})
+	});
+}
+function ComboboxInput({ suppressPasswordManager, className, ...props }) {
+	const inputOwner = use(ComboboxInputOwnerContext);
+	const { input } = combobox({ inputOwner });
+	return /* @__PURE__ */ jsx(Combobox.Input, {
+		"data-slot": "combobox-input",
+		className: input({ className: [suppressPasswordManager && "keeper-ignore", className] }),
+		"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
+		"data-bwignore": suppressPasswordManager ? "true" : void 0,
+		"data-form-type": suppressPasswordManager ? "other" : void 0,
+		"data-lpignore": suppressPasswordManager ? "true" : void 0,
+		...props
+	});
+}
+function ComboboxPortal(props) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, {
+		"data-slot": "combobox-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function ComboboxPopup({ className, ...props }) {
+	const { content } = combobox();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-content",
+		className: content({ className }),
+		...props
+	});
+}
+function ComboboxHeader({ className, ...props }) {
+	const { header } = combobox();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-header",
+		className: header({ className }),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	const { separator } = combobox();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"data-slot": "combobox-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function ComboboxFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 8, container);
+	return /* @__PURE__ */ jsx(Combobox.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function ComboboxContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, initialFocus = false, finalFocus = false, ...props }) {
+	const { positioner, content } = combobox();
+	return /* @__PURE__ */ jsx(ComboboxPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(ComboboxFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalProps?.container,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset: sideOffset ?? 4,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: content({ className }),
+				initialFocus,
+				finalFocus,
+				...props
+			})
+		})
+	});
+}
+function ComboboxList({ className, ...props }) {
+	const { list } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.List, {
+		"data-slot": "combobox-list",
+		className: list({ className }),
+		...props
+	});
+}
+function ComboboxItem({ className, ...props }) {
+	const { item } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		"data-slot": "combobox-item",
+		className: item({ className }),
+		...props
+	});
+}
+function ComboboxItemIndicator({ className, children, ...props }) {
+	const { itemIndicator } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+		"data-slot": "combobox-item-indicator",
+		className: itemIndicator({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Check, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0 stroke-[1.5]"
+		})
+	});
+}
+function ComboboxClear({ className, children, keepMounted = true, ...props }) {
+	const { visible } = use(ComboboxContext);
+	const { clear } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Clear, {
+		"data-slot": "combobox-clear",
+		"data-visible": visible ? "" : void 0,
+		"aria-hidden": visible ? props["aria-hidden"] : true,
+		keepMounted,
+		className: clear({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			className: "size-3.5 shrink-0"
+		})
+	});
+}
+function ComboboxEmpty({ className, children, ...props }) {
+	const { empty } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		"data-slot": "combobox-empty",
+		...props,
+		children: children == null ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "combobox-empty-content",
+			className: empty({ className }),
+			children
+		})
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		"data-slot": "combobox-group",
+		className,
+		...props
+	});
+}
+function ComboboxGroupLabel({ className, ...props }) {
+	const { groupLabel } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		"data-slot": "combobox-group-label",
+		className: groupLabel({ className }),
+		...props
+	});
+}
+function ComboboxRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Row, {
+		"data-slot": "combobox-row",
+		className,
+		...props
+	});
+}
+function ComboboxCollection(props) {
+	return /* @__PURE__ */ jsx(Combobox.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxChips({ className, ...props }) {
+	const { chips } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.Chips, {
+		"data-slot": "combobox-chips",
+		className: chips({ className }),
+		...props
+	});
+}
+function ComboboxChip({ className, ref, title, ...props }) {
+	const { chip } = combobox();
+	const overflowRef = useOverflowTitle(ref, title);
+	return /* @__PURE__ */ jsx(Combobox.Chip, {
+		ref: overflowRef,
+		title,
+		"data-slot": "combobox-chip",
+		className: chip({ className }),
+		...props
+	});
+}
+function ComboboxChipRemove({ className, children, ...props }) {
+	const { chipRemove } = combobox();
+	return /* @__PURE__ */ jsx(Combobox.ChipRemove, {
+		"data-slot": "combobox-chip-remove",
+		className: chipRemove({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": true,
+			className: "size-3 shrink-0"
+		})
+	});
+}
+//#endregion
+export { Combobox$1 as Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxControl, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxHeader, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxList, ComboboxPopup, ComboboxPortal, ComboboxRow, ComboboxSeparator, ComboboxTrigger, ComboboxTriggerCount, ComboboxTriggerIndicator, ComboboxValue };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxChip, ComboboxChipProps, ComboboxChipRemove, ComboboxChipRemoveProps, ComboboxChips, ComboboxChipsProps, ComboboxClear, ComboboxClearProps, ComboboxCollection, ComboboxCollectionProps, ComboboxContent, ComboboxContentProps, ComboboxControl, ComboboxControlProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxHeader, ComboboxHeaderProps, ComboboxInput, ComboboxInputGroup, ComboboxInputGroupProps, ComboboxInputProps, ComboboxItem, ComboboxItemIndicator, ComboboxItemIndicatorProps, ComboboxItemProps, ComboboxLabel, ComboboxLabelProps, ComboboxList, ComboboxListProps, ComboboxPopup, ComboboxPopupProps, ComboboxPortal, ComboboxPortalProps, ComboboxProps, ComboboxRow, ComboboxRowProps, ComboboxSeparator, ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerCount, ComboboxTriggerCountProps, ComboboxTriggerIndicator, ComboboxTriggerIndicatorProps, ComboboxTriggerProps, ComboboxValue, ComboboxValueProps } from "./combobox.mjs";
+export { Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxContent, type ComboboxContentProps, ComboboxControl, type ComboboxControlProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxHeader, type ComboboxHeaderProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputProps, ComboboxItem, ComboboxItemIndicator, type ComboboxItemIndicatorProps, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxList, type ComboboxListProps, ComboboxPopup, type ComboboxPopupProps, ComboboxPortal, type ComboboxPortalProps, type ComboboxProps, ComboboxRow, type ComboboxRowProps, ComboboxSeparator, type ComboboxSeparatorProps, ComboboxTrigger, ComboboxTriggerCount, type ComboboxTriggerCountProps, ComboboxTriggerIndicator, type ComboboxTriggerIndicatorProps, type ComboboxTriggerProps, ComboboxValue, type ComboboxValueProps };

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

@@ -0,0 +1,4 @@
+import { ComboboxSelectOption, ComboboxSelectProps } from "./combobox-select.types.mjs";
+//#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, listMaxHeight, 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, onOpenChange, ...rootProps }: ComboboxSelectProps<Option, Multiple>): import("react").JSX.Element;
+//#endregion

package/dist/components/combobox-select/combobox-select.list-side.mjs

@@ -0,0 +1,16 @@
+//#region src/components/combobox-select/combobox-select.list-side.ts
+/** One option row (36px) and the list's 6px padding above and below. */
+const ROW = 36;
+const LIST_PADDING = 12;
+/** The gap between the field and the list (the positioner's sideOffset). */
+const SIDE_OFFSET = 4;
+/**
+* Whether fewer than three rows of a phone's list fit between the field and the
+* bottom of the visual viewport. The list always opens below the field on a
+* phone and never flips; when this is true the field is scrolled up instead.
+*/
+function roomBelowIsShort(field, viewport, rows = 3) {
+	return viewport.top + viewport.height - field.bottom - SIDE_OFFSET < rows * ROW + LIST_PADDING;
+}
+//#endregion
+export { roomBelowIsShort };