@aircall/ds 0.9.1 → 0.11.0

package/dist/index.js

@@ -1,13 +1,13 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
-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 { ArrowDownToLine, ArrowLeft, ArrowRight, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, 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";
-import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -15,6 +15,7 @@ import { Separator as Separator$1 } from "@base-ui/react/separator";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import useEmblaCarousel from "embla-carousel-react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 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";
@@ -23,7 +24,6 @@ import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-tabl
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
-import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import { Menu } from "@base-ui/react/menu";
 import EmojiReactPicker, { Categories, EmojiStyle, SuggestionMode, Theme } from "emoji-picker-react";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
@@ -34,6 +34,7 @@ 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 { Toaster as Toaster$1, toast } from "sonner";
+import { useControllableState } from "@aircall/hooks";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
@@ -157,7 +158,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
 			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-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:hover:bg-muted/50",
+			ghost: "hover:bg-muted hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-accent-foreground dark:hover:bg-input/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"
 		},
@@ -177,9 +178,10 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
 		block: false
 	}
 });
-const Button = React$1.forwardRef(({ className, variant = "default", size = "default", block = false, ...props }, ref) => {
+const Button = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, variant = "default", size = "default", block = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Button$1, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "button",
 		"data-variant": variant,
 		className: cn(buttonVariants({
@@ -193,6 +195,60 @@ const Button = React$1.forwardRef(({ className, variant = "default", size = "def
 });
 Button.displayName = "Button";
 
+//#endregion
+//#region src/components/action-bar.tsx
+/** Fixed height of the ActionBar (px). Single source of truth — the bar uses it
+* for its own height and consumers (e.g. DataTable) reserve space with it. */
+const ActionBarHeight = 48;
+/**
+* Lets a parent (e.g. `DataTable`) supply the selected `count` and an `onClear`
+* handler so an `<ActionBar>` rendered inside it doesn't have to be passed them.
+* Explicit `count`/`onClear` props on `ActionBar` always take precedence, so the
+* component still works standalone. Mirrors React Spectrum's `ActionBarContext`.
+*/
+const ActionBarContext = React$1.createContext(null);
+const ActionBarButton = React$1.forwardRef(({ size = "default", ...props }, ref) => /* @__PURE__ */ jsx(Button, {
+	ref,
+	variant: "ghost",
+	size,
+	...props
+}));
+ActionBarButton.displayName = "ActionBarButton";
+const ActionBar = React$1.forwardRef(({ className, count, onClear, children, label, clearLabel = "Clear selection", style, ...props }, ref) => {
+	const ctx = React$1.useContext(ActionBarContext);
+	const resolvedCount = count ?? ctx?.count ?? 0;
+	const resolvedOnClear = onClear ?? ctx?.onClear;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "toolbar",
+		"aria-label": "Selection actions",
+		"data-slot": "action-bar",
+		className: cn("relative flex w-full items-center gap-2 rounded-md border border-border bg-popover px-2 text-popover-foreground shadow-lg", className),
+		style: {
+			...style,
+			height: ActionBarHeight
+		},
+		...props,
+		children: [
+			resolvedOnClear ? /* @__PURE__ */ jsx(ActionBarButton, {
+				size: "icon",
+				onClick: resolvedOnClear,
+				"aria-label": clearLabel,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "flex-1 truncate text-sm",
+				children: label ? label(resolvedCount) : `${resolvedCount} items selected.`
+			}),
+			children ? /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children
+			}) : null
+		]
+	});
+});
+ActionBar.displayName = "ActionBar";
+
 //#endregion
 //#region src/components/alert-dialog.tsx
 function AlertDialog({ ...props }) {
@@ -346,7 +402,7 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-base", className),
+		className: cn("flex size-full items-center justify-center rounded-full bg-background text-sm text-foreground group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs group-data-[size=xl]/avatar:text-base", className),
 		...props
 	});
 }
@@ -400,56 +456,305 @@ CounterBadge.displayName = "CounterBadge";
 
 //#endregion
 //#region src/components/badge.tsx
-const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none", {
+const COLOR_OVERLAY = "bg-[linear-gradient(0deg,var(--badge-color-overlay)_0%,var(--badge-color-overlay)_100%)]";
+const badgeVariants = cva("group/badge inline-flex w-fit max-w-36 shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border border-transparent font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:shrink-0 [&>svg]:pointer-events-none", {
 	variants: {
-		variant: {
-			default: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-			secondary: "bg-charcoal-500/30 text-foreground [a]:hover:bg-charcoal-500/20",
-			outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground"
-		},
 		size: {
-			sm: "h-5 px-2 py-0.5 text-xs [&>svg]:size-3!",
-			lg: "h-7 px-3 py-1 text-sm [&>svg]:size-4!"
+			default: "h-5 px-2 py-0.5 text-xs [&>svg]:size-3!",
+			lg: "h-6 px-2 text-xs [&>svg]:size-4!"
+		},
+		color: {
+			charcoal: COLOR_OVERLAY,
+			red: COLOR_OVERLAY,
+			green: COLOR_OVERLAY,
+			blue: COLOR_OVERLAY,
+			purple: COLOR_OVERLAY,
+			yellow: COLOR_OVERLAY,
+			pink: COLOR_OVERLAY
+		},
+		tone: {
+			dark: "",
+			"medium-dark": "",
+			"medium-light": "",
+			light: ""
 		}
 	},
+	compoundVariants: [
+		{
+			color: "charcoal",
+			tone: "dark",
+			class: "bg-charcoal-900 text-charcoal-50"
+		},
+		{
+			color: "charcoal",
+			tone: "medium-dark",
+			class: "bg-charcoal-600 text-white"
+		},
+		{
+			color: "charcoal",
+			tone: "medium-light",
+			class: "bg-charcoal-300 text-charcoal-950"
+		},
+		{
+			color: "charcoal",
+			tone: "light",
+			class: "bg-charcoal-200 text-charcoal-950"
+		},
+		{
+			color: "red",
+			tone: "dark",
+			class: "bg-red-700 text-red-50"
+		},
+		{
+			color: "red",
+			tone: "medium-dark",
+			class: "bg-red-400 text-red-950"
+		},
+		{
+			color: "red",
+			tone: "medium-light",
+			class: "bg-red-300 text-red-950"
+		},
+		{
+			color: "red",
+			tone: "light",
+			class: "bg-red-200 text-red-800"
+		},
+		{
+			color: "green",
+			tone: "dark",
+			class: "bg-green-800 text-green-50"
+		},
+		{
+			color: "green",
+			tone: "medium-dark",
+			class: "bg-green-600 text-white"
+		},
+		{
+			color: "green",
+			tone: "medium-light",
+			class: "bg-green-300 text-green-950"
+		},
+		{
+			color: "green",
+			tone: "light",
+			class: "bg-green-200 text-green-950"
+		},
+		{
+			color: "blue",
+			tone: "dark",
+			class: "bg-blue-800 text-blue-50"
+		},
+		{
+			color: "blue",
+			tone: "medium-dark",
+			class: "bg-blue-600 text-white"
+		},
+		{
+			color: "blue",
+			tone: "medium-light",
+			class: "bg-blue-300 text-blue-950"
+		},
+		{
+			color: "blue",
+			tone: "light",
+			class: "bg-blue-200 text-blue-900"
+		},
+		{
+			color: "purple",
+			tone: "dark",
+			class: "bg-purple-800 text-purple-50"
+		},
+		{
+			color: "purple",
+			tone: "medium-dark",
+			class: "bg-purple-600 text-white"
+		},
+		{
+			color: "purple",
+			tone: "medium-light",
+			class: "bg-purple-300 text-purple-950"
+		},
+		{
+			color: "purple",
+			tone: "light",
+			class: "bg-purple-200 text-purple-900"
+		},
+		{
+			color: "yellow",
+			tone: "dark",
+			class: "bg-yellow-500 text-yellow-950"
+		},
+		{
+			color: "yellow",
+			tone: "medium-dark",
+			class: "bg-yellow-400 text-yellow-950"
+		},
+		{
+			color: "yellow",
+			tone: "medium-light",
+			class: "bg-yellow-300 text-black"
+		},
+		{
+			color: "yellow",
+			tone: "light",
+			class: "bg-yellow-200 text-yellow-900"
+		},
+		{
+			color: "pink",
+			tone: "dark",
+			class: "bg-pink-700 text-pink-50"
+		},
+		{
+			color: "pink",
+			tone: "medium-dark",
+			class: "bg-pink-500 text-pink-950"
+		},
+		{
+			color: "pink",
+			tone: "medium-light",
+			class: "bg-pink-300 text-pink-950"
+		},
+		{
+			color: "pink",
+			tone: "light",
+			class: "bg-pink-200 text-pink-900"
+		}
+	],
 	defaultVariants: {
-		variant: "default",
-		size: "sm"
+		size: "default",
+		color: "charcoal",
+		tone: "light"
 	}
 });
-const Badge = React$1.forwardRef(({ className, variant = "default", size = "sm", render, ...props }, ref) => {
+/**
+* A standalone label badge. Read-only by default; render it as an anchor or
+* button via `render` to make it hoverable / navigable. Never removable — for a
+* removable token inside an input/combobox, use `Chip`.
+*
+* Pick a constrained DS `color` + `tone` (no freeform hex) — defaults to
+* `charcoal` / `light` — or pass a stored hex via `legacyColor`. Icons are
+* composed as children (auto-sized per `size`).
+*/
+const Badge = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", color, tone, legacyColor, render, children, ...props } = componentProps;
+	const resolved = legacyColor ? resolveTagColor(legacyColor) : {
+		color,
+		tone
+	};
+	const content = React$1.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */ jsx("span", {
+		className: "min-w-0 truncate",
+		children: child
+	}) : child);
 	return useRender({
 		defaultTagName: "span",
 		props: mergeProps({
 			className: cn(badgeVariants({
-				variant,
-				size
+				size,
+				color: resolved.color,
+				tone: resolved.tone
 			}), className),
-			ref
+			ref: forwardRef,
+			children: content
 		}, props),
 		render,
 		state: {
 			slot: "badge",
-			variant,
 			size
 		}
 	});
 });
 Badge.displayName = "Badge";
-function BadgeGroup({ className, ...props }) {
+const BadgeGroup = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
 		"data-slot": "badge-group",
 		className: cn("flex flex-wrap items-center gap-2", className),
 		...props
 	});
-}
-function BadgeGroupCount({ className, ...props }) {
+});
+BadgeGroup.displayName = "BadgeGroup";
+const badgeGroupCountVariants = cva("rounded-md", {
+	variants: { size: {
+		default: "h-5 w-5",
+		lg: "h-6 w-6"
+	} },
+	defaultVariants: { size: "default" }
+});
+const BadgeGroupCount = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, size = "default", ...props } = componentProps;
 	return /* @__PURE__ */ jsx(CounterBadge, {
+		ref: forwardRef,
 		"data-slot": "badge-group-count",
 		variant: "ghost",
-		className,
+		className: cn(badgeGroupCountVariants({ size }), className),
 		...props
 	});
+});
+BadgeGroupCount.displayName = "BadgeGroupCount";
+const LEGACY_TAG_COLOR_MAP = {
+	"#003d4b": {
+		color: "charcoal",
+		tone: "dark"
+	},
+	"#bb2001": {
+		color: "red",
+		tone: "dark"
+	},
+	"#f92c00": {
+		color: "red",
+		tone: "medium-dark"
+	},
+	"#0761b5": {
+		color: "blue",
+		tone: "dark"
+	},
+	"#008f6c": {
+		color: "green",
+		tone: "medium-dark"
+	},
+	"#b285d1": {
+		color: "purple",
+		tone: "medium-light"
+	},
+	"#fcbb26": {
+		color: "yellow",
+		tone: "medium-light"
+	},
+	"#fe9d88": {
+		color: "red",
+		tone: "light"
+	},
+	"#ff844c": {
+		color: "red",
+		tone: "medium-light"
+	},
+	"#abccf2": {
+		color: "blue",
+		tone: "light"
+	},
+	"#49a0ff": {
+		color: "blue",
+		tone: "medium-light"
+	},
+	"#66d188": {
+		color: "green",
+		tone: "medium-light"
+	},
+	"#2ac8ff": {
+		color: "blue",
+		tone: "medium-dark"
+	}
+};
+/** Charcoal/dark — used when a stored hex is outside the known legacy palette. */
+const FALLBACK_TAG_COLOR = {
+	color: "charcoal",
+	tone: "dark"
+};
+/** Resolve a legacy hard-coded tag hex to `color` + `tone`; unknown → charcoal/dark. */
+function resolveTagColor(hex) {
+	return LEGACY_TAG_COLOR_MAP[hex.trim().toLowerCase()] ?? FALLBACK_TAG_COLOR;
 }
 
 //#endregion
@@ -789,31 +1094,32 @@ function CalendarDayButton({ className: dayClassName, day, modifiers, locale, ..
 
 //#endregion
 //#region src/components/card.tsx
-function Card({ className, ...props }) {
+function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
-		className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className),
+		"data-size": size,
+		className: cn("group/card flex flex-col gap-4 overflow-hidden rounded-xl border bg-card py-4 text-sm text-card-foreground has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3", className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("leading-none font-semibold", className),
+		className: cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
 		...props
 	});
 }
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-description",
-		className: cn("text-muted-foreground text-sm", className),
+		className: cn("text-sm text-muted-foreground", className),
 		...props
 	});
 }
@@ -827,14 +1133,14 @@ function CardAction({ className, ...props }) {
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-6", className),
+		className: cn("px-4 group-data-[size=sm]/card:px-3", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3", className),
 		...props
 	});
 }
@@ -937,7 +1243,7 @@ function CarouselPrevious({ className, variant = "outline", size = "sm", ...prop
 		"data-slot": "carousel-previous",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-8 touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
@@ -953,7 +1259,7 @@ function CarouselNext({ className, variant = "outline", size = "sm", ...props })
 		"data-slot": "carousel-next",
 		variant,
 		size,
-		className: cn("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+		className: cn("absolute size-8 touch-manipulation rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,
@@ -982,6 +1288,211 @@ const Checkbox = React$1.forwardRef(({ className, ...props }, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 
+//#endregion
+//#region src/components/chip.tsx
+const chipGlowVariants = cva("", {
+	variants: {
+		color: {
+			charcoal: "",
+			red: "",
+			green: "",
+			blue: "",
+			purple: "",
+			yellow: "",
+			pink: ""
+		},
+		glow: {
+			true: "drop-shadow-[0px_0px_3px_var(--badge-glow)] animate-badge-glow motion-reduce:animate-none",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			color: "charcoal",
+			glow: true,
+			class: "border-charcoal-600 [--badge-glow:var(--color-charcoal-600)]"
+		},
+		{
+			color: "red",
+			glow: true,
+			class: "border-red-500 [--badge-glow:var(--color-red-500)]"
+		},
+		{
+			color: "green",
+			glow: true,
+			class: "border-green-600 [--badge-glow:var(--color-green-600)]"
+		},
+		{
+			color: "blue",
+			glow: true,
+			class: "border-blue-600 [--badge-glow:var(--color-blue-600)]"
+		},
+		{
+			color: "purple",
+			glow: true,
+			class: "border-purple-600 [--badge-glow:var(--color-purple-600)]"
+		},
+		{
+			color: "yellow",
+			glow: true,
+			class: "border-yellow-400 [--badge-glow:var(--color-yellow-400)]"
+		},
+		{
+			color: "pink",
+			glow: true,
+			class: "border-pink-600 [--badge-glow:var(--color-pink-600)]"
+		}
+	],
+	defaultVariants: {
+		color: "charcoal",
+		glow: false
+	}
+});
+/**
+* The trailing remove affordance for a `Chip` — a ghost icon button that
+* inherits the chip's text color and brightens on hover. Exported so the
+* combobox can reuse the exact treatment for its Base-UI-bound chips.
+*/
+const ChipRemove = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		"data-slot": "chip-remove",
+		className: cn("-ml-1 bg-transparent hover:bg-transparent dark:hover:bg-transparent text-inherit hover:text-inherit opacity-50 hover:opacity-100", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none size-3.5" })
+	});
+});
+ChipRemove.displayName = "ChipRemove";
+/**
+* A selected-value token for inputs / comboboxes. Composes `Badge` at the
+* fixed 24px size with a forced trailing remove (X) button. The chip body is
+* non-interactive — only the X reacts to hover. For combobox-bound chips that
+* must drive Base UI's selection state, see `ComboboxChip`.
+*/
+const Chip = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, color, tone, legacyColor, glow, ...props } = componentProps;
+	const glowColor = legacyColor ? resolveTagColor(legacyColor).color : color;
+	return /* @__PURE__ */ jsx(Badge, {
+		ref: forwardRef,
+		"data-slot": "chip",
+		size: "lg",
+		color,
+		tone,
+		legacyColor,
+		className: cn("has-data-[slot=chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:opacity-50", chipGlowVariants({
+			color: glowColor,
+			glow
+		}), className),
+		...props,
+		children
+	});
+});
+Chip.displayName = "Chip";
+
+//#endregion
+//#region src/components/scroll-area.tsx
+function ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
+		className: cn("size-full min-h-0", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
+				className: cn("h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5"),
+				"data-slot": "scroll-area-viewport",
+				children
+			}),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
+			/* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
+			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })
+		]
+	});
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
+		className: cn("m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {
+			className: "relative flex-1 rounded-full bg-foreground/20",
+			"data-slot": "scroll-area-thumb"
+		})
+	});
+}
+
+//#endregion
+//#region src/components/filter.tsx
+/**
+* A removable active-filter token for a filter bar / toolbar — a dark charcoal
+* `Chip` with a trailing remove (X). Shows each applied filter above a
+* searchable data view (table / list); clicking the X clears that filter
+* (`onRemove`). Long values truncate with an ellipsis, capped at the Badge
+* `max-w-36` (144px). Compose inside a `FilterGroup` with a trailing
+* `FilterClearAllButton` (see the FilterBar story).
+*/
+const Filter = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, onRemove, removeLabel = "Remove filter" } = componentProps;
+	return /* @__PURE__ */ jsxs(Chip, {
+		ref: forwardRef,
+		color: "charcoal",
+		tone: "medium-dark",
+		className,
+		children: [children, /* @__PURE__ */ jsx(ChipRemove, {
+			"aria-label": removeLabel,
+			onClick: onRemove
+		})]
+	});
+});
+Filter.displayName = "Filter";
+/**
+* Layout container for a row of `Filter` chips (and a trailing
+* `FilterClearAllButton`). Always a single, non-wrapping row inside a
+* horizontal `ScrollArea` (inset scroll + edge fade) — it does not wrap onto
+* multiple lines.
+*/
+const FilterGroup = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "filter-group",
+		className,
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			"data-slot": "filter-group-scroll-area",
+			scrollFade: true,
+			children: /* @__PURE__ */ jsx("div", {
+				ref: forwardRef,
+				"data-slot": "filter-group-container",
+				className: "flex w-max items-center gap-2",
+				...props,
+				children
+			})
+		})
+	});
+});
+FilterGroup.displayName = "FilterGroup";
+/**
+* The trailing "Clear all filters" action for a `FilterGroup` — a ghost,
+* small `Button` with the styling pinned. Provide `onClick`; the label
+* defaults to "Clear all filters" (pass translated `children` to override).
+*/
+const FilterClearAllButton = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children = "Clear all filters", ...props } = componentProps;
+	return /* @__PURE__ */ jsx(Button, {
+		ref: forwardRef,
+		type: "button",
+		variant: "ghost",
+		size: "sm",
+		"data-slot": "filter-clear-all",
+		className,
+		...props,
+		children
+	});
+});
+FilterClearAllButton.displayName = "FilterClearAllButton";
+
 //#endregion
 //#region src/components/collapsible.tsx
 function Collapsible({ ...props }) {
@@ -1097,15 +1608,16 @@ function InputGroupTextarea({ className, ...props }) {
 //#endregion
 //#region src/components/combobox.tsx
 const Combobox = Combobox$1.Root;
-function ComboboxValue({ ...props }) {
+function ComboboxValue(componentProps) {
 	return /* @__PURE__ */ jsx(Combobox$1.Value, {
 		"data-slot": "combobox-value",
-		...props
+		...componentProps
 	});
 }
-const ComboboxTrigger = React$1.forwardRef(({ className, children, ...props }, ref) => {
+const ComboboxTrigger = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "combobox-trigger",
 		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
 		...props,
@@ -1113,8 +1625,10 @@ const ComboboxTrigger = React$1.forwardRef(({ className, children, ...props }, r
 	});
 });
 ComboboxTrigger.displayName = "ComboboxTrigger";
-function ComboboxClear({ className, ...props }) {
+const ComboboxClear = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		ref: forwardRef,
 		"data-slot": "combobox-clear",
 		render: /* @__PURE__ */ jsx(InputGroupButton, {
 			variant: "ghost",
@@ -1124,10 +1638,12 @@ function ComboboxClear({ className, ...props }) {
 		...props,
 		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
 	});
-}
-const ComboboxInput = React$1.forwardRef(({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }, ref) => {
+});
+ComboboxClear.displayName = "ComboboxClear";
+const ComboboxInput = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, disabled = false, showTrigger = true, showClear = false, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(InputGroup, {
-		ref,
+		ref: forwardRef,
 		className: cn("w-auto", className),
 		children: [
 			/* @__PURE__ */ jsx(Combobox$1.Input, {
@@ -1150,7 +1666,8 @@ const ComboboxInput = React$1.forwardRef(({ className, children, disabled = fals
 	});
 });
 ComboboxInput.displayName = "ComboboxInput";
-function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+const ComboboxContent = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		side,
 		sideOffset,
@@ -1159,22 +1676,29 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		anchor,
 		className: "isolate z-50",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			ref: forwardRef,
 			"data-slot": "combobox-content",
 			"data-chips": !!anchor,
 			className: cn("group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[chips=true]:min-w-(--anchor-width) 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-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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
 		})
 	}) });
-}
-function ComboboxList({ className, ...props }) {
+});
+ComboboxContent.displayName = "ComboboxContent";
+const ComboboxList = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		ref: forwardRef,
 		"data-slot": "combobox-list",
 		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 outline-hidden data-empty:p-0", className),
 		...props
 	});
-}
-function ComboboxItem({ className, children, ...props }) {
+});
+ComboboxList.displayName = "ComboboxList";
+const ComboboxItem = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		ref: forwardRef,
 		"data-slot": "combobox-item",
 		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md p-2 pr-8 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
@@ -1184,73 +1708,88 @@ function ComboboxItem({ className, children, ...props }) {
 			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
 		})]
 	});
-}
-function ComboboxGroup({ className, ...props }) {
+});
+ComboboxItem.displayName = "ComboboxItem";
+const ComboboxGroup = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		ref: forwardRef,
 		"data-slot": "combobox-group",
 		className: cn(className),
 		...props
 	});
-}
-function ComboboxLabel({ className, ...props }) {
+});
+ComboboxGroup.displayName = "ComboboxGroup";
+const ComboboxLabel = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		ref: forwardRef,
 		"data-slot": "combobox-label",
 		className: cn("p-2 text-xs text-muted-foreground", className),
 		...props
 	});
-}
-function ComboboxCollection({ ...props }) {
+});
+ComboboxLabel.displayName = "ComboboxLabel";
+function ComboboxCollection(componentProps) {
 	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
 		"data-slot": "combobox-collection",
-		...props
+		...componentProps
 	});
 }
-function ComboboxEmpty({ className, ...props }) {
+const ComboboxEmpty = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		ref: forwardRef,
 		"data-slot": "combobox-empty",
 		className: cn("hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", className),
 		...props
 	});
-}
-function ComboboxSeparator({ className, ...props }) {
+});
+ComboboxEmpty.displayName = "ComboboxEmpty";
+const ComboboxSeparator = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		ref: forwardRef,
 		"data-slot": "combobox-separator",
 		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
-}
-const ComboboxChips = React$1.forwardRef(({ className, ...props }, ref) => {
+});
+ComboboxSeparator.displayName = "ComboboxSeparator";
+const ComboboxChips = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
-		ref,
+		ref: forwardRef,
 		"data-slot": "combobox-chips",
 		className: cn("flex min-h-10 flex-wrap items-center gap-1 rounded-md border border-input bg-transparent bg-clip-padding py-2 pl-3 pr-2 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", className),
 		...props
 	});
 });
 ComboboxChips.displayName = "ComboboxChips";
-function ComboboxChip({ className, children, showRemove = true, ...props }) {
+const ComboboxChip = React$1.forwardRef(function ComboboxChip(componentProps, forwardRef) {
+	const { className, children, showRemove = true, color, tone, legacyColor, ...props } = componentProps;
 	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
-		"data-slot": "combobox-chip",
-		className: cn("flex h-6 w-fit items-center justify-center gap-1 rounded-md bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
+		ref: forwardRef,
+		render: /* @__PURE__ */ jsx(Chip, {
+			color,
+			tone,
+			legacyColor
+		}),
+		className,
 		...props,
-		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
-			render: /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
-				size: "icon-sm"
-			}),
-			className: "-ml-1 opacity-50 hover:opacity-100",
-			"data-slot": "combobox-chip-remove",
-			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
-		})]
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, { render: /* @__PURE__ */ jsx(ChipRemove, {}) })]
 	});
-}
-function ComboboxChipsInput({ className, ...props }) {
+});
+const ComboboxChipsInput = React$1.forwardRef(function ComboboxChipsInput(componentProps, forwardRef) {
+	const { className, ...props } = componentProps;
 	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		ref: forwardRef,
 		"data-slot": "combobox-chip-input",
 		className: cn("min-w-16 flex-1 outline-none", className),
 		...props
 	});
-}
+});
+ComboboxChipsInput.displayName = "ComboboxChipsInput";
 function useComboboxAnchor() {
 	return React$1.useRef(null);
 }
@@ -1433,15 +1972,47 @@ const CountryFlag = ({ countryIsoCode, size = "xl", className, ...otherProps })
 	});
 };
 
+//#endregion
+//#region src/components/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/spinner.tsx
+const spinnerVariants = cva("animate-spin text-current", {
+	variants: { size: {
+		default: "size-4",
+		sm: "size-3",
+		lg: "size-5",
+		xl: "size-6"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Spinner({ className, size, ...props }) {
+	return /* @__PURE__ */ jsx(Loader2Icon, {
+		"data-slot": "spinner",
+		role: "status",
+		"aria-label": "Loading",
+		className: cn(spinnerVariants({ size }), className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/table.tsx
-const Table = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+const Table = React$1.forwardRef(({ className, containerClassName, containerStyle, ...props }, ref) => /* @__PURE__ */ jsx("div", {
 	"data-slot": "table-container",
-	className: "relative w-full overflow-x-auto",
+	style: containerStyle,
+	className: cn("relative w-full overflow-x-auto rounded-lg border border-border", containerClassName),
 	children: /* @__PURE__ */ jsx("table", {
 		ref,
 		"data-slot": "table",
-		className: cn("w-full caption-bottom text-sm", className),
+		className: cn("w-full caption-bottom text-sm [&_tbody_tr:last-child]:border-b-0", className),
 		...props
 	})
 }));
@@ -1449,7 +2020,7 @@ Table.displayName = "Table";
 const TableHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", {
 	ref,
 	"data-slot": "table-header",
-	className: cn("[&_tr]:border-b", className),
+	className: cn("[&_tr]:border-b [&_tr]:hover:bg-transparent", className),
 	...props
 }));
 TableHeader.displayName = "TableHeader";
@@ -1463,14 +2034,14 @@ TableBody.displayName = "TableBody";
 const TableFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", {
 	ref,
 	"data-slot": "table-footer",
-	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+	className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0 [&>tr]:hover:bg-transparent", className),
 	...props
 }));
 TableFooter.displayName = "TableFooter";
 const TableRow = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", {
 	ref,
 	"data-slot": "table-row",
-	className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+	className: cn("border-b transition-colors hover:bg-accent/30 data-[state=selected]:bg-accent/50", className),
 	...props
 }));
 TableRow.displayName = "TableRow";
@@ -1488,63 +2059,249 @@ const TableCell = React$1.forwardRef(({ className, ...props }, ref) => /* @__PUR
 	...props
 }));
 TableCell.displayName = "TableCell";
-const TableCaption = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", {
-	ref,
-	"data-slot": "table-caption",
-	className: cn("mt-4 text-sm text-muted-foreground", className),
-	...props
-}));
-TableCaption.displayName = "TableCaption";
 
 //#endregion
 //#region src/components/data-table.tsx
-function DataTable({ columns, data, tableOptions, noResultsMessage = "No results." }) {
+const SELECT_COLUMN_ID = "__select";
+const DEFAULT_SKELETON_COUNT = 5;
+function DataTable({ columns, data, getRowId, loadingState = "idle", skeletonCount = DEFAULT_SKELETON_COUNT, emptyState, sorting, onSortingChange, enableRowSelection, rowSelection, onRowSelectionChange, actionBar, onFetchMore, hasMore = false, enableColumnResizing = false, fillHeight = false, onRowClick, className }) {
+	const sortingEnabled = !!onSortingChange;
+	const selectionEnabled = !!enableRowSelection;
+	const finalColumns = React$1.useMemo(() => {
+		if (!selectionEnabled) return columns;
+		return [makeSelectColumn(), ...columns];
+	}, [columns, selectionEnabled]);
 	const table = useReactTable({
 		data,
-		columns,
+		columns: finalColumns,
 		getCoreRowModel: getCoreRowModel(),
-		...tableOptions
+		getRowId,
+		enableSorting: sortingEnabled,
+		manualSorting: sortingEnabled,
+		enableRowSelection,
+		enableColumnResizing,
+		columnResizeMode: "onChange",
+		onSortingChange,
+		onRowSelectionChange,
+		state: {
+			...sorting !== void 0 && { sorting },
+			...rowSelection !== void 0 && { rowSelection }
+		}
 	});
-	return /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-		"data-state": row.getIsSelected() && "selected",
-		children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-	}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-		colSpan: columns.length,
-		className: "h-24 text-center",
-		children: noResultsMessage
-	}) }) })] });
-}
-
-//#endregion
-//#region src/components/scroll-area.tsx
-function ScrollArea({ className, children, scrollFade = false, scrollbarGutter = false, ...props }) {
-	return /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
-		className: cn("size-full min-h-0", className),
-		...props,
+	const rows = table.getRowModel().rows;
+	const selectedCount = table.getSelectedRowModel().rows.length;
+	const hasSelection = selectedCount > 0;
+	const hasFooter = finalColumns.some((col) => col.footer != null);
+	const isInitialLoading = loadingState === "loading";
+	const isRefreshing = loadingState === "sorting" || loadingState === "filtering";
+	const isLoadingMore = loadingState === "loadingMore";
+	const showEmptyState = !isInitialLoading && rows.length === 0 && !!emptyState;
+	const anySelected = hasSelection;
+	const rowClickable = selectionEnabled || !!onRowClick;
+	const handleRowActivate = (row) => {
+		if (selectionEnabled && (anySelected || !onRowClick)) {
+			if (row.getCanSelect()) row.toggleSelected();
+		} else if (onRowClick) onRowClick(row.original);
+	};
+	const colWidth = (size) => enableColumnResizing ? { width: size } : void 0;
+	const showActionBar = !!actionBar && hasSelection;
+	const reservedBottom = showActionBar ? ActionBarHeight + 16 : void 0;
+	const sentinelRef = useFetchMoreSentinel(onFetchMore, fillHeight, data.length);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative w-full", fillHeight && "flex min-h-0 flex-1 flex-col", className),
+		"aria-busy": isInitialLoading || isRefreshing || void 0,
 		children: [
-			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, {
-				className: cn("h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5"),
-				"data-slot": "scroll-area-viewport",
-				children
+			/* @__PURE__ */ jsxs(Table, {
+				className: cn(enableColumnResizing && "table-fixed", fillHeight && "[&_[data-slot=table-head]]:sticky [&_[data-slot=table-head]]:top-0 [&_[data-slot=table-head]]:z-10 [&_[data-slot=table-head]]:bg-background", fillHeight && showEmptyState && "h-full"),
+				containerClassName: fillHeight ? "min-h-0 flex-1 overflow-y-auto" : void 0,
+				containerStyle: reservedBottom ? {
+					paddingBottom: reservedBottom,
+					scrollPaddingBottom: reservedBottom
+				} : void 0,
+				style: enableColumnResizing ? { width: `max(100%, ${table.getTotalSize()}px)` } : void 0,
+				children: [
+					/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, {
+						className: enableColumnResizing ? "group/header-row" : void 0,
+						children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxs(TableHead, {
+							style: colWidth(header.getSize()),
+							className: enableColumnResizing ? "relative" : void 0,
+							children: [header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsx(SortableHeader, { header }) : flexRender(header.column.columnDef.header, header.getContext()), enableColumnResizing && header.column.getCanResize() ? /* @__PURE__ */ jsx(ResizeHandle, { header }) : null]
+						}, header.id))
+					}, headerGroup.id)) }),
+					/* @__PURE__ */ jsx(TableBody, { children: isInitialLoading ? /* @__PURE__ */ jsx(SkeletonRows, {
+						columns: finalColumns,
+						count: skeletonCount
+					}) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+						rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+							"data-state": row.getIsSelected() ? "selected" : void 0,
+							onClick: rowClickable ? () => handleRowActivate(row) : void 0,
+							className: rowClickable ? "cursor-pointer" : void 0,
+							children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+								style: colWidth(cell.column.getSize()),
+								children: flexRender(cell.column.columnDef.cell, cell.getContext())
+							}, cell.id))
+						}, row.id)),
+						isLoadingMore ? /* @__PURE__ */ jsx(TableRow, {
+							className: "hover:bg-transparent",
+							children: /* @__PURE__ */ jsx(TableCell, {
+								colSpan: finalColumns.length,
+								className: "py-3",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "flex items-center justify-center text-muted-foreground",
+									children: /* @__PURE__ */ jsx(Spinner, {})
+								})
+							})
+						}) : null,
+						onFetchMore && hasMore && !isLoadingMore ? /* @__PURE__ */ jsx("tr", {
+							"aria-hidden": true,
+							ref: sentinelRef,
+							children: /* @__PURE__ */ jsx("td", {
+								colSpan: finalColumns.length,
+								className: "h-px"
+							})
+						}) : null
+					] }) : emptyState ? /* @__PURE__ */ jsx(TableRow, {
+						className: "hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(TableCell, {
+							colSpan: finalColumns.length,
+							className: "h-full p-0",
+							children: /* @__PURE__ */ jsx("div", {
+								className: cn("flex h-full items-center justify-center", !fillHeight && "min-h-60"),
+								children: emptyState
+							})
+						})
+					}) : null }),
+					hasFooter && !isInitialLoading ? /* @__PURE__ */ jsx(TableFooter, { children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx(TableRow, { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableCell, {
+						style: colWidth(header.getSize()),
+						children: header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())
+					}, header.id)) }, footerGroup.id)) }) : null
+				]
 			}),
-			/* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical" }),
-			/* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" }),
-			/* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { "data-slot": "scroll-area-corner" })
+			isRefreshing ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "table-loading-overlay",
+				className: "bg-background/60 absolute inset-0 z-10 flex items-center justify-center",
+				children: /* @__PURE__ */ jsx(Spinner, {
+					size: "lg",
+					className: "text-muted-foreground"
+				})
+			}) : null,
+			showActionBar ? /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-center p-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "animate-in fade-in slide-in-from-bottom-4 pointer-events-auto w-full duration-200 ease-out",
+					children: /* @__PURE__ */ jsx(ActionBarContext.Provider, {
+						value: {
+							count: selectedCount,
+							onClear: () => table.resetRowSelection()
+						},
+						children: actionBar
+					})
+				})
+			}) : null
 		]
 	});
 }
-function ScrollBar({ className, orientation = "vertical", ...props }) {
-	return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, {
-		className: cn("m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100", className),
-		"data-slot": "scroll-area-scrollbar",
-		orientation,
-		...props,
-		children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, {
-			className: "relative flex-1 rounded-full bg-foreground/20",
-			"data-slot": "scroll-area-thumb"
-		})
+function makeSelectColumn() {
+	return {
+		id: SELECT_COLUMN_ID,
+		header: ({ table }) => {
+			const allSelected = table.getIsAllRowsSelected();
+			const someSelected = table.getIsSomeRowsSelected();
+			return /* @__PURE__ */ jsx(Checkbox, {
+				checked: allSelected,
+				indeterminate: !allSelected && someSelected,
+				onCheckedChange: (value) => table.toggleAllRowsSelected(value === true),
+				"aria-label": "Select all rows"
+			});
+		},
+		cell: ({ row }) => /* @__PURE__ */ jsx("span", {
+			className: "contents",
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsx(Checkbox, {
+				checked: row.getIsSelected(),
+				disabled: !row.getCanSelect(),
+				onCheckedChange: (value) => row.toggleSelected(value === true),
+				"aria-label": "Select row"
+			})
+		}),
+		enableSorting: false,
+		enableHiding: false,
+		enableResizing: false,
+		size: 40
+	};
+}
+function ResizeHandle({ header }) {
+	const isResizing = header.column.getIsResizing();
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		onMouseDown: header.getResizeHandler(),
+		onTouchStart: header.getResizeHandler(),
+		onClick: (e) => e.stopPropagation(),
+		className: cn("absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize touch-none select-none bg-border opacity-0 transition-opacity group-hover/header-row:opacity-100 hover:opacity-100", isResizing && "bg-primary opacity-100")
 	});
 }
+function SortableHeader({ header }) {
+	const direction = header.column.getIsSorted();
+	const Icon = direction === "asc" ? ChevronUpIcon : direction === "desc" ? ChevronDownIcon : ChevronsUpDownIcon;
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-ml-2 h-7 data-[icon=inline-end]:pr-2",
+		onClick: header.column.getToggleSortingHandler(),
+		children: [flexRender(header.column.columnDef.header, header.getContext()), /* @__PURE__ */ jsx(Icon, {
+			"data-icon": "inline-end",
+			className: cn("size-3.5", direction === false && "opacity-50")
+		})]
+	});
+}
+function SkeletonRows({ columns, count }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col, ci) => /* @__PURE__ */ jsx(TableCell, {
+		"data-test": "loading-cell",
+		children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full max-w-full" })
+	}, col.id ?? `col-${ci}`)) }, `skeleton-${i}`)) });
+}
+/**
+* Returns a callback ref for the scroll sentinel. The observer is (re)attached
+* whenever the sentinel node mounts — so it works even if the sentinel only
+* appears after the first page loads (the sentinel's presence is the gate). It
+* fires `onFetchMore` once per mount and disconnects immediately, so a single
+* page never triggers duplicate fetches; the sentinel remounts for the next page.
+*/
+function useFetchMoreSentinel(onFetchMore, fillHeight, resetKey) {
+	const onFetchMoreRef = React$1.useRef(onFetchMore);
+	onFetchMoreRef.current = onFetchMore;
+	const observerRef = React$1.useRef(null);
+	const nodeRef = React$1.useRef(null);
+	const armedRef = React$1.useRef(true);
+	const observe = React$1.useCallback(() => {
+		observerRef.current?.disconnect();
+		observerRef.current = null;
+		const node = nodeRef.current;
+		if (!node) return;
+		const root = fillHeight ? node.closest("[data-slot=\"table-container\"]") : null;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[entries.length - 1]?.isIntersecting) {
+				if (armedRef.current) {
+					armedRef.current = false;
+					onFetchMoreRef.current?.();
+				}
+			} else armedRef.current = true;
+		}, {
+			root,
+			rootMargin: "200px"
+		});
+		observer.observe(node);
+		observerRef.current = observer;
+	}, [fillHeight]);
+	React$1.useEffect(() => {
+		armedRef.current = true;
+		observe();
+	}, [resetKey, observe]);
+	return React$1.useCallback((node) => {
+		nodeRef.current = node;
+		observe();
+	}, [observe]);
+}
 
 //#endregion
 //#region src/components/drawer.tsx
@@ -3150,16 +3907,6 @@ function SheetDescription({ className, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/skeleton.tsx
-function Skeleton({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "skeleton",
-		className: cn("animate-pulse rounded-md bg-muted", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/tooltip.tsx
 function TooltipProvider({ delay = 0, ...props }) {
@@ -3670,38 +4417,115 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-//#region src/components/spinner.tsx
-const spinnerVariants = cva("animate-spin text-current", {
-	variants: { size: {
-		default: "size-4",
-		sm: "size-3",
-		lg: "size-5",
-		xl: "size-6"
-	} },
-	defaultVariants: { size: "default" }
+//#region src/components/stepper.tsx
+const StepperContext = React$1.createContext(void 0);
+function useStepper() {
+	const ctx = React$1.useContext(StepperContext);
+	if (!ctx) throw new Error("useStepper must be used within a Stepper");
+	return ctx;
+}
+const Stepper = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps, defaultValue, className, children, value, onValueChange, ...props } = componentProps;
+	const [activeId = "", setActiveId] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue ?? steps[0]?.id,
+		onChange: onValueChange
+	});
+	const goTo = React$1.useCallback((id) => setActiveId(id), [setActiveId]);
+	const getIndex = React$1.useCallback((id) => steps.findIndex((s) => s.id === id), [steps]);
+	const contextValue = React$1.useMemo(() => ({
+		activeId,
+		goTo,
+		getIndex,
+		steps
+	}), [
+		activeId,
+		goTo,
+		getIndex,
+		steps
+	]);
+	return /* @__PURE__ */ jsx(StepperContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: forwardRef,
+			"data-slot": "stepper",
+			className: cn("w-full", className),
+			...props,
+			children
+		})
+	});
 });
-function Spinner({ className, size, ...props }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		"data-slot": "spinner",
-		xmlns: "http://www.w3.org/2000/svg",
-		fill: "none",
-		viewBox: "0 0 24 24",
-		className: cn(spinnerVariants({ size }), className),
+Stepper.displayName = "Stepper";
+const StepperProgress = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps: stepIds, className, ...props } = componentProps;
+	const { activeId, getIndex, steps } = useStepper();
+	const ids = stepIds ?? steps.map((s) => s.id);
+	const currentIndex = getIndex(activeId);
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-progress",
+		"aria-hidden": "true",
+		className: cn("flex w-full items-center gap-1.5", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("circle", {
-			className: "opacity-25",
-			cx: "12",
-			cy: "12",
-			r: "10",
-			stroke: "currentColor",
-			strokeWidth: "4"
-		}), /* @__PURE__ */ jsx("path", {
-			className: "opacity-75",
-			fill: "currentColor",
-			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-		})]
+		children: ids.map((id) => {
+			const idx = getIndex(id);
+			const state = idx < currentIndex ? "completed" : idx === currentIndex ? "active" : "inactive";
+			return /* @__PURE__ */ jsx("span", {
+				"data-slot": "stepper-progress-segment",
+				"data-state": state,
+				className: "bg-muted h-1.5 flex-1 rounded-full transition-colors duration-300 data-[state=active]:bg-primary data-[state=completed]:bg-primary"
+			}, id);
+		})
 	});
-}
+});
+StepperProgress.displayName = "StepperProgress";
+const StepperCounter = React$1.forwardRef((componentProps, forwardRef) => {
+	const { steps: stepIds, className, children, ...props } = componentProps;
+	const { activeId, steps } = useStepper();
+	const ids = stepIds ?? steps.map((s) => s.id);
+	const pos = Math.max(0, ids.indexOf(activeId));
+	return /* @__PURE__ */ jsxs("p", {
+		ref: forwardRef,
+		"data-slot": "stepper-counter",
+		className: cn("text-muted-foreground text-xs", "[[data-slot=stepper-progress]+&]:pt-1", className),
+		...props,
+		children: [
+			"Step ",
+			pos + 1,
+			" of ",
+			ids.length,
+			children
+		]
+	});
+});
+StepperCounter.displayName = "StepperCounter";
+const StepperPanel = React$1.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	const { activeId } = useStepper();
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-panel",
+		"data-state": activeId,
+		className: cn("w-full", className),
+		...props
+	});
+});
+StepperPanel.displayName = "StepperPanel";
+const StepperContent = React$1.forwardRef((componentProps, forwardRef) => {
+	const { value, forceMount, className, ...props } = componentProps;
+	const { activeId } = useStepper();
+	const isActive = value === activeId;
+	if (!forceMount && !isActive) return null;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "stepper-content",
+		"data-state": activeId,
+		className: cn("w-full", className, !isActive && forceMount && "hidden"),
+		hidden: !isActive && forceMount,
+		...props
+	});
+});
+StepperContent.displayName = "StepperContent";
 
 //#endregion
 //#region src/components/switch.tsx
@@ -3903,4 +4727,4 @@ function useAudioGauge(options = {}) {
 }
 
 //#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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionBar, ActionBarButton, ActionBarContext, ActionBarHeight, 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, Chip, ChipRemove, 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, Filter, FilterClearAllButton, FilterGroup, 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, Stepper, StepperContent, StepperCounter, StepperPanel, StepperProgress, Switch, Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, bannerVariants, buttonGroupVariants, buttonVariants, cn, counterBadgeVariants, fabVariants, selectTriggerVariants, spinnerVariants, toast, toggleVariants, useAudioGauge, useComboboxAnchor, useNotification, useNotificationQueue, useSidebar, useStepper, useTheme };