@ark-ui/react 1.0.0-beta.5 → 1.0.0

package/CHANGELOG.md

@@ -6,6 +6,20 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0] - 2023-11-09
+
+We are happy to announce the release of `@ark-ui/react@1.0.0`. This release includes a number of breaking changes, new features, and bug fixes. Since our last release over two months ago, we will only highlight some key changes. Please refer to the documentation for each component to learn more.
+
+### Highlights
+
+- Revised the `Presence` component: `lazyMount` and `unmountOnExit` have been added at the root level. For some disclosure components like `Tabs` and `Accordion`, this constitutes a breaking change.
+- Breaking changes have been implemented in `Accordion`, `ColorPicker`, `DatePicker`, `Dialog`, `RadioGroup`, `SegmentGroup`, `TagsInput`, `Toast`, and `ToggleGroup` to achieve a consistent and more intuitive API.
+- Resolved various bugs and addressed accessibility issues across all components.
+
+### Stability and Support
+
+With the release of version 1.0.0, we are moving towards a more stable version of `@ark-ui/react`. Future updates will strive to avoid breaking changes, ensuring a smoother experience for our users. If you encounter any issues while upgrading, please do not hesitate to open an issue on our [GitHub repository](https://github.com/chakra-ui/ark/issues). Your feedback is invaluable in helping us improve.
+
 ## [1.0.0-beta.5] - 2023-11-09
 
 - Integrate latest `@zag-js` packages

package/color-picker/color-picker-view.cjs

@@ -4,12 +4,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-require('react');
+const anatomy = require('@ark-ui/anatomy');
+const react = require('react');
+const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerView = (props) => {
+const ColorPickerView = react.forwardRef((props, ref) => {
   const api = colorPickerContext.useColorPickerContext();
-  return api.format === props.format ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }) : null;
-};
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...anatomy.colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
 
 exports.ColorPickerView = ColorPickerView;

package/color-picker/color-picker-view.d.ts

@@ -1,7 +1,8 @@
-import { JSX } from 'react/jsx-runtime';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ColorFormat } from '@zag-js/color-picker';
-import { type PropsWithChildren } from 'react';
-export interface ColorPickerViewProps extends PropsWithChildren {
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerViewProps extends HTMLArkProps<'div'> {
     format: ColorFormat;
 }
-export declare const ColorPickerView: (props: ColorPickerViewProps) => JSX.Element | null;
+export declare const ColorPickerView: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-view.mjs

@@ -1,11 +1,25 @@
 'use client';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import 'react';
+import { jsx } from 'react/jsx-runtime';
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerView = (props) => {
+const ColorPickerView = forwardRef((props, ref) => {
   const api = useColorPickerContext();
-  return api.format === props.format ? /* @__PURE__ */ jsx(Fragment, { children: props.children }) : null;
-};
+  if (api.format !== props.format) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      ref,
+      "data-format": props.format,
+      ...colorPickerAnatomy.build().view.attrs,
+      ...props
+    }
+  );
+});
+ColorPickerView.displayName = "ColorPickerView";
 
 export { ColorPickerView };

package/color-picker/index.d.ts

@@ -1,4 +1,3 @@
-import { JSX } from 'react/jsx-runtime';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type ColorPickerProps } from './color-picker';
@@ -44,7 +43,7 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
-    View: (props: ColorPickerViewProps) => JSX.Element | null;
+    View: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
 };
 export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
 export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -59,9 +59,8 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0-beta.1",
+    "@ark-ui/anatomy": "1.0.0",
     "@zag-js/accordion": "0.28.0",
-    "@zag-js/anatomy": "0.28.0",
     "@zag-js/avatar": "0.28.0",
     "@zag-js/carousel": "0.28.0",
     "@zag-js/checkbox": "0.28.0",

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

@@ -0,0 +1,2 @@
+import { type AnatomyPart } from '@ark-ui/anatomy';
+export declare const parts: Record<'root' | 'label' | 'item' | 'itemText' | 'itemControl' | 'indicator', AnatomyPart>;