@aircall/ds 0.2.6 → 0.2.7

package/dist/index.js

@@ -12,6 +12,8 @@ import * as Icons from "@aircall/react-icons";
 import { ArrowLeftOutline, ArrowRightOutline, CheckCircleOutline, CheckOutline, ChevronDownOutline, ChevronRightOutline, ChevronUpOutline, CloseOutline, Emoji, Info, Search } from "@aircall/react-icons";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { Combobox as Combobox$1 } from "@base-ui/react";
+import { CheckIcon, ChevronDownIcon, CircleIcon, Loader2Icon, MinusIcon, OctagonXIcon, PanelLeftIcon, TriangleAlertIcon, XIcon } from "lucide-react";
 import { Command as Command$1 } from "cmdk";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { getCountryISO3 } from "@aircall/numbers";
@@ -23,7 +25,6 @@ import { ThemeProvider as ThemeProvider$1, useTheme, useTheme as useTheme$1 } fr
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { OTPInput, OTPInputContext } from "input-otp";
-import { CircleIcon, Loader2Icon, MinusIcon, OctagonXIcon, PanelLeftIcon, TriangleAlertIcon } from "lucide-react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
@@ -212,7 +213,8 @@ const buttonVariants = cva("cursor-pointer inline-flex items-center justify-cent
 			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
 			icon: "size-9",
 			"icon-sm": "size-8",
-			"icon-lg": "size-10"
+			"icon-lg": "size-10",
+			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3"
 		},
 		block: { true: "w-full" }
 	},
@@ -452,6 +454,292 @@ function CollapsibleContent({ ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/input.tsx
+const inputVariants = cva("text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		sizing: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md gap-1.5 px-3",
+			lg: "h-11 rounded-lg px-6"
+		},
+		block: { true: "w-full" }
+	},
+	defaultVariants: { sizing: "default" }
+});
+const Input = React$1.forwardRef(({ className, type, sizing, block, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn(inputVariants({
+			sizing,
+			block,
+			className
+		})),
+		...props,
+		ref: forwardedRef
+	});
+});
+
+//#endregion
+//#region src/components/textarea.tsx
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/input-group.tsx
+const inputGroupVariants = cva("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none has-[>textarea]:h-auto", {
+	variants: { sizing: {
+		default: "h-9",
+		sm: "h-8",
+		lg: "h-11"
+	} },
+	defaultVariants: { sizing: "default" }
+});
+function InputGroup({ className, sizing, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn(inputGroupVariants({ sizing }), "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+	variants: { align: {
+		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+		"block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
+	variants: { size: {
+		xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+		sm: "h-7 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-7 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+const InputGroupButton = React$1.forwardRef(({ className, type = "button", variant = "ghost", size = "xs", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+});
+InputGroupButton.displayName = "InputGroupButton";
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+const InputGroupInput = React$1.forwardRef(({ className, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props,
+		ref: forwardedRef
+	});
+});
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/combobox.tsx
+const Combobox = Combobox$1.Root;
+function ComboboxValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Value, {
+		"data-slot": "combobox-value",
+		...props
+	});
+}
+const ComboboxTrigger = React$1.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Combobox$1.Trigger, {
+		ref,
+		"data-slot": "combobox-trigger",
+		"aria-label": "Open options",
+		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			"data-slot": "combobox-trigger-icon",
+			className: "text-muted-foreground pointer-events-none size-4"
+		})]
+	});
+});
+ComboboxTrigger.displayName = "ComboboxTrigger";
+function ComboboxClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Clear, {
+		"data-slot": "combobox-clear",
+		"aria-label": "Clear selection",
+		render: /* @__PURE__ */ jsx(InputGroupButton, {
+			variant: "ghost",
+			size: "icon-xs"
+		}),
+		className: cn(className),
+		...props,
+		children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+	});
+}
+function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("w-auto", className),
+		children: [
+			/* @__PURE__ */ jsx(Combobox$1.Input, {
+				disabled,
+				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
+				...props
+			}),
+			/* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-end",
+				children: [showTrigger && /* @__PURE__ */ jsx(InputGroupButton, {
+					size: "icon-xs",
+					variant: "ghost",
+					asChild: true,
+					"data-slot": "input-group-button",
+					className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent",
+					disabled,
+					children: /* @__PURE__ */ jsx(ComboboxTrigger, {})
+				}), showClear && /* @__PURE__ */ jsx(ComboboxClear, { disabled })]
+			}),
+			children
+		]
+	});
+}
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		anchor,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
+			"data-slot": "combobox-content",
+			"data-chips": !!anchor,
+			className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className),
+			...props
+		})
+	}) });
+}
+function ComboboxList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.List, {
+		"data-slot": "combobox-list",
+		className: cn("max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0", className),
+		...props
+	});
+}
+function ComboboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Item, {
+		"data-slot": "combobox-item",
+		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
+			"data-slot": "combobox-item-indicator",
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none size-4 pointer-coarse:size-5" })
+		})]
+	});
+}
+function ComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Group, {
+		"data-slot": "combobox-group",
+		className: cn(className),
+		...props
+	});
+}
+function ComboboxLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.GroupLabel, {
+		"data-slot": "combobox-label",
+		className: cn("text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className),
+		...props
+	});
+}
+function ComboboxCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Collection, {
+		"data-slot": "combobox-collection",
+		...props
+	});
+}
+function ComboboxEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Empty, {
+		"data-slot": "combobox-empty",
+		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
+		...props
+	});
+}
+function ComboboxSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Separator, {
+		"data-slot": "combobox-separator",
+		className: cn("bg-border -mx-1 my-1 h-px", className),
+		...props
+	});
+}
+const ComboboxChips = React$1.forwardRef(({ className, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
+		ref,
+		"data-slot": "combobox-chips",
+		className: cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5", className),
+		...props
+	});
+});
+ComboboxChips.displayName = "ComboboxChips";
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+	return /* @__PURE__ */ jsxs(Combobox$1.Chip, {
+		"data-slot": "combobox-chip",
+		className: cn("bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0", className),
+		...props,
+		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox$1.ChipRemove, {
+			"aria-label": "Remove item",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-xs"
+			}),
+			className: "-ml-1 opacity-50 hover:opacity-100",
+			"data-slot": "combobox-chip-remove",
+			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+		})]
+	});
+}
+function ComboboxChipsInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox$1.Input, {
+		"data-slot": "combobox-chip-input",
+		className: cn("min-w-16 flex-1 outline-none", className),
+		...props
+	});
+}
+function useComboboxAnchor() {
+	return React$1.useRef(null);
+}
+
 //#endregion
 //#region src/components/dialog.tsx
 function Dialog({ ...props }) {
@@ -1136,125 +1424,6 @@ function FieldError({ className, children, errors, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/input.tsx
-const inputVariants = cva("text-foreground file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
-	variants: {
-		sizing: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-md gap-1.5 px-3",
-			lg: "h-11 rounded-lg px-6"
-		},
-		block: { true: "w-full" }
-	},
-	defaultVariants: { sizing: "default" }
-});
-const Input = React$1.forwardRef(({ className, type, sizing, block, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx("input", {
-		type,
-		"data-slot": "input",
-		className: cn(inputVariants({
-			sizing,
-			block,
-			className
-		})),
-		...props,
-		ref: forwardedRef
-	});
-});
-
-//#endregion
-//#region src/components/textarea.tsx
-function Textarea({ className, ...props }) {
-	return /* @__PURE__ */ jsx("textarea", {
-		"data-slot": "textarea",
-		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
-		...props
-	});
-}
-
-//#endregion
-//#region src/components/input-group.tsx
-const inputGroupVariants = cva("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none has-[>textarea]:h-auto", {
-	variants: { sizing: {
-		default: "h-9",
-		sm: "h-8",
-		lg: "h-11"
-	} },
-	defaultVariants: { sizing: "default" }
-});
-function InputGroup({ className, sizing, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "input-group",
-		role: "group",
-		className: cn(inputGroupVariants({ sizing }), "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
-		...props
-	});
-}
-const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
-	variants: { align: {
-		"inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-		"inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-		"block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
-		"block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
-	} },
-	defaultVariants: { align: "inline-start" }
-});
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		role: "group",
-		"data-slot": "input-group-addon",
-		"data-align": align,
-		className: cn(inputGroupAddonVariants({ align }), className),
-		onClick: (e) => {
-			if (e.target.closest("button")) return;
-			e.currentTarget.parentElement?.querySelector("input")?.focus();
-		},
-		...props
-	});
-}
-const inputGroupButtonVariants = cva("text-sm shadow-none flex gap-2 items-center", {
-	variants: { size: {
-		xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-		sm: "h-7 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-		"icon-sm": "size-7 p-0 has-[>svg]:p-0"
-	} },
-	defaultVariants: { size: "xs" }
-});
-const InputGroupButton = React$1.forwardRef(({ className, type = "button", variant = "ghost", size = "xs", ...props }, ref) => {
-	return /* @__PURE__ */ jsx(Button, {
-		ref,
-		type,
-		"data-size": size,
-		variant,
-		className: cn(inputGroupButtonVariants({ size }), className),
-		...props
-	});
-});
-InputGroupButton.displayName = "InputGroupButton";
-function InputGroupText({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
-		...props
-	});
-}
-const InputGroupInput = React$1.forwardRef(({ className, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(Input, {
-		"data-slot": "input-group-control",
-		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
-		...props,
-		ref: forwardedRef
-	});
-});
-function InputGroupTextarea({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Textarea, {
-		"data-slot": "input-group-control",
-		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/input-otp.tsx
 const inputOTPVariants = cva("", {
@@ -2316,4 +2485,4 @@ function ToggleGroupItem({ className, children, variant, size, ...props }) {
 }
 
 //#endregion
-export { Alert, AlertAction, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CountryFlag, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmojiPicker, EmojiPickerCategories, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Slot, Spinner, Switch, TabBar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, inputOTPVariants, spinnerVariants, toast, toggleVariants, useSidebar, useTheme };
+export { Alert, AlertAction, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, 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, CountryFlag, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmojiPicker, EmojiPickerCategories, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Label, List, ListCol, ListRow, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Slot, Spinner, Switch, TabBar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, inputOTPVariants, spinnerVariants, toast, toggleVariants, useComboboxAnchor, useSidebar, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/ds",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -33,6 +33,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@base-ui/react": "1.1.0",
     "@radix-ui/react-avatar": "1.1.9",
     "@radix-ui/react-checkbox": "1.3.3",
     "@radix-ui/react-collapsible": "1.1.12",