@preset.nz/ux-kit 0.1.0 → 0.1.1

package/src/components/number-field.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
 import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
-
-import { cn } from "../lib/utils"
+import * as React from "react"
 import { ArrowsHorizontalIcon } from "../icons"
+import { cn } from "../lib/utils"
 
 // NumberField: a number you can drag. The label is the scrub handle (Base UI's ScrubArea);
 // click it, or tab in, to type. Behaviour is Oblique's InputNumber on Base UI's NumberField:
@@ -29,10 +28,7 @@ interface NumberChange {
 }
 
 interface NumberFieldProps
-  extends Omit<
-    React.ComponentProps<"div">,
-    "onChange" | "defaultValue" | "children" | "value"
-  > {
+  extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue" | "children" | "value"> {
   value: number
   onValueChange?: (value: number, details: NumberChange) => void
   min?: number
@@ -112,7 +108,7 @@ function NumberField({
   const digits = integer ? 0 : (precision ?? placesOf(small))
   const options = React.useMemo<Intl.NumberFormatOptions>(
     () => ({ maximumFractionDigits: digits, useGrouping: false, ...format }),
-    [digits, format]
+    [digits, format],
   )
 
   // The field's own value, so a scrub follows the pointer without waiting for the app's round
@@ -165,6 +161,7 @@ function NumberField({
     })
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the effect follows `value` alone; `show` and `clearSettle` are per-render closures over refs and state setters
   React.useEffect(() => {
     valueRef.current = value
     if (scrub.current.started) return
@@ -174,15 +171,17 @@ function NumberField({
     show(value)
   }, [value])
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: unmount cleanup only; `clearSettle` is a per-render closure over refs
   React.useEffect(
     () => () => {
       clearSettle()
       cancelAnimationFrame(pending.current.raf)
     },
-    []
+    [],
   )
 
   // Escape while scrubbing. Captured so the app's own Escape (clear selection) doesn't also run.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the listener lives while a scrub does; `show` and `dropPending` are per-render closures over refs
   React.useEffect(() => {
     if (!scrubbing || !onScrubCancel) return
     const onKey = (e: KeyboardEvent) => {
@@ -297,7 +296,10 @@ function NumberField({
     />
   )
   const unit = suffix != null && (
-    <span data-slot="number-field-suffix" className="flex shrink-0 items-center pr-2 text-muted-foreground select-none">
+    <span
+      data-slot="number-field-suffix"
+      className="flex shrink-0 items-center pr-2 text-muted-foreground select-none"
+    >
       {suffix}
     </span>
   )
@@ -322,9 +324,10 @@ function NumberField({
       className={cn(
         "min-w-0",
         !outside && `group/number-field relative ${boxClass}`,
-        labelPlacement === "column" && "col-span-2 grid grid-cols-subgrid items-center data-disabled:opacity-50",
+        labelPlacement === "column" &&
+          "col-span-2 grid grid-cols-subgrid items-center data-disabled:opacity-50",
         labelPlacement === "above" && "flex flex-col gap-1 data-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
@@ -340,8 +343,8 @@ function NumberField({
             ? "cursor-default"
             : cn(
                 "cursor-ew-resize hover:text-foreground data-scrubbing:text-foreground",
-                !outside && "hover:bg-muted data-scrubbing:bg-selection/20"
-              )
+                !outside && "hover:bg-muted data-scrubbing:bg-selection/20",
+              ),
         )}
       >
         {label}
@@ -367,10 +370,7 @@ function NumberField({
 const AXES = ["X", "Y", "Z", "W"]
 
 interface VectorFieldProps
-  extends Omit<
-    NumberFieldProps,
-    "value" | "onValueChange" | "label" | "className"
-  > {
+  extends Omit<NumberFieldProps, "value" | "onValueChange" | "label" | "className"> {
   value: number[]
   /** The whole vector with the changed component replaced. */
   onValueChange?: (value: number[], details: NumberChange) => void
@@ -393,20 +393,20 @@ function VectorField({
   return (
     <div
       data-slot="vector-field"
-      className={cn(
-        "flex min-w-0 gap-1",
-        orientation === "column" && "flex-col",
-        className
-      )}
+      className={cn("flex min-w-0 gap-1", orientation === "column" && "flex-col", className)}
     >
       {value.map((x, i) => (
         <NumberField
+          // biome-ignore lint/suspicious/noArrayIndexKey: one field per axis; the index is the axis
           key={i}
           {...props}
           label={labels?.[i] ?? (value.length <= AXES.length ? AXES[i] : String(i + 1))}
           value={x}
           onValueChange={(n, d) =>
-            onValueChange?.(value.map((v, j) => (j === i ? n : v)), d)
+            onValueChange?.(
+              value.map((v, j) => (j === i ? n : v)),
+              d,
+            )
           }
         />
       ))}
@@ -414,15 +414,19 @@ function VectorField({
   )
 }
 
-export { NumberField, VectorField }
 export type { NumberChange, NumberFieldProps, VectorFieldProps }
+export { NumberField, VectorField }
 
 /**
  * Pixels of drag per step, so a full-range scrub is about 300px whatever the step: a 0–8 field
  * with 0.25 steps moves one step per ~9px instead of per pixel, which read as jumping.
  * Unbounded ranges keep one step per pixel.
  */
-function pixelsPerStep(min: number | undefined, max: number | undefined, step: number | undefined): number {
+function pixelsPerStep(
+  min: number | undefined,
+  max: number | undefined,
+  step: number | undefined,
+): number {
   if (min == null || max == null || !step || max <= min) return 1
   return Math.min(12, Math.max(1, Math.round((300 * step) / (max - min))))
 }

package/src/components/popover.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import type * as React from "react"
 
 import { cn } from "../lib/utils"
 
@@ -33,7 +33,7 @@ function PopoverContent({
           data-slot="popover-content"
           className={cn(
             "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 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 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,
           )}
           {...props}
         />
@@ -72,11 +72,4 @@ function PopoverDescription({ className, ...props }: PopoverPrimitive.Descriptio
   )
 }
 
-export {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-}
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger }

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,18 @@
 "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"
 
 // 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 +82,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 +91,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 +120,7 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, isMobile, openMobile, toggleSidebar],
   )
 
   return (
@@ -263,11 +250,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 +311,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 +344,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 +424,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 +562,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 +598,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 +627,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"