@ark-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

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-item.d.ts

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/select';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface SelectItemProps extends Assign<HTMLArkProps<'div'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
+    children?: ReactNode | ((state: ItemState) => ReactNode);
 }>, ItemProps {
 }
 export declare const SelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLDivElement>>;

package/select/select-positioner.cjs

@@ -7,11 +7,17 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectPositioner = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(api.positionerProps, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select-positioner.mjs

@@ -3,11 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const SelectPositioner = forwardRef((props, ref) => {
   const api = useSelectContext();
   const mergedProps = mergeProps(api.positionerProps, props);
+  const presenceApi = usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SelectPositioner.displayName = "SelectPositioner";

package/select/select.cjs

@@ -8,13 +8,18 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const SelectImpl = (props, ref) => {
+  const [presenceProps, selectProps] = splitPresenceProps.splitPresenceProps(props);
   const [useSelectProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
-    props,
+    selectProps,
     [
       "closeOnSelect",
       "defaultValue",
@@ -47,9 +52,10 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect.useSelect(useSelectProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(selectContext.SelectProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Select = react.forwardRef(SelectImpl);
 

package/select/select.d.ts

@@ -1,10 +1,11 @@
 import { type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';
 import { type UseSelectProps, type UseSelectReturn } from './use-select';
-export interface SelectProps<T extends CollectionItem> extends Assign<HTMLArkProps<'div'>, UseSelectProps<T> & {
-    children?: ReactNode | ((state: UseSelectReturn<T>) => ReactNode);
-}> {
+export interface SelectProps<T extends CollectionItem> extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSelectReturn<T>) => ReactNode);
+}>, UseSelectProps<T>>, UsePresenceProps {
 }
 export interface SelectComponent {
     <T extends CollectionItem>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>): JSX.Element;

package/select/select.mjs

@@ -4,13 +4,18 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const SelectImpl = (props, ref) => {
+  const [presenceProps, selectProps] = splitPresenceProps(props);
   const [useSelectProps, { children, ...localProps }] = createSplitProps()(
-    props,
+    selectProps,
     [
       "closeOnSelect",
       "defaultValue",
@@ -43,9 +48,10 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect(useSelectProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
-  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });
 };
 const Select = forwardRef(SelectImpl);
 

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}

@@ -7,16 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 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 view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
+  const mergedProps = react$1.mergeProps(api.valueTextProps, rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || api.value.join(", ") });
 });
-SliderOutput.displayName = "SliderOutput";
+SliderValueText.displayName = "SliderValueText";
 
-exports.SliderOutput = SliderOutput;
+exports.SliderValueText = SliderValueText;

package/slider/slider-value-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface SliderValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/slider/slider-value-text.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useSliderContext } from './slider-context.mjs';
+
+const SliderValueText = forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const api = useSliderContext();
+  const mergedProps = mergeProps(api.valueTextProps, rest);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || api.value.join(", ") });
+});
+SliderValueText.displayName = "SliderValueText";
+
+export { SliderValueText };

package/slider/slider.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 UseSliderProps, type UseSliderReturn } from './use-slider';
-export interface SliderProps extends Assign<HTMLArkProps<'div'>, UseSliderProps & {
-    children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
-}> {
+export interface SliderProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSliderReturn) => ReactNode);
+}>, UseSliderProps> {
 }
 export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;

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/splitter/splitter.d.ts

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
-export interface SplitterProps extends Assign<HTMLArkProps<'div'>, UseSplitterProps & {
-    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
-}> {
+export interface SplitterProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseSplitterReturn) => ReactNode);
+}>, UseSplitterProps> {
 }
 export declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;

package/switch/switch.d.ts

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSwitchProps, type UseSwitchReturn } from './use-switch';
-export interface SwitchProps extends Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
-    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
-}> {
+export interface SwitchProps extends Assign<Assign<HTMLArkProps<'label'>, {
+    children?: ReactNode | ((api: UseSwitchReturn) => ReactNode);
+}>, UseSwitchProps> {
 }
 export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;

package/switch/switch.stories.d.ts

@@ -5,6 +5,7 @@ type SwitchType = typeof Switch;
 declare const meta: Meta<SwitchType>;
 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;
 export declare const RenderProp: () => JSX.Element;

package/tabs/tab-content.cjs

@@ -10,22 +10,23 @@ const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 require('../presence/index.cjs');
-const tabPresence = require('./tab-presence.cjs');
 const tabsContext = require('./tabs-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const TabContent = react.forwardRef((props, ref) => {
-  const [presenceProps, tabContentProps] = splitPresenceProps.splitPresenceProps(props);
-  const [contentProps, localProps] = createSplitProps.createSplitProps()(tabContentProps, ["value"]);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabPresence.TabPresence, { ...presenceProps, ...contentProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerTabContent, { ref, ...contentProps, ...localProps }) });
-});
-TabContent.displayName = "TabContent";
-const InnerTabContent = react.forwardRef((props, ref) => {
-  const [tabContentProps, divProps] = createSplitProps.createSplitProps()(props, ["value"]);
+  const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
   const api = tabsContext.useTabsContext();
-  const mergedProps = react$1.mergeProps(api.getContentProps(tabContentProps), divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  const presenceProps = presencePropsContext.usePresencePropsContext();
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.value === props.value });
+  const mergedProps = react$1.mergeProps(
+    api.getContentProps(contentProps),
+    presenceApi.getPresenceProps(ref),
+    localProps
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: presenceApi.isUnmounted ? null : /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps }) });
 });
-InnerTabContent.displayName = "InnerTabContent";
+TabContent.displayName = "TabContent";
 
 exports.TabContent = TabContent;

package/tabs/tab-content.d.ts

@@ -2,9 +2,7 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="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' | 'fallback'> {
+import type { Assign } from '../types';
+export interface TabContentProps extends Assign<HTMLArkProps<'div'>, ContentProps> {
 }
 export declare const TabContent: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
-type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;
-export {};

package/tabs/tab-content.mjs

@@ -6,22 +6,23 @@ import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import '../presence/index.mjs';
-import { TabPresence } from './tab-presence.mjs';
 import { useTabsContext } from './tabs-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const TabContent = forwardRef((props, ref) => {
-  const [presenceProps, tabContentProps] = splitPresenceProps(props);
-  const [contentProps, localProps] = createSplitProps()(tabContentProps, ["value"]);
-  return /* @__PURE__ */ jsx(TabPresence, { ...presenceProps, ...contentProps, children: /* @__PURE__ */ jsx(InnerTabContent, { ref, ...contentProps, ...localProps }) });
-});
-TabContent.displayName = "TabContent";
-const InnerTabContent = forwardRef((props, ref) => {
-  const [tabContentProps, divProps] = createSplitProps()(props, ["value"]);
+  const [contentProps, localProps] = createSplitProps()(props, ["value"]);
   const api = useTabsContext();
-  const mergedProps = mergeProps(api.getContentProps(tabContentProps), divProps);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  const presenceProps = usePresencePropsContext();
+  const presenceApi = usePresence({ ...presenceProps, present: api.value === props.value });
+  const mergedProps = mergeProps(
+    api.getContentProps(contentProps),
+    presenceApi.getPresenceProps(ref),
+    localProps
+  );
+  return /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: presenceApi.isUnmounted ? null : /* @__PURE__ */ jsx(ark.div, { ...mergedProps }) });
 });
-InnerTabContent.displayName = "InnerTabContent";
+TabContent.displayName = "TabContent";
 
 export { TabContent };

package/tabs/tabs.cjs

@@ -8,11 +8,15 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const tabsContext = require('./tabs-context.cjs');
 const useTabs = require('./use-tabs.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presencePropsContext = require('../presence/presence-props-context.cjs');
 
 const Tabs = react.forwardRef((props, ref) => {
-  const [useTabsProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [presenceProps, tabsProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useTabsProps, localprops] = createSplitProps.createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
     "dir",
@@ -27,8 +31,8 @@ const Tabs = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useTabs.useTabs(useTabsProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const mergedProps = react$1.mergeProps(api.rootProps, localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
 });
 Tabs.displayName = "Tabs";
 

package/tabs/tabs.d.ts

@@ -1,8 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
 import { type Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';
-export interface TabsProps extends Assign<HTMLArkProps<'div'>, UseTabsProps> {
+export interface TabsProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
 }
 export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs.mjs

@@ -4,11 +4,15 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { TabsProvider } from './tabs-context.mjs';
 import { useTabs } from './use-tabs.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 
 const Tabs = forwardRef((props, ref) => {
-  const [useTabsProps, divProps] = createSplitProps()(props, [
+  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
     "activationMode",
     "defaultValue",
     "dir",
@@ -23,8 +27,8 @@ const Tabs = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useTabs(useTabsProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const mergedProps = mergeProps(api.rootProps, localprops);
+  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
 });
 Tabs.displayName = "Tabs";
 

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

@@ -1,10 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/tags-input';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export interface TagsInputItemProps extends ItemProps, Assign<HTMLArkProps<'div'>, {
-    children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
-}> {
+export interface TagsInputItemProps extends Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((state: ItemState) => ReactNode);
+}>, ItemProps {
 }
 export declare const TagsInputItem: ForwardRefExoticComponent<TagsInputItemProps & RefAttributes<HTMLDivElement>>;

package/tags-input/tags-input.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 UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
-export interface TagsInputProps extends Assign<Assign<HTMLArkProps<'input'>, UseTagsInputProps>, {
-    children?: ReactNode | ((pages: UseTagsInputReturn) => ReactNode);
-}> {
+export interface TagsInputProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseTagsInputReturn) => ReactNode);
+}>, UseTagsInputProps> {
 }
 export declare const TagsInput: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -1,5 +1,9 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-declare const meta: Meta;
+import { Toast } from './';
+type ToastType = typeof Toast;
+declare const meta: Meta<ToastType>;
 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;