@ark-ui/react 3.0.0-3 → 3.0.1

package/README.md

@@ -1,6 +1,8 @@
 # Welcome to Ark UI
 
-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.
+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.
 
 ## Supported Frameworks
 
@@ -12,37 +14,37 @@ Ark UI is available for the following JavaScript frameworks:
 
 ## Available Components
 
-- [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)
-- [Progress](https://ark-ui.com/docs/components/progress)
-- [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)
-- [Tree View](https://ark-ui.com/docs/components/tree-view)
+- [Accordion](https://ark-ui.com/react/docs/components/accordion)
+- [Avatar](https://ark-ui.com/react/docs/components/avatar)
+- [Carousel](https://ark-ui.com/react/docs/components/carousel)
+- [Checkbox](https://ark-ui.com/react/docs/components/checkbox)
+- [Color Picker](https://ark-ui.com/react/docs/components/color-picker)
+- [Combobox](https://ark-ui.com/react/docs/components/combobox)
+- [Date Picker](https://ark-ui.com/react/docs/components/date-picker)
+- [Dialog](https://ark-ui.com/react/docs/components/dialog)
+- [Editable](https://ark-ui.com/react/docs/components/editable)
+- [File Upload](https://ark-ui.com/react/docs/components/file-upload)
+- [Hover Card](https://ark-ui.com/react/docs/components/hover-card)
+- [Menu](https://ark-ui.com/react/docs/components/menu)
+- [Number Input](https://ark-ui.com/react/docs/components/number-input)
+- [Pagination](https://ark-ui.com/react/docs/components/pagination)
+- [Pin Input](https://ark-ui.com/react/docs/components/pin-input)
+- [Popover](https://ark-ui.com/react/docs/components/popover)
+- [Progress](https://ark-ui.com/react/docs/components/progress)
+- [Radio Group](https://ark-ui.com/react/docs/components/radio-group)
+- [Range Slider](https://ark-ui.com/react/docs/components/slider)
+- [Rating Group](https://ark-ui.com/react/docs/components/rating-group)
+- [Segment Group](https://ark-ui.com/react/docs/components/segment-group)
+- [Select](https://ark-ui.com/react/docs/components/select)
+- [Slider](https://ark-ui.com/react/docs/components/slider)
+- [Splitter](https://ark-ui.com/react/docs/components/splitter)
+- [Switch](https://ark-ui.com/react/docs/components/switch)
+- [Tabs](https://ark-ui.com/react/docs/components/tabs)
+- [Tags Input](https://ark-ui.com/react/docs/components/tags-input)
+- [Toast](https://ark-ui.com/react/docs/components/toast)
+- [Toggle Group](https://ark-ui.com/react/docs/components/toggle-group)
+- [Tooltip](https://ark-ui.com/react/docs/components/tooltip)
+- [Tree View](https://ark-ui.com/react/docs/components/tree-view)
 
 ## Installation
 
@@ -97,7 +99,8 @@ export const MySlider = (props: SliderProps) => {
 
 ## Documentation
 
-For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
+For more detailed documentation and examples, please visit the
+[official documentation](https://ark-ui.com/).
 
 ## Roadmap
 
@@ -105,8 +108,11 @@ You can request, vote for, and check upcoming features on our [roadmap](https://
 
 ## Contribution
 
-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.
+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.
 
 ## License
 
-This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/dist/components/index.cjs

@@ -261,6 +261,7 @@ const radioGroupIndicator = require('./radio-group/radio-group-indicator.cjs');
 const radioGroupItem = require('./radio-group/radio-group-item.cjs');
 const radioGroupItemContext = require('./radio-group/radio-group-item-context.cjs');
 const radioGroupItemControl = require('./radio-group/radio-group-item-control.cjs');
+const radioGroupItemHiddenInput = require('./radio-group/radio-group-item-hidden-input.cjs');
 const radioGroupItemText = require('./radio-group/radio-group-item-text.cjs');
 const radioGroupLabel = require('./radio-group/radio-group-label.cjs');
 const radioGroupRoot = require('./radio-group/radio-group-root.cjs');
@@ -282,6 +283,7 @@ const segmentGroupIndicator = require('./segment-group/segment-group-indicator.c
 const segmentGroupItem = require('./segment-group/segment-group-item.cjs');
 const segmentGroupItemContext = require('./segment-group/segment-group-item-context.cjs');
 const segmentGroupItemControl = require('./segment-group/segment-group-item-control.cjs');
+const segmentGroupItemHiddenInput = require('./segment-group/segment-group-item-hidden-input.cjs');
 const segmentGroupItemText = require('./segment-group/segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group/segment-group-label.cjs');
 const segmentGroupRoot = require('./segment-group/segment-group-root.cjs');
@@ -310,6 +312,7 @@ const useSelectItemContext = require('./select/use-select-item-context.cjs');
 const select = require('./select/select.cjs');
 const sliderContext = require('./slider/slider-context.cjs');
 const sliderControl = require('./slider/slider-control.cjs');
+const sliderHiddenInput = require('./slider/slider-hidden-input.cjs');
 const sliderLabel = require('./slider/slider-label.cjs');
 const sliderMarker = require('./slider/slider-marker.cjs');
 const sliderMarkerGroup = require('./slider/slider-marker-group.cjs');
@@ -663,6 +666,7 @@ exports.RadioGroupIndicator = radioGroupIndicator.RadioGroupIndicator;
 exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
 exports.RadioGroupItemContext = radioGroupItemContext.RadioGroupItemContext;
 exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = radioGroupItemHiddenInput.RadioGroupItemHiddenInput;
 exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
 exports.RadioGroupRoot = radioGroupRoot.RadioGroupRoot;
@@ -684,6 +688,7 @@ exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
 exports.SegmentGroupItem = segmentGroupItem.SegmentGroupItem;
 exports.SegmentGroupItemContext = segmentGroupItemContext.SegmentGroupItemContext;
 exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.SegmentGroupItemHiddenInput = segmentGroupItemHiddenInput.SegmentGroupItemHiddenInput;
 exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
 exports.SegmentGroupRoot = segmentGroupRoot.SegmentGroupRoot;
@@ -712,6 +717,7 @@ exports.useSelectItemContext = useSelectItemContext.useSelectItemContext;
 exports.Select = select;
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;

package/dist/components/index.js

@@ -277,6 +277,7 @@ export { RadioGroupIndicator } from './radio-group/radio-group-indicator.js';
 export { RadioGroupItem } from './radio-group/radio-group-item.js';
 export { RadioGroupItemContext } from './radio-group/radio-group-item-context.js';
 export { RadioGroupItemControl } from './radio-group/radio-group-item-control.js';
+export { RadioGroupItemHiddenInput } from './radio-group/radio-group-item-hidden-input.js';
 export { RadioGroupItemText } from './radio-group/radio-group-item-text.js';
 export { RadioGroupLabel } from './radio-group/radio-group-label.js';
 export { RadioGroupRoot } from './radio-group/radio-group-root.js';
@@ -300,6 +301,7 @@ export { SegmentGroupIndicator } from './segment-group/segment-group-indicator.j
 export { SegmentGroupItem } from './segment-group/segment-group-item.js';
 export { SegmentGroupItemContext } from './segment-group/segment-group-item-context.js';
 export { SegmentGroupItemControl } from './segment-group/segment-group-item-control.js';
+export { SegmentGroupItemHiddenInput } from './segment-group/segment-group-item-hidden-input.js';
 export { SegmentGroupItemText } from './segment-group/segment-group-item-text.js';
 export { SegmentGroupLabel } from './segment-group/segment-group-label.js';
 export { SegmentGroupRoot } from './segment-group/segment-group-root.js';
@@ -330,6 +332,7 @@ import * as select from './select/select.js';
 export { select as Select };
 export { SliderContext } from './slider/slider-context.js';
 export { SliderControl } from './slider/slider-control.js';
+export { SliderHiddenInput } from './slider/slider-hidden-input.js';
 export { SliderLabel } from './slider/slider-label.js';
 export { SliderMarker } from './slider/slider-marker.js';
 export { SliderMarkerGroup } from './slider/slider-marker-group.js';

package/dist/components/pagination/index.d.cts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationItem, type PaginationItemProps } from './pagination-item';

package/dist/components/pagination/index.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, } from '@zag-js/pagination';
+export type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails, PageSizeChangeDetails as PaginationPageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext, type PaginationContextProps } from './pagination-context';
 export { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 export { PaginationItem, type PaginationItemProps } from './pagination-item';

package/dist/components/pagination/pagination-root.cjs

@@ -18,6 +18,7 @@ const PaginationRoot = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "onPageChange",
+    "onPageSizeChange",
     "page",
     "pageSize",
     "siblingCount",

package/dist/components/pagination/pagination-root.js

@@ -14,6 +14,7 @@ const PaginationRoot = forwardRef((props, ref) => {
     "id",
     "ids",
     "onPageChange",
+    "onPageSizeChange",
     "page",
     "pageSize",
     "siblingCount",

package/dist/components/pagination/pagination.d.cts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemProps as ItemProps } from './pagination-item';

package/dist/components/pagination/pagination.d.ts

@@ -1,4 +1,4 @@
-export type { ItemLabelDetails, PageChangeDetails } from '@zag-js/pagination';
+export type { ItemLabelDetails, PageChangeDetails, PageSizeChangeDetails, } from '@zag-js/pagination';
 export { PaginationContext as Context, type PaginationContextProps as ContextProps, } from './pagination-context';
 export { PaginationEllipsis as Ellipsis, type PaginationEllipsisProps as EllipsisProps, } from './pagination-ellipsis';
 export { PaginationItem as Item, type PaginationItemProps as ItemProps } from './pagination-item';

package/dist/components/radio-group/index.cjs

@@ -7,6 +7,7 @@ const radioGroupIndicator = require('./radio-group-indicator.cjs');
 const radioGroupItem = require('./radio-group-item.cjs');
 const radioGroupItemContext = require('./radio-group-item-context.cjs');
 const radioGroupItemControl = require('./radio-group-item-control.cjs');
+const radioGroupItemHiddenInput = require('./radio-group-item-hidden-input.cjs');
 const radioGroupItemText = require('./radio-group-item-text.cjs');
 const radioGroupLabel = require('./radio-group-label.cjs');
 const radioGroupRoot = require('./radio-group-root.cjs');
@@ -21,6 +22,7 @@ exports.RadioGroupIndicator = radioGroupIndicator.RadioGroupIndicator;
 exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
 exports.RadioGroupItemContext = radioGroupItemContext.RadioGroupItemContext;
 exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = radioGroupItemHiddenInput.RadioGroupItemHiddenInput;
 exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
 exports.RadioGroupRoot = radioGroupRoot.RadioGroupRoot;

package/dist/components/radio-group/index.d.cts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator, type RadioGroupIndicatorProps } from './radio-grou
 export { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
 export { RadioGroupItemContext, type RadioGroupItemContextProps } from './radio-group-item-context';
 export { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput, type RadioGroupItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 export { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
 export { RadioGroupRoot, type RadioGroupRootProps } from './radio-group-root';

package/dist/components/radio-group/index.d.ts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator, type RadioGroupIndicatorProps } from './radio-grou
 export { RadioGroupItem, type RadioGroupItemProps } from './radio-group-item';
 export { RadioGroupItemContext, type RadioGroupItemContextProps } from './radio-group-item-context';
 export { RadioGroupItemControl, type RadioGroupItemControlProps } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput, type RadioGroupItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText, type RadioGroupItemTextProps } from './radio-group-item-text';
 export { RadioGroupLabel, type RadioGroupLabelProps } from './radio-group-label';
 export { RadioGroupRoot, type RadioGroupRootProps } from './radio-group-root';

package/dist/components/radio-group/index.js

@@ -3,6 +3,7 @@ export { RadioGroupIndicator } from './radio-group-indicator.js';
 export { RadioGroupItem } from './radio-group-item.js';
 export { RadioGroupItemContext } from './radio-group-item-context.js';
 export { RadioGroupItemControl } from './radio-group-item-control.js';
+export { RadioGroupItemHiddenInput } from './radio-group-item-hidden-input.js';
 export { RadioGroupItemText } from './radio-group-item-text.js';
 export { RadioGroupLabel } from './radio-group-label.js';
 export { RadioGroupRoot } from './radio-group-root.js';

package/dist/components/radio-group/radio-group-item-control.cjs

@@ -15,10 +15,7 @@ const RadioGroupItemControl = react.forwardRef(
     const radioGroup = useRadioGroupContext.useRadioGroupContext();
     const itemProps = useRadioGroupItemPropsContext.useRadioGroupItemPropsContext();
     const mergedProps = react$1.mergeProps(radioGroup.getItemControlProps(itemProps), props);
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ...radioGroup.getItemHiddenInputProps(itemProps) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupItemControl.displayName = "RadioGroupItemControl";

package/dist/components/radio-group/radio-group-item-control.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
@@ -11,10 +11,7 @@ const RadioGroupItemControl = forwardRef(
     const radioGroup = useRadioGroupContext();
     const itemProps = useRadioGroupItemPropsContext();
     const mergedProps = mergeProps(radioGroup.getItemControlProps(itemProps), props);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-      /* @__PURE__ */ jsx("input", { ...radioGroup.getItemHiddenInputProps(itemProps) })
-    ] });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 RadioGroupItemControl.displayName = "RadioGroupItemControl";

package/dist/components/radio-group/radio-group-item-hidden-input.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 useRadioGroupContext = require('./use-radio-group-context.cjs');
+const useRadioGroupItemPropsContext = require('./use-radio-group-item-props-context.cjs');
+
+const RadioGroupItemHiddenInput = react.forwardRef((props, ref) => {
+  const radioGroup = useRadioGroupContext.useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext.useRadioGroupItemPropsContext();
+  const mergedProps = react$1.mergeProps(radioGroup.getItemHiddenInputProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+RadioGroupItemHiddenInput.displayName = "RadioGroupItemHiddenInput";
+
+exports.RadioGroupItemHiddenInput = RadioGroupItemHiddenInput;

package/dist/components/radio-group/radio-group-item-hidden-input.d.cts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface RadioGroupItemHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const RadioGroupItemHiddenInput: ForwardRefExoticComponent<RadioGroupItemHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/radio-group/radio-group-item-hidden-input.d.ts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface RadioGroupItemHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const RadioGroupItemHiddenInput: ForwardRefExoticComponent<RadioGroupItemHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/radio-group/radio-group-item-hidden-input.js

@@ -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.js';
+import { useRadioGroupContext } from './use-radio-group-context.js';
+import { useRadioGroupItemPropsContext } from './use-radio-group-item-props-context.js';
+
+const RadioGroupItemHiddenInput = forwardRef((props, ref) => {
+  const radioGroup = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = mergeProps(radioGroup.getItemHiddenInputProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
+RadioGroupItemHiddenInput.displayName = "RadioGroupItemHiddenInput";
+
+export { RadioGroupItemHiddenInput };

package/dist/components/radio-group/radio-group.cjs

@@ -7,6 +7,7 @@ const radioGroupIndicator = require('./radio-group-indicator.cjs');
 const radioGroupItem = require('./radio-group-item.cjs');
 const radioGroupItemContext = require('./radio-group-item-context.cjs');
 const radioGroupItemControl = require('./radio-group-item-control.cjs');
+const radioGroupItemHiddenInput = require('./radio-group-item-hidden-input.cjs');
 const radioGroupItemText = require('./radio-group-item-text.cjs');
 const radioGroupLabel = require('./radio-group-label.cjs');
 const radioGroupRoot = require('./radio-group-root.cjs');
@@ -18,6 +19,7 @@ exports.Indicator = radioGroupIndicator.RadioGroupIndicator;
 exports.Item = radioGroupItem.RadioGroupItem;
 exports.ItemContext = radioGroupItemContext.RadioGroupItemContext;
 exports.ItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.ItemHiddenInput = radioGroupItemHiddenInput.RadioGroupItemHiddenInput;
 exports.ItemText = radioGroupItemText.RadioGroupItemText;
 exports.Label = radioGroupLabel.RadioGroupLabel;
 exports.Root = radioGroupRoot.RadioGroupRoot;

package/dist/components/radio-group/radio-group.d.cts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator as Indicator, type RadioGroupIndicatorProps as Indi
 export { RadioGroupItem as Item, type RadioGroupItemProps as ItemProps } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, type RadioGroupItemContext as ItemContextProps, } from './radio-group-item-context';
 export { RadioGroupItemControl as ItemControl, type RadioGroupItemControlProps as ItemControlProps, } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput as ItemHiddenInput, type RadioGroupItemHiddenInputProps as ItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText as ItemText, type RadioGroupItemTextProps as ItemTextProps, } from './radio-group-item-text';
 export { RadioGroupLabel as Label, type RadioGroupLabelProps as LabelProps, } from './radio-group-label';
 export { RadioGroupRoot as Root, type RadioGroupRootProps as RootProps } from './radio-group-root';

package/dist/components/radio-group/radio-group.d.ts

@@ -4,6 +4,7 @@ export { RadioGroupIndicator as Indicator, type RadioGroupIndicatorProps as Indi
 export { RadioGroupItem as Item, type RadioGroupItemProps as ItemProps } from './radio-group-item';
 export { RadioGroupItemContext as ItemContext, type RadioGroupItemContext as ItemContextProps, } from './radio-group-item-context';
 export { RadioGroupItemControl as ItemControl, type RadioGroupItemControlProps as ItemControlProps, } from './radio-group-item-control';
+export { RadioGroupItemHiddenInput as ItemHiddenInput, type RadioGroupItemHiddenInputProps as ItemHiddenInputProps, } from './radio-group-item-hidden-input';
 export { RadioGroupItemText as ItemText, type RadioGroupItemTextProps as ItemTextProps, } from './radio-group-item-text';
 export { RadioGroupLabel as Label, type RadioGroupLabelProps as LabelProps, } from './radio-group-label';
 export { RadioGroupRoot as Root, type RadioGroupRootProps as RootProps } from './radio-group-root';

package/dist/components/radio-group/radio-group.js

@@ -3,6 +3,7 @@ export { RadioGroupIndicator as Indicator } from './radio-group-indicator.js';
 export { RadioGroupItem as Item } from './radio-group-item.js';
 export { RadioGroupItemContext as ItemContext } from './radio-group-item-context.js';
 export { RadioGroupItemControl as ItemControl } from './radio-group-item-control.js';
+export { RadioGroupItemHiddenInput as ItemHiddenInput } from './radio-group-item-hidden-input.js';
 export { RadioGroupItemText as ItemText } from './radio-group-item-text.js';
 export { RadioGroupLabel as Label } from './radio-group-label.js';
 export { RadioGroupRoot as Root } from './radio-group-root.js';

package/dist/components/segment-group/index.cjs

@@ -7,6 +7,7 @@ const segmentGroupIndicator = require('./segment-group-indicator.cjs');
 const segmentGroupItem = require('./segment-group-item.cjs');
 const segmentGroupItemContext = require('./segment-group-item-context.cjs');
 const segmentGroupItemControl = require('./segment-group-item-control.cjs');
+const segmentGroupItemHiddenInput = require('./segment-group-item-hidden-input.cjs');
 const segmentGroupItemText = require('./segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
 const segmentGroupRoot = require('./segment-group-root.cjs');
@@ -21,6 +22,7 @@ exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
 exports.SegmentGroupItem = segmentGroupItem.SegmentGroupItem;
 exports.SegmentGroupItemContext = segmentGroupItemContext.SegmentGroupItemContext;
 exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.SegmentGroupItemHiddenInput = segmentGroupItemHiddenInput.SegmentGroupItemHiddenInput;
 exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
 exports.SegmentGroupRoot = segmentGroupRoot.SegmentGroupRoot;

package/dist/components/segment-group/index.d.cts

@@ -4,9 +4,10 @@ export { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segmen
 export { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
 export { SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl, type SegmentGroupItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 export { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
 export { SegmentGroupRoot, type SegmentGroupRootProps } from './segment-group-root';
-export { type UseSegmentGroupContext, useSegmentGroupContext } from './use-segment-group-context';
-export { type UseSegmentGroupItemContext, useSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

package/dist/components/segment-group/index.d.ts

@@ -4,9 +4,10 @@ export { SegmentGroupIndicator, type SegmentGroupIndicatorProps } from './segmen
 export { SegmentGroupItem, type SegmentGroupItemProps } from './segment-group-item';
 export { SegmentGroupItemContext, type SegmentGroupItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl, type SegmentGroupItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput, type SegmentGroupItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText, type SegmentGroupItemTextProps } from './segment-group-item-text';
 export { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
 export { SegmentGroupRoot, type SegmentGroupRootProps } from './segment-group-root';
-export { type UseSegmentGroupContext, useSegmentGroupContext } from './use-segment-group-context';
-export { type UseSegmentGroupItemContext, useSegmentGroupItemContext, } from './use-segment-group-item-context';
+export { useSegmentGroupContext, type UseSegmentGroupContext } from './use-segment-group-context';
+export { useSegmentGroupItemContext, type UseSegmentGroupItemContext, } from './use-segment-group-item-context';
 export * as SegmentGroup from './segment-group';

package/dist/components/segment-group/index.js

@@ -3,6 +3,7 @@ export { SegmentGroupIndicator } from './segment-group-indicator.js';
 export { SegmentGroupItem } from './segment-group-item.js';
 export { SegmentGroupItemContext } from './segment-group-item-context.js';
 export { SegmentGroupItemControl } from './segment-group-item-control.js';
+export { SegmentGroupItemHiddenInput } from './segment-group-item-hidden-input.js';
 export { SegmentGroupItemText } from './segment-group-item-text.js';
 export { SegmentGroupLabel } from './segment-group-label.js';
 export { SegmentGroupRoot } from './segment-group-root.js';

package/dist/components/segment-group/segment-group-item-control.cjs

@@ -20,10 +20,7 @@ const SegmentGroupItemControl = react.forwardRef(
       anatomy.segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ...segmentGroup.getItemHiddenInputProps(itemProps) })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 SegmentGroupItemControl.displayName = "SegmentGroupItemControl";

package/dist/components/segment-group/segment-group-item-control.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
@@ -16,10 +16,7 @@ const SegmentGroupItemControl = forwardRef(
       segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-      /* @__PURE__ */ jsx("input", { ...segmentGroup.getItemHiddenInputProps(itemProps) })
-    ] });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 SegmentGroupItemControl.displayName = "SegmentGroupItemControl";

package/dist/components/segment-group/segment-group-item-hidden-input.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 useSegmentGroupContext = require('./use-segment-group-context.cjs');
+const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
+
+const SegmentGroupItemHiddenInput = react.forwardRef((props, ref) => {
+  const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext.useSegmentGroupItemPropsContext();
+  const mergedProps = react$1.mergeProps(segmentGroup.getItemHiddenInputProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+});
+SegmentGroupItemHiddenInput.displayName = "SegmentGroupItemHiddenInput";
+
+exports.SegmentGroupItemHiddenInput = SegmentGroupItemHiddenInput;

package/dist/components/segment-group/segment-group-item-hidden-input.d.cts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface SegmentGroupItemHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const SegmentGroupItemHiddenInput: ForwardRefExoticComponent<SegmentGroupItemHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/segment-group/segment-group-item-hidden-input.d.ts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface SegmentGroupItemHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const SegmentGroupItemHiddenInput: ForwardRefExoticComponent<SegmentGroupItemHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/segment-group/segment-group-item-hidden-input.js

@@ -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.js';
+import { useSegmentGroupContext } from './use-segment-group-context.js';
+import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.js';
+
+const SegmentGroupItemHiddenInput = forwardRef((props, ref) => {
+  const segmentGroup = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = mergeProps(segmentGroup.getItemHiddenInputProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+});
+SegmentGroupItemHiddenInput.displayName = "SegmentGroupItemHiddenInput";
+
+export { SegmentGroupItemHiddenInput };

package/dist/components/segment-group/segment-group.cjs

@@ -7,6 +7,7 @@ const segmentGroupIndicator = require('./segment-group-indicator.cjs');
 const segmentGroupItem = require('./segment-group-item.cjs');
 const segmentGroupItemContext = require('./segment-group-item-context.cjs');
 const segmentGroupItemControl = require('./segment-group-item-control.cjs');
+const segmentGroupItemHiddenInput = require('./segment-group-item-hidden-input.cjs');
 const segmentGroupItemText = require('./segment-group-item-text.cjs');
 const segmentGroupLabel = require('./segment-group-label.cjs');
 const segmentGroupRoot = require('./segment-group-root.cjs');
@@ -18,6 +19,7 @@ exports.Indicator = segmentGroupIndicator.SegmentGroupIndicator;
 exports.Item = segmentGroupItem.SegmentGroupItem;
 exports.ItemContext = segmentGroupItemContext.SegmentGroupItemContext;
 exports.ItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.ItemHiddenInput = segmentGroupItemHiddenInput.SegmentGroupItemHiddenInput;
 exports.ItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.Label = segmentGroupLabel.SegmentGroupLabel;
 exports.Root = segmentGroupRoot.SegmentGroupRoot;

package/dist/components/segment-group/segment-group.d.cts

@@ -4,6 +4,7 @@ export { SegmentGroupIndicator as Indicator, type SegmentGroupIndicatorProps as
 export { SegmentGroupItem as Item, type SegmentGroupItemProps as ItemProps, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, type SegmentGroupItemContextProps as ItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl as ItemControl, type SegmentGroupItemControlProps as ItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput, type SegmentGroupItemHiddenInputProps as ItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText as ItemText, type SegmentGroupItemTextProps as ItemTextProps, } from './segment-group-item-text';
 export { SegmentGroupLabel as Label, type SegmentGroupLabelProps as LabelProps, } from './segment-group-label';
 export { SegmentGroupRoot as Root, type SegmentGroupRootProps as RootProps, } from './segment-group-root';

package/dist/components/segment-group/segment-group.d.ts

@@ -4,6 +4,7 @@ export { SegmentGroupIndicator as Indicator, type SegmentGroupIndicatorProps as
 export { SegmentGroupItem as Item, type SegmentGroupItemProps as ItemProps, } from './segment-group-item';
 export { SegmentGroupItemContext as ItemContext, type SegmentGroupItemContextProps as ItemContextProps, } from './segment-group-item-context';
 export { SegmentGroupItemControl as ItemControl, type SegmentGroupItemControlProps as ItemControlProps, } from './segment-group-item-control';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput, type SegmentGroupItemHiddenInputProps as ItemHiddenInputProps, } from './segment-group-item-hidden-input';
 export { SegmentGroupItemText as ItemText, type SegmentGroupItemTextProps as ItemTextProps, } from './segment-group-item-text';
 export { SegmentGroupLabel as Label, type SegmentGroupLabelProps as LabelProps, } from './segment-group-label';
 export { SegmentGroupRoot as Root, type SegmentGroupRootProps as RootProps, } from './segment-group-root';

package/dist/components/segment-group/segment-group.js

@@ -3,6 +3,7 @@ export { SegmentGroupIndicator as Indicator } from './segment-group-indicator.js
 export { SegmentGroupItem as Item } from './segment-group-item.js';
 export { SegmentGroupItemContext as ItemContext } from './segment-group-item-context.js';
 export { SegmentGroupItemControl as ItemControl } from './segment-group-item-control.js';
+export { SegmentGroupItemHiddenInput as ItemHiddenInput } from './segment-group-item-hidden-input.js';
 export { SegmentGroupItemText as ItemText } from './segment-group-item-text.js';
 export { SegmentGroupLabel as Label } from './segment-group-label.js';
 export { SegmentGroupRoot as Root } from './segment-group-root.js';

package/dist/components/slider/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
+const sliderHiddenInput = require('./slider-hidden-input.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
@@ -19,6 +20,7 @@ const slider = require('./slider.cjs');
 
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;

package/dist/components/slider/index.d.cts

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps } from './slider-context';
 export { SliderControl, type SliderControlProps } from './slider-control';
+export { SliderHiddenInput, type SliderHiddenInputProps } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelProps } from './slider-label';
 export { SliderMarker, type SliderMarkerProps } from './slider-marker';
 export { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
@@ -9,5 +10,5 @@ export { SliderRoot, type SliderRootProps } from './slider-root';
 export { SliderThumb, type SliderThumbProps } from './slider-thumb';
 export { SliderTrack, type SliderTrackProps } from './slider-track';
 export { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-export { type UseSliderContext, useSliderContext } from './use-slider-context';
+export { useSliderContext, type UseSliderContext } from './use-slider-context';
 export * as Slider from './slider';

package/dist/components/slider/index.d.ts

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps } from './slider-context';
 export { SliderControl, type SliderControlProps } from './slider-control';
+export { SliderHiddenInput, type SliderHiddenInputProps } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelProps } from './slider-label';
 export { SliderMarker, type SliderMarkerProps } from './slider-marker';
 export { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
@@ -9,5 +10,5 @@ export { SliderRoot, type SliderRootProps } from './slider-root';
 export { SliderThumb, type SliderThumbProps } from './slider-thumb';
 export { SliderTrack, type SliderTrackProps } from './slider-track';
 export { SliderValueText, type SliderValueTextProps } from './slider-value-text';
-export { type UseSliderContext, useSliderContext } from './use-slider-context';
+export { useSliderContext, type UseSliderContext } from './use-slider-context';
 export * as Slider from './slider';

package/dist/components/slider/index.js

@@ -1,5 +1,6 @@
 export { SliderContext } from './slider-context.js';
 export { SliderControl } from './slider-control.js';
+export { SliderHiddenInput } from './slider-hidden-input.js';
 export { SliderLabel } from './slider-label.js';
 export { SliderMarker } from './slider-marker.js';
 export { SliderMarkerGroup } from './slider-marker-group.js';

package/dist/components/slider/slider-hidden-input.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 factory = require('../factory.cjs');
+const useSliderContext = require('./use-slider-context.cjs');
+const useSliderThumbPropsContext = require('./use-slider-thumb-props-context.cjs');
+
+const SliderHiddenInput = react.forwardRef(
+  (props, ref) => {
+    const slider = useSliderContext.useSliderContext();
+    const thumbProps = useSliderThumbPropsContext.useSliderThumbPropsContext();
+    const mergedProps = react$1.mergeProps(slider.getHiddenInputProps(thumbProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  }
+);
+SliderHiddenInput.displayName = "SliderHiddenInput";
+
+exports.SliderHiddenInput = SliderHiddenInput;

package/dist/components/slider/slider-hidden-input.d.cts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface SliderHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const SliderHiddenInput: ForwardRefExoticComponent<SliderHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/slider/slider-hidden-input.d.ts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface SliderHiddenInputProps extends HTMLArkProps<'input'> {
+}
+export declare const SliderHiddenInput: ForwardRefExoticComponent<SliderHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/slider/slider-hidden-input.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useSliderContext } from './use-slider-context.js';
+import { useSliderThumbPropsContext } from './use-slider-thumb-props-context.js';
+
+const SliderHiddenInput = forwardRef(
+  (props, ref) => {
+    const slider = useSliderContext();
+    const thumbProps = useSliderThumbPropsContext();
+    const mergedProps = mergeProps(slider.getHiddenInputProps(thumbProps), props);
+    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  }
+);
+SliderHiddenInput.displayName = "SliderHiddenInput";
+
+export { SliderHiddenInput };

package/dist/components/slider/slider-thumb.cjs

@@ -9,15 +9,13 @@ const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useSliderContext = require('./use-slider-context.cjs');
+const useSliderThumbPropsContext = require('./use-slider-thumb-props-context.cjs');
 
 const SliderThumb = react.forwardRef((props, ref) => {
   const [thumbProps, localProps] = createSplitProps.createSplitProps()(props, ["index", "name"]);
   const slider = useSliderContext.useSliderContext();
   const mergedProps = react$1.mergeProps(slider.getThumbProps(thumbProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...slider.getHiddenInputProps(thumbProps) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(useSliderThumbPropsContext.SliderThumbPropsProvider, { value: thumbProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/dist/components/slider/slider-thumb.js

@@ -1,19 +1,17 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useSliderContext } from './use-slider-context.js';
+import { SliderThumbPropsProvider } from './use-slider-thumb-props-context.js';
 
 const SliderThumb = forwardRef((props, ref) => {
   const [thumbProps, localProps] = createSplitProps()(props, ["index", "name"]);
   const slider = useSliderContext();
   const mergedProps = mergeProps(slider.getThumbProps(thumbProps), localProps);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
-    /* @__PURE__ */ jsx("input", { ...slider.getHiddenInputProps(thumbProps) })
-  ] });
+  return /* @__PURE__ */ jsx(SliderThumbPropsProvider, { value: thumbProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 SliderThumb.displayName = "SliderThumb";
 

package/dist/components/slider/slider.cjs

@@ -11,6 +11,7 @@ const sliderRange = require('./slider-range.cjs');
 const sliderRoot = require('./slider-root.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
+const sliderHiddenInput = require('./slider-hidden-input.cjs');
 const sliderValueText = require('./slider-value-text.cjs');
 
 
@@ -24,4 +25,5 @@ exports.Range = sliderRange.SliderRange;
 exports.Root = sliderRoot.SliderRoot;
 exports.Thumb = sliderThumb.SliderThumb;
 exports.Track = sliderTrack.SliderTrack;
+exports.HiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.ValueText = sliderValueText.SliderValueText;

package/dist/components/slider/slider.d.cts

@@ -8,4 +8,5 @@ export { SliderRange as Range, type SliderRangeProps as RangeProps } from './sli
 export { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';
 export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';
 export { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';
+export { SliderHiddenInput as HiddenInput, type SliderHiddenInputProps as HiddenInputProps, } from './slider-hidden-input';
 export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.d.ts

@@ -8,4 +8,5 @@ export { SliderRange as Range, type SliderRangeProps as RangeProps } from './sli
 export { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';
 export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';
 export { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';
+export { SliderHiddenInput as HiddenInput, type SliderHiddenInputProps as HiddenInputProps, } from './slider-hidden-input';
 export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.js

@@ -7,4 +7,5 @@ export { SliderRange as Range } from './slider-range.js';
 export { SliderRoot as Root } from './slider-root.js';
 export { SliderThumb as Thumb } from './slider-thumb.js';
 export { SliderTrack as Track } from './slider-track.js';
+export { SliderHiddenInput as HiddenInput } from './slider-hidden-input.js';
 export { SliderValueText as ValueText } from './slider-value-text.js';

package/dist/components/slider/use-slider-thumb-props-context.cjs

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

package/dist/components/slider/use-slider-thumb-props-context.d.cts

@@ -0,0 +1,4 @@
+import { ThumbProps } from '@zag-js/slider';
+import { Provider } from 'react';
+
+export declare const SliderThumbPropsProvider: Provider<ThumbProps>, useSliderThumbPropsContext: () => ThumbProps;

package/dist/components/slider/use-slider-thumb-props-context.d.ts

@@ -0,0 +1,4 @@
+import { ThumbProps } from '@zag-js/slider';
+import { Provider } from 'react';
+
+export declare const SliderThumbPropsProvider: Provider<ThumbProps>, useSliderThumbPropsContext: () => ThumbProps;

package/dist/components/slider/use-slider-thumb-props-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [SliderThumbPropsProvider, useSliderThumbPropsContext] = createContext({
+  name: "SliderThumbPropsContext",
+  hookName: "useSliderThumbPropsContext",
+  providerName: "<SliderThumbPropsProvider />"
+});
+
+export { SliderThumbPropsProvider, useSliderThumbPropsContext };

package/dist/components/tags-input/tags-input-root.d.cts

@@ -5,4 +5,4 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, UseTagsInputProps> {
 }
-export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/tags-input/tags-input-root.d.ts

@@ -5,4 +5,4 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, UseTagsInputProps> {
 }
-export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLDivElement>>;

package/dist/index.cjs

@@ -261,6 +261,7 @@ const radioGroupIndicator = require('./components/radio-group/radio-group-indica
 const radioGroupItem = require('./components/radio-group/radio-group-item.cjs');
 const radioGroupItemContext = require('./components/radio-group/radio-group-item-context.cjs');
 const radioGroupItemControl = require('./components/radio-group/radio-group-item-control.cjs');
+const radioGroupItemHiddenInput = require('./components/radio-group/radio-group-item-hidden-input.cjs');
 const radioGroupItemText = require('./components/radio-group/radio-group-item-text.cjs');
 const radioGroupLabel = require('./components/radio-group/radio-group-label.cjs');
 const radioGroupRoot = require('./components/radio-group/radio-group-root.cjs');
@@ -282,6 +283,7 @@ const segmentGroupIndicator = require('./components/segment-group/segment-group-
 const segmentGroupItem = require('./components/segment-group/segment-group-item.cjs');
 const segmentGroupItemContext = require('./components/segment-group/segment-group-item-context.cjs');
 const segmentGroupItemControl = require('./components/segment-group/segment-group-item-control.cjs');
+const segmentGroupItemHiddenInput = require('./components/segment-group/segment-group-item-hidden-input.cjs');
 const segmentGroupItemText = require('./components/segment-group/segment-group-item-text.cjs');
 const segmentGroupLabel = require('./components/segment-group/segment-group-label.cjs');
 const segmentGroupRoot = require('./components/segment-group/segment-group-root.cjs');
@@ -310,6 +312,7 @@ const useSelectItemContext = require('./components/select/use-select-item-contex
 const select = require('./components/select/select.cjs');
 const sliderContext = require('./components/slider/slider-context.cjs');
 const sliderControl = require('./components/slider/slider-control.cjs');
+const sliderHiddenInput = require('./components/slider/slider-hidden-input.cjs');
 const sliderLabel = require('./components/slider/slider-label.cjs');
 const sliderMarker = require('./components/slider/slider-marker.cjs');
 const sliderMarkerGroup = require('./components/slider/slider-marker-group.cjs');
@@ -667,6 +670,7 @@ exports.RadioGroupIndicator = radioGroupIndicator.RadioGroupIndicator;
 exports.RadioGroupItem = radioGroupItem.RadioGroupItem;
 exports.RadioGroupItemContext = radioGroupItemContext.RadioGroupItemContext;
 exports.RadioGroupItemControl = radioGroupItemControl.RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = radioGroupItemHiddenInput.RadioGroupItemHiddenInput;
 exports.RadioGroupItemText = radioGroupItemText.RadioGroupItemText;
 exports.RadioGroupLabel = radioGroupLabel.RadioGroupLabel;
 exports.RadioGroupRoot = radioGroupRoot.RadioGroupRoot;
@@ -688,6 +692,7 @@ exports.SegmentGroupIndicator = segmentGroupIndicator.SegmentGroupIndicator;
 exports.SegmentGroupItem = segmentGroupItem.SegmentGroupItem;
 exports.SegmentGroupItemContext = segmentGroupItemContext.SegmentGroupItemContext;
 exports.SegmentGroupItemControl = segmentGroupItemControl.SegmentGroupItemControl;
+exports.SegmentGroupItemHiddenInput = segmentGroupItemHiddenInput.SegmentGroupItemHiddenInput;
 exports.SegmentGroupItemText = segmentGroupItemText.SegmentGroupItemText;
 exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
 exports.SegmentGroupRoot = segmentGroupRoot.SegmentGroupRoot;
@@ -716,6 +721,7 @@ exports.useSelectItemContext = useSelectItemContext.useSelectItemContext;
 exports.Select = select;
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;

package/dist/index.js

@@ -277,6 +277,7 @@ export { RadioGroupIndicator } from './components/radio-group/radio-group-indica
 export { RadioGroupItem } from './components/radio-group/radio-group-item.js';
 export { RadioGroupItemContext } from './components/radio-group/radio-group-item-context.js';
 export { RadioGroupItemControl } from './components/radio-group/radio-group-item-control.js';
+export { RadioGroupItemHiddenInput } from './components/radio-group/radio-group-item-hidden-input.js';
 export { RadioGroupItemText } from './components/radio-group/radio-group-item-text.js';
 export { RadioGroupLabel } from './components/radio-group/radio-group-label.js';
 export { RadioGroupRoot } from './components/radio-group/radio-group-root.js';
@@ -300,6 +301,7 @@ export { SegmentGroupIndicator } from './components/segment-group/segment-group-
 export { SegmentGroupItem } from './components/segment-group/segment-group-item.js';
 export { SegmentGroupItemContext } from './components/segment-group/segment-group-item-context.js';
 export { SegmentGroupItemControl } from './components/segment-group/segment-group-item-control.js';
+export { SegmentGroupItemHiddenInput } from './components/segment-group/segment-group-item-hidden-input.js';
 export { SegmentGroupItemText } from './components/segment-group/segment-group-item-text.js';
 export { SegmentGroupLabel } from './components/segment-group/segment-group-label.js';
 export { SegmentGroupRoot } from './components/segment-group/segment-group-root.js';
@@ -330,6 +332,7 @@ import * as select from './components/select/select.js';
 export { select as Select };
 export { SliderContext } from './components/slider/slider-context.js';
 export { SliderControl } from './components/slider/slider-control.js';
+export { SliderHiddenInput } from './components/slider/slider-hidden-input.js';
 export { SliderLabel } from './components/slider/slider-label.js';
 export { SliderMarker } from './components/slider/slider-marker.js';
 export { SliderMarkerGroup } from './components/slider/slider-marker-group.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.0.0-3",
+  "version": "3.0.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -499,74 +499,74 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@ark-ui/anatomy": "3.1.0",
-    "@zag-js/accordion": "0.50.0",
-    "@zag-js/avatar": "0.50.0",
-    "@zag-js/carousel": "0.50.0",
-    "@zag-js/checkbox": "0.50.0",
-    "@zag-js/clipboard": "0.50.0",
-    "@zag-js/collapsible": "0.50.0",
-    "@zag-js/color-picker": "0.50.0",
-    "@zag-js/color-utils": "0.50.0",
-    "@zag-js/combobox": "0.50.0",
-    "@zag-js/core": "0.50.0",
-    "@zag-js/date-picker": "0.50.0",
-    "@zag-js/date-utils": "0.50.0",
-    "@zag-js/dom-query": "0.50.0",
-    "@zag-js/dialog": "0.50.0",
-    "@zag-js/editable": "0.50.0",
-    "@zag-js/file-upload": "0.50.0",
-    "@zag-js/file-utils": "0.50.0",
-    "@zag-js/hover-card": "0.50.0",
-    "@zag-js/i18n-utils": "0.50.0",
-    "@zag-js/menu": "0.50.0",
-    "@zag-js/number-input": "0.50.0",
-    "@zag-js/pagination": "0.50.0",
-    "@zag-js/pin-input": "0.50.0",
-    "@zag-js/popover": "0.50.0",
-    "@zag-js/presence": "0.50.0",
-    "@zag-js/progress": "0.50.0",
-    "@zag-js/radio-group": "0.50.0",
-    "@zag-js/rating-group": "0.50.0",
-    "@zag-js/react": "0.50.0",
-    "@zag-js/select": "0.50.0",
-    "@zag-js/slider": "0.50.0",
-    "@zag-js/splitter": "0.50.0",
-    "@zag-js/switch": "0.50.0",
-    "@zag-js/tabs": "0.50.0",
-    "@zag-js/tags-input": "0.50.0",
-    "@zag-js/toast": "0.50.0",
-    "@zag-js/toggle-group": "0.50.0",
-    "@zag-js/tooltip": "0.50.0",
-    "@zag-js/tree-view": "0.50.0",
-    "@zag-js/types": "0.50.0"
+    "@ark-ui/anatomy": "3.2.0",
+    "@zag-js/accordion": "0.51.1",
+    "@zag-js/avatar": "0.51.1",
+    "@zag-js/carousel": "0.51.1",
+    "@zag-js/checkbox": "0.51.1",
+    "@zag-js/clipboard": "0.51.1",
+    "@zag-js/collapsible": "0.51.1",
+    "@zag-js/color-picker": "0.51.1",
+    "@zag-js/color-utils": "0.51.1",
+    "@zag-js/combobox": "0.51.1",
+    "@zag-js/core": "0.51.1",
+    "@zag-js/date-picker": "0.51.1",
+    "@zag-js/date-utils": "0.51.1",
+    "@zag-js/dom-query": "0.51.1",
+    "@zag-js/dialog": "0.51.1",
+    "@zag-js/editable": "0.51.1",
+    "@zag-js/file-upload": "0.51.1",
+    "@zag-js/file-utils": "0.51.1",
+    "@zag-js/hover-card": "0.51.1",
+    "@zag-js/i18n-utils": "0.51.1",
+    "@zag-js/menu": "0.51.1",
+    "@zag-js/number-input": "0.51.1",
+    "@zag-js/pagination": "0.51.1",
+    "@zag-js/pin-input": "0.51.1",
+    "@zag-js/popover": "0.51.1",
+    "@zag-js/presence": "0.51.1",
+    "@zag-js/progress": "0.51.1",
+    "@zag-js/radio-group": "0.51.1",
+    "@zag-js/rating-group": "0.51.1",
+    "@zag-js/react": "0.51.1",
+    "@zag-js/select": "0.51.1",
+    "@zag-js/slider": "0.51.1",
+    "@zag-js/splitter": "0.51.1",
+    "@zag-js/switch": "0.51.1",
+    "@zag-js/tabs": "0.51.1",
+    "@zag-js/tags-input": "0.51.1",
+    "@zag-js/toast": "0.51.1",
+    "@zag-js/toggle-group": "0.51.1",
+    "@zag-js/tooltip": "0.51.1",
+    "@zag-js/tree-view": "0.51.1",
+    "@zag-js/types": "0.51.1"
   },
   "devDependencies": {
     "@biomejs/biome": "1.7.3",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.1.1",
-    "@storybook/addon-essentials": "8.1.1",
-    "@storybook/react-vite": "8.1.1",
-    "@storybook/react": "8.1.1",
+    "@storybook/addon-a11y": "8.1.3",
+    "@storybook/addon-essentials": "8.1.3",
+    "@storybook/react-vite": "8.1.3",
+    "@storybook/react": "8.1.3",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-react": "4.3.0",
     "globby": "14.0.1",
     "jsdom": "24.0.0",
-    "lucide-react": "0.378.0",
+    "lucide-react": "0.379.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.51.4",
-    "release-it": "17.2.1",
+    "react-hook-form": "7.51.5",
+    "release-it": "17.3.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.1.1",
+    "storybook": "8.1.3",
     "typescript": "5.4.5",
     "vite": "5.2.11",
     "vite-plugin-dts": "3.9.1",