@ark-ui/anatomy@3.3.1

Fixed

• Added missing Checkbox.Group part̊.

@ark-ui/anatomy@3.3.0

Added

• Adeed QRCode anatomy.

@ark-ui/vue@3.3.1

Fixed

• Combobox: Exported missing ComboboxList component.

@ark-ui/solid@3.2.2

Fixed

• Combobox: Exported missing ComboboxList component.

@ark-ui/react@3.2.1

Fixed

• Combobox: Exported missing ComboboxList component.

@ark-ui/vue@3.3.0

Added

• All Components: Introduced the Provider component for easier access to internal machine
  APIs, improving component composition. See the example below:

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

const avatar = useAvatar({
  onStatusChange: (e) => console.log('status changed', e),
})
</script>

<template>
  <Avatar.RootProvider :value="avatar">
    <Avatar.Fallback>PA</Avatar.Fallback>
    <Avatar.Image src="https://i.pravatar.cc/3000" alt="avatar" />
  </Avatar.RootProvider>
</template>

@ark-ui/solid@3.2.1

Fixed

• Resolved an issue where the component context could be undefined in some components.

@ark-ui/solid@3.2.0

Added

• All Components: Introduced the Provider component for easier access to internal machine
  APIs, improving component composition. See the example below:

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

export const Example = () => {
  const avatar = useAvatar({
    onStatusChange: (e) => console.log('status changed', e),
  })

  return (
    <Avatar.RootProvider value={avatar}>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.RootProvider>
  )
}

@ark-ui/react@3.2.0

Added

• All Components: Introduced the Provider component for easier access to internal machine
  APIs, improving component composition. See the example below:

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

export const Provider = () => {
  const avatar = useAvatar({
    onStatusChange: (e) => console.log('status changed', e),
  })

  return (
    <Avatar.RootProvider value={avatar}>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.RootProvider>
  )
}

@ark-ui/vue@3.2.0

Added

• Select, Combobox: Added support for generics.

You can now use generics with Select and Combobox components to ensure type safety and improved development experience.

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

interface Pokemon {
  id: string
  name: string
  url: string
}

const items = ref<Pokemon[]>([])
</script>

<template>
  <Combobox.Root 
    :items="items" 
    :item-to-value="(item) => item.id"  
    @highlight-change="e => console.log(e.highlightedItem?.name)"
  />
</template>