@yamada-ui/transitions/dist/chunk-B2U5MNXA.mjs

Yamada UI transitions components

"use client"

// src/airy.tsx
import {
  omitThemeProps,
  useComponentStyle,
  useCreateVars
} from "@yamada-ui/core";
import { motion, motionForwardRef, useMotionAnimation } from "@yamada-ui/motion";
import { useControllableState } from "@yamada-ui/use-controllable-state";
import { cx, dataAttr } from "@yamada-ui/utils";
import { useCallback } from "react";
import { jsx } from "react/jsx-runtime";
var Airy = motionForwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentStyle("Airy", props);
  const {
    className,
    defaultValue = "from",
    delay = 0,
    isDisabled,
    disabled = isDisabled,
    duration = 0.2,
    from,
    isReadOnly,
    readOnly = isReadOnly,
    to,
    value: valueProp,
    onChange: onChangeProp,
    ...rest
  } = omitThemeProps(mergedProps);
  const [vars, { opacity }] = useCreateVars(
    { opacity: 1, ...styles, ...rest },
    ["opacity"],
    { transform: true }
  );
  const animate = useMotionAnimation();
  const [value, setValue] = useControllableState({
    defaultValue,
    value: valueProp,
    onChange: onChangeProp
  });
  const css = {
    vars,
    ...styles
  };
  const onClick = useCallback(async () => {
    if (readOnly) return;
    await animate.start({ opacity: 0, transition: { delay, duration } });
    setValue((prev) => prev === "from" ? "to" : "from");
    await animate.start({ opacity, transition: { duration } });
  }, [animate, setValue, readOnly, opacity, duration, delay]);
  return /* @__PURE__ */ jsx(
    motion.button,
    {
      ref,
      type: "button",
      className: cx("ui-airy", `ui-airy--${value}`, className),
      "data-disabled": dataAttr(disabled),
      "data-readonly": dataAttr(readOnly),
      "data-value": value,
      animate,
      disabled,
      initial: { opacity },
      onClick,
      __css: css,
      ...rest,
      children: value === "from" ? from : to
    }
  );
});
Airy.displayName = "Airy";
Airy.__ui__ = "Airy";

export {
  Airy
};
//# sourceMappingURL=chunk-B2U5MNXA.mjs.map