@aircall/ds 0.9.0 → 0.10.0

package/dist/index.js

@@ -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";
@@ -151,7 +151,7 @@ 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: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", {
+const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer 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 hover:bg-primary/90",
@@ -177,9 +177,10 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 		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({
@@ -346,7 +347,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 +401,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
@@ -982,6 +1232,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 +1552,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 +1569,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 +1582,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 +1610,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 +1620,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 +1652,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);
 }
@@ -1515,37 +1998,6 @@ function DataTable({ columns, data, tableOptions, noResultsMessage = "No results
 	}) }) })] });
 }
 
-//#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/drawer.tsx
 const DrawerContext = createContext({ position: "bottom" });
@@ -3903,4 +4355,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, 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, Switch, Table, TableBody, TableCaption, 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, useTheme };