@ark-ui/[email protected]

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering advanced
methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

• Ark UI Vue now required Vue 3.5.x or later, as it leveraged the useId() helper introduced in this version.

• ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
  the exported parseColor function to convert between strings and color objects.

  Before

  import { ColorPicker } from '@ark-ui/react/color-picker'
  
  const Demo = () => {
    return <ColorPicker.Root defaultValue="#000" />
  }

  After

  import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
  
  const Demo = () => {
    return <ColorPicker.Root defaultValue={parseColor('#000')} />
  }

  This change allows direct access to color object methods and properties.

• Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
  Introduced a collection prop instead. Use the createListCollection helper to generate a
  collection from items.

  Before

  import { Select } from '@ark-ui/react/select'
  
  const Demo = () => {
    return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
  }

  After

  import { Select, createListCollection } from '@ark-ui/react/select'
  
  const collection = createListCollection({
    items: ['Option 1', 'Option 2', 'Option 3'],
  })
  
  const Demo = () => {
    return <Select.Root collection={collection} />
  }

• DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
  convert between strings and dates, use the parseDate function.

  Before

  import { DatePicker } from '@ark-ui/react/date-picker'
  
  const Demo = () => {
    return <DatePicker.Root defaultValue="2024-01-01" />
  }

  After

  import { DatePicker, parseDate } from '@ark-ui/react/date-picker'
  
  const Demo = () => {
    return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
  }