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

package/dist/motion/scrub-select/scrub-select.js

@@ -0,0 +1,346 @@
+import { capturePointer } from "../../lib/pointer.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { useClickAway, useControllableValue, useUnmount } from "ahooks";
+import { AnimatePresence, motion, useReducedMotionConfig } from "motion/react";
+//#region src/motion/scrub-select/scrub-select.tsx
+const TYPEAHEAD_RESET_MS = 500;
+const SCRUB_MOVE_PX = 4;
+const SCRUB_HOLD_MS = 250;
+/**
+* A select with a gliding highlight. Press the trigger and drag onto an
+* option, releasing to pick it (pointer scrubbing), or click to open and pick.
+* A select-only combobox: arrows, Home and End move the highlight, Enter or
+* Space picks, Escape closes, and typing jumps to a matching option.
+*
+* Behavior reference: reactbits glide-select.
+*/
+function ScrubSelect({ options, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, label = "Select", placeholder = "Select", size = "default", align = "start", disabled, className, onKeyDown, onBlur, ...props }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const baseId = React.useId();
+	const listId = `${baseId}-list`;
+	const optionId = (index) => `${baseId}-option-${index}`;
+	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: null
+	});
+	const [open, setOpen] = React.useState(false);
+	const [active, setActive] = React.useState(-1);
+	const [side, setSide] = React.useState("bottom");
+	const wrapper = React.useRef(null);
+	const list = React.useRef(null);
+	const trigger = React.useRef(null);
+	const press = React.useRef(null);
+	const swallowClick = React.useRef(false);
+	const typeahead = React.useRef({
+		text: "",
+		timer: null
+	});
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+	const enabled = (index) => index >= 0 && index < options.length && !options[index]?.disabled;
+	const firstEnabled = (from, direction) => {
+		for (let i = from; i >= 0 && i < options.length; i += direction) if (enabled(i)) return i;
+		return -1;
+	};
+	const show = (initial) => {
+		setActive(initial);
+		setOpen(true);
+	};
+	const close = () => {
+		setOpen(false);
+		press.current = null;
+		swallowClick.current = false;
+	};
+	const choose = (index) => {
+		const option = options[index];
+		if (!option || option.disabled) return;
+		if (option.value !== value) setValue(option.value);
+		close();
+	};
+	useClickAway(() => {
+		if (open) close();
+	}, wrapper);
+	useUnmount(() => {
+		if (typeahead.current.timer) clearTimeout(typeahead.current.timer);
+	});
+	React.useLayoutEffect(() => {
+		const popupElement = list.current;
+		const triggerElement = trigger.current;
+		if (!open || !popupElement || !triggerElement) return;
+		const ancestors = [];
+		for (let parent = triggerElement.parentElement; parent; parent = parent.parentElement) ancestors.push(parent);
+		const updateSide = () => {
+			let top = 0;
+			let bottom = window.innerHeight;
+			for (const ancestor of ancestors) {
+				if (!/^(auto|scroll|hidden|clip)$/.test(getComputedStyle(ancestor).overflowY)) continue;
+				const edge = ancestor.getBoundingClientRect().top + ancestor.clientTop;
+				top = Math.max(top, edge);
+				bottom = Math.min(bottom, edge + ancestor.clientHeight);
+			}
+			const rect = triggerElement.getBoundingClientRect();
+			const height = popupElement.offsetHeight + 6;
+			const below = Math.max(0, bottom - rect.bottom);
+			const above = Math.max(0, rect.top - top);
+			setSide(below < height && above > below ? "top" : "bottom");
+		};
+		updateSide();
+		const observer = new ResizeObserver(updateSide);
+		for (const element of [
+			triggerElement,
+			popupElement,
+			...ancestors
+		]) observer.observe(element);
+		window.addEventListener("resize", updateSide);
+		window.addEventListener("scroll", updateSide, {
+			capture: true,
+			passive: true
+		});
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", updateSide);
+			window.removeEventListener("scroll", updateSide, true);
+		};
+	}, [open]);
+	React.useEffect(() => {
+		const popupElement = list.current;
+		if (!open || active < 0 || !popupElement) return;
+		const option = popupElement.querySelector(`#${CSS.escape(optionId(active))}`);
+		if (!option) return;
+		if (option.offsetTop < popupElement.scrollTop) popupElement.scrollTop = option.offsetTop;
+		else if (option.offsetTop + option.offsetHeight > popupElement.scrollTop + popupElement.clientHeight) popupElement.scrollTop = option.offsetTop + option.offsetHeight - popupElement.clientHeight;
+	});
+	const runTypeahead = (char) => {
+		const state = typeahead.current;
+		if (state.timer) clearTimeout(state.timer);
+		state.timer = setTimeout(() => {
+			state.text = "";
+			state.timer = null;
+		}, TYPEAHEAD_RESET_MS);
+		const repeated = state.text.length > 0 && [...state.text].every((c) => c === char);
+		state.text += char;
+		const query = repeated ? char : state.text;
+		const from = open ? active : selectedIndex;
+		const order = options.map((_, i) => (from + 1 + i) % options.length);
+		if (!repeated && state.text.length > 1 && from >= 0) order.unshift(from);
+		const match = order.find((i) => enabled(i) && options[i]?.label.toLowerCase().startsWith(query.toLowerCase()));
+		if (match === void 0) return;
+		if (open) setActive(match);
+		else show(match);
+	};
+	const optionAtPoint = (x, y) => {
+		const element = document.elementFromPoint(x, y)?.closest("[data-scrub-index]");
+		if (!element || !list.current?.contains(element)) return -1;
+		return Number(element.dataset.scrubIndex);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		const { key } = event;
+		if (!open) {
+			if (key === "ArrowDown" || key === "Enter" || key === " ") {
+				event.preventDefault();
+				show(selectedIndex >= 0 ? selectedIndex : firstEnabled(0, 1));
+			} else if (key === "ArrowUp") {
+				event.preventDefault();
+				show(selectedIndex >= 0 ? selectedIndex : firstEnabled(options.length - 1, -1));
+			} else if (key === "Home") {
+				event.preventDefault();
+				show(firstEnabled(0, 1));
+			} else if (key === "End") {
+				event.preventDefault();
+				show(firstEnabled(options.length - 1, -1));
+			} else if (key.length === 1 && key !== " " && !event.metaKey && !event.ctrlKey && !event.altKey) {
+				event.preventDefault();
+				runTypeahead(key.toLowerCase());
+			}
+			return;
+		}
+		if (key === "ArrowDown" || key === "ArrowUp") {
+			event.preventDefault();
+			if (key === "ArrowUp" && event.altKey) {
+				choose(active);
+				return;
+			}
+			const direction = key === "ArrowDown" ? 1 : -1;
+			const next = firstEnabled(active + direction, direction);
+			if (next >= 0) setActive(next);
+		} else if (key === "Home" || key === "End") {
+			event.preventDefault();
+			setActive(key === "Home" ? firstEnabled(0, 1) : firstEnabled(options.length - 1, -1));
+		} else if (key === "Enter" || key === " " && typeahead.current.text === "") {
+			event.preventDefault();
+			choose(active);
+		} else if (key === "Escape") {
+			event.preventDefault();
+			close();
+		} else if (key === "Tab") close();
+		else if (key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
+			event.preventDefault();
+			runTypeahead(key.toLowerCase());
+		}
+	};
+	const popup = reduced ? {
+		initial: false,
+		animate: { opacity: 1 },
+		exit: { opacity: 0 }
+	} : {
+		initial: {
+			opacity: 0,
+			scale: .96,
+			y: side === "bottom" ? -4 : 4
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			scale: .96,
+			y: side === "bottom" ? -4 : 4
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapper,
+		"data-slot": "scrub-select",
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ jsxs("button", {
+			ref: trigger,
+			type: "button",
+			role: "combobox",
+			"aria-label": label,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			"aria-controls": open ? listId : void 0,
+			"aria-activedescendant": open && active >= 0 ? optionId(active) : void 0,
+			"data-slot": "scrub-select-trigger",
+			"data-size": size,
+			"data-motion": reduced ? "reduced" : "full",
+			disabled,
+			className: cn("flex w-fit touch-none items-center justify-between gap-1.5 rounded-(--soft-button-radius) border border-input bg-input/20 px-2 py-1.5 text-xs font-medium leading-(--soft-button-line-height) whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 data-[size=default]:h-7 data-[size=sm]:h-6 dark:bg-input/30 dark:hover:bg-input/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+			onPointerDown: (event) => {
+				if (disabled || event.button !== 0) return;
+				event.preventDefault();
+				trigger.current?.focus({ focusVisible: false });
+				if (open) {
+					close();
+					swallowClick.current = true;
+					return;
+				}
+				swallowClick.current = true;
+				capturePointer(event.currentTarget, event.pointerId);
+				press.current = {
+					x: event.clientX,
+					y: event.clientY,
+					t: performance.now(),
+					scrubbing: false
+				};
+				show(selectedIndex >= 0 ? selectedIndex : firstEnabled(0, 1));
+			},
+			onPointerMove: (event) => {
+				const state = press.current;
+				if (!state) return;
+				if (Math.hypot(event.clientX - state.x, event.clientY - state.y) > SCRUB_MOVE_PX) state.scrubbing = true;
+				const index = optionAtPoint(event.clientX, event.clientY);
+				if (enabled(index)) setActive(index);
+			},
+			onPointerUp: (event) => {
+				const state = press.current;
+				press.current = null;
+				if (!state) return;
+				const scrubbed = state.scrubbing || performance.now() - state.t > SCRUB_HOLD_MS;
+				const index = optionAtPoint(event.clientX, event.clientY);
+				if (scrubbed && enabled(index)) {
+					choose(index);
+					swallowClick.current = true;
+				}
+			},
+			onPointerCancel: () => {
+				press.current = null;
+				swallowClick.current = false;
+			},
+			onClick: () => {
+				if (swallowClick.current) {
+					swallowClick.current = false;
+					return;
+				}
+				if (open) close();
+				else show(selectedIndex >= 0 ? selectedIndex : firstEnabled(0, 1));
+			},
+			onKeyDown: handleKeyDown,
+			onBlur: (event) => {
+				onBlur?.(event);
+				if (!wrapper.current?.contains(event.relatedTarget)) close();
+			},
+			...props,
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-slot": "scrub-select-value",
+				className: cn("flex items-center gap-1.5", !selected && "text-muted-foreground"),
+				children: [selected?.icon, selected?.label ?? placeholder]
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+				"aria-hidden": "true",
+				className: cn("size-3.5 text-muted-foreground transition-transform duration-200", reduced && "transition-none", open && "rotate-180")
+			})]
+		}), /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, {
+			ref: list,
+			id: listId,
+			role: "listbox",
+			"aria-label": label,
+			"data-slot": "scrub-select-list",
+			"data-side": side,
+			className: cn("absolute z-50 max-h-72 min-w-full overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10", side === "bottom" ? "top-full mt-1 origin-top" : "bottom-full mb-1 origin-bottom", align === "start" ? "left-0" : "right-0"),
+			transition: reduced ? { duration: 0 } : {
+				duration: .14,
+				ease: "easeOut"
+			},
+			onPointerDown: (event) => event.preventDefault(),
+			...popup,
+			children: options.map((option, index) => {
+				const isActive = index === active;
+				const isSelected = option.value === value;
+				return /* @__PURE__ */ jsxs("div", {
+					id: optionId(index),
+					role: "option",
+					"aria-selected": isSelected,
+					"aria-disabled": option.disabled || void 0,
+					"data-scrub-index": index,
+					"data-highlighted": isActive || void 0,
+					"data-slot": "scrub-select-option",
+					className: cn("relative isolate flex min-h-7 w-full items-center gap-2 rounded-md py-1 pr-7 pl-2 text-xs/relaxed whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", isActive && "text-accent-foreground", option.disabled && "opacity-50"),
+					onPointerEnter: () => {
+						if (!option.disabled) setActive(index);
+					},
+					onClick: () => choose(index),
+					children: [
+						isActive ? /* @__PURE__ */ jsx(motion.span, {
+							layoutId: `${baseId}-highlight`,
+							"aria-hidden": "true",
+							className: "absolute inset-0 -z-10 rounded-md bg-accent",
+							transition: reduced ? { duration: 0 } : {
+								type: "spring",
+								stiffness: 700,
+								damping: 45
+							}
+						}) : null,
+						option.icon,
+						/* @__PURE__ */ jsx("span", { children: option.label }),
+						isSelected ? /* @__PURE__ */ jsx(CheckIcon, {
+							"aria-hidden": "true",
+							className: "pointer-events-none absolute right-2 size-3.5"
+						}) : null
+					]
+				}, option.value);
+			})
+		}, "list") : null })]
+	});
+}
+//#endregion
+export { ScrubSelect };

package/dist/motion/spotlight-grid/spotlight-grid.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+//#region src/motion/spotlight-grid/spotlight-grid.d.ts
+export type SpotlightGridAccent = "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5";
+export interface SpotlightGridItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  /** A short trailing detail, such as a handle or a status. */
+  meta?: string;
+  /** The card's picture. `alt` defaults to "" because the title already names the card. */
+  image?: {
+    src: string;
+    alt?: string;
+  };
+  /** The colour the spotlight reveals in the card's wash. Default `chart-1`. */
+  accent?: SpotlightGridAccent;
+  /** Renders the card as a link. */
+  href?: string;
+}
+export interface SpotlightGridProps {
+  items: readonly SpotlightGridItem[];
+  /** Renders cards without `href` as buttons that call this. */
+  onSelect?: (item: SpotlightGridItem) => void;
+  /** Spotlight radius in pixels. Default 280. */
+  radius?: number;
+  /** Accessible name of the grid's list. */
+  label?: string;
+  className?: string;
+}
+/**
+ * A card grid in greyscale, where a spotlight that follows the pointer
+ * reveals colour. A hovered or focused card comes up in full colour, and
+ * keyboard focus moves the spotlight onto the focused card, so the effect has
+ * a keyboard equivalent. Cards are real links (with `href`) or buttons (with
+ * `onSelect`).
+ *
+ * Behavior reference: reactbits chroma-grid.
+ */
+export declare function SpotlightGrid({ items, onSelect, radius, label, className }: SpotlightGridProps): React.JSX.Element;
+//#endregion

package/dist/motion/spotlight-grid/spotlight-grid.js

@@ -0,0 +1,171 @@
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { useLatest } from "ahooks";
+import { animate, motion, useMotionTemplate, useMotionValue, useReducedMotionConfig } from "motion/react";
+//#region src/motion/spotlight-grid/spotlight-grid.tsx
+const FOLLOW = {
+	type: "spring",
+	stiffness: 260,
+	damping: 30,
+	mass: .6
+};
+const GROW = {
+	duration: .45,
+	ease: [
+		.22,
+		1,
+		.36,
+		1
+	]
+};
+const INSTANT = { duration: 0 };
+const accentVar = {
+	"chart-1": "var(--chart-1)",
+	"chart-2": "var(--chart-2)",
+	"chart-3": "var(--chart-3)",
+	"chart-4": "var(--chart-4)",
+	"chart-5": "var(--chart-5)"
+};
+/**
+* A card grid in greyscale, where a spotlight that follows the pointer
+* reveals colour. A hovered or focused card comes up in full colour, and
+* keyboard focus moves the spotlight onto the focused card, so the effect has
+* a keyboard equivalent. Cards are real links (with `href`) or buttons (with
+* `onSelect`).
+*
+* Behavior reference: reactbits chroma-grid.
+*/
+function SpotlightGrid({ items, onSelect, radius = 280, label, className }) {
+	const reduced = useReducedMotionConfig() ?? false;
+	const rootRef = React.useRef(null);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const r = useMotionValue(0);
+	const [lit, setLit] = React.useState(false);
+	const onSelectRef = useLatest(onSelect);
+	const mask = useMotionTemplate`radial-gradient(circle ${r}px at ${x}px ${y}px, transparent 0%, transparent 30%, rgb(0 0 0 / 0.55) 60%, black 100%)`;
+	const moveTo = (px, py, instant = false) => {
+		const t = reduced || instant ? INSTANT : FOLLOW;
+		animate(x, px, t);
+		animate(y, py, t);
+	};
+	const grow = (to) => animate(r, to, reduced ? INSTANT : GROW);
+	const local = (clientX, clientY) => {
+		const box = rootRef.current?.getBoundingClientRect();
+		return box ? {
+			px: clientX - box.left,
+			py: clientY - box.top
+		} : {
+			px: 0,
+			py: 0
+		};
+	};
+	const handlePointerEnter = (event) => {
+		const { px, py } = local(event.clientX, event.clientY);
+		moveTo(px, py, true);
+		grow(radius);
+		setLit(true);
+	};
+	const handlePointerMove = (event) => {
+		const { px, py } = local(event.clientX, event.clientY);
+		moveTo(px, py);
+		if (!lit) {
+			grow(radius);
+			setLit(true);
+		}
+	};
+	const handlePointerLeave = () => {
+		grow(0);
+		setLit(false);
+	};
+	const handleFocus = (event) => {
+		if (!event.currentTarget.matches(":focus-visible")) return;
+		const box = event.currentTarget.getBoundingClientRect();
+		const { px, py } = local(box.left + box.width / 2, box.top + box.height / 2);
+		moveTo(px, py);
+		grow(radius);
+		setLit(true);
+	};
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && rootRef.current?.contains(next)) return;
+		grow(0);
+		setLit(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		"data-slot": "spotlight-grid",
+		"data-lit": lit ? "" : void 0,
+		"data-reduced-motion": reduced ? "" : void 0,
+		onPointerEnter: handlePointerEnter,
+		onPointerMove: handlePointerMove,
+		onPointerLeave: handlePointerLeave,
+		className: cn("relative isolate", className),
+		children: [/* @__PURE__ */ jsx("ul", {
+			"aria-label": label,
+			className: "grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-3",
+			children: items.map((item) => {
+				const cardClass = cn("group/card relative z-0 flex h-full w-full flex-col gap-3 rounded-lg p-2 pb-3 text-left ring-1 ring-foreground/10 outline-none", "bg-[linear-gradient(165deg,color-mix(in_oklab,var(--card-accent)_32%,var(--card))_0%,var(--card)_65%)]", "hover:z-20 focus-visible:z-20 focus-visible:ring-[3px] focus-visible:ring-ring/50", !reduced && "transition-shadow duration-300 hover:shadow-lg");
+				const style = { "--card-accent": accentVar[item.accent ?? "chart-1"] };
+				const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.image ? /* @__PURE__ */ jsx("img", {
+					src: item.image.src,
+					alt: item.image.alt ?? "",
+					draggable: false,
+					className: "aspect-[4/5] w-full rounded-md bg-muted object-cover"
+				}) : null, /* @__PURE__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col gap-0.5 px-1",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate text-sm font-medium text-foreground",
+							children: item.title
+						}), item.meta ? /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 truncate text-xs text-muted-foreground",
+							children: item.meta
+						}) : null]
+					}), item.subtitle ? /* @__PURE__ */ jsx("span", {
+						className: "truncate text-xs text-muted-foreground",
+						children: item.subtitle
+					}) : null]
+				})] });
+				return /* @__PURE__ */ jsx("li", {
+					className: "relative flex",
+					children: item.href ? /* @__PURE__ */ jsx("a", {
+						href: item.href,
+						"data-slot": "spotlight-grid-card",
+						className: cardClass,
+						style,
+						onFocus: handleFocus,
+						onBlur: handleBlur,
+						children: body
+					}) : onSelect ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-slot": "spotlight-grid-card",
+						className: cardClass,
+						style,
+						onClick: () => onSelectRef.current?.(item),
+						onFocus: handleFocus,
+						onBlur: handleBlur,
+						children: body
+					}) : /* @__PURE__ */ jsx("div", {
+						"data-slot": "spotlight-grid-card",
+						className: cardClass,
+						style,
+						children: body
+					})
+				}, item.id);
+			})
+		}), /* @__PURE__ */ jsx(motion.div, {
+			"aria-hidden": "true",
+			"data-slot": "spotlight-grid-veil",
+			className: "pointer-events-none absolute -inset-1 z-10 rounded-xl backdrop-grayscale",
+			style: {
+				maskImage: mask,
+				WebkitMaskImage: mask
+			}
+		})]
+	});
+}
+//#endregion
+export { SpotlightGrid };

package/dist/motion/star-rating/star-rating.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+//#region src/motion/star-rating/star-rating.d.ts
+export interface StarRatingProps extends Omit<React.ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "ref"> {
+  /** The committed rating, 1 to `max`, or null for none (controlled). */
+  value?: number | null;
+  /** Initial rating when uncontrolled. */
+  defaultValue?: number | null;
+  /** Called when a rating is committed (click, Enter or Space). */
+  onValueChange?: (value: number | null) => void;
+  /** Number of stars. */
+  max?: number;
+  /** One word per star, shown above the previewed star and spoken in its name. */
+  labels?: string[];
+  /** Accessible name of the group. */
+  label?: string;
+  /** Committing the current rating again clears it. */
+  clearable?: boolean;
+  /** Render the rating as a static image (no preview, no commit), for history views. */
+  readOnly?: boolean;
+  disabled?: boolean;
+  size?: "sm" | "default";
+}
+/**
+ * A star rating whose hover (or arrow-key focus) previews the rating: stars
+ * up to the pointer lift and a label follows above. Click, Enter or Space
+ * commits it with a small pop. A radio group: Tab enters at the committed
+ * star, arrows move the preview, Enter or Space commits.
+ *
+ * Behavior reference: reactbits peek-rating.
+ */
+export declare function StarRating({ value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, max, labels, label, clearable, readOnly, disabled, size, className, ...props }: StarRatingProps): React.JSX.Element;
+//#endregion