@ark-ui/[email protected]

Added

• Toggle: Introduced the Toggle component.
• Dialog: Added support for detecting outside clicks from parent windows when rendered within an iframe.

Fixed

• Resolved a bug where passing a ref to a component occasionally triggered a warning.
• Combobox: Fixed an issue where pressing Enter without selecting an option left text in the input.
• Dialog: Fixed an issue where the dialog closed when the positioner was scrollable, and the scrollbar was clicked.
• File Upload:
  • Fixed an issue where acceptedFiles were removed after an invalid file upload.
  • Fixed an issue in the preview image where createObjectURL was not cleaned up.

@ark-ui/[email protected]

Fixed

• Resolved an issue that ref is not exported from @zag-js/store.

@ark-ui/[email protected]

Fixed

• Corrected an issue where Vue 3.5.x was not properly declared as a peer dependency.

@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.