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

package/dist/motion/dial/dial.js

@@ -0,0 +1,290 @@
+import { capturePointer } from "../../lib/pointer.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useControllableValue } from "ahooks";
+import { motion, useMotionValue, useReducedMotionConfig, useSpring, useTransform, useVelocity } from "motion/react";
+//#region src/motion/dial/dial.tsx
+const C = 50;
+const R = 42;
+const TRAIL = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5
+];
+function pointAt(angle) {
+	const rad = angle * Math.PI / 180;
+	return {
+		x: C + R * Math.sin(rad),
+		y: C - R * Math.cos(rad)
+	};
+}
+function arcPath(from, to) {
+	const a = pointAt(from);
+	const b = pointAt(to);
+	const large = to - from > 180 ? 1 : 0;
+	return `M ${a.x} ${a.y} A ${R} ${R} 0 ${large} 1 ${b.x} ${b.y}`;
+}
+function decimalsOf(step) {
+	const text = `${step}`;
+	return text.includes(".") ? text.split(".")[1]?.length ?? 0 : 0;
+}
+/**
+* A circular value control for bounded settings (reasoning effort, a
+* confidence floor). Tap a point, drag around the ring or flick it: the knob
+* settles on a spring and leaves a short trail when it moves fast. A
+* `role="slider"`: arrows step, Shift+arrows and PageUp/PageDown take large
+* steps, Home and End go to the bounds.
+*
+* Behavior reference: reactbits comet-dial.
+*/
+function Dial({ value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, onValueCommit, min = 0, max = 100, step = 1, largeStep, label, unit, formatValue, size = 160, sweep = 270, disabled = false, className, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const labelId = React.useId();
+	const controllable = {};
+	if (_value !== void 0) controllable.value = _value;
+	if (_defaultValue !== void 0) controllable.defaultValue = _defaultValue;
+	if (_onValueChange) controllable.onValueChange = _onValueChange;
+	const [value, setValue] = useControllableValue(controllable, {
+		trigger: "onValueChange",
+		defaultValue: min
+	});
+	const start = -sweep / 2;
+	const range = max - min;
+	const big = largeStep ?? Math.max(step, Math.round(range / 10 / step) * step);
+	const decimals = decimalsOf(step);
+	const format = formatValue ?? ((v) => v.toFixed(decimals));
+	const snap = React.useCallback((raw) => {
+		const stepped = Math.round((raw - min) / step) * step + min;
+		return Number(Math.min(max, Math.max(min, stepped)).toFixed(decimals));
+	}, [
+		min,
+		max,
+		step,
+		decimals
+	]);
+	const target = useMotionValue(value);
+	const spring = useSpring(target, {
+		stiffness: 260,
+		damping: 26,
+		mass: .9
+	});
+	const display = reduced ? target : spring;
+	const velocity = useVelocity(display);
+	React.useEffect(() => {
+		target.set(value);
+		if (reduced) spring.jump(value);
+	}, [
+		value,
+		reduced,
+		target,
+		spring
+	]);
+	const fraction = useTransform(display, (v) => Math.min(1, Math.max(0, (v - min) / range)));
+	const angle = useTransform(fraction, (f) => start + f * sweep);
+	const knobX = useTransform(angle, (a) => pointAt(a).x);
+	const knobY = useTransform(angle, (a) => pointAt(a).y);
+	const spacing = useTransform(velocity, (v) => {
+		if (reduced) return 0;
+		const degPerSecond = v / range * sweep;
+		return Math.max(-7, Math.min(7, degPerSecond * .012));
+	});
+	const update = (next) => {
+		const snapped = snap(next);
+		if (snapped !== value) setValue(snapped);
+		return snapped;
+	};
+	const surface = React.useRef(null);
+	const drag = React.useRef(null);
+	const angleFromPointer = (event) => {
+		const rect = surface.current?.getBoundingClientRect();
+		if (!rect) return start;
+		const dx = event.clientX - (rect.left + rect.width / 2);
+		const dy = event.clientY - (rect.top + rect.height / 2);
+		return Math.atan2(dx, -dy) * 180 / Math.PI;
+	};
+	const valueFromAngle = (deg, previous) => {
+		const end = start + sweep;
+		let a = deg;
+		if (a < start || a > end) a = Math.abs((a - start + 540) % 360 - 180) < Math.abs((a - end + 540) % 360 - 180) ? start : end;
+		const raw = min + (a - start) / sweep * range;
+		if (drag.current && Math.abs(raw - previous) > range * .5) return previous > min + range / 2 ? max : min;
+		return raw;
+	};
+	const onPointerDown = (event) => {
+		if (disabled || event.button !== 0) return;
+		capturePointer(event.currentTarget, event.pointerId);
+		const deg = angleFromPointer(event);
+		const last = update(valueFromAngle(deg, value));
+		drag.current = {
+			samples: [{
+				t: performance.now(),
+				deg
+			}],
+			last
+		};
+	};
+	const onPointerMove = (event) => {
+		const state = drag.current;
+		if (!state) return;
+		const deg = angleFromPointer(event);
+		const now = performance.now();
+		state.samples.push({
+			t: now,
+			deg
+		});
+		state.samples = state.samples.filter((s, index, all) => now - s.t < 100 || index >= all.length - 2);
+		state.last = update(valueFromAngle(deg, state.last));
+	};
+	const onPointerUp = () => {
+		const state = drag.current;
+		drag.current = null;
+		if (!state) return;
+		let final = state.last;
+		const first = state.samples[0];
+		const last = state.samples[state.samples.length - 1];
+		if (first && last && performance.now() - last.t < 100 && last.t - first.t > 10) {
+			let delta = last.deg - first.deg;
+			if (delta > 180) delta -= 360;
+			if (delta < -180) delta += 360;
+			const degPerMs = delta / (last.t - first.t);
+			if (Math.abs(degPerMs) > .45) final = update(state.last + degPerMs * 140 / sweep * range);
+		}
+		onValueCommit?.(final);
+	};
+	const onKeyDown = (event) => {
+		if (disabled) return;
+		const unitStep = event.shiftKey ? big : step;
+		const next = {
+			ArrowRight: value + unitStep,
+			ArrowUp: value + unitStep,
+			ArrowLeft: value - unitStep,
+			ArrowDown: value - unitStep,
+			PageUp: value + big,
+			PageDown: value - big,
+			Home: min,
+			End: max
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		onValueCommit?.(update(next));
+	};
+	const readout = format(value);
+	const readoutSize = Math.round(Math.min(size * .2, size * .56 / (readout.length + (unit?.length ?? 0) * .5) / .6));
+	const labelSize = Math.max(9, Math.min(11, Math.round(size * .07)));
+	const end = start + sweep;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: surface,
+		role: "slider",
+		tabIndex: disabled ? void 0 : 0,
+		"aria-labelledby": labelId,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": value,
+		"aria-valuetext": unit ? `${readout}${unit}` : readout,
+		"aria-disabled": disabled || void 0,
+		"data-slot": "dial",
+		"data-motion": reduced ? "reduced" : "full",
+		className: cn("group/dial relative inline-flex shrink-0 touch-none items-center justify-center rounded-full outline-none select-none", disabled && "opacity-50", className),
+		style: {
+			width: size,
+			height: size
+		},
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel: onPointerUp,
+		onKeyDown,
+		...props,
+		children: [/* @__PURE__ */ jsxs("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 100 100",
+			className: "absolute inset-0 size-full overflow-visible",
+			children: [
+				/* @__PURE__ */ jsx("path", {
+					d: arcPath(start, end),
+					fill: "none",
+					strokeWidth: 4,
+					strokeLinecap: "round",
+					className: "stroke-foreground/12"
+				}),
+				/* @__PURE__ */ jsx(motion.path, {
+					"data-slot": "dial-value-arc",
+					d: arcPath(start, end),
+					fill: "none",
+					strokeWidth: 4,
+					strokeLinecap: "round",
+					className: "stroke-primary",
+					style: { pathLength: fraction }
+				}),
+				TRAIL.map((i) => /* @__PURE__ */ jsx(TrailDot, {
+					index: i,
+					angle,
+					spacing
+				}, i)),
+				/* @__PURE__ */ jsx(motion.circle, {
+					"data-slot": "dial-focus",
+					r: 9.5,
+					className: "fill-ring/50 opacity-0 group-focus-visible/dial:opacity-100",
+					style: {
+						cx: knobX,
+						cy: knobY
+					}
+				}),
+				/* @__PURE__ */ jsx(motion.circle, {
+					"data-slot": "dial-knob",
+					r: 6,
+					strokeWidth: 2.5,
+					className: "fill-primary stroke-background",
+					style: {
+						cx: knobX,
+						cy: knobY
+					}
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none relative flex flex-col items-center",
+			children: [/* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "flex items-baseline leading-none",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "dial-readout",
+					className: "font-semibold tracking-tight text-foreground tabular-nums",
+					style: { fontSize: readoutSize },
+					children: readout
+				}), unit ? /* @__PURE__ */ jsx("span", {
+					className: "ml-0.5 text-muted-foreground",
+					style: { fontSize: Math.round(size * .09) },
+					children: unit
+				}) : null]
+			}), /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "mt-1.5 truncate text-center leading-none text-muted-foreground",
+				style: {
+					fontSize: labelSize,
+					maxWidth: size * .72
+				},
+				children: label
+			})]
+		})]
+	});
+}
+function TrailDot({ index, angle, spacing }) {
+	const cx = useTransform(() => pointAt(angle.get() - spacing.get() * (index + 1)).x);
+	const cy = useTransform(() => pointAt(angle.get() - spacing.get() * (index + 1)).y);
+	const opacity = useTransform(spacing, (s) => Math.min(1, Math.abs(s) / 3) * (.42 - index * .065));
+	return /* @__PURE__ */ jsx(motion.circle, {
+		r: 5 - index * .6,
+		className: "fill-primary",
+		style: {
+			cx,
+			cy,
+			opacity
+		}
+	});
+}
+//#endregion
+export { Dial };

package/dist/motion/dictation-button/dictation-button.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+//#region src/motion/dictation-button/dictation-button.d.ts
+export type DictationButtonMode = "toggle" | "hold";
+export interface DictationButtonProps {
+  /** Whether dictation is running (controlled). */
+  recording?: boolean;
+  /** Whether dictation starts running (uncontrolled). */
+  defaultRecording?: boolean;
+  onRecordingChange?: (recording: boolean) => void;
+  /**
+   * `toggle` (default): press to start, press again to stop. `hold`: dictate
+   * while the pointer, Space or Enter is held, and slide left before letting
+   * go to cancel.
+   */
+  mode?: DictationButtonMode;
+  /** The app's input level, 0 to 1. It drives the waveform; the button never opens a microphone. */
+  level?: number;
+  /** Dictation started. */
+  onStart?: () => void;
+  /** Dictation finished and should be kept. */
+  onStop?: () => void;
+  /** Dictation was cancelled (slide to cancel or Escape) and should be thrown away. */
+  onCancel?: () => void;
+  /** How far left, in pixels, a held pointer must slide to cancel. Default 64. */
+  cancelDistance?: number;
+  /** Accessible name. Default "Dictate". */
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * A dictation control. Idle, it is a round microphone button; while
+ * dictating, it widens into a pill with a live waveform and a timer. The app
+ * owns the speech handling: it passes the input `level` and acts on
+ * `onStart`, `onStop` and `onCancel`.
+ *
+ * Toggle mode starts and stops on press (Enter or Space from the keyboard).
+ * Hold mode dictates while the pointer, Space or Enter is held; sliding the
+ * pointer left past `cancelDistance` before release cancels, and Escape
+ * cancels in either mode.
+ *
+ * Behavior reference: reactbits voice-pill.
+ */
+export declare function DictationButton(props: DictationButtonProps): React.JSX.Element;
+//#endregion

package/dist/motion/dictation-button/dictation-button.js

@@ -0,0 +1,232 @@
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { ChevronLeftIcon, MicIcon } from "lucide-react";
+import { useControllableValue, useInterval, useLatest } from "ahooks";
+import { motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/dictation-button/dictation-button.tsx
+const BARS = 18;
+const SAMPLE_MS = 70;
+const PILL_SPRING = {
+	type: "spring",
+	stiffness: 520,
+	damping: 40
+};
+const clamp = (value) => Math.min(1, Math.max(0, Number.isFinite(value) ? value : 0));
+function formatElapsed(ms) {
+	const total = Math.floor(ms / 1e3);
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+/** Centre bars stand taller, so a steady level still reads as a voice shape. */
+const envelope = Array.from({ length: BARS }, (_, i) => {
+	const t = (i + .5) / BARS;
+	return .45 + .55 * Math.sin(Math.PI * t);
+});
+/**
+* A dictation control. Idle, it is a round microphone button; while
+* dictating, it widens into a pill with a live waveform and a timer. The app
+* owns the speech handling: it passes the input `level` and acts on
+* `onStart`, `onStop` and `onCancel`.
+*
+* Toggle mode starts and stops on press (Enter or Space from the keyboard).
+* Hold mode dictates while the pointer, Space or Enter is held; sliding the
+* pointer left past `cancelDistance` before release cancels, and Escape
+* cancels in either mode.
+*
+* Behavior reference: reactbits voice-pill.
+*/
+function DictationButton(props) {
+	const { mode = "toggle", level = 0, onStart, onStop, onCancel, cancelDistance = 64, label = "Dictate", disabled = false, className } = props;
+	const [recording, setRecording] = useControllableValue(props, {
+		defaultValue: false,
+		valuePropName: "recording",
+		defaultValuePropName: "defaultRecording",
+		trigger: "onRecordingChange"
+	});
+	const reduced = useReducedMotionConfig() ?? false;
+	const levelRef = useLatest(level);
+	const callbacks = useLatest({
+		onStart,
+		onStop,
+		onCancel
+	});
+	const [history, setHistory] = React.useState(() => Array(BARS).fill(0));
+	const [startedAt, setStartedAt] = React.useState(null);
+	const [now, setNow] = React.useState(0);
+	const [slide, setSlide] = React.useState(0);
+	const [announcement, setAnnouncement] = React.useState("");
+	const pointerRef = React.useRef(null);
+	const keyHeldRef = React.useRef(false);
+	const [held, setHeld] = React.useState(false);
+	const hintId = React.useId();
+	const armedToCancel = slide <= -cancelDistance;
+	React.useEffect(() => {
+		if (recording) {
+			const t = performance.now();
+			setStartedAt(t);
+			setNow(t);
+		} else {
+			setStartedAt(null);
+			setSlide(0);
+			setHistory(Array(BARS).fill(0));
+		}
+	}, [recording]);
+	useInterval(() => {
+		setNow(performance.now());
+		if (!reduced) setHistory((previous) => [...previous.slice(1), clamp(levelRef.current)]);
+	}, recording ? SAMPLE_MS : void 0);
+	const start = () => {
+		if (disabled || recording) return;
+		setRecording(true);
+		setAnnouncement("Dictation started");
+		callbacks.current.onStart?.();
+	};
+	const stop = () => {
+		if (!recording) return;
+		setRecording(false);
+		setAnnouncement("Dictation stopped");
+		callbacks.current.onStop?.();
+	};
+	const cancel = () => {
+		if (!recording) return;
+		setRecording(false);
+		setAnnouncement("Dictation cancelled");
+		callbacks.current.onCancel?.();
+	};
+	const handleClick = () => {
+		if (mode !== "toggle") return;
+		if (recording) stop();
+		else start();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Escape" && recording) {
+			event.preventDefault();
+			keyHeldRef.current = false;
+			setHeld(false);
+			cancel();
+			return;
+		}
+		if (mode === "hold" && (event.key === " " || event.key === "Enter")) {
+			event.preventDefault();
+			if (event.repeat || keyHeldRef.current) return;
+			keyHeldRef.current = true;
+			setHeld(true);
+			start();
+		}
+	};
+	const handleKeyUp = (event) => {
+		if (mode === "hold" && (event.key === " " || event.key === "Enter")) {
+			event.preventDefault();
+			if (!keyHeldRef.current) return;
+			keyHeldRef.current = false;
+			setHeld(false);
+			stop();
+		}
+	};
+	const handlePointerDown = (event) => {
+		if (mode !== "hold" || disabled || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.focus({ focusVisible: false });
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		pointerRef.current = {
+			id: event.pointerId,
+			x: event.clientX
+		};
+		setSlide(0);
+		setHeld(true);
+		start();
+	};
+	const handlePointerMove = (event) => {
+		const pointer = pointerRef.current;
+		if (!pointer || pointer.id !== event.pointerId) return;
+		setSlide(Math.min(0, event.clientX - pointer.x));
+	};
+	const endPointer = (event, cancelled) => {
+		const pointer = pointerRef.current;
+		if (!pointer || pointer.id !== event.pointerId) return;
+		pointerRef.current = null;
+		setHeld(false);
+		const dx = event.clientX - pointer.x;
+		if (cancelled || dx <= -cancelDistance) cancel();
+		else stop();
+	};
+	const bars = reduced ? envelope.map((shape) => shape * clamp(level)) : history;
+	const holding = mode === "hold" && recording && held;
+	const elapsed = startedAt === null ? 0 : now - startedAt;
+	const offset = reduced ? 0 : Math.max(slide, -cancelDistance * 1.25) * .5;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(motion.button, {
+			type: "button",
+			"aria-label": label,
+			"aria-pressed": recording,
+			"aria-describedby": hintId,
+			disabled,
+			"data-slot": "dictation-button",
+			"data-mode": mode,
+			"data-state": recording ? "recording" : "idle",
+			"data-cancel": armedToCancel ? "" : void 0,
+			"data-reduced-motion": reduced ? "" : void 0,
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			onKeyUp: handleKeyUp,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: (event) => endPointer(event, false),
+			onPointerCancel: (event) => endPointer(event, true),
+			onBlur: () => {
+				if (keyHeldRef.current) {
+					keyHeldRef.current = false;
+					setHeld(false);
+					stop();
+				}
+			},
+			initial: false,
+			animate: {
+				width: recording ? "auto" : 32,
+				x: offset
+			},
+			transition: reduced ? { duration: 0 } : PILL_SPRING,
+			className: cn("relative inline-flex h-8 shrink-0 touch-none items-center justify-center gap-2 overflow-hidden rounded-full outline-none select-none", "focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", recording ? "bg-muted px-2.5 text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted hover:text-foreground", armedToCancel && "bg-destructive/10 text-destructive", !reduced && "transition-colors", className),
+			children: recording ? /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: "flex items-center gap-2 whitespace-nowrap",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "relative flex size-2 shrink-0",
+						children: [reduced ? null : /* @__PURE__ */ jsx("span", {
+							"data-slot": "dictation-live-halo",
+							className: "absolute inset-0 animate-ping rounded-full bg-destructive/50"
+						}), /* @__PURE__ */ jsx("span", { className: "relative size-2 rounded-full bg-destructive" })]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "dictation-waveform",
+						className: "flex h-4 items-center gap-0.5",
+						children: bars.map((value, index) => /* @__PURE__ */ jsx("span", {
+							className: cn("w-0.5 rounded-full", armedToCancel ? "bg-destructive" : "bg-foreground/70"),
+							style: { height: `${Math.max(12, Math.round(value * 100))}%` }
+						}, index))
+					}),
+					holding ? /* @__PURE__ */ jsxs("span", {
+						className: cn("flex items-center text-xs", armedToCancel ? "text-destructive" : "text-muted-foreground"),
+						children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3" }), armedToCancel ? "Release to cancel" : "Cancel"]
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "min-w-7 text-xs text-muted-foreground tabular-nums",
+						children: formatElapsed(elapsed)
+					})
+				]
+			}) : /* @__PURE__ */ jsx(MicIcon, { "aria-hidden": "true" })
+		}),
+		/* @__PURE__ */ jsx("span", {
+			id: hintId,
+			className: "sr-only",
+			children: mode === "hold" ? "Hold to dictate, release to finish. Slide left or press Escape to cancel." : "Press to start or finish dictation. Escape cancels."
+		}),
+		/* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: announcement
+		})
+	] });
+}
+//#endregion
+export { DictationButton };

package/dist/motion/hold-button/hold-button.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+//#region src/motion/hold-button/hold-button.d.ts
+export type HoldButtonVariant = "default" | "destructive";
+export type HoldButtonSize = "sm" | "default" | "lg";
+export interface HoldButtonProps extends Omit<React.ComponentProps<"button">, "children" | "onClick" | "type" | "onPointerDown" | "onKeyDown" | "onKeyUp" | "ref"> {
+  /** The idle label, for example "Hold to delete". */
+  children: React.ReactNode;
+  /** Shown once the hold completes. */
+  doneLabel?: React.ReactNode;
+  /** Leading icon in the idle state. */
+  icon?: React.ReactNode;
+  /** How long the press must last to confirm, in ms. */
+  holdDuration?: number;
+  /** How long an early release takes to retract the fill, in ms. */
+  releaseDuration?: number;
+  /** A press released sooner than this (ms) is a tap: `onTap` runs and the fill retracts. */
+  tapThreshold?: number;
+  /** How long the done state shows before the button resets, in ms. */
+  resetAfter?: number;
+  /** `destructive` fills with the destructive token. */
+  variant?: HoldButtonVariant;
+  size?: HoldButtonSize;
+  /** Runs once when a hold completes. */
+  onHold: () => void;
+  /** Runs on a short press: a tap, not a hold. Use it to explain the hold. */
+  onTap?: () => void;
+}
+/**
+ * Press and hold to confirm. A fill sweeps across the button for
+ * `holdDuration`; releasing early retracts it, and a short tap calls `onTap`
+ * instead. Keyboard: hold Space or Enter, Escape cancels. Use it for
+ * dangerous tool calls and irreversible actions.
+ *
+ * Behavior reference: reactbits hold-button.
+ */
+export declare function HoldButton({ children, doneLabel, icon, holdDuration, releaseDuration, tapThreshold, resetAfter, variant, size, onHold, onTap, disabled, className, style, onBlur, onPointerUp, onPointerCancel, "aria-describedby": describedBy, ...props }: HoldButtonProps): React.JSX.Element;
+//#endregion