@ark-ui/react 0.7.1 → 0.7.3

package/tooltip/use-tooltip.d.ts

@@ -0,0 +1,21 @@
+import type { DetailedHTMLProps, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+import * as tooltip from '@zag-js/tooltip';
+import { type Optional } from '../types';
+export type UseTooltipProps = Optional<tooltip.Context, 'id'>;
+export declare const useTooltip: (props: UseTooltipProps) => {
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+    getAnimationState(): {
+        enter: boolean;
+        exit: boolean;
+    };
+    setPositioning(options?: Partial<tooltip.PositioningOptions> | undefined): void;
+    triggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    arrowProps: HTMLAttributes<HTMLElement>;
+    arrowTipProps: HTMLAttributes<HTMLElement>;
+    positionerProps: HTMLAttributes<HTMLElement>;
+    contentProps: HTMLAttributes<HTMLElement>;
+    labelProps: HTMLAttributes<HTMLElement>;
+};
+export type UseTooltipReturn = ReturnType<typeof useTooltip>;

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 };