@ark-ui/react 0.15.0-beta.0 → 0.15.0

package/CHANGELOG.md

@@ -6,6 +6,23 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.15.0] - 2023-09-14
+
+### Added
+
+- Added `ToggleGroup` component
+- Added `type HTMLArkProps` that can be used together with the `ark` factory fn to create a type that can be used with `asChild` prop.
+
+### Changed
+
+- Revised `Comoobox` component to support multiple selection
+- Revised `Select` component to support multiple selection
+
+### Fixed
+
+- Fix issue where event callbacks that use `flushSync` did not have a stable reference, resulting in a noticable blocking re-renders.
+  > Affected components: `Slider`, `RangeSlider`, `NumberInput`, `ColorPicker`
+
 ## [0.15.0-beta.0] - 2023-09-14
 
 ### Added
@@ -224,7 +241,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.15.0-beta.0...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.15.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
@@ -252,5 +269,6 @@ description: All notable changes to this project will be documented in this file
 [0.13.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.0
 [0.13.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.1
 [0.14.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.14.0
-
 [0.15.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.15.0-beta.0
+
+[0.15.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.15.0

package/index.cjs

@@ -280,6 +280,7 @@ const toastTitle = require('./toast/toast-title.cjs');
 const toast$1 = require('@zag-js/toast');
 const toastItemContext = require('./toast/toast-item-context.cjs');
 const toggle = require('./toggle-group/toggle.cjs');
+const toggleGroup_anatomy = require('./toggle-group/toggle-group.anatomy.cjs');
 const toggleGroupContext = require('./toggle-group/toggle-group-context.cjs');
 const tooltipArrow = require('./tooltip/tooltip-arrow.cjs');
 const tooltipArrowTip = require('./tooltip/tooltip-arrow-tip.cjs');
@@ -637,6 +638,7 @@ Object.defineProperty(exports, 'toastAnatomy', {
 });
 exports.useToastItemContext = toastItemContext.useToastItemContext;
 exports.Toggle = toggle.Toggle;
+exports.toggleGroupAnatomy = toggleGroup_anatomy.toggleGroupAnatomy;
 exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;
 exports.TooltipArrow = tooltipArrow.TooltipArrow;
 exports.TooltipArrowTip = tooltipArrowTip.TooltipArrowTip;

package/index.mjs

@@ -276,6 +276,7 @@ export { ToastTitle } from './toast/toast-title.mjs';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { useToastItemContext } from './toast/toast-item-context.mjs';
 export { Toggle } from './toggle-group/toggle.mjs';
+export { toggleGroupAnatomy } from './toggle-group/toggle-group.anatomy.mjs';
 export { useToggleGroupContext } from './toggle-group/toggle-group-context.mjs';
 export { TooltipArrow } from './tooltip/tooltip-arrow.mjs';
 export { TooltipArrowTip } from './tooltip/tooltip-arrow-tip.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.15.0-beta.0",
+  "version": "0.15.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",

package/toggle-group/index.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const toggle = require('./toggle.cjs');
 const toggleGroup = require('./toggle-group.cjs');
 const toggleGroupContext = require('./toggle-group-context.cjs');
+const toggleGroup_anatomy = require('./toggle-group.anatomy.cjs');
 
 const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
   Root: toggleGroup.ToggleGroup,
@@ -14,4 +15,5 @@ const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
 
 exports.Toggle = toggle.Toggle;
 exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;
+exports.toggleGroupAnatomy = toggleGroup_anatomy.toggleGroupAnatomy;
 exports.ToggleGroup = ToggleGroup;

package/toggle-group/index.d.ts

@@ -5,6 +5,7 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { Toggle, type ToggleProps } from './toggle';
 import { type ToggleGroupProps } from './toggle-group';
 import { useToggleGroupContext, type ToggleGroupContext } from './toggle-group-context';
+import { toggleGroupAnatomy } from './toggle-group.anatomy';
 declare const ToggleGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>>;
     Toggle: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
@@ -15,5 +16,5 @@ declare const ToggleGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, k
         disabled?: boolean | undefined;
     } & RefAttributes<HTMLButtonElement>>;
 };
-export { Toggle, ToggleGroup, useToggleGroupContext };
+export { Toggle, ToggleGroup, toggleGroupAnatomy, useToggleGroupContext };
 export type { ToggleGroupContext, ToggleGroupProps, ToggleProps };

package/toggle-group/index.mjs

@@ -2,6 +2,7 @@
 import { Toggle } from './toggle.mjs';
 import { ToggleGroup as ToggleGroup$1 } from './toggle-group.mjs';
 export { useToggleGroupContext } from './toggle-group-context.mjs';
+export { toggleGroupAnatomy } from './toggle-group.anatomy.mjs';
 
 const ToggleGroup = Object.assign(ToggleGroup$1, {
   Root: ToggleGroup$1,

package/toggle-group/toggle-group.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy = require('@zag-js/anatomy');
+
+const toggleGroupAnatomy = anatomy.createAnatomy("toggle-group").parts("root", "toggle");
+
+exports.toggleGroupAnatomy = toggleGroupAnatomy;

package/toggle-group/toggle-group.anatomy.d.ts

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const toggleGroupAnatomy: AnatomyInstance<"root" | "toggle">;

package/toggle-group/toggle-group.anatomy.mjs

@@ -0,0 +1,6 @@
+'use client';
+import { createAnatomy } from '@zag-js/anatomy';
+
+const toggleGroupAnatomy = createAnatomy("toggle-group").parts("root", "toggle");
+
+export { toggleGroupAnatomy };