@preset.nz/ux-kit 0.1.0 → 0.1.2

package/src/components/progress.tsx

@@ -0,0 +1,77 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "../lib/utils"
+
+type ProgressProps = {
+  /** `null` is indeterminate: a slow moving segment, still under `prefers-reduced-motion`. */
+  value: number | null
+  max?: number
+  /** The accessible name; shown above the bar when `showLabel`. */
+  label?: string
+  showLabel?: boolean
+  /** Right-aligned text the caller builds ("12.4 / 44.7 MB", "63%"). The kit does not format it. */
+  detail?: string
+  className?: string
+}
+
+// A 6 px rounded bar that fills its container: `--primary` on `--muted`. No per-state colour:
+// a failure is the caller's message, not a red bar.
+function Progress({
+  value,
+  max = 100,
+  label,
+  showLabel = false,
+  detail,
+  className,
+}: ProgressProps) {
+  const labelShown = showLabel && label !== undefined
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      value={value}
+      max={max}
+      aria-label={labelShown ? undefined : label}
+      className={cn("flex w-full flex-col gap-1.5", className)}
+    >
+      {(labelShown || detail !== undefined) && (
+        <div className="flex items-baseline justify-between gap-3 text-xs">
+          {labelShown ? (
+            <ProgressPrimitive.Label data-slot="progress-label" className="font-medium">
+              {label}
+            </ProgressPrimitive.Label>
+          ) : (
+            <span />
+          )}
+          {detail !== undefined && (
+            <span data-slot="progress-detail" className="text-muted-foreground tabular-nums">
+              {detail}
+            </span>
+          )}
+        </div>
+      )}
+      <ProgressPrimitive.Track
+        data-slot="progress-track"
+        className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted"
+      >
+        <ProgressPrimitive.Indicator
+          data-slot="progress-indicator"
+          className="h-full rounded-full bg-primary transition-[width] data-indeterminate:w-2/5 data-indeterminate:animate-[progress-slide_2s_ease-in-out_infinite] data-indeterminate:transition-none motion-reduce:data-indeterminate:animate-none"
+        />
+      </ProgressPrimitive.Track>
+    </ProgressPrimitive.Root>
+  )
+}
+
+// Decimal sizes, one place: bytes under a kilobyte, then kilobytes, megabytes and gigabytes.
+// 46_900_000 is "46.9 MB", 1_200_000_000 is "1.2 GB", 2_048 is "2.0 KB", 0 is "0 B".
+function formatBytes(n: number): string {
+  if (!Number.isFinite(n) || n <= 0) return "0 B"
+  if (n < 1_000) return `${Math.round(n)} B`
+  // Each threshold sits where one place rounds up to 1000.0 of the smaller unit.
+  if (n < 999_950) return `${(n / 1_000).toFixed(1)} KB`
+  if (n < 999_950_000) return `${(n / 1_000_000).toFixed(1)} MB`
+  return `${(n / 1_000_000_000).toFixed(1)} GB`
+}
+
+export type { ProgressProps }
+export { formatBytes, Progress }

package/src/components/select.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import * as React from "react"
 import { Select as SelectPrimitive } from "@base-ui/react/select"
-
+import { CaretDownIcon, CaretUpIcon, CheckIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 import { cn } from "../lib/utils"
-import { CaretDownIcon, CheckIcon, CaretUpIcon } from "@phosphor-icons/react"
 
 const Select = SelectPrimitive.Root
 
@@ -42,15 +41,13 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
-        className
+        className,
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon
-        render={
-          <CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />
-        }
+        render={<CaretDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
       />
     </SelectPrimitive.Trigger>
   )
@@ -83,7 +80,10 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-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 )}
+          className={cn(
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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-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}
         >
           <SelectScrollUpButton />
@@ -95,10 +95,7 @@ function SelectContent({
   )
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
@@ -108,17 +105,13 @@ function SelectLabel({
   )
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -136,10 +129,7 @@ function SelectItem({
   )
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
@@ -158,12 +148,11 @@ function SelectScrollUpButton({
       data-slot="select-scroll-up-button"
       className={cn(
         "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
-      <CaretUpIcon
-      />
+      <CaretUpIcon />
     </SelectPrimitive.ScrollUpArrow>
   )
 }
@@ -177,12 +166,11 @@ function SelectScrollDownButton({
       data-slot="select-scroll-down-button"
       className={cn(
         "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
-      <CaretDownIcon
-      />
+      <CaretDownIcon />
     </SelectPrimitive.ScrollDownArrow>
   )
 }

package/src/components/separator.tsx

@@ -4,18 +4,14 @@ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 
 import { cn } from "../lib/utils"
 
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
   return (
     <SeparatorPrimitive
       data-slot="separator"
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
+        className,
       )}
       {...props}
     />

package/src/components/sheet.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 import { XIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 import { Button } from "./button"
@@ -28,7 +28,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
       data-slot="sheet-overlay"
       className={cn(
         "fixed inset-0 z-50 bg-foreground/40 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+        className,
       )}
       {...props}
     />
@@ -61,7 +61,7 @@ function SheetContent({
             "inset-x-0 top-0 h-auto border-b data-closed:slide-out-to-top data-open:slide-in-from-top",
           side === "bottom" &&
             "inset-x-0 bottom-0 h-auto border-t data-closed:slide-out-to-bottom data-open:slide-in-from-bottom",
-          className
+          className,
         )}
         {...props}
       >
@@ -82,13 +82,21 @@ function SheetContent({
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
   )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
   )
 }
 
@@ -114,11 +122,11 @@ function SheetDescription({ className, ...props }: SheetPrimitive.Description.Pr
 
 export {
   Sheet,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
+  SheetDescription,
   SheetFooter,
+  SheetHeader,
   SheetTitle,
-  SheetDescription,
+  SheetTrigger,
 }

package/src/components/side-panel.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 import { buttonVariants } from "./button"
@@ -58,7 +58,12 @@ function SidePanel({
         data-slot="side-panel"
         data-state="closed"
         aria-label={title}
-        className={cn("flex w-10 shrink-0 flex-col items-center bg-sidebar py-2 text-sidebar-foreground", border, "border-sidebar-border", className)}
+        className={cn(
+          "flex w-10 shrink-0 flex-col items-center bg-sidebar py-2 text-sidebar-foreground",
+          border,
+          "border-sidebar-border",
+          className,
+        )}
         {...props}
       >
         <Tooltip>
@@ -77,7 +82,10 @@ function SidePanel({
           <TooltipContent side={side === "left" ? "right" : "left"}>
             <span>Show {title}</span>
             {shortcut ? (
-              <kbd data-slot="kbd" className="rounded-sm bg-background/20 px-1 font-sans text-[11px]">
+              <kbd
+                data-slot="kbd"
+                className="rounded-sm bg-background/20 px-1 font-sans text-[11px]"
+              >
                 {shortcut}
               </kbd>
             ) : null}
@@ -121,10 +129,16 @@ function SidePanel({
       data-state="open"
       aria-label={title}
       style={{ width: w }}
-      className={cn("relative flex shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground", border, "border-sidebar-border", className)}
+      className={cn(
+        "relative flex shrink-0 flex-col overflow-hidden bg-sidebar text-sidebar-foreground",
+        border,
+        "border-sidebar-border",
+        className,
+      )}
       {...props}
     >
       {children}
+      {/* biome-ignore lint/a11y/useSemanticElements: a focusable, keyboard-operable splitter (WAI-ARIA window splitter); <hr> is not focusable */}
       <div
         role="separator"
         aria-orientation="vertical"
@@ -137,7 +151,7 @@ function SidePanel({
         onKeyDown={onKey}
         className={cn(
           "absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none hover:bg-primary/30 focus-visible:bg-primary/40 focus-visible:outline-none",
-          side === "left" ? "right-0" : "left-0"
+          side === "left" ? "right-0" : "left-0",
         )}
       />
     </aside>
@@ -149,7 +163,10 @@ function SidePanelHeader({ className, children, ...props }: React.ComponentProps
   return (
     <div
       data-slot="side-panel-header"
-      className={cn("flex h-9 shrink-0 items-center gap-2 border-b border-sidebar-border px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
+      className={cn(
+        "flex h-9 shrink-0 items-center gap-2 border-b border-sidebar-border px-3 text-xs font-medium uppercase tracking-wide text-muted-foreground",
+        className,
+      )}
       {...props}
     >
       {children}
@@ -159,8 +176,14 @@ function SidePanelHeader({ className, children, ...props }: React.ComponentProps
 
 /** The scrolling body under the header. */
 function SidePanelContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="side-panel-content" className={cn("min-h-0 flex-1 overflow-auto", className)} {...props} />
+  return (
+    <div
+      data-slot="side-panel-content"
+      className={cn("min-h-0 flex-1 overflow-auto", className)}
+      {...props}
+    />
+  )
 }
 
-export { SidePanel, SidePanelContent, SidePanelHeader, clampWidth }
 export type { SidePanelProps }
+export { clampWidth, SidePanel, SidePanelContent, SidePanelHeader }

package/src/components/sidebar.tsx

@@ -1,29 +1,22 @@
 "use client"
 
-import * as React from "react"
 import { useRender } from "@base-ui/react/use-render"
-import { cva, type VariantProps } from "class-variance-authority"
 import { SidebarSimpleIcon } from "@phosphor-icons/react"
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
 
 import { useIsMobile } from "../lib/use-mobile"
 import { cn } from "../lib/utils"
 import { Button } from "./button"
 import { Input } from "./input"
 import { Separator } from "./separator"
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "./sheet"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet"
 import { Skeleton } from "./skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+
+// Sidebar: shadcn's sidebar with `asChild` replaced by `render`, and `useIsMobile` kept in
+// the kit. Only the `collapsible="none"` form is exercised in the playground; the offcanvas
+// and icon forms are untested here.
 
 // Base UI's replacement for Radix's asChild: pass `render={<a href="..." />}`
 // to swap the element, props and ref are merged onto it.
@@ -93,6 +86,7 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
+      // biome-ignore lint/suspicious/noDocumentCookie: the Cookie Store API is not in every webview, and the cookie is written for hosts that read it server-side
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
     [setOpenProp, open],
@@ -101,15 +95,12 @@ function SidebarProvider({
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+  }, [isMobile, setOpen])
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-        (event.metaKey || event.ctrlKey)
-      ) {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault()
         toggleSidebar()
       }
@@ -133,7 +124,7 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
   )
 
   return (
@@ -263,11 +254,7 @@ function Sidebar({
   )
 }
 
-function SidebarTrigger({
-  className,
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
   const { toggleSidebar } = useSidebar()
 
   return (
@@ -328,10 +315,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   )
 }
 
-function SidebarInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
@@ -364,10 +348,7 @@ function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function SidebarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
@@ -447,10 +428,7 @@ function SidebarGroupAction({
   )
 }
 
-function SidebarGroupContent({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
@@ -588,10 +566,7 @@ function SidebarMenuAction({
   )
 }
 
-function SidebarMenuBadge({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
@@ -627,12 +602,7 @@ function SidebarMenuSkeleton({
       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
@@ -661,10 +631,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
   )
 }
 
-function SidebarMenuSubItem({
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"

package/src/components/skeleton.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 import { cn } from "../lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/slider.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -21,13 +21,8 @@ function Slider({
   const [live, setLive] = React.useState<typeof valueProp | null>(null)
   const value = live ?? valueProp
   const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min],
-    [value, defaultValue, min]
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min]),
+    [value, defaultValue, min],
   )
 
   return (
@@ -62,6 +57,7 @@ function Slider({
         {Array.from({ length: _values.length }, (_, index) => (
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
+            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional; the count is fixed by the value array and they have no identity
             key={index}
             index={index}
             className="block h-4 w-2 shrink-0 rounded-[1px] border border-muted-foreground bg-background ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden has-[:focus-visible]:ring-4 data-disabled:pointer-events-none data-disabled:opacity-50"

package/src/components/snackbar.tsx

@@ -1,11 +1,12 @@
-import * as React from "react"
 import { Toast } from "@base-ui/react/toast"
 import { CheckCircleIcon, WarningIcon, XCircleIcon, XIcon } from "@phosphor-icons/react"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
-// The kit's one toast: Strata's snackbar, on Base UI Toast.
-// One manager for the module, so `notify()` works outside React. Mount one provider per window.
+// The kit's one toast: Strata's snackbar, on Base UI Toast. Kinds: plain, success, warning, error.
+// One manager for the module, so `notify()` works outside React. Mount one `SnackbarProvider` per
+// window, with a `SnackbarViewport` inside it.
 const manager = Toast.createToastManager()
 
 export function SnackbarProvider({ children }: { children: React.ReactNode }) {
@@ -17,7 +18,7 @@ export function SnackbarViewport({ className }: { className?: string }) {
     <Toast.Viewport
       className={cn(
         "pointer-events-none absolute bottom-3 left-3 z-50 flex w-72 flex-col gap-2 outline-none",
-        className
+        className,
       )}
     >
       <SnackbarList />
@@ -52,40 +53,40 @@ function SnackbarList() {
       {toasts.map((t) => {
         const kind = KIND[(t.type as SnackbarKind | undefined) ?? "plain"] ?? KIND.plain
         return (
-        <Toast.Root
-          key={t.id}
-          toast={t}
-          className={cn(
-            "pointer-events-auto flex items-start gap-2 rounded-sm border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md outline-none",
-            "transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
-            kind.root
-          )}
-        >
-          {kind.icon}
-          <div className="min-w-0 flex-1">
-            <Toast.Title className="font-medium">{t.title}</Toast.Title>
-            {t.description && (
-              <Toast.Description className="mt-0.5 opacity-80">{t.description}</Toast.Description>
-            )}
-          </div>
-          <Toast.Action
-            className={cn(
-              "inline-flex items-center rounded-sm px-2 py-0.5 text-xs font-medium",
-              "text-current/80 hover:bg-foreground/10 hover:text-current",
-              "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-            )}
-          />
-          <Toast.Close
-            aria-label="Dismiss"
+          <Toast.Root
+            key={t.id}
+            toast={t}
             className={cn(
-              "inline-flex size-4 items-center justify-center rounded-sm",
-              "opacity-60 hover:bg-foreground/10 hover:opacity-100",
-              "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+              "pointer-events-auto flex items-start gap-2 rounded-sm border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md outline-none",
+              "transition-opacity duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0",
+              kind.root,
             )}
           >
-            <XIcon weight="bold" className="size-3" />
-          </Toast.Close>
-        </Toast.Root>
+            {kind.icon}
+            <div className="min-w-0 flex-1">
+              <Toast.Title className="font-medium">{t.title}</Toast.Title>
+              {t.description && (
+                <Toast.Description className="mt-0.5 opacity-80">{t.description}</Toast.Description>
+              )}
+            </div>
+            <Toast.Action
+              className={cn(
+                "inline-flex items-center rounded-sm px-2 py-0.5 text-xs font-medium",
+                "text-current/80 hover:bg-foreground/10 hover:text-current",
+                "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+              )}
+            />
+            <Toast.Close
+              aria-label="Dismiss"
+              className={cn(
+                "inline-flex size-4 items-center justify-center rounded-sm",
+                "opacity-60 hover:bg-foreground/10 hover:opacity-100",
+                "focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+              )}
+            >
+              <XIcon weight="bold" className="size-3" />
+            </Toast.Close>
+          </Toast.Root>
         )
       })}
     </>
@@ -113,7 +114,9 @@ const show = (m: Manager, opts: SnackbarOptions) =>
     description: opts.description,
     type: opts.kind ?? "plain",
     timeout: opts.persistent ? 0 : (opts.timeout ?? 5000),
-    actionProps: opts.action ? { children: opts.action.label, onClick: opts.action.onClick } : undefined,
+    actionProps: opts.action
+      ? { children: opts.action.label, onClick: opts.action.onClick }
+      : undefined,
   })
 
 // Must be called under a SnackbarProvider.