@ark-ui/react 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -6,6 +6,21 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [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,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",

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;

package/color-picker/index.d.ts

@@ -1,5 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
+import type { ColorFormat } from '@zag-js/color-picker';
 import { type ColorPickerProps } from './color-picker';
 import { ColorPickerArea, type ColorPickerAreaProps } from './color-picker-area';
 import { ColorPickerAreaBackground, type ColorPickerAreaBackgroundProps } from './color-picker-area-background';
@@ -14,15 +15,18 @@ import { ColorPickerContent, type ColorPickerContentProps } from './color-picker
 import { useColorPickerContext, type ColorPickerContext } from './color-picker-context';
 import { ColorPickerControl, type ColorPickerControlProps } from './color-picker-control';
 import { ColorPickerEyeDropperTrigger, type ColorPickerEyeDropperTriggerProps } from './color-picker-eye-dropper-trigger';
+import { ColorPickerFormatSelect, type ColorPickerFormatSelectProps } from './color-picker-format-select';
+import { ColorPickerFormatTrigger, type ColorPickerFormatTriggerProps } from './color-picker-format-trigger';
 import { ColorPickerLabel, type ColorPickerLabelProps } from './color-picker-label';
 import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-picker-positioner';
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
+import { ColorPickerSwatchIndicator, type ColorPickerSwatchIndicatorProps } from './color-picker-swatch-indicator';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
 import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
 import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
-import { type ColorPickerViewProps } from './color-picker-view';
+import { ColorPickerView, type ColorPickerViewProps } from './color-picker-view';
 declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
@@ -35,15 +39,18 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     Content: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<ColorPickerControlProps & RefAttributes<HTMLDivElement>>;
     EyeDropperTrigger: ForwardRefExoticComponent<ColorPickerEyeDropperTriggerProps & RefAttributes<HTMLButtonElement>>;
+    FormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;
+    FormatSelect: ForwardRefExoticComponent<ColorPickerFormatSelectProps & RefAttributes<HTMLSelectElement>>;
     Label: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;
     Positioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;
     Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
     SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
+    SwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;
     SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
     TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
     ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
     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, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorFormat, ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerFormatSelectProps, ColorPickerFormatTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchIndicatorProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, ColorPickerViewProps, };