@ark-ui/react 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -6,82 +6,44 @@ 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
-
-## [1.0.0-beta.4] - 2023-10-31
-
-### Fixed
-
-- Resolved an accessibility issue with `Select`
-
-## [1.0.0-beta.3] - 2023-10-26
+## [1.1.0] - 2023-11-21
 
 ### Added
 
-- Added support to lazy mount the `DatePicker` and `ColorPicker` components using the `Presence` component
+- Added render function to the `NumberInput` component
+- Added `FileUpload` component
 
 ### Changed
 
-- Improved accessibility of all disclosure components when lazy mounting is enabled.
-
-## [1.0.0-beta.2] - 2023-10-25
-
-### Added
-
-- Added `ValueText` to the `ColorPicker` component
+- Revised the `ColorPicker` component. Check out the [documentation](https://ark-ui.com/docs/components/color-picker) for more information.
 
 ### Fixed
 
-- Added missing data attributes to `DatePickerView` component
-
-## [1.0.0-beta.1] - 2023-10-20
-
-### Added
+- Resolved an issue where the `Toast` component would throw a warning when multiple toasts were rendered at the same time.
 
-- Parsed `focusedValue` in `DatePicker`
+## [1.0.1] - 2023-11-10
 
 ### Fixed
 
-- Resolved an issue with `@ark-ui/anatomy`
-
-## [1.0.0-beta.0] - 2023-10-20
+- Resolved an issue where the `Dialog` component would not animate on exit.
+- Resolved various issues for `Menu` when lazy mounted.
+- Resolved an issue where `MenuTrigger` could still work even when disabled.
+- Resolved an issue where components like `Dialog`, `Popover` etc would not invoke `onExitComplete`
+- Fixed an issue where placement of the `Combobox` could be incorrect when lazy mounted.
 
-### Changed
-
-- Add memoization to `Select` and `Combobox` item collection to improve performance.
-- Ensure all event callbacks have a stable reference
+## [1.0.0] - 2023-11-09
 
-### Fixed
+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.
 
-- Resolved an issue when controlling the `Editable` component.
+### Highlights
 
-### Removed
+- 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.
 
-- Removed anatomy exports. These exports are now available in `@ark-ui/anatomy`.
+### Stability and Support
 
-```tsx
-// before
-import { accordionAnatomy } from '@ark-ui/react'
-// after
-import { accordionAnatomy } from '@ark-ui/anatomy' // or
-import { anatomy } from '@ark-ui/anatomy/accordion'
-```
+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.
 
 ## [0.15.0] - 2023-09-14
 

package/README.md

@@ -1,47 +1,46 @@
-# @ark-ui/react
+# Welcome to Ark UI
 
-`@ark-ui/react` is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience.
+Ark UI is a headless, open-source UI library with over 30+ components designed for building reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering dedciated packages for each supported framework.
 
-## Key Features
+## Supported Frameworks
 
-- **Accessible**: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation.
-- **Headless**: Components are shipped without styles, giving developers full control over styling.
-- **Customizable**: The open component architecture allows for customization and customization, providing granular access to each component part.
-- **Powered by state machines**: Predictable, simplified, and robust component behavior.
-- **Developer Experience**: The library provides a fully-typed API with a consistent and predictable experience.
+Ark UI is available for the following JavaScript frameworks:
+
+- **React**: `@ark-ui/react`
+- **Solid**: `@ark-ui/solid`
+- **Vue**: `@ark-ui/vue`
 
 ## Available Components
 
-At the moment, `@ark-ui/react`offers the following components:
-
-- [Accordion](https://ark-ui.com/docs/react/components/accordion)
-- [Avatar](https://ark-ui.com/docs/react/components/avatar)
-- [Carousel](https://ark-ui.com/docs/react/components/carousel)
-- [Checkbox](https://ark-ui.com/docs/react/components/checkbox)
-- [Color Picker](https://ark-ui.com/docs/react/components/color-picker)
-- [Combobox](https://ark-ui.com/docs/react/components/combobox)
-- [Date Picker](https://ark-ui.com/docs/react/components/date-picker)
-- [Dialog](https://ark-ui.com/docs/react/components/dialog)
-- [Editable](https://ark-ui.com/docs/react/components/editable)
-- [Hover Card](https://ark-ui.com/docs/react/components/hover-card)
-- [Menu](https://ark-ui.com/docs/react/components/menu)
-- [Number Input](https://ark-ui.com/docs/react/components/number-input)
-- [Pagination](https://ark-ui.com/docs/react/components/pagination)
-- [Pin Input](https://ark-ui.com/docs/react/components/pin-input)
-- [Popover](https://ark-ui.com/docs/react/components/popover)
-- [Pressable](https://ark-ui.com/docs/react/components/pressable)
-- [Radio Group](https://ark-ui.com/docs/react/components/radio-group)
-- [Range Slider](https://ark-ui.com/docs/react/components/range-slider)
-- [Rating Group](https://ark-ui.com/docs/react/components/rating-group)
-- [Segment Group](https://ark-ui.com/docs/react/components/segment-group)
-- [Select](https://ark-ui.com/docs/react/components/select)
-- [Slider](https://ark-ui.com/docs/react/components/slider)
-- [Splitter](https://ark-ui.com/docs/react/components/splitter)
-- [Switch](https://ark-ui.com/docs/react/components/switch)
-- [Tabs](https://ark-ui.com/docs/react/components/tabs)
-- [Tags Input](https://ark-ui.com/docs/react/components/tags-input)
-- [Toast](https://ark-ui.com/docs/react/components/toast)
-- [Tooltip](https://ark-ui.com/docs/react/components/tooltip)
+- [Accordion](https://ark-ui.com/docs/components/accordion)
+- [Avatar](https://ark-ui.com/docs/components/avatar)
+- [Carousel](https://ark-ui.com/docs/components/carousel)
+- [Checkbox](https://ark-ui.com/docs/components/checkbox)
+- [Color Picker](https://ark-ui.com/docs/components/color-picker)
+- [Combobox](https://ark-ui.com/docs/components/combobox)
+- [Date Picker](https://ark-ui.com/docs/components/date-picker)
+- [Dialog](https://ark-ui.com/docs/components/dialog)
+- [Editable](https://ark-ui.com/docs/components/editable)
+- [File Upload](https://ark-ui.com/docs/components/file-upload)
+- [Hover Card](https://ark-ui.com/docs/components/hover-card)
+- [Menu](https://ark-ui.com/docs/components/menu)
+- [Number Input](https://ark-ui.com/docs/components/number-input)
+- [Pagination](https://ark-ui.com/docs/components/pagination)
+- [Pin Input](https://ark-ui.com/docs/components/pin-input)
+- [Popover](https://ark-ui.com/docs/components/popover)
+- [Radio Group](https://ark-ui.com/docs/components/radio-group)
+- [Range Slider](https://ark-ui.com/docs/components/slider)
+- [Rating Group](https://ark-ui.com/docs/components/rating-group)
+- [Segment Group](https://ark-ui.com/docs/components/segment-group)
+- [Select](https://ark-ui.com/docs/components/select)
+- [Slider](https://ark-ui.com/docs/components/slider)
+- [Splitter](https://ark-ui.com/docs/components/splitter)
+- [Switch](https://ark-ui.com/docs/components/switch)
+- [Tabs](https://ark-ui.com/docs/components/tabs)
+- [Tags Input](https://ark-ui.com/docs/components/tags-input)
+- [Toast](https://ark-ui.com/docs/components/toast)
+- [Toggle Group](https://ark-ui.com/docs/components/toggle-group)
+- [Tooltip](https://ark-ui.com/docs/components/tooltip)
 
 ## Installation
 
@@ -62,43 +61,37 @@ yarn add @ark-ui/react
 To use a component from `@ark-ui/react`, import it and include it in your application:
 
 ```tsx
-import {
-  Slider,
-  SliderControl,
-  SliderLabel,
-  SliderOutput,
-  SliderRange,
-  SliderThumb,
-  SliderTrack,
-} from '@ark-ui/react'
-import { useState } from 'react'
-
-export const MySlider = () => {
-  const [value, setValue] = useState(30)
-
-  return (
-    <Slider min={-50} max={50} value={value} onChange={(e) => setValue(e.value)}>
-      <SliderLabel>Label</SliderLabel>
-      <SliderOutput>{value}</SliderOutput>
-      <SliderControl>
-        <SliderTrack>
-          <SliderRange />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderControl>
-    </Slider>
-  )
-}
+import { Slider, type SliderProps } from '@ark-ui/react'
+
+export const MySlider = (props: SliderProps) => (
+  <Slider.Root min={0} max={100} defaultValue={[33]} {...props}>
+    <Slider.Control>
+      <Slider.Track>
+        <Slider.Range />
+      </Slider.Track>
+      <Slider.Thumb index={0} />
+    </Slider.Control>
+    <Slider.MarkerGroup>
+      <Slider.Marker value={25}>25</Slider.Marker>
+      <Slider.Marker value={50}>50</Slider.Marker>
+      <Slider.Marker value={75}>75</Slider.Marker>
+    </Slider.MarkerGroup>
+  </Slider.Root>
+)
 ```
 
 ## Documentation
 
 For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
 
+## Roadmap
+
+You can request, vote for, and check upcoming features on our [roadmap](https://ark-ui.canny.io/).
+
 ## Contribution
 
-We welcome contributions to `@ark-ui/react`. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
+We welcome contributions to Ark UI. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
 
-## Licence
+## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/accordion/accordion.stories.d.ts

@@ -5,7 +5,6 @@ type AccordionType = typeof Accordion;
 declare const meta: Meta<AccordionType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Initial: () => JSX.Element;
 export declare const RenderProp: () => JSX.Element;
 export declare const Collapsible: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;

package/color-picker/color-picker-format-select.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerFormatSelect = react.forwardRef(
+  (props, ref) => {
+    const api = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(api.formatSelectProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref, children: ["rgba", "hsla", "hsba"].map((format) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.option, { value: format, children: format }, format)) });
+  }
+);
+ColorPickerFormatSelect.displayName = "ColorPickerFormatSelect";
+
+exports.ColorPickerFormatSelect = ColorPickerFormatSelect;

package/color-picker/color-picker-format-select.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerFormatSelectProps extends HTMLArkProps<'select'> {
+}
+export declare const ColorPickerFormatSelect: ForwardRefExoticComponent<ColorPickerFormatSelectProps & RefAttributes<HTMLSelectElement>>;

package/color-picker/color-picker-format-select.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerFormatSelect = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    const mergedProps = mergeProps(api.formatSelectProps, props);
+    return /* @__PURE__ */ jsx(ark.select, { ...mergedProps, ref, children: ["rgba", "hsla", "hsba"].map((format) => /* @__PURE__ */ jsx(ark.option, { value: format, children: format }, format)) });
+  }
+);
+ColorPickerFormatSelect.displayName = "ColorPickerFormatSelect";
+
+export { ColorPickerFormatSelect };

package/color-picker/color-picker-format-trigger.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerFormatTrigger = react.forwardRef((props, ref) => {
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = react$1.mergeProps(api.formatTriggerProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";
+
+exports.ColorPickerFormatTrigger = ColorPickerFormatTrigger;

package/color-picker/color-picker-format-trigger.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerFormatTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ColorPickerFormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;

package/color-picker/color-picker-format-trigger.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerFormatTrigger = forwardRef((props, ref) => {
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(api.formatTriggerProps, props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+ColorPickerFormatTrigger.displayName = "ColorPickerFormatTrigger";
+
+export { ColorPickerFormatTrigger };

package/color-picker/color-picker-swatch-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext.createContext({
+  name: "ColorPickerSwatchContext",
+  hookName: "useColorPickerSwatchContext",
+  providerName: "<ColorPickerSwatchProvider />"
+});
+
+exports.ColorPickerSwatchProvider = ColorPickerSwatchProvider;
+exports.useColorPickerSwatchContext = useColorPickerSwatchContext;

package/color-picker/color-picker-swatch-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { SwatchProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchContext extends SwatchProps {
+}
+export declare const ColorPickerSwatchProvider: Provider<ColorPickerSwatchContext>, useColorPickerSwatchContext: () => ColorPickerSwatchContext;

package/color-picker/color-picker-swatch-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [ColorPickerSwatchProvider, useColorPickerSwatchContext] = createContext({
+  name: "ColorPickerSwatchContext",
+  hookName: "useColorPickerSwatchContext",
+  providerName: "<ColorPickerSwatchProvider />"
+});
+
+export { ColorPickerSwatchProvider, useColorPickerSwatchContext };

package/color-picker/color-picker-swatch-indicator.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
+
+const ColorPickerSwatchIndicator = react.forwardRef((props, ref) => {
+  const api = colorPickerContext.useColorPickerContext();
+  const swatchProps = colorPickerSwatchContext.useColorPickerSwatchContext();
+  const mergedProps = react$1.mergeProps(api.getSwatchIndicatorProps(swatchProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ColorPickerSwatchIndicator.displayName = "ColorPickerSwatchIndicator";
+
+exports.ColorPickerSwatchIndicator = ColorPickerSwatchIndicator;

package/color-picker/color-picker-swatch-indicator.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerSwatchIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const ColorPickerSwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-swatch-indicator.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+import { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
+
+const ColorPickerSwatchIndicator = forwardRef((props, ref) => {
+  const api = useColorPickerContext();
+  const swatchProps = useColorPickerSwatchContext();
+  const mergedProps = mergeProps(api.getSwatchIndicatorProps(swatchProps), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ColorPickerSwatchIndicator.displayName = "ColorPickerSwatchIndicator";
+
+export { ColorPickerSwatchIndicator };

package/color-picker/color-picker-swatch-trigger.cjs

@@ -11,7 +11,10 @@ const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
 const ColorPickerSwatchTrigger = react.forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [triggerProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "value",
+    "disabled"
+  ]);
   const api = colorPickerContext.useColorPickerContext();
   const mergedProps = react$1.mergeProps(api.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });

package/color-picker/color-picker-swatch-trigger.d.ts

@@ -1,12 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import type { Color } from '@zag-js/color-picker';
+import type { SwatchTriggerProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-interface SwatchTriggerProps {
-    value: string | Color;
-}
 export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, SwatchTriggerProps> {
 }
 export declare const ColorPickerSwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
-export {};

package/color-picker/color-picker-swatch-trigger.mjs

@@ -7,7 +7,10 @@ import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerSwatchTrigger = forwardRef((props, ref) => {
-  const [triggerProps, localProps] = createSplitProps()(props, ["value"]);
+  const [triggerProps, localProps] = createSplitProps()(props, [
+    "value",
+    "disabled"
+  ]);
   const api = useColorPickerContext();
   const mergedProps = mergeProps(api.getSwatchTriggerProps(triggerProps), localProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });

package/color-picker/color-picker-swatch.cjs

@@ -9,16 +9,17 @@ const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
+const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
 const ColorPickerSwatch = react.forwardRef(
   (props, ref) => {
-    const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, [
+    const [swatwchProps, localProps] = createSplitProps.createSplitProps()(props, [
       "respectAlpha",
       "value"
     ]);
     const api = colorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(api.getSwatchProps(colorSwatchProps), localProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+    const mergedProps = react$1.mergeProps(api.getSwatchProps(swatwchProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(colorPickerSwatchContext.ColorPickerSwatchProvider, { value: swatwchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
   }
 );
 ColorPickerSwatch.displayName = "ColorPickerSwatch";

package/color-picker/color-picker-swatch.mjs

@@ -5,16 +5,17 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
+import { ColorPickerSwatchProvider } from './color-picker-swatch-context.mjs';
 
 const ColorPickerSwatch = forwardRef(
   (props, ref) => {
-    const [colorSwatchProps, localProps] = createSplitProps()(props, [
+    const [swatwchProps, localProps] = createSplitProps()(props, [
       "respectAlpha",
       "value"
     ]);
     const api = useColorPickerContext();
-    const mergedProps = mergeProps(api.getSwatchProps(colorSwatchProps), localProps);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+    const mergedProps = mergeProps(api.getSwatchProps(swatwchProps), localProps);
+    return /* @__PURE__ */ jsx(ColorPickerSwatchProvider, { value: swatwchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
   }
 );
 ColorPickerSwatch.displayName = "ColorPickerSwatch";

package/color-picker/color-picker-transparency-grid.d.ts

@@ -1,11 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { TransparencyGridProps } from '@zag-js/color-picker';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-interface TransparancyGridProps {
-    size: string;
-}
-export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparencyGridProps> {
 }
 export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
-export {};

package/color-picker/color-picker.cjs

@@ -19,10 +19,11 @@ const presenceContext = require('../presence/presence-context.cjs');
 const ColorPicker = react.forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps.splitPresenceProps(props);
   const [useColorPickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(colorPickerProps, [
-    "autoFocus",
+    "closeOnSelect",
     "defaultValue",
     "dir",
     "disabled",
+    "format",
     "getRootNode",
     "id",
     "ids",
@@ -30,6 +31,7 @@ const ColorPicker = react.forwardRef((props, ref) => {
     "name",
     "name",
     "onFocusOutside",
+    "onFormatChange",
     "onInteractOutside",
     "onOpenChange",
     "onPointerDownOutside",

package/color-picker/color-picker.mjs

@@ -15,10 +15,11 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const ColorPicker = forwardRef((props, ref) => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
   const [useColorPickerProps, { children, ...localProps }] = createSplitProps()(colorPickerProps, [
-    "autoFocus",
+    "closeOnSelect",
     "defaultValue",
     "dir",
     "disabled",
+    "format",
     "getRootNode",
     "id",
     "ids",
@@ -26,6 +27,7 @@ const ColorPicker = forwardRef((props, ref) => {
     "name",
     "name",
     "onFocusOutside",
+    "onFormatChange",
     "onInteractOutside",
     "onOpenChange",
     "onPointerDownOutside",