@ark-ui/react 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -6,6 +6,40 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.2.0] - 2023-12-13
+
+### Added
+
+- Added the `ToastGroup` component.
+- Added entrypoint for the  `ark` factory at `@ark-ui/react/factory`
+
+### Changed
+
+- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information.
+
+### Fixed
+
+- Added an explicit return type for the `Portal` component to resolve an issue with online code editors.
+- Resolved an issue where the `present` prop in the disclosure-type component was not being respected.
+- Resolved an issue where the `ark` function would log a warning when the `asChild` prop was set to `false`.
+- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`.
+- Fixed an issue with hydration mismatch in the `Portal` component.
+
+## [1.1.0] - 2023-11-21
+
+### Added
+
+- Added render function to the `NumberInput` component
+- Added `FileUpload` component
+
+### Changed
+
+- Revised the `ColorPicker` component. Check out the [documentation](https://ark-ui.com/docs/components/color-picker) for more information.
+
+### Fixed
+
+- Resolved an issue where the `Toast` component would throw a warning when multiple toasts were rendered at the same time.
+
 ## [1.0.1] - 2023-11-10
 
 ### Fixed

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,31 +61,34 @@ 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 { Slider, type SliderProps } from '@ark-ui/react'
 import { useState } from 'react'
 
-export const MySlider = () => {
-  const [value, setValue] = useState(30)
+export const MySlider = (props: SliderProps) => {
+  const [value, setValue] = useState([42])
 
   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>
+    <Slider.Root
+      min={0}
+      max={100}
+      value={value}
+      onValueChange={(e) => setValue(e.value)}
+      {...props}
+    >
+      <Slider.Label>Label</Slider.Label>
+      <Slider.ValueText />
+      <Slider.Control>
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb key={0} 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>
   )
 }
 ```
@@ -95,10 +97,14 @@ export const MySlider = () => {
 
 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",
@@ -41,7 +43,7 @@ const ColorPicker = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useColorPicker.useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(colorPickerContext.ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsxs(presenceContext.PresenceProvider, { value: presenceApi, children: [

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",
@@ -37,7 +39,7 @@ const ColorPicker = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useColorPicker(useColorPickerProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(ColorPickerProvider, { value: api, children: /* @__PURE__ */ jsxs(PresenceProvider, { value: presenceApi, children: [

package/color-picker/index.cjs

@@ -17,10 +17,13 @@ const colorPickerContent = require('./color-picker-content.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 const colorPickerControl = require('./color-picker-control.cjs');
 const colorPickerEyeDropperTrigger = require('./color-picker-eye-dropper-trigger.cjs');
+const colorPickerFormatSelect = require('./color-picker-format-select.cjs');
+const colorPickerFormatTrigger = require('./color-picker-format-trigger.cjs');
 const colorPickerLabel = require('./color-picker-label.cjs');
 const colorPickerPositioner = require('./color-picker-positioner.cjs');
 const colorPickerSwatch = require('./color-picker-swatch.cjs');
 const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
+const colorPickerSwatchIndicator = require('./color-picker-swatch-indicator.cjs');
 const colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
@@ -39,10 +42,13 @@ const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Content: colorPickerContent.ColorPickerContent,
   Control: colorPickerControl.ColorPickerControl,
   EyeDropperTrigger: colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger,
+  FormatTrigger: colorPickerFormatTrigger.ColorPickerFormatTrigger,
+  FormatSelect: colorPickerFormatSelect.ColorPickerFormatSelect,
   Label: colorPickerLabel.ColorPickerLabel,
   Positioner: colorPickerPositioner.ColorPickerPositioner,
   Swatch: colorPickerSwatch.ColorPickerSwatch,
   SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
+  SwatchIndicator: colorPickerSwatchIndicator.ColorPickerSwatchIndicator,
   SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
   TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
   Trigger: colorPickerTrigger.ColorPickerTrigger,
@@ -63,12 +69,16 @@ exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;
 exports.ColorPickerControl = colorPickerControl.ColorPickerControl;
 exports.ColorPickerEyeDropperTrigger = colorPickerEyeDropperTrigger.ColorPickerEyeDropperTrigger;
+exports.ColorPickerFormatSelect = colorPickerFormatSelect.ColorPickerFormatSelect;
+exports.ColorPickerFormatTrigger = colorPickerFormatTrigger.ColorPickerFormatTrigger;
 exports.ColorPickerLabel = colorPickerLabel.ColorPickerLabel;
 exports.ColorPickerPositioner = colorPickerPositioner.ColorPickerPositioner;
 exports.ColorPickerSwatch = colorPickerSwatch.ColorPickerSwatch;
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
+exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatchIndicator;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
 exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
+exports.ColorPickerView = colorPickerView.ColorPickerView;
 exports.ColorPicker = ColorPicker;