@codapet/design-system 0.8.3 → 0.8.5

package/AGENTS.md

@@ -72,6 +72,26 @@ These are the foot-guns. Knowing them prevents most "why does my Button look wro
 - `Dialog`/`Drawer` are the standard Radix/Vaul primitives.
 - **`SmartDialog*`** is a CodaPet addition: same API surface, but renders `Drawer` on `≤600px` and `Dialog` above. Prefer it for any modal that should bottom-sheet on mobile. Replace every `Dialog` token with `SmartDialog` (`SmartDialogTrigger`, `SmartDialogContent`, etc.).
 
+### Tooltip / RichTooltip
+
+- `TooltipContent` (the plain text tooltip) defaults to brand blue (`bg-primary`), including its arrow. The arrow used to be hardcoded — it now honors two extra props so a restyled body and its arrow stay in sync:
+  - `arrowClassName?: string` — merged (via `cn`) onto the arrow. Recolor it to match a custom surface.
+  - `hideArrow?: boolean` — omit the arrow entirely.
+  - White-tooltip example (recolor body **and** arrow together, otherwise the arrow stays blue). If the body has a shadow, add a matching **`drop-shadow`** to the arrow — a plain `shadow-*` won't follow the diamond shape and a white arrow is invisible without it:
+    ```tsx
+    <TooltipContent
+      className="bg-white text-foreground shadow-md"
+      arrowClassName="bg-white fill-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.12)]"
+    />
+    ```
+- `RichTooltipContent` (icon + heading + body, optionally `dismissible`) is dark by default. Its surface, text and arrow are no longer hardcoded:
+  - `variant?: "dark" | "light"` — `"dark"` (default) is the original dark surface + white text; `"light"` is a white surface + dark text, and **ships a soft `shadow-md` on the surface plus a matching `drop-shadow` on the arrow** so it's visible on light backgrounds out of the box. Both look correct in either app theme. Pick a variant instead of hand-rolling colors.
+  - `surfaceClassName?: string` — merged onto the inner surface `div`. Overrides the background (and text, since text color lives on the same element): `surfaceClassName="bg-white text-foreground"`.
+  - `arrowClassName?: string` — merged onto the arrow so it matches a custom surface (e.g. `arrowClassName="fill-white"`). When you give the surface a shadow via `surfaceClassName`, pair it with a `drop-shadow` here (e.g. `arrowClassName="fill-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.12)]"`).
+  - `hideArrow?: boolean` — omit the arrow.
+  - `className` still lands on the **outer** (transparent) positioning wrapper, not the visible surface — that's why `className="bg-white"` alone never worked. Use `surfaceClassName`/`variant` for appearance.
+- Exported types: `TooltipContentProps`, `RichTooltipContentProps`, `RichTooltipVariant`. All new props are optional and defaults are unchanged, so existing usages render identically.
+
 ## Components added on top of shadcn
 
 These don't exist in shadcn — reach for them instead of building your own:

package/dist/index.d.mts

@@ -724,15 +724,44 @@ declare function Tooltip({ persistent, ...props }: React$1.ComponentProps<typeof
     persistent?: boolean;
 }): react_jsx_runtime.JSX.Element;
 declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+interface TooltipContentProps extends React$1.ComponentProps<typeof TooltipPrimitive.Content> {
+    /** Omit the arrow entirely. Defaults to `false`. */
+    hideArrow?: boolean;
+    /**
+     * Classes merged (via `cn`) onto the arrow. Use to recolor it so it matches a
+     * custom surface, e.g. `arrowClassName="bg-white fill-white"`.
+     */
+    arrowClassName?: string;
+}
+declare function TooltipContent({ className, sideOffset, hideArrow, arrowClassName, children, ...props }: TooltipContentProps): react_jsx_runtime.JSX.Element;
+type RichTooltipVariant = 'dark' | 'light';
 interface RichTooltipContentProps extends Omit<React$1.ComponentProps<typeof TooltipPrimitive.Content>, 'children'> {
     icon?: React$1.ReactNode;
     heading?: string;
     dismissible?: boolean;
     onDismiss?: () => void;
     children: React$1.ReactNode;
+    /**
+     * Preset surface + text + arrow combo. `"dark"` (default) keeps the original
+     * dark surface with white text; `"light"` renders a white surface with dark
+     * text. Both look correct out of the box regardless of the app theme.
+     */
+    variant?: RichTooltipVariant;
+    /**
+     * Classes merged (via `cn`) onto the inner surface `div`, so the background
+     * (and text color) can be overridden, e.g. `surfaceClassName="bg-white text-foreground"`.
+     * Wins over the `variant` defaults.
+     */
+    surfaceClassName?: string;
+    /**
+     * Classes merged (via `cn`) onto the arrow so it matches a custom surface,
+     * e.g. `arrowClassName="fill-white"`. Wins over the `variant` defaults.
+     */
+    arrowClassName?: string;
+    /** Omit the arrow entirely. Defaults to `false`. */
+    hideArrow?: boolean;
 }
-declare function RichTooltipContent({ className, sideOffset, icon, heading, dismissible, onDismiss, children, ...props }: RichTooltipContentProps): react_jsx_runtime.JSX.Element;
+declare function RichTooltipContent({ className, sideOffset, icon, heading, dismissible, onDismiss, children, variant, surfaceClassName, arrowClassName, hideArrow, ...props }: RichTooltipContentProps): react_jsx_runtime.JSX.Element;
 
 type SidebarContextProps = {
     state: 'expanded' | 'collapsed';
@@ -930,4 +959,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare function useIsMobile(): boolean;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, 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, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingLMedium, HeadingM, HeadingMMedium, HeadingS, HeadingSMedium, HeadingXL, HeadingXLMedium, HeadingXS, HeadingXSMedium, HeadingXXS, HeadingXXSMedium, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OptionCard, type OptionCardProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, 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, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, optionCardVariants, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertBanner, type AlertBannerProps, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, AutoResizeTextarea, Avatar, AvatarFallback, AvatarImage, Badge, BadgeActionable, type BadgeActionableProps, BadgeInformative, BadgeInformativeGroup, BadgeInformativeItem, type BadgeInformativeProps, BadgeNumber, type BadgeNumberProps, Body, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DateFormat, DateInput, type DateInputProps, DateRangeInput, type DateRangeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DisplayHeading, 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, DropdownSelect, DropdownSelectContent, type DropdownSelectContentProps, DropdownSelectLabel, type DropdownSelectLabelProps, DropdownSelectOption, type DropdownSelectOptionProps, type DropdownSelectProps, DropdownSelectTrigger, type DropdownSelectTriggerProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeadingL, HeadingLMedium, HeadingM, HeadingMMedium, HeadingS, HeadingSMedium, HeadingXL, HeadingXLMedium, HeadingXS, HeadingXSMedium, HeadingXXS, HeadingXXSMedium, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MultiSelectFreeText, type MultiSelectFreeTextOption, type MultiSelectFreeTextProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OptionCard, type OptionCardProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ProgressBar, type ProgressBarProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTooltipContent, type RichTooltipContentProps, type RichTooltipVariant, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchSuggestion, SearchableSelect, SearchableSelectContent, SearchableSelectEmpty, SearchableSelectGroup, SearchableSelectItem, type SearchableSelectOption, type SearchableSelectProps, SearchableSelectTrigger, 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, SmartDialog, SmartDialogClose, SmartDialogContent, SmartDialogDescription, SmartDialogFooter, SmartDialogHeader, SmartDialogTitle, SmartDialogTrigger, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, ThemeProvider, ThemeToggle, type TimeFormat, TimeInput, type TimeInputProps, type TimeValue, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, alertBannerVariants, badgeActionableVariants, badgeInformativeVariants, badgeNumberVariants, badgeVariants, bodyTextVariants, buttonVariants, cn, displayTextVariants, inputVariants, labelTextVariants, navigationMenuTriggerStyle, optionCardVariants, progressBarVariants, tabsTriggerVariants, toggleVariants, useFormField, useIsMobile, useSidebar };

package/dist/index.mjs

@@ -5889,9 +5889,9 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/ui/tooltip.tsx
-import * as React48 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { X as X4 } from "lucide-react";
+import * as React48 from "react";
 import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
@@ -5942,6 +5942,8 @@ function TooltipTrigger({
 function TooltipContent({
   className,
   sideOffset = 0,
+  hideArrow = false,
+  arrowClassName,
   children,
   ...props
 }) {
@@ -5951,17 +5953,39 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance ",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx51(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        !hideArrow && /* @__PURE__ */ jsx51(
+          TooltipPrimitive.Arrow,
+          {
+            className: cn(
+              "bg-primary fill-primary z-10 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",
+              arrowClassName
+            )
+          }
+        )
       ]
     }
   ) });
 }
+var richTooltipVariants = {
+  dark: {
+    surface: "bg-gray-surface-dark",
+    text: "text-white",
+    mutedText: "text-white/70 hover:text-white",
+    arrow: "fill-gray-surface-dark"
+  },
+  light: {
+    surface: "bg-white shadow-md",
+    text: "text-gray-surface-dark",
+    mutedText: "text-gray-surface-dark/70 hover:text-gray-surface-dark",
+    arrow: "fill-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.12)]"
+  }
+};
 function RichTooltipContent({
   className,
   sideOffset = 4,
@@ -5970,6 +5994,10 @@ function RichTooltipContent({
   dismissible = false,
   onDismiss,
   children,
+  variant = "dark",
+  surfaceClassName,
+  arrowClassName,
+  hideArrow = false,
   ...props
 }) {
   const close = React48.useContext(TooltipCloseContext);
@@ -5977,6 +6005,7 @@ function RichTooltipContent({
     close?.();
     onDismiss?.();
   };
+  const styles = richTooltipVariants[variant] ?? richTooltipVariants.dark;
   return /* @__PURE__ */ jsx51(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs30(
     TooltipPrimitive.Content,
     {
@@ -5991,29 +6020,43 @@ function RichTooltipContent({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-3 bg-gray-surface-dark rounded-[12px] px-3 py-4 text-sm leading-5 max-w-sm", children: [
-          icon && /* @__PURE__ */ jsx51("span", { className: "flex items-center justify-center shrink-0 size-5 text-white [&_svg]:size-5", children: icon }),
-          /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
-            heading && /* @__PURE__ */ jsx51("p", { className: "font-semibold text-sm leading-5 text-white", children: heading }),
-            /* @__PURE__ */ jsx51("div", { className: "font-normal text-sm leading-5 text-white", children })
-          ] }),
-          dismissible && /* @__PURE__ */ jsx51(
-            "button",
-            {
-              type: "button",
-              onClick: handleDismiss,
-              className: "flex items-center justify-center shrink-0 size-5 text-white/70 hover:text-white transition-colors cursor-pointer",
-              "aria-label": "Dismiss",
-              children: /* @__PURE__ */ jsx51(X4, { className: "size-3.5" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs30(
+          "div",
+          {
+            className: cn(
+              "flex items-start gap-3 rounded-[12px] px-3 py-4 text-sm leading-5 max-w-sm",
+              styles.surface,
+              styles.text,
+              surfaceClassName
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx51("span", { className: "flex items-center justify-center shrink-0 size-5 [&_svg]:size-5", children: icon }),
+              /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 flex-col gap-2 min-w-0", children: [
+                heading && /* @__PURE__ */ jsx51("p", { className: "font-semibold text-sm leading-5", children: heading }),
+                /* @__PURE__ */ jsx51("div", { className: "font-normal text-sm leading-5", children })
+              ] }),
+              dismissible && /* @__PURE__ */ jsx51(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleDismiss,
+                  className: cn(
+                    "flex items-center justify-center shrink-0 size-5 transition-colors cursor-pointer",
+                    styles.mutedText
+                  ),
+                  "aria-label": "Dismiss",
+                  children: /* @__PURE__ */ jsx51(X4, { className: "size-3.5" })
+                }
+              )
+            ]
+          }
+        ),
+        !hideArrow && /* @__PURE__ */ jsx51(
           TooltipPrimitive.Arrow,
           {
             width: 16,
             height: 12,
-            className: "fill-gray-surface-dark"
+            className: cn(styles.arrow, arrowClassName)
           }
         )
       ]
@@ -7001,6 +7044,7 @@ function useTabIndicator(listRef, orientation) {
           position: "absolute",
           bottom: 0,
           left: 0,
+          zIndex: 1,
           height: "2px",
           width: activeEl.offsetWidth,
           transform: `translateX(${activeEl.offsetLeft}px)`,
@@ -7013,6 +7057,7 @@ function useTabIndicator(listRef, orientation) {
           position: "absolute",
           left: 0,
           top: 0,
+          zIndex: 1,
           width: "2px",
           height: activeEl.offsetHeight,
           transform: `translateY(${activeEl.offsetTop}px)`,
@@ -7086,7 +7131,9 @@ function TabsList({
       "data-slot": "tabs-list",
       className: cn(
         "text-muted-foreground relative",
-        orientation === "vertical" ? "flex flex-col border-l border-l-gray-stroke-default" : "flex w-fit items-center overflow-x-auto border-b border-b-gray-stroke-default",
+        // The gray track is an inset shadow rather than a border so it lives
+        // inside the padding box, letting the active indicator paint over it.
+        orientation === "vertical" ? "flex flex-col shadow-[inset_1px_0_0_0_var(--gray-stroke-default)]" : "flex w-fit items-center overflow-x-auto shadow-[inset_0_-1px_0_0_var(--gray-stroke-default)]",
         className
       ),
       ...props,