@ark-ui/react 0.7.2 → 0.7.3

package/toast/toast-placements.cjs

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+require('@zag-js/toast');
+require('react');
 const runIfFn = require('../run-if-fn.cjs');
 const toastProvider = require('./toast-provider.cjs');
 

package/toast/toast-placements.mjs

@@ -1,4 +1,6 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
+import '@zag-js/toast';
+import 'react';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useToast } from './toast-provider.mjs';
 

package/toast/toast.cjs

@@ -11,10 +11,14 @@ const toastItemContext = require('./toast-item-context.cjs');
 const useToastItem = require('./use-toast-item.cjs');
 
 const Toast = forwardRef.forwardRef((props, ref) => {
-  const [useToastItemProps, divProps] = createSplitProps.createSplitProps()(props, ["toast"]);
+  const [useToastItemProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    ["toast"]
+  );
   const api = useToastItem.useToastItem(useToastItemProps);
   const mergedProps = react.mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(toastItemContext.ToastItemProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const customToast = api.render();
+  return /* @__PURE__ */ jsxRuntime.jsx(toastItemContext.ToastItemProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: customToast || children }) });
 });
 
 exports.Toast = Toast;

package/toast/toast.mjs

@@ -7,10 +7,14 @@ import { ToastItemProvider } from './toast-item-context.mjs';
 import { useToastItem } from './use-toast-item.mjs';
 
 const Toast = forwardRef((props, ref) => {
-  const [useToastItemProps, divProps] = createSplitProps()(props, ["toast"]);
+  const [useToastItemProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    ["toast"]
+  );
   const api = useToastItem(useToastItemProps);
   const mergedProps = mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsx(ToastItemProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const customToast = api.render();
+  return /* @__PURE__ */ jsx(ToastItemProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: customToast || children }) });
 });
 
 export { Toast };

package/tooltip/index.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const tooltip = require('./tooltip.cjs');
+const tooltipArrow = require('./tooltip-arrow.cjs');
+const tooltipArrowTip = require('./tooltip-arrow-tip.cjs');
+const tooltipContent = require('./tooltip-content.cjs');
+const tooltipPositioner = require('./tooltip-positioner.cjs');
+const tooltipTrigger = require('./tooltip-trigger.cjs');
+const tooltip$1 = require('@zag-js/tooltip');
+
+
+
+exports.Tooltip = tooltip.Tooltip;
+exports.TooltipArrow = tooltipArrow.TooltipArrow;
+exports.TooltipArrowTip = tooltipArrowTip.TooltipArrowTip;
+exports.TooltipContent = tooltipContent.TooltipContent;
+exports.TooltipPositioner = tooltipPositioner.TooltipPositioner;
+exports.TooltipTrigger = tooltipTrigger.TooltipTrigger;
+Object.defineProperty(exports, 'tooltipAnatomy', {
+	enumerable: true,
+	get: () => tooltip$1.anatomy
+});

package/tooltip/index.mjs

@@ -0,0 +1,7 @@
+export { Tooltip } from './tooltip.mjs';
+export { TooltipArrow } from './tooltip-arrow.mjs';
+export { TooltipArrowTip } from './tooltip-arrow-tip.mjs';
+export { TooltipContent } from './tooltip-content.mjs';
+export { TooltipPositioner } from './tooltip-positioner.mjs';
+export { TooltipTrigger } from './tooltip-trigger.mjs';
+export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';

package/tooltip/tooltip.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+require('react');
 const runIfFn = require('../run-if-fn.cjs');
 const tooltipContext = require('./tooltip-context.cjs');
 const useTooltip = require('./use-tooltip.cjs');

package/tooltip/tooltip.mjs

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import 'react';
 import { runIfFn } from '../run-if-fn.mjs';
 import { TooltipProvider } from './tooltip-context.mjs';
 import { useTooltip } from './use-tooltip.mjs';

package/transition/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const transition = require('./transition.cjs');
+const useTransition = require('./use-transition.cjs');
+
+
+
+exports.Transition = transition.Transition;
+exports.useTransition = useTransition.useTransition;

package/transition/index.d.ts

@@ -0,0 +1,2 @@
+export { Transition, type TransitionProps } from './transition';
+export { useTransition, type UseTransitionProps } from './use-transition';

package/transition/index.mjs

@@ -0,0 +1,2 @@
+export { Transition } from './transition.mjs';
+export { useTransition } from './use-transition.mjs';

package/transition/transition.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const useTransition = require('./use-transition.cjs');
+
+const Transition = (props) => {
+  const { unmountOnExit, children, ...useTransitionProps } = props;
+  const { style, hidden } = useTransition.useTransition(useTransitionProps);
+  const child = React.Children.only(children);
+  if (unmountOnExit && hidden) {
+    return null;
+  }
+  if (typeof child === "function") {
+    return child({ style, hidden });
+  }
+  const jsxChild = child;
+  return React.cloneElement(jsxChild, {
+    style: {
+      ...jsxChild.props.style,
+      ...style
+    },
+    hidden
+  });
+};
+
+exports.Transition = Transition;

package/transition/transition.d.ts

@@ -0,0 +1,12 @@
+import { type UseTransitionProps } from './use-transition';
+type RenderProps = {
+    hidden: boolean;
+    style: React.CSSProperties;
+};
+type TransitionChild = React.ReactNode | ((props: RenderProps) => JSX.Element);
+export type TransitionProps = UseTransitionProps & {
+    unmountOnExit?: boolean;
+    children?: TransitionChild;
+};
+export declare const Transition: (props: TransitionProps) => JSX.Element | null;
+export {};

package/transition/transition.mjs

@@ -0,0 +1,24 @@
+import { Children, cloneElement } from 'react';
+import { useTransition } from './use-transition.mjs';
+
+const Transition = (props) => {
+  const { unmountOnExit, children, ...useTransitionProps } = props;
+  const { style, hidden } = useTransition(useTransitionProps);
+  const child = Children.only(children);
+  if (unmountOnExit && hidden) {
+    return null;
+  }
+  if (typeof child === "function") {
+    return child({ style, hidden });
+  }
+  const jsxChild = child;
+  return cloneElement(jsxChild, {
+    style: {
+      ...jsxChild.props.style,
+      ...style
+    },
+    hidden
+  });
+};
+
+export { Transition };

package/transition/use-transition.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('@zag-js/react');
+const transition = require('@zag-js/transition');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const transition__namespace = /*#__PURE__*/_interopNamespaceDefault(transition);
+
+const useTransition = (props) => {
+  const { enter, exit, ...machineContext } = props;
+  const [state, send] = react.useMachine(transition__namespace.machine(machineContext), { context: machineContext });
+  const api = transition__namespace.connect(state, send, react.normalizeProps);
+  const style = api.transition({
+    variants: { enter, exit }
+  });
+  return { hidden: api.unmount, style };
+};
+
+exports.useTransition = useTransition;

package/transition/use-transition.d.ts

@@ -0,0 +1,10 @@
+import type { ClassAttributes, StyleHTMLAttributes, CSSProperties } from 'react';
+import * as transition from '@zag-js/transition';
+export type UseTransitionProps = transition.Context & {
+    enter: React.CSSProperties;
+    exit: React.CSSProperties;
+};
+export declare const useTransition: (props: UseTransitionProps) => {
+    hidden: boolean;
+    style: ClassAttributes<HTMLStyleElement> & StyleHTMLAttributes<HTMLStyleElement> & CSSProperties;
+};

package/transition/use-transition.mjs

@@ -0,0 +1,14 @@
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as transition from '@zag-js/transition';
+
+const useTransition = (props) => {
+  const { enter, exit, ...machineContext } = props;
+  const [state, send] = useMachine(transition.machine(machineContext), { context: machineContext });
+  const api = transition.connect(state, send, normalizeProps);
+  const style = api.transition({
+    variants: { enter, exit }
+  });
+  return { hidden: api.unmount, style };
+};
+
+export { useTransition };