@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.0.0

package/dist/components/assistant-ui/elements/model-selector.js

@@ -0,0 +1,399 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../ui/command.js";
+import { cn } from "../../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/assistant-ui/elements/model-selector.tsx
+var model_selector_exports = /* @__PURE__ */ __exportAll({
+	DEFAULT_EFFORT_OPTIONS: () => DEFAULT_EFFORT_OPTIONS,
+	ModelSelectorContent: () => ModelSelectorContent,
+	ModelSelectorEffort: () => ModelSelectorEffort,
+	ModelSelectorEmpty: () => ModelSelectorEmpty,
+	ModelSelectorFocusAnchor: () => ModelSelectorFocusAnchor,
+	ModelSelectorGroup: () => ModelSelectorGroup,
+	ModelSelectorItem: () => ModelSelectorItem,
+	ModelSelectorList: () => ModelSelectorList,
+	ModelSelectorRoot: () => ModelSelectorRoot,
+	ModelSelectorSearch: () => ModelSelectorSearch,
+	ModelSelectorSeparator: () => ModelSelectorSeparator,
+	ModelSelectorTrigger: () => ModelSelectorTrigger,
+	ModelSelectorValue: () => ModelSelectorValue,
+	modelSelectorTriggerVariants: () => modelSelectorTriggerVariants,
+	resolveModelEffort: () => resolveModelEffort,
+	useModelSelectorContext: () => useModelSelectorContext,
+	useModelSelectorEfforts: () => useModelSelectorEfforts
+});
+const DEFAULT_EFFORT_OPTIONS = [
+	{
+		id: "low",
+		name: "Low"
+	},
+	{
+		id: "medium",
+		name: "Med"
+	},
+	{
+		id: "high",
+		name: "High"
+	}
+];
+function getModelEfforts(model) {
+	if (!model?.efforts) return void 0;
+	return model.efforts === true ? DEFAULT_EFFORT_OPTIONS : model.efforts;
+}
+function resolveEffort(efforts, effort) {
+	if (effort === void 0) return void 0;
+	return efforts?.some((e) => e.id === effort) ? effort : void 0;
+}
+/**
+* Returns the effort id if the given model supports it, otherwise undefined.
+* Effort selection is kept sticky across model switches; this resolves what
+* actually applies to the current model.
+*/
+function resolveModelEffort(models, modelId, effort) {
+	return resolveEffort(getModelEfforts(models.find((m) => m.id === modelId)), effort);
+}
+function useControllableState({ prop, defaultProp, onChange }) {
+	const [internal, setInternal] = useState(defaultProp);
+	const isControlled = prop !== void 0;
+	const value = isControlled ? prop : internal;
+	const onChangeRef = useRef(onChange);
+	useEffect(() => {
+		onChangeRef.current = onChange;
+	});
+	return [value, useCallback((next) => {
+		if (!isControlled) setInternal(next);
+		onChangeRef.current?.(next);
+	}, [isControlled])];
+}
+const ModelSelectorContext = createContext(null);
+function useModelSelectorContext() {
+	const ctx = useContext(ModelSelectorContext);
+	if (!ctx) throw new Error("ModelSelector sub-components must be used within ModelSelector.Root");
+	return ctx;
+}
+/**
+* The selected model's effort levels and the active selection. Use it to build
+* a custom effort UI inside ModelSelector.Content (e.g. a slider or a shadcn
+* DropdownMenu) when the built-in ModelSelector.Effort layout doesn't fit.
+* `efforts` is undefined for models without configurable reasoning.
+*/
+function useModelSelectorEfforts() {
+	const { efforts, effort, setEffort } = useModelSelectorContext();
+	return {
+		efforts,
+		effort,
+		setEffort
+	};
+}
+function ModelSelectorRoot({ models, value: valueProp, defaultValue, onValueChange, effort: effortProp, defaultEffort, onEffortChange, open: openProp, defaultOpen, onOpenChange, children }) {
+	const [value, setValue] = useControllableState({
+		prop: valueProp,
+		defaultProp: defaultValue ?? models[0]?.id,
+		onChange: onValueChange
+	});
+	const [effort, setEffort] = useControllableState({
+		prop: effortProp,
+		defaultProp: defaultEffort,
+		onChange: onEffortChange
+	});
+	const [open, setOpen] = useControllableState({
+		prop: openProp,
+		defaultProp: defaultOpen ?? false,
+		onChange: onOpenChange
+	});
+	const selectedModel = models.find((m) => m.id === value);
+	const efforts = getModelEfforts(selectedModel);
+	const activeEffort = resolveEffort(efforts, effort);
+	const contextValue = useMemo(() => ({
+		models,
+		value,
+		setValue,
+		selectedModel,
+		efforts,
+		effort: activeEffort,
+		setEffort,
+		setOpen
+	}), [
+		models,
+		value,
+		setValue,
+		selectedModel,
+		efforts,
+		activeEffort,
+		setEffort,
+		setOpen
+	]);
+	return /* @__PURE__ */ jsx(ModelSelectorContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Popover, {
+			open: open ?? false,
+			onOpenChange: setOpen,
+			children
+		})
+	});
+}
+const modelSelectorTriggerVariants = cva("focus-visible:ring-ring/50 flex w-fit items-center justify-between gap-2 overflow-hidden rounded-md text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+	variants: {
+		variant: {
+			outline: "border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			muted: "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+		},
+		size: {
+			default: "h-9 px-3 py-2",
+			sm: "h-8 px-2.5 py-1.5 text-xs",
+			lg: "h-10 px-4 py-2.5"
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "default"
+	}
+});
+function ModelSelectorTrigger({ className, variant, size, children, onKeyDown, ...props }) {
+	const { setOpen } = useModelSelectorContext();
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		"data-slot": "model-selector-trigger",
+		"data-variant": variant ?? "outline",
+		"data-size": size ?? "default",
+		role: "combobox",
+		"aria-haspopup": "listbox",
+		"aria-label": "Model",
+		className: cn(modelSelectorTriggerVariants({
+			variant,
+			size
+		}), className),
+		onKeyDown: (e) => {
+			onKeyDown?.(e);
+			if (e.defaultPrevented) return;
+			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+				e.preventDefault();
+				setOpen(true);
+			}
+		},
+		...props,
+		children: [children ?? /* @__PURE__ */ jsx(ModelSelectorValue, {}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })]
+	});
+}
+function ModelIcon({ children, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5", className),
+		children
+	});
+}
+function ModelSelectorValue({ placeholder = "Select model", showEffort = true, className }) {
+	const { selectedModel, efforts, effort } = useModelSelectorContext();
+	if (!selectedModel) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "model-selector-value",
+		className: cn("text-muted-foreground", className),
+		children: placeholder
+	});
+	const effortName = showEffort && effort !== void 0 ? efforts?.find((e) => e.id === effort)?.name : void 0;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "model-selector-value",
+		className: cn("flex min-w-0 items-center gap-2", className),
+		children: [
+			selectedModel.icon && /* @__PURE__ */ jsx(ModelIcon, { children: selectedModel.icon }),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate font-medium",
+				children: selectedModel.name
+			}),
+			effortName && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground min-w-7.5 truncate text-center",
+				children: effortName
+			})
+		]
+	});
+}
+function useLazyFlipSide() {
+	const [side, setSide] = useState();
+	const observerRef = useRef(null);
+	return {
+		side,
+		popupRef: useCallback((node) => {
+			observerRef.current?.disconnect();
+			observerRef.current = null;
+			if (!node) {
+				setSide(void 0);
+				return;
+			}
+			const sync = () => {
+				const rendered = node.getAttribute("data-side");
+				if (rendered) setSide(rendered);
+			};
+			sync();
+			const observer = new MutationObserver(sync);
+			observer.observe(node, {
+				attributes: true,
+				attributeFilter: ["data-side"]
+			});
+			observerRef.current = observer;
+		}, [])
+	};
+}
+/**
+* Hidden input that anchors cmdk's keyboard navigation, keeping the list
+* keyboard-operable without a visible search box. ModelSelectorContent renders
+* one automatically when unfiltered.
+*/
+function ModelSelectorFocusAnchor() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "sr-only",
+		children: /* @__PURE__ */ jsx(CommandInput, {
+			readOnly: true,
+			"aria-label": "Model"
+		})
+	});
+}
+function ModelSelectorContent({ className, align = "start", side, sideOffset = 6, searchable, children, ...props }) {
+	const { value } = useModelSelectorContext();
+	const { side: renderedSide, popupRef } = useLazyFlipSide();
+	const unfiltered = searchable === false || !searchable && children === void 0;
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		ref: popupRef,
+		"data-slot": "model-selector-content",
+		"aria-label": "Models",
+		align,
+		side: renderedSide ?? side ?? "bottom",
+		sideOffset,
+		className: cn("bg-popover w-72 min-w-(--anchor-width) overflow-hidden rounded-xl p-0", className),
+		...props,
+		children: /* @__PURE__ */ jsxs(Command, {
+			className: "bg-transparent",
+			shouldFilter: !unfiltered,
+			...value !== void 0 ? { defaultValue: value } : {},
+			children: [unfiltered && /* @__PURE__ */ jsx(ModelSelectorFocusAnchor, {}), children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				searchable && /* @__PURE__ */ jsx(ModelSelectorSearch, {}),
+				/* @__PURE__ */ jsx(ModelSelectorList, {}),
+				/* @__PURE__ */ jsx(ModelSelectorEffort, {})
+			] })]
+		})
+	});
+}
+function ModelSelectorSearch({ placeholder = "Search models...", ...props }) {
+	return /* @__PURE__ */ jsx(CommandInput, {
+		"data-slot": "model-selector-search",
+		placeholder,
+		...props
+	});
+}
+function ModelSelectorList({ className, children, ...props }) {
+	const { models } = useModelSelectorContext();
+	return /* @__PURE__ */ jsx(CommandList, {
+		"data-slot": "model-selector-list",
+		className: cn("[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ModelSelectorEmpty, {}), /* @__PURE__ */ jsx(CommandGroup, { children: models.map((model) => /* @__PURE__ */ jsx(ModelSelectorItem, { model }, model.id)) })] })
+	});
+}
+function ModelSelectorEmpty({ children, ...props }) {
+	return /* @__PURE__ */ jsx(CommandEmpty, {
+		"data-slot": "model-selector-empty",
+		...props,
+		children: children ?? "No models found."
+	});
+}
+function ModelSelectorGroup(props) {
+	return /* @__PURE__ */ jsx(CommandGroup, {
+		"data-slot": "model-selector-group",
+		...props
+	});
+}
+function ModelSelectorSeparator(props) {
+	return /* @__PURE__ */ jsx(CommandSeparator, {
+		"data-slot": "model-selector-separator",
+		...props
+	});
+}
+function ModelSelectorItem({ model, className, children, onSelect, ...props }) {
+	const { value, setValue, setOpen } = useModelSelectorContext();
+	const isSelected = value === model.id;
+	return /* @__PURE__ */ jsxs(CommandItem, {
+		"data-slot": "model-selector-item",
+		value: model.id,
+		keywords: [model.name, ...model.keywords ?? []],
+		...model.disabled ? { disabled: true } : void 0,
+		onSelect: (selectedValue) => {
+			setValue(model.id);
+			setOpen(false);
+			onSelect?.(selectedValue);
+		},
+		className: cn("relative items-start gap-2 rounded-lg py-2 ps-3 pe-9 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [model.icon ? /* @__PURE__ */ jsx(ModelIcon, {
+			className: "mt-[3px]",
+			children: model.icon
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "size-3.5 shrink"
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate font-medium",
+				children: model.name
+			}), model.description && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground truncate text-xs",
+				children: model.description
+			})]
+		})] }), isSelected && /* @__PURE__ */ jsx("span", {
+			className: "absolute end-3 top-2.5 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+		})]
+	});
+}
+function ModelSelectorEffort({ label = "Thinking", className, onKeyDown, onKeyDownCapture, ...props }) {
+	const { efforts, effort, setEffort } = useModelSelectorEfforts();
+	if (!efforts?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "model-selector-effort",
+		className: cn("flex cursor-default items-center justify-between gap-3 border-t px-3 py-2", className),
+		onKeyDownCapture: (e) => {
+			onKeyDownCapture?.(e);
+			if (e.defaultPrevented) return;
+			if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+			onKeyDown?.(e);
+			if (e.defaultPrevented) return;
+			const input = e.currentTarget.closest("[cmdk-root]")?.querySelector("[cmdk-input]");
+			if (!input) return;
+			e.preventDefault();
+			e.stopPropagation();
+			input.focus();
+			input.dispatchEvent(new KeyboardEvent("keydown", e.nativeEvent));
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") return;
+			onKeyDown?.(e);
+			if (e.defaultPrevented) return;
+			if (e.key === "Home" || e.key === "End") {
+				e.preventDefault();
+				e.stopPropagation();
+				const radios = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]:not([data-disabled])"));
+				(e.key === "Home" ? radios[0] : radios[radios.length - 1])?.focus();
+			}
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: label
+		}), /* @__PURE__ */ jsx(RadioGroup, {
+			value: effort ?? "",
+			onValueChange: setEffort,
+			"aria-label": typeof label === "string" ? label : "Reasoning effort",
+			className: "flex items-center gap-0.5",
+			children: efforts.map((option) => /* @__PURE__ */ jsx(Radio.Root, {
+				value: option.id,
+				className: cn("focus-visible:ring-ring/50 text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-md px-2 py-1 text-xs transition-colors outline-none focus-visible:ring-1", "data-checked:bg-accent data-checked:text-accent-foreground data-checked:font-medium"),
+				children: option.name
+			}, option.id))
+		})]
+	});
+}
+//#endregion
+export { DEFAULT_EFFORT_OPTIONS, ModelSelectorContent, ModelSelectorEffort, ModelSelectorEmpty, ModelSelectorFocusAnchor, ModelSelectorGroup, ModelSelectorItem, ModelSelectorList, ModelSelectorRoot, ModelSelectorSearch, ModelSelectorSeparator, ModelSelectorTrigger, ModelSelectorValue, modelSelectorTriggerVariants, model_selector_exports, resolveModelEffort, useModelSelectorContext, useModelSelectorEfforts };

package/dist/components/assistant-ui/elements/number-ticker.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+declare namespace number_ticker_d_exports {
+  export { NumberTicker };
+}
+export declare function NumberTicker({ value, label, className, ...props }: Omit<ComponentProps<"div">, "children" | "value" | "label"> & {
+  value: number;
+  label: string;
+}): import("react").JSX.Element;
+//#endregion
+export { number_ticker_d_exports };

package/dist/components/assistant-ui/elements/number-ticker.js

@@ -0,0 +1,41 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { mono } from "./surfaces.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/number-ticker.tsx
+var number_ticker_exports = /* @__PURE__ */ __exportAll({ NumberTicker: () => NumberTicker });
+function RollingDigit({ digit }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex h-[1.15em] overflow-hidden",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex flex-col transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
+			style: { transform: `translateY(-${digit * 1.15}em)` },
+			children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx("span", {
+				className: "h-[1.15em] leading-[1.15]",
+				children: i
+			}, i))
+		})
+	});
+}
+function NumberTicker({ value, label, className, ...props }) {
+	const formatted = value.toLocaleString("en-US");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "number-ticker",
+		className: cn("flex flex-col items-center gap-2.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex text-3xl font-medium tracking-tight tabular-nums",
+			"aria-label": formatted,
+			children: formatted.split("").map((char, i) => /\d/.test(char) ? /* @__PURE__ */ jsx(RollingDigit, { digit: Number(char) }, i) : /* @__PURE__ */ jsx("span", {
+				className: "h-[1.15em] leading-[1.15]",
+				children: char
+			}, i))
+		}), /* @__PURE__ */ jsx("span", {
+			className: cn(mono, "text-muted-foreground"),
+			children: label
+		})]
+	});
+}
+//#endregion
+export { NumberTicker, number_ticker_exports };

package/dist/components/assistant-ui/elements/onboarding.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+declare namespace onboarding_d_exports {
+  export { Onboarding, OnboardingStep };
+}
+export interface OnboardingStep {
+  title: string;
+  body: string;
+  example: string;
+}
+export declare function Onboarding({ steps, index, onNext, onSkip, className, ...props }: Omit<ComponentProps<"div">, "children" | "steps" | "index" | "onNext" | "onSkip"> & {
+  steps: readonly OnboardingStep[];
+  index: number;
+  onNext?: () => void;
+  onSkip?: () => void;
+}): import("react").JSX.Element | null;
+//#endregion
+export { onboarding_d_exports };

package/dist/components/assistant-ui/elements/onboarding.js

@@ -0,0 +1,69 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../../lib/utils.js";
+import { field, inkButton, mono, paper } from "./surfaces.js";
+import { indexIn } from "../utils/range.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/assistant-ui/elements/onboarding.tsx
+var onboarding_exports = /* @__PURE__ */ __exportAll({ Onboarding: () => Onboarding });
+function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
+	const current = indexIn(steps, index);
+	const step = steps[current];
+	if (!step) return null;
+	const last = current >= steps.length - 1;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "onboarding",
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-[20px] p-5", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "fade-in animate-in flex flex-col gap-2 duration-300",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: cn(mono, "text-muted-foreground tabular-nums"),
+					children: [
+						current + 1,
+						" of ",
+						steps.length
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-[15px] font-medium tracking-tight",
+					children: step.title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-[13px] leading-relaxed break-words",
+					children: step.body
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn(field, "text-muted-foreground rounded-xl px-3 py-2 text-[13px] leading-relaxed"),
+					children: step.example
+				})
+			]
+		}, current), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex gap-1.5",
+					children: steps.map((_, i) => /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: cn("h-1.5 rounded-full transition-all duration-300 motion-reduce:transition-none", i === current ? "bg-foreground w-4" : "bg-muted-foreground/60 w-1.5")
+					}, i))
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onSkip,
+					className: "text-muted-foreground hover:bg-foreground/[0.06] hover:text-foreground/90 ms-auto h-8 rounded-full px-3 text-xs font-medium transition-[background-color,color,scale] duration-150 active:scale-[0.96]",
+					children: "Skip"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onNext,
+					className: cn(inkButton, "flex h-8 items-center rounded-full px-3.5 text-xs font-medium"),
+					children: last ? "Start" : "Next"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { Onboarding, onboarding_exports };

package/dist/components/assistant-ui/elements/option-list.d.ts

@@ -0,0 +1,39 @@
+import { ComponentProps } from "react";
+declare namespace option_list_d_exports {
+  export { OptionList, OptionListOption, OptionListProps };
+}
+export interface OptionListOption {
+  id: string;
+  label: string;
+  description?: string | undefined;
+  disabled?: boolean | undefined;
+}
+export interface OptionListProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
+  options: readonly OptionListOption[];
+  /** One option answers the question, or several do. */
+  selectionMode?: "single" | "multiple" | undefined;
+  /**
+   * Options the list starts selected: checked in a multiple selection, and
+   * marked as the current answer in a single one.
+   */
+  defaultValue?: readonly string[] | undefined;
+  /** The fewest options a multiple selection confirms with. */
+  minSelections?: number | undefined;
+  /** The most options a multiple selection may hold. */
+  maxSelections?: number | undefined;
+  /**
+   * Commits the answer: a single selection commits on pick, a multiple one on
+   * the confirm button. Without it the list only displays its options. A
+   * rejected promise reopens the list, because the answer never landed.
+   */
+  onConfirm?: ((ids: string[]) => void | Promise<void>) | undefined;
+  confirmLabel?: string | undefined;
+  /**
+   * The committed answer. Once set, the list is a receipt of just these
+   * options and takes no further input.
+   */
+  choice?: readonly string[] | undefined;
+}
+export declare function OptionList({ options, selectionMode, defaultValue, minSelections, maxSelections, onConfirm, confirmLabel, choice, className, ...props }: OptionListProps): import("react").JSX.Element;
+//#endregion
+export { option_list_d_exports };