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

package/index.cjs

@@ -28,7 +28,6 @@ const carousel_anatomy = require('./carousel/carousel.anatomy.cjs');
 const checkbox = require('./checkbox/checkbox.cjs');
 const checkboxContext = require('./checkbox/checkbox-context.cjs');
 const checkboxControl = require('./checkbox/checkbox-control.cjs');
-const checkboxInput = require('./checkbox/checkbox-input.cjs');
 const checkboxLabel = require('./checkbox/checkbox-label.cjs');
 const colorPicker = require('./color-picker/color-picker.cjs');
 const colorPickerArea = require('./color-picker/color-picker-area.cjs');
@@ -48,12 +47,15 @@ const colorPickerSwatchContext = require('./color-picker/color-picker-swatch-con
 const colorPickerSwatchGroup = require('./color-picker/color-picker-swatch-group.cjs');
 const colorPicker_anatomy = require('./color-picker/color-picker.anatomy.cjs');
 const combobox = require('./combobox/combobox.cjs');
+const comboboxClearTrigger = require('./combobox/combobox-clear-trigger.cjs');
 const comboboxContent = require('./combobox/combobox-content.cjs');
 const comboboxContext = require('./combobox/combobox-context.cjs');
 const comboboxControl = require('./combobox/combobox-control.cjs');
 const comboboxInput = require('./combobox/combobox-input.cjs');
 const comboboxLabel = require('./combobox/combobox-label.cjs');
 const comboboxOption = require('./combobox/combobox-option.cjs');
+const comboboxOptionGroup = require('./combobox/combobox-option-group.cjs');
+const comboboxOptionGroupLabel = require('./combobox/combobox-option-group-label.cjs');
 const comboboxPositioner = require('./combobox/combobox-positioner.cjs');
 const comboboxTrigger = require('./combobox/combobox-trigger.cjs');
 const datePicker = require('./date-picker/date-picker.cjs');
@@ -72,6 +74,7 @@ const datePickerMonthCell = require('./date-picker/date-picker-month-cell.cjs');
 const datePickerMonthCellTrigger = require('./date-picker/date-picker-month-cell-trigger.cjs');
 const datePickerMonthSelect = require('./date-picker/date-picker-month-select.cjs');
 const datePickerNextTrigger = require('./date-picker/date-picker-next-trigger.cjs');
+const datePickerPositioner = require('./date-picker/date-picker-positioner.cjs');
 const datePickerPrevTrigger = require('./date-picker/date-picker-prev-trigger.cjs');
 const datePickerRow = require('./date-picker/date-picker-row.cjs');
 const datePickerRowGroup = require('./date-picker/date-picker-row-group.cjs');
@@ -311,7 +314,6 @@ exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;
 exports.Checkbox = checkbox.Checkbox;
 exports.useCheckboxContext = checkboxContext.useCheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
-exports.CheckboxInput = checkboxInput.CheckboxInput;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
 exports.ColorPicker = colorPicker.ColorPicker;
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
@@ -331,12 +333,15 @@ exports.useColorPickerSwatchContext = colorPickerSwatchContext.useColorPickerSwa
 exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 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;
 exports.DatePicker = datePicker.DatePicker;
@@ -355,6 +360,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/index.mjs

@@ -24,7 +24,6 @@ export { carouselAnatomy } from './carousel/carousel.anatomy.mjs';
 export { Checkbox } from './checkbox/checkbox.mjs';
 export { useCheckboxContext } from './checkbox/checkbox-context.mjs';
 export { CheckboxControl } from './checkbox/checkbox-control.mjs';
-export { CheckboxInput } from './checkbox/checkbox-input.mjs';
 export { CheckboxLabel } from './checkbox/checkbox-label.mjs';
 export { ColorPicker } from './color-picker/color-picker.mjs';
 export { ColorPickerArea } from './color-picker/color-picker-area.mjs';
@@ -44,12 +43,15 @@ export { useColorPickerSwatchContext } from './color-picker/color-picker-swatch-
 export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group.mjs';
 export { colorPickerAnatomy } from './color-picker/color-picker.anatomy.mjs';
 export { Combobox } from './combobox/combobox.mjs';
+export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.mjs';
 export { ComboboxContent } from './combobox/combobox-content.mjs';
 export { useComboboxContext } from './combobox/combobox-context.mjs';
 export { ComboboxControl } from './combobox/combobox-control.mjs';
 export { ComboboxInput } from './combobox/combobox-input.mjs';
 export { ComboboxLabel } from './combobox/combobox-label.mjs';
 export { ComboboxOption } from './combobox/combobox-option.mjs';
+export { ComboboxOptionGroup } from './combobox/combobox-option-group.mjs';
+export { ComboboxOptionGroupLabel } from './combobox/combobox-option-group-label.mjs';
 export { ComboboxPositioner } from './combobox/combobox-positioner.mjs';
 export { ComboboxTrigger } from './combobox/combobox-trigger.mjs';
 export { DatePicker } from './date-picker/date-picker.mjs';
@@ -68,6 +70,7 @@ export { DatePickerMonthCell } from './date-picker/date-picker-month-cell.mjs';
 export { DatePickerMonthCellTrigger } from './date-picker/date-picker-month-cell-trigger.mjs';
 export { DatePickerMonthSelect } from './date-picker/date-picker-month-select.mjs';
 export { DatePickerNextTrigger } from './date-picker/date-picker-next-trigger.mjs';
+export { DatePickerPositioner } from './date-picker/date-picker-positioner.mjs';
 export { DatePickerPrevTrigger } from './date-picker/date-picker-prev-trigger.mjs';
 export { DatePickerRow } from './date-picker/date-picker-row.mjs';
 export { DatePickerRowGroup } from './date-picker/date-picker-row-group.mjs';

package/menu/menu.cjs

@@ -23,7 +23,10 @@ const Menu = (props) => {
     "ids",
     "loop",
     "onClose",
+    "onFocusOutside",
+    "onInteractOutside",
     "onOpen",
+    "onPointerDownOutside",
     "onSelect",
     "onValueChange",
     "positioning",

package/menu/menu.mjs

@@ -19,7 +19,10 @@ const Menu = (props) => {
     "ids",
     "loop",
     "onClose",
+    "onFocusOutside",
+    "onInteractOutside",
     "onOpen",
+    "onPointerDownOutside",
     "onSelect",
     "onValueChange",
     "positioning",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.10.0",
+  "version": "0.11.0-beta.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,47 +60,47 @@
     "release-it": "release-it --config ../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.13.0",
-    "@zag-js/anatomy": "0.13.0",
-    "@zag-js/avatar": "0.13.0",
-    "@zag-js/carousel": "0.13.0",
-    "@zag-js/checkbox": "0.13.0",
-    "@zag-js/color-picker": "0.13.0",
-    "@zag-js/color-utils": "0.13.0",
-    "@zag-js/combobox": "0.13.0",
-    "@zag-js/date-picker": "0.13.0",
-    "@zag-js/date-utils": "0.13.0",
-    "@zag-js/dialog": "0.13.0",
-    "@zag-js/editable": "0.13.0",
-    "@zag-js/hover-card": "0.13.0",
-    "@zag-js/menu": "0.13.0",
-    "@zag-js/number-input": "0.13.0",
-    "@zag-js/pagination": "0.13.0",
-    "@zag-js/pin-input": "0.13.0",
-    "@zag-js/popover": "0.13.0",
-    "@zag-js/presence": "0.13.0",
-    "@zag-js/pressable": "0.13.0",
-    "@zag-js/radio-group": "0.13.0",
-    "@zag-js/range-slider": "0.13.0",
-    "@zag-js/rating-group": "0.13.0",
-    "@zag-js/react": "0.13.0",
-    "@zag-js/select": "0.13.0",
-    "@zag-js/slider": "0.13.0",
-    "@zag-js/splitter": "0.13.0",
-    "@zag-js/switch": "0.13.0",
-    "@zag-js/tabs": "0.13.0",
-    "@zag-js/tags-input": "0.13.0",
-    "@zag-js/toast": "0.13.0",
-    "@zag-js/tooltip": "0.13.0",
-    "@zag-js/types": "0.13.0"
+    "@zag-js/accordion": "0.0.0-dev-20230807223338",
+    "@zag-js/anatomy": "0.0.0-dev-20230807223338",
+    "@zag-js/avatar": "0.0.0-dev-20230807223338",
+    "@zag-js/carousel": "0.0.0-dev-20230807223338",
+    "@zag-js/checkbox": "0.0.0-dev-20230807223338",
+    "@zag-js/color-picker": "0.0.0-dev-20230807223338",
+    "@zag-js/color-utils": "0.0.0-dev-20230807223338",
+    "@zag-js/combobox": "0.0.0-dev-20230807223338",
+    "@zag-js/date-picker": "0.0.0-dev-20230807223338",
+    "@zag-js/date-utils": "0.0.0-dev-20230807223338",
+    "@zag-js/dialog": "0.0.0-dev-20230807223338",
+    "@zag-js/editable": "0.0.0-dev-20230807223338",
+    "@zag-js/hover-card": "0.0.0-dev-20230807223338",
+    "@zag-js/menu": "0.0.0-dev-20230807223338",
+    "@zag-js/number-input": "0.0.0-dev-20230807223338",
+    "@zag-js/pagination": "0.0.0-dev-20230807223338",
+    "@zag-js/pin-input": "0.0.0-dev-20230807223338",
+    "@zag-js/popover": "0.0.0-dev-20230807223338",
+    "@zag-js/presence": "0.0.0-dev-20230807223338",
+    "@zag-js/pressable": "0.0.0-dev-20230807223338",
+    "@zag-js/radio-group": "0.0.0-dev-20230807223338",
+    "@zag-js/range-slider": "0.0.0-dev-20230807223338",
+    "@zag-js/rating-group": "0.0.0-dev-20230807223338",
+    "@zag-js/react": "0.0.0-dev-20230807223338",
+    "@zag-js/select": "0.0.0-dev-20230807223338",
+    "@zag-js/slider": "0.0.0-dev-20230807223338",
+    "@zag-js/splitter": "0.0.0-dev-20230807223338",
+    "@zag-js/switch": "0.0.0-dev-20230807223338",
+    "@zag-js/tabs": "0.0.0-dev-20230807223338",
+    "@zag-js/tags-input": "0.0.0-dev-20230807223338",
+    "@zag-js/toast": "0.0.0-dev-20230807223338",
+    "@zag-js/tooltip": "0.0.0-dev-20230807223338",
+    "@zag-js/types": "0.0.0-dev-20230807223338"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.2.0",
-    "@storybook/addon-essentials": "7.2.0",
-    "@storybook/addons": "7.2.0",
-    "@storybook/react": "7.2.0",
-    "@storybook/react-vite": "7.2.0",
+    "@storybook/addon-a11y": "7.2.1",
+    "@storybook/addon-essentials": "7.2.1",
+    "@storybook/addons": "7.2.1",
+    "@storybook/react": "7.2.1",
+    "@storybook/react-vite": "7.2.1",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.0.0",
@@ -123,9 +123,9 @@
     "react-frame-component": "5.2.6",
     "release-it": "16.1.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.2.0",
+    "storybook": "7.2.1",
     "typescript": "5.1.6",
-    "vite": "4.4.8",
+    "vite": "4.4.9",
     "vite-plugin-dts": "2.3.0",
     "vitest": "0.34.1"
   },

package/pin-input/pin-input-control.cjs

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

package/pin-input/pin-input-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, 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';
@@ -8,9 +8,9 @@ import { usePinInputContext } from './pin-input-context.mjs';
 const PinInputControl = forwardRef((props, ref) => {
   const { controlProps, hiddenInputProps } = usePinInputContext();
   const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps }),
-    props.children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
   ] });
 });
 PinInputControl.displayName = "PinInputControl";

package/range-slider/range-slider-thumb.cjs

@@ -11,22 +11,13 @@ const rangeSliderContext = require('./range-slider-context.cjs');
 
 const RangeSliderThumb = react.forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps } = rangeSliderContext.useRangeSliderContext();
+  const { getThumbProps, getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
   const mergedProps = react$1.mergeProps(getThumbProps(index), divProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RangeSliderHiddenInput, { index }),
-    props.children
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(index) })
   ] });
 });
 RangeSliderThumb.displayName = "RangeSliderThumb";
-const RangeSliderHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const { index, ...inputProps } = props;
-    const { getHiddenInputProps } = rangeSliderContext.useRangeSliderContext();
-    const mergedProps = react$1.mergeProps(getHiddenInputProps(index), inputProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
-  }
-);
-RangeSliderHiddenInput.displayName = "RangeSliderHiddenInput";
 
 exports.RangeSliderThumb = RangeSliderThumb;

package/range-slider/range-slider-thumb.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, 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';
@@ -7,22 +7,13 @@ import { useRangeSliderContext } from './range-slider-context.mjs';
 
 const RangeSliderThumb = forwardRef((props, ref) => {
   const { index, ...divProps } = props;
-  const { getThumbProps } = useRangeSliderContext();
+  const { getThumbProps, getHiddenInputProps } = useRangeSliderContext();
   const mergedProps = mergeProps(getThumbProps(index), divProps);
-  return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx(RangeSliderHiddenInput, { index }),
-    props.children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsx("input", { ...getHiddenInputProps(index) })
   ] });
 });
 RangeSliderThumb.displayName = "RangeSliderThumb";
-const RangeSliderHiddenInput = forwardRef(
-  (props, ref) => {
-    const { index, ...inputProps } = props;
-    const { getHiddenInputProps } = useRangeSliderContext();
-    const mergedProps = mergeProps(getHiddenInputProps(index), inputProps);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
-  }
-);
-RangeSliderHiddenInput.displayName = "RangeSliderHiddenInput";
 
 export { RangeSliderThumb };

package/rating-group/rating-group-control.cjs

@@ -16,7 +16,10 @@ const RatingGroupControl = react.forwardRef(
     const ratingGroup = ratingGroupContext.useRatingGroupContext();
     const mergedProps = react$1.mergeProps(ratingGroup.controlProps, divProps);
     const view = runIfFn.runIfFn(children, ratingGroup);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { ...ratingGroup.hiddenInputProps })
+    ] });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

package/rating-group/rating-group-control.mjs

@@ -1,5 +1,5 @@
 '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';
@@ -12,7 +12,10 @@ const RatingGroupControl = forwardRef(
     const ratingGroup = useRatingGroupContext();
     const mergedProps = mergeProps(ratingGroup.controlProps, divProps);
     const view = runIfFn(children, ratingGroup);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+      /* @__PURE__ */ jsx("input", { ...ratingGroup.hiddenInputProps })
+    ] });
   }
 );
 RatingGroupControl.displayName = "RatingGroupControl";

package/rating-group/rating-group.cjs

@@ -32,10 +32,7 @@ const RatingGroup = react.forwardRef((props, ref) => {
   ]);
   const ratingGroup = useRatingGroup.useRatingGroup(useRatingProps);
   const mergedProps = react$1.mergeProps(ratingGroup.rootProps, inputProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...ratingGroup.hiddenInputProps, ref }),
-    props.children
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(ratingGroupContext.RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }) });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/rating-group/rating-group.d.ts

@@ -1,13 +1,13 @@
 import type { Context } from '@zag-js/rating-group';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseRatingGroupProps } from './use-rating-group';
-export type RatingGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, UseRatingGroupProps>;
-export declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+export type RatingGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseRatingGroupProps>;
+export declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "name" | "value" | "form" | "id" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "disabled" | "readOnly" | "getRootNode" | "ids" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number | undefined;
-} & RefAttributes<HTMLInputElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -28,10 +28,7 @@ const RatingGroup = forwardRef((props, ref) => {
   ]);
   const ratingGroup = useRatingGroup(useRatingProps);
   const mergedProps = mergeProps(ratingGroup.rootProps, inputProps);
-  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, children: [
-    /* @__PURE__ */ jsx(ark.input, { ...ratingGroup.hiddenInputProps, ref }),
-    props.children
-  ] }) });
+  return /* @__PURE__ */ jsx(RatingGroupProvider, { value: ratingGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }) });
 });
 RatingGroup.displayName = "RatingGroup";
 

package/select/select-option-group.cjs

@@ -6,14 +6,15 @@ 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 selectContext = require('./select-context.cjs');
 
 const SelectOptionGroup = react.forwardRef(
   (props, ref) => {
-    const { id, ...divProps } = props;
+    const [optionProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
     const { getOptionGroupProps } = selectContext.useSelectContext();
-    const mergedProps = react$1.mergeProps(getOptionGroupProps({ id }), divProps);
+    const mergedProps = react$1.mergeProps(getOptionGroupProps(optionProps), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

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

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

package/select/select-option-group.mjs

@@ -2,14 +2,15 @@
 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 { useSelectContext } from './select-context.mjs';
 
 const SelectOptionGroup = forwardRef(
   (props, ref) => {
-    const { id, ...divProps } = props;
+    const [optionProps, localProps] = createSplitProps()(props, ["id"]);
     const { getOptionGroupProps } = useSelectContext();
-    const mergedProps = mergeProps(getOptionGroupProps({ id }), divProps);
+    const mergedProps = mergeProps(getOptionGroupProps(optionProps), localProps);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/select/select.cjs

@@ -26,9 +26,11 @@ const Select = (props) => {
     "name",
     "onChange",
     "onClose",
+    "onFocusOutside",
     "onHighlight",
     "onInteractOutside",
     "onOpen",
+    "onPointerDownOutside",
     "positioning",
     "readOnly",
     "selectedOption",

package/select/select.mjs

@@ -22,9 +22,11 @@ const Select = (props) => {
     "name",
     "onChange",
     "onClose",
+    "onFocusOutside",
     "onHighlight",
     "onInteractOutside",
     "onOpen",
+    "onPointerDownOutside",
     "positioning",
     "readOnly",
     "selectedOption",

package/slider/slider-thumb.cjs

@@ -10,21 +10,13 @@ const factory = require('../factory.cjs');
 const sliderContext = require('./slider-context.cjs');
 
 const SliderThumb = react.forwardRef((props, ref) => {
-  const { thumbProps } = sliderContext.useSliderContext();
+  const { thumbProps, hiddenInputProps } = sliderContext.useSliderContext();
   const mergedProps = react$1.mergeProps(thumbProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SliderHiddenInput, {}),
-    props.children
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
   ] });
 });
 SliderThumb.displayName = "SliderThumb";
-const SliderHiddenInput = react.forwardRef(
-  (props, ref) => {
-    const { hiddenInputProps } = sliderContext.useSliderContext();
-    const mergedProps = react$1.mergeProps(hiddenInputProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
-  }
-);
-SliderHiddenInput.displayName = "SliderHiddenInput";
 
 exports.SliderThumb = SliderThumb;

package/slider/slider-thumb.mjs

@@ -1,26 +1,18 @@
 'use client';
-import { jsxs, 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 { useSliderContext } from './slider-context.mjs';
 
 const SliderThumb = forwardRef((props, ref) => {
-  const { thumbProps } = useSliderContext();
+  const { thumbProps, hiddenInputProps } = useSliderContext();
   const mergedProps = mergeProps(thumbProps, props);
-  return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    /* @__PURE__ */ jsx(SliderHiddenInput, {}),
-    props.children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
+    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
   ] });
 });
 SliderThumb.displayName = "SliderThumb";
-const SliderHiddenInput = forwardRef(
-  (props, ref) => {
-    const { hiddenInputProps } = useSliderContext();
-    const mergedProps = mergeProps(hiddenInputProps, props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
-  }
-);
-SliderHiddenInput.displayName = "SliderHiddenInput";
 
 export { SliderThumb };

package/tags-input/tags-input-control.cjs

@@ -12,8 +12,8 @@ const tagsInputContext = require('./tags-input-context.cjs');
 const TagsInputControl = react.forwardRef((props, ref) => {
   const { controlProps, hiddenInputProps } = tagsInputContext.useTagsInputContext();
   const mergedProps = react$1.mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.div, { ...mergedProps, ref, children: [
-    props.children,
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
   ] });
 });

package/tags-input/tags-input-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, 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';
@@ -8,8 +8,8 @@ import { useTagsInputContext } from './tags-input-context.mjs';
 const TagsInputControl = forwardRef((props, ref) => {
   const { controlProps, hiddenInputProps } = useTagsInputContext();
   const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(ark.div, { ...mergedProps, ref, children: [
-    props.children,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
     /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
   ] });
 });

package/tags-input/tags-input.cjs

@@ -35,9 +35,11 @@ const TagsInput = react.forwardRef((props, ref) => {
       "maxLength",
       "name",
       "onChange",
+      "onFocusOutside",
       "onHighlight",
-      "onInvalid",
       "onInteractOutside",
+      "onInvalid",
+      "onPointerDownOutside",
       "onTagUpdate",
       "readOnly",
       "translations",

package/tags-input/tags-input.mjs

@@ -31,9 +31,11 @@ const TagsInput = forwardRef((props, ref) => {
       "maxLength",
       "name",
       "onChange",
+      "onFocusOutside",
       "onHighlight",
-      "onInvalid",
       "onInteractOutside",
+      "onInvalid",
+      "onPointerDownOutside",
       "onTagUpdate",
       "readOnly",
       "translations",