@ark-ui/vue@3.0.0

Highlights

We are excited to announce the first major release of Ark UI Vue! Ark UI Vue is now feature-complete
and ready for production use.

To maintain consistency across our suite, we have aligned the versioning of all Ark UI packages.
Therefore, the next release of Ark UI Vue will be v3.

This update introduces several new components, enhancements, and bug fixes. Here are some of the
highlights:

Added

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

<template>
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context v-slot="popover">
        <Popover.Content>
          <Popover.Title @click="popover.setOpen(false)">Title</Popover.Title>
          <Popover.Description>Description</Popover.Description>
        </Popover.Content>
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
</template>

• Format: Added a Format component for formatting bytes and numbers.

<Format.Byte :value="120904" unit="byte" unit-display="short" />
<Format.Number :value="1204" unit="centimeter" />

• Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
• Types: Exported Assign and Optional types to enhance type handling.
• Toast: Added support for overlapping and stacked toast.

Changed

• [BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
  RatingGroup, Select, Switch, and TagsInput for better form library compatibility. Please
  ensure to include the hidden input in your component as shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> <!-- [!code highlight] -->
</Checkbox.Root>

• [BREAKING] Combobox, Select: Made id optional and removed htmlFor from ItemGroupLabel
  for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel htmlFor="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

• [BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
  dialog machine.
• [BREAKING] Environment: Renamed Environment to EnvironmentProvider to align with other
  providers.

Fixed

• DatePicker: Resolved issues with min and max props not supporting date strings.
• Accordion: Fixed initial flicker of content.
• TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.

Removed

• [BREAKING]: Dropped direct internal API access from Root components. Use the new Context
  component for more flexible and cleaner API integration.
• [BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
  LocaleProvider and
  EnvironmentProvider for these settings.

@ark-ui/solid@3.0.0

Highlights

The 3.0 release brings significant enhancements and some breaking changes for a more streamlined and
flexible API. Key updates include new components and types, improved form integration, and enhanced
forward compatibility. Here are some highlights:

Added

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

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover().setOpen(false)}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
)

• Format: Added a Format component for formatting bytes and numbers.

<Format.Byte value={120904} unit="byte" unitDisplay="short" />
<Format.Number value={1204} unit="centimeter" />

• Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
• Types: Exported Assign and Optional types to enhance type handling.
• Toast: Added support for overlapping and stacked toast.

Changed

• [BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
  RatingGroup, Select, Switch, and TagsInput for better form library compatibility. Please
  ensure to include the hidden input in your component like shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> // [!code highlight]
</Checkbox.Root>

• [BREAKING]: Made id optional and removed for from ItemGroupLabel in Combobox and
  Select for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel for="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

• [BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
  dialog machine.
• [BREAKING]: Renamed Environment to EnvironmentProvider to align with other providers.
• Refined the as prop implementation for improved type merging and performance.

// before
<Button as={Dialog.Trigger} variant="solid" size="sm">
  Open Dialog
</Button>

// after
<Dialog.Trigger asChild={(props) => <Button {...props()} />}>
  Open Dialog
</Dialog.Trigger>

Fixed

• DatePicker: Resolved issues with min and max props not supporting date strings.
• Accordion: Fixed initial flicker of content.
• TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.
• Select, Combobox: Fixed an issue with reactivity.
• Toast: Resolved an issue with Toast not updating its toasts and count properties when
  creating one or more toasts.
• ColorPicker: Added missing HTMLArkProps<'div'> to ColorPicker.View.

Removed

• [BREAKING]: Dropped direct internal API access from Root components. Use the new Context
  component for more flexible and cleaner API integration.
• [BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
  LocaleProvider and
  EnvironmentProvider for these settings.

@ark-ui/react@3.0.0

Highlights

The 3.0 release brings significant enhancements and some breaking changes for a more streamlined and
flexible API. Key updates include new components and types, improved form integration, and forward
compatibility with React 19. Here are some of the highlights:

Added

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

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover.setOpen(false)}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
)

• Format: Added a Format component for formatting bytes and numbers.

<Format.Byte value={120904} unit="byte" unitDisplay="short" />
<Format.Number value={1204} unit="centimeter" />

• Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
• Types: Exported Assign and Optional types to enhance type handling.
• Toast: Added support for overlapping and stacked toast.

Changed

• [BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
  RatingGroup, Select, Switch, and TagsInput for better form library compatibility. Please
  ensure to include the hidden input in your component like shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> // [!code highlight]
</Checkbox.Root>

• [BREAKING] Combobox, Select: Made id optional and removed htmlFor from ItemGroupLabel
  for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel htmlFor="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

• [BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
  dialog machine.
• [BREAKING] Environment: Renamed Environment to EnvironmentProvider to align with other
  providers.
• React 19: Improved the ark factory's forward compatibility with React 19 by supporting ref
  as a normal prop.

Fixed

• DatePicker: Resolved issues with min and max props not supporting date strings.
• Accordion: Fixed initial flicker of content.
• TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.

Removed

• [BREAKING]: Dropped direct internal API access from Root components. Use the new Context
  component for more flexible and cleaner API integration.
• [BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
  LocaleProvider and
  EnvironmentProvider for these settings.

@ark-ui/anatomy@3.1.0

Added

• Added Signature Pad anatomy

@ark-ui/vue@1.0.0-0

Added

• Added a Context component to allow access to the internal machine API. Previously, it was only possible to access the internal API at the root level, which is manageable for small components but could lead to cumbersome composition in larger components. Additionally, this pattern clashed with the asChild composition pattern we use.

<template>
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context v-slot="popover">
          <Popover.Content>
            <Popover.Title @click="() => popover.close()">Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
</template>

• Added Format and Collapsible component
• Add an optional index prop to the DatePicker.Input to support multiple inputs.
• Add the DatePicker.PresetTrigger component
• Improve a controlled state in ColorPicker, DatePicker, Dialog, HoverCard, Menu, Popover, Select, and Tooltip components
• Added defaultOpen to Tooltip

Changed

• Changed TreeView.BranchTrigger from button to div for the accessibility reasons.

Fixed

• Prevent calling interaction outside when scrollbar is clicked.
• Fix issue where positioned components don't respond to window resizing.
• Fix issue where restoring scroll causes a smooth scroll transition back to the initial scroll point.
• Fix issue in Combobox, Menu, and Select where scrolling into view could result in scrolling the body element.
• Fix issue where DatePicker does not show correct number of weeks when startOfWeek is set
• Fix issue in the Editable where cannot delete text when maxLength reached
• Fix issue in the Select where item group's label id pointed to the wrong element
• Fix issue where Select uses the incorrect id for aria-activedecesendant field
• Resolved an issue in DatePicker where the min and max props did not support date string values
• Fix issue where close animation doesn't work for components that use the presence component.

Removed

• Removed the unused parse prop from the DatePicker component.

@ark-ui/solid@3.0.0-1

Fixed

• Resolved an issue where the dist folder was not being published to npm.

@ark-ui/solid@3.0.0-0

Added

• Exposed component-related types to keep imports clean and orderly.

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

export const Example = () => {
  // New: Use `Avatar` import to declare types.
  const handleLoadingStatusChange = (details: Avatar.StatusChangeDetails) => {
    console.log(details.status);
  };

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

• Added a Context component to allow access to the internal machine API. Previously, it was only possible to access the internal API at the root level, which is manageable for small components but could lead to cumbersome composition in larger components. Additionally, this pattern clashed with the asChild composition pattern we use.

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover().close()}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
);

• Added new Format component to format bytes and numbers.

Fixed

• Resolved an issue with Toast not updating its toasts and count properties when creating one or more toasts.
• Resolved an issue in DatePicker where the min and max props did not support date string values.

Changed

• Refined the current as prop implementation. The previous approach had several issues, mostly related to the merging of multiple types (e.g., ButtonProps + DialogTriggerProps + HTMLButtonElement), which resulted in a sluggish and, in some cases, malfunctioning implementation.

// before
<Button as={Dialog.Trigger} variant="solid" size="sm">
  Open Dialog
</Button>

// after
<Dialog.Trigger asChild>
  {(props) => (
    <Button
      {...props({ onClick: () => console.log('merge events') })}
      variant="solid"
      size="md"
    >
      Open Dialog
    </Button>
  )}
</Dialog.Trigger>

Removed

• BREAKING: Removed the option to access the internal API from various Root components. Use the new Context component instead. This change will help in streamlining the asChild composition pattern.
• Removed the unused parse prop from the DatePicker component.

@ark-ui/react@3.0.0-0

Added

• Exposed component-related types to keep imports clean and orderly.

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

export const Example = () => {
  // New: Use `Avatar` import to declare types.
  const handleLoadingStatusChange = (details: Avatar.StatusChangeDetails) => {
    console.log(details.status);
  };

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

• Added a Context component to allow access to the internal machine API. Previously, it was only possible to access the internal API at the root level, which is manageable for small components but could lead to cumbersome composition in larger components. Additionally, this pattern clashed with the asChild composition pattern we use.

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(api) => (
          <Popover.Content>
            <Popover.Title onClick={() => api.close()}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
);

• Added new Format component to format bytes and numbers.
• Added defaultOpen to Tooltip

Changed

• Changed the Menu component. Please refer to the documentation for more information.

Fixed

• Resolved an issue in DatePicker where the min and max props did not support date string values.

Removed

• BREAKING: Removed the option to access the internal API from various Root components. Use the new Context component instead. This change will help in streamlining the asChild composition pattern.
• Removed the unused parse prop from the DatePicker component.

@ark-ui/anatomy@3.0.0

Added

• Added Tour anatomy

@ark-ui/react@2.2.3

Fixed

• Resolved an issue with using Locale in Next.js projects.
• Resolved an issue with Toast not updating its toasts and count properties when creating one or more toasts.