Component State

import { Avatar } from '@ark-ui/react/avatar'

export const Context = () => (
  <Avatar.Root>
    <Avatar.Context>{(avatar) => <Avatar.Fallback>{avatar.loaded ? 'PA' : 'Loading'}</Avatar.Fallback>}</Avatar.Context>
    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
  </Avatar.Root>
)

import { Avatar } from '@ark-ui/solid/avatar'

export const Context = () => (
  <Avatar.Root>
    <Avatar.Context>
      {(avatar) => <Avatar.Fallback>{avatar().loaded ? 'PA' : 'Loading'}</Avatar.Fallback>}
    </Avatar.Context>
    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
  </Avatar.Root>
)

<script setup lang="ts">
import { Avatar } from '@ark-ui/vue/avatar'
</script>

<template>
  <Avatar.Root>
    <Avatar.Context v-slot="avatar">
      <Avatar.Fallback>
        {{ avatar.loaded ? 'PA' : 'Loading' }}
      </Avatar.Fallback>
    </Avatar.Context>
    <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
  </Avatar.Root>
</template>

import { Accordion, useAccordion } from '@ark-ui/react/accordion'
import { ChevronDownIcon } from 'lucide-react'
import { useState } from 'react'

export const RootProvider = () => {
  const [value, setValue] = useState(['React'])
  const accordion = useAccordion({
    multiple: true,
    value,
    onValueChange: (e) => setValue(e.value),
  })

  return (
    <>
      <button onClick={() => accordion.setValue(['Vue'])}>Set to Vue</button>

      <Accordion.RootProvider value={accordion}>
        {['React', 'Solid', 'Vue'].map((item) => (
          <Accordion.Item key={item} value={item}>
            <Accordion.ItemTrigger>
              What is {item}?
              <Accordion.ItemIndicator>
                <ChevronDownIcon />
              </Accordion.ItemIndicator>
            </Accordion.ItemTrigger>
            <Accordion.ItemContent>{item} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
          </Accordion.Item>
        ))}
      </Accordion.RootProvider>
    </>
  )
}

import { Accordion, type UseAccordionProps, useAccordion } from '@ark-ui/solid/accordion'
import { ChevronDownIcon } from 'lucide-solid'
import { Index, createMemo, createSignal } from 'solid-js'

export const RootProvider = () => {
  const [value, setValue] = createSignal(['React'])
  const accordionProps = createMemo<UseAccordionProps>(() => ({
    multiple: true,
    value: value(),
    onValueChange: (e) => setValue(e.value),
  }))
  const accordion = useAccordion(accordionProps)

  return (
    <>
      <button onClick={() => accordion().setValue(['Vue'])}>Set to Vue</button>

      <Accordion.RootProvider value={accordion}>
        <Index each={['React', 'Solid', 'Vue']}>
          {(item) => (
            <Accordion.Item value={item()}>
              <Accordion.ItemTrigger>
                What is {item()}?
                <Accordion.ItemIndicator>
                  <ChevronDownIcon />
                </Accordion.ItemIndicator>
              </Accordion.ItemTrigger>
              <Accordion.ItemContent>
                {item()} is a JavaScript library for building user interfaces.
              </Accordion.ItemContent>
            </Accordion.Item>
          )}
        </Index>
      </Accordion.RootProvider>
    </>
  )
}

<script setup lang="ts">
import { Accordion, type UseAccordionProps, useAccordion } from '@ark-ui/vue/accordion'
import { ChevronRightIcon } from 'lucide-vue-next'
import { computed, ref } from 'vue'

const items = ref(['React', 'Solid', 'Vue'])
const value = ref(['React'])

const accordionProps = computed<UseAccordionProps>(() => ({
  multiple: true,
  value: value.value,
  // biome-ignore lint/suspicious/noAssignInExpressions: <explanation>
  onValueChange: (e) => (value.value = e.value),
}))

const accordion = useAccordion(accordionProps)
</script>

<template>
  <button @click="accordion.setValue(['Vue'])">Set to Vue</button>

  <Accordion.RootProvider :value="accordion">
    <Accordion.Item v-for="item in items" :key="item" :value="item">
      <Accordion.ItemTrigger>
        What is {{ item }}?
        <Accordion.ItemIndicator>
          <ChevronRightIcon />
        </Accordion.ItemIndicator>
      </Accordion.ItemTrigger>
      <Accordion.ItemContent>{{ item }} is a JavaScript library for building user interfaces.</Accordion.ItemContent>
    </Accordion.Item>
  </Accordion.RootProvider>
</template>