@aircall/ds 0.6.0 → 0.9.0

package/dist/index.js

@@ -1,8 +1,7 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-import * as Icons from "@aircall/react-icons";
-import { ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleAlertIcon, CircleCheck, Info, Loader2Icon, MinusIcon, MoreHorizontalIcon, PanelLeftIcon, Search, Smile, TriangleAlertIcon, XIcon } from "@aircall/react-icons";
+import { ArrowDownToLine, ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleAlert, CircleAlertIcon, CircleCheck, FLAGS, FlagUs, Info, Loader2Icon, MinusIcon, MoreHorizontalIcon, PanelLeftIcon, Search, Smile, TriangleAlertIcon, XIcon } from "@aircall/react-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import React, { createContext, useContext, useMemo } from "react";
@@ -20,7 +19,6 @@ import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { Combobox as Combobox$1 } from "@base-ui/react";
 import { Command as Command$1 } from "cmdk";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
-import { getCountryISO3 } from "@aircall/numbers";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
 import { Radio } from "@base-ui/react/radio";
@@ -35,7 +33,6 @@ import { Progress as Progress$1 } from "@base-ui/react/progress";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Slider as Slider$1 } from "@base-ui/react/slider";
-import { Slot } from "@radix-ui/react-slot";
 import { Toaster as Toaster$1, toast } from "sonner";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
@@ -43,7 +40,62 @@ import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 
 //#region src/lib/utils.ts
-const twMerge = extendTailwindMerge({ extend: { theme: { text: ["tiny"] } } });
+const DS_COLORS = [
+	"background",
+	"foreground",
+	"card",
+	"card-foreground",
+	"popover",
+	"popover-foreground",
+	"primary",
+	"primary-foreground",
+	"secondary",
+	"secondary-foreground",
+	"info",
+	"info-foreground",
+	"info-background",
+	"success",
+	"success-foreground",
+	"success-background",
+	"warning",
+	"warning-foreground",
+	"warning-background",
+	"destructive",
+	"destructive-foreground",
+	"destructive-background",
+	"muted",
+	"muted-foreground",
+	"accent",
+	"accent-foreground",
+	"border",
+	"input",
+	"ring",
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5",
+	"sidebar",
+	"sidebar-foreground",
+	"sidebar-primary",
+	"sidebar-primary-foreground",
+	"sidebar-accent",
+	"sidebar-accent-foreground",
+	"sidebar-border",
+	"sidebar-ring"
+];
+const BLOCKS_COLORS = [
+	"page-background",
+	"navbar-foreground",
+	"navbar-accent",
+	"navbar-accent-foreground",
+	"navbar-icon-bg"
+];
+const twMerge = extendTailwindMerge({ extend: { theme: {
+	color: [...DS_COLORS, ...BLOCKS_COLORS],
+	text: ["tiny"],
+	animate: ["caret-blink"]
+} } });
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
@@ -99,14 +151,14 @@ function AccordionContent({ className, children, ...props }) {
 
 //#endregion
 //#region src/components/button.tsx
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px active:not-aria-[haspopup]:opacity-60 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			outline: "border-border bg-background hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
-			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+			ghost: "hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
 			link: "text-primary underline underline-offset-4"
 		},
 		size: {
@@ -322,7 +374,7 @@ function AvatarGroupCount({ className, ...props }) {
 
 //#endregion
 //#region src/components/counter-badge.tsx
-const counterBadgeVariants = cva("group/counter-badge inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full border border-transparent px-1 text-xs font-medium whitespace-nowrap transition-[color,box-shadow]", {
+const counterBadgeVariants = cva("group/counter-badge inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full border border-transparent px-1 text-xs font-medium leading-none whitespace-nowrap transition-[color,box-shadow]", {
 	variants: { variant: {
 		default: "bg-destructive text-primary-foreground hover:bg-destructive/80 focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring/50",
 		secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-ring/50",
@@ -430,6 +482,162 @@ function Banner({ className, variant, borderDirection, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/notification-queue.tsx
+const PRIORITY_WEIGHT = {
+	error: 1e3,
+	warning: 100,
+	success: 50,
+	info: 10,
+	promotional: 1
+};
+const NotificationQueueContext = React$1.createContext(null);
+function useNotificationQueueContext() {
+	const ctx = React$1.useContext(NotificationQueueContext);
+	if (!ctx) throw new Error("useNotification* hooks must be used inside <NotificationQueueProvider>");
+	return ctx;
+}
+function reducer(state, action) {
+	switch (action.type) {
+		case "REGISTER": {
+			const idx = state.entries.findIndex((e) => e.id === action.entry.id && e.slot === action.entry.slot);
+			if (idx >= 0) {
+				const updated = [...state.entries];
+				updated[idx] = {
+					...action.entry,
+					registeredAt: state.entries[idx].registeredAt
+				};
+				const dismissed = new Set(state.dismissed);
+				dismissed.delete(`${action.entry.slot}::${action.entry.id}`);
+				return {
+					...state,
+					entries: updated,
+					dismissed
+				};
+			}
+			return {
+				...state,
+				entries: [...state.entries, action.entry]
+			};
+		}
+		case "UNREGISTER": {
+			const key = `${action.slot}::${action.id}`;
+			const dismissed = new Set(state.dismissed);
+			dismissed.delete(key);
+			return {
+				...state,
+				entries: state.entries.filter((e) => !(e.id === action.id && e.slot === action.slot)),
+				dismissed
+			};
+		}
+		case "DISMISS": {
+			const key = `${action.slot}::${action.id}`;
+			if (state.dismissed.has(key)) return state;
+			return {
+				...state,
+				dismissed: new Set([...state.dismissed, key])
+			};
+		}
+	}
+}
+function getSlotQueue(state, slot) {
+	return state.entries.filter((e) => e.slot === slot && !state.dismissed.has(`${slot}::${e.id}`)).sort((a, b) => {
+		const diff = PRIORITY_WEIGHT[b.priority] - PRIORITY_WEIGHT[a.priority];
+		return diff !== 0 ? diff : b.registeredAt - a.registeredAt;
+	});
+}
+function NotificationQueueProvider({ children }) {
+	const [state, dispatch] = React$1.useReducer(reducer, {
+		entries: [],
+		dismissed: /* @__PURE__ */ new Set()
+	});
+	const value = React$1.useMemo(() => ({
+		state,
+		dispatch
+	}), [state]);
+	return /* @__PURE__ */ jsx(NotificationQueueContext.Provider, {
+		value,
+		children
+	});
+}
+function useNotificationQueue() {
+	const { dispatch } = useNotificationQueueContext();
+	return {
+		push: React$1.useCallback(({ id, slot, priority, render }) => {
+			const dismiss = () => dispatch({
+				type: "DISMISS",
+				id,
+				slot
+			});
+			dispatch({
+				type: "REGISTER",
+				entry: {
+					id,
+					slot,
+					priority,
+					registeredAt: Date.now(),
+					contentRef: { current: render({ dismiss }) }
+				}
+			});
+			return { dismiss };
+		}, [dispatch]),
+		dismiss: React$1.useCallback((id, slot) => dispatch({
+			type: "DISMISS",
+			id,
+			slot
+		}), [dispatch])
+	};
+}
+function useNotification({ id, slot, priority, render }) {
+	const { dispatch } = useNotificationQueueContext();
+	const dismiss = React$1.useCallback(() => dispatch({
+		type: "DISMISS",
+		id,
+		slot
+	}), [
+		id,
+		slot,
+		dispatch
+	]);
+	const renderRef = React$1.useRef(render);
+	renderRef.current = render;
+	const contentRef = React$1.useRef(null);
+	contentRef.current = renderRef.current({ dismiss });
+	React$1.useEffect(() => {
+		dispatch({
+			type: "REGISTER",
+			entry: {
+				id,
+				slot,
+				priority,
+				registeredAt: Date.now(),
+				contentRef
+			}
+		});
+		return () => dispatch({
+			type: "UNREGISTER",
+			id,
+			slot
+		});
+	}, [
+		id,
+		slot,
+		priority,
+		dispatch
+	]);
+	return { dismiss };
+}
+function NotificationSlot({ slot, className }) {
+	const { state } = useNotificationQueueContext();
+	const active = getSlotQueue(state, slot)[0];
+	if (!active) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "notification-slot",
+		className: cn(className),
+		children: active.contentRef.current
+	});
+}
+
 //#endregion
 //#region src/components/separator.tsx
 function Separator({ className, orientation = "horizontal", ...props }) {
@@ -1212,30 +1420,18 @@ function CommandShortcut({ className, ...props }) {
 
 //#endregion
 //#region src/components/country-flag.tsx
-const additionalCountryCodeMappings = {
-	BQ: "ABW",
-	BES: "ABW",
-	CW: "ABW",
-	SX: "ABW"
-};
 const sizeMap = {
-	xs: "size-2",
 	sm: "size-3",
 	md: "size-4",
-	lg: "size-4",
+	lg: "size-5",
 	xl: "size-6"
 };
 const CountryFlag = ({ countryIsoCode, size = "xl", className, ...otherProps }) => {
-	const CountryIcons = Icons;
-	const properCountryCode = (countryIsoCode.length === 3 ? countryIsoCode : getCountryISO3(countryIsoCode)) || additionalCountryCodeMappings[countryIsoCode];
-	return /* @__PURE__ */ jsx(properCountryCode ? CountryIcons["Flag" + capitalizeFirstLetter(properCountryCode.toLowerCase())] : CountryIcons["FlagAbw"], {
+	return /* @__PURE__ */ jsx(FLAGS[countryIsoCode.toLowerCase()] ?? FlagUs, {
 		className: cn("flex-none", sizeMap[size], className),
 		...otherProps
 	});
 };
-function capitalizeFirstLetter(val) {
-	return String(val).charAt(0).toUpperCase() + String(val).slice(1);
-}
 
 //#endregion
 //#region src/components/table.tsx
@@ -1666,7 +1862,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 			sideOffset,
 			children: /* @__PURE__ */ jsx(Menu.Popup, {
 				"data-slot": "dropdown-menu-content",
-				className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+				className: cn("z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
 				...props
 			})
 		})
@@ -1691,7 +1887,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className),
 		...props
 	});
 }
@@ -1768,6 +1964,348 @@ function DropdownMenuShortcut({ className, ...props }) {
 		...props
 	});
 }
+function DropdownMenuAddon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-addon",
+		className: cn("ml-auto shrink-0 inline-flex items-center", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg p-6 text-center text-balance md:p-12", className),
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
+		...props
+	});
+}
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("text-sm font-medium tracking-tight", className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-description",
+		className: cn("text-muted-foreground [&>a:hover]:text-primary text-sm [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/dropzone.tsx
+const DropzoneContext = React$1.createContext(null);
+function useDropzoneContext() {
+	const ctx = React$1.useContext(DropzoneContext);
+	if (!ctx) throw new Error("Dropzone subcomponents must be rendered inside <Dropzone>.");
+	return ctx;
+}
+const DEFAULT_ERROR_MESSAGES = {
+	"too-many-files": ({ maxFiles }) => maxFiles === 1 ? "Only one file can be uploaded" : `Only ${maxFiles ?? "a few"} files can be uploaded`,
+	"file-too-large": ({ maxSize }) => maxSize ? `File is too large (max ${formatBytes(maxSize)})` : "File is too large",
+	"file-too-small": ({ minSize }) => minSize ? `File is too small (min ${formatBytes(minSize)})` : "File is too small",
+	"file-invalid-type": () => "This file type isn't allowed"
+};
+function formatBytes(bytes) {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+	return `${(bytes / 1024 / 1024).toFixed(0)} MB`;
+}
+function parseAccept(accept) {
+	if (!accept) return [];
+	return accept.split(",").map((p) => p.trim().toLowerCase()).filter(Boolean);
+}
+function matchesAccept(file, patterns) {
+	if (patterns.length === 0) return true;
+	const fileType = file.type.toLowerCase();
+	const fileName = file.name.toLowerCase();
+	return patterns.some((pattern) => {
+		if (pattern.startsWith(".")) return fileName.endsWith(pattern);
+		if (pattern.endsWith("/*")) return fileType.startsWith(pattern.slice(0, -1));
+		return fileType === pattern;
+	});
+}
+function matchesAcceptForDrag(type, patterns) {
+	if (patterns.length === 0) return true;
+	if (!type) return true;
+	const mimePatterns = patterns.filter((p) => !p.startsWith("."));
+	if (mimePatterns.length === 0) return true;
+	const lowerType = type.toLowerCase();
+	return mimePatterns.some((p) => p.endsWith("/*") ? lowerType.startsWith(p.slice(0, -1)) : lowerType === p);
+}
+function validateFiles(files, options) {
+	const { acceptPatterns, maxFiles, maxSize, minSize } = options;
+	if (files.length === 0) return [];
+	if (maxFiles !== void 0 && files.length > maxFiles) {
+		const message = DEFAULT_ERROR_MESSAGES["too-many-files"]({ maxFiles });
+		return files.map((file) => ({
+			file,
+			errors: [{
+				code: "too-many-files",
+				message
+			}]
+		}));
+	}
+	const rejections = [];
+	for (const file of files) {
+		const errors = [];
+		if (acceptPatterns.length > 0 && !matchesAccept(file, acceptPatterns)) errors.push({
+			code: "file-invalid-type",
+			message: DEFAULT_ERROR_MESSAGES["file-invalid-type"]({})
+		});
+		if (maxSize !== void 0 && file.size > maxSize) errors.push({
+			code: "file-too-large",
+			message: DEFAULT_ERROR_MESSAGES["file-too-large"]({ maxSize })
+		});
+		if (minSize !== void 0 && file.size < minSize) errors.push({
+			code: "file-too-small",
+			message: DEFAULT_ERROR_MESSAGES["file-too-small"]({ minSize })
+		});
+		if (errors.length > 0) rejections.push({
+			file,
+			errors
+		});
+	}
+	return rejections;
+}
+/**
+* Headless drop-target — handles drag/drop state, validation, and the hover
+* overlay. Has no visual chrome; wrap content in `<DropzoneContent>` for the
+* standard dashed-border look, or compose around any other control (textarea,
+* etc.) for file-drop on an arbitrary surface.
+*/
+const Dropzone = React$1.forwardRef(({ className, children, onFiles, onError, accept, multiple = false, maxFiles, maxSize, minSize, disabled = false, hoverMessage = "Drop your file here to upload", dragRejectMessage, onDragEnter, onDragLeave, onDragOver, ...props }, ref) => {
+	const inputRef = React$1.useRef(null);
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const [isDragReject, setIsDragReject] = React$1.useState(false);
+	const dragCounterRef = React$1.useRef(0);
+	const acceptPatterns = React$1.useMemo(() => parseAccept(accept), [accept]);
+	const open = React$1.useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const ctx = React$1.useMemo(() => ({
+		inputRef,
+		disabled,
+		open
+	}), [disabled, open]);
+	function processFiles(files) {
+		if (files.length === 0) return;
+		const rejections = validateFiles(files, {
+			acceptPatterns,
+			maxFiles: multiple ? maxFiles : 1,
+			maxSize,
+			minSize
+		});
+		const rejectedSet = new Set(rejections.map((r) => r.file));
+		const accepted = files.filter((f) => !rejectedSet.has(f));
+		if (accepted.length > 0) onFiles?.(accepted);
+		if (rejections.length > 0) onError?.(rejections);
+	}
+	function resetDragState() {
+		dragCounterRef.current = 0;
+		setIsDragging(false);
+		setIsDragReject(false);
+	}
+	function computeIsDragReject(items) {
+		if (dragRejectMessage == null || acceptPatterns.length === 0) return false;
+		return Array.from(items).some((item) => item.kind === "file" && !matchesAcceptForDrag(item.type, acceptPatterns));
+	}
+	function handleDragEnter(event) {
+		event.preventDefault();
+		if (disabled) return;
+		dragCounterRef.current += 1;
+		if (dragCounterRef.current === 1) setIsDragging(true);
+		setIsDragReject(computeIsDragReject(event.dataTransfer.items));
+		onDragEnter?.(event);
+	}
+	function handleDragLeave(event) {
+		event.preventDefault();
+		if (disabled) return;
+		dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+		if (dragCounterRef.current === 0) {
+			setIsDragging(false);
+			setIsDragReject(false);
+		}
+		onDragLeave?.(event);
+	}
+	function handleDragOver(event) {
+		event.preventDefault();
+		if (!disabled) event.dataTransfer.dropEffect = "copy";
+		onDragOver?.(event);
+	}
+	function handleDrop(event) {
+		event.preventDefault();
+		resetDragState();
+		if (disabled) return;
+		processFiles(Array.from(event.dataTransfer.files));
+	}
+	const overlayState = !isDragging ? "idle" : isDragReject ? "reject" : "dragging";
+	const overlayMessage = isDragReject ? dragRejectMessage : hoverMessage;
+	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
+		value: ctx,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			"data-slot": "dropzone",
+			"data-state": overlayState,
+			"data-disabled": disabled || void 0,
+			className: cn("group/dropzone relative", className),
+			onDragEnter: handleDragEnter,
+			onDragLeave: handleDragLeave,
+			onDragOver: handleDragOver,
+			onDrop: handleDrop,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					className: "sr-only",
+					tabIndex: -1,
+					onClick: (event) => event.stopPropagation(),
+					onChange: (event) => {
+						processFiles(Array.from(event.target.files ?? []));
+						event.target.value = "";
+					}
+				}),
+				children,
+				/* @__PURE__ */ jsxs("div", {
+					"aria-hidden": true,
+					className: cn("pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-ring bg-accent text-sm font-medium text-foreground backdrop-blur-xl transition-opacity", "opacity-0 group-data-[state=dragging]/dropzone:opacity-100", "group-data-[state=reject]/dropzone:opacity-100 group-data-[state=reject]/dropzone:border-destructive group-data-[state=reject]/dropzone:bg-destructive-background group-data-[state=reject]/dropzone:text-destructive"),
+					children: [
+						/* @__PURE__ */ jsx(ArrowDownToLine, { className: "size-5 group-data-[state=reject]/dropzone:hidden" }),
+						/* @__PURE__ */ jsx(CircleAlert, { className: "hidden size-5 group-data-[state=reject]/dropzone:block" }),
+						overlayMessage != null && /* @__PURE__ */ jsx("p", { children: overlayMessage })
+					]
+				})
+			]
+		})
+	});
+});
+Dropzone.displayName = "Dropzone";
+/**
+* Visual file-picker card — dashed border, centered layout, and click /
+* Space / Enter open the picker. Omit it (and use `<DropzoneTrigger>`)
+* when you want file-drop on an existing surface instead.
+*/
+const DropzoneContent = React$1.forwardRef(({ className, error = false, onClick, onKeyDown, ...props }, ref) => {
+	const { open, disabled } = useDropzoneContext();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		"aria-disabled": disabled || void 0,
+		"aria-invalid": error || void 0,
+		"data-slot": "dropzone-content",
+		"data-disabled": disabled || void 0,
+		"data-error": error || void 0,
+		className: cn("flex min-w-0 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input bg-background p-6 text-center text-balance transition-colors", "outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "data-error:border-destructive", "data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:bg-muted", !disabled && "cursor-pointer hover:bg-muted/40", className),
+		onClick: (event) => {
+			if (!disabled) open();
+			onClick?.(event);
+		},
+		onKeyDown: (event) => {
+			if (!disabled && (event.key === "Enter" || event.key === " ")) {
+				event.preventDefault();
+				open();
+			}
+			onKeyDown?.(event);
+		},
+		...props
+	});
+});
+DropzoneContent.displayName = "DropzoneContent";
+/** `<EmptyMedia>` with `variant="icon"` baked in. */
+function DropzoneIcon({ variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx(EmptyMedia, {
+		"data-slot": "dropzone-icon",
+		variant,
+		...props
+	});
+}
+function DropzoneTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(EmptyTitle, {
+		"data-slot": "dropzone-title",
+		className: cn("text-foreground", className),
+		...props
+	});
+}
+function DropzoneDescription(props) {
+	return /* @__PURE__ */ jsx(EmptyDescription, {
+		"data-slot": "dropzone-description",
+		...props
+	});
+}
+function DropzoneActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropzone-actions",
+		className: cn("mt-2 flex items-center gap-2", className),
+		onClick: (event) => event.stopPropagation(),
+		onKeyDown: (event) => event.stopPropagation(),
+		...props
+	});
+}
+/**
+* Opens the file picker on click. Default-renders a DS `<Button>`; pass
+* `render` (Base UI convention) to substitute another element.
+*/
+const DropzoneTrigger = React$1.forwardRef(({ render, onClick, ...props }, ref) => {
+	const { open, disabled } = useDropzoneContext();
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			ref,
+			type: "button",
+			"data-slot": "dropzone-trigger",
+			disabled,
+			onClick: (event) => {
+				event.stopPropagation();
+				open();
+				onClick?.(event);
+			}
+		}, props),
+		render: render ?? /* @__PURE__ */ jsx(Button, {})
+	});
+});
+DropzoneTrigger.displayName = "DropzoneTrigger";
 
 //#endregion
 //#region src/components/popover.tsx
@@ -1908,60 +2446,36 @@ function EmojiPickerContent({ className, align = "start", searchPlaceholder, cat
 }
 
 //#endregion
-//#region src/components/empty.tsx
-function Empty({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty",
-		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-6 text-center text-balance md:p-12", className),
-		...props
-	});
-}
-function EmptyHeader({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-header",
-		className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
-		...props
-	});
-}
-const emptyMediaVariants = cva("flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-	variants: { variant: {
-		default: "bg-transparent",
-		icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
-	} },
-	defaultVariants: { variant: "default" }
+//#region src/components/fab.tsx
+const fabVariants = cva("group/fab inline-flex shrink-0 items-center justify-center rounded-md shadow-lg font-semibold whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px active:not-aria-[haspopup]:shadow-md [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90 aria-expanded:bg-primary/90",
+			outline: "border border-input bg-background hover:bg-muted hover:text-accent-foreground focus-visible:border-ring aria-expanded:bg-muted active:bg-muted dark:border-input dark:bg-input/30 dark:hover:bg-input/50 dark:active:bg-input/50"
+		},
+		size: {
+			lg: "h-10 gap-2 px-4 text-base",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "icon-lg"
+	}
 });
-function EmptyMedia({ className, variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-icon",
-		"data-variant": variant,
-		className: cn(emptyMediaVariants({
+const FAB = React$1.forwardRef(({ className, variant, size, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		"data-slot": "fab",
+		className: cn(fabVariants({
 			variant,
+			size,
 			className
 		})),
 		...props
 	});
-}
-function EmptyTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-title",
-		className: cn("text-sm font-medium tracking-tight", className),
-		...props
-	});
-}
-function EmptyDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-description",
-		className: cn("text-muted-foreground [&>a:hover]:text-primary text-sm [&>a]:underline [&>a]:underline-offset-4", className),
-		...props
-	});
-}
-function EmptyContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "empty-content",
-		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
-		...props
-	});
-}
+});
+FAB.displayName = "FAB";
 
 //#endregion
 //#region src/components/label.tsx
@@ -2076,6 +2590,43 @@ function FieldError({ className, children, errors, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/gauge.tsx
+const GAUGES = 8;
+function getSegmentState(index, value) {
+	if (index >= value) return "empty";
+	if (value === GAUGES) return "filled";
+	const distanceFromHead = value - 1 - index;
+	if (distanceFromHead === 0) return "head";
+	if (distanceFromHead === 1) return "trailing";
+	return "filled";
+}
+function Gauge({ className, value, ...props }) {
+	const clampedValue = Math.max(0, Math.min(value, GAUGES));
+	return /* @__PURE__ */ jsx("div", {
+		role: "meter",
+		"aria-valuenow": clampedValue,
+		"aria-valuemin": 0,
+		"aria-valuemax": GAUGES,
+		"data-slot": "gauge",
+		className: cn("flex w-full items-center gap-3", className),
+		...props,
+		children: Array.from({ length: GAUGES }, (_, index) => {
+			const state = getSegmentState(index, clampedValue);
+			return /* @__PURE__ */ jsx("div", {
+				"data-slot": "gauge-item",
+				"data-state": state,
+				className: "relative h-3 flex-1 overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "gauge-indicator",
+					className: cn("absolute inset-0 bg-primary transition-opacity", "data-[state=empty]:opacity-0", "data-[state=head]:opacity-35", "data-[state=trailing]:opacity-65", "data-[state=filled]:opacity-100"),
+					"data-state": state
+				})
+			}, index);
+		})
+	});
+}
+
 //#endregion
 //#region src/components/input-otp.tsx
 function InputOTP({ className, containerClassName, ...props }) {
@@ -2456,7 +3007,7 @@ function SelectContent({ className, children, side = "bottom", sideOffset = 4, a
 		children: /* @__PURE__ */ jsxs(Select$1.Popup, {
 			"data-slot": "select-content",
 			"data-align-trigger": alignItemWithTrigger,
-			className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			className: cn("relative isolate z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 			...props,
 			children: [
 				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
@@ -3198,27 +3749,6 @@ function TabsContent({ className, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/tab-bar.tsx
-function TabBar({ tabs, activeTab, onTabChange, renderTab, className }) {
-	return /* @__PURE__ */ jsx(Tabs, {
-		value: activeTab,
-		onValueChange: onTabChange,
-		className: `w-full ${className || ""}`,
-		children: /* @__PURE__ */ jsx(TabsList, {
-			className: "w-full h-auto flex border-t border-border bg-card p-0 rounded-none shadow-none",
-			children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
-				value: tab.value,
-				className: ["flex flex-col items-center flex-1 py-2 px-0 transition-colors border-b-2 border-b-transparent rounded-none bg-transparent data-active:shadow-none! dark:data-active:bg-transparent! dark:data-active:border-none!", activeTab === tab.value ? "text-foreground font-semibold border-b-primary" : "text-muted-foreground font-normal"].join(" "),
-				children: renderTab ? renderTab(tab, activeTab === tab.value) : /* @__PURE__ */ jsxs(Fragment, { children: [tab.renderIcon?.(), /* @__PURE__ */ jsx("span", {
-					className: "text-xs",
-					children: tab.label
-				})] })
-			}, tab.value))
-		})
-	});
-}
-
 //#endregion
 //#region src/components/toggle.tsx
 const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-md bg-transparent text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
@@ -3299,4 +3829,78 @@ function ToggleGroupItem({ className, children, variant = "default", size = "def
 }
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Slot, Spinner, Switch, TabBar, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useComboboxAnchor, useSidebar, useTheme };
+//#region src/hooks/use-audio-gauge.ts
+/**
+* Drives a `<Gauge>` from the system microphone. Opens the default audio
+* input via `getUserMedia` and runs a smoothed frequency-domain analyser.
+*
+* The returned `value` is calibrated for typical speech: a normal speaking
+* voice fills several segments, and the meter saturates at ~50% of the
+* digital signal range (matches the existing tractor-based audio meters
+* shipped in `aw-web` and `phone`).
+*
+* @example
+*   const { value, error } = useAudioGauge()
+*   return (
+*     <>
+*       <Gauge value={value} />
+*       {error && <p>Microphone unavailable: {error.message}</p>}
+*     </>
+*   )
+*/
+function useAudioGauge(options = {}) {
+	const { intervalMs = 16, fftSize = 32, smoothing = .3, gain = 2 } = options;
+	const [value, setValue] = React$1.useState(0);
+	const [error, setError] = React$1.useState(null);
+	const gainRef = React$1.useRef(gain);
+	gainRef.current = gain;
+	React$1.useEffect(() => {
+		let cancelled = false;
+		let stream;
+		let ctx;
+		let intervalId;
+		setError(null);
+		navigator.mediaDevices.getUserMedia({ audio: true }).then((s) => {
+			if (cancelled) {
+				s.getTracks().forEach((track) => track.stop());
+				return;
+			}
+			stream = s;
+			ctx = new AudioContext();
+			const source = ctx.createMediaStreamSource(s);
+			const analyser = ctx.createAnalyser();
+			analyser.fftSize = fftSize;
+			analyser.smoothingTimeConstant = smoothing;
+			source.connect(analyser);
+			const buffer = new Uint8Array(analyser.frequencyBinCount);
+			ctx.resume().catch(() => {});
+			intervalId = setInterval(() => {
+				analyser.getByteFrequencyData(buffer);
+				let sum = 0;
+				for (const v of buffer) sum += v;
+				const next = Math.round(sum / buffer.length / 255 * 8 * gainRef.current);
+				setValue((prev) => prev === next ? prev : next);
+			}, intervalMs);
+		}).catch((err) => {
+			if (!cancelled) setError(err);
+		});
+		return () => {
+			cancelled = true;
+			if (intervalId !== void 0) clearInterval(intervalId);
+			stream?.getTracks().forEach((track) => track.stop());
+			ctx?.close().catch(() => {});
+			setValue(0);
+		};
+	}, [
+		intervalMs,
+		fftSize,
+		smoothing
+	]);
+	return {
+		value,
+		error
+	};
+}
+
+//#endregion
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertAction as BannerAction, AlertDescription, AlertDescription as BannerDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTitle as BannerTitle, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeGroup, BadgeGroupCount, Banner, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CounterBadge, CountryFlag, DataTable, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport, DropdownMenu, DropdownMenuAddon, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, DropzoneActions, DropzoneContent, DropzoneDescription, DropzoneIcon, DropzoneTitle, DropzoneTrigger, EmojiPicker, EmojiPickerCategories, EmojiPickerContent, EmojiPickerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FAB, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Gauge, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, NotificationQueueProvider, NotificationSlot, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RadioGroup, RadioGroupItem, ScrollArea, ScrollAreaPrimitive, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, fabVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useNotification, useNotificationQueue, useSidebar, useTheme };