@ark-ui/react 1.1.0 → 1.2.0

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/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 }, toast2.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 }, toast2.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 };

package/toast/toast-group.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const factory = require('../factory.cjs');
+
+const ToastGroup = react.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...props, ref });
+});
+ToastGroup.displayName = "ToastGroup";
+
+exports.ToastGroup = ToastGroup;

package/toast/toast-group.d.ts

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

package/toast/toast-group.mjs

@@ -0,0 +1,11 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+
+const ToastGroup = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(ark.ol, { ...props, ref });
+});
+ToastGroup.displayName = "ToastGroup";
+
+export { ToastGroup };

package/tooltip/tooltip.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('@zag-js/react');
 require('react');
 require('../presence/index.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
@@ -16,7 +17,7 @@ const presenceContext = require('../presence/presence-context.cjs');
 const Tooltip = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps.splitPresenceProps(props);
   const api = useTooltip.useTooltip(localProps);
-  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence.usePresence(react.mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(tooltipContext.TooltipProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) });
 };

package/tooltip/tooltip.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
 import 'react';
 import '../presence/index.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
@@ -12,7 +13,7 @@ import { PresenceProvider } from '../presence/presence-context.mjs';
 const Tooltip = (props) => {
   const [presenceProps, { children, ...localProps }] = splitPresenceProps(props);
   const api = useTooltip(localProps);
-  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const presenceApi = usePresence(mergeProps({ present: api.isOpen }, presenceProps));
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(TooltipProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) });
 };

package/use-is-server.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+const useIsServer = () => {
+  const [isServer, setServer] = react.useState(true);
+  react.useEffect(() => {
+    setServer(false);
+  }, []);
+  return isServer;
+};
+
+exports.useIsServer = useIsServer;

package/use-is-server.d.ts

@@ -0,0 +1 @@
+export declare const useIsServer: () => boolean;

package/use-is-server.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { useState, useEffect } from 'react';
+
+const useIsServer = () => {
+  const [isServer, setServer] = useState(true);
+  useEffect(() => {
+    setServer(false);
+  }, []);
+  return isServer;
+};
+
+export { useIsServer };

package/segment-group/segment-group.anatomy.cjs

@@ -1,10 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const anatomy = require('@ark-ui/anatomy');
-
-const parts = anatomy.segmentGroupAnatomy.build();
-
-exports.parts = parts;

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

@@ -1,2 +0,0 @@
-import { type AnatomyPart } from '@ark-ui/anatomy';
-export declare const parts: Record<'root' | 'label' | 'item' | 'itemText' | 'itemControl' | 'indicator', AnatomyPart>;

package/segment-group/segment-group.anatomy.mjs

@@ -1,6 +0,0 @@
-'use client';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
-
-const parts = segmentGroupAnatomy.build();
-
-export { parts };