@preset.nz/ux-kit 0.1.0 → 0.1.2

package/src/chat/reasoning.tsx

@@ -0,0 +1,182 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Adapted from Vercel AI Elements (https://github.com/vercel/ai-elements), reasoning.tsx.
+ * Modified by preset.nz, 2026-10-14: own state instead of Radix's useControllableState, Base UI Collapsible, CSS shimmer instead of motion, streamdown core only, Phosphor icons, NZ English strings.
+ */
+import { Collapsible } from "@base-ui/react/collapsible"
+import { BrainIcon, CaretDownIcon } from "@phosphor-icons/react"
+import type { ReactNode } from "react"
+import { createContext, memo, useContext, useEffect, useMemo, useRef, useState } from "react"
+import { Streamdown } from "streamdown"
+
+import { cn } from "../lib/utils"
+
+type ReasoningContextValue = {
+  isStreaming: boolean
+  isOpen: boolean
+  duration: number | undefined
+}
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null)
+
+function useReasoning() {
+  const context = useContext(ReasoningContext)
+  if (!context) throw new Error("Reasoning parts must sit inside <Reasoning>")
+  return context
+}
+
+export type ReasoningProps = Omit<Collapsible.Root.Props, "open" | "defaultOpen"> & {
+  /** True while the thinking is still arriving. Opens the block, and folds it again a moment after it ends. */
+  isStreaming?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  /** Seconds spent thinking. Measured from `isStreaming` when not given. */
+  duration?: number
+}
+
+const AUTO_CLOSE_DELAY = 1000
+
+/** A folded "Thinking…" block. */
+export const Reasoning = memo(function Reasoning({
+  className,
+  isStreaming = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration: durationProp,
+  children,
+  ...props
+}: ReasoningProps) {
+  const [innerOpen, setInnerOpen] = useState(defaultOpen ?? isStreaming)
+  const [measured, setMeasured] = useState<number | undefined>(undefined)
+  const isOpen = open ?? innerOpen
+  const duration = durationProp ?? measured
+
+  const everStreamed = useRef(isStreaming)
+  const autoClosed = useRef(false)
+  const startedAt = useRef<number | null>(null)
+
+  // A host that passes `open` owns it; the automatic open and fold only run when it does not.
+  const uncontrolled = open === undefined
+  const setAuto = (next: boolean) => setInnerOpen(next)
+  const setAutoRef = useRef(setAuto)
+  setAutoRef.current = setAuto
+
+  useEffect(() => {
+    if (isStreaming) {
+      everStreamed.current = true
+      startedAt.current ??= Date.now()
+      if (uncontrolled && defaultOpen !== false && !isOpen) setAutoRef.current(true)
+    } else if (startedAt.current !== null) {
+      setMeasured(Math.ceil((Date.now() - startedAt.current) / 1000))
+      startedAt.current = null
+    }
+  }, [isStreaming, isOpen, defaultOpen, uncontrolled])
+
+  useEffect(() => {
+    if (!uncontrolled || !everStreamed.current || isStreaming || !isOpen || autoClosed.current) {
+      return
+    }
+    const timer = setTimeout(() => {
+      autoClosed.current = true
+      setAutoRef.current(false)
+    }, AUTO_CLOSE_DELAY)
+    return () => clearTimeout(timer)
+  }, [isStreaming, isOpen, uncontrolled])
+
+  const value = useMemo(() => ({ duration, isOpen, isStreaming }), [duration, isOpen, isStreaming])
+
+  return (
+    <ReasoningContext.Provider value={value}>
+      <Collapsible.Root
+        data-slot="reasoning"
+        className={cn("w-full", className)}
+        open={isOpen}
+        onOpenChange={(next, details) => {
+          setInnerOpen(next)
+          onOpenChange?.(next, details)
+        }}
+        {...props}
+      >
+        {children}
+      </Collapsible.Root>
+    </ReasoningContext.Provider>
+  )
+})
+
+function defaultThinkingMessage(isStreaming: boolean, duration?: number): ReactNode {
+  if (isStreaming || duration === 0) return <span className="shimmer">Thinking…</span>
+  if (duration === undefined) return <span>Thought for a few seconds</span>
+  return <span>Thought for {duration} seconds</span>
+}
+
+export type ReasoningTriggerProps = Collapsible.Trigger.Props & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
+}
+
+export const ReasoningTrigger = memo(function ReasoningTrigger({
+  className,
+  children,
+  getThinkingMessage = defaultThinkingMessage,
+  ...props
+}: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, duration } = useReasoning()
+  return (
+    <Collapsible.Trigger
+      data-slot="reasoning-trigger"
+      className={cn(
+        "flex w-full items-center gap-2 text-xs text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring/50",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <BrainIcon className="size-3.5" />
+          {getThinkingMessage(isStreaming, duration)}
+          <CaretDownIcon
+            className={cn("size-3.5 transition-transform", isOpen ? "rotate-180" : "rotate-0")}
+          />
+        </>
+      )}
+    </Collapsible.Trigger>
+  )
+})
+
+export type ReasoningContentProps = Omit<Collapsible.Panel.Props, "children"> & {
+  /** The thinking so far, as markdown. */
+  children: string
+}
+
+export const ReasoningContent = memo(function ReasoningContent({
+  className,
+  children,
+  ...props
+}: ReasoningContentProps) {
+  const { isStreaming } = useReasoning()
+  return (
+    <Collapsible.Panel
+      data-slot="reasoning-content"
+      className={cn(
+        "mt-2 border-l border-border pl-3 text-xs text-muted-foreground outline-none",
+        className,
+      )}
+      {...props}
+    >
+      <Streamdown isAnimating={isStreaming}>{children}</Streamdown>
+    </Collapsible.Panel>
+  )
+})

package/src/chat/scroller.tsx

@@ -0,0 +1,147 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2023 shadcn
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * Adapted from shadcn/ui's MessageScroller (https://github.com/shadcn-ui/ui),
+ * on the headless core in @shadcn/react.
+ * Modified by preset.nz, 2026-10-14: one ChatScroller that assembles the parts,
+ * Phosphor icon, ux-kit Button, no utilities the kit's stylesheet lacks.
+ */
+
+import { ArrowDownIcon } from "@phosphor-icons/react"
+import {
+  MessageScroller as Primitive,
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn/react/message-scroller"
+import type { ComponentProps } from "react"
+
+import { Button } from "../components/button"
+import { cn } from "../lib/utils"
+
+export type ChatScrollerProps = ComponentProps<typeof Primitive.Root> &
+  Pick<
+    ComponentProps<typeof Primitive.Provider>,
+    "autoScroll" | "defaultScrollPosition" | "scrollEdgeThreshold"
+  > & {
+    /** Classes for the scrolling list inside, which holds the items. */
+    contentClassName?: string
+    /** Show the jump-to-latest button when scrolled away from the end. Default true. */
+    scrollButton?: boolean
+  }
+
+/**
+ * The conversation's scrolling container. It follows a streamed reply to the
+ * end and lets go as soon as the person scrolls up. Fill it with
+ * `ChatScrollerItem`s; give it a height (it fills its parent).
+ */
+export function ChatScroller({
+  className,
+  contentClassName,
+  children,
+  autoScroll = true,
+  defaultScrollPosition = "end",
+  scrollEdgeThreshold,
+  scrollButton = true,
+  ...props
+}: ChatScrollerProps) {
+  return (
+    <Primitive.Provider
+      autoScroll={autoScroll}
+      defaultScrollPosition={defaultScrollPosition}
+      scrollEdgeThreshold={scrollEdgeThreshold}
+    >
+      <Primitive.Root
+        data-slot="chat-scroller"
+        className={cn("relative flex size-full min-h-0 flex-col overflow-hidden", className)}
+        {...props}
+      >
+        <Primitive.Viewport
+          data-slot="chat-scroller-viewport"
+          className="size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain data-pending-scroll:invisible"
+        >
+          <Primitive.Content
+            data-slot="chat-scroller-content"
+            className={cn("flex h-max min-h-full flex-col gap-4 p-3", contentClassName)}
+          >
+            {children}
+          </Primitive.Content>
+        </Primitive.Viewport>
+        {scrollButton && <ChatScrollerButton />}
+      </Primitive.Root>
+    </Primitive.Provider>
+  )
+}
+
+export type ChatScrollerItemProps = ComponentProps<typeof Primitive.Item>
+
+/** One entry in the list. Mark a user turn with `scrollAnchor` to pin the view to it as the reply grows. */
+export function ChatScrollerItem({
+  className,
+  scrollAnchor = false,
+  ...props
+}: ChatScrollerItemProps) {
+  return (
+    <Primitive.Item
+      data-slot="chat-scroller-item"
+      scrollAnchor={scrollAnchor}
+      className={cn("min-w-0 shrink-0", className)}
+      {...props}
+    />
+  )
+}
+
+export type ChatScrollerButtonProps = Omit<ComponentProps<typeof Primitive.Button>, "render">
+
+/** The jump-to-latest button. `ChatScroller` includes one; use this to place your own. */
+export function ChatScrollerButton({
+  direction = "end",
+  className,
+  children,
+  ...props
+}: ChatScrollerButtonProps) {
+  return (
+    <Primitive.Button
+      data-slot="chat-scroller-button"
+      data-direction={direction}
+      direction={direction}
+      render={<Button variant="outline" size="icon-sm" />}
+      className={cn(
+        "absolute left-1/2 -translate-x-1/2 transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[direction=end]:bottom-3 data-[direction=start]:top-3 data-[direction=start]:[&_svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <ArrowDownIcon />
+          <span className="sr-only">
+            {direction === "end" ? "Jump to latest" : "Jump to start"}
+          </span>
+        </>
+      )}
+    </Primitive.Button>
+  )
+}
+
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility }

package/src/chat/suggestion.tsx

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Adapted from Vercel AI Elements (https://github.com/vercel/ai-elements), suggestion.tsx.
+ * Modified by preset.nz, 2026-10-14: own Button and a plain scrolling row instead of ScrollArea, ux-kit tokens.
+ */
+import type { ComponentProps } from "react"
+
+import { Button } from "../components/button"
+import { cn } from "../lib/utils"
+
+export type SuggestionsProps = ComponentProps<"div">
+
+/** A row of starter prompts. Scrolls sideways when it does not fit. */
+export function Suggestions({ className, ...props }: SuggestionsProps) {
+  return (
+    <div
+      data-slot="suggestions"
+      className={cn("flex w-full flex-nowrap items-center gap-2 overflow-x-auto pb-1", className)}
+      {...props}
+    />
+  )
+}
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  /** The text handed to `onClick`. Shown too, unless children are given. */
+  suggestion: string
+  onClick?: (suggestion: string) => void
+}
+
+export function Suggestion({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) {
+  return (
+    <Button
+      data-slot="suggestion"
+      type="button"
+      variant={variant}
+      size={size}
+      className={cn("shrink-0 rounded-full normal-case tracking-normal", className)}
+      onClick={() => onClick?.(suggestion)}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  )
+}

package/src/chat/tool.tsx

@@ -0,0 +1,143 @@
+/**
+ * Copyright 2023 Vercel, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Adapted from Vercel AI Elements (https://github.com/vercel/ai-elements), tool.tsx.
+ * Modified by preset.nz, 2026-10-14: own types instead of the `ai` package, Base UI Collapsible, Phosphor icons, no code-block dependency.
+ */
+import { Collapsible } from "@base-ui/react/collapsible"
+import {
+  CaretDownIcon,
+  CheckCircleIcon,
+  ClockIcon,
+  ProhibitIcon,
+  WrenchIcon,
+} from "@phosphor-icons/react"
+import type { ComponentProps, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+import type { ToolCallState } from "./types"
+
+const STATE_LABELS: Record<ToolCallState, string> = {
+  running: "Running",
+  done: "Done",
+  refused: "Refused",
+}
+
+const STATE_ICONS: Record<ToolCallState, ReactNode> = {
+  running: <ClockIcon className="size-3.5 animate-pulse" />,
+  done: <CheckCircleIcon className="size-3.5" weight="fill" />,
+  refused: <ProhibitIcon className="size-3.5 text-destructive" weight="fill" />,
+}
+
+export type ToolCallProps = Collapsible.Root.Props
+
+/** A collapsible row for one tool call: a header that always shows, a body that folds. */
+export function ToolCall({ className, ...props }: ToolCallProps) {
+  return (
+    <Collapsible.Root
+      data-slot="tool-call"
+      className={cn("group w-full rounded-md border border-border", className)}
+      {...props}
+    />
+  )
+}
+
+export type ToolCallHeaderProps = Omit<Collapsible.Trigger.Props, "children"> & {
+  /** The tool's name, as the model called it. */
+  name: string
+  state: ToolCallState
+}
+
+export function ToolCallHeader({ className, name, state, ...props }: ToolCallHeaderProps) {
+  return (
+    <Collapsible.Trigger
+      data-slot="tool-call-header"
+      className={cn(
+        "flex w-full items-center justify-between gap-2 p-2 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring/50",
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex min-w-0 items-center gap-2">
+        <WrenchIcon className="size-3.5 shrink-0 text-muted-foreground" />
+        <span className="truncate font-mono text-xs font-medium">{name}</span>
+      </span>
+      <span className="flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground">
+        {STATE_ICONS[state]}
+        {STATE_LABELS[state]}
+        <CaretDownIcon className="size-3.5 transition-transform group-data-[open]:rotate-180" />
+      </span>
+    </Collapsible.Trigger>
+  )
+}
+
+export type ToolCallContentProps = Collapsible.Panel.Props
+
+export function ToolCallContent({ className, ...props }: ToolCallContentProps) {
+  return (
+    <Collapsible.Panel
+      data-slot="tool-call-content"
+      className={cn("space-y-3 p-2 pt-0 text-popover-foreground outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function asText(value: unknown): string {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2)
+}
+
+export type ToolCallInputProps = ComponentProps<"div"> & {
+  /** The arguments the model sent. Objects are shown as JSON. */
+  input: unknown
+}
+
+export function ToolCallInput({ className, input, ...props }: ToolCallInputProps) {
+  return (
+    <div className={cn("space-y-1.5 overflow-hidden", className)} {...props}>
+      <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+        Arguments
+      </h4>
+      <pre className="overflow-x-auto rounded-sm bg-muted/50 p-2 font-mono text-xs">
+        {asText(input)}
+      </pre>
+    </div>
+  )
+}
+
+export type ToolCallOutputProps = ComponentProps<"div"> & {
+  output?: unknown
+  /** Set when the call failed or was refused; shown in place of the output. */
+  errorText?: string
+}
+
+export function ToolCallOutput({ className, output, errorText, ...props }: ToolCallOutputProps) {
+  if (output === undefined && !errorText) return null
+  return (
+    <div className={cn("space-y-1.5", className)} {...props}>
+      <h4 className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+        {errorText ? "Error" : "Result"}
+      </h4>
+      <pre
+        className={cn(
+          "overflow-x-auto rounded-sm p-2 font-mono text-xs",
+          errorText ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground",
+        )}
+      >
+        {errorText ?? asText(output)}
+      </pre>
+    </div>
+  )
+}

package/src/chat/types.ts

@@ -0,0 +1,8 @@
+/** Who a message is from. */
+export type ChatRole = "user" | "assistant"
+
+/** Where a tool call is: still running, finished, or declined by the host. */
+export type ToolCallState = "running" | "done" | "refused"
+
+/** What the conversation is doing. The host owns it; the components only read it. */
+export type ChatStatus = "idle" | "streaming" | "stopped" | "error"

package/src/components/alert-shell.tsx

@@ -0,0 +1,66 @@
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import type * as React from "react"
+import { cn } from "../lib/utils"
+import { DialogFooter, DialogHeader, DialogOverlay } from "./dialog"
+
+// AlertShell: the markup ConfirmDialog and DownloadPrompt share. Internal, not
+// exported from the package. It is answered, not dismissed: no close "x", and a
+// click outside does nothing, so the footer buttons and Escape are the ways out.
+
+interface AlertShellProps {
+  open: boolean
+  /** Escape. The caller decides what that means (and may ignore it). */
+  onDismiss: () => void
+  title: string
+  /** The body, below the title. */
+  children?: React.ReactNode
+  /** The buttons, secondary first and primary last. */
+  footer: React.ReactNode
+  /** The element that takes focus when the dialog opens. */
+  initialFocus?: React.RefObject<HTMLElement | null>
+}
+
+function AlertShell({ open, onDismiss, title, children, footer, initialFocus }: AlertShellProps) {
+  return (
+    <AlertDialogPrimitive.Root
+      data-slot="confirm-dialog"
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onDismiss()
+      }}
+    >
+      <AlertDialogPrimitive.Portal data-slot="confirm-dialog-portal">
+        <DialogOverlay />
+        <AlertDialogPrimitive.Popup
+          data-slot="confirm-dialog-content"
+          initialFocus={initialFocus}
+          className={cn(
+            "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md 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",
+          )}
+        >
+          <DialogHeader>
+            <AlertDialogPrimitive.Title
+              data-slot="dialog-title"
+              className="font-heading leading-none font-medium"
+            >
+              {title}
+            </AlertDialogPrimitive.Title>
+            {children ? (
+              <AlertDialogPrimitive.Description
+                render={<div />}
+                data-slot="dialog-description"
+                className="text-sm text-muted-foreground"
+              >
+                {children}
+              </AlertDialogPrimitive.Description>
+            ) : null}
+          </DialogHeader>
+          <DialogFooter>{footer}</DialogFooter>
+        </AlertDialogPrimitive.Popup>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  )
+}
+
+export type { AlertShellProps }
+export { AlertShell }

package/src/components/avatar.tsx

@@ -32,4 +32,4 @@ function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props)
   )
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarFallback, AvatarImage }

package/src/components/badge.tsx

@@ -4,13 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
 
+// Badge: a plain span. The `render` prop replaces Radix's `asChild`.
+
 const badgeVariants = cva(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
         default: "border-transparent bg-primary text-primary-foreground [a]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a]:hover:bg-secondary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a]:hover:bg-secondary/90",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/90",
         outline: "text-foreground [a]:hover:bg-accent [a]:hover:text-accent-foreground",
@@ -19,7 +22,7 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
 )
 
 function Badge({
@@ -30,10 +33,7 @@ function Badge({
 }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
   return useRender({
     defaultTagName: "span",
-    props: mergeProps<"span">(
-      { className: cn(badgeVariants({ variant }), className) },
-      props
-    ),
+    props: mergeProps<"span">({ className: cn(badgeVariants({ variant }), className) }, props),
     render,
     state: { slot: "badge", variant },
   })