@aircall/ds 0.2.3 → 0.2.6

package/dist/index.js

@@ -22,9 +22,10 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ThemeProvider as ThemeProvider$1, useTheme, useTheme as useTheme$1 } from "next-themes";
 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 { CircleIcon, Loader2Icon, OctagonXIcon, PanelLeftIcon, TriangleAlertIcon } from "lucide-react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as SliderPrimitive from "@radix-ui/react-slider";
@@ -635,66 +636,6 @@ function capitalizeFirstLetter(val) {
 	return String(val).charAt(0).toUpperCase() + String(val).slice(1);
 }
 
-//#endregion
-//#region src/components/dock.tsx
-const Dock = React$1.forwardRef(({ items, activeItem, onItemClick, variant = "default", size = "md", orientation = "horizontal", className, ...props }, ref) => {
-	const isHorizontal = orientation === "horizontal";
-	const dockVariants = {
-		default: "bg-background/70 backdrop-blur-xl border border-border/20 shadow-2xl",
-		floating: "bg-background/80 backdrop-blur-xl border border-border/10 shadow-2xl rounded-xl",
-		minimal: "bg-transparent"
-	};
-	const sizeClasses = {
-		sm: isHorizontal ? "h-14 px-3" : "w-14 py-3",
-		md: isHorizontal ? "h-16 px-4" : "w-16 py-4",
-		lg: isHorizontal ? "h-18 px-5" : "w-18 py-5"
-	};
-	const itemSizeClasses = {
-		sm: "p-2.5 min-w-[48px] min-h-[48px]",
-		md: "p-3 min-w-[56px] min-h-[56px]",
-		lg: "p-4 min-w-[64px] min-h-[64px]"
-	};
-	const handleItemClick = (item) => {
-		if (item.disabled) return;
-		if (item.onClick) item.onClick();
-		if (onItemClick) onItemClick(item.id, item);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cn("flex items-center justify-center", dockVariants[variant], sizeClasses[size], isHorizontal ? "flex-row gap-1.5" : "flex-col gap-1.5", className),
-		...props,
-		children: items.map((item) => {
-			const isActive = activeItem === item.id || item.isActive;
-			return /* @__PURE__ */ jsxs("button", {
-				onClick: () => handleItemClick(item),
-				disabled: item.disabled,
-				className: cn("relative flex flex-col items-center justify-center", "transition-all duration-300 ease-out", "rounded-lg group", itemSizeClasses[size], "hover:bg-accent/60 hover:text-accent-foreground", "focus:outline-none focus:ring-2 focus:ring-ring/50 focus:ring-offset-1", "disabled:opacity-40 disabled:cursor-not-allowed", "active:scale-95", isActive && [
-					"bg-primary/90 text-primary-foreground",
-					"hover:bg-primary hover:text-primary-foreground",
-					"shadow-lg scale-105"
-				], !isActive && ["text-muted-foreground/80", "hover:text-foreground hover:scale-105"]),
-				title: item.label,
-				children: [
-					item.icon && /* @__PURE__ */ jsx("div", {
-						className: cn("transition-all duration-300 ease-out", "group-hover:scale-110 group-hover:-translate-y-0.5", isActive && "scale-110 -translate-y-0.5", size === "sm" ? "mb-1" : "mb-1.5"),
-						children: item.icon
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: cn("font-medium transition-all duration-300 ease-out", "group-hover:opacity-100", size === "sm" ? "text-xs" : size === "md" ? "text-xs" : "text-sm", isHorizontal && size === "sm" && "sr-only", isActive ? "opacity-100" : "opacity-80"),
-						children: item.label
-					}),
-					item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("div", {
-						className: cn("absolute -top-1.5 -right-1.5", "flex items-center justify-center", "min-w-5 h-5 px-1.5", "bg-destructive text-destructive-foreground text-xs font-semibold", "rounded-full border-2 border-background/80 backdrop-blur-sm", "shadow-lg animate-pulse", "transition-transform duration-200 ease-out", "group-hover:scale-110"),
-						children: item.badge > 99 ? "99+" : item.badge
-					}),
-					isActive && /* @__PURE__ */ jsx("div", { className: cn("absolute", isHorizontal ? "-bottom-2 left-1/2 -translate-x-1/2 w-8 h-1" : "-right-2 top-1/2 -translate-y-1/2 h-8 w-1", "bg-primary rounded-full shadow-sm", "animate-in fade-in-0 slide-in-from-bottom-2 duration-300") })
-				]
-			}, item.id);
-		})
-	});
-});
-Dock.displayName = "Dock";
-
 //#endregion
 //#region src/components/drawer.tsx
 function Drawer({ ...props }) {
@@ -1314,6 +1255,53 @@ function InputGroupTextarea({ className, ...props }) {
 	});
 }
 
+//#endregion
+//#region src/components/input-otp.tsx
+const inputOTPVariants = cva("", {
+	variants: { sizing: {
+		default: "**:data-[slot=input-otp-slot]:h-9 **:data-[slot=input-otp-slot]:w-9",
+		sm: "**:data-[slot=input-otp-slot]:h-8 **:data-[slot=input-otp-slot]:w-8",
+		lg: "**:data-[slot=input-otp-slot]:h-12 **:data-[slot=input-otp-slot]:w-12"
+	} },
+	defaultVariants: { sizing: "default" }
+});
+function InputOTP({ className, containerClassName, sizing, ...props }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", inputOTPVariants({ sizing }), containerClassName),
+		className: cn("disabled:cursor-not-allowed", className),
+		...props
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		className: cn("flex items-center", className),
+		...props
+	});
+}
+function InputOTPSlot({ index, className, ...props }) {
+	const { char, hasFakeCaret, isActive } = React$1.useContext(OTPInputContext)?.slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive,
+		className: cn("data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]", className),
+		...props,
+		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+		})]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		role: "separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+
 //#endregion
 //#region src/components/item.tsx
 const ItemGroup = React$1.forwardRef(({ className, stackedItems = false, ...props }, ref) => {
@@ -2010,10 +1998,11 @@ const sidebarMenuButtonVariants = cva("peer/menu-button flex w-full items-center
 		size: "default"
 	}
 });
-function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
+const SidebarMenuButton = React$1.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
 	const Comp = asChild ? Slot$1 : "button";
 	const { isMobile, state } = useSidebar();
 	const button = /* @__PURE__ */ jsx(Comp, {
+		ref,
 		"data-slot": "sidebar-menu-button",
 		"data-sidebar": "menu-button",
 		"data-size": size,
@@ -2025,7 +2014,8 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = "defau
 		...props
 	});
 	if (!tooltip) return button;
-	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	let tooltipProps = tooltip;
+	if (typeof tooltipProps === "string") tooltipProps = { children: tooltipProps };
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		asChild: true,
 		children: button
@@ -2033,19 +2023,22 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = "defau
 		side: "right",
 		align: "center",
 		hidden: state !== "collapsed" || isMobile,
-		...tooltip
+		...tooltipProps
 	})] });
-}
-function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+const SidebarMenuAction = React$1.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
 	const Comp = asChild ? Slot$1 : "button";
 	const { isMobile } = useSidebar();
 	return /* @__PURE__ */ jsx(Comp, {
+		ref,
 		"data-slot": "sidebar-menu-action",
 		"data-sidebar": "menu-action",
 		className: cn("text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "after:absolute after:-inset-2", isMobile && "md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover && cn("peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100", isMobile ? "md:opacity-0" : "opacity-0"), className),
 		...props
 	});
-}
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
 function SidebarMenuBadge({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sidebar-menu-badge",
@@ -2188,18 +2181,6 @@ function Spinner({ className, size, ...props }) {
 	});
 }
 
-//#endregion
-//#region src/components/split-button.tsx
-const SplitButton = React$1.forwardRef(({ children, className }, ref) => {
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cn("inline-flex", "[&>*:first-child]:rounded-r-none", "[&>*:not(:first-child):not(:last-child)]:rounded-none", "[&>*:last-child]:rounded-l-none", "[&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-r-border", className),
-		role: "group",
-		children
-	});
-});
-SplitButton.displayName = "SplitButton";
-
 //#endregion
 //#region src/components/switch.tsx
 function Switch({ className, ...props }) {
@@ -2335,4 +2316,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, Dock, 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, 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, SplitButton, Switch, TabBar, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, 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, 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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/ds",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -57,6 +57,7 @@
     "cmdk": "1.1.1",
     "embla-carousel-react": "8.6.0",
     "emoji-picker-react": "4.4.9",
+    "input-otp": "1.4.2",
     "lucide-react": "0.562.0",
     "next-themes": "0.4.6",
     "sonner": "2.0.3",
@@ -83,9 +84,9 @@
     "@types/node": "24",
     "@types/react": "19",
     "@types/react-dom": "19",
-    "@vitest/browser-playwright": "4.0.16",
-    "@vitest/coverage-v8": "4.0.16",
-    "chromatic": "13.3.4",
+    "@vitest/browser-playwright": "4.0.17",
+    "@vitest/coverage-v8": "4.0.17",
+    "chromatic": "13.3.5",
     "playwright": "1.57.0",
     "react": "19.2.3",
     "react-compiler-runtime": "1.0.0",
@@ -95,8 +96,8 @@
     "tailwindcss": "4.1.18",
     "tsdown": "0.20.0-beta.3",
     "typescript": "5.9.3",
-    "vite": "5.4.2",
-    "vitest": "4.0.16"
+    "vite": "7.3.1",
+    "vitest": "4.0.17"
   },
   "scripts": {
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",