@ctrl-ui/react 0.8.0

package/dist/ui/trigger-menu.d.ts

@@ -0,0 +1,46 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/trigger-menu.d.ts
+type TriggerMenuProps = {
+  open: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  anchorRect: DOMRect | null;
+  side?: "top" | "bottom";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  className?: string;
+  children?: ReactNode;
+} & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuListProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuItemProps = Omit<Omit<ComponentProps<"div">, "onSelect"> & {
+  active?: boolean;
+  disabled?: boolean;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type TriggerMenuIconProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function TriggerMenu({ open, onOpenChange, anchorRect, side, align, sideOffset, className, children }: TriggerMenuProps): import("react").JSX.Element;
+declare function TriggerMenuList({ className, ...props }: TriggerMenuListProps): import("react").JSX.Element;
+declare function TriggerMenuItem({ className, active, disabled, onMouseDown, ...props }: TriggerMenuItemProps): import("react").JSX.Element;
+declare function TriggerMenuIcon({ className, ...props }: TriggerMenuIconProps): import("react").JSX.Element;
+declare function TriggerMenuEmpty({ className, ...props }: TriggerMenuEmptyProps): import("react").JSX.Element;
+declare function TriggerMenuGroup({ className, ...props }: TriggerMenuGroupProps): import("react").JSX.Element;
+declare function TriggerMenuGroupLabel({ className, ...props }: TriggerMenuGroupLabelProps): import("react").JSX.Element;
+//#endregion
+export { TriggerMenu, TriggerMenuEmpty, TriggerMenuEmptyProps, TriggerMenuGroup, TriggerMenuGroupLabel, TriggerMenuGroupLabelProps, TriggerMenuGroupProps, TriggerMenuIcon, TriggerMenuIconProps, TriggerMenuItem, TriggerMenuItemProps, TriggerMenuList, TriggerMenuListProps, TriggerMenuProps };

package/dist/ui/trigger-menu.js

@@ -0,0 +1,116 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/ui/trigger-menu.tsx
+function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "start", sideOffset = 8, className, children }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: (next, eventDetails) => onOpenChange?.(next, eventDetails),
+		modal: false,
+		children: /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			"data-control-ui": "trigger-menu",
+			"data-popup-kind": "trigger-menu",
+			"data-control-family": "popup",
+			"data-slot": "positioner",
+			"data-skin": skinId(),
+			"data-effects": skinEffects(),
+			anchor: anchorRect === null ? void 0 : () => ({ getBoundingClientRect: () => anchorRect }),
+			side,
+			align,
+			sideOffset,
+			className: "z-[80]",
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"data-control-ui": "trigger-menu",
+				"data-popup-kind": "trigger-menu",
+				"data-control-family": "popup",
+				"data-slot": "root",
+				"data-surface": "floating",
+				"data-popup-part": "list-surface",
+				initialFocus: false,
+				finalFocus: false,
+				className: cn("max-h-[min(18rem,var(--available-height))] w-64 max-w-[var(--available-width)] overflow-y-auto", className),
+				children
+			})
+		}) })
+	});
+}
+function TriggerMenuList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "trigger-menu",
+		"data-popup-kind": "trigger-menu",
+		"data-slot": "list",
+		"data-control-family": "popup",
+		"data-popup-part": "list-content",
+		role: "listbox",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function TriggerMenuItem({ className, active = false, disabled = false, onMouseDown, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "trigger-menu",
+		"data-popup-kind": "trigger-menu",
+		"data-control-family": "popup",
+		"data-slot": "item",
+		"data-popup-part": "item",
+		role: "option",
+		tabIndex: -1,
+		"aria-selected": active,
+		"aria-disabled": disabled || void 0,
+		"data-highlighted": active ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		onMouseDown: (event) => {
+			event.preventDefault();
+			if (disabled) return;
+			onMouseDown?.(event);
+		},
+		className: cn(popupItemStructureClasses, className),
+		...props
+	});
+}
+function TriggerMenuIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "trigger-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "trigger-menu",
+		"data-slot": "icon",
+		className: cn("flex shrink-0 items-center justify-center [&_svg]:size-4", className),
+		...props
+	});
+}
+function TriggerMenuEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "trigger-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "trigger-menu",
+		"data-slot": "empty",
+		className: cn("px-[calc(var(--padding-x)*0.5)]", className),
+		...props
+	});
+}
+function TriggerMenuGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "trigger-menu",
+		"data-control-family": "popup",
+		"data-popup-kind": "trigger-menu",
+		"data-slot": "group",
+		className: cn("flex flex-col", className),
+		...props
+	});
+}
+function TriggerMenuGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "trigger-menu",
+		"data-popup-kind": "trigger-menu",
+		"data-slot": "group-label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		className: cn("px-[calc(var(--padding-x)*0.5)]", className),
+		...props
+	});
+}
+//#endregion
+export { TriggerMenu, TriggerMenuEmpty, TriggerMenuGroup, TriggerMenuGroupLabel, TriggerMenuIcon, TriggerMenuItem, TriggerMenuList };

package/dist/user-ask.d.ts

@@ -0,0 +1,50 @@
+import { Button } from "./ui/button.js";
+import { UserAskKnobStyle } from "./knob-contracts/user-ask-knobs.js";
+import { UserAskProps } from "./hooks/use-user-ask.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/user-ask.d.ts
+type UserAskStyleProps<Props, Style> = Omit<Props, "style"> & {
+  style?: CSSProperties & Style;
+};
+declare function UserAsk({ onComplete, onDismiss, autoFocus, className, children, ...props }: UserAskProps): import("react").JSX.Element;
+type UserAskHeaderProps = ComponentProps<"header"> & {
+  style?: CSSProperties & UserAskKnobStyle;
+};
+declare function UserAskHeader({ className, ...props }: UserAskHeaderProps): import("react").JSX.Element;
+type UserAskTitleProps = UserAskStyleProps<ComponentProps<"h3">, UserAskKnobStyle>;
+declare function UserAskTitle({ className, children, ...props }: UserAskTitleProps): import("react").JSX.Element;
+type UserAskPaginationProps = UserAskStyleProps<ComponentProps<"div">, UserAskKnobStyle>;
+declare function UserAskPagination({ className, ...props }: UserAskPaginationProps): import("react").JSX.Element | null;
+type UserAskQuestionProps = Omit<ComponentProps<"div">, "title"> & {
+  id: string;
+  title: string;
+  /** Pre-selects option carrying this value (e.g. recommended one) until user picks another. */
+  defaultValue?: string;
+} & {
+  style?: CSSProperties & UserAskKnobStyle;
+};
+declare function UserAskQuestion({ id, title, defaultValue, className, children, ...props }: UserAskQuestionProps): import("react").JSX.Element;
+type UserAskOptionProps = UserAskStyleProps<Omit<ComponentProps<"button">, "value">, UserAskKnobStyle> & {
+  value: string;
+  recommended?: boolean;
+};
+declare function UserAskOption({ value, recommended, disabled, className, children, onClick, ...props }: UserAskOptionProps): import("react").JSX.Element;
+type UserAskOptionLabelProps = UserAskStyleProps<ComponentProps<"span">, UserAskKnobStyle>;
+declare function UserAskOptionLabel({ className, children, ...props }: UserAskOptionLabelProps): import("react").JSX.Element;
+type UserAskOptionDescriptionProps = UserAskStyleProps<ComponentProps<"span">, UserAskKnobStyle>;
+declare function UserAskOptionDescription({ className, ...props }: UserAskOptionDescriptionProps): import("react").JSX.Element;
+type UserAskOptionInputProps = UserAskStyleProps<Omit<ComponentProps<"input">, "value">, UserAskKnobStyle> & {
+  /** Row label while unselected (option's "Other" affordance). */
+  label?: string;
+};
+declare function UserAskOptionInput({ label, placeholder, disabled, className, onChange, style, ...props }: UserAskOptionInputProps): import("react").JSX.Element;
+type UserAskFooterProps = ComponentProps<"footer"> & {
+  style?: CSSProperties & UserAskKnobStyle;
+};
+declare function UserAskFooter({ className, ...props }: UserAskFooterProps): import("react").JSX.Element;
+type UserAskDismissProps = ComponentProps<typeof Button>;
+declare function UserAskDismiss({ className, children, onClick, ...props }: UserAskDismissProps): import("react").JSX.Element;
+type UserAskSubmitProps = ComponentProps<typeof Button>;
+declare function UserAskSubmit({ className, children, disabled, onClick, ...props }: UserAskSubmitProps): import("react").JSX.Element;
+//#endregion
+export { UserAsk, UserAskDismiss, UserAskDismissProps, UserAskFooter, UserAskFooterProps, UserAskHeader, UserAskHeaderProps, UserAskOption, UserAskOptionDescription, UserAskOptionDescriptionProps, UserAskOptionInput, UserAskOptionInputProps, UserAskOptionLabel, UserAskOptionLabelProps, UserAskOptionProps, UserAskPagination, UserAskPaginationProps, UserAskQuestion, UserAskQuestionProps, UserAskSubmit, UserAskSubmitProps, UserAskTitle, UserAskTitleProps };

package/dist/user-ask.js

@@ -0,0 +1,398 @@
+"use client";
+import { cn } from "./lib/cn.js";
+import { Button } from "./ui/button.js";
+import { useUserAsk } from "./hooks/use-user-ask.js";
+import { Kbd } from "./ui/kbd.js";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
+//#region src/user-ask.tsx
+const UserAskContext = createContext(null);
+function useUserAskContext() {
+	const context = useContext(UserAskContext);
+	if (!context) throw new Error("UserAsk compound components must be rendered inside <UserAsk>.");
+	return context;
+}
+const UserAskQuestionContext = createContext(null);
+function useUserAskQuestionContext() {
+	const context = useContext(UserAskQuestionContext);
+	if (!context) throw new Error("UserAsk options must be rendered inside <UserAskQuestion>.");
+	return context;
+}
+function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children, ...props }) {
+	const ask = useUserAsk({
+		onComplete,
+		onDismiss
+	});
+	const titleId = useId();
+	const panelRef = useRef(null);
+	useEffect(() => {
+		if (autoFocus) panelRef.current?.focus();
+	}, [autoFocus]);
+	const lastActiveIndex = useRef(ask.activeIndex);
+	useEffect(() => {
+		if (lastActiveIndex.current === ask.activeIndex) return;
+		lastActiveIndex.current = ask.activeIndex;
+		const panel = panelRef.current;
+		const active = document.activeElement;
+		const activeIsUsable = active instanceof HTMLElement && panel?.contains(active) && active.checkVisibility();
+		if (panel && !activeIsUsable) panel.focus();
+	}, [ask.activeIndex]);
+	return /* @__PURE__ */ jsx(UserAskContext.Provider, {
+		value: {
+			...ask,
+			titleId
+		},
+		children: /* @__PURE__ */ jsx("section", {
+			ref: panelRef,
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "root",
+			"data-surface": "panel",
+			"aria-labelledby": titleId,
+			tabIndex: -1,
+			onKeyDown: ask.handleKeyDown,
+			className: cn("relative w-full", className),
+			...props,
+			children
+		})
+	});
+}
+function UserAskHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "header",
+		className: cn("flex items-start justify-between", className),
+		...props
+	});
+}
+function UserAskTitle({ className, children, ...props }) {
+	const ask = useUserAskContext();
+	return /* @__PURE__ */ jsx("h3", {
+		id: ask.titleId,
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "title",
+		className,
+		...props,
+		children: children ?? ask.activeQuestion?.title
+	});
+}
+function UserAskPagination({ className, ...props }) {
+	const ask = useUserAskContext();
+	if (ask.questions.length <= 1) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "pagination",
+		className: cn("flex shrink-0 items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "quiet",
+				size: "xs",
+				"aria-label": "Previous question",
+				disabled: ask.activeIndex === 0,
+				onClick: () => ask.goTo(ask.activeIndex - 1),
+				children: /* @__PURE__ */ jsx(ChevronLeft, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				"data-control-ui": "user-ask",
+				"data-control-family": "user-ask",
+				"data-slot": "pagination-count",
+				children: [
+					ask.activeIndex + 1,
+					" of ",
+					ask.questions.length
+				]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "quiet",
+				size: "xs",
+				"aria-label": "Next question",
+				disabled: ask.isLastQuestion,
+				onClick: () => ask.goTo(ask.activeIndex + 1),
+				children: /* @__PURE__ */ jsx(ChevronRight, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			})
+		]
+	});
+}
+function UserAskQuestion({ id, title, defaultValue, className, children, ...props }) {
+	const ask = useUserAskContext();
+	const key = useId();
+	const active = ask.activeQuestion?.key === key;
+	useEffect(() => ask.registerQuestion({
+		key,
+		id,
+		title,
+		defaultValue
+	}), [
+		ask.registerQuestion,
+		key,
+		id,
+		title,
+		defaultValue
+	]);
+	useEffect(() => () => ask.unregisterQuestion(key), [ask.unregisterQuestion, key]);
+	return /* @__PURE__ */ jsx(UserAskQuestionContext.Provider, {
+		value: {
+			id,
+			active
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "radiogroup",
+			"aria-labelledby": active ? ask.titleId : void 0,
+			hidden: !active,
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "question",
+			"data-active": active ? "" : void 0,
+			className: cn("flex flex-col", className),
+			...props,
+			children
+		})
+	});
+}
+const UserAskOptionContext = createContext(null);
+function useUserAskOptionContext() {
+	const context = useContext(UserAskOptionContext);
+	if (!context) throw new Error("UserAskOption parts must be rendered inside <UserAskOption>.");
+	return context;
+}
+const optionRowClasses = "grid w-full grid-cols-[auto_minmax(0,1fr)] items-start";
+function UserAskOption({ value, recommended = false, disabled = false, className, children, onClick, ...props }) {
+	const ask = useUserAskContext();
+	const question = useUserAskQuestionContext();
+	const key = useId();
+	useEffect(() => ask.registerOption(question.id, {
+		key,
+		value,
+		disabled
+	}), [
+		ask.registerOption,
+		question.id,
+		key,
+		value,
+		disabled
+	]);
+	useEffect(() => () => ask.unregisterOption(question.id, key), [
+		ask.unregisterOption,
+		question.id,
+		key
+	]);
+	const index = ask.optionsFor(question.id).findIndex((entry) => entry.key === key);
+	const selected = ask.isSelected(question.id, key);
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) ask.select(question.id, key);
+	}
+	return /* @__PURE__ */ jsx(UserAskOptionContext.Provider, {
+		value: {
+			selected,
+			recommended
+		},
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": selected,
+			disabled,
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "option",
+			"data-selected": selected ? "" : void 0,
+			"data-recommended": recommended ? "" : void 0,
+			onClick: handleClick,
+			className: cn(optionRowClasses, "disabled:cursor-not-allowed", className),
+			...props,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-control-ui": "user-ask",
+				"data-control-family": "user-ask",
+				"data-slot": "option-indicator",
+				"data-selected": selected ? "" : void 0,
+				className: "inline-flex shrink-0 items-center justify-center",
+				children: selected ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : index + 1
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0",
+				children
+			})]
+		})
+	});
+}
+function UserAskOptionLabel({ className, children, ...props }) {
+	const option = useUserAskOptionContext();
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "option-label",
+		className: cn("block", className),
+		...props,
+		children: [children, option.recommended ? /* @__PURE__ */ jsxs("span", {
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "recommended",
+			children: [" ", "(Recommended)"]
+		}) : null]
+	});
+}
+function UserAskOptionDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "option-description",
+		className: cn("block", className),
+		...props
+	});
+}
+function UserAskOptionInput({ label = "Other", placeholder = "Type your own answer", disabled = false, className, onChange, style, ...props }) {
+	const ask = useUserAskContext();
+	const question = useUserAskQuestionContext();
+	const key = useId();
+	const inputRef = useRef(null);
+	useEffect(() => ask.registerOption(question.id, {
+		key,
+		value: "",
+		disabled,
+		freeform: true
+	}), [
+		ask.registerOption,
+		question.id,
+		key,
+		disabled
+	]);
+	useEffect(() => () => ask.unregisterOption(question.id, key), [
+		ask.unregisterOption,
+		question.id,
+		key
+	]);
+	const index = ask.optionsFor(question.id).findIndex((entry) => entry.key === key);
+	const selected = ask.isSelected(question.id, key);
+	useEffect(() => {
+		if (selected && question.active) inputRef.current?.focus();
+	}, [selected, question.active]);
+	function handleChange(event) {
+		onChange?.(event);
+		if (!event.defaultPrevented) ask.setFreeformText(question.id, event.currentTarget.value);
+	}
+	if (!selected) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": false,
+		disabled,
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "option",
+		"data-freeform": "",
+		onClick: () => ask.select(question.id, key),
+		className: cn(optionRowClasses, "disabled:cursor-not-allowed", className),
+		style,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "option-indicator",
+			className: "inline-flex shrink-0 items-center justify-center",
+			children: index + 1
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "freeform-label",
+			className: "min-w-0",
+			children: label
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "option",
+		"data-selected": "",
+		"data-freeform": "",
+		className: cn(optionRowClasses, className),
+		style,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "option-indicator",
+			"data-selected": "",
+			className: "inline-flex shrink-0 items-center justify-center",
+			children: /* @__PURE__ */ jsx(PencilLine, { className: "size-3" })
+		}), /* @__PURE__ */ jsx("input", {
+			...props,
+			ref: inputRef,
+			type: "text",
+			"aria-label": label,
+			"data-control-ui": "user-ask",
+			"data-control-family": "user-ask",
+			"data-slot": "option-input",
+			value: ask.freeformTextFor(question.id),
+			onChange: handleChange,
+			placeholder,
+			className: "min-w-0",
+			style
+		})]
+	});
+}
+function UserAskFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		"data-control-ui": "user-ask",
+		"data-control-family": "user-ask",
+		"data-slot": "footer",
+		className: cn("flex items-center justify-end", className),
+		...props
+	});
+}
+function UserAskDismiss({ className, children, onClick, ...props }) {
+	const ask = useUserAskContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) ask.dismiss();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "user-ask",
+		"data-user-ask-dismiss": "true",
+		"data-slot": "dismiss",
+		type: "button",
+		variant: "quiet",
+		size: "xs",
+		onClick: handleClick,
+		className: cn(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Dismiss", /* @__PURE__ */ jsx(Kbd, { children: "esc" })] })
+	});
+}
+function UserAskSubmit({ className, children, disabled, onClick, ...props }) {
+	const ask = useUserAskContext();
+	function handleClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) ask.advance();
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		"data-control-ui": "user-ask",
+		"data-user-ask-submit": "true",
+		"data-slot": "submit",
+		type: "button",
+		variant: "solid",
+		tone: "primary",
+		size: "xs",
+		disabled: disabled ?? !ask.canContinue,
+		onClick: handleClick,
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Continue", /* @__PURE__ */ jsx(Kbd, {
+			"data-user-ask-submit-kbd": "true",
+			children: "⏎"
+		})] })
+	});
+}
+//#endregion
+export { UserAsk, UserAskDismiss, UserAskFooter, UserAskHeader, UserAskOption, UserAskOptionDescription, UserAskOptionInput, UserAskOptionLabel, UserAskPagination, UserAskQuestion, UserAskSubmit, UserAskTitle };