@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')} />
  }

@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

• 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/solid'
  
  const Demo = () => {
    return <ColorPicker.Root defaultValue="#000" />
  }

  After

  import { ColorPicker, parseColor } from '@ark-ui/solid'
  
  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/solid'
  
  const Demo = () => {
    return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
  }

  After

  import { Select, createListCollection } from '@ark-ui/solid'
  
  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/solid'
  
  const Demo = () => {
    return <DatePicker.Root defaultValue="2024-01-01" />
  }

  After

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

@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

• 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')} />
  }

@ark-ui/[email protected]

Fixed

• FileUpload: Fix issue where directory: true doesn't work

Changed

• Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
  button when it is interacted with the keyboard.

• Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

• FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/[email protected]

Fixed

• FileUpload: Fix issue where directory: true doesn't work

Changed

• Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
  button when it is interacted with the keyboard.

• Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

• FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/[email protected]

Fixed

• FileUpload: Fix issue where directory: true doesn't work

Changed

• Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
  button when it is interacted with the keyboard.

• Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

• FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/[email protected]

Fixed

• Field: Fix issue where using v-model in Field.Input, Field.Select, and Field.Textarea
  doesn't work.

• Frame: Fixed issue where package requires [email protected] due to usage of onWatcherCleanup.

• DatePicker

  • Fixed issue where the year select dropdown doesn't respect min and max props.
  • Fixed issue where date picker throws when min or max is changed.
  • Fixed issue where typing in date picker input doesn't work.

@ark-ui/[email protected]

Fixed

• DatePicker

  • Fixed issue where the year select dropdown doesn't respect min and max props.
  • Fixed issue where date picker throws when min or max is changed.

@ark-ui/[email protected]

Fixed

• DatePicker

  • Fixed issue where the year select dropdown doesn't respect min and max props.
  • Fixed issue where date picker throws when min or max is changed.

@ark-ui/[email protected]

Added

• Frame (Preview): Introduced the Frame component for rendering content within an iframe.
• Timer (Preview): Added Area and Control parts to improve structure and anatomy.

Fixed

• Combobox: Resolved an issue where the highlighted item remained persistent when the list of items was empty.