feat(website): document how to write closed components

packages/react/src/components/avatar/examples/closed.tsx

@@ -0,0 +1,26 @@
+import { UserIcon } from 'lucide-react'
+import { forwardRef } from 'react'
+import { Avatar as ArkAvatar } from '../'
+
+export interface AvatarProps extends ArkAvatar.RootProps {
+  name?: string
+  src?: string
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
+  const { name, src, ...rootProps } = props
+  return (
+    <ArkAvatar.Root ref={ref} {...rootProps}>
+      <ArkAvatar.Fallback>{getInitials(name) || <UserIcon />}</ArkAvatar.Fallback>
+      <ArkAvatar.Image src={src} alt={name} />
+    </ArkAvatar.Root>
+  )
+})
+
+const getInitials = (name = '') =>
+  name
+    .split(' ')
+    .map((part) => part[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()

packages/solid/src/components/avatar/examples/closed.tsx

@@ -0,0 +1,31 @@
+import { UserIcon } from 'lucide-solid'
+import { Show, splitProps } from 'solid-js'
+import { Avatar as ArkAvatar } from '../..'
+
+export interface AvatarProps extends ArkAvatar.RootProps {
+  name?: string
+  src?: string
+}
+
+export const Avatar = (props: AvatarProps) => {
+  const [localProps, rootProps] = splitProps(props, ['name', 'src'])
+
+  return (
+    <ArkAvatar.Root {...rootProps}>
+      <ArkAvatar.Fallback>
+        <Show when={localProps.name} fallback={<UserIcon />}>
+          {getInitials(localProps.name)}
+        </Show>
+      </ArkAvatar.Fallback>
+      <ArkAvatar.Image src={localProps.src} alt={localProps.name} />
+    </ArkAvatar.Root>
+  )
+}
+
+const getInitials = (name = '') =>
+  name
+    .split(' ')
+    .map((part) => part[0])
+    .splice(0, 2)
+    .join('')
+    .toUpperCase()

packages/vue/src/components/avatar/examples/closed.vue

@@ -1,7 +1,7 @@
+
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Avatar, type AvatarRootEmits, type AvatarRootProps } from '../'
-import { useForwardPropsEmits } from '../../../utils'
+import { Avatar, type AvatarRootEmits, type AvatarRootProps, useForwardPropsEmits } from '../../..'
 
 export interface AvatarProps extends AvatarRootProps {
   src?: string
@@ -12,19 +12,20 @@ const props = defineProps<AvatarProps>()
 const emits = defineEmits<AvatarRootEmits>()
 
 const forwarded = useForwardPropsEmits(props, emits)
+
 const getInitials = computed(() =>
   props.name
     .split(' ')
     .map((part) => part[0])
-    .splice(0, 2)
+    .slice(0, 2)
     .join('')
     .toUpperCase(),
 )
 </script>
 
 <template>
-  <Avatar.Root class="root" v-bind="forwarded">
-    <Avatar.Fallback class="fallback">{{ getInitials }}</Avatar.Fallback>
-    <Avatar.Image :src="props.src" :alt="props.name" class="image" />
+  <Avatar.Root v-bind="forwarded">
+    <Avatar.Fallback>{{ getInitials }}</Avatar.Fallback>
+    <Avatar.Image :src="props.src" :alt="props.name" />
   </Avatar.Root>
 </template>

website/src/content/pages/guides/closed-components.mdx

@@ -0,0 +1,26 @@
+---
+id: closed-components
+title: Closed Components
+description: Learn how to create reusable components using the example of an avatar
+---
+
+## Motivation
+
+Writing a few lines of code every time you need a simple `Avatar` is tedious.
+Creating a dedicated component encapsulates logic, simplifies the API, ensures consistent usage, and maintains clean code.
+This approach enhances reusability, making the component easier to maintain and test.
+
+Here's an example of an `Avatar` component that can be used consistently across your application:
+
+<Example id="closed" component="avatar" />
+
+## Usage
+
+To use the `Avatar` component, pass the `name` and `src` props as shown below:
+
+```jsx
+<Avatar
+  name="Christian"
+  src="https://avatars.githubusercontent.com/u/1846056?v=4" 
+/>
+```