@ark-ui/react 1.0.0-beta.2 → 1.0.0-beta.4

package/CHANGELOG.md

@@ -1,11 +1,27 @@
 ---
 id: changelog
 name: Changelog
-description: All notable changes to this project will be documented in this file. The format is based on Keep a Changelog and this project adheres to and this project adheres to Semantic Versioning.
+description: All notable changes to this project will be documented in this file.
 ---
 
 ## [Unreleased]
 
+## [1.0.0-beta.4] - 2023-10-31
+
+### Fixed
+
+- Resolved an accessibility issue with `Select`
+
+## [1.0.0-beta.3] - 2023-10-26
+
+### Added
+
+- Added support to lazy mount the `DatePicker` and `ColorPicker` components using the `Presence` component
+
+### Changed
+
+- Improved accessibility of all disclosure components when lazy mounting is enabled.
+
 ## [1.0.0-beta.2] - 2023-10-25
 
 ### Added
@@ -183,7 +199,7 @@ import { anatomy } from '@ark-ui/anatomy/accordion'
 
 ### Added
 
-- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/react/tabs` instead of the full `@ark-ui/react` package. This is a significant feature for those working with bundlers that do not support tree-shaking. By allowing imports of individual components, we ensure a reduced bundle size when the full package import is not necessary.
+- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/react/src/srctabs` instead of the full `@ark-ui/react` package. This is a significant feature for those working with bundlers that do not support tree-shaking. By allowing imports of individual components, we ensure a reduced bundle size when the full package import is not necessary.
 
 ## [0.7.0] - 2023-06-23
 

package/accordion/accordion-item-content.cjs

@@ -15,8 +15,17 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const AccordionItemContent = react.forwardRef(
   function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
-    const api = accordionItemContext.useAccordionItemContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps }) });
+    const api = accordionContext.useAccordionContext();
+    const item = accordionItemContext.useAccordionItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.Presence,
+      {
+        present: item.isOpen,
+        ...presenceProps,
+        fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.getItemContentProps(item) }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps })
+      }
+    );
   }
 );
 const AccordionInnerContent = react.forwardRef(

package/accordion/accordion-item-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface AccordionItemContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const AccordionItemContent: ForwardRefExoticComponent<AccordionItemContentProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item-content.mjs

@@ -11,8 +11,17 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const AccordionItemContent = forwardRef(
   function AccordionItemContent2(props, ref) {
     const [presenceProps, localProps] = splitPresenceProps(props);
-    const api = useAccordionItemContext();
-    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps }) });
+    const api = useAccordionContext();
+    const item = useAccordionItemContext();
+    return /* @__PURE__ */ jsx(
+      Presence,
+      {
+        present: item.isOpen,
+        ...presenceProps,
+        fallback: /* @__PURE__ */ jsx("div", { ...api.getItemContentProps(item) }),
+        children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps })
+      }
+    );
   }
 );
 const AccordionInnerContent = forwardRef(

package/carousel/carousel.stories.d.ts

@@ -5,3 +5,5 @@ type CarouselType = typeof Carousel;
 declare const meta: Meta<CarouselType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Customized: () => JSX.Element;

package/color-picker/color-picker-content.cjs

@@ -7,15 +7,24 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const ColorPickerContent = react.forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+    const api = colorPickerContext.useColorPickerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(ColorPickerInnerContent, { ref, ...localProps }) });
+  }
+);
+ColorPickerContent.displayName = "ColorPickerContent";
+const ColorPickerInnerContent = react.forwardRef(
+  function ColorPickerInnerContent2(props, ref) {
     const api = colorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-ColorPickerContent.displayName = "ColorPickerContent";
 
 exports.ColorPickerContent = ColorPickerContent;

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

@@ -1,6 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface ColorPickerContentProps extends HTMLArkProps<'div'> {
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export interface ColorPickerContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const ColorPickerContent: ForwardRefExoticComponent<ColorPickerContentProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-content.mjs

@@ -3,15 +3,24 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const ColorPickerContent = forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useColorPickerContext();
+    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(ColorPickerInnerContent, { ref, ...localProps }) });
+  }
+);
+ColorPickerContent.displayName = "ColorPickerContent";
+const ColorPickerInnerContent = forwardRef(
+  function ColorPickerInnerContent2(props, ref) {
     const api = useColorPickerContext();
     const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-ColorPickerContent.displayName = "ColorPickerContent";
 
 export { ColorPickerContent };

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

@@ -5,3 +5,4 @@ type ColorPickerType = typeof ColorPicker;
 declare const meta: Meta<ColorPickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/combobox/combobox-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const ComboboxContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = comboboxContext.useComboboxContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 const ComboboxInnerContent = react.forwardRef(

package/combobox/combobox-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface ComboboxContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const ComboboxContent: ForwardRefExoticComponent<ComboboxContentProps & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const ComboboxContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useComboboxContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(ComboboxInnerContent, { ref, ...localProps }) });
 });
 ComboboxContent.displayName = "ComboboxContent";
 const ComboboxInnerContent = forwardRef(

package/date-picker/date-picker-content.cjs

@@ -7,15 +7,24 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const DatePickerContent = react.forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+    const api = datePickerContext.useDatePickerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInnerContent, { ref, ...localProps }) });
+  }
+);
+DatePickerContent.displayName = "DatePickerContent";
+const DatePickerInnerContent = react.forwardRef(
+  function DatePickerInnerContent2(props, ref) {
     const api = datePickerContext.useDatePickerContext();
     const mergedProps = react$1.mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
-DatePickerContent.displayName = "DatePickerContent";
 
 exports.DatePickerContent = DatePickerContent;

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

@@ -1,6 +1,8 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export interface DatePickerContentProps extends HTMLArkProps<'div'> {
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export interface DatePickerContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const DatePickerContent: ForwardRefExoticComponent<DatePickerContentProps & RefAttributes<HTMLDivElement>>;

package/date-picker/date-picker-content.mjs

@@ -3,15 +3,24 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const DatePickerContent = forwardRef(
   (props, ref) => {
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useDatePickerContext();
+    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DatePickerInnerContent, { ref, ...localProps }) });
+  }
+);
+DatePickerContent.displayName = "DatePickerContent";
+const DatePickerInnerContent = forwardRef(
+  function DatePickerInnerContent2(props, ref) {
     const api = useDatePickerContext();
     const mergedProps = mergeProps(api.contentProps, props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
-DatePickerContent.displayName = "DatePickerContent";
 
 export { DatePickerContent };

package/date-picker/date-picker.cjs

@@ -16,6 +16,7 @@ const DatePicker = react.forwardRef((props, ref) => {
   const [datePickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
+      "closeOnSelect",
       "defaultValue",
       "dir",
       "disabled",
@@ -25,7 +26,6 @@ const DatePicker = react.forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "inline",
       "isDateUnavailable",
       "isDateUnavailable",
       "locale",

package/date-picker/date-picker.mjs

@@ -12,6 +12,7 @@ const DatePicker = forwardRef((props, ref) => {
   const [datePickerProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
+      "closeOnSelect",
       "defaultValue",
       "dir",
       "disabled",
@@ -21,7 +22,6 @@ const DatePicker = forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "inline",
       "isDateUnavailable",
       "isDateUnavailable",
       "locale",

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

@@ -5,3 +5,4 @@ type DatePickerType = typeof DatePicker;
 declare const meta: Meta<DatePickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const RangeWithSingleGrid: () => JSX.Element;

package/dialog/dialog-backdrop.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const DialogBackdrop = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerBackdrop, { ref, ...localProps }) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 const DialogInnerBackdrop = react.forwardRef(

package/dialog/dialog-backdrop.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface DialogBackdropProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const DialogBackdrop: ForwardRefExoticComponent<DialogBackdropProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-backdrop.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const DialogBackdrop = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(DialogInnerBackdrop, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.backdropProps }), children: /* @__PURE__ */ jsx(DialogInnerBackdrop, { ref, ...localProps }) });
 });
 DialogBackdrop.displayName = "DialogBackdrop";
 const DialogInnerBackdrop = forwardRef(

package/dialog/dialog-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const DialogContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = dialogContext.useDialogContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(DialogInnerContent, { ref, ...localProps }) });
 });
 DialogContent.displayName = "DialogContent";
 const DialogInnerContent = react.forwardRef(

package/dialog/dialog-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface DialogContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const DialogContent: ForwardRefExoticComponent<DialogContentProps & RefAttributes<HTMLDivElement>>;

package/dialog/dialog-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const DialogContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useDialogContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(DialogInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(DialogInnerContent, { ref, ...localProps }) });
 });
 DialogContent.displayName = "DialogContent";
 const DialogInnerContent = forwardRef(

package/hover-card/hover-card-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const HoverCardContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = hoverCardContext.useHoverCardContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardInnerContent, { ref, ...localProps }) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 const HoverCardInnerContent = react.forwardRef(

package/hover-card/hover-card-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface HoverCardContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const HoverCardContent: ForwardRefExoticComponent<HoverCardContentProps & RefAttributes<HTMLDivElement>>;

package/hover-card/hover-card-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const HoverCardContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useHoverCardContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(HoverCardInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(HoverCardInnerContent, { ref, ...localProps }) });
 });
 HoverCardContent.displayName = "HoverCardContent";
 const HoverCardInnerContent = forwardRef(

package/index.cjs

@@ -217,10 +217,10 @@ const sliderControl = require('./slider/slider-control.cjs');
 const sliderLabel = require('./slider/slider-label.cjs');
 const sliderMarker = require('./slider/slider-marker.cjs');
 const sliderMarkerGroup = require('./slider/slider-marker-group.cjs');
-const sliderOutput = require('./slider/slider-output.cjs');
 const sliderRange = require('./slider/slider-range.cjs');
 const sliderThumb = require('./slider/slider-thumb.cjs');
 const sliderTrack = require('./slider/slider-track.cjs');
+const sliderValueText = require('./slider/slider-value-text.cjs');
 const sliderContext = require('./slider/slider-context.cjs');
 const splitterPanel = require('./splitter/splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
@@ -475,10 +475,10 @@ exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
-exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
+exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSliderContext = sliderContext.useSliderContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;

package/index.mjs

@@ -213,10 +213,10 @@ export { SliderControl } from './slider/slider-control.mjs';
 export { SliderLabel } from './slider/slider-label.mjs';
 export { SliderMarker } from './slider/slider-marker.mjs';
 export { SliderMarkerGroup } from './slider/slider-marker-group.mjs';
-export { SliderOutput } from './slider/slider-output.mjs';
 export { SliderRange } from './slider/slider-range.mjs';
 export { SliderThumb } from './slider/slider-thumb.mjs';
 export { SliderTrack } from './slider/slider-track.mjs';
+export { SliderValueText } from './slider/slider-value-text.mjs';
 export { useSliderContext } from './slider/slider-context.mjs';
 export { SplitterPanel } from './splitter/splitter-panel.mjs';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';

package/menu/index.d.ts

@@ -23,7 +23,7 @@ declare const Menu: ((props: MenuProps) => JSX.Element) & {
     ContextTrigger: ForwardRefExoticComponent<MenuContextTriggerProps & RefAttributes<HTMLButtonElement>>;
     Item: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
     ItemGroup: ForwardRefExoticComponent<MenuItemGroupProps & RefAttributes<HTMLDivElement>>;
-    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
     OptionItem: ForwardRefExoticComponent<MenuOptionItemProps & RefAttributes<HTMLDivElement>>;
     Positioner: ForwardRefExoticComponent<MenuPositionerProps & RefAttributes<HTMLDivElement>>;
     Separator: ForwardRefExoticComponent<MenuSeparatorProps & RefAttributes<HTMLHRElement>>;

package/menu/menu-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const MenuContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = menuContext.useMenuContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
 const MenuInnerContent = react.forwardRef(

package/menu/menu-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const MenuContent: ForwardRefExoticComponent<MenuContentProps & RefAttributes<HTMLDivElement>>;

package/menu/menu-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const MenuContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
 const MenuInnerContent = forwardRef(

package/menu/menu-item-group-label.cjs

@@ -15,7 +15,7 @@ const MenuItemGroupLabel = react.forwardRef(
     const [labelProps, htmlProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
     const api = menuContext.useMenuContext();
     const mergedProps = react$1.mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

package/menu/menu-item-group-label.d.ts

@@ -2,10 +2,10 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-interface MenuItemGroupLabelParams {
+interface ItemGroupLabelProps {
     htmlFor: string;
 }
-export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'label'>, MenuItemGroupLabelParams> {
+export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
 }
-export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
 export {};

package/menu/menu-item-group-label.mjs

@@ -11,7 +11,7 @@ const MenuItemGroupLabel = forwardRef(
     const [labelProps, htmlProps] = createSplitProps()(props, ["htmlFor"]);
     const api = useMenuContext();
     const mergedProps = mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

package/menu/menu.stories.d.ts

@@ -5,7 +5,10 @@ type MenuType = typeof Menu;
 declare const meta: Meta<MenuType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
 export declare const Group: () => JSX.Element;
-export declare const Options: () => JSX.Element;
+export declare const Separator: () => JSX.Element;
+export declare const ContextMenu: () => JSX.Element;
 export declare const SubMenu: () => JSX.Element;
+export declare const Options: () => JSX.Element;
 export declare const ComplexSubMenu: () => JSX.Element;

package/number-input/number-input.stories.d.ts

@@ -5,5 +5,10 @@ type NumberInputType = typeof NumberInput.Root;
 declare const meta: Meta<NumberInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const MouseWheel: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
 export declare const FractionDigits: () => JSX.Element;
+export declare const Scrubber: () => JSX.Element;
+export declare const MouseWheel: () => JSX.Element;
+export declare const NoClamp: () => JSX.Element;
+export declare const FormUsage: () => JSX.Element;
+export declare const Formatted: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,74 +60,74 @@
   },
   "dependencies": {
     "@ark-ui/anatomy": "1.0.0-beta.1",
-    "@zag-js/accordion": "0.26.0",
-    "@zag-js/anatomy": "0.26.0",
-    "@zag-js/avatar": "0.26.0",
-    "@zag-js/carousel": "0.26.0",
-    "@zag-js/checkbox": "0.26.0",
-    "@zag-js/color-picker": "0.26.0",
-    "@zag-js/color-utils": "0.26.0",
-    "@zag-js/combobox": "0.26.0",
-    "@zag-js/core": "0.26.0",
-    "@zag-js/date-picker": "0.26.0",
-    "@zag-js/date-utils": "0.26.0",
-    "@zag-js/dialog": "0.26.0",
-    "@zag-js/editable": "0.26.0",
-    "@zag-js/hover-card": "0.26.0",
-    "@zag-js/menu": "0.26.0",
-    "@zag-js/number-input": "0.26.0",
-    "@zag-js/pagination": "0.26.0",
-    "@zag-js/pin-input": "0.26.0",
-    "@zag-js/popover": "0.26.0",
-    "@zag-js/presence": "0.26.0",
-    "@zag-js/radio-group": "0.26.0",
-    "@zag-js/rating-group": "0.26.0",
-    "@zag-js/react": "0.26.0",
-    "@zag-js/select": "0.26.0",
-    "@zag-js/slider": "0.26.0",
-    "@zag-js/splitter": "0.26.0",
-    "@zag-js/switch": "0.26.0",
-    "@zag-js/tabs": "0.26.0",
-    "@zag-js/tags-input": "0.26.0",
-    "@zag-js/toast": "0.26.0",
-    "@zag-js/toggle-group": "0.26.0",
-    "@zag-js/tooltip": "0.26.0",
-    "@zag-js/types": "0.26.0"
+    "@zag-js/accordion": "0.27.1",
+    "@zag-js/anatomy": "0.27.1",
+    "@zag-js/avatar": "0.27.1",
+    "@zag-js/carousel": "0.27.1",
+    "@zag-js/checkbox": "0.27.1",
+    "@zag-js/color-picker": "0.27.1",
+    "@zag-js/color-utils": "0.27.1",
+    "@zag-js/combobox": "0.27.1",
+    "@zag-js/core": "0.27.1",
+    "@zag-js/date-picker": "0.27.1",
+    "@zag-js/date-utils": "0.27.1",
+    "@zag-js/dialog": "0.27.1",
+    "@zag-js/editable": "0.27.1",
+    "@zag-js/hover-card": "0.27.1",
+    "@zag-js/menu": "0.27.1",
+    "@zag-js/number-input": "0.27.1",
+    "@zag-js/pagination": "0.27.1",
+    "@zag-js/pin-input": "0.27.1",
+    "@zag-js/popover": "0.27.1",
+    "@zag-js/presence": "0.27.1",
+    "@zag-js/radio-group": "0.27.1",
+    "@zag-js/rating-group": "0.27.1",
+    "@zag-js/react": "0.27.1",
+    "@zag-js/select": "0.27.1",
+    "@zag-js/slider": "0.27.1",
+    "@zag-js/splitter": "0.27.1",
+    "@zag-js/switch": "0.27.1",
+    "@zag-js/tabs": "0.27.1",
+    "@zag-js/tags-input": "0.27.1",
+    "@zag-js/toast": "0.27.1",
+    "@zag-js/toggle-group": "0.27.1",
+    "@zag-js/tooltip": "0.27.1",
+    "@zag-js/types": "0.27.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.5.1",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addons": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/react-vite": "7.5.1",
+    "@storybook/addon-a11y": "7.5.2",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addons": "7.5.2",
+    "@storybook/react": "7.5.2",
+    "@storybook/react-vite": "7.5.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
     "@types/jsdom": "21.1.4",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-react": "4.1.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.288.0",
+    "lucide-react": "0.291.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.5.1",
+    "storybook": "7.5.2",
     "typescript": "5.2.2",
-    "vite": "4.4.11",
-    "vite-plugin-dts": "3.6.0",
+    "vite": "4.5.0",
+    "vite-plugin-dts": "3.6.3",
     "vitest": "0.34.6"
   },
   "peerDependencies": {

package/pin-input/pin-input.stories.d.ts

@@ -5,3 +5,8 @@ type PinInputType = typeof PinInput;
 declare const meta: Meta<PinInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const Blurred: () => JSX.Element;
+export declare const OTPMode: () => JSX.Element;
+export declare const WithMask: () => JSX.Element;

package/popover/popover-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const PopoverContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
 const PopoverInnerContent = react.forwardRef(

package/popover/popover-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const PopoverContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
 });
 PopoverContent.displayName = "PopoverContent";
 const PopoverInnerContent = forwardRef(

package/popover/popover.stories.d.ts

@@ -5,8 +5,11 @@ type PopoverType = typeof Popover;
 declare const meta: Meta<PopoverType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Portalled: () => JSX.Element;
+export declare const OnOpenChange: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
 export declare const RenderFn: () => JSX.Element;
 export declare const Arrow: () => JSX.Element;
-export declare const Positioning: () => JSX.Element;
 export declare const CloseBehavior: () => JSX.Element;
+export declare const Positioning: () => JSX.Element;
+export declare const Modal: () => JSX.Element;

package/presence/index.d.ts

@@ -2,8 +2,8 @@ import { ReactElement, JSXElementConstructor } from 'react';
 /// <reference types="react" />
 import { type PresenceProps } from './presence';
 import { splitPresenceProps } from './split-presence-props';
-declare const Presence: ((props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null) & {
-    Root: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+declare const Presence: ((props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined) & {
+    Root: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;
 };
 export { Presence, splitPresenceProps };
 export type { PresenceProps };

package/presence/presence.cjs

@@ -9,14 +9,14 @@ const createSplitProps = require('../create-split-props.cjs');
 const usePresence = require('./use-presence.cjs');
 
 const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, unmountOnExit }] = createSplitProps.createSplitProps()(props, ["present", "onExitComplete"]);
+  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps.createSplitProps()(props, ["present", "onExitComplete"]);
   const api = usePresence.usePresence(presenceProps);
   const wasEverPresent = react.useRef(false);
   if (api.isPresent) {
     wasEverPresent.current = true;
   }
   if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return null;
+    return fallback;
   }
   const onlyChild = react.Children.only(children);
   return react.cloneElement(onlyChild, {

package/presence/presence.d.ts

@@ -15,5 +15,9 @@ export interface PresenceProps extends UsePresenceProps {
      * @default false
      */
     unmountOnExit?: boolean;
+    /**
+     * A fallback to render the component is not present.
+     */
+    fallback?: ReactElement;
 }
-export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+export declare const Presence: (props: PresenceProps) => ReactElement<any, string | JSXElementConstructor<any>> | undefined;

package/presence/presence.mjs

@@ -5,14 +5,14 @@ import { createSplitProps } from '../create-split-props.mjs';
 import { usePresence } from './use-presence.mjs';
 
 const Presence = (props) => {
-  const [presenceProps, { children, lazyMount, unmountOnExit }] = createSplitProps()(props, ["present", "onExitComplete"]);
+  const [presenceProps, { children, lazyMount, fallback, unmountOnExit }] = createSplitProps()(props, ["present", "onExitComplete"]);
   const api = usePresence(presenceProps);
   const wasEverPresent = useRef(false);
   if (api.isPresent) {
     wasEverPresent.current = true;
   }
   if (!api.isPresent && !wasEverPresent.current && lazyMount || unmountOnExit && !api.isPresent && wasEverPresent.current) {
-    return null;
+    return fallback;
   }
   const onlyChild = Children.only(children);
   return cloneElement(onlyChild, {

package/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { PresenceProps } from './presence';
-export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Omit<PresenceProps, "children">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];
+export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Omit<PresenceProps, "children" | "fallback">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];

package/radio-group/radio-group.stories.d.ts

@@ -5,3 +5,6 @@ type RadioGroupType = typeof RadioGroup;
 declare const meta: Meta<RadioGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const OnChange: () => JSX.Element;

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

@@ -5,3 +5,9 @@ type RatingGroupType = typeof RatingGroup;
 declare const meta: Meta<RatingGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const HalfRatings: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const ReadOnly: () => JSX.Element;
+export declare const FormUsage: () => JSX.Element;

package/segment-group/segment-group.stories.d.ts

@@ -5,3 +5,6 @@ type SegmentGroupType = typeof SegmentGroup;
 declare const meta: Meta<SegmentGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

package/select/select-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const SelectContent = react.forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
 const SelectInnerContent = react.forwardRef(

package/select/select-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface SelectContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const SelectContent: ForwardRefExoticComponent<SelectContentProps & RefAttributes<HTMLDivElement>>;

package/select/select-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const SelectContent = forwardRef((props, ref) => {
   const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(SelectInnerContent, { ref, ...localProps }) });
 });
 SelectContent.displayName = "SelectContent";
 const SelectInnerContent = forwardRef(

package/select/select-control.cjs

@@ -12,7 +12,10 @@ const selectContext = require('./select-context.cjs');
 const SelectControl = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })
+  ] });
 });
 SelectControl.displayName = "SelectControl";
 

package/select/select-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';
@@ -8,7 +8,10 @@ import { useSelectContext } from './select-context.mjs';
 const SelectControl = forwardRef((props, ref) => {
   const api = useSelectContext();
   const mergedProps = mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })
+  ] });
 });
 SelectControl.displayName = "SelectControl";
 

package/select/select.stories.d.ts

@@ -6,5 +6,5 @@ declare const meta: Meta<SelectType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Advanced: () => JSX.Element;
-export declare const Controlled: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/slider/index.cjs

@@ -9,10 +9,10 @@ const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
-const sliderOutput = require('./slider-output.cjs');
 const sliderRange = require('./slider-range.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
+const sliderValueText = require('./slider-value-text.cjs');
 
 const Slider = Object.assign(slider.Slider, {
   Root: slider.Slider,
@@ -20,10 +20,10 @@ const Slider = Object.assign(slider.Slider, {
   Label: sliderLabel.SliderLabel,
   Marker: sliderMarker.SliderMarker,
   MarkerGroup: sliderMarkerGroup.SliderMarkerGroup,
-  Output: sliderOutput.SliderOutput,
   Range: sliderRange.SliderRange,
   Thumb: sliderThumb.SliderThumb,
-  Track: sliderTrack.SliderTrack
+  Track: sliderTrack.SliderTrack,
+  ValueText: sliderValueText.SliderValueText
 });
 
 exports.useSliderContext = sliderContext.useSliderContext;
@@ -31,8 +31,8 @@ exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
-exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
+exports.SliderValueText = sliderValueText.SliderValueText;
 exports.Slider = Slider;

package/slider/index.d.ts

@@ -6,20 +6,20 @@ import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
 import { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
-import { SliderOutput, type SliderOutputProps } from './slider-output';
 import { SliderRange, type SliderRangeProps } from './slider-range';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
+import { SliderValueText, type SliderValueTextProps } from './slider-value-text';
 declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;
     Marker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;
     MarkerGroup: ForwardRefExoticComponent<SliderMarkerGroupProps & RefAttributes<HTMLDivElement>>;
-    Output: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;
     Range: ForwardRefExoticComponent<SliderRangeProps & RefAttributes<HTMLDivElement>>;
     Thumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;
     Track: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;
+    ValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;
 };
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
-export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueTextProps, };

package/slider/index.mjs

@@ -5,10 +5,10 @@ import { SliderControl } from './slider-control.mjs';
 import { SliderLabel } from './slider-label.mjs';
 import { SliderMarker } from './slider-marker.mjs';
 import { SliderMarkerGroup } from './slider-marker-group.mjs';
-import { SliderOutput } from './slider-output.mjs';
 import { SliderRange } from './slider-range.mjs';
 import { SliderThumb } from './slider-thumb.mjs';
 import { SliderTrack } from './slider-track.mjs';
+import { SliderValueText } from './slider-value-text.mjs';
 
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,
@@ -16,10 +16,10 @@ const Slider = Object.assign(Slider$1, {
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
-  Output: SliderOutput,
   Range: SliderRange,
   Thumb: SliderThumb,
-  Track: SliderTrack
+  Track: SliderTrack,
+  ValueText: SliderValueText
 });
 
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText };

package/slider/{slider-output.cjs → slider-value-text.cjs}

@@ -10,13 +10,13 @@ const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderOutput = react.forwardRef((props, ref) => {
+const SliderValueText = react.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(api.outputProps, rest);
+  const mergedProps = react$1.mergeProps(api.valueTextProps, rest);
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
 });
-SliderOutput.displayName = "SliderOutput";
+SliderValueText.displayName = "SliderValueText";
 
-exports.SliderOutput = SliderOutput;
+exports.SliderValueText = SliderValueText;

package/slider/{slider-output.d.ts → slider-value-text.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSliderReturn } from './use-slider';
-export interface SliderOutputProps extends Assign<HTMLArkProps<'output'>, {
+export interface SliderValueTextProps extends Assign<HTMLArkProps<'output'>, {
     children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
 }> {
 }
-export declare const SliderOutput: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;
+export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/slider/{slider-output.mjs → slider-value-text.mjs}

@@ -6,13 +6,13 @@ import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
-const SliderOutput = forwardRef((props, ref) => {
+const SliderValueText = forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = useSliderContext();
-  const mergedProps = mergeProps(api.outputProps, rest);
+  const mergedProps = mergeProps(api.valueTextProps, rest);
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
 });
-SliderOutput.displayName = "SliderOutput";
+SliderValueText.displayName = "SliderValueText";
 
-export { SliderOutput };
+export { SliderValueText };

package/slider/slider.stories.d.ts

@@ -1,8 +1,15 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Slider } from '.';
+import { Slider } from './';
 type SliderType = typeof Slider;
 declare const meta: Meta<SliderType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const WithDefaultValue: () => JSX.Element;
+export declare const WithMarks: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
+export declare const Step: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;
+export declare const CenterOrigin: () => JSX.Element;
+export declare const Advanced: () => JSX.Element;

package/tabs/tab-content.d.ts

@@ -3,7 +3,7 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type ContentProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
-export interface TabContentProps extends InnerTabContentProps, Omit<TabPresenceProps, 'children'> {
+export interface TabContentProps extends InnerTabContentProps, Omit<TabPresenceProps, 'children' | 'fallback'> {
 }
 export declare const TabContent: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
 type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;

package/tags-input/tags-input.stories.d.ts

@@ -6,3 +6,9 @@ declare const meta: Meta<TagsInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
+export declare const MaxWithOverflow: () => JSX.Element;
+export declare const Validated: () => JSX.Element;
+export declare const BlurBehavior: () => JSX.Element;
+export declare const PasteBehavior: () => JSX.Element;
+export declare const DisabledEditing: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;

package/toast/toast.stories.d.ts

@@ -3,3 +3,5 @@ import type { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const CustomRender: () => JSX.Element;

package/toggle-group/toggle-group.stories.d.ts

@@ -5,5 +5,5 @@ type ToggleGroupType = typeof ToggleGroup;
 declare const meta: Meta<ToggleGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Initialvalue: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;

package/tooltip/tooltip-content.cjs

@@ -14,7 +14,7 @@ const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const TooltipContent = react.forwardRef((props, ref) => {
   const [presenceProps, tooltipContentProps] = splitPresenceProps.splitPresenceProps(props);
   const api = tooltipContext.useTooltipContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
 });
 TooltipContent.displayName = "TooltipContent";
 const TooltipInnerContent = react.forwardRef(

package/tooltip/tooltip-content.d.ts

@@ -3,6 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type PresenceProps } from '../presence';
 import type { Assign } from '../types';
-export interface TooltipContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>> {
+export interface TooltipContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
 }
 export declare const TooltipContent: ForwardRefExoticComponent<TooltipContentProps & RefAttributes<HTMLDivElement>>;

package/tooltip/tooltip-content.mjs

@@ -10,7 +10,7 @@ import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 const TooltipContent = forwardRef((props, ref) => {
   const [presenceProps, tooltipContentProps] = splitPresenceProps(props);
   const api = useTooltipContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
+  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(TooltipInnerContent, { ref, ...tooltipContentProps }) });
 });
 TooltipContent.displayName = "TooltipContent";
 const TooltipInnerContent = forwardRef(