livemark 0.23.0 → 0.24.1

package/source/components/CodeBlock.tsx

@@ -1,10 +1,6 @@
 import { Check, ChevronDown, Clipboard, WrapText } from "lucide-react"
 import { useRef, useState } from "react"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../elements/tooltip.tsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../elements/tooltip.tsx"
 
 export function CodeBlock(props: React.ComponentProps<"pre">) {
   const [copied, setCopied] = useState(false)
@@ -17,9 +13,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
   const maxLines = meta?.match(/maxLines=(\d+)/)?.[1]
   const icon = extra.icon as string | undefined
   const style = props.style as Record<string, string> | undefined
-  const collapsedHeight = maxLines
-    ? `${Number(maxLines) * 1.5 + 1.75}rem`
-    : undefined
+  const collapsedHeight = maxLines ? `${Number(maxLines) * 1.5 + 1.75}rem` : undefined
 
   const handleCopy = () => {
     const text = preRef.current?.textContent ?? ""
@@ -54,9 +48,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
-            <TooltipContent>
-              {wrap ? "Disable wrap" : "Enable wrap"}
-            </TooltipContent>
+            <TooltipContent>{wrap ? "Disable wrap" : "Enable wrap"}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger
@@ -83,9 +75,7 @@ export function CodeBlock(props: React.ComponentProps<"pre">) {
             >
               <WrapText className="size-3.5" />
             </TooltipTrigger>
-            <TooltipContent>
-              {wrap ? "Disable wrap" : "Enable wrap"}
-            </TooltipContent>
+            <TooltipContent>{wrap ? "Disable wrap" : "Enable wrap"}</TooltipContent>
           </Tooltip>
           <Tooltip>
             <TooltipTrigger

package/source/components/CodeTabs.tsx

@@ -37,9 +37,7 @@ export function CodeTabs(props: {
   useEffect(() => {
     if (!props.sync) return
     const handler = (e: Event) => {
-      const { sync, title } = (
-        e as CustomEvent<{ sync: string; title: string }>
-      ).detail
+      const { sync, title } = (e as CustomEvent<{ sync: string; title: string }>).detail
       if (sync !== props.sync) return
       const idx = names.indexOf(title)
       if (idx >= 0) setActive(idx)

package/source/components/Columns.tsx

@@ -1,9 +1,7 @@
 /** Grid layout for arranging content side by side */
 export function Columns(props: { cols?: string; children: React.ReactNode }) {
   const cols = props.cols ? parseInt(props.cols, 10) : undefined
-  const style = cols
-    ? { gridTemplateColumns: `repeat(${cols}, 1fr)` }
-    : undefined
+  const style = cols ? { gridTemplateColumns: `repeat(${cols}, 1fr)` } : undefined
   return (
     <div className="grid gap-6 my-4 sm:grid-cols-2" style={style}>
       {props.children}

package/source/components/Content.tsx

@@ -1,7 +1,3 @@
 export function Content(props: { children: React.ReactNode }) {
-  return (
-    <div className="w-full max-w-7xl mx-auto px-4 md:px-10">
-      {props.children}
-    </div>
-  )
+  return <div className="w-full max-w-7xl mx-auto px-4 md:px-10">{props.children}</div>
 }

package/source/components/ContentTab.tsx

@@ -1,7 +1,4 @@
 /** Simple wrapper that provides a title prop for ContentTabs to read */
-export function ContentTab(props: {
-  title: string
-  children: React.ReactNode
-}) {
+export function ContentTab(props: { title: string; children: React.ReactNode }) {
   return <div>{props.children}</div>
 }

package/source/components/ContentTabs.tsx

@@ -1,10 +1,7 @@
 import { Children, isValidElement, useEffect, useState } from "react"
 
 /** Tabbed container component for grouping content tabs with optional sync across groups */
-export function ContentTabs(props: {
-  sync?: string
-  children: React.ReactNode
-}) {
+export function ContentTabs(props: { sync?: string; children: React.ReactNode }) {
   const children = Children.toArray(props.children)
   const titles = children.map(child =>
     isValidElement<{ title: string }>(child) ? child.props.title : "",
@@ -38,9 +35,7 @@ export function ContentTabs(props: {
   useEffect(() => {
     if (!props.sync) return
     const handler = (e: Event) => {
-      const { sync, title } = (
-        e as CustomEvent<{ sync: string; title: string }>
-      ).detail
+      const { sync, title } = (e as CustomEvent<{ sync: string; title: string }>).detail
       if (sync !== props.sync) return
       const idx = titles.indexOf(title)
       if (idx >= 0) setActive(idx)
@@ -70,9 +65,7 @@ export function ContentTabs(props: {
       {children.map((child, i) => (
         <div
           key={titles[i]}
-          className={
-            i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"
-          }
+          className={i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"}
         >
           {child}
         </div>

package/source/components/DefinitionList.tsx

@@ -13,9 +13,6 @@ export function DefinitionTerm(props: ComponentProps<"dt">) {
 /** Styled definition detail with a left border accent */
 export function DefinitionDetail(props: ComponentProps<"dd">) {
   return (
-    <dd
-      {...props}
-      className="ml-0 pl-4 border-l-2 border-border text-muted-foreground"
-    />
+    <dd {...props} className="ml-0 pl-4 border-l-2 border-border text-muted-foreground" />
   )
 }

package/source/components/FileTree.tsx

@@ -21,11 +21,7 @@ function TreeItems(props: { items: TreeItem[]; depth: number }) {
   return (
     <ul className={props.depth > 0 ? "ml-4 border-l border-border pl-2" : ""}>
       {props.items.map((item, index) => (
-        <TreeNode
-          key={`${item.name}-${index}`}
-          item={item}
-          depth={props.depth}
-        />
+        <TreeNode key={`${item.name}-${index}`} item={item} depth={props.depth} />
       ))}
     </ul>
   )

package/source/components/FootnoteRef.tsx

@@ -1,9 +1,5 @@
 import { type ComponentProps, useEffect, useState } from "react"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../elements/hover-card.tsx"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "../elements/hover-card.tsx"
 
 const FOOTNOTE_PREFIX = "#user-content-fn-"
 

package/source/components/InlineToc.tsx

@@ -13,10 +13,7 @@ export function InlineToc(props: { maxLevel?: string }) {
       <p className="text-base font-semibold mb-4">Table of Contents</p>
       <ul className="text-base space-y-2.5">
         {items.map(item => (
-          <li
-            key={item.url}
-            style={{ paddingLeft: `${(item.depth - 2) * 1.25}rem` }}
-          >
+          <li key={item.url} style={{ paddingLeft: `${(item.depth - 2) * 1.25}rem` }}>
             <a
               href={item.url}
               className="text-muted-foreground hover:text-primary transition-colors"

package/source/components/Layout.tsx

@@ -26,10 +26,7 @@ function splatFor(pathname: string) {
   return { _splat: pathname.replace(/^\/|\/$/g, "") }
 }
 
-export function Layout(props: {
-  withSidebar?: boolean
-  children?: React.ReactNode
-}) {
+export function Layout(props: { withSidebar?: boolean; children?: React.ReactNode }) {
   const pathname = useLocation({ select: l => l.pathname })
   const articleRoute = useMatch({ from: "/$", shouldThrow: false })
   const activeSection = articleRoute
@@ -56,10 +53,7 @@ export function Layout(props: {
             <div className="hidden lg:flex">
               <SidebarTrigger />
             </div>
-            <SiteLink
-              to={siteLinkTarget}
-              className="lg:hidden flex items-center gap-2"
-            >
+            <SiteLink to={siteLinkTarget} className="lg:hidden flex items-center gap-2">
               <SiteTitle />
             </SiteLink>
           </>
@@ -100,8 +94,7 @@ export function Layout(props: {
               const latestVersion =
                 section.type === "changelog" && section.version
                   ? sortedArticles.find(
-                      a =>
-                        a.path === sectionFlatArticles.get(section.prefix)?.[0],
+                      a => a.path === sectionFlatArticles.get(section.prefix)?.[0],
                     )?.title
                   : undefined
               return (

package/source/components/LinkButton.tsx

@@ -1,17 +1,11 @@
 import { buttonVariants } from "../elements/button.tsx"
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 
 /** Styled link button rendered from ::button leaf directives */
 export function LinkButton(props: {
   href: string
   label: string
-  variant?:
-    | "default"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "destructive"
-    | "link"
+  variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link"
   size?: "default" | "sm" | "lg"
 }) {
   return (

package/source/components/Mermaid.tsx

@@ -7,9 +7,7 @@ export function Mermaid(props: { children: string }) {
   return (
     <Suspense
       fallback={
-        <div className="not-prose mermaid flex justify-center">
-          Loading diagram…
-        </div>
+        <div className="not-prose mermaid flex justify-center">Loading diagram…</div>
       }
     >
       <MermaidRenderer>{props.children}</MermaidRenderer>

package/source/components/PackageTabs.tsx

@@ -55,11 +55,7 @@ export function PackageTabs(props: PackageTabsProps) {
           className="me-2 p-1 rounded-md text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Copy code"
         >
-          {copied ? (
-            <Check className="size-3.5" />
-          ) : (
-            <Clipboard className="size-3.5" />
-          )}
+          {copied ? <Check className="size-3.5" /> : <Clipboard className="size-3.5" />}
         </button>
       </div>
       <div className="text-[0.8125rem] py-3.5 overflow-auto max-h-[600px]">

package/source/components/PageToolbar.tsx

@@ -59,11 +59,7 @@ export function PageToolbar(props: {
           </span>
         )}
         <button type="button" onClick={handleCopy} className={buttonClass}>
-          {copied ? (
-            <Check className="size-3.5" />
-          ) : (
-            <Copy className="size-3.5" />
-          )}
+          {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
           Copy Markdown
         </button>
         <button

package/source/components/PrevNext.tsx

@@ -18,12 +18,8 @@ export function PrevNext(props: { path: string }) {
 
   const prevPath = index > 0 ? flat[index - 1] : undefined
   const nextPath = index < flat.length - 1 ? flat[index + 1] : undefined
-  const prev = prevPath
-    ? sortedArticles.find(a => a.path === prevPath)
-    : undefined
-  const next = nextPath
-    ? sortedArticles.find(a => a.path === nextPath)
-    : undefined
+  const prev = prevPath ? sortedArticles.find(a => a.path === prevPath) : undefined
+  const next = nextPath ? sortedArticles.find(a => a.path === nextPath) : undefined
 
   if (!prev && !next) return null
 

package/source/components/SearchDialog.tsx

@@ -80,9 +80,7 @@ export function SearchDialog(props: {
       })
       setResults(
         hits.hits.map(hit => {
-          const article = sortedArticles.find(
-            a => a.title === hit.document.title,
-          )
+          const article = sortedArticles.find(a => a.title === hit.document.title)
           if (!article)
             return toResult(
               {
@@ -161,9 +159,7 @@ export function SearchDialog(props: {
                     <Icon className="size-5 shrink-0 mt-0.5 self-start opacity-60" />
                   )}
                   <div className="flex flex-col gap-0.5 min-w-0">
-                    <span className="text-base font-medium">
-                      {result.title}
-                    </span>
+                    <span className="text-base font-medium">{result.title}</span>
                     {result.snippet && (
                       <span className="text-sm text-muted-foreground line-clamp-1">
                         <HighlightedText text={result.snippet} term={query} />

package/source/components/Section.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 import { useInView } from "../hooks/in-view.ts"
 
 export function Section(props: {

package/source/components/SectionHeader.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 
 export function SectionHeader(props: {
   label?: string
@@ -10,13 +10,7 @@ export function SectionHeader(props: {
   const align = props.align ?? "center"
 
   return (
-    <div
-      className={cn(
-        align === "center" && "text-center",
-        "mb-12",
-        props.className,
-      )}
-    >
+    <div className={cn(align === "center" && "text-center", "mb-12", props.className)}>
       {props.label && (
         <p className="text-primary text-xs uppercase tracking-[0.2em] font-medium mb-3">
           {props.label}

package/source/components/Sidebar.tsx

@@ -44,10 +44,7 @@ export function Sidebar(props: { withSidebar?: boolean }) {
       <SidebarHeader>
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton
-              size="lg"
-              render={<SiteLink to={siteLinkTarget} />}
-            >
+            <SidebarMenuButton size="lg" render={<SiteLink to={siteLinkTarget} />}>
               <SiteTitle />
             </SidebarMenuButton>
           </SidebarMenuItem>
@@ -56,9 +53,7 @@ export function Sidebar(props: { withSidebar?: boolean }) {
       <SidebarContent>
         <SidebarSections />
         {props.withSidebar && section?.type === "blog" && <SidebarPosts />}
-        {props.withSidebar && section?.type === "changelog" && (
-          <SidebarReleases />
-        )}
+        {props.withSidebar && section?.type === "changelog" && <SidebarReleases />}
         {props.withSidebar &&
           section?.type !== "blog" &&
           section?.type !== "changelog" && <SidebarArticles />}

package/source/components/SidebarArticles.tsx

@@ -1,11 +1,7 @@
 import { config } from "livemark:virtual"
 import { Link, useLocation } from "@tanstack/react-router"
 import { ChevronRight } from "lucide-react"
-import {
-  articleTree,
-  currentSection,
-  sectionArticleTrees,
-} from "../content/article.ts"
+import { articleTree, currentSection, sectionArticleTrees } from "../content/article.ts"
 import {
   Collapsible,
   CollapsibleContent,
@@ -61,11 +57,7 @@ function isActive(articlePathname: string, currentPath: string) {
   return articlePathname === normalized
 }
 
-function NavNode(props: {
-  node: ArticleNode
-  currentPath: string
-  depth?: number
-}) {
+function NavNode(props: { node: ArticleNode; currentPath: string; depth?: number }) {
   const { node, currentPath, depth = 0 } = props
   const Icon = resolveArticleIcon(node.icon)
   const active = isActive(node.path, currentPath)
@@ -79,11 +71,7 @@ function NavNode(props: {
   if (node.children.length === 0) {
     return (
       <Item>
-        <Button
-          isActive={active}
-          className={active ? "" : "opacity-75"}
-          render={link}
-        >
+        <Button isActive={active} className={active ? "" : "opacity-75"} render={link}>
           {!isSub && Icon && <Icon className="size-4" />}
           {label}
         </Button>
@@ -94,11 +82,7 @@ function NavNode(props: {
   return (
     <Item>
       <Collapsible defaultOpen className="group/collapsible">
-        <Button
-          isActive={active}
-          className={active ? "" : "opacity-75"}
-          render={link}
-        >
+        <Button isActive={active} className={active ? "" : "opacity-75"} render={link}>
           {!isSub && Icon && <Icon className="size-4" />}
           {label}
         </Button>

package/source/components/SidebarLinks.tsx

@@ -19,9 +19,7 @@ export function SidebarLinks() {
   const pathname = useLocation({ select: l => l.pathname })
   const section = currentSection(`/${pathname.replace(/^\/|\/$/g, "")}/`)
   const links =
-    config.links?.filter(
-      link => !link.prefix || link.prefix === section?.prefix,
-    ) ?? []
+    config.links?.filter(link => !link.prefix || link.prefix === section?.prefix) ?? []
 
   if (!links.length) return null
   const hasDesktopItems = links.some(l => l.position === "sidebar")
@@ -44,9 +42,7 @@ export function SidebarLinks() {
                   className="text-muted-foreground"
                   render={<a href={prefixUrl(link.url, config.base)} />}
                 >
-                  {link.icon && (
-                    <DynamicIcon name={link.icon} className="size-4" />
-                  )}
+                  {link.icon && <DynamicIcon name={link.icon} className="size-4" />}
                   <span>{link.title}</span>
                 </SidebarMenuButton>
               </SidebarMenuItem>

package/source/components/TagIndex.tsx

@@ -30,9 +30,7 @@ export function TagIndex(props: { sectionPrefix: string; tag: string }) {
       const parts = [`## ${post.title}`]
       if (post.date) parts.push(formatDate(post.date))
       if (post.author) {
-        parts.push(
-          Array.isArray(post.author) ? post.author.join(", ") : post.author,
-        )
+        parts.push(Array.isArray(post.author) ? post.author.join(", ") : post.author)
       }
       if (post.description) parts.push("", post.description)
       return parts.join("\n")
@@ -76,16 +74,12 @@ export function TagIndex(props: { sectionPrefix: string; tag: string }) {
                   {post.date && <span>{formatDate(post.date)}</span>}
                   {post.author && (
                     <span>
-                      {Array.isArray(post.author)
-                        ? post.author.join(", ")
-                        : post.author}
+                      {Array.isArray(post.author) ? post.author.join(", ") : post.author}
                     </span>
                   )}
                 </p>
                 {post.description && (
-                  <p className="text-muted-foreground mt-2">
-                    {post.description}
-                  </p>
+                  <p className="text-muted-foreground mt-2">{post.description}</p>
                 )}
               </article>
             ))}

package/source/components/Toc.tsx

@@ -63,10 +63,7 @@ export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
   const title = active?.title ?? props.items[0]?.title ?? "Contents"
 
   return (
-    <div
-      ref={wrapperRef}
-      className="xl:hidden sticky top-16 z-20 border-b bg-background"
-    >
+    <div ref={wrapperRef} className="xl:hidden sticky top-16 z-20 border-b bg-background">
       <button
         type="button"
         onClick={() => setOpen(v => !v)}
@@ -91,9 +88,7 @@ export function MobileToc(props: { items: TocItem[]; children?: ReactNode }) {
                     <li key={item.url}>
                       <a
                         href={item.url}
-                        data-active={
-                          activeId === item.url.slice(1) || undefined
-                        }
+                        data-active={activeId === item.url.slice(1) || undefined}
                         onClick={() => setOpen(false)}
                         className={`-ms-px block border-l border-transparent py-1.5 text-muted-foreground transition-colors hover:text-foreground data-[active]:border-primary data-[active]:font-medium data-[active]:text-primary ${item.depth <= 2 ? "ps-3" : item.depth === 3 ? "ps-6" : "ps-8"}`}
                       >

package/source/content/article.ts

@@ -54,8 +54,7 @@ if (routedSections.length) {
     const sorted =
       section?.type === "blog" || section?.type === "changelog"
         ? [...bucket].sort(
-            (a, b) =>
-              new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
+            (a, b) => new Date(b.date ?? 0).getTime() - new Date(a.date ?? 0).getTime(),
           )
         : bucket
     const tree = buildArticleTree(sorted)

package/source/content-collections.ts

@@ -53,18 +53,16 @@ import { extractToc } from "./helpers/toc.ts"
 
 const config = await loadConfig()
 
-const changelogSections =
-  config.sections?.filter(s => s.type === "changelog") ?? []
+const changelogSections = config.sections?.filter(s => s.type === "changelog") ?? []
 for (const section of changelogSections) {
   await buildChangelog(section, config)
 }
 
-const configInclude = Array.isArray(config.include)
-  ? config.include
-  : [config.include]
-const include = changelogSections.length
-  ? [...configInclude, cacheIncludeGlob(config)]
-  : configInclude
+const configInclude = Array.isArray(config.include) ? config.include : [config.include]
+const include = [
+  ...configInclude,
+  ...changelogSections.map(section => cacheIncludeGlob(section, config)),
+]
 
 const userExclude = config.exclude
   ? Array.isArray(config.exclude)

package/source/elements/accordion.tsx

@@ -1,7 +1,7 @@
 import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 
 function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
   return (

package/source/elements/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
 
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 import { Button } from "./button.tsx"
 
 function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
@@ -9,15 +9,11 @@ function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
 }
 
 function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 }
 
 function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 }
 
 function AlertDialogOverlay({
@@ -59,10 +55,7 @@ function AlertDialogContent({
   )
 }
 
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
@@ -75,10 +68,7 @@ function AlertDialogHeader({
   )
 }
 
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
@@ -91,10 +81,7 @@ function AlertDialogFooter({
   )
 }
 
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-media"
@@ -139,17 +126,8 @@ function AlertDialogDescription({
   )
 }
 
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />
 }
 
 function AlertDialogCancel({

package/source/elements/alert.tsx

@@ -1,5 +1,5 @@
 import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 
 const alertVariants = cva(
   "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
@@ -45,10 +45,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   )
 }
 
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"

package/source/elements/aspect-ratio.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../utils/style.ts"
+import { cn } from "cn"
 
 function AspectRatio({
   ratio,