docs(website): add architecture diagram

bun.lock

@@ -19,7 +19,7 @@
     },
     "packages/react": {
       "name": "@ark-ui/react",
-      "version": "5.0.0",
+      "version": "5.0.1",
       "dependencies": {
         "@internationalized/date": "3.7.0",
         "@zag-js/accordion": "1.3.3",
@@ -115,7 +115,7 @@
     },
     "packages/solid": {
       "name": "@ark-ui/solid",
-      "version": "5.0.0",
+      "version": "5.1.0",
       "dependencies": {
         "@internationalized/date": "3.7.0",
         "@zag-js/accordion": "1.3.3",
@@ -246,7 +246,7 @@
     },
     "packages/vue": {
       "name": "@ark-ui/vue",
-      "version": "5.0.2",
+      "version": "5.1.0",
       "dependencies": {
         "@internationalized/date": "3.7.0",
         "@zag-js/accordion": "1.3.3",

packages/react/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- Added support for clean up function in `ref`.
+
 ## [5.0.1] - 2025-03-11
 
 ### Fixed

packages/react/src/components/tooltip/examples/basic.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from '@ark-ui/react/tooltip'
 
 export const Basic = () => (
   <Tooltip.Root>
-    <Tooltip.Trigger disabled>Hover Me</Tooltip.Trigger>
+    <Tooltip.Trigger>Hover Me</Tooltip.Trigger>
     <Tooltip.Positioner>
       <Tooltip.Content>I am a tooltip!</Tooltip.Content>
     </Tooltip.Positioner>

packages/react/src/utils/compose-refs.ts

@@ -1,17 +1,28 @@
-type PossibleRef<T> = React.Ref<T | null> | undefined
+import type { Ref } from 'react'
 
-function setRef<T>(ref: PossibleRef<T>, value: T) {
-  if (typeof ref === 'function') {
-    ref(value)
-  } else if (ref !== null && ref !== undefined) {
-    ;(ref as React.MutableRefObject<T>).current = value
-  }
-}
+type PossibleRef<T> = Ref<T | null> | undefined
 
 export function composeRefs<T>(...refs: PossibleRef<T>[]): (node: T | null) => void {
   return (node) => {
+    const cleanUps: VoidFunction[] = []
+
     for (const ref of refs) {
-      setRef(ref, node)
+      if (typeof ref === 'function') {
+        const cb = ref(node)
+        if (typeof cb === 'function') {
+          cleanUps.push(cb)
+        }
+      } else if (ref) {
+        ref.current = node
+      }
+    }
+
+    if (cleanUps.length) {
+      return () => {
+        for (const cleanUp of cleanUps) {
+          cleanUp()
+        }
+      }
     }
   }
 }

website/src/components/theme-image.tsx

@@ -0,0 +1,22 @@
+import Image, { type ImageProps } from 'next/image'
+import { Box } from 'styled-system/jsx'
+
+interface Props extends Omit<ImageProps, 'src' | 'priority' | 'loading'> {
+  srcLight: string
+  srcDark: string
+}
+
+export const ThemeImage = (props: Props) => {
+  const { srcLight, srcDark, ...rest } = props
+
+  return (
+    <>
+      <Box display={{ _light: 'block', _dark: 'none' }}>
+        <Image {...rest} src={srcLight} />
+      </Box>
+      <Box display={{ _light: 'none', _dark: 'block' }}>
+        <Image {...rest} src={srcDark} />
+      </Box>
+    </>
+  )
+}

website/src/content/pages/overview/introduction.mdx

@@ -16,6 +16,16 @@ The goal of Ark UI is to provide a comprehensive selection of components for imp
 accessible UI components across a wide range of JavaScript frameworks. Building a company-wide design system or a
 component library for a client has never been more straightforward.
 
+## Architecture
+
+<ThemeImage
+  srcLight="/static/architecture_light.svg"
+  srcDark="/static/architecture_dark.svg"
+  alt="Shows the highlevel architecture"
+  width="720"
+  height="588"
+/>
+
 ## FAQ
 
 <Faq />

website/src/mdx-content.tsx

@@ -14,6 +14,7 @@ import { Quickstart } from './components/quickstart'
 import { Story } from './components/story'
 
 import { Step, Steps } from '~/components/ui/stepper'
+import { ThemeImage } from './components/theme-image'
 
 const sharedComponents = {
   a: Link,
@@ -31,6 +32,7 @@ const sharedComponents = {
   Step,
   Steps,
   Story,
+  ThemeImage,
 }
 
 const useMDXComponent = (code: string) => {