@ark-ui/react 0.10.0-beta.1 → 0.11.0-beta.0

package/CHANGELOG.md

@@ -6,17 +6,27 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
-## [0.10.0-beta.1] - 2023-07-29
+## [0.11.0-beta.0] - 2023-08-07
 
-### Changed
+### Added
 
-- Simplified forwardRef setup
+- Added `ComboboxOptionGroup` and `ComboboxClearTrigger` components to the `Combobox` component.
+- Added `DatePickerPositioner` component to the `DatePicker` component to help with positioning the calendar.
+- Added `ComboboxOptionGroupLabel` to the `Combobox` component. This component can be used to render a label for a group of options in the `ComboboxOptionGroup` component.
 
-## [0.10.0-beta.0] - 2023-07-29
+### Removed
 
-### Changed
+- BREAKING: Removed `CheckboxInput`. This component is no longer required.
+
+## [0.10.0] - 2023-08-02
 
+### Added
+
+- Developers can now set default options for all `Toast` components in their application, ensuring a consistent look and feel across the board.
 - Updated number input `onChange` handler to allow synchronous updates to the value when using the scrubber.
+
+### Changed
+
 - Improved TypeScript typings in our factory functions. The changes allow for more accurate type inference for the `ref` property when dealing with both intrinsic HTML elements and custom React components.
 
 ## [0.9.0] - 2023-07-21
@@ -146,7 +156,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.10.0-beta.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.11.0-beta.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
@@ -160,6 +170,6 @@ description: All notable changes to this project will be documented in this file
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.0
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.1
 [0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.9.0
-[0.10.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0-beta.0
+[0.10.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0
 
-[0.10.0-beta.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0-beta.1
+[0.11.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.11.0-beta.0

package/carousel/carousel-next-slide-trigger.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const carouselContext = require('./carousel-context.cjs');
 
 const CarouselNextSlideTrigger = react.forwardRef((props, ref) => {
-  const { nextTriggerProps } = carouselContext.useCarouselContext();
-  const mergedProps = react$1.mergeProps(nextTriggerProps, props);
+  const { nextSlideTriggerProps } = carouselContext.useCarouselContext();
+  const mergedProps = react$1.mergeProps(nextSlideTriggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 CarouselNextSlideTrigger.displayName = "CarouselNextSlideTrigger";

package/carousel/carousel-next-slide-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselNextSlideTrigger = forwardRef((props, ref) => {
-  const { nextTriggerProps } = useCarouselContext();
-  const mergedProps = mergeProps(nextTriggerProps, props);
+  const { nextSlideTriggerProps } = useCarouselContext();
+  const mergedProps = mergeProps(nextSlideTriggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 CarouselNextSlideTrigger.displayName = "CarouselNextSlideTrigger";

package/carousel/carousel-prev-slide-trigger.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const carouselContext = require('./carousel-context.cjs');
 
 const CarouselPrevSlideTrigger = react.forwardRef((props, ref) => {
-  const { prevTriggerProps } = carouselContext.useCarouselContext();
-  const mergedProps = react$1.mergeProps(prevTriggerProps, props);
+  const { prevSlideTriggerProps } = carouselContext.useCarouselContext();
+  const mergedProps = react$1.mergeProps(prevSlideTriggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 CarouselPrevSlideTrigger.displayName = "CarouselPrevSlideTrigger";

package/carousel/carousel-prev-slide-trigger.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselPrevSlideTrigger = forwardRef((props, ref) => {
-  const { prevTriggerProps } = useCarouselContext();
-  const mergedProps = mergeProps(prevTriggerProps, props);
+  const { prevSlideTriggerProps } = useCarouselContext();
+  const mergedProps = mergeProps(prevSlideTriggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 CarouselPrevSlideTrigger.displayName = "CarouselPrevSlideTrigger";

package/carousel/carousel.anatomy.d.ts

@@ -1,3 +1,3 @@
 import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "slideGroup" | "slide" | "previousTrigger" | "nextTrigger" | "indicatorGroup" | "indicator" | "control">;
-export declare const parts: Record<"root" | "viewport" | "slideGroup" | "slide" | "previousTrigger" | "nextTrigger" | "indicatorGroup" | "indicator" | "control", AnatomyPart>;
+export declare const carouselAnatomy: AnatomyInstance<"root" | "viewport" | "slideGroup" | "slide" | "nextSlideTrigger" | "prevSlideTrigger" | "indicatorGroup" | "indicator" | "control">;
+export declare const parts: Record<"root" | "viewport" | "slideGroup" | "slide" | "nextSlideTrigger" | "prevSlideTrigger" | "indicatorGroup" | "indicator" | "control", AnatomyPart>;

package/checkbox/checkbox-control.cjs

@@ -10,9 +10,12 @@ const factory = require('../factory.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
 const CheckboxControl = react.forwardRef((props, ref) => {
-  const { controlProps } = checkboxContext.useCheckboxContext();
+  const { controlProps, hiddenInputProps } = checkboxContext.useCheckboxContext();
   const mergedProps = react$1.mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
+  ] });
 });
 CheckboxControl.displayName = "CheckboxControl";
 

package/checkbox/checkbox-control.mjs

@@ -1,14 +1,17 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxControl = forwardRef((props, ref) => {
-  const { controlProps } = useCheckboxContext();
+  const { controlProps, hiddenInputProps } = useCheckboxContext();
   const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
+  ] });
 });
 CheckboxControl.displayName = "CheckboxControl";
 

package/checkbox/index.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const checkbox = require('./checkbox.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
-const checkboxInput = require('./checkbox-input.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
 const checkbox$1 = require('@zag-js/checkbox');
 
@@ -14,7 +13,6 @@ const checkbox$1 = require('@zag-js/checkbox');
 exports.Checkbox = checkbox.Checkbox;
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
-exports.CheckboxInput = checkboxInput.CheckboxInput;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
 Object.defineProperty(exports, 'checkboxAnatomy', {
 	enumerable: true,

package/checkbox/index.d.ts

@@ -2,6 +2,5 @@ export type { CheckedState } from '@zag-js/checkbox';
 export { Checkbox, type CheckboxProps } from './checkbox';
 export { useCheckboxContext } from './checkbox-context';
 export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
-export { CheckboxInput, type CheckboxInputProps } from './checkbox-input';
 export { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
 export { checkboxAnatomy } from './checkbox.anatomy';

package/checkbox/index.mjs

@@ -1,6 +1,5 @@
 export { Checkbox } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
 export { CheckboxControl } from './checkbox-control.mjs';
-export { CheckboxInput } from './checkbox-input.mjs';
 export { CheckboxLabel } from './checkbox-label.mjs';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';

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

@@ -1,3 +1,3 @@
 import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup">;
-export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "eyeDropTrigger" | "swatchGroup", AnatomyPart>;
+export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup">;
+export declare const parts: Record<"area" | "label" | "content" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "eyeDropperTrigger" | "swatchGroup", AnatomyPart>;

package/combobox/combobox-clear-trigger.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 comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxClearTrigger = react.forwardRef(
+  (props, ref) => {
+    const { clearTriggerProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(clearTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
+
+exports.ComboboxClearTrigger = ComboboxClearTrigger;

package/combobox/combobox-clear-trigger.d.ts

@@ -0,0 +1,8 @@
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ComboboxClearTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const ComboboxClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/combobox/combobox-clear-trigger.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 { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxClearTrigger = forwardRef(
+  (props, ref) => {
+    const { clearTriggerProps } = useComboboxContext();
+    const mergedProps = mergeProps(clearTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+ComboboxClearTrigger.displayName = "ComboboxClearTrigger";
+
+export { ComboboxClearTrigger };

package/combobox/combobox-option-group-label.cjs

@@ -0,0 +1,23 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroupLabel = react.forwardRef(
+  (props, ref) => {
+    const [optionProps, labelProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
+    const { getOptionGroupLabelProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+
+exports.ComboboxOptionGroupLabel = ComboboxOptionGroupLabel;

package/combobox/combobox-option-group-label.d.ts

@@ -0,0 +1,10 @@
+import type { OptionGroupLabelProps } from '@zag-js/combobox';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+import { type Assign } from '../types';
+export type ComboboxOptionGroupLabelProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, OptionGroupLabelProps>;
+export declare const ComboboxOptionGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "htmlFor"> & OptionGroupLabelProps & RefAttributes<HTMLLabelElement>>;

package/combobox/combobox-option-group-label.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroupLabel = forwardRef(
+  (props, ref) => {
+    const [optionProps, labelProps] = createSplitProps()(props, ["htmlFor"]);
+    const { getOptionGroupLabelProps } = useComboboxContext();
+    const mergedProps = mergeProps(getOptionGroupLabelProps(optionProps), labelProps);
+    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroupLabel.displayName = "ComboboxOptionGroupLabel";
+
+export { ComboboxOptionGroupLabel };

package/combobox/combobox-option-group.cjs

@@ -0,0 +1,23 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const comboboxContext = require('./combobox-context.cjs');
+
+const ComboboxOptionGroup = react.forwardRef(
+  (props, ref) => {
+    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+    const { getOptionGroupProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+
+exports.ComboboxOptionGroup = ComboboxOptionGroup;

package/combobox/combobox-option-group.d.ts

@@ -0,0 +1,10 @@
+import type { OptionGroupProps } from '@zag-js/combobox';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+import type { Assign } from '../types';
+export type ComboboxOptionGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, OptionGroupProps>;
+export declare const ComboboxOptionGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "id"> & OptionGroupProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-option-group.mjs

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useComboboxContext } from './combobox-context.mjs';
+
+const ComboboxOptionGroup = forwardRef(
+  (props, ref) => {
+    const [optionProps, localProps] = createSplitProps()(props, ["id"]);
+    const { getOptionGroupProps } = useComboboxContext();
+    const mergedProps = mergeProps(getOptionGroupProps(optionProps), localProps);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ComboboxOptionGroup.displayName = "ComboboxOptionGroup";
+
+export { ComboboxOptionGroup };

package/combobox/combobox.cjs

@@ -34,11 +34,13 @@ const Combobox = react.forwardRef((props, ref) => {
       "loop",
       "name",
       "onClose",
+      "onFocusOutside",
       "onHighlight",
       "onInputChange",
       "onInputChange",
       "onInteractOutside",
       "onOpen",
+      "onPointerDownOutside",
       "onSelect",
       "openOnClick",
       "placeholder",

package/combobox/combobox.d.ts

@@ -10,6 +10,6 @@ export declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Det
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "form" | "id" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "disabled" | "onClose" | "readOnly" | "getRootNode" | "ids" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "positioning" | "onInputChange" | "onHighlight" | "onOpen" | "onInteractOutside" | "translations"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "children">, "name" | "form" | "id" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "disabled" | "onClose" | "readOnly" | "getRootNode" | "ids" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "positioning" | "onInputChange" | "onHighlight" | "onOpen" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     children?: ReactNode | ((props: UseComboboxReturn) => React.ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/combobox/combobox.mjs

@@ -30,11 +30,13 @@ const Combobox = forwardRef((props, ref) => {
       "loop",
       "name",
       "onClose",
+      "onFocusOutside",
       "onHighlight",
       "onInputChange",
       "onInputChange",
       "onInteractOutside",
       "onOpen",
+      "onPointerDownOutside",
       "onSelect",
       "openOnClick",
       "placeholder",

package/combobox/index.cjs

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const combobox = require('./combobox.cjs');
+const comboboxClearTrigger = require('./combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox-content.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxControl = require('./combobox-control.cjs');
 const comboboxInput = require('./combobox-input.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
 const comboboxOption = require('./combobox-option.cjs');
+const comboboxOptionGroup = require('./combobox-option-group.cjs');
+const comboboxOptionGroupLabel = require('./combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox-trigger.cjs');
 const combobox$1 = require('@zag-js/combobox');
@@ -16,15 +19,18 @@ const combobox$1 = require('@zag-js/combobox');
 
 
 exports.Combobox = combobox.Combobox;
+exports.ComboboxClearTrigger = comboboxClearTrigger.ComboboxClearTrigger;
 exports.ComboboxContent = comboboxContent.ComboboxContent;
 exports.useComboboxContext = comboboxContext.useComboboxContext;
 exports.ComboboxControl = comboboxControl.ComboboxControl;
 exports.ComboboxInput = comboboxInput.ComboboxInput;
 exports.ComboboxLabel = comboboxLabel.ComboboxLabel;
 exports.ComboboxOption = comboboxOption.ComboboxOption;
+exports.ComboboxOptionGroup = comboboxOptionGroup.ComboboxOptionGroup;
+exports.ComboboxOptionGroupLabel = comboboxOptionGroupLabel.ComboboxOptionGroupLabel;
 exports.ComboboxPositioner = comboboxPositioner.ComboboxPositioner;
 exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 Object.defineProperty(exports, 'comboboxAnatomy', {
-	enumerable: true,
-	get: () => combobox$1.anatomy
+  enumerable: true,
+  get: () => combobox$1.anatomy
 });

package/combobox/index.d.ts

@@ -1,10 +1,13 @@
 export { Combobox, type ComboboxProps } from './combobox';
+export { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
 export { ComboboxContent, type ComboboxContentProps } from './combobox-content';
 export { useComboboxContext } from './combobox-context';
 export { ComboboxControl, type ComboboxControlProps } from './combobox-control';
 export { ComboboxInput, type ComboboxInputProps } from './combobox-input';
 export { ComboboxLabel, type ComboboxLabelProps } from './combobox-label';
 export { ComboboxOption, type ComboboxOptionProps } from './combobox-option';
+export { ComboboxOptionGroup, type ComboboxOptionGroupProps } from './combobox-option-group';
+export { ComboboxOptionGroupLabel, type ComboboxOptionGroupLabelProps, } from './combobox-option-group-label';
 export { ComboboxPositioner, type ComboboxPositionerProps } from './combobox-positioner';
 export { ComboboxTrigger, type ComboboxTriggerProps } from './combobox-trigger';
 export { comboboxAnatomy } from './combobox.anatomy';

package/combobox/index.mjs

@@ -1,10 +1,13 @@
 export { Combobox } from './combobox.mjs';
+export { ComboboxClearTrigger } from './combobox-clear-trigger.mjs';
 export { ComboboxContent } from './combobox-content.mjs';
 export { useComboboxContext } from './combobox-context.mjs';
 export { ComboboxControl } from './combobox-control.mjs';
 export { ComboboxInput } from './combobox-input.mjs';
 export { ComboboxLabel } from './combobox-label.mjs';
 export { ComboboxOption } from './combobox-option.mjs';
+export { ComboboxOptionGroup } from './combobox-option-group.mjs';
+export { ComboboxOptionGroupLabel } from './combobox-option-group-label.mjs';
 export { ComboboxPositioner } from './combobox-positioner.mjs';
 export { ComboboxTrigger } from './combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/date-picker/date-picker-positioner.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 datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerPositioner = react.forwardRef(
+  (props, ref) => {
+    const { positionerProps } = datePickerContext.useDatePickerContext();
+    const mergedProps = react$1.mergeProps(positionerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+DatePickerPositioner.displayName = "DatePickerPositioner";
+
+exports.DatePickerPositioner = DatePickerPositioner;

package/date-picker/date-picker-positioner.d.ts

@@ -0,0 +1,8 @@
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type DatePickerPositionerProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const DatePickerPositioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-positioner.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 { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerPositioner = forwardRef(
+  (props, ref) => {
+    const { positionerProps } = useDatePickerContext();
+    const mergedProps = mergeProps(positionerProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+DatePickerPositioner.displayName = "DatePickerPositioner";
+
+export { DatePickerPositioner };

package/date-picker/date-picker.anatomy.d.ts

@@ -1,3 +1,3 @@
 import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const datePickerAnatomy: AnatomyInstance<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader">;
-export declare const parts: Record<"header" | "input" | "label" | "content" | "grid" | "row" | "nextTrigger" | "control" | "trigger" | "viewTrigger" | "cellTrigger" | "prevTrigger" | "clearTrigger" | "monthSelect" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "content" | "grid" | "row" | "control" | "cellTrigger" | "clearTrigger" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rowHeader" | "trigger" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader">;
+export declare const parts: Record<"input" | "content" | "grid" | "row" | "control" | "cellTrigger" | "clearTrigger" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rowHeader" | "trigger" | "viewTrigger" | "yearSelect" | "rowGroup" | "columnHeader", AnatomyPart>;

package/date-picker/index.cjs

@@ -18,6 +18,7 @@ const datePickerMonthCell = require('./date-picker-month-cell.cjs');
 const datePickerMonthCellTrigger = require('./date-picker-month-cell-trigger.cjs');
 const datePickerMonthSelect = require('./date-picker-month-select.cjs');
 const datePickerNextTrigger = require('./date-picker-next-trigger.cjs');
+const datePickerPositioner = require('./date-picker-positioner.cjs');
 const datePickerPrevTrigger = require('./date-picker-prev-trigger.cjs');
 const datePickerRow = require('./date-picker-row.cjs');
 const datePickerRowGroup = require('./date-picker-row-group.cjs');
@@ -47,6 +48,7 @@ exports.DatePickerMonthCell = datePickerMonthCell.DatePickerMonthCell;
 exports.DatePickerMonthCellTrigger = datePickerMonthCellTrigger.DatePickerMonthCellTrigger;
 exports.DatePickerMonthSelect = datePickerMonthSelect.DatePickerMonthSelect;
 exports.DatePickerNextTrigger = datePickerNextTrigger.DatePickerNextTrigger;
+exports.DatePickerPositioner = datePickerPositioner.DatePickerPositioner;
 exports.DatePickerPrevTrigger = datePickerPrevTrigger.DatePickerPrevTrigger;
 exports.DatePickerRow = datePickerRow.DatePickerRow;
 exports.DatePickerRowGroup = datePickerRowGroup.DatePickerRowGroup;

package/date-picker/index.d.ts

@@ -14,6 +14,7 @@ export { DatePickerMonthCell, type DatePickerMonthCellProps } from './date-picke
 export { DatePickerMonthCellTrigger, type DatePickerMonthCellTriggerProps, } from './date-picker-month-cell-trigger';
 export { DatePickerMonthSelect, type DatePickerMonthSelectProps } from './date-picker-month-select';
 export { DatePickerNextTrigger, type DatePickerNextTriggerProps } from './date-picker-next-trigger';
+export { DatePickerPositioner, type DatePickerPositionerProps } from './date-picker-positioner';
 export { DatePickerPrevTrigger, type DatePickerPrevTriggerProps } from './date-picker-prev-trigger';
 export { DatePickerRow, type DatePickerRowProps } from './date-picker-row';
 export { DatePickerRowGroup, type DatePickerRowGroupProps } from './date-picker-row-group';

package/date-picker/index.mjs

@@ -14,6 +14,7 @@ export { DatePickerMonthCell } from './date-picker-month-cell.mjs';
 export { DatePickerMonthCellTrigger } from './date-picker-month-cell-trigger.mjs';
 export { DatePickerMonthSelect } from './date-picker-month-select.mjs';
 export { DatePickerNextTrigger } from './date-picker-next-trigger.mjs';
+export { DatePickerPositioner } from './date-picker-positioner.mjs';
 export { DatePickerPrevTrigger } from './date-picker-prev-trigger.mjs';
 export { DatePickerRow } from './date-picker-row.mjs';
 export { DatePickerRowGroup } from './date-picker-row-group.mjs';

package/editable/editable.cjs

@@ -32,7 +32,9 @@ const Editable = react.forwardRef((props, ref) => {
       "onCancel",
       "onChange",
       "onEdit",
+      "onFocusOutside",
       "onInteractOutside",
+      "onPointerDownOutside",
       "onSubmit",
       "placeholder",
       "readOnly",

package/editable/editable.d.ts

@@ -13,6 +13,6 @@ export declare const Editable: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Det
     asChild?: boolean | undefined;
 }, "ref">, "children"> & {
     children: ReactNode | ((pages: EditableContext) => ReactNode);
-}, "name" | "value" | "form" | "id" | "onChange" | "onSubmit" | "defaultValue" | "dir" | "placeholder" | "disabled" | "onCancel" | "maxLength" | "readOnly" | "getRootNode" | "ids" | "invalid" | "onInteractOutside" | "translations" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "name" | "value" | "form" | "id" | "onChange" | "onSubmit" | "defaultValue" | "dir" | "placeholder" | "disabled" | "onCancel" | "maxLength" | "readOnly" | "getRootNode" | "ids" | "invalid" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/editable/editable.mjs

@@ -28,7 +28,9 @@ const Editable = forwardRef((props, ref) => {
       "onCancel",
       "onChange",
       "onEdit",
+      "onFocusOutside",
       "onInteractOutside",
+      "onPointerDownOutside",
       "onSubmit",
       "placeholder",
       "readOnly",