@ark-ui/react 1.0.1 → 1.2.0

package/rating-group/use-rating-group.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const ratingGroup = require('@zag-js/rating-group');
+const rating = require('@zag-js/rating-group');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 require('../environment/index.cjs');
@@ -27,7 +27,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
-const ratingGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(ratingGroup);
+const rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 
 const useRatingGroup = (props) => {
   const initialContext = {
@@ -42,10 +42,10 @@ const useRatingGroup = (props) => {
     onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
     onHoverChange: useEvent.useEvent(props.onHoverChange)
   };
-  const [state, send] = react$1.useMachine(ratingGroup__namespace.machine(initialContext), {
+  const [state, send] = react$1.useMachine(rating__namespace.machine(initialContext), {
     context
   });
-  return ratingGroup__namespace.connect(state, send, react$1.normalizeProps);
+  return rating__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useRatingGroup = useRatingGroup;

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

@@ -1,12 +1,12 @@
-import * as ratingGroup from '@zag-js/rating-group';
+import * as rating from '@zag-js/rating-group';
 import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
-export interface UseRatingGroupProps extends Optional<ratingGroup.Context, 'id'> {
+export interface UseRatingGroupProps extends Optional<rating.Context, 'id'> {
     /**
      * The initial value of the rating group.
      */
-    defaultValue?: ratingGroup.Context['value'];
+    defaultValue?: rating.Context['value'];
 }
-export interface UseRatingGroupReturn extends ratingGroup.Api<PropTypes> {
+export interface UseRatingGroupReturn extends rating.Api<PropTypes> {
 }
 export declare const useRatingGroup: (props: UseRatingGroupProps) => UseRatingGroupReturn;

package/rating-group/use-rating-group.mjs

@@ -1,5 +1,5 @@
 'use client';
-import * as ratingGroup from '@zag-js/rating-group';
+import * as rating from '@zag-js/rating-group';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import { useId } from 'react';
 import '../environment/index.mjs';
@@ -19,10 +19,10 @@ const useRatingGroup = (props) => {
     onValueChange: useEvent(props.onValueChange, { sync: true }),
     onHoverChange: useEvent(props.onHoverChange)
   };
-  const [state, send] = useMachine(ratingGroup.machine(initialContext), {
+  const [state, send] = useMachine(rating.machine(initialContext), {
     context
   });
-  return ratingGroup.connect(state, send, normalizeProps);
+  return rating.connect(state, send, normalizeProps);
 };
 
 export { useRatingGroup };

package/segment-group/segment-group-indicator.cjs

@@ -4,18 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupIndicator = react.forwardRef(
   (props, ref) => {
     const api = segmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       api.indicatorProps,
-      segmentGroup_anatomy.parts.indicator.attrs,
+      anatomy.segmentGroupAnatomy.build().indicator.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/segment-group/segment-group-indicator.mjs

@@ -1,17 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupIndicator = forwardRef(
   (props, ref) => {
     const api = useSegmentGroupContext();
     const mergedProps = mergeProps(
       api.indicatorProps,
-      parts.indicator.attrs,
+      segmentGroupAnatomy.build().indicator.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/segment-group/segment-group-item-context.d.ts

@@ -1,18 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-export interface ItemProps {
-    value: string;
-    disabled?: boolean;
-    invalid?: boolean;
-}
-export interface ItemState {
-    isInvalid: boolean;
-    isDisabled: boolean;
-    isChecked: boolean;
-    isFocused: boolean;
-    isHovered: boolean;
-    isActive: boolean;
-}
+import type { ItemProps } from '@zag-js/radio-group';
 export interface SegmentGroupItemContext extends ItemProps {
 }
 export declare const SegmentGroupItemProvider: Provider<SegmentGroupItemContext>, useSegmentGroupItemContext: () => SegmentGroupItemContext;

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

@@ -4,12 +4,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroupItemContext = require('./segment-group-item-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupItemControl = react.forwardRef(
   (props, ref) => {
@@ -17,7 +17,7 @@ const SegmentGroupItemControl = react.forwardRef(
     const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
     const mergedProps = react$1.mergeProps(
       api.getItemControlProps(itemProps),
-      segmentGroup_anatomy.parts.itemControl.attrs,
+      anatomy.segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/segment-group/segment-group-item-control.mjs

@@ -1,11 +1,11 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupItemControl = forwardRef(
   (props, ref) => {
@@ -13,7 +13,7 @@ const SegmentGroupItemControl = forwardRef(
     const itemProps = useSegmentGroupItemContext();
     const mergedProps = mergeProps(
       api.getItemControlProps(itemProps),
-      parts.itemControl.attrs,
+      segmentGroupAnatomy.build().itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [

package/segment-group/segment-group-item-text.cjs

@@ -4,12 +4,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroupItemContext = require('./segment-group-item-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupItemText = react.forwardRef(
   (props, ref) => {
@@ -17,7 +17,7 @@ const SegmentGroupItemText = react.forwardRef(
     const itemProps = segmentGroupItemContext.useSegmentGroupItemContext();
     const mergedProps = react$1.mergeProps(
       api.getItemTextProps(itemProps),
-      segmentGroup_anatomy.parts.itemText.attrs,
+      anatomy.segmentGroupAnatomy.build().itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });

package/segment-group/segment-group-item-text.mjs

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { useSegmentGroupItemContext } from './segment-group-item-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupItemText = forwardRef(
   (props, ref) => {
@@ -13,7 +13,7 @@ const SegmentGroupItemText = forwardRef(
     const itemProps = useSegmentGroupItemContext();
     const mergedProps = mergeProps(
       api.getItemTextProps(itemProps),
-      parts.itemText.attrs,
+      segmentGroupAnatomy.build().itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });

package/segment-group/segment-group-item.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
@@ -11,7 +12,6 @@ const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroupItemContext = require('./segment-group-item-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupItem = react.forwardRef(
   (props, ref) => {
@@ -22,12 +22,12 @@ const SegmentGroupItem = react.forwardRef(
     const api = segmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       api.getItemProps(itemProps),
-      segmentGroup_anatomy.parts.item.attrs,
+      anatomy.segmentGroupAnatomy.build().item.attrs,
       localProps
     );
     const itemState = api.getItemState(itemProps);
     const view = runIfFn.runIfFn(children, itemState);
-    return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupItemContext.SegmentGroupItemProvider, { value: props, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupItemContext.SegmentGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
   }
 );
 SegmentGroupItem.displayName = "SegmentGroupItem";

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

@@ -1,9 +1,10 @@
+import type { ItemState } from '@zag-js/radio-group';
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { type ItemState, type SegmentGroupItemContext } from './segment-group-item-context';
+import { type SegmentGroupItemContext } from './segment-group-item-context';
 export interface SegmentGroupItemProps extends Assign<HTMLArkProps<'label'>, {
-    children?: ReactNode | ((state: ItemState) => ReactNode);
+    children?: ((state: ItemState) => ReactNode) | ReactNode;
 }>, SegmentGroupItemContext {
 }
 export declare const SegmentGroupItem: ForwardRefExoticComponent<SegmentGroupItemProps & RefAttributes<HTMLLabelElement>>;

package/segment-group/segment-group-item.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -7,7 +8,6 @@ import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { SegmentGroupItemProvider } from './segment-group-item-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupItem = forwardRef(
   (props, ref) => {
@@ -18,12 +18,12 @@ const SegmentGroupItem = forwardRef(
     const api = useSegmentGroupContext();
     const mergedProps = mergeProps(
       api.getItemProps(itemProps),
-      parts.item.attrs,
+      segmentGroupAnatomy.build().item.attrs,
       localProps
     );
     const itemState = api.getItemState(itemProps);
     const view = runIfFn(children, itemState);
-    return /* @__PURE__ */ jsx(SegmentGroupItemProvider, { value: props, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+    return /* @__PURE__ */ jsx(SegmentGroupItemProvider, { value: itemProps, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
   }
 );
 SegmentGroupItem.displayName = "SegmentGroupItem";

package/segment-group/segment-group-label.cjs

@@ -4,18 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
 const SegmentGroupLabel = react.forwardRef(
   (props, ref) => {
     const api = segmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       api.labelProps,
-      segmentGroup_anatomy.parts.label.attrs,
+      anatomy.segmentGroupAnatomy.build().label.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });

package/segment-group/segment-group-label.mjs

@@ -1,17 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 
 const SegmentGroupLabel = forwardRef(
   (props, ref) => {
     const api = useSegmentGroupContext();
     const mergedProps = mergeProps(
       api.labelProps,
-      parts.label.attrs,
+      segmentGroupAnatomy.build().label.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });

package/segment-group/segment-group.cjs

@@ -4,16 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
-const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 
 const SegmentGroup = react.forwardRef((props, ref) => {
-  const [useSegmentGroupProps, divProps] = createSplitProps.createSplitProps()(props, [
+  const [useSegmentGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -29,8 +29,8 @@ const SegmentGroup = react.forwardRef((props, ref) => {
   const api = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
   const mergedProps = react$1.mergeProps(
     api.rootProps,
-    segmentGroup_anatomy.parts.root.attrs,
-    divProps
+    anatomy.segmentGroupAnatomy.build().root.attrs,
+    localProps
   );
   return /* @__PURE__ */ jsxRuntime.jsx(segmentGroupContext.SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });

package/segment-group/segment-group.mjs

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { SegmentGroupProvider } from './segment-group-context.mjs';
-import { parts } from './segment-group.anatomy.mjs';
 import { useSegmentGroup } from './use-segment-group.mjs';
 
 const SegmentGroup = forwardRef((props, ref) => {
-  const [useSegmentGroupProps, divProps] = createSplitProps()(props, [
+  const [useSegmentGroupProps, localProps] = createSplitProps()(props, [
     "defaultValue",
     "dir",
     "disabled",
@@ -25,8 +25,8 @@ const SegmentGroup = forwardRef((props, ref) => {
   const api = useSegmentGroup(useSegmentGroupProps);
   const mergedProps = mergeProps(
     api.rootProps,
-    parts.root.attrs,
-    divProps
+    segmentGroupAnatomy.build().root.attrs,
+    localProps
   );
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });

package/select/select-item-group.cjs

@@ -11,9 +11,9 @@ const factory = require('../factory.cjs');
 const selectContext = require('./select-context.cjs');
 
 const SelectItemGroup = react.forwardRef((props, ref) => {
-  const [itemPropsProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
+  const [itemGroupProps, localProps] = createSplitProps.createSplitProps()(props, ["id"]);
   const api = selectContext.useSelectContext();
-  const mergedProps = react$1.mergeProps(api.getItemGroupProps(itemPropsProps), localProps);
+  const mergedProps = react$1.mergeProps(api.getItemGroupProps(itemGroupProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 SelectItemGroup.displayName = "SelectItemGroup";

package/select/select-item-group.mjs

@@ -7,9 +7,9 @@ import { ark } from '../factory.mjs';
 import { useSelectContext } from './select-context.mjs';
 
 const SelectItemGroup = forwardRef((props, ref) => {
-  const [itemPropsProps, localProps] = createSplitProps()(props, ["id"]);
+  const [itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
   const api = useSelectContext();
-  const mergedProps = mergeProps(api.getItemGroupProps(itemPropsProps), localProps);
+  const mergedProps = mergeProps(api.getItemGroupProps(itemGroupProps), localProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 SelectItemGroup.displayName = "SelectItemGroup";

package/select/select.cjs

@@ -52,7 +52,7 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect.useSelect(useSelectProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react$1.mergeProps({ present: api.isOpen }, presenceProps));
   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(presenceContext.PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) }) });

package/select/select.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type UsePresenceProps } from '../presence';
 import { type Assign, type CollectionItem } from '../types';

package/select/select.mjs

@@ -48,7 +48,7 @@ const SelectImpl = (props, ref) => {
     ]
   );
   const api = useSelect(useSelectProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, localProps);
   return /* @__PURE__ */ jsx(SelectProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) }) });

package/select/select.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Basic: () => JSX.Element;
 export declare const Advanced: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
+export declare const FormLibrary: () => JSX.Element;

package/slider/slider.stories.d.ts

@@ -5,6 +5,7 @@ type SliderType = typeof Slider;
 declare const meta: Meta<SliderType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Range: () => JSX.Element;
 export declare const WithMarks: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
 export declare const MinMax: () => JSX.Element;
@@ -12,4 +13,3 @@ 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/switch/switch.cjs

@@ -13,7 +13,7 @@ const switchContext = require('./switch-context.cjs');
 const useSwitch = require('./use-switch.cjs');
 
 const Switch = react.forwardRef((props, ref) => {
-  const [switchProps, { children, ...labelProps }] = createSplitProps.createSplitProps()(props, [
+  const [switchProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "checked",
     "defaultChecked",
     "dir",
@@ -30,8 +30,8 @@ const Switch = react.forwardRef((props, ref) => {
     "value"
   ]);
   const api = useSwitch.useSwitch(switchProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
   const view = runIfFn.runIfFn(children, api);
-  const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
   return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
 Switch.displayName = "Switch";

package/switch/switch.mjs

@@ -9,7 +9,7 @@ import { SwitchProvider } from './switch-context.mjs';
 import { useSwitch } from './use-switch.mjs';
 
 const Switch = forwardRef((props, ref) => {
-  const [switchProps, { children, ...labelProps }] = createSplitProps()(props, [
+  const [switchProps, { children, ...localProps }] = createSplitProps()(props, [
     "checked",
     "defaultChecked",
     "dir",
@@ -26,8 +26,8 @@ const Switch = forwardRef((props, ref) => {
     "value"
   ]);
   const api = useSwitch(switchProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
   const view = runIfFn(children, api);
-  const mergedProps = mergeProps(api.rootProps, labelProps);
   return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
 Switch.displayName = "Switch";

package/toast/create-toaster.cjs

@@ -8,8 +8,8 @@ const react = require('@zag-js/react');
 const toast = require('@zag-js/toast');
 const react$1 = require('react');
 require('../environment/index.cjs');
-const factory = require('../factory.cjs');
 const toastContext = require('./toast-context.cjs');
+const toastGroup = require('./toast-group.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -45,7 +45,7 @@ const createToaster = (props) => {
     }, []);
     const mergedProps = react.mergeProps(api.getGroupProps({ placement }), props2);
     const toasts = api.toastsByPlacement[placement] ?? [];
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(toastGroup.ToastGroup, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
   return [Toaster, api];

package/toast/create-toaster.d.ts

@@ -1,6 +1,6 @@
 import { type PropTypes } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
-import React from 'react';
+import { type JSX } from 'react';
 import type { Optional } from '../types';
 type GroupContext = Partial<toast.GroupMachineContext>;
 export interface CreateToasterProps extends Omit<Optional<GroupContext, 'id'>, 'render'> {

package/toast/create-toaster.mjs

@@ -4,8 +4,8 @@ import { normalizeProps, useActor, mergeProps } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 import { forwardRef, useEffect } from 'react';
 import '../environment/index.mjs';
-import { ark } from '../factory.mjs';
 import { ToastProvider } from './toast-context.mjs';
+import { ToastGroup } from './toast-group.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const createToaster = (props) => {
@@ -22,7 +22,7 @@ const createToaster = (props) => {
     }, []);
     const mergedProps = mergeProps(api.getGroupProps({ placement }), props2);
     const toasts = api.toastsByPlacement[placement] ?? [];
-    return /* @__PURE__ */ jsx(ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+    return /* @__PURE__ */ jsx(ToastGroup, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
   return [Toaster, api];

package/toast/index.cjs

@@ -7,17 +7,20 @@ const createToaster = require('./create-toaster.cjs');
 const toast = require('./toast.cjs');
 const toastCloseTrigger = require('./toast-close-trigger.cjs');
 const toastDescription = require('./toast-description.cjs');
+const toastGroup = require('./toast-group.cjs');
 const toastTitle = require('./toast-title.cjs');
 
 const Toast = Object.assign(toast.Toast, {
   Root: toast.Toast,
-  Title: toastTitle.ToastTitle,
+  CloseTrigger: toastCloseTrigger.ToastCloseTrigger,
   Description: toastDescription.ToastDescription,
-  CloseTrigger: toastCloseTrigger.ToastCloseTrigger
+  Group: toastGroup.ToastGroup,
+  Title: toastTitle.ToastTitle
 });
 
 exports.createToaster = createToaster.createToaster;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;
 exports.ToastDescription = toastDescription.ToastDescription;
+exports.ToastGroup = toastGroup.ToastGroup;
 exports.ToastTitle = toastTitle.ToastTitle;
 exports.Toast = Toast;

package/toast/index.d.ts

@@ -4,12 +4,14 @@ import { createToaster, type CreateToasterProps, type CreateToasterReturn } from
 import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
+import { ToastGroup, type ToastGroupProps } from './toast-group';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
 declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>> & {
     Root: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>>;
-    Title: ForwardRefExoticComponent<ToastTitleProps & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<ToastDescriptionProps & RefAttributes<HTMLDivElement>>;
     CloseTrigger: ForwardRefExoticComponent<ToastCloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Description: ForwardRefExoticComponent<ToastDescriptionProps & RefAttributes<HTMLDivElement>>;
+    Group: ForwardRefExoticComponent<ToastGroupProps & RefAttributes<HTMLOListElement>>;
+    Title: ForwardRefExoticComponent<ToastTitleProps & RefAttributes<HTMLDivElement>>;
 };
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
-export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastProps, ToastTitleProps, };
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastProps, ToastTitleProps, };

package/toast/index.mjs

@@ -3,13 +3,15 @@ export { createToaster } from './create-toaster.mjs';
 import { Toast as Toast$1 } from './toast.mjs';
 import { ToastCloseTrigger } from './toast-close-trigger.mjs';
 import { ToastDescription } from './toast-description.mjs';
+import { ToastGroup } from './toast-group.mjs';
 import { ToastTitle } from './toast-title.mjs';
 
 const Toast = Object.assign(Toast$1, {
   Root: Toast$1,
-  Title: ToastTitle,
+  CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
-  CloseTrigger: ToastCloseTrigger
+  Group: ToastGroup,
+  Title: ToastTitle
 });
 
-export { Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
+export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };